Add pics and videos for mothership

Author: TheodoreSpeaks

apps/docs/components/ui/video.tsx

@@ -12,6 +12,8 @@ interface VideoProps {
   muted?: boolean
   playsInline?: boolean
   enableLightbox?: boolean
+  width?: number
+  height?: number
 }
 
 export function Video({
@@ -22,6 +24,8 @@ export function Video({
   muted = true,
   playsInline = true,
   enableLightbox = true,
+  width,
+  height,
 }: VideoProps) {
   const [isLightboxOpen, setIsLightboxOpen] = useState(false)
 
@@ -38,6 +42,8 @@ export function Video({
         loop={loop}
         muted={muted}
         playsInline={playsInline}
+        width={width}
+        height={height}
         className={`${className} ${enableLightbox ? 'cursor-pointer transition-opacity hover:opacity-95' : ''}`}
         src={getAssetUrl(src)}
         onClick={handleVideoClick}

apps/docs/content/docs/en/copilot/index.mdx

@@ -5,6 +5,7 @@ description: Your per-workflow AI assistant for building and editing workflows.
 
 import { Callout } from 'fumadocs-ui/components/callout'
 import { Image } from '@/components/ui/image'
+import { Video } from '@/components/ui/video'
 import { FAQ } from '@/components/ui/faq'
 
 Copilot is the AI assistant built into every workflow editor. It is scoped to the workflow you have open — it reads the current structure, makes changes directly, and saves checkpoints so you can revert if needed.
@@ -15,7 +16,7 @@ For workspace-wide tasks (managing multiple workflows, running research, working
   Copilot is a Sim-managed service. For self-hosted deployments, go to [sim.ai](https://sim.ai) → Settings → Copilot, generate a Copilot API key, then set `COPILOT_API_KEY` in your self-hosted environment.
 </Callout>
 
-{/* TODO: Screenshot of the workflow editor with the Copilot panel open on the right side — showing a conversation with a workflow change applied. Ideally shows a message from the user, a response from Copilot, and the checkpoint icon visible on the message. */}
+<Video src="copilot/copilot.mp4" width={700} height={450} />
 
 ## What Copilot Can Do
 

apps/docs/content/docs/en/mothership/files.mdx

@@ -4,18 +4,17 @@ description: Upload, create, edit, and generate files — documents, presentatio
 ---
 
 import { Image } from '@/components/ui/image'
+import { Video } from '@/components/ui/video'
 import { FAQ } from '@/components/ui/faq'
 
-Describe a document, presentation, image, or visualization and Mothership creates it — streaming the content live into the resource panel as it writes. Attach any file to your message and Mothership reads it, processes it, and saves it to your workspace.
+<Video src="mothership/files-pipeline-deals-summarizer.mp4" width={700} height={450} />
 
-{/* TODO: Screenshot of Mothership with the File Write subagent active — file content streaming into the resource panel in split or preview mode. Shows the live streaming preview experience as a document is being written. */}
+Describe a document, presentation, image, or visualization and Mothership creates it — streaming the content live into the resource panel as it writes. Attach any file to your message and Mothership reads it, processes it, and saves it to your workspace.
 
 ## Uploading Files to the Workspace
 
 Attach any file directly to your Mothership message — drag it into the input, paste it, or click the attachment icon. Mothership reads the file as context and saves it to your workspace.
 
-{/* TODO: Screenshot of the Mothership input area showing a file attached — e.g., a PDF or image thumbnail visible in the input before sending. */}
-
 Use this to:
 - Hand Mothership a document and ask it to process, summarize, or extract data from it
 - Upload a CSV and have it create a table from it
@@ -48,6 +47,8 @@ Open a file using `@filename` or the **+** menu, then describe the change:
 
 ## Presentations
 
+<Image src="/static/mothership/pptx-example.png" alt="Mothership resource panel showing a generated Mothership-Use-Cases.pptx file open with the title slide and first use case slide visible" width={900} height={500} />
+
 Mothership can generate `.pptx` files:
 
 - "Create a pitch deck for Q3 review — 8 slides covering growth, retention, and roadmap"
@@ -58,8 +59,6 @@ Mothership can generate `.pptx` files:
 
 The file is saved to your workspace and can be downloaded.
 
-{/* TODO: Screenshot of the resource panel with a generated .pptx file open or a download prompt visible, showing the file name and confirming it was saved to the workspace. */}
-
 ## Images
 
 Mothership can generate images using AI, and can use an existing image as a reference to guide the output:
@@ -73,7 +72,7 @@ Mothership can generate images using AI, and can use an existing image as a refe
 - Attach an existing image to your message, then describe what you want: "Generate a new version of this banner with a blue color scheme instead of green"
 - "Create a variation of this diagram with the boxes rearranged horizontally [attach image]"
 
-{/* TODO: Screenshot of the resource panel showing a generated image open as a file tab — ideally with the image rendered in the viewer panel. */}
+<Image src="/static/mothership/image-example.png" alt="Mothership resource panel showing a generated hero image of a Mothership-branded blimp flying over San Francisco at golden hour, alongside the chat response linking the file" width={900} height={500} />
 
 Generated images are saved as workspace files.
 
@@ -85,7 +84,7 @@ Mothership can generate charts and data visualizations from data you describe or
 - "Create a line chart of token usage over the past 30 days from this data [paste data]"
 - "Generate a pie chart showing the distribution of lead sources from the leads table"
 
-{/* TODO: Screenshot of a chart or visualization rendered in the resource panel as a file. */}
+<Image src="/static/mothership/chart-example.png" alt="Mothership resource panel showing a generated chart file with bar charts for backend 5xx errors and error rate over time" width={900} height={500} />
 
 Visualizations are saved as files and rendered in the resource panel.
 
@@ -104,7 +103,7 @@ Results come back directly in the chat. Ask Mothership to save the output as a f
 
 When a file opens in the resource panel, you can switch between three views:
 
-{/* TODO: Screenshot of the file viewer in the resource panel showing the mode selector (editor/split/preview), ideally in split mode with a markdown file showing raw content on the left and rendered preview on the right. */}
+<Video src="mothership/toggle-file-view.mp4" width={700} height={450} />
 
 | Mode | What it shows |
 |------|--------------|

apps/docs/content/docs/en/mothership/index.mdx

@@ -4,11 +4,12 @@ description: Your AI command center. Build and manage your entire workspace in n
 ---
 
 import { Image } from '@/components/ui/image'
+import { Video } from '@/components/ui/video'
 import { FAQ } from '@/components/ui/faq'
 
-Describe what you want and Mothership handles it. Build a workflow, run research, generate a presentation, query a table, schedule a recurring job, send a Slack message — Mothership knows your entire workspace and takes action directly.
+<Video src="mothership/create-workflow.mp4" width={700} height={450} />
 
-{/* TODO: Screenshot or GIF of the full Mothership home page — chat pane on the left with a conversation in progress, resource panel on the right with a workflow or file tab open. Hero shot for the page. */}
+Describe what you want and Mothership handles it. Build a workflow, run research, generate a presentation, query a table, schedule a recurring job, send a Slack message — Mothership knows your entire workspace and takes action directly.
 
 ## What You Can Do
 
@@ -44,6 +45,8 @@ For complex tasks, Mothership delegates to specialized subagents automatically.
 
 Bring any workspace object into the conversation via the **+** menu, `@`-mentions, or drag-and-drop from the sidebar. Mothership also opens resources automatically when it creates or modifies them.
 
+<Video src="mothership/context-menu.mp4" width={700} height={450} />
+
 {/* TODO: Screenshot of the resource panel with multiple tabs open — a workflow tab, a table tab, and a file tab — showing different resource types side by side. */}
 
 | What to add | How it appears |
@@ -59,6 +62,8 @@ Bring any workspace object into the conversation via the **+** menu, `@`-mention
 
 Mothership has two panes. On the left: the chat thread, where your messages and Mothership's responses appear. On the right: the resource panel, where workflows, tables, files, and knowledge bases open as tabs. The panel is resizable; tabs are draggable and closeable.
 
+<Video src="mothership/split-view.mp4" width={700} height={450} />
+
 <FAQ items={[
   { question: "How is Mothership different from Copilot?", answer: "Copilot is scoped to a single workflow — it helps you build and edit that workflow. Mothership has access to your entire workspace and can build workflows, manage data, run research, schedule jobs, take actions across integrations, and more." },
   { question: "What model does Mothership use?", answer: "Mothership always uses Claude Opus 4.6. There is no model selector." },

apps/docs/content/docs/en/mothership/knowledge.mdx

@@ -4,11 +4,12 @@ description: Create, populate, and query knowledge bases from Mothership.
 ---
 
 import { Image } from '@/components/ui/image'
+import { Video } from '@/components/ui/video'
 import { FAQ } from '@/components/ui/faq'
 
-Create a knowledge base, add documents to it, and query it in plain language — all through conversation. Knowledge bases you create in Mothership are immediately available to Agent blocks in any workflow.
+<Video src="mothership/kb.mp4" width={700} height={450} />
 
-{/* TODO: Screenshot of Mothership with a knowledge base open in the resource panel — showing the knowledge base name, document list, and status of indexed documents. */}
+Create a knowledge base, add documents to it, and query it in plain language — all through conversation. Knowledge bases you create in Mothership are immediately available to Agent blocks in any workflow.
 
 ## Creating Knowledge Bases
 

apps/docs/content/docs/en/mothership/research.mdx

@@ -4,11 +4,12 @@ description: Ask Mothership to research anything — it searches, reads, and syn
 ---
 
 import { Image } from '@/components/ui/image'
+import { Video } from '@/components/ui/video'
 import { FAQ } from '@/components/ui/faq'
 
-Ask Mothership to research anything and it figures out the best approach — searching the web, reading specific pages, crawling sites, looking up technical docs. Just describe what you want to know.
+<Video src="mothership/research-agent.mp4" width={700} height={450} />
 
-{/* TODO: Screenshot of the Research subagent section in the Mothership chat — expanded, showing it working through a research task with the final report or answer appearing. Ideally with a file tab open in the resource panel showing the output. */}
+Ask Mothership to research anything and it figures out the best approach — searching the web, reading specific pages, crawling sites, looking up technical docs. Just describe what you want to know.
 
 ## Asking Questions
 

apps/docs/content/docs/en/mothership/tables.mdx

@@ -6,9 +6,9 @@ description: Create, query, and manage workspace tables from Mothership.
 import { Image } from '@/components/ui/image'
 import { FAQ } from '@/components/ui/faq'
 
-Create a table from a description or a CSV, query it in plain language, add or update rows, and export the results — all through conversation. Tables open in the resource panel when created or referenced.
+<Image src="/static/mothership/table-example.png" alt="Mothership resource panel showing the pipeline_deals table with company, deal_owner, stage, and amount columns, alongside a chat summary of total pipeline value and breakdown by stage" width={900} height={500} />
 
-{/* TODO: Screenshot of Mothership with a table open in the resource panel — ideally after a query or row operation, showing the table with data populated. */}
+Create a table from a description or a CSV, query it in plain language, add or update rows, and export the results — all through conversation. Tables open in the resource panel when created or referenced.
 
 ## Creating Tables
 

apps/docs/content/docs/en/mothership/tasks.mdx

@@ -5,16 +5,17 @@ description: Schedule recurring jobs, take immediate actions, connect integratio
 
 import { Callout } from 'fumadocs-ui/components/callout'
 import { Image } from '@/components/ui/image'
+import { Video } from '@/components/ui/video'
 import { FAQ } from '@/components/ui/faq'
 
+<Video src="mothership/job-create.mp4" width={700} height={450} />
+
 Mothership can act on your behalf right now — send a message, create an issue, call an API — or on a schedule, running a prompt automatically every hour, day, or week. It can also connect integrations, set environment variables, add MCP servers, and create custom tools.
 
 ## Scheduled Jobs
 
 A scheduled job is a Mothership task that runs on a cron schedule. On each run, Mothership reads the current workspace state and executes the job's prompt as if you had just sent it.
 
-{/* TODO: Screenshot of Mothership chat confirming a scheduled job was created — showing the job name, schedule, and what it will do. If there's a jobs list view in the sidebar, include that as a second screenshot here. */}
-
 ### Creating a Job
 
 Describe the recurring task and how often it should run:

apps/docs/content/docs/en/mothership/workflows.mdx

@@ -3,13 +3,13 @@ title: Workflows
 description: Create, edit, run, debug, deploy, and organize workflows from Mothership.
 ---
 
-import { Callout } from 'fumadocs-ui/components/callout'
 import { Image } from '@/components/ui/image'
+import { Video } from '@/components/ui/video'
 import { FAQ } from '@/components/ui/faq'
 
-Describe a workflow and Mothership builds it. Reference an existing one by name and it edits it. No canvas navigation required — every change appears in the resource panel in real time.
+<Video src="mothership/create-workflow.mp4" width={700} height={450} />
 
-{/* TODO: Screenshot of Mothership chat on the left with the Build subagent section visible, and a workflow open in the resource panel on the right. Shows the split-pane experience of building via natural language. */}
+Describe a workflow and Mothership builds it. Reference an existing one by name and it edits it. No canvas navigation required — every change appears in the resource panel in real time.
 
 ## Creating Workflows
 
@@ -33,7 +33,7 @@ Open an existing workflow with `@workflow-name` or the **+** menu, then describe
 
 ## Running Workflows
 
-{/* TODO: Screenshot or GIF of Mothership running a workflow — showing the chat streaming execution output on the left while the workflow canvas in the resource panel highlights blocks as they execute in real time. */}
+<Video src="mothership/run-workflow.mp4" width={700} height={450} />
 
 Ask Mothership to run a workflow and it handles the execution:
 
@@ -110,10 +110,6 @@ Variables set this way are available via `<variable.VARIABLE_NAME>` syntax insid
 - "Delete the old_api_prototype workflow"
 - "Delete all workflows in the deprecated folder"
 
-<Callout type="warn">
-  Workflow deletion is permanent. Deployed versions are also removed. There is no recycle bin.
-</Callout>
-
 <FAQ items={[
   { question: "Can Mothership edit a workflow while it's deployed?", answer: "Yes. Editing a workflow does not affect the live deployment. The deployed version is a snapshot — you need to ask Mothership to redeploy to push changes to production." },
   { question: "Can I run a workflow with specific inputs from Mothership?", answer: "Yes. Describe the inputs in your message and Mothership passes them to the workflow's start block." },