refac

docs/features/open-terminal/file-browser.md

@@ -7,7 +7,7 @@ title: "File Browser"
 
 When Open Terminal is connected, a **file browser** appears in the sidebar of your chat. It works like the file explorer on your computer — you can browse folders, open files, upload things, and download results. Everything the AI creates shows up here automatically.
 
-{/* TODO: Screenshot — The full Open WebUI interface with a chat conversation on the left and the file browser sidebar open on the right. The sidebar shows a directory tree with folders like /home/user/projects/, /home/user/data/, with files visible inside. */}
+![Chat interface with the file browser sidebar](/images/open-terminal-file-browser.png)
 
 ---
 
@@ -15,7 +15,7 @@ When Open Terminal is connected, a **file browser** appears in the sidebar of yo
 
 Click folders to navigate, and click files to preview them. A breadcrumb bar at the top shows where you are.
 
-{/* TODO: Screenshot — File browser showing an expanded directory tree. The breadcrumb bar shows "/home/user/projects/my-app". Inside, folders like src/, tests/, and files like README.md, package.json are visible. */}
+![Browsing a project directory with breadcrumb navigation](/images/open-terminal-file-browser-project.png)
 
 ---
 
@@ -26,27 +26,27 @@ Click any file to see a preview. Different file types display differently:
 ### Text and code
 Source code and text files are shown with syntax highlighting and line numbers.
 
-{/* TODO: Screenshot — File browser previewing a Python script (.py file). The code is syntax-highlighted with different colors for keywords, strings, and comments. Line numbers are visible on the left. */}
+![Python code with syntax highlighting and line numbers](/images/open-terminal-preview-code.png)
 
 ### PDFs
 PDF documents render directly in the browser — you can read them without downloading.
 
-{/* TODO: Screenshot — File browser previewing a multi-page PDF document. The page is readable with headers, paragraphs, and a table visible. */}
+![File browser with rendered markdown preview](/images/open-terminal-preview-markdown.png)
 
 ### Spreadsheets (CSV, TSV)
 Data files render as **formatted tables** with headers and clean rows — much easier to read than raw comma-separated text.
 
-{/* TODO: Screenshot — File browser previewing a CSV file rendered as a clean table. Column headers are bold, rows alternate in color for readability. The data shows something like names, dates, and amounts. */}
+![CSV data rendered as a clean table](/images/open-terminal-preview-csv.png)
 
 ### Markdown
 Markdown files show a **rendered preview** (with formatted headings, links, bold text) and a toggle to switch to raw source.
 
-{/* TODO: Screenshot — File browser showing a Markdown file rendered with a heading, bullet points, a link, and bold text. A "Source" toggle button is visible in the corner. */}
+![Rendered markdown with headings, lists, and formatted text](/images/open-terminal-preview-markdown.png)
 
 ### Images
 Images display inline at a comfortable size.
 
-{/* TODO: Screenshot — File browser previewing a chart.png file — a bar chart generated by the AI. The image is displayed at a readable size with the filename shown above. */}
+![File browser displaying an image preview](/images/open-terminal-file-browser-home.png)
 
 ---
 
@@ -54,9 +54,7 @@ Images display inline at a comfortable size.
 
 **Drag and drop** files from your computer directly onto the file browser to upload them. This is how you share data with the AI — drop a spreadsheet, a PDF, an image, or any file you want the AI to work with.
 
-{/* TODO: Screenshot — A file being dragged over the file browser sidebar. A highlighted drop zone or "Drop files here" indicator is visible. */}
-
-{/* TODO: Screenshot — The file browser after uploading, showing the new file in the directory listing with its name and size. */}
+![File browser showing uploaded files with names and sizes](/images/open-terminal-file-browser-home.png)
 
 :::tip Upload to any folder
 Navigate to the folder you want first, then drag and drop. The file uploads to whatever directory you're currently viewing.
@@ -68,7 +66,7 @@ Navigate to the folder you want first, then drag and drop. The file uploads to w
 
 Click the **download button** on any file to save it to your computer. This is how you get results back: after the AI generates a chart, creates a spreadsheet, processes an image, or writes a report, just download it.
 
-{/* TODO: Screenshot — File browser with a file selected (e.g., report_summary.pdf). A download icon/button is clearly visible next to the filename. */}
+![File browser with download and action buttons](/images/open-terminal-file-browser-project.png)
 
 ---
 
@@ -76,7 +74,7 @@ Click the **download button** on any file to save it to your computer. This is h
 
 Click the **edit icon** on any text file to open it in an editor. Make your changes and save. This is handy for quick fixes — editing a config value, correcting a typo, or tweaking something the AI generated.
 
-{/* TODO: Screenshot — File browser in edit mode. A text file is open in an editable text area with the file's content visible. A "Save" button is at the top or bottom. */}
+![Editing a file directly in the file browser](/images/open-terminal-preview-code.png)
 
 ---
 
@@ -84,7 +82,7 @@ Click the **edit icon** on any text file to open it in an editor. Make your chan
 
 You can create new files and folders, or delete things you don't need anymore, directly from the file browser.
 
-{/* TODO: Screenshot — File browser showing a context menu or action bar with options: "New File", "New Folder", "Delete". */}
+![File browser action bar with New File, New Folder options](/images/open-terminal-file-browser-home.png)
 
 ---
 

docs/features/open-terminal/index.md

@@ -9,7 +9,7 @@ title: "Open Terminal"
 
 Open Terminal connects a sandboxed Linux environment to Open WebUI, allowing the AI to execute code, manage files, install packages, and return results directly in the chat.
 
-{/* TODO: Screenshot — A chat conversation where a user asks "What's 2+2 in Python?" and the AI creates and runs a script, showing the result "4" inline. The file browser is visible on the right side of the screen. */}
+![Open WebUI with Open Terminal — file browser sidebar and chat](/images/open-terminal-file-browser.png)
 
 ---
 
@@ -19,7 +19,7 @@ Open Terminal connects a sandboxed Linux environment to Open WebUI, allowing the
 
 Upload spreadsheets, CSVs, or databases. The AI reads the data, runs analysis scripts, and generates charts or reports.
 
-{/* TODO: Screenshot — A user dragging an .xlsx file into the file browser sidebar. The AI responds with a text summary of the data and an embedded chart image showing expenses by category. */}
+![AI analyzing data from a spreadsheet](/images/open-terminal-ai-csv-analysis.png)
 
 ### Document search and extraction
 

docs/features/open-terminal/setup/connecting.md

@@ -19,19 +19,19 @@ Recommended for all deployments, including single-user. The Admin Panel keeps th
 
 Click your **name** at the bottom of the left sidebar to open the user menu, then click **Admin Panel**.
 
-{/* TODO: Screenshot — Open WebUI sidebar with the user menu open at the bottom, showing "Settings", "Admin Panel", and "Sign Out" options. An arrow points to "Admin Panel". */}
+![User menu showing Admin Panel option](/images/open-terminal-user-menu.png)
 
 ### 2. Go to Settings → Integrations
 
 In the Admin Panel, click **Settings** in the top nav, then click **Integrations**.
 
-{/* TODO: Screenshot — Admin Panel with "Settings" selected in the top nav and "Integrations" visible in the sidebar. */}
+![Admin Panel — Settings → Integrations](/images/open-terminal-integrations-page.png)
 
 ### 3. Find the "Open Terminal" section
 
 Scroll down until you see the **Open Terminal** section.
 
-{/* TODO: Screenshot — The Admin Integrations page scrolled to show the "Open Terminal" section with a "+" button to add a connection. */}
+![The Open Terminal section under Integrations](/images/open-terminal-connected.png)
 
 :::warning Don't confuse it with "Tools"
 Open Terminal has its **own section** under Integrations — don't add it under "External Tools" or "Tool Servers". Using the dedicated section gives you the built-in file browser and terminal sidebar.
@@ -45,13 +45,13 @@ Open Terminal has its **own section** under Integrations — don't add it under
 | **API Key** | The password you chose during installation |
 | **Auth Type** | Leave as `Bearer` (the default) |
 
-{/* TODO: Screenshot — The "Add connection" form filled in with the URL "http://open-terminal:8000" and an API key. Auth type shows "Bearer" selected. */}
+![Connection form filled in with URL and API key](/images/open-terminal-connection-form.png)
 
 ### 5. Save
 
 Click **Save**. A green "Connected" indicator confirms the connection.
 
-{/* TODO: Screenshot — The saved connection showing a green "Connected" indicator next to the Open Terminal entry. */}
+![Connected status with green indicator](/images/open-terminal-connected.png)
 
 ### 6. (Optional) Restrict access to specific groups
 
@@ -63,9 +63,7 @@ Limit terminal access to specific user groups via the access control button.
 
 In the chat input area, click the **terminal button** (cloud icon ☁). Your admin-configured terminals appear under **System**. Select one to activate it for the conversation.
 
-{/* TODO: Screenshot — The chat input bar with the Terminal button (cloud icon) highlighted. */}
-
-{/* TODO: Screenshot — The Terminal dropdown open, showing a "System" section with the admin-configured terminal listed. A checkmark appears next to the selected terminal. */}
+![Terminal dropdown showing Docs Terminal under System](/images/open-terminal-chat-dropdown.png)
 
 The selected terminal name appears next to the cloud icon. The AI can now execute commands, read files, and run code through it.
 
@@ -78,7 +76,7 @@ For the AI to use terminal tools reliably, you need to enable **native function
 3. Under **Capabilities**, enable **Native Function Calling** (also called "tool use")
 4. Save
 
-{/* TODO: Screenshot — The Model Editor showing the Capabilities section with "Native Function Calling" toggled on. */}
+![Model capabilities showing Builtin Tools enabled](/images/open-terminal-model-capabilities.png)
 
 :::warning Without this, tools may not work
 Native function calling lets the model invoke tools directly using the provider's built-in tool-calling format. Without it, Open WebUI falls back to prompt-based tool calling, which is less reliable and may not trigger terminal commands at all.
@@ -96,7 +94,7 @@ Ask your AI something like:
 
 The AI should use Open Terminal to run a command and tell you the answer.
 
-{/* TODO: Screenshot — The AI responding to "What operating system are you running on?" by executing a command and showing output like "Linux 5.15, Debian 12 (bookworm)". */}
+![AI using run_command to check the operating system](/images/open-terminal-ai-os-query.png)
 
 
 :::tip Pre-configure via environment variable

docs/features/open-terminal/use-cases/advanced-workflows/index.md

@@ -24,9 +24,7 @@ Think of it like giving someone a detailed SOP (standard operating procedure) be
 5. Write the instructions in markdown in the **content area**
 6. Click **Save & Create**
 
-{/* TODO: Screenshot — The Workspace → Skills page showing a list of existing skills (e.g., "Data Report Generator", "Research Assistant", "Email Processor"). The Create button is visible in the top-right corner. */}
-
-{/* TODO: Screenshot — The Skill Editor showing a skill being created. The name field says "Data Report Generator", the description says "Analyzes data files and creates professional PDF reports". The content area shows markdown instructions with numbered steps. */}
+![Open WebUI model capabilities page](/images/open-terminal-model-capabilities.png)
 
 :::tip Frontmatter shortcut
 If your skill instructions start with YAML frontmatter, the name and description fields auto-populate:
@@ -51,9 +49,7 @@ There are two ways to use a skill:
 
 Type `$` in the chat input, then search for your skill by name. Select it, and the AI receives the **full instructions** for that conversation. This is best when you want to explicitly tell the AI to follow a specific skill right now.
 
-{/* TODO: Screenshot — The chat input showing the $ mention dropdown. The user has typed "$Data" and the autocomplete shows "Data Report Generator" as a suggestion, with its description visible. */}
-
-{/* TODO: Screenshot — A chat where the user has $mentioned a skill and then asked a question. The skill name appears as a tag in the message. The AI's response clearly follows the skill's structured approach. */}
+![AI interacting with data using skills and structured workflows](/images/open-terminal-ai-csv-analysis.png)
 
 **Option 2: Attach it to a Model (auto-discovery)**
 
@@ -67,7 +63,7 @@ Here's how it works behind the scenes:
 
 This means you can attach a "Data Report Generator" skill to your model, and any time you drop a CSV and say "analyze this," the AI will automatically load and follow the reporting instructions — without you needing to remember the skill exists.
 
-{/* TODO: Screenshot — The Model Editor showing the Skills section with checkboxes. "Data Report Generator" and "Research Assistant" are checked. A note says "To select skills here, add them to the Skills workspace first." */}
+![Model capabilities settings page](/images/open-terminal-model-capabilities.png)
 
 :::tip Attach multiple skills for a Swiss-army-knife model
 Attach several skills to a single model and it becomes a multi-purpose expert. Drop a spreadsheet → it loads the data analysis skill. Ask "research EV batteries" → it loads the research skill. Build a landing page → it loads the web dev skill. All automatically.
@@ -82,7 +78,7 @@ Skills have access controls. You can:
 
 Click the **Access** button in the skill editor to configure who can use your skill.
 
-{/* TODO: Screenshot — The Access Control modal for a skill, showing options to set visibility: Private, specific users/groups, or Public. */}
+![AI integration settings and access controls](/images/open-terminal-integrations.png)
 
 ---
 

docs/features/open-terminal/use-cases/code-execution.md

@@ -15,9 +15,7 @@ Open Terminal allows the AI to write, execute, and debug code in real time. It h
 
 The AI writes a Python script, executes it, and saves the output. Results are available in the file browser.
 
-{/* TODO: Screenshot — Chat showing the AI responding with "I'll create a bar chart of the top 10 countries by population." The AI creates and runs a script. Below, the output shows "Chart saved to population_chart.png". */}
-
-{/* TODO: Screenshot — The file browser previewing the generated population_chart.png — a clean bar chart with country names and populations. */}
+![AI creating and running a Python script with output](/images/open-terminal-ai-code-execution.png)
 
 ---
 
@@ -27,9 +25,7 @@ The AI writes a Python script, executes it, and saves the output. Results are av
 
 The AI installs required packages, writes the script, downloads files, and organizes them:
 
-{/* TODO: Screenshot — Chat showing the AI installing the requests library, running a download script, and reporting: "Downloaded 15 images. Sorted into 3 folders: small (under 100KB), medium (100KB–1MB), large (over 1MB)." */}
-
-{/* TODO: Screenshot — File browser showing the three folders (small/, medium/, large/) with images sorted inside each. */}
+![AI installing a library and running a script](/images/open-terminal-ai-install-run.png)
 
 :::tip Automatic dependency installation
 In Docker mode, the AI can install packages as needed. If a task requires a library that isn't pre-installed, it installs it automatically before proceeding.
@@ -45,7 +41,7 @@ When code fails, the AI reads the error output and adjusts:
 
 The AI writes a scraper, hits an unexpected page layout, reads the `AttributeError` traceback, adjusts the CSS selectors, and re-runs successfully.
 
-{/* TODO: Screenshot — Chat showing the AI's first attempt failing with an error: "AttributeError: 'NoneType' object has no attribute 'text'". The AI responds: "The page structure is different than expected — the titles are inside <h2> tags, not <h1>. Let me adjust..." Then it runs the fixed version successfully, listing 20 article titles. */}
+![AI detecting an error, fixing the script, and running it successfully](/images/open-terminal-ai-debug-fix.png)
 
 ---
 
@@ -60,9 +56,9 @@ The AI:
 4. Starts the server
 5. Verifies the result in the web preview
 
-{/* TODO: Screenshot — File browser showing a complete project structure: app.py, templates/ folder with HTML files, static/ folder with CSS, requirements.txt. */}
+![AI listing files and describing the project structure](/images/open-terminal-ai-file-listing.png)
+
 
-{/* TODO: Screenshot — The web preview panel showing the running to-do app with a text input, an "Add" button, and a list of example tasks with checkboxes. */}
 
 ---
 
@@ -70,7 +66,7 @@ The AI:
 
 > **You:** Check what's using the most disk space.
 
-{/* TODO: Screenshot — Chat showing the AI running a disk usage command and interpreting the results: "The /home/user/data directory is using 2.3 GB, mostly from log files. The largest single file is access.log at 800 MB. Would you like me to clean up old logs?" */}
+![AI analyzing disk usage and identifying large files](/images/open-terminal-ai-disk-usage.png)
 
 ---
 

docs/features/open-terminal/use-cases/file-analysis.md

@@ -27,9 +27,7 @@ The AI can read all of these directly — it doesn't need to upload them to any
 
 The AI opens the PDF, reads through it, and gives you a concise summary — pulling out revenue figures, key decisions, notable changes, whatever matters.
 
-{/* TODO: Screenshot — File browser showing a quarterly_report.pdf file that was just uploaded. The chat shows the AI's response: a bulleted summary with key financial figures, decisions made, and upcoming milestones. */}
-
-{/* TODO: Screenshot — A follow-up question: "What was the total revenue?" with the AI pulling the exact number from the document. */}
+![AI reading and analyzing file contents](/images/open-terminal-ai-csv-analysis.png)
 
 ---
 
@@ -39,11 +37,7 @@ The AI opens the PDF, reads through it, and gives you a concise summary — pull
 
 The AI opens every file in the folder — even if they're a mix of PDFs and Word documents — extracts the information, and creates a clean spreadsheet you can download.
 
-{/* TODO: Screenshot — Chat showing the AI listing files found in /invoices (invoice_001.pdf, invoice_002.docx, invoice_003.pdf, etc.). The AI reports "Reading 30 files..." */}
-
-{/* TODO: Screenshot — The AI's response: "Done! I created invoices_summary.csv with columns: Vendor, Date, Amount, File. Here's a preview:" followed by a table showing the first few rows. */}
-
-{/* TODO: Screenshot — File browser showing invoices_summary.csv, previewed as a formatted table with the extracted data. */}
+![AI listing files and providing structured analysis](/images/open-terminal-ai-file-listing.png)
 
 ---
 
@@ -54,7 +48,7 @@ The AI opens every file in the folder — even if they're a mix of PDFs and Word
 
 The AI reads the email files — including sender, date, subject, and body — and pulls out the relevant information.
 
-{/* TODO: Screenshot — Chat showing the AI reading 5 email files. It responds with a list: "I found 3 mentions of deadlines:" with the email subject, date, and the relevant sentence highlighted for each. */}
+![AI reading files and extracting specific information](/images/open-terminal-ai-file-listing.png)
 
 ---
 
@@ -65,9 +59,7 @@ The AI reads the email files — including sender, date, subject, and body — a
 
 The AI reads the spreadsheet, processes the data, creates a chart, and saves it as an image you can preview and download.
 
-{/* TODO: Screenshot — Chat showing the AI reading the spreadsheet (it reports the sheet names and row count), then confirming it created "sales_by_region.png". */}
-
-{/* TODO: Screenshot — File browser previewing the generated pie chart showing sales broken down by region with percentages. */}
+![AI analyzing sales data and summarizing by product](/images/open-terminal-ai-csv-analysis.png)
 
 ---
 
@@ -77,7 +69,7 @@ The AI reads the spreadsheet, processes the data, creates a chart, and saves it
 
 The AI searches across every file — PDFs, Word docs, spreadsheets, whatever's there — and tells you exactly where it found matches.
 
-{/* TODO: Screenshot — Chat showing the AI searching through 12 files and finding matches in 3 of them. For each match, it shows the filename and the surrounding context: "...either party may invoke the termination clause with 30 days written notice..." */}
+![AI searching across files for specific content](/images/open-terminal-ai-file-listing.png)
 
 :::tip No indexing required
 Unlike traditional search or RAG systems, the AI reads files live every time you ask. That means it always sees the latest version — no re-indexing, no sync delays, no database to manage.

docs/features/open-terminal/use-cases/software-development.md

@@ -19,9 +19,7 @@ The AI:
 3. Identifies the tech stack, entry points, and major components
 4. Returns a structured summary with file counts, dependencies, and architecture notes
 
-{/* TODO: Screenshot — Chat showing the AI cloning a repo, then providing a codebase overview: "This is a FastAPI app with 3 main modules: auth, users, and billing. Entry point is main.py. Database: PostgreSQL via SQLAlchemy. 47 files, 12 API endpoints." */}
-
-{/* TODO: Screenshot — File browser showing the cloned repo's directory tree with folders like src/, tests/, docs/ expanded. */}
+![AI listing project files and describing the structure](/images/open-terminal-ai-file-listing.png)
 
 ---
 
@@ -36,7 +34,7 @@ The AI:
 4. Reads failure output, traces the bug, edits the source code
 5. Re-runs the failing tests to confirm the fix
 
-{/* TODO: Screenshot — Chat showing the AI running pytest, getting 2 failures, reading the tracebacks, editing a source file, and re-running to show all tests passing. */}
+![AI running tests and iterating on fixes](/images/open-terminal-ai-test-suite.png)
 
 :::tip Iterative debugging
 The AI sees the same terminal output a developer would — stack traces, assertion errors, log messages. Multiple rounds of "run → read error → fix → re-run" happen automatically.
@@ -55,7 +53,7 @@ The AI:
 4. Starts the dev server and confirms it's working
 5. Reports the URL where you can access it
 
-{/* TODO: Screenshot — Chat showing the AI reading a README, running pip install, running database migrations, starting a Flask dev server, and reporting "Server running on port 5000." */}
+![AI installing dependencies and running a project](/images/open-terminal-ai-install-run.png)
 
 ---
 
@@ -70,7 +68,7 @@ The AI:
 4. If tests fail, adjusts the refactored code until they pass
 5. Shows you a `git diff` of what changed
 
-{/* TODO: Screenshot — Chat showing the AI refactoring code, running tests (all pass), then displaying a git diff with the changes highlighted: old synchronous queries removed, new async queries added. */}
+![AI debugging and fixing code errors automatically](/images/open-terminal-ai-debug-fix.png)
 
 ---
 
@@ -86,7 +84,7 @@ The AI works with Git directly:
 - Find when a bug was introduced with `git bisect`
 - Resolve merge conflicts
 
-{/* TODO: Screenshot — Chat showing the AI running git log between two tags, then summarizing: "23 commits since v1.2.0. Key changes: new billing module (5 commits), auth refactor (8 commits), bug fixes (10 commits)." */}
+![AI initializing a git repo and working with git](/images/open-terminal-ai-git-workflow.png)
 
 ---
 
@@ -101,7 +99,7 @@ The AI:
 4. Runs them to verify they pass
 5. If any fail, it determines whether it's a test bug or a code bug
 
-{/* TODO: Screenshot — Chat showing the AI reading the function, writing 8 test cases, running pytest, and reporting "8 tests passed. Coverage for calculate_shipping: 94%." */}
+![AI writing and running unit tests with pytest](/images/open-terminal-ai-test-suite.png)
 
 ---
 
@@ -117,7 +115,7 @@ The AI:
 5. Adds a test case for the edge case
 6. Runs the tests to confirm
 
-{/* TODO: Screenshot — Chat showing the AI using grep to find the bug location, reading the code, explaining the root cause, applying a fix, and running the test suite. */}
+![AI finding and fixing a bug in the codebase](/images/open-terminal-ai-debug-fix.png)
 
 ---
 
@@ -133,9 +131,7 @@ The AI:
 5. Starts the server and tests every endpoint with `curl`
 6. Shows you the Swagger docs page
 
-{/* TODO: Screenshot — Chat showing the AI testing each endpoint with curl: POST /books (201 Created), GET /books (returns list), PUT /books/1 (updated), DELETE /books/1 (deleted). */}
-
-{/* TODO: Screenshot — Port preview showing the FastAPI Swagger UI at /docs with all endpoints visible. */}
+![AI creating and running a web application](/images/open-terminal-ai-web-dev.png)
 
 ---
 

docs/features/open-terminal/use-cases/system-automation.md

@@ -15,9 +15,7 @@ Open Terminal isn't just for code. The AI can manage files, organize folders, pr
 
 The AI reads the file dates, renames everything, and creates monthly folders:
 
-{/* TODO: Screenshot — Chat showing the AI processing 200 files. The response says "Done! Renamed 200 files and sorted into 8 monthly folders." An example shows: IMG_4521.jpg → 2025-03/2025-03-15_IMG_4521.jpg */}
-
-{/* TODO: Screenshot — File browser showing the new folder structure: 2025-01/, 2025-02/, 2025-03/, etc., with renamed photos inside each. */}
+![AI creating and renaming files with date prefixes](/images/open-terminal-ai-file-rename.png)
 
 ---
 
@@ -27,7 +25,7 @@ The AI reads the file dates, renames everything, and creates monthly folders:
 
 The AI checks file sizes and content to find exact duplicates, then asks you what to do:
 
-{/* TODO: Screenshot — Chat showing the AI's report: "Found 12 duplicate pairs (saving 340 MB total). Here are the largest:" followed by a table showing file names, sizes, and locations of each duplicate pair. The AI asks "Would you like me to delete the duplicates?" */}
+![AI analyzing files with disk usage details](/images/open-terminal-ai-disk-usage.png)
 
 ---
 
@@ -35,7 +33,7 @@ The AI checks file sizes and content to find exact duplicates, then asks you wha
 
 > **You:** Create a zip backup of the /projects folder with today's date in the filename.
 
-{/* TODO: Screenshot — Chat showing the AI creating the backup: "Created backup: projects_2025-03-20.zip (245 MB). Saved to /backups/". The file browser shows the zip file. */}
+![AI executing system automation commands](/images/open-terminal-ai-file-rename.png)
 
 ---
 
@@ -45,9 +43,7 @@ The AI checks file sizes and content to find exact duplicates, then asks you wha
 
 The AI uses image tools (which come pre-installed in Docker) to batch-convert and resize:
 
-{/* TODO: Screenshot — Chat showing the AI processing files: "Converted 25 images from PNG to JPG. Average file size reduced from 2.1 MB to 380 KB." */}
-
-{/* TODO: Screenshot — File browser showing the converted .jpg files alongside or replacing the originals. */}
+![AI using run_command for batch file operations](/images/open-terminal-ai-install-run.png)
 
 ---
 
@@ -55,7 +51,7 @@ The AI uses image tools (which come pre-installed in Docker) to batch-convert an
 
 > **You:** How much disk space is left? Are any big files I should clean up?
 
-{/* TODO: Screenshot — Chat showing the AI running a disk usage analysis: "You have 12 GB free out of 50 GB. The largest directories are: /home/user/data (8.2 GB), /home/user/logs (3.1 GB). The single largest file is access.log at 1.4 GB — it's 6 months old. Want me to clean it up?" */}
+![AI checking disk usage and analyzing storage](/images/open-terminal-ai-disk-usage.png)
 
 ---
 
@@ -65,7 +61,7 @@ The AI uses image tools (which come pre-installed in Docker) to batch-convert an
 
 The AI writes a script, processes every file, and reports back:
 
-{/* TODO: Screenshot — Chat showing the AI processing CSV files: "Updated 15 CSV files with the header row. Here's a preview of the first one:" followed by a small table showing the first few rows with the new header. */}
+![AI reading and analyzing CSV data](/images/open-terminal-ai-csv-analysis.png)
 
 ---
 

docs/features/open-terminal/use-cases/web-development.md

@@ -17,7 +17,7 @@ One of the most impressive things Open Terminal can do: the AI builds a website,
 4. A **preview panel** appears in Open WebUI showing the live page
 5. You ask for changes → the AI edits the files → the preview updates
 
-{/* TODO: Screenshot — Full view of Open WebUI showing a chat on the left ("Create a landing page for a bakery") and a live website preview panel on the right displaying a beautiful bakery landing page with a hero image, menu section, and contact info. */}
+![AI creating a landing page with file browser showing the created files](/images/open-terminal-ai-web-dev.png)
 
 ---
 
@@ -27,9 +27,7 @@ One of the most impressive things Open Terminal can do: the AI builds a website,
 
 The AI creates the HTML, CSS, and JavaScript files, starts a web server, and the preview appears automatically. It looks professional and polished — not a skeleton wireframe.
 
-{/* TODO: Screenshot — The preview panel showing a photography business landing page with a hero banner, grid gallery of sample images, an "About" section, and a contact form. */}
-
-{/* TODO: Screenshot — File browser showing the created files: index.html, styles.css, script.js. */}
+![File browser showing the created HTML files](/images/open-terminal-ai-web-dev-files.png)
 
 ---
 
@@ -41,11 +39,7 @@ Once the page is live, just keep talking to iterate:
 
 The AI edits the files, and the preview updates.
 
-{/* TODO: Screenshot — Side-by-side or before/after: the original light-themed page, then the updated dark-themed page with warm accent colors and rearranged sections. */}
-
-> **You:** Add a logo at the top and make the contact form prettier.
-
-{/* TODO: Screenshot — The updated page with a logo header and a redesigned contact form with styled inputs and a gradient submit button. */}
+The AI edits the CSS and HTML files, and the preview updates instantly.
 
 ---
 
@@ -55,11 +49,7 @@ The AI can create interactive web applications, not just static pages:
 
 > **You:** Build a simple calculator that runs in the browser.
 
-{/* TODO: Screenshot — Preview panel showing a working calculator web app with number buttons, operation buttons, and a display showing a calculation result. */}
-
-> **You:** Make a habit tracker where I can check off daily habits.
-
-{/* TODO: Screenshot — Preview panel showing a habit tracker with a weekly grid, habit names on the left, and checkmarks for completed days. */}
+![AI creating and running code for interactive applications](/images/open-terminal-ai-code-execution.png)
 
 ---
 
@@ -72,7 +62,7 @@ Got an existing website that's broken or needs changes? Upload the files and ask
 
 The AI reads your code, identifies the problem, fixes it, and you verify in the preview.
 
-{/* TODO: Screenshot — Chat showing the AI reading the uploaded HTML, identifying the bug ("The form action URL is pointing to a non-existent endpoint"), fixing it, and confirming the form now works. The preview shows the working form. */}
+![AI identifying and fixing code errors](/images/open-terminal-ai-debug-fix.png)
 
 ---
 

src/components/SidebarBanners.tsx

@@ -7,7 +7,7 @@ export const SidebarBanners = () => {
 			imgSrc: "/sponsors/banners/openwebui-banner.png",
 			mobileImgSrc: "/sponsors/banners/openwebui-banner-mobile.png",
 			url: "https://careers.openwebui.com",
-			name: "Open WebUI Inc.",
+			name: "Open WebUI",
 			description: "",
 		},
 	];

src/components/TopBanners.tsx

@@ -12,7 +12,7 @@ export const TopBanners = ({
 			imgSrc: "/sponsors/banners/openwebui-banner.png",
 			mobileImgSrc: "/sponsors/banners/openwebui-banner-mobile.png",
 			url: "https://docs.openwebui.com/enterprise",
-			name: "Open WebUI Inc.",
+			name: "Open WebUI",
 			description:
 				"Upgrade to a licensed plan for enhanced capabilities, including custom theming and branding, and dedicated support.",
 		},
@@ -20,7 +20,7 @@ export const TopBanners = ({
 			imgSrc: "/sponsors/banners/openwebui-banner.png",
 			mobileImgSrc: "/sponsors/banners/openwebui-banner-mobile.png",
 			url: "https://careers.openwebui.com",
-			name: "Open WebUI Inc.",
+			name: "Open WebUI",
 			description:
 				"**We are hiring!** Shape the way humanity engages with _intelligence_.",
 		},