feat/draft new docs content and designed new onboarding process

.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "web-dev",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev:web"],
+      "port": 5173
+    }
+  ]
+}

.claude/skills/animation-interface-demo.md

@@ -0,0 +1,380 @@
+---
+name: animation-interface-demo
+description: Generate a self-contained TSX + CSS Module looping interface animation demo. Use when the user describes a workflow, product process, or UI flow that should be visualized as an animated interface preview on the Eigent website.
+---
+
+# Animation Interface Demo Generator
+
+## Goal
+
+Generate a complete, self-contained looping interface animation demo as three files:
+
+1. `{Name}Display.tsx` — server-renderable React component (structure + data attributes)
+2. `{Name}Cycler.tsx` — client-side animation island (DOM mutations only, no re-renders)
+3. `{Name}Display.module.css` — all styles, no Tailwind, no CSS variables from the host app
+
+Output files go in `animation/` at the project root.
+
+---
+
+## Workflow
+
+When the user describes a workflow or process:
+
+1. **Parse the workflow** into a flat ordered list of tasks (typically 3–6). Each task belongs to an agent or role.
+2. **Identify agents/roles** and their tools/capabilities (shown as tags).
+3. **Decide on interface layout** — the canonical layout has a left chat panel + right workspace with agent cards.
+4. **Generate all three files** at once.
+
+---
+
+## Architecture Rules
+
+### No dependencies
+- Only `react`, `react/jsx-runtime`, `next/image` (for workspace previews), and `lucide-react` icons are allowed.
+- No Tailwind classes. No CSS variables from the host project. No `framer-motion`. No state management.
+- The `Display` component must be fully server-renderable (no `"use client"` directive).
+- The `Cycler` component gets `"use client"` and is the ONLY interactive island.
+
+### Responsive scaling shell
+Every display uses this exact scaling pattern:
+
+```css
+.container {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1600 / 960;           /* matches the inner canvas */
+  container-type: inline-size;
+  --ui-scale: calc(100cqw / 1600px);  /* scales everything proportionally */
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: pan-y;
+}
+
+.inner {
+  position: absolute;
+  top: 0; left: 0;
+  width: 1600px;
+  height: 960px;
+  transform-origin: top left;
+  transform: scale(var(--ui-scale, 1));
+  /* …border, background, overflow: hidden */
+}
+```
+
+The inner canvas is always **1600×960 px** at design scale. The container scales it to fill whatever width the parent provides. All child sizes use plain `px` values — they scale automatically.
+
+### Animation data attributes
+
+The Cycler drives the animation entirely via `data-*` attribute mutations and `textContent` updates. No React state. No re-renders.
+
+| Attribute | Where | Purpose |
+|-----------|-------|---------|
+| `data-cycle-root` | root container | Cycler `querySelector` anchor |
+| `data-task-index={n}` | each task item | Marks the task's global index (0-based) |
+| `data-done="true\|false"` | each task item | CSS toggles icon + background |
+| `data-cycle-summary="done\|ongoing"` | badge text `<span>` | Cycler updates count text |
+| `data-cycle-chip="done\|ongoing"` | filter chip `<span>` | Wrapper for per-agent chip |
+| `data-agent-indexes="0,1"` | filter chip | Comma-separated global task indexes this agent owns |
+| `data-cycle-count="done\|ongoing"` | count `<span>` inside chip | Cycler updates count text |
+
+### CSS icon toggle pattern
+
+Both the "done" and "ongoing" icons are always in the DOM. CSS hides the inactive one:
+
+```css
+.iconDone, .iconOngoing { display: none; }
+.taskItem[data-done="true"]  .iconDone    { display: inline-block; }
+.taskItem[data-done="false"] .iconOngoing { display: inline-block; }
+```
+
+The Cycler only sets `el.dataset.done = idx < step ? "true" : "false"` — no class toggling needed.
+
+---
+
+## Display Component Template
+
+```tsx
+// {Name}Display.tsx  (NO "use client" — server-renderable)
+import Image from "next/image";
+import { /* lucide icons */ } from "lucide-react";
+import s from "./{Name}Display.module.css";
+import {Name}Cycler from "./{Name}Cycler";
+
+const TOTAL_TASKS = N; // total number of animated tasks
+
+function TaskItem({ done, text, index }: { done?: boolean; text: string; index: number }) {
+  return (
+    <div className={s.taskItem} data-done={done ? "true" : "false"} data-task-index={index}>
+      <div className={s.taskIcon}>
+        <CircleCheckBig size={16} color="#00a63e" className={s.iconDone} />
+        <Loader2 size={16} color="#155dfc" className={`${s.spinner} ${s.iconOngoing}`} />
+      </div>
+      <p className={s.taskText}>{text}</p>
+    </div>
+  );
+}
+
+export default function {Name}Display() {
+  const completedTaskCount = 2; // initial snapshot for SSR
+  const isTaskDone = (i: number) => i < completedTaskCount;
+  const getDoneCount = (indexes: number[]) => indexes.filter(isTaskDone).length;
+  const getOngoingCount = (indexes: number[]) => indexes.length - getDoneCount(indexes);
+
+  return (
+    <div className={s.container} data-cycle-root aria-hidden="true">
+      <{Name}Cycler totalTasks={TOTAL_TASKS} />
+      <div className={s.inner}>
+        {/* … layout … */}
+      </div>
+    </div>
+  );
+}
+```
+
+---
+
+## Cycler Component Template
+
+The Cycler template below is reusable across all demos. Copy it verbatim and adjust only:
+- `CYCLE_MS` — how long each step holds (default 1500ms)
+- `PAUSE_AT_FULL_MS` — pause when all tasks done before resetting (default 1800ms)
+- `ROOT_MARGIN` — IntersectionObserver margin for early wake-up (default "200px")
+
+```tsx
+"use client";
+import { useEffect, useRef } from "react";
+
+const CYCLE_MS = 1500;
+const PAUSE_AT_FULL_MS = 1800;
+const ROOT_MARGIN = "200px";
+
+export default function {Name}Cycler({ totalTasks }: { totalTasks: number }) {
+  const anchorRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    const anchor = anchorRef.current;
+    if (!anchor) return;
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+
+    const root = anchor.closest<HTMLElement>("[data-cycle-root]");
+    if (!root) return;
+
+    const taskItems = Array.from(root.querySelectorAll<HTMLElement>("[data-task-index]"));
+    const summarySpans = Array.from(root.querySelectorAll<HTMLElement>("[data-cycle-summary]"));
+    const chipCountSpans = Array.from(root.querySelectorAll<HTMLElement>("[data-cycle-count]"));
+    if (taskItems.length === 0) return;
+
+    let step = 0;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    let isVisible = true;
+    let isTabVisible = !document.hidden;
+
+    const applyStep = () => {
+      for (const el of taskItems) {
+        const idx = Number(el.dataset.taskIndex);
+        el.dataset.done = idx < step ? "true" : "false";
+      }
+      for (const el of summarySpans) {
+        const role = el.dataset.cycleSummary;
+        if (role === "done") el.textContent = String(step);
+        else if (role === "ongoing") el.textContent = String(totalTasks - step);
+      }
+      for (const el of chipCountSpans) {
+        const chip = el.closest<HTMLElement>("[data-cycle-chip]");
+        const indexesAttr = chip?.dataset.agentIndexes;
+        if (!chip || !indexesAttr) continue;
+        const indexes = indexesAttr.split(",").map(Number);
+        const doneCount = indexes.filter((i) => i < step).length;
+        const role = el.dataset.cycleCount;
+        el.textContent = String(role === "done" ? doneCount : indexes.length - doneCount);
+      }
+    };
+
+    const tick = () => {
+      if (!isVisible || !isTabVisible) { timer = setTimeout(tick, CYCLE_MS); return; }
+      step = (step + 1) % (totalTasks + 1);
+      applyStep();
+      timer = setTimeout(tick, step === totalTasks ? PAUSE_AT_FULL_MS : CYCLE_MS);
+    };
+
+    step = 0;
+    applyStep();
+
+    let idleHandle: number | null = null;
+    let idleTimeout: ReturnType<typeof setTimeout> | null = null;
+    const start = () => { timer = setTimeout(tick, CYCLE_MS); };
+    if (typeof window.requestIdleCallback === "function") {
+      idleHandle = window.requestIdleCallback(start, { timeout: 2500 });
+    } else {
+      idleTimeout = setTimeout(start, 500);
+    }
+
+    const io = new IntersectionObserver(([e]) => { isVisible = e.isIntersecting; }, { rootMargin: ROOT_MARGIN });
+    io.observe(root);
+    const onVisibility = () => { isTabVisible = !document.hidden; };
+    document.addEventListener("visibilitychange", onVisibility);
+
+    return () => {
+      if (timer !== null) clearTimeout(timer);
+      if (idleHandle !== null && typeof window.cancelIdleCallback === "function") window.cancelIdleCallback(idleHandle);
+      if (idleTimeout !== null) clearTimeout(idleTimeout);
+      io.disconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [totalTasks]);
+
+  return <span ref={anchorRef} aria-hidden="true" style={{ display: "none" }} />;
+}
+```
+
+---
+
+## CSS Module Guidelines
+
+### Required sections (include all)
+
+```
+/* ── Responsive scaling shell ─── */
+.container, .inner
+
+/* ── Top Bar ─── */
+.topBar, .trafficLights, .dot, .dotRed/Yellow/Green, .topBarNav, .navBackBtn, .navTitleBtn, .navTitleText, .topBarIconGroup, .iconBtn
+
+/* ── Body ─── */
+.body, .mainContent (12-col grid, 4-row grid)
+
+/* ── Chat Panel (col 1–3) ─── */
+.chatPanel, .chatHeader, .chatTitle, .tokenBadge, .tokenText
+.chatContent, .userMessage, .userMessageText, .userMessageLink
+.agentMessage, .agentMessageText, .thinkingRow, .thinkingText
+.taskCard, .taskCardInner, .progressBar, .progressFill
+.taskCardBody, .taskCardTitle, .taskCardMeta, .taskCardBadges
+.taskBadge, .taskBadgeText, .taskBadgeTextBlue, .taskCardChevronBtn
+.chatScrollbar, .chatBottomBar (input area)
+
+/* ── Workspace Area (col 4–12) ─── */
+.workspaceArea, .workspaceTopBar, .workspaceTabs, .wsTab, .wsTabActive, .newWorkerBtn
+
+/* ── Agent Cards ─── */
+.agentCardsArea, .agentCard, .agentCardCustom
+.agentCardHeader, .agentCardTitleRow, .agentCardTitle
+.agentTitleBlue/Green/Orange/Gray, .agentCardMenuBtn
+.agentCardTags, .agentTag
+
+/* ── Task items ─── */
+.taskFiltersSection, .taskFiltersDivider, .taskFilters
+.filterChip, .filterChipActive, .filterChipDefault, .filterChipGreen, .filterChipBlue
+.taskListSection, .taskItem, .taskItem[data-done="true"]
+.iconDone, .iconOngoing (display:none pattern)
+.taskIcon, .taskText, .cardScrollbar
+
+/* ── Bottom Menu Bar ─── */
+.menuBar, .menuBarCenter, .botIconBtn, .botBadge, .menuBarRight, .menuNavBtn
+
+/* ── Spinner ─── */
+@keyframes spin + .spinner
+```
+
+### Color tokens (use these values, no CSS variables)
+
+| Token | Value |
+|-------|-------|
+| Text primary | `#111111` / `#222222` |
+| Text secondary | `#666666` |
+| Text muted | `#cccccc` |
+| Border | `#eeeeee` / `#cccccc` |
+| Blue accent | `#155dfc` |
+| Green accent | `#00a63e` |
+| Orange accent | `#e17100` |
+| Background card | `#ffffff` |
+| Background subtle | `#f5f5f5` |
+| Done bg | `#f0fdf4` |
+| Progress green | `#016630` |
+
+### Grid layout
+```css
+.mainContent {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-template-rows: repeat(4, minmax(0, 1fr));
+}
+.chatPanel     { grid-column: 1 / span 3;  grid-row: 1 / span 4; }
+.workspaceArea { grid-column: 4 / span 9;  grid-row: 1 / span 4; }
+```
+
+---
+
+## Agent Card Anatomy
+
+Each agent card follows this structure:
+
+```
+AgentCard
+├── Header (title + MoreHorizontal menu btn)
+│   └── Tags row (# Tool1, # Tool2, …)
+├── [optional] Workspace preview image
+├── Filter chips (All | Done N | Ongoing N)
+│   └── Done/Ongoing chips carry data-cycle-chip + data-agent-indexes
+└── Task list
+    └── TaskItem × n  (data-task-index, data-done)
+```
+
+Agent title colors:
+- Browser/Web agent → `#0084d1` (blue)
+- Developer/Code agent → `#009966` (green)
+- Document/Report agent → `#e17100` (orange)
+- Custom/placeholder agent → `#222222` (gray) + opacity 0.4
+
+---
+
+## Steps to Generate a New Demo
+
+Given a user's workflow description:
+
+1. **Extract tasks** — write each as a single imperative sentence (1–2 lines, detail OK). Number them globally from 0.
+2. **Group tasks by agent** — assign each task to the most fitting agent type. Create 2–4 real agents + 1 ghost "Custom Agent" placeholder.
+3. **Set `TOTAL_TASKS`** to the total task count.
+4. **Set initial `completedTaskCount`** — pick roughly half (e.g. `TOTAL_TASKS = 4` → start at `2`).
+5. **Build `browserTaskIndexes`, `developerTaskIndexes`, etc.** — arrays of global task indexes per agent.
+6. **Write the task text** — the existing example uses verbose, realistic task descriptions. Match that tone.
+7. **Choose workspace preview** — include a `showPreview` card if the workflow involves web browsing or visual output. Use `/home/demo.png` as placeholder or the appropriate public image path.
+8. **Write chat panel content** — user message rephrasing the workflow goal, short agent reply, "Thinking Xs", and the Task card with animated badges.
+9. **Generate CSS** — copy the full CSS structure above, adjusting any unique layout needs.
+10. **Generate Cycler** — copy verbatim, substituting `{Name}`.
+
+---
+
+## Output Checklist
+
+Before delivering files, verify:
+
+- [ ] `{Name}Display.tsx` has NO `"use client"` directive
+- [ ] `{Name}Cycler.tsx` has `"use client"` at top
+- [ ] `data-cycle-root` is on the root `<div>` of Display
+- [ ] Every `<TaskItem>` has a unique `data-task-index` starting at 0
+- [ ] Filter chip `data-agent-indexes` covers all tasks for that agent
+- [ ] `TOTAL_TASKS` matches the count of TaskItems across all cards
+- [ ] CSS uses `#` hex values only — no `var()` referencing host app tokens
+- [ ] `.container` has `aspect-ratio: 1600 / 960` and `container-type: inline-size`
+- [ ] `.inner` is 1600×960 with `transform: scale(var(--ui-scale, 1))`
+- [ ] `aria-hidden="true"` on root container
+- [ ] `pointer-events: none` on root container
+- [ ] Spinner animation defined as `@keyframes spin` in the CSS module
+
+---
+
+## Usage
+
+Trigger this skill when the user says things like:
+- "Create an interface demo for [workflow]"
+- "Build an animation for [process]"
+- "Make a website demo showing [product feature]"
+- "Add an interface preview for [use case]"
+
+Ask for (or infer from context):
+- The workflow name (for file naming)
+- The workflow steps / process description
+- Any specific agents or tools to feature
+- Whether a workspace preview image should be included

docs/CONTENT_STRUCTURE.md

@@ -0,0 +1,136 @@
+# Eigent Documentation Structure
+
+This file is the editorial map for the public Mintlify documentation. Navigation is defined in `docs/docs.json`. Writing and media conventions are defined in `docs/STYLE_GUIDE.md`.
+
+## Information Architecture
+
+### Get Started
+
+- Welcome and product positioning
+- Installation
+- Quick start
+- Self-hosting
+- Core concepts
+
+### Dashboard
+
+- Dashboard overview
+- Spaces
+- Projects
+- Tasks
+- Search, sort, grid, list, and board views
+
+### Projects
+
+- Space, Project, Session, and Run hierarchy
+- Project creation
+- Workspace landing
+- Context and files
+- Live sessions
+- Multi-run follow-ups
+- Single Agent mode
+- Workforce mode
+
+### Agents
+
+- Agent capabilities
+- Workers
+- Agent Skills
+- Remote sub-agents
+- Memory roadmap
+
+### Models
+
+- Model selection overview
+- Eigent Cloud
+- Bring Your Own Key
+- Local models
+- Provider reference
+- Provider-specific setup guides
+
+### Connectors
+
+- Connector overview
+- MCP marketplace
+- Custom local and remote MCP servers
+- Google Search
+- Tool assignment
+
+### Browser
+
+- Browser automation overview
+- CDP browser connections
+- Browser cookie management
+- Browser Plugins roadmap
+
+### Automation
+
+- Automation overview
+- Scheduled triggers
+- Webhook and Slack triggers
+- Dispatch and remote control
+- Execution logs and retries
+
+### Settings
+
+- Account, language, proxy, and updates
+- Appearance and custom themes
+- Privacy and data handling
+
+### Open Source
+
+- Repository and contribution overview
+- Self-hosting
+- Brain architecture
+
+## Provider Coverage
+
+The provider reference must remain synchronized with `src/lib/llm.ts` and `src/pages/Agents/localModels.ts`.
+
+Cloud and BYOK coverage:
+
+- Gemini
+- OpenAI
+- Anthropic
+- OrcaRouter
+- OpenRouter
+- Qwen
+- DeepSeek
+- MiniMax
+- Z.ai
+- Moonshot
+- ModelArk
+- SambaNova
+- Grok
+- Mistral
+- AWS Bedrock
+- AWS Bedrock Converse
+- Azure
+- ERNIE
+- OpenAI-compatible endpoints
+
+Local runtime coverage:
+
+- Ollama
+- vLLM
+- SGLang
+- LM Studio
+- LLaMA.cpp
+
+## Editorial Priorities
+
+1. Capture current screenshots for Dashboard, Workspace, Context, Models, Connectors, Browser, and Triggers.
+2. Replace outline language with task-focused procedures.
+3. Add provider credential and endpoint examples.
+4. Add self-hosting commands and environment configuration.
+5. Add troubleshooting links from every setup guide.
+6. Mark coming-soon features clearly and remove those labels only when shipped.
+
+## Maintenance Checks
+
+- Every route in `docs/docs.json` must resolve to a Markdown file.
+- Every page must include `title` and `description` frontmatter.
+- Feature names should match current UI labels.
+- Model providers should be audited whenever `src/lib/llm.ts` changes.
+- Local runtimes should be audited whenever `src/pages/Agents/localModels.ts` changes.
+- Coming-soon features must not be described as generally available.

docs/STYLE_GUIDE.md

@@ -0,0 +1,117 @@
+# Eigent Documentation Style Guide
+
+Use this guide when writing or reviewing pages in `docs/`.
+
+## Documentation types
+
+Organize content around the reader's goal:
+
+- **Tutorial:** Helps a new user complete a guided learning experience.
+- **How-to guide:** Provides the shortest reliable procedure for a specific goal.
+- **Reference:** Describes available options, fields, statuses, or providers.
+- **Explanation:** Clarifies concepts, architecture, or design decisions.
+
+Most product pages can combine a short explanation with one or more focused how-to procedures and a compact reference section.
+
+## Standard page structure
+
+Use the following order when it fits the topic:
+
+1. Frontmatter with `title` and `description`
+2. One-paragraph overview
+3. Prerequisites or **Before you begin**
+4. Primary task procedure
+5. Feature or option reference
+6. Security, privacy, or limitations
+7. Troubleshooting
+8. Related guides or next steps
+
+Avoid adding sections that do not help the reader complete or understand the task.
+
+## Procedures
+
+- Use numbered steps for multi-step tasks.
+- Start each step with an imperative verb.
+- State where the action happens before the action.
+- Keep one primary action in each step.
+- Explain the result after the action when it helps the reader continue.
+- Document the shortest accessible path.
+- Link to repeated procedures instead of copying them.
+
+## Headings
+
+- Use sentence case.
+- Make headings describe the section's content or task.
+- Keep headings short.
+- Do not skip heading levels.
+- Avoid identical headings on the same page.
+
+## Product language
+
+- Match current interface labels.
+- Use **Space**, **Project**, **Session**, **Run**, **Context**, **Single Agent**, and **Workforce** consistently.
+- Use second person for instructions.
+- Prefer present tense and active voice.
+- Avoid claims such as “always,” “never,” “best,” or “secure” unless the product guarantees them.
+- Mark unavailable features as **Coming soon** and do not provide procedures for them.
+
+## Screenshots
+
+Use a screenshot only when it clarifies a visual UI or a control that is difficult to locate.
+
+When the asset is not ready, leave this visible note:
+
+```md
+> **Screenshot placeholder:** Add a screenshot of the relevant UI. Hide credentials and personal data.
+```
+
+When adding the final screenshot:
+
+- Crop it to the relevant UI.
+- Use consistent operating-system and theme settings.
+- Remove personal information with an opaque overlay.
+- Add concise, contextual alt text.
+- Describe complex information in the surrounding text.
+- Do not use a screenshot for code, commands, or terminal output.
+
+## Videos
+
+Prefer MP4 over animated GIF for product walkthroughs.
+
+When the asset is not ready, leave this visible note:
+
+```md
+> **Video placeholder:** Add a short MP4 walkthrough. Include captions.
+```
+
+When adding the final video:
+
+- Keep it focused on one workflow.
+- Include captions.
+- Provide a transcript for longer or instructional videos.
+- Avoid unnecessary cursor movement and waiting time.
+- Use test data and accounts.
+
+## Security and privacy
+
+- Never publish API keys, tokens, cookies, private endpoints, or webhook secrets.
+- Use sample data in screenshots and videos.
+- State when an action sends data to an external provider.
+- Include least-privilege and credential-revocation guidance where relevant.
+
+## Open-source documentation
+
+Keep product docs connected to repository onboarding:
+
+- Explain what the project does and why it is useful.
+- Provide a clear setup path.
+- Link to support and troubleshooting.
+- Document how to run tests and contribute.
+- Keep license, README, contributing guidance, and code-of-conduct information discoverable.
+
+## Research references
+
+- [Diátaxis documentation framework](https://diataxis.fr/)
+- [Google developer documentation: Procedures](https://developers.google.com/style/procedures)
+- [Google developer documentation: Images](https://developers.google.com/style/images)
+- [Open Source Guides: Starting an Open Source Project](https://opensource.guide/starting-a-project/)

docs/agents/memory.md

@@ -0,0 +1,58 @@
+---
+title: Agent Memory
+description: Understand the context Eigent uses today and the planned direction for persistent agent memory.
+icon: brain
+---
+
+The Agent Memory page is present in the Agents dashboard but is currently marked **Coming soon**.
+
+<Warning>
+Do not rely on this page for persistent cross-project memory. The feature is not generally available in the current product.
+</Warning>
+
+## What Eigent remembers today
+
+Current context can come from:
+
+- The active Project conversation
+- Earlier Runs in the same Project
+- Files in the active Space
+- Uploaded task attachments
+- Project instructions, rules, and tone
+- Enabled Agent Skills
+- Tool and connector configuration
+
+These sources are different from a dedicated long-term memory system.
+
+## Expected memory controls
+
+The final feature design is not yet available. Persistent memory is expected to
+include controls for:
+
+- What information an agent can store
+- Whether memory is scoped to a user, Space, Project, or agent
+- How a memory is created
+- How users review and edit memories
+- How users delete or disable memories
+- Retention and synchronization behavior
+- Sensitive-data controls
+- How memory affects prompts and model usage
+
+> **Screenshot placeholder:** Add a screenshot only after the Memory page contains active controls. Do not use the current Coming soon screen as the primary product image.
+
+> **Video placeholder:** Add a video only after users can create, review, and delete a memory. The video should include all three actions and explain scope.
+
+## Use current alternatives
+
+Until Agent Memory is available:
+
+- Put stable project behavior in project instructions.
+- Put reusable expertise in Agent Skills.
+- Keep related follow-ups in one Project.
+- Store durable reference material in the Space workspace.
+
+## Related guides
+
+- [Workspace instructions](/projects/workspace)
+- [Agent Skills](/core/agent-skills)
+- [Project runs](/core/project-runs)

docs/agents/overview.md

@@ -0,0 +1,98 @@
+---
+title: Agents overview
+description: Configure the models, Skills, sub-agents, tools, and workers that execute Eigent tasks.
+icon: bot
+---
+
+Agents perform the work requested in an Eigent Project. Their behavior depends on the selected model, assigned tools, Skills, project context, and execution mode.
+
+Use the Agents dashboard to configure reusable capabilities before starting a task.
+
+## Open the Agents dashboard
+
+1. Open the Eigent dashboard.
+2. Select **Agents**.
+3. Choose **Models**, **Skills**, **Sub-agents**, or **Memory**.
+
+> **Screenshot placeholder:** Add a screenshot of the Agents dashboard with the four navigation items visible. Use a configured model and example Skills, but hide all API keys.
+
+## Configure models
+
+Models provide reasoning and generation capabilities.
+
+Eigent supports:
+
+- Eigent Cloud models
+- Cloud providers using your own API keys
+- OpenAI-compatible endpoints
+- Local inference runtimes
+
+Configure at least one valid model before starting a task. See [Models overview](/models/overview).
+
+## Add Agent Skills
+
+Skills are reusable packages that provide instructions, scripts, templates, and domain knowledge. Eigent loads relevant Skills when a task matches their description.
+
+Use Skills for repeatable workflows such as:
+
+- Writing a specific report format
+- Following an engineering process
+- Creating branded presentations
+- Operating a specialized tool
+- Applying organization-specific rules
+
+See [Agent Skills](/core/agent-skills).
+
+## Configure workers
+
+Workers are specialized roles used by Workforce mode. A worker combines:
+
+- Name and role description
+- One or more tools
+- Model access
+- Instructions and Skills
+
+Eigent includes built-in Developer, Browser, Document, and Multimodal workers. Add custom workers when a task needs a recurring role or connector.
+
+## Connect remote sub-agents
+
+Remote sub-agents let Eigent delegate work to an externally hosted agent. The current interface supports a Gemini remote sub-agent configuration.
+
+Use a remote sub-agent when the external system has capabilities or context that should remain outside the local Eigent runtime.
+
+## Agent Memory status
+
+The Memory page is currently marked **Coming soon**. Project conversation history, instructions, files, and Skills are available today, but the separate persistent Agent Memory configuration is not generally available.
+
+## Recommended setup order
+
+1. Configure and validate a model.
+2. Install required connectors or MCP servers.
+3. Add Skills for reusable workflows.
+4. Create or edit Workforce workers.
+5. Optional: Configure a remote sub-agent.
+6. Start a test Project with a small task.
+
+> **Video placeholder:** Add a 90-second MP4 showing a model setup, Skill upload, custom worker creation, and a successful Workforce task. Include captions and a transcript.
+
+## Security
+
+- Use least-privilege credentials for models and tools.
+- Audit untrusted Skills before enabling them.
+- Review MCP commands and remote URLs.
+- Limit local-folder Spaces to directories the agents should access.
+- Remove unused provider keys, cookies, and connector credentials.
+
+## Related guides
+
+<CardGroup>
+  <Card title="Workers" icon="bot" href="/core/workers">
+    Create specialized Workforce roles and assign tools.
+  </Card>
+  <Card title="Agent Skills" icon="sparkles" href="/core/agent-skills">
+    Add reusable instructions, scripts, and resources.
+  </Card>
+  <Card title="Models overview" icon="brain" href="/models/overview">
+    Choose managed, BYOK, or local models.
+  </Card>
+</CardGroup>

docs/agents/remote-sub-agents.md

@@ -0,0 +1,93 @@
+---
+title: Remote sub-agents
+description: Connect a remote Gemini agent and delegate work from Eigent.
+icon: network-wired
+---
+
+Remote sub-agents let Eigent delegate a unit of work to an externally hosted agent and poll for the result. Use them when another agent platform provides specialized capabilities or isolated execution.
+
+The current interface supports a Gemini remote sub-agent provider.
+
+## Before you begin
+
+Prepare:
+
+- A Gemini API key
+- The remote service base URL
+- The configured remote agent name
+- A maximum wall-time value
+- A polling interval
+
+Use a dedicated credential with the minimum required permissions.
+
+## Open Sub-agents
+
+1. Open the Eigent dashboard.
+2. Select **Agents**.
+3. Select **Sub-agents**.
+4. Select the Gemini provider.
+
+> **Screenshot placeholder:** Add a screenshot of the Sub-agents configuration page. Blur the API key and any private endpoint.
+
+## Configure the provider
+
+1. Enter the Gemini API key.
+2. Confirm or change the base URL.
+3. Enter the remote agent name.
+4. Set the maximum wall time in seconds.
+5. Set the polling interval in seconds.
+6. Select **Save**.
+
+Eigent validates the connection before saving an enabled provider.
+
+## Enable the provider
+
+Use the provider switch to enable or disable delegation.
+
+When enabling an existing provider, Eigent validates required fields and the remote connection. If validation fails, the provider returns to its previous state.
+
+## Choose timing values
+
+### Maximum wall time
+
+Maximum wall time limits how long Eigent waits for the remote task to finish. Set it high enough for the expected work, but low enough to prevent indefinite jobs.
+
+### Poll interval
+
+Poll interval controls how frequently Eigent checks the remote task. Short intervals produce faster updates but increase request volume.
+
+Start with conservative values and adjust them after observing typical task duration.
+
+## Reset the provider
+
+1. Open the remote sub-agent configuration.
+2. Select the reset action.
+3. Confirm the removal.
+
+Reset deletes the stored provider record and restores the default form.
+
+> **Video placeholder:** Add a 45-60 second MP4 showing provider configuration, validation, enable and disable, and reset. Use test credentials and include captions.
+
+## Troubleshooting
+
+### Required-fields error
+
+Confirm the API key, base URL, agent name, maximum wall time, and polling interval. Timing values must be positive numbers.
+
+### Validation fails
+
+Check the API key, endpoint, agent name, network proxy, and provider availability.
+
+### Remote tasks time out
+
+Increase maximum wall time or reduce the scope of delegated work.
+
+### Polling causes rate limits
+
+Increase the polling interval.
+
+## Related guides
+
+- [Agents overview](/agents/overview)
+- [General settings](/settings/general)
+- [Privacy](/settings/privacy)

docs/automation/dispatch.md

@@ -0,0 +1,96 @@
+---
+title: Dispatch and remote control
+description: Control an active Eigent Space from a shareable remote web session.
+icon: tower-broadcast
+---
+
+Dispatch provides channels for interacting with Eigent away from the desktop application.
+
+The currently implemented channel is Remote Control. Telegram, Lark, and WhatsApp appear as future channels.
+
+## Open Dispatch
+
+1. Open a Space.
+2. In the project sidebar, select **Dispatch**.
+
+Remote Control requires an active Space because commands and desktop targets are scoped to that Space.
+
+> **Screenshot placeholder:** Add a screenshot of Dispatch with the Remote Control card, connection status, and activity log visible.
+
+## Start a Remote Control session
+
+1. In Dispatch, find **Remote Control**.
+2. Select **Start**.
+3. Wait for Eigent to create the session.
+4. Select **Copy link**.
+5. Open the link on the remote device.
+
+The remote page connects to the desktop bridge and targets the selected Space.
+
+## Send a remote follow-up
+
+1. Open the remote link.
+2. Confirm the connected desktop target.
+3. Enter a follow-up command.
+4. Send it.
+5. Review status updates on the remote page or desktop.
+
+Remote commands become task input on the desktop side.
+
+## Review activity
+
+The Dispatch activity log can show:
+
+- Session creation
+- Remote connection
+- Command delivery
+- Command status
+- Errors
+- Session stop
+
+Use it to determine whether a problem occurred in the remote page, server, desktop bridge, or active task.
+
+## Stop a session
+
+1. Return to Dispatch.
+2. Select **Stop**.
+
+Stop sessions when remote access is no longer required. A copied link should not be treated as permanent access.
+
+> **Video placeholder:** Add a 60-90 second MP4 showing session creation on desktop, opening the link on mobile, sending a follow-up, receiving it on desktop, and stopping the session. Include captions.
+
+## Messaging channels
+
+Telegram, Lark, and WhatsApp are displayed as Coming soon. The separate Channels dashboard also marks channel support as Coming soon.
+
+<Warning>
+Do not document these messaging channels as available until setup and connection controls are enabled.
+</Warning>
+
+## Security
+
+- Share remote links only with intended users.
+- Stop the session after use.
+- Avoid sending credentials through remote prompts.
+- Confirm the active Space before creating the link.
+- Review activity logs for unexpected commands.
+
+## Troubleshooting
+
+### Remote Control cannot start
+
+Open a Space and confirm the desktop can reach the Eigent server.
+
+### The remote page is disconnected
+
+Confirm that the desktop application is running and the bridge is connected.
+
+### A command does not reach the task
+
+Review Dispatch logs, confirm the target, and retry after the desktop bridge reconnects.
+
+## Related guides
+
+- [Automation overview](/automation/overview)
+- [Projects overview](/projects/overview)
+- [Privacy](/settings/privacy)

docs/automation/overview.md

@@ -0,0 +1,99 @@
+---
+title: Automation overview
+description: Run Eigent tasks on schedules, webhooks, app events, or remote-control commands.
+icon: bolt
+---
+
+Automation turns a project prompt into reusable work that can run without manually opening the task composer.
+
+Eigent supports scheduled triggers, webhooks, selected application events, and remote-control commands.
+
+## Open Automations
+
+Use either entry point:
+
+- In the project sidebar, select **Scheduled**.
+- In the Home dashboard, select **Triggers**.
+
+The project sidebar focuses on the active Space and Project. The Home dashboard provides a cross-project trigger view.
+
+> **Screenshot placeholder:** Add a screenshot of the Scheduled tab with the trigger list and execution log panel visible.
+
+## Choose an automation type
+
+### Scheduled trigger
+
+Runs a prompt once or on a daily, weekly, monthly, or custom cron schedule.
+
+### Webhook trigger
+
+Creates an HTTP endpoint that starts a task when an external system sends a request.
+
+### Slack trigger
+
+Starts a task from a configured Slack event. Availability depends on connector and trigger configuration.
+
+### Remote control
+
+Dispatch creates a shareable web session that can send follow-up commands to a desktop task in the selected Space.
+
+## Create a trigger
+
+1. Open **Scheduled**.
+2. Select **Create**.
+3. Enter a trigger name.
+4. Select the Project.
+5. Enter the task prompt.
+6. Choose Schedule or App.
+7. Configure timing, event, or webhook values.
+8. Save the trigger.
+
+## Manage triggers
+
+You can:
+
+- Edit a trigger
+- Activate or deactivate it
+- Delete it
+- Sort by created time, last execution, or token cost
+- Review execution history
+- Retry a failed execution
+
+## Review execution logs
+
+Open the execution log panel to see:
+
+- Trigger lifecycle events
+- Execution start and completion
+- Errors and cancellations
+- Webhook receipt
+- Token or task metadata when available
+
+Use the logs to distinguish trigger-delivery failures from task-execution failures.
+
+## Control execution
+
+Set:
+
+- Maximum failure count
+- Hourly execution limits
+- Daily execution limits
+- Expiration date for recurring schedules
+
+These controls help prevent a misconfigured trigger from generating unbounded work.
+
+> **Video placeholder:** Add a 90-second MP4 showing a scheduled trigger creation, automatic execution, log review, deactivation, and retry. Include captions.
+
+## Security
+
+- Treat webhook URLs as credentials.
+- Restrict app-trigger permissions.
+- Review task prompts before enabling recurring execution.
+- Add rate limits to event-driven triggers.
+- Disable triggers that are no longer monitored.
+
+## Related guides
+
+- [Scheduled triggers](/automation/scheduled-triggers)
+- [Webhook and app triggers](/automation/webhook-triggers)
+- [Dispatch and remote control](/automation/dispatch)

docs/automation/scheduled-triggers.md

@@ -0,0 +1,103 @@
+---
+title: Scheduled triggers
+description: Run project tasks once or on daily, weekly, and monthly schedules.
+icon: clock
+---
+
+Scheduled triggers run a saved task prompt at a configured time. Use them for recurring reports, monitoring, content updates, reminders, and other predictable work.
+
+## Before you begin
+
+Prepare:
+
+- A Project in the active Space
+- A model and required tools
+- A prompt that can run without additional clarification
+- A schedule and time zone
+
+Test the prompt manually before automating it.
+
+## Create a one-time schedule
+
+1. Open **Scheduled**.
+2. Select **Create**.
+3. Enter a trigger name and task prompt.
+4. Select **Schedule**.
+5. Choose **One time**.
+6. Select the date, hour, and minute.
+7. Set the maximum failure count.
+8. Create the trigger.
+
+## Create a recurring schedule
+
+Choose one of:
+
+- **Daily:** Runs every day at the selected time.
+- **Weekly:** Runs on selected weekdays.
+- **Monthly:** Runs on a selected day of the month.
+- **Custom cron:** Uses a five-part cron expression.
+
+Optional: Set an expiration date so the trigger stops creating new executions.
+
+> **Screenshot placeholder:** Add a screenshot of the schedule picker with weekly frequency, selected weekdays, execution time, expiration, and upcoming-run preview visible.
+
+## Understand time conversion
+
+The schedule picker displays local time and converts it to a UTC cron expression for storage.
+
+Review the upcoming execution preview before saving. Daylight-saving changes can affect local-time expectations for long-running schedules.
+
+## Use a custom cron expression
+
+A standard five-part expression contains:
+
+```text
+minute hour day-of-month month day-of-week
+```
+
+Example:
+
+```text
+0 9 * * 1-5
+```
+
+This represents 09:00 on weekdays in the cron time zone used by the system.
+
+Use the visual schedule options when possible because they also provide validation and execution previews.
+
+## Activate or deactivate a schedule
+
+Use the trigger switch to stop or resume future executions without deleting the configuration.
+
+Deactivating a trigger does not cancel a task that already started.
+
+## Review executions
+
+Open execution logs to review:
+
+- Scheduled time
+- Start and completion
+- Failure details
+- Retry status
+- Token cost when available
+
+> **Video placeholder:** Add a 60-second MP4 showing weekly schedule creation, upcoming execution preview, activation, and execution-log review. Include captions.
+
+## Troubleshooting
+
+### The trigger ran at the wrong local time
+
+Review the time zone, UTC conversion, and daylight-saving changes.
+
+### No execution was created
+
+Confirm that the trigger is active, has not expired, and still belongs to an available Project.
+
+### Repeated failures stop the trigger
+
+Review the maximum failure count, task prompt, model, and connector availability.
+
+## Related guides
+
+- [Automation overview](/automation/overview)
+- [Webhook and app triggers](/automation/webhook-triggers)

docs/automation/webhook-triggers.md

@@ -0,0 +1,96 @@
+---
+title: Webhook and app triggers
+description: Start Eigent tasks from HTTP requests or supported application events.
+icon: webhook
+---
+
+Webhook and app triggers start tasks when an external event occurs.
+
+Use a webhook for a custom system. Use an application trigger when Eigent provides a guided integration for the event source.
+
+## Create a webhook trigger
+
+1. Open **Scheduled**.
+2. Select **Create**.
+3. Enter a trigger name and task prompt.
+4. Select **App**.
+5. Choose **Webhook**.
+6. Select the HTTP method.
+7. Configure optional execution settings.
+8. Create the trigger.
+
+Eigent generates the webhook URL after creation.
+
+> **Screenshot placeholder:** Add a screenshot of the webhook configuration and the post-creation URL dialog. Obscure most of the URL token.
+
+## Call the webhook
+
+Use the generated URL from the external service. A simplified request can look like:
+
+```bash
+curl -X POST "https://example.com/api/your-webhook-url" \
+  -H "Content-Type: application/json" \
+  -d '{"event":"new_record","id":"123"}'
+```
+
+The real URL and accepted payload depend on the deployment and trigger configuration.
+
+Treat the URL as a credential. Do not commit it to a public repository.
+
+## Configure execution limits
+
+For event-driven triggers, configure:
+
+- Maximum executions per hour
+- Maximum executions per day
+- Authentication or verification values
+- Other dynamically loaded provider settings
+
+Rate limits reduce the impact of loops or high-volume events.
+
+## Create a Slack trigger
+
+1. Install and authenticate the Slack connector.
+2. Create a new App trigger.
+3. Select **Slack**.
+4. Complete the dynamically loaded event configuration.
+5. Enter the task prompt.
+6. Save and activate the trigger.
+
+A pending-authentication state means additional verification is required.
+
+## Use event data in the task
+
+Write the trigger prompt so the agent understands:
+
+- What the event represents
+- Which fields are relevant
+- What output to create
+- Where to send or store the result
+- When to stop or request review
+
+## Review and retry executions
+
+Use execution logs to review event receipt, task creation, completion, and errors. Retry only after fixing the underlying model, credential, prompt, or connector issue.
+
+> **Video placeholder:** Add a 90-second MP4 showing webhook creation, a test `curl` request, execution logs, and a Slack trigger configuration. Include captions.
+
+## Troubleshooting
+
+### The webhook returns an error
+
+Confirm the method, URL, authentication, and deployment base address.
+
+### The event creates too many tasks
+
+Deactivate the trigger, add hourly and daily limits, and fix the external event rule.
+
+### Slack remains pending authentication
+
+Reconnect Slack and complete the required verification fields.
+
+## Related guides
+
+- [Automation overview](/automation/overview)
+- [MCP Marketplace](/connectors/mcp-marketplace)
+- [Privacy](/settings/privacy)

docs/browser/connections.md

@@ -0,0 +1,84 @@
+---
+title: Browser connections
+description: Launch a managed browser or connect an existing CDP-enabled browser.
+icon: globe
+---
+
+The browser pool contains Chrome DevTools Protocol sessions that Eigent agents can use.
+
+## Open a new browser
+
+1. Open **Browser > Connections**.
+2. Select **Open new browser**.
+3. Wait for Eigent to launch the browser and add it to the pool.
+
+The browser item displays its name and debugging port.
+
+> **Screenshot placeholder:** Add a screenshot of the browser pool with two active browsers and their ports.
+
+## Connect an existing browser
+
+Start Chrome or Chromium with remote debugging enabled. For example:
+
+```bash
+google-chrome --remote-debugging-port=9222
+```
+
+The executable name differs by operating system and installation.
+
+Then:
+
+1. Open **Browser > Connections**.
+2. Select **Connect existing browser**.
+3. Enter the remote-debugging port.
+4. Select **Connect**.
+
+Eigent checks `http://localhost:<port>/json/version` before adding the browser.
+
+## Choose a port
+
+Use a port from `1` to `65535`. The port must:
+
+- Belong to a running CDP-enabled browser
+- Not already exist in the Eigent browser pool
+- Be reachable from the Eigent application
+
+## Remove a browser
+
+1. Find the browser in the pool.
+2. Select its delete action.
+3. Confirm the removal.
+
+Removing a browser disconnects it from Eigent. It does not necessarily close an external browser process.
+
+## Use the browser in a task
+
+1. Ensure a Browser worker is available.
+2. Start a task that requires web interaction.
+3. Open the Browser agent workspace in the Session.
+4. Use Take Control when the agent requests manual interaction.
+
+> **Video placeholder:** Add a 60-second MP4 showing Chrome started with remote debugging, connection through port `9222`, and a successful Browser-agent navigation. Include captions.
+
+## Troubleshooting
+
+### Invalid port
+
+Enter a whole number between `1` and `65535`.
+
+### Port already in use
+
+The port is already registered in the browser pool. Use the existing item or start another browser on a different port.
+
+### No browser found
+
+Confirm that the browser is running with remote debugging and that `/json/version` responds.
+
+### The browser disappears after restart
+
+External browser processes and ports can change. Start the browser again and reconnect it.
+
+## Related guides
+
+- [Browser overview](/browser/overview)
+- [Browser cookies](/browser/cookies)

docs/browser/cookies.md

@@ -0,0 +1,81 @@
+---
+title: Browser cookies
+description: Add authenticated browser sessions and manage cookies by domain.
+icon: cookie
+---
+
+Browser cookies let agents use authenticated websites without entering credentials during every task.
+
+Cookies can grant account access. Use a dedicated profile and remove sessions that are no longer required.
+
+## Open Cookie management
+
+1. Open the Eigent dashboard.
+2. Select **Browser**.
+3. Select **Cookies**.
+
+The page groups cookie records by main domain and shows the total cookie count for each group.
+
+> **Screenshot placeholder:** Add a screenshot of the Cookies page with several sample domains and cookie counts. Do not show real customer or personal domains.
+
+## Add authenticated cookies
+
+1. Select **Open browser**.
+2. Sign in to the required websites.
+3. Close the login browser when finished.
+4. Wait for Eigent to refresh the cookie list.
+5. Restart Eigent when prompted.
+
+The restart makes the new cookie state available to browser automation.
+
+## Refresh the cookie list
+
+Select the refresh control to reload available domains and counts.
+
+Use refresh after completing another login or when the list appears stale.
+
+## Delete a domain
+
+1. Find the main domain.
+2. Select its delete action.
+3. Confirm the deletion.
+
+Eigent deletes cookies for the main domain and its listed subdomains.
+
+## Delete all cookies
+
+1. Select **Delete all**.
+2. Confirm the action.
+3. Restart Eigent when prompted.
+
+This removes all browser cookie records managed by this feature.
+
+> **Video placeholder:** Add a 60-second MP4 showing login, cookie import, domain deletion, and restart. Use a test account and include captions.
+
+## Security guidance
+
+- Prefer test or dedicated automation accounts.
+- Do not import sessions with broad administrative access unless required.
+- Remove cookies after temporary work.
+- Protect local user data and backups containing browser state.
+- Never include cookie values in screenshots or support requests.
+
+## Troubleshooting
+
+### No new cookies appear
+
+Confirm that login completed, the login browser was closed, and the target site actually stored cookies.
+
+### A website still asks for login
+
+Restart Eigent, confirm the domain appears in the list, and check whether the website uses another domain or additional authentication.
+
+### Deleting cookies does not sign out immediately
+
+Restart Eigent and close other browser sessions. The service can also maintain server-side sessions until they expire or are revoked.
+
+## Related guides
+
+- [Browser overview](/browser/overview)
+- [Browser connections](/browser/connections)
+- [Privacy](/settings/privacy)

docs/browser/overview.md

@@ -0,0 +1,70 @@
+---
+title: Browser overview
+description: Give Eigent agents controlled access to browser sessions and authenticated websites.
+icon: compass
+---
+
+Eigent can launch or connect to Chrome DevTools Protocol browsers for research and browser automation. Browser agents can navigate pages, interact with controls, capture screenshots, and maintain session state.
+
+## Open Browser settings
+
+1. Open the Eigent dashboard.
+2. Select **Browser**.
+3. Choose **Connections**, **Plugins**, or **Cookies**.
+
+> **Screenshot placeholder:** Add a screenshot of the Browser settings page with the three navigation items and an active browser pool.
+
+## Browser Connections
+
+Connections manage browsers available to agents. You can:
+
+- Open a new managed browser
+- Connect an existing CDP-enabled browser
+- Review browser names and ports
+- Remove a browser from the pool
+
+See [Browser connections](/browser/connections).
+
+## Browser Cookies
+
+Cookies let agents use authenticated sessions. Open a dedicated login browser, sign in to required services, then let Eigent import the resulting cookie domains.
+
+See [Browser cookies](/browser/cookies).
+
+## Browser Plugins
+
+Browser Plugins are currently marked **Coming soon**.
+
+<Note>
+Do not present browser extension or plugin features as available until the product page includes active installation controls.
+</Note>
+
+## Use a browser in a Session
+
+When a Browser agent starts work, its workspace appears in the Project Session.
+
+The agent can:
+
+- Search and navigate
+- Click and type
+- Read page content
+- Capture visual state
+- Use available authenticated cookies
+
+When manual interaction is required, use **Take Control**, complete the action, and return control to the agent.
+
+## Security
+
+- Use a dedicated browser profile.
+- Avoid storing unnecessary privileged sessions.
+- Delete cookies when a task no longer needs them.
+- Review actions before giving an agent access to sensitive services.
+- Do not connect a remote-debugging port to an untrusted network.
+
+> **Video placeholder:** Add a 60-second MP4 showing a browser connection, a Browser-agent task, Take Control, and return of control. Include captions.
+
+## Related guides
+
+- [Browser connections](/browser/connections)
+- [Browser cookies](/browser/cookies)
+- [Google Search](/connectors/google-search)

docs/connectors/custom-mcp.md

@@ -0,0 +1,107 @@
+---
+title: Custom MCP servers
+description: Add local command-based or remote URL-based Model Context Protocol servers.
+icon: wrench
+---
+
+Use a custom Model Context Protocol server when you need a tool that is not included in Eigent's supported integration catalog.
+
+Eigent supports:
+
+- Local MCP servers started with a command
+- Remote MCP servers reached through a URL
+
+## Review the server before installation
+
+An MCP server can read data, call APIs, or execute actions. Before adding one:
+
+- Read its source code or trusted documentation.
+- Review requested permissions.
+- Inspect commands and arguments.
+- Confirm how credentials are stored.
+- Test it with a restricted account.
+
+## Add a local MCP server
+
+1. Open **Connectors**.
+2. Select **Add MCP**.
+3. Choose **Local**.
+4. Paste the MCP JSON configuration.
+5. Review the command and arguments.
+6. Select **Install**.
+
+Example:
+
+```json
+{
+  "mcpServers": {
+    "sequential-thinking": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
+    }
+  }
+}
+```
+
+Use an absolute executable path when the Electron process cannot resolve the command through the normal shell environment.
+
+> **Screenshot placeholder:** Add a screenshot of the local MCP JSON dialog with a safe example server configuration.
+
+## Add a remote MCP server
+
+1. Open **Connectors**.
+2. Select **Add MCP**.
+3. Choose **Remote**.
+4. Enter a display name.
+5. Enter the remote server URL.
+6. Save the configuration.
+
+Use HTTPS for remote servers outside a trusted local network.
+
+## Configure environment variables
+
+1. Select the MCP server.
+2. Open its environment configuration.
+3. Add the required keys and values.
+4. Save.
+
+Never place production secrets directly in public configuration examples.
+
+## Enable and test the server
+
+1. Enable the MCP server.
+2. Add it to a test worker.
+3. Start a small task that uses one tool.
+4. Review the task log for the tool call and result.
+
+## Edit or delete a server
+
+Use the server actions to update command arguments, URL, description, or environment values. Delete the server when it is no longer required.
+
+Deleting an MCP entry does not revoke credentials at the external service.
+
+> **Video placeholder:** Add a 90-second MP4 showing local and remote MCP setup, environment configuration, worker assignment, and a test call. Include captions.
+
+## Troubleshooting
+
+### The local command is not found
+
+Use an absolute path or ensure the executable is installed in the environment used by Eigent.
+
+### The process exits immediately
+
+Run the command in a terminal and inspect its output. Confirm arguments and required environment variables.
+
+### A remote URL cannot be reached
+
+Check DNS, TLS, authentication, proxy settings, and firewall rules.
+
+### Tools do not appear
+
+Enable the MCP server, restart it if required, and assign it to the worker.
+
+## Related guides
+
+- [Connectors overview](/connectors/overview)
+- [MCP Marketplace](/connectors/mcp-marketplace)
+- [Workers](/core/workers)

docs/connectors/google-search.md

@@ -0,0 +1,78 @@
+---
+title: Google Search
+description: Configure web search for managed and self-hosted Eigent deployments.
+icon: magnifying-glass
+---
+
+Google Search provides current web results for Browser agents and research workflows.
+
+## Determine your setup
+
+### Managed Eigent mode
+
+Google Search can be enabled by default and does not require user credentials.
+
+### Self-hosted or custom mode
+
+Provide:
+
+- Google API key
+- Google Custom Search Engine ID
+
+## Create Google credentials
+
+1. In Google Cloud, create or select a project.
+2. Enable the Custom Search JSON API.
+3. Create an API key with appropriate restrictions.
+4. Create or select a Programmable Search Engine.
+5. Copy its Search Engine ID.
+
+Use Google's current Custom Search documentation for account-specific steps and quota information.
+
+## Configure Search in Eigent
+
+1. Open **Connectors**.
+2. Select **Google Search**.
+3. Enter the Google API key.
+4. Enter the Search Engine ID.
+5. Save the configuration.
+
+> **Screenshot placeholder:** Add a screenshot of the Google Search configuration form. Blur the complete API key and Search Engine ID.
+
+## Test Search
+
+Start a small Browser-agent task, for example:
+
+> Find the three most recent official release notes for Eigent and return their publication dates and source links.
+
+Review the task log to confirm that the search tool returned results.
+
+## Control cost and quota
+
+Google Custom Search can enforce daily quotas or billing limits. Use a restricted key and monitor usage in Google Cloud.
+
+## Troubleshooting
+
+### Invalid API key
+
+Confirm that the key is active, the Custom Search JSON API is enabled, and API restrictions allow the service.
+
+### Invalid Search Engine ID
+
+Copy the identifier from the Programmable Search Engine control panel, not the display name.
+
+### Empty results
+
+Review the search engine's site scope and settings. A search engine restricted to selected sites will not return the full web.
+
+### Quota exceeded
+
+Review the current quota and billing settings in Google Cloud.
+
+> **Video placeholder:** Add a 45-second MP4 showing credential entry, saving, and a successful Browser-agent search. Include captions.
+
+## Related guides
+
+- [Connectors overview](/connectors/overview)
+- [Browser overview](/browser/overview)
+- [Self-hosting](/get_started/self-hosting)

docs/connectors/mcp-marketplace.md

@@ -0,0 +1,92 @@
+---
+title: MCP Marketplace
+description: Install, configure, enable, and remove supported connector integrations.
+icon: store
+---
+
+The MCP Marketplace provides guided installation for supported services. Use it before creating a custom MCP configuration because marketplace integrations include service-specific defaults and credential fields.
+
+## Browse integrations
+
+1. Open **Connectors**.
+2. Expand the supported integration section.
+3. Use search to find a service.
+4. Select the integration.
+
+Connected services appear before unconnected services. Coming-soon services appear after available integrations.
+
+> **Screenshot placeholder:** Add a screenshot of the connector catalog with one connected integration, one available integration, and one Coming soon item.
+
+## Install an integration
+
+The exact flow depends on the service:
+
+1. Select the integration.
+2. Select **Install** or **Connect**.
+3. Complete OAuth or enter required environment variables.
+4. Save the configuration.
+5. Enable the connector.
+
+Notion and other services can open a dedicated authentication flow. Other integrations request keys or tokens directly.
+
+## Configure environment variables
+
+1. Select a connected integration.
+2. Open its configuration.
+3. Enter each required environment value.
+4. Save the changes.
+
+Use credentials created specifically for Eigent. Avoid personal administrator tokens.
+
+## Enable or disable an integration
+
+Use the connector switch to control whether its tools are available.
+
+Disabling a connector preserves its configuration but prevents new agent use. Existing external sessions can remain active at the provider until revoked.
+
+## Edit an integration
+
+1. Open the integration actions.
+2. Select **Edit** or **Configure**.
+3. Update the required values.
+4. Save.
+5. Run a test task.
+
+## Uninstall an integration
+
+1. Open the integration actions.
+2. Select **Uninstall**.
+3. Confirm the action.
+
+Uninstalling removes the Eigent connector configuration. Revoke OAuth grants or provider tokens separately when required.
+
+## Assign the integration to a worker
+
+1. Open the Workspace.
+2. Add or edit a worker.
+3. Select the integration from **Agent Tool**.
+4. Save the worker.
+
+The worker can use only the tools assigned to it.
+
+> **Video placeholder:** Add a 60-second MP4 showing installation, credential configuration, enable and disable, and worker assignment for one integration. Include captions.
+
+## Troubleshooting
+
+### Installation completes but the connector is not shown as connected
+
+Refresh the connector list and confirm that required credentials were saved.
+
+### A tool returns an authorization error
+
+Reconnect the integration or replace the expired credential.
+
+### The desired service is not listed
+
+Use [Custom MCP servers](/connectors/custom-mcp).
+
+## Related guides
+
+- [Connectors overview](/connectors/overview)
+- [Workers](/core/workers)
+- [Privacy](/settings/privacy)

docs/connectors/overview.md

@@ -0,0 +1,103 @@
+---
+title: Connectors overview
+description: Extend Eigent with hosted integrations, Google Search, and custom MCP servers.
+icon: plug
+---
+
+Connectors give agents access to external services and tools. A connector can search data, read or write records, send messages, access calendars, or expose a custom capability through the Model Context Protocol (MCP).
+
+## Open Connectors
+
+1. Open the Eigent dashboard.
+2. Select **Connectors**.
+
+The page combines supported integrations, Google Search, and user-managed MCP servers.
+
+> **Screenshot placeholder:** Add a screenshot of the Connectors page showing connected integrations, available integrations, and the Your MCP section. Hide account names and credentials.
+
+## Connector types
+
+### Supported integrations
+
+Supported integrations provide a guided setup for known services. The current interface can include:
+
+- Notion
+- Slack
+- Google Calendar
+- Gmail
+- LinkedIn
+- Lark
+- Telegram
+- Cursor
+- VS Code
+
+Catalog availability can vary by deployment.
+
+### Google Search
+
+Google Search provides current web results for Browser agents and research workflows. Managed mode can enable it by default; self-hosted mode requires Google Custom Search credentials.
+
+### Custom MCP servers
+
+Add a local command-based server or a remote MCP URL when the required service is not in the supported catalog.
+
+## Understand connector status
+
+Connected integrations appear before unconnected ones. A connector can provide:
+
+- Install or authentication action
+- Enable or disable switch
+- Configuration form
+- Environment variables
+- Edit and delete actions
+
+Some items remain visible as future integrations.
+
+<Note>
+X, WhatsApp, Reddit, and GitHub are marked Coming soon in the current connector interface. Do not describe them as generally available until their controls are enabled.
+</Note>
+
+## Assign tools to agents
+
+Installing a connector makes its tools available to Eigent. To use it in Workforce:
+
+1. Open the Workspace.
+2. Add or edit a worker.
+3. Open the tool selector.
+4. Select the connector.
+5. Save the worker.
+
+Describe the service and expected operation in the task prompt.
+
+## Security
+
+Connectors can perform actions in external systems.
+
+- Use accounts and credentials with minimum permissions.
+- Review OAuth consent and environment variables.
+- Audit custom MCP commands and remote URLs.
+- Disable connectors that are not required.
+- Remove credentials before sharing screenshots or logs.
+
+> **Video placeholder:** Add a 90-second MP4 showing a supported integration install, a custom MCP server, worker assignment, and a successful tool call. Include captions.
+
+## Troubleshooting
+
+### A connector is installed but unused
+
+Assign it to the relevant worker and make the intended action explicit in the task.
+
+### Authentication expires
+
+Open the connector configuration and repeat its authentication flow.
+
+### An MCP server does not start
+
+Run the configured command independently and review its environment variables and executable path.
+
+## Related guides
+
+- [MCP Marketplace](/connectors/mcp-marketplace)
+- [Custom MCP servers](/connectors/custom-mcp)
+- [Google Search](/connectors/google-search)
+- [Workers](/core/workers)

docs/core/agent-skills.md

@@ -27,19 +27,19 @@ Eigent provides pre-built Agent Skills for common tasks, and you can create or u
 
 - **Example Skills:** These are pre-built Agent Skills available to all users on Eigent. They operate seamlessly behind the scenes, and Eigent utilizes them without requiring any manual setup. You have the option to manually enable or disable it.
 
-  <video controls className="w-full aspect-video rounded-xl" src="/docs/images/agent_skills_example_skills_04.mp4"></video>
+  <video controls className="w-full aspect-video rounded-xl" src="/images/agent_skills_example_skills_04.mp4" alt="Enable or disable example Agent Skills in Eigent"></video>
 
 - **Custom Skills:** These allow you to package your specific domain expertise and organizational knowledge. They are available across your Eigent workforce, and you can assign them to specific agents. You can create them directly within the Skill interface or add them via Eigent's settings.
 
-  ![Screenshot 2026-02-24 at 21.58.11.png](/docs/images/agent_skills_settings_screenshot.png)
+  ![Screenshot 2026-02-24 at 21.58.11.png](/images/agent_skills_settings_screenshot.png)
 
 Upload your own Skills as zip files through Homepage > Agents > Skills. Custom Skills are individual to each user and saved locally.
 
-<video controls className="w-full aspect-video rounded-xl" src="/docs/images/agent_skills_skill01.mp4"></video>
+<video controls className="w-full aspect-video rounded-xl" src="/images/agent_skills_skill01.mp4" alt="Upload a custom Agent Skill in Eigent"></video>
 
 You can upload a standalone `SKILL.md` file or a complete `.zip` skill package. If uploading a package, it must contain a `SKILL.md` file in its root directory. In either case, the `SKILL.md` file must define the Skill's name and description using YAML formatting.
 
-<video controls className="w-full aspect-video rounded-xl" src="/docs/images/agent_skills_skill02.mp4"></video>
+<video controls className="w-full aspect-video rounded-xl" src="/images/agent_skills_skill02.mp4" alt="Configure the metadata for a custom Agent Skill"></video>
 
 Every Skill requires a `SKILL.md` file with YAML frontmatter:
 
@@ -60,12 +60,12 @@ description: Brief description of what this Skill does and when to use it
 
 Eigent supports uploading multiple skills within one zip file, but please ensure the contents of each skill folder are complete.
 
-<video controls className="w-full aspect-video rounded-xl" src="/docs/images/agent_skills_skills_05.mp4"></video>
+<video controls className="w-full aspect-video rounded-xl" src="/images/agent_skills_skills_05.mp4" alt="Upload multiple Agent Skills from a package"></video>
 
 ## Using Skills
 
 To test your Skill file immediately, click the **Try in chat** button.
 
-<video controls className="w-full aspect-video rounded-xl" src="/docs/images/agent_skills_skill03.mp4"></video>
+<video controls className="w-full aspect-video rounded-xl" src="/images/agent_skills_skill03.mp4" alt="Test an Agent Skill using Try in chat"></video>
 
 Use Skills only from trusted sources. Malicious Skills can misuse tools or execute unintended actions, potentially causing data leaks or unauthorized access—so carefully audit any untrusted Skill before use.

docs/core/concepts.md

@@ -10,7 +10,7 @@ Autonomous agents tailored to specific roles that run tasks independently or tog
 
 Each Worker is designed with specific capabilities and can be customized to handle particular types of tasks efficiently.
 
-![Workers concept illustration](/docs/images/concepts_worker.png)
+> **Screenshot placeholder:** Add a current screenshot for “Workers concept illustration”.
 
 ## Workforce
 
@@ -18,7 +18,7 @@ A coordinated team of Workers that collaborate to complete complex workflows. Th
 
 The Workforce orchestrates multiple Workers, ensuring they work together seamlessly to achieve your goals.
 
-![Workforce collaboration illustration](/docs/images/concepts_workforce.gif)
+> **Video placeholder:** Add a current video walkthrough for “Workforce collaboration illustration”. Include captions.
 
 ## Workspace
 
@@ -26,7 +26,7 @@ A live window into a Worker's process where you can watch or take control. For e
 
 Workspaces provide real-time visibility into what your Workers are doing, allowing you to monitor progress and intervene when needed.
 
-![Workspace interface illustration](/docs/images/concepts_workspace.gif)
+> **Video placeholder:** Add a current video walkthrough for “Workspace interface illustration”. Include captions.
 
 ## Tasks & Subtasks
 
@@ -34,7 +34,7 @@ You define a mission (task), the Workforce breaks it into components (subtasks),
 
 This hierarchical approach ensures complex projects are broken down into manageable pieces and executed efficiently.
 
-![Tasks and subtasks breakdown illustration](/docs/images/concepts_tasks_subtasks.gif)
+> **Video placeholder:** Add a current video walkthrough for “Tasks and subtasks breakdown illustration”. Include captions.
 
 ## Chat
 
@@ -42,7 +42,7 @@ Your primary interface for communicating with your Workforce. You use it to defi
 
 The Chat interface serves as your command center, where you can give instructions, ask questions, and receive updates from your AI team.
 
-![Chat interface illustration](/docs/images/concepts_chat.png)
+> **Screenshot placeholder:** Add a current screenshot for “Chat interface illustration”.
 
 ## MCP
 
@@ -50,7 +50,7 @@ Model Context Protocol that allows Workers to use external tools. It connects yo
 
 MCP extends your Workers' capabilities by providing access to real-world data and tools, making them more powerful and versatile.
 
-![MCP protocol illustration](/docs/images/concepts_mcp.png)
+> **Screenshot placeholder:** Add a current screenshot for “MCP protocol illustration”.
 
 ## Models
 
@@ -58,4 +58,4 @@ Different AI "brains" that power your Workers. Eigent allows you to choose from
 
 Choose the right model for each task based on your specific needs for performance, accuracy, or cost efficiency.
 
-![AI models illustration](/docs/images/concepts_models.png)
+> **Screenshot placeholder:** Add a current screenshot for “AI models illustration”.

docs/core/models/byok.md

@@ -25,7 +25,7 @@ description: Configure your own API keys to use various LLM providers with Eigen
 
 1. Find the **OpenAI** card in the Custom Model section
 
-![byok_1](/docs/images/byok_1.png)
+![byok_1](/images/byok_1.png)
 
 1. Fill in the following fields:
 

docs/core/models/ernie.md

@@ -16,7 +16,7 @@ description: This guide walks you through setting up your Baidu ERNIE API key wi
 - Launch Eigent and navigate to the **Home Page**.
 - Click on the **Agent** tab, then click on the **Models** button.
 
-![Ernie 1 Pn](/docs/images/model_setting.png)
+![Ernie 1 Pn](/images/model_setting.png)
 
 #### 2. Locate Model Configuration
 
@@ -34,7 +34,7 @@ Click on the Ernie card and fill in the following fields:
   - _Example:_ `ernie-5.0`
 - **Save:** Click the **Save** button to apply your changes.
 
-![Ernie 2 Pn](/docs/images/ernie.png)
+![Ernie 2 Pn](/images/ernie.png)
 
 #### 4. Set as Default & Verify
 

docs/core/models/gemini.md

@@ -16,7 +16,7 @@ description: This guide walks you through setting up your Google Gemini API key
 - Launch Eigent and navigate to the **Home Page**.
 - Click on the **Agent** tab, then click on the **Models** button.
 
-![Gemini 1 Pn](/docs/images/model_setting.png)
+![Gemini 1 Pn](/images/model_setting.png)
 
 #### 2. Locate Model Configuration
 
@@ -34,7 +34,7 @@ Click on the Gemini Config card and fill in the following fields:
   - _Example:_ `gemini-3-pro-preview`
 - **Save:** Click the **Save** button to apply your changes.
 
-![Gemini 3 Pn](/docs/images/gemini.png)
+![Gemini 3 Pn](/images/gemini.png)
 
 #### 4. Set as Default & Verify
 

docs/core/models/kimi.md

@@ -16,7 +16,7 @@ description: This guide walks you through setting up your Kimi (Moonshot AI) API
 - Launch Eigent and navigate to the **Home Page**.
 - Click on the **Agent** tab, then click on the **Models** button.
 
-![Kimi 1 Pn](/docs/images/model_setting.png)
+![Kimi 1 Pn](/images/model_setting.png)
 
 #### 2. Locate Model Configuration
 
@@ -34,7 +34,7 @@ Click on the Moonshot card and fill in the following fields:
   - _Example:_ `kimi-k2.5`
 - **Save:** Click the **Save** button to apply your changes.
 
-![Kimi 3 Pn](/docs/images/kimi.png)
+![Kimi 3 Pn](/images/kimi.png)
 
 #### 4. Set as Default & Verify
 

docs/core/models/local-model.md

@@ -45,13 +45,13 @@ ollama pull qwen2.5:7b
 
 2. Setting your model
 
-![set_local_model](/docs/images/models_local_model.png)
+> **Screenshot placeholder:** Add a current screenshot for “set_local_model”.
 
 3. Configure the Google Search toolkit
 
-![configure_searchtools](/docs/images/models_configure_tools.png)
+> **Screenshot placeholder:** Add a current screenshot for “configure_searchtools”.
 
-<img src="/docs/images/models_configure_tools_key.png" alt="configure_searchtoolsapi" /> You can refer to the following document for detailed information on how to configure **GOOGLE_API_KEY** and **SEARCH_ENGINE_ID :** https://developers.google.com/custom-search/v1/overview
+> **Screenshot placeholder:** Add a current screenshot for “configure_searchtoolsapi”. You can refer to the following document for detailed information on how to configure **GOOGLE_API_KEY** and **SEARCH_ENGINE_ID :** https://developers.google.com/custom-search/v1/overview
 
 ## **API KEY Reference**
 

docs/core/models/minimax.md

@@ -17,7 +17,7 @@ description: This guide walks you through setting up your MiniMax API key within
 - Click on the **Settings** tab (usually located in the sidebar or top
   navigation).
 
-![Minimax 1 Pn](/docs/images/model_setting.png)
+![Minimax 1 Pn](/images/model_setting.png)
 
 #### 2. Locate Model Configuration
 
@@ -25,7 +25,7 @@ description: This guide walks you through setting up your MiniMax API key within
 - Scroll down to the **Custom Model** area.
 - Look for the **Minimax Config** card.
 
-![Minimax 2 Pn](/docs/images/minimax_1.png)
+> **Screenshot placeholder:** Add a current screenshot for “Minimax 2 Pn”.
 
 #### 3. Enter API Details
 
@@ -37,7 +37,7 @@ Click on the Minimax Config card and fill in the following fields:
   - _Example:_ `MiniMax-M2.1`
 - **Save:** Click the **Save** button to apply your changes.
 
-![Minimax 3 Pn](/docs/images/minimax_2.png)
+> **Screenshot placeholder:** Add a current screenshot for “Minimax 3 Pn”.
 
 #### 4. Set as Default & Verify
 
@@ -45,6 +45,6 @@ Click on the Minimax Config card and fill in the following fields:
   selected/active.
 - **You are ready to go.** Your Eigent agents can now utilize the Minimax model.
 
-![Minimax 4 Pn](/docs/images/minimax_3.png)
+> **Screenshot placeholder:** Add a current screenshot for “Minimax 4 Pn”.
 
 ---

docs/core/models/sambanova.md

@@ -16,7 +16,7 @@ description: This guide walks you through setting up your SambaNova API key with
 - Launch Eigent and navigate to the **Home Page**.
 - Click on the **Agent** tab，then click on the **Models** button.
 
-![SambaNova 1 Pn](/docs/images/model_setting.png)
+![SambaNova 1 Pn](/images/model_setting.png)
 
 #### 2. Locate Model Configuration
 
@@ -34,7 +34,7 @@ Click on the SambaNova card and fill in the following fields:
   - _Example:_ `DeepSeek-V3.1`
 - **Save:** Click the **Save** button to apply your changes.
 
-![SambaNova 2 Pn](/docs/images/sambanova.png)
+![SambaNova 2 Pn](/images/sambanova.png)
 
 #### 4. Set as Default & Verify
 

docs/core/project-runs.md

@@ -0,0 +1,121 @@
+---
+title: Project runs
+description: Continue a project with follow-up requests and switch between each run's progress, context, and outputs.
+icon: rotate
+---
+
+Use follow-up requests to continue working in the same Project without losing earlier history. Eigent saves the original task and each follow-up as a separate **Run**.
+
+The Run selector appears in the Session side panel after a Project contains at least two Runs.
+
+## Understand Runs
+
+The first request in a Project is **Run 1**. The first follow-up is **Run 2**, and later follow-ups continue in chronological order.
+
+Each Run can have its own:
+
+- Prompt and attachments
+- Status
+- Plan and subtasks
+- Assigned agents
+- Execution context
+- Browser and terminal state
+- Generated files
+
+> **Screenshot placeholder:** Add a screenshot of a Project with **Run 2** selected and the Run dropdown open. Show at least one completed Run and one active Run.
+
+## Create another Run
+
+1. Open a Project.
+2. In the Session composer, enter a follow-up request.
+3. Attach any new files.
+4. Send the request.
+5. In Workforce mode, review and start the new plan.
+
+Eigent adds the request to the same conversation and updates the Run selector.
+
+Use a follow-up when the new request depends on previous work. Create another Project when the goal, file boundary, or audience is unrelated.
+
+## Switch Runs
+
+1. Open the Session side panel.
+2. Select **Run N** in the panel header.
+3. Select a Run from the dropdown.
+
+The dropdown lists the newest Run first. Each item includes:
+
+- Run number
+- Prompt preview
+- Status indicator
+- Checkmark for the selected Run
+
+Selecting a Run scrolls the conversation to that request and updates the Session side panel.
+
+## Understand status indicators
+
+| Indicator         | Meaning                     |
+| ----------------- | --------------------------- |
+| Pulsing brand dot | Pending or running          |
+| Green dot         | Finished                    |
+| Red dot           | Failed                      |
+| Neutral dot       | Inactive or no final status |
+
+## Review Run-specific content
+
+Selecting a Run updates the available:
+
+- Workforce or Single Agent progress
+- Agents and subtasks
+- Execution context
+- Uploaded and generated files
+- Browser workspace
+- Terminal workspace
+- Expanded Workforce view
+
+Opening a file or selecting a subtask acts on the selected Run instead of automatically using the latest Run.
+
+## Scroll through Run history
+
+The Run selector and conversation remain synchronized:
+
+- Selecting a Run scrolls the conversation to it.
+- Manually scrolling to another Run updates the Run label.
+- After a dropdown selection, Eigent keeps the selected Run while smooth scrolling reaches the requested position.
+
+> **Video placeholder:** Add a 45-60 second MP4 showing Run selection, automatic chat scrolling, manual scrolling, and the side panel changing between two Runs. Include captions.
+
+## Example workflow
+
+Suppose Run 1 asks Eigent to research a market and create a report.
+
+1. Add competitor pricing as Run 2.
+2. Turn the updated findings into a presentation as Run 3.
+3. Select Run 1 to review the original research.
+4. Select Run 2 to inspect pricing outputs.
+5. Select Run 3 to monitor presentation creation.
+
+All three Runs remain in one Project.
+
+## Troubleshooting
+
+### The Run selector is not visible
+
+The Project contains only one Run, or the follow-up has not been added to the conversation.
+
+### The side panel changes while you scroll
+
+The selected Run follows the Run most visible in the conversation. Select a Run from the dropdown to return to it.
+
+### An older Run has no workspace
+
+That Run might not have used the selected agent, browser, terminal, or output type.
+
+### A Run does not appear
+
+A Run needs a user prompt. Wait for the follow-up to appear in the conversation, then reopen the selector.
+
+## Related guides
+
+- [Projects overview](/projects/overview)
+- [Sessions](/projects/sessions)
+- [Context and files](/projects/context-and-files)

docs/core/tools.md

@@ -10,20 +10,20 @@ icon: plug
 
 1. Click Settings
 
-![click_settings](/docs/images/models_settings.png)
+> **Screenshot placeholder:** Add a current screenshot for “click_settings”.
 
 2. Click Add MCP Server
 
-![add_mcp](/docs/images/tools_add_mcp.png)
+> **Screenshot placeholder:** Add a current screenshot for “add_mcp”.
 
 3. Configure Your MCP Server and install
 
-![configure_mcp](/docs/images/tools_configure_mcp.png)
+> **Screenshot placeholder:** Add a current screenshot for “configure_mcp”.
 
 4.Add external servers to your own Agent
 
 - You can check the installed mcp server in the Added external servers column
 
-![check_mcp](/docs/images/tools_check.png)
+> **Screenshot placeholder:** Add a current screenshot for “check_mcp”.
 
 - After configuring your mcp server, you can add it to a Custom Agent.

docs/core/workers.md

@@ -26,7 +26,7 @@ Always treat your API keys and access tokens like passwords. Eigent stores them
 
 </aside>
 
-![add mcp servers.gif](/docs/images/add_mcp_servers.gif)
+> **Video placeholder:** Add a current video walkthrough for “add mcp servers.gif”. Include captions.
 
 ## Creating and Equipping a Custom Worker
 
@@ -39,7 +39,7 @@ Once you've configured a new MCP server, you need to create a worker that knows
   - Select the custom MCP server you just configured (e.g., Github MCP). You can also add any other tools you want this worker to have.
   - Click **Save**.
 
-![add worker.gif](/docs/images/add_worker.gif)
+> **Video placeholder:** Add a current video walkthrough for “add worker.gif”. Include captions.
 
 ## What’s next?
 

docs/core/workforce.md

@@ -27,7 +27,8 @@ With Workforce, agents plan, solve, and verify work together—like a project te
 ### **Architecture: How Workforce Works**
 
 Workforce uses a **hierarchical, modular design** for real-world team problem-solving.
-![Workforce](/docs/images/workforce.jpg)
+
+> **Screenshot placeholder:** Add a current screenshot for “Workforce”.
 
 See how the coordinator and task planner agents orchestrate a multi-agent workflow:
 

docs/dashboard/overview.md

@@ -0,0 +1,93 @@
+---
+title: Dashboard overview
+description: Navigate Eigent's Home dashboard and manage Spaces, Projects, Tasks, and Triggers.
+icon: grid-2
+---
+
+The Home dashboard is the management surface for work across Eigent. Use it to find active work, review history, organize projects, and manage automations without opening each project first.
+
+## Open the dashboard
+
+1. Open Eigent.
+2. In the main navigation, select **Home**.
+3. Select **Spaces**, **Projects**, **Tasks**, or **Triggers**.
+
+The active section appears in the URL, so returning to the same link restores that section.
+
+> **Screenshot placeholder:** Add a full-width screenshot of the Home dashboard with the four section tabs and toolbar visible. Use sample data that does not contain customer information.
+
+## Dashboard sections
+
+### Spaces
+
+Spaces are top-level work areas. A Space can use an Eigent-managed scratch folder or connect directly to a local folder. Each Space contains projects, tasks, files, and triggers.
+
+### Projects
+
+Projects group related tasks and follow-up runs. Open a project to continue its conversation, review files, or inspect agent activity.
+
+### Tasks
+
+Tasks provide a cross-project history of requests. Use this view when you know the prompt or task status but not the containing project.
+
+### Triggers
+
+Triggers run project prompts on a schedule, through a webhook, or from a supported application event.
+
+## Use the toolbar
+
+The toolbar changes the active dashboard section without changing how its items are managed.
+
+| Control | Purpose                                                     |
+| ------- | ----------------------------------------------------------- |
+| Search  | Filters the active section by name or prompt                |
+| Sort    | Sorts by created time, updated time, or name                |
+| Grid    | Shows visual cards with key metadata                        |
+| List    | Shows compact rows for scanning many items                  |
+| Board   | Groups items into status columns                            |
+| Create  | Starts a blank Space or a Space connected to a local folder |
+
+Search and sort reset when you move to another section. The selected layout persists for future visits.
+
+## Understand board status
+
+Board view organizes work into three operational groups:
+
+- **Default:** Work that is not currently executing or waiting for review.
+- **Running:** Work with an active task or execution.
+- **Awaiting review:** Work that needs user input or a decision.
+
+The exact status of a card still appears in its metadata.
+
+## Start new work
+
+1. In the Home toolbar, open the create menu.
+2. Choose **Start from scratch** for an Eigent-managed workspace, or **Use local folder** to connect existing files.
+3. Eigent opens the new Space in the Workspace.
+4. Enter a task, select Single Agent or Workforce mode, and send the request.
+
+> **Video placeholder:** Add a short MP4 showing a user creating a Space, starting a task, and returning to the dashboard to find the new Project and Task. Include captions.
+
+## Manage existing work
+
+Cards and rows expose actions appropriate to their type:
+
+- Rename or delete a project.
+- Open, share, or delete a task.
+- Pause or resume an ongoing task.
+- Edit, enable, disable, or delete a trigger.
+- Open a Space and continue work in its Workspace.
+
+## Next steps
+
+<CardGroup>
+  <Card title="Spaces" icon="folder-tree" href="/dashboard/spaces">
+    Learn how Spaces define file and project boundaries.
+  </Card>
+  <Card title="Projects" icon="folder-kanban" href="/dashboard/projects">
+    Manage persistent project workstreams.
+  </Card>
+  <Card title="Views and search" icon="table-columns" href="/dashboard/views-and-search">
+    Find work and choose the best dashboard layout.
+  </Card>
+</CardGroup>

docs/dashboard/projects.md

@@ -0,0 +1,77 @@
+---
+title: Projects
+description: Find, rename, review, and manage projects across your Spaces.
+icon: folder-kanban
+---
+
+Projects are persistent workstreams inside a Space. A project can contain multiple task runs, file outputs, agent workspaces, and triggers.
+
+## Find a project
+
+1. In the Home dashboard, select **Projects**.
+2. Use search when you know part of the project name.
+3. Sort by created time, updated time, or name.
+4. Select a project card or row to open it.
+
+The project opens in its Space and loads the available session history.
+
+> **Screenshot placeholder:** Add a screenshot of the Projects dashboard in board view with default, running, and awaiting-review columns.
+
+## Understand project metadata
+
+A project item can show:
+
+- Project name
+- Containing Space
+- Number of tasks
+- Number of triggers
+- Latest activity
+- Current execution or review state
+
+Use the Space label to distinguish projects with similar names.
+
+## Rename a project
+
+1. Open the project actions.
+2. Select **Rename**.
+3. Enter the new name.
+4. Save the change.
+
+Choose a name that describes the ongoing goal rather than only the first task. For example, use “Q3 competitor research” instead of “Search the web.”
+
+## Continue a project
+
+1. Open the project.
+2. In the chat input, enter a follow-up request.
+3. Send the request.
+4. Review the generated plan when Workforce planning is enabled.
+5. Start the task.
+
+Eigent adds the request as another run in the same project. See [Project runs](/core/project-runs).
+
+## End a project
+
+Ending, or achieving, a project marks the work as complete.
+
+1. In the project sidebar, open the project actions.
+2. Select the end-project action.
+3. Confirm the action.
+
+If a run is active, Eigent stops it before marking the project achieved. The project remains available in history.
+
+## Delete a project
+
+1. Open the project actions.
+2. Select **Delete**.
+3. Review the confirmation message.
+4. Confirm the deletion.
+
+Deleting a project removes it from the active project list and can archive its server-backed record. Export or copy required outputs before deletion.
+
+> **Video placeholder:** Add a short MP4 showing project search, rename, follow-up run creation, and project completion. Include captions.
+
+## Related guides
+
+- [Projects overview](/projects/overview)
+- [Sessions](/projects/sessions)
+- [Tasks dashboard](/dashboard/tasks)

docs/dashboard/spaces.md

@@ -0,0 +1,105 @@
+---
+title: Spaces
+description: Organize projects and local folders into persistent Eigent work areas.
+icon: folder-tree
+---
+
+A Space is the top-level boundary for work in Eigent. It groups projects, tasks, triggers, and files so that related work stays together.
+
+## Choose a Space type
+
+### Blank Space
+
+A blank Space starts with an Eigent-managed scratch workspace. Use it for research, writing, planning, or tasks that should not modify an existing local folder.
+
+### Local-folder Space
+
+A local-folder Space binds Eigent to a folder on your computer. Use it when agents need to inspect or modify an existing codebase, document set, or project directory.
+
+### Legacy Space
+
+A legacy Space contains work created before the current Space system. Eigent keeps these projects available so that older task history remains accessible.
+
+## Create a blank Space
+
+1. In the Home dashboard, select **Spaces**.
+2. Open the create menu.
+3. Select **Start from scratch**.
+4. Eigent creates a Space and opens its Workspace.
+5. Optional: Rename the Space from the Space switcher.
+
+Blank Spaces use artifact-only storage. Agents create outputs in Eigent-managed project storage rather than writing directly to a user-selected folder.
+
+## Create a Space from a local folder
+
+1. In the Home dashboard, select **Spaces**.
+2. Open the create menu.
+3. Select **Use local folder**.
+4. In the folder picker, select the directory that Eigent can access.
+5. Confirm the selection.
+
+The Space name initially follows the selected folder name. The **Context** tab shows the folder binding.
+
+> **Screenshot placeholder:** Add a screenshot of the Space creation menu with **Start from scratch** and **Use local folder** visible.
+
+## Switch Spaces
+
+1. In the project sidebar, select the current Space name.
+2. Select another Space.
+
+Eigent loads that Space's projects and restores its most recently visited project when possible.
+
+## Rename a Space
+
+1. Open the Space switcher.
+2. Open the actions for the active Space.
+3. Select **Rename**.
+4. Enter a non-empty name and select **Save**.
+
+Legacy Spaces and some system-managed Spaces cannot be renamed.
+
+## Work with local changes
+
+Local-folder Spaces can show pending workspace changes. Depending on the current state, the Space menu can provide actions to:
+
+- Load or refresh the working directory.
+- Apply pending changes.
+- Discard pending changes.
+- Resolve a stale workspace state.
+
+Review changed files before applying or discarding them.
+
+> **Video placeholder:** Add a short MP4 showing a local-folder Space, agent-generated file changes, review in Context, and the apply or discard workflow. Include captions.
+
+## Review Space status
+
+The Spaces dashboard shows:
+
+- Space name and source type
+- Local folder name when applicable
+- Project count
+- Task count
+- Trigger count
+- Current operational status
+
+Use board view to group Spaces by default, running, and awaiting-review state.
+
+## Troubleshooting
+
+### Context is unavailable
+
+The active Space might not have a workspace binding. Create a Space from a local folder or wait for Eigent to finish preparing the scratch workspace.
+
+### A local folder does not appear
+
+Confirm that the folder still exists and that Eigent has operating-system permission to access it.
+
+### A blank Space disappeared
+
+Eigent can hide unused placeholder Spaces. Start a project or give the Space a meaningful name to keep it in the dashboard.
+
+## Related guides
+
+- [Create a project](/projects/create-project)
+- [Context and files](/projects/context-and-files)
+- [Dashboard projects](/dashboard/projects)

docs/dashboard/tasks.md

@@ -0,0 +1,72 @@
+---
+title: Tasks
+description: Review and manage individual tasks across all Eigent projects.
+icon: list-check
+---
+
+The Tasks dashboard provides a cross-project view of every request submitted to Eigent. Use it to find work by prompt, status, or date when you do not need to browse the project hierarchy first.
+
+## Find a task
+
+1. In the Home dashboard, select **Tasks**.
+2. Search for text from the original request.
+3. Optional: Sort by created time, updated time, or name.
+4. Select the task to open its containing project.
+
+Task search matches the request text. The project and Space labels identify where the task belongs.
+
+> **Screenshot placeholder:** Add a screenshot of the Tasks dashboard in list view with prompt, project, Space, date, and status visible.
+
+## Understand task status
+
+Tasks can move through the following states:
+
+- **Pending:** The request exists but execution has not started.
+- **Planning:** Eigent is preparing or splitting the task.
+- **Running:** One or more agents are working.
+- **Paused:** Execution is temporarily stopped.
+- **Awaiting review:** Eigent needs user input, confirmation, or plan approval.
+- **Completed:** The task reached a successful final state.
+- **Failed:** Execution ended with an error.
+
+Status names can vary slightly between the dashboard and live session, but they represent the same task lifecycle.
+
+## Pause an ongoing task
+
+1. Find the running task.
+2. Open its task actions.
+3. Select **Pause**.
+
+Eigent records elapsed time and sends a pause request to the active task.
+
+## Resume a paused task
+
+1. Find the paused task.
+2. Open its task actions.
+3. Select **Resume**.
+
+The task returns to a running state and continues from its preserved context when supported.
+
+## Share a task
+
+1. Open the actions for a completed task.
+2. Select **Share**.
+3. Copy the generated link.
+
+Review the shared content before distributing the link. Shared tasks can contain prompts, outputs, and project context.
+
+## Delete a task
+
+1. Open the task actions.
+2. Select **Delete**.
+3. Confirm the deletion.
+
+Deleting a task removes it from task history and its containing project. Save required outputs first.
+
+> **Video placeholder:** Add a short MP4 showing task search, pause, resume, and share actions. Include captions.
+
+## Related guides
+
+- [Sessions](/projects/sessions)
+- [Project runs](/core/project-runs)
+- [Views and search](/dashboard/views-and-search)

docs/dashboard/views-and-search.md

@@ -0,0 +1,80 @@
+---
+title: Views and search
+description: Search, sort, and change layouts across the Eigent dashboard.
+icon: table-columns
+---
+
+The Home dashboard provides the same search, sort, and layout controls for Spaces, Projects, Tasks, and Triggers. Use these controls to move from a visual overview to a compact operational list without changing the underlying data.
+
+## Search the active section
+
+1. Select **Spaces**, **Projects**, **Tasks**, or **Triggers**.
+2. Select the search control.
+3. Enter part of a name or task prompt.
+
+Search applies only to the active section:
+
+| Section  | Search target         |
+| -------- | --------------------- |
+| Spaces   | Space name            |
+| Projects | Project name          |
+| Tasks    | Original task request |
+| Triggers | Trigger name          |
+
+Changing sections clears the search query.
+
+## Sort dashboard items
+
+1. Select the sort control.
+2. Choose **Created**, **Updated**, or **Name**.
+3. To reverse the direction, select the same field again.
+
+Created and updated fields default to newest first. Name defaults to alphabetical order.
+
+## Choose a layout
+
+### Grid view
+
+Grid view uses cards and emphasizes names, status, counts, and primary actions. Use it for a visual overview of a smaller set of items.
+
+### List view
+
+List view uses compact rows. Use it to scan many items and compare metadata across the same columns.
+
+### Board view
+
+Board view groups items into:
+
+- Default
+- Running
+- Awaiting review
+
+Use board view as an operational queue for active work.
+
+> **Screenshot placeholder:** Add one composite image showing the same Projects data in grid, list, and board layouts. Label each layout in surrounding text rather than inside the image.
+
+## Choose the right view
+
+| Goal                            | Recommended view     |
+| ------------------------------- | -------------------- |
+| Browse a few recent items       | Grid                 |
+| Scan a large history            | List                 |
+| Monitor active and blocked work | Board                |
+| Find one known item             | Any view with search |
+
+## Current limitations
+
+The filter control appears in the toolbar but is currently disabled. Use section search, sort, and board status grouping until advanced filters are available.
+
+<Note>
+Do not document advanced dashboard filters as available until the control is enabled in the product.
+</Note>
+
+> **Video placeholder:** Add a 30-45 second MP4 showing search, sort-direction changes, and switching between all three layouts. Include captions.
+
+## Related guides
+
+- [Dashboard overview](/dashboard/overview)
+- [Spaces](/dashboard/spaces)
+- [Projects](/dashboard/projects)
+- [Tasks](/dashboard/tasks)

docs/docs.json

@@ -12,7 +12,7 @@
   "colors": {
     "primary": "#1d1d1d",
     "light": "#F5F4F0",
-    "dark": "#363AF5"
+    "dark": "#5F63FF"
   },
   "background": {
     "color": {
@@ -36,7 +36,7 @@
     ],
     "primary": {
       "type": "button",
-      "label": "Get Started",
+      "label": "Download",
       "href": "https://www.eigent.ai/download"
     }
   },
@@ -51,35 +51,113 @@
             "pages": [
               "/get_started/welcome",
               "/get_started/installation",
-              "/get_started/quick_start"
+              "/get_started/quick_start",
+              "/get_started/self-hosting",
+              "/core/concepts"
             ]
           },
           {
-            "group": "Core",
-            "icon": "key",
+            "group": "Dashboard",
+            "icon": "grid-2",
             "pages": [
-              "/core/concepts",
-              "/core/brain-architecture",
-              "/core/workforce",
+              "/dashboard/overview",
+              "/dashboard/spaces",
+              "/dashboard/projects",
+              "/dashboard/tasks",
+              "/dashboard/views-and-search"
+            ]
+          },
+          {
+            "group": "Projects",
+            "icon": "folder-kanban",
+            "pages": [
+              "/projects/overview",
+              "/projects/create-project",
+              "/projects/workspace",
+              "/projects/context-and-files",
+              "/projects/sessions",
+              "/core/project-runs",
+              "/projects/single-agent",
+              "/core/workforce"
+            ]
+          },
+          {
+            "group": "Agents",
+            "icon": "bot",
+            "pages": [
+              "/agents/overview",
+              "/core/workers",
+              "/core/agent-skills",
+              "/agents/remote-sub-agents",
+              "/agents/memory"
+            ]
+          },
+          {
+            "group": "Models",
+            "icon": "brain",
+            "pages": [
+              "/models/overview",
+              "/models/eigent-cloud",
+              "/core/models/byok",
+              "/core/models/local-model",
+              "/models/provider-reference",
               {
-                "group": "Models",
-                "icon": "brain",
-                "expanded": true,
+                "group": "Provider Guides",
+                "expanded": false,
                 "pages": [
-                  "/core/models/byok",
-                  "/core/models/local-model",
                   "/core/models/gemini",
                   "/core/models/ernie",
                   "/core/models/minimax",
                   "/core/models/kimi",
                   "/core/models/sambanova"
                 ]
-              },
-              "/core/tools",
-              "/core/workers",
-              "/core/agent-skills"
+              }
             ]
           },
+          {
+            "group": "Connectors",
+            "icon": "plug",
+            "pages": [
+              "/connectors/overview",
+              "/connectors/mcp-marketplace",
+              "/connectors/custom-mcp",
+              "/connectors/google-search",
+              "/core/tools"
+            ]
+          },
+          {
+            "group": "Browser",
+            "icon": "compass",
+            "pages": [
+              "/browser/overview",
+              "/browser/connections",
+              "/browser/cookies"
+            ]
+          },
+          {
+            "group": "Automation",
+            "icon": "bolt",
+            "pages": [
+              "/automation/overview",
+              "/automation/scheduled-triggers",
+              "/automation/webhook-triggers",
+              "/automation/dispatch"
+            ]
+          },
+          {
+            "group": "Settings",
+            "icon": "gear",
+            "pages": [
+              "/settings/general",
+              "/settings/appearance",
+              "/settings/privacy"
+            ]
+          },
+          {
+            "group": "Open Source",
+            "icon": "code-branch",
+            "pages": ["/open-source/overview", "/core/brain-architecture"]
+          },
           {
             "group": "Troubleshooting",
             "icon": "question-circle",
@@ -91,9 +169,14 @@
     "global": {
       "anchors": [
         {
-          "anchor": "Download Here",
-          "href": "https://www.eigent.ai",
-          "icon": "gift"
+          "anchor": "Download Eigent",
+          "href": "https://www.eigent.ai/download",
+          "icon": "download"
+        },
+        {
+          "anchor": "GitHub",
+          "href": "https://github.com/eigent-ai/eigent",
+          "icon": "github"
         }
       ]
     }

docs/get_started/quick_start.md

@@ -10,7 +10,7 @@ This guide will walk you through building your first multi-agent workforce using
 
 Once opened, you'll land on the **Task** page. It’s a clean space designed to turn your ideas into action. Let's break down what you see.
 
-![Layout](/docs/images/quickstart_firsttask.png)
+> **Screenshot placeholder:** Add a current screenshot for “Layout”.
 
 ### The Top Bar
 
@@ -21,7 +21,7 @@ At the very top of the window is your main navigation bar. You'll access:
   - Ongoing Tasks
 - **Settings:** where you can configure the app to your liking.
 
-![Task Hub](/docs/images/quickstart_thetopbar.png)
+> **Screenshot placeholder:** Add a current screenshot for “Task Hub”.
 
 ### The Main View
 
@@ -30,23 +30,24 @@ Your workspace is split into two panels:
 **Message Box (Left):** where you'll chat with your AI workforce to start a job.
 
 - Before running the task, you can Add, Edit, or Delete any subtask or Back to Edit your request, then resume. When tasks complete, you can use Replay to re-run the flow.
-  ![Message](/docs/images/quickstart_themainview.gif)
 
-- You can pause anytime—hit **Pause**, edit via **Back to Edit**, then resume. When tasks complete, use **Replay** to re-run the flow.![Message 2](/docs/images/quickstart_pause.gif)
+  > **Video placeholder:** Add a current video walkthrough for “Message”. Include captions.
+
+- You can pause anytime—hit **Pause**, edit via **Back to Edit**, then resume. When tasks complete, use **Replay** to re-run the flow.> **Video placeholder:** Add a current video walkthrough for “Message 2”. Include captions.
 
 **Canvas (Right):** where your AI agents get to work.
 
 - **Before a Task:** You'll see your pre-built agents and and their tools. You can also click **+ New Worker** to add your own. These workers will always be on standby for your task.
 - **During a Task:** The Canvas shows the live status of all subtasks (`Done / In Progress / Unfinished`). Click any subtask to view detailed logs (reasoning steps, tool calls, results). More on this below.
-  ![Task in Progress](/docs/images/quickstart_canvas_inprogress.png)
+  > **Screenshot placeholder:** Add a current screenshot for “Task in Progress”.
 - **Canvas Toolbar:** At the bottom of the Canvas, you'll see a toolbar. This is where you manage your views of agents. You can switch between different task views, such as **Home**, **Agent Folder**, or a specific worker's **Workspace**.
-  ![Add Worker](/docs/images/quickstart_canvas_bottom.png)
+  > **Screenshot placeholder:** Add a current screenshot for “Add Worker”.
 
 ### Agent Folder
 
 This is the filing cabinet for your workforce. Any files your agents create or use (like documents, spreadsheets, code, pictures, or presentations) are automatically saved here. These files are also stored locally on your computer and/or in your cloud for easy access.
 
-![Agent Folder](/docs/images/quickstart_agentfolder.png)
+> **Screenshot placeholder:** Add a current screenshot for “Agent Folder”.
 
 #### 📌 Note on File Storage
 
@@ -66,7 +67,7 @@ Eigent comes with four ready-to-work agents. Each is equipped with a specific se
 1. **Multimodal Agent** – ideals with images, videos and more
 1. **Document Agent** – reads, writes and manages files (Markdown, PDF, Word, etc.)
 
-![Pre-build Agents](/docs/images/quickstart_prebuiltagents.gif)
+> **Video placeholder:** Add a current video walkthrough for “Pre-build Agents”. Include captions.
 
 ### Add your own workers
 
@@ -76,7 +77,7 @@ Click **“+ Add Workers”**, provide:
 - **Description** (optional): the role of your customized agent
 - **Agent Tool**: install any tool available from our MCP Servers to give your agent the exact skills it needs.
 
-![Add Your Own Workers](/docs/images/quickstart_addworker.gif)
+> **Video placeholder:** Add a current video walkthrough for “Add Your Own Workers”. Include captions.
 
 ## Start Your First Task
 
@@ -97,7 +98,7 @@ Once you send your task, our **Coordinator Agent** and **Task Agent** kick in to
 
 Once you're happy with the plan, hit **Start Task.** Eigent will automatically assign each subtask to the best agent for the job based on the tools they have.
 
-![Launch the Task](/docs/images/quickstart_lauchtask.gif)
+> **Video placeholder:** Add a current video walkthrough for “Launch the Task”. Include captions.
 
 ## Watch Agents Work
 
@@ -109,18 +110,18 @@ Once the task starts, your agents will run in parallel on the Canvas:
   - **Task Results:** The output or conclusion of the subtask.
 - Hover over tasks to see status details
 
-![Watch Agents Work](/docs/images/quickstart_subtasklog.gif)
+> **Video placeholder:** Add a current video walkthrough for “Watch Agents Work”. Include captions.
 
 Click on an agent icon to open its **Workspace**:
 
 - Example 1: open **Browser Agent**, launch embedded browser
   - Use **“Take Control”** to take over browsing (e.g., accept cookies), then return control to the agent
 
-![Browser Agent](/docs/images/quickstart_takecontrol.gif)
+> **Video placeholder:** Add a current video walkthrough for “Browser Agent”. Include captions.
 
 - Example 2: open **Developer Agent**, lauch **Terminal**
 
-![Developer Agent](/docs/images/quickstart_terminal.gif)
+> **Video placeholder:** Add a current video walkthrough for “Developer Agent”. Include captions.
 
 <aside>
 
@@ -151,7 +152,7 @@ Click the gear icon in the top-right corner to open Settings. Here’s a brief o
 - **Language:** Choose between English, Simplified Chinese, or your System Default.
 - **Appearance:** Switch between Light mode. On macOS, a Transparent mode is also available.
 
-![General](/docs/images/quickstart_settings_general.png)
+> **Screenshot placeholder:** Add a current screenshot for “General”.
 
 ### **Models**
 
@@ -162,7 +163,7 @@ Eigent can run in two modes. Your choice here affects how you are billed and wha
 
 </aside>
 
-![Models](/docs/images/quickstart_settings_localmodel.png)
+> **Screenshot placeholder:** Add a current screenshot for “Models”.
 
 - **Cloud Version:** We provide pre-configured, state-of-the-art models, including GPT-4.1, GPT-4.1 mini and Gemini 2.5 Pro. Using these models is the easiest way to get started and will be billed to your account based on usage (credits).
 - **Self-hosted Version:** You can connect your own models.
@@ -173,11 +174,11 @@ Eigent can run in two modes. Your choice here affects how you are billed and wha
 
 MCPs are the **tools** that give your agents their skills. We've pre-configured popular tools like Slack, Notion, Google Calendar, GitHub, and more in **MCP Market**, which you can install for your agents with a single click.
 
-![MCP Markets](/docs/images/quickstart_settings_mcp.png)
+> **Screenshot placeholder:** Add a current screenshot for “MCP Markets”.
 
 For advanced users, you can click **Add MCP Server** to configure and install custom tools from third-party sources.
 
-![MCP Servers](/docs/images/quickstart_settings_addmcp.png)
+> **Screenshot placeholder:** Add a current screenshot for “MCP Servers”.
 
 ## Next Steps
 

docs/get_started/self-hosting.md

@@ -0,0 +1,150 @@
+---
+title: Self-hosting
+description: Run Eigent with your own backend, model providers, and local workspace.
+icon: server
+---
+
+Self-host Eigent when you need control over model providers, credentials, project files, or the infrastructure that runs your agents. A self-hosted installation uses the open-source Eigent application and lets you connect cloud APIs, OpenAI-compatible endpoints, or local inference servers.
+
+This page describes the recommended setup path. Exact deployment requirements can change between releases, so use the repository files and release notes as the source of truth for version-specific values.
+
+## Before you begin
+
+Prepare the following:
+
+- A supported desktop operating system or Linux development environment
+- Git
+- Node.js `18` through `22`
+- The Python version required by the repository backend
+- Enough disk space for dependencies, generated files, and optional local models
+- Credentials for at least one cloud provider, or a running local model server
+
+<Note>
+Local model requirements depend on the model and runtime. Large models can require substantial memory or GPU capacity.
+</Note>
+
+## Choose a deployment model
+
+Eigent supports three common arrangements:
+
+| Arrangement           | Model execution                               | Best for                                         |
+| --------------------- | --------------------------------------------- | ------------------------------------------------ |
+| Managed application   | Eigent Cloud                                  | Fast evaluation with minimal setup               |
+| Self-hosted with BYOK | External provider APIs                        | Infrastructure control with hosted model quality |
+| Fully local           | Ollama, vLLM, SGLang, LM Studio, or LLaMA.cpp | Private environments and local experimentation   |
+
+You can configure more than one provider and change the preferred model later.
+
+## Set up the repository
+
+1. Clone the Eigent repository:
+
+   ```bash
+   git clone https://github.com/eigent-ai/eigent.git
+   cd eigent
+   ```
+
+2. Install the frontend dependencies:
+
+   ```bash
+   npm install
+   ```
+
+3. Review `.env.development`, `backend/README.md`, and the root `README.md` for the current backend and environment configuration.
+
+4. Start the development application:
+
+   ```bash
+   npm run dev
+   ```
+
+5. In Eigent, open **Agents > Models** and configure a model provider.
+
+<Note>
+The first development start can take longer because Eigent prepares frontend and backend dependencies.
+</Note>
+
+> **Screenshot placeholder:** Add a screenshot of Eigent running locally with **Agents > Models** open. Crop the image to the application window and hide credentials.
+
+## Configure a model
+
+For the fastest self-hosted setup, connect an existing provider:
+
+1. In Eigent, open **Agents > Models**.
+2. Expand **Bring Your Own Key**.
+3. Select a provider.
+4. Enter the API key, endpoint, and model name required by that provider.
+5. Select **Validate** or **Save**.
+6. Enable the provider and mark it as preferred when you want it to be the default.
+
+To keep inference local, start one of the supported runtimes and follow [Local models](/core/models/local-model).
+
+## Configure tools and browser access
+
+A model can reason about a task, but tools let it act.
+
+- Add hosted integrations from [MCP Marketplace](/connectors/mcp-marketplace).
+- Add your own local or remote server from [Custom MCP servers](/connectors/custom-mcp).
+- Configure a CDP browser from [Browser connections](/browser/connections).
+- Create a Space from a local folder when agents need direct access to project files.
+
+> **Video placeholder:** Add a 60-90 second MP4 showing a local installation, model configuration, local-folder Space creation, and the first successful task. Include captions and a short transcript.
+
+## Build a distributable application
+
+Use the build script for the target platform:
+
+```bash
+npm run build
+```
+
+Platform-specific scripts include:
+
+```bash
+npm run build:mac
+npm run build:win
+npm run build:linux
+```
+
+Review the Electron signing, packaging, and backend dependency requirements before distributing a build to other users.
+
+## Update a self-hosted installation
+
+1. Commit or back up local configuration changes.
+2. Pull the target release or branch.
+3. Review release notes and environment changes.
+4. Reinstall dependencies when lockfiles changed.
+5. Run the relevant tests and build command.
+6. Start Eigent and validate models, connectors, browser sessions, and existing Spaces.
+
+## Troubleshooting
+
+### The application starts without a model
+
+Open **Agents > Models** and configure at least one cloud, BYOK, or local provider. Eigent blocks new tasks when no valid model is available.
+
+### A local model cannot be reached
+
+Confirm that the runtime is running, the endpoint includes the expected `/v1` path, and the port is accessible from the Eigent process.
+
+### MCP tools fail during startup
+
+Review the MCP command, arguments, environment variables, and executable path. Run the server independently to confirm that it starts before adding it to Eigent.
+
+### Browser connection fails
+
+Confirm that Chrome or Chromium was started with remote debugging and that the configured port exposes `/json/version`.
+
+## Next steps
+
+<CardGroup>
+  <Card title="Provider reference" icon="list" href="/models/provider-reference">
+    Compare every cloud and local model provider supported by Eigent.
+  </Card>
+  <Card title="Open-source Eigent" icon="code-branch" href="/open-source/overview">
+    Review the repository architecture and extension points.
+  </Card>
+  <Card title="Brain architecture" icon="diagram-project" href="/core/brain-architecture">
+    Understand how the frontend, Brain backend, and services work together.
+  </Card>
+</CardGroup>

docs/get_started/welcome.md

@@ -8,12 +8,7 @@ icon: wave
 
 Built on CAMEL-AI's acclaimed open-source project (CAMEL with 13k⭐ on GitHub, #1 on GitHub Daily Trending), our system introduces a **Multi-Agent Workforce** that **boosts productivity** through parallel execution, customization, and privacy protection. Previously #1 opensource project on GAIA.
 
-<img
-src="/docs/images/thumbnail.png"
-alt="Dynamic Workforce"
-width="100%"
-height="auto"
-/>
+> **Screenshot placeholder:** Add a current screenshot for “Dynamic Workforce”.
 
 ## Core Features and Capabilities
 

docs/models/eigent-cloud.md

@@ -0,0 +1,92 @@
+---
+title: Eigent Cloud models
+description: Use managed models and credits without configuring provider API keys.
+icon: cloud
+---
+
+Eigent Cloud provides managed model access for users who do not want to configure provider credentials or local inference.
+
+## When to use Eigent Cloud
+
+Choose Eigent Cloud when you want:
+
+- The fastest setup path
+- A curated model catalog
+- No provider API-key management
+- Usage tracked through Eigent credits
+- A managed fallback while testing BYOK or local models
+
+## Enable a Cloud model
+
+1. Open **Agents > Models**.
+2. Select **Cloud**.
+3. Review the available models.
+4. Select the model to use.
+5. Enable Cloud and mark it as preferred when it should be the default.
+
+> **Screenshot placeholder:** Add a screenshot of the Cloud model catalog and preferred-model control. Use an account with non-sensitive sample credit data.
+
+## Available model families
+
+The current application catalog can include managed options from:
+
+- Google Gemini
+- OpenAI
+- Anthropic Claude
+- DeepSeek
+- MiniMax
+
+Exact models can change as providers release new versions. Treat the in-product catalog as the source of truth for current availability.
+
+## Understand credits
+
+Cloud usage consumes Eigent credits. Credit consumption depends on the selected model and task usage.
+
+The product can show:
+
+- Current plan
+- Available credit balance
+- Links for plan management
+- Model availability based on the account
+
+Review the current pricing and plan page before running large or automated workloads.
+
+## Change the Cloud model
+
+1. Open the Cloud model selector.
+2. Choose another available model.
+3. Save or apply the selection.
+
+New tasks use the new preference. Running tasks are not migrated automatically.
+
+## Use Cloud with other providers
+
+You can keep Cloud enabled while also configuring BYOK and local providers. Mark one provider as preferred, then select another model for individual tasks when needed.
+
+This supports workflows such as:
+
+- Cloud as the default, local model for private files
+- BYOK as the default, Cloud as a fallback
+- Different model families for coding, research, and writing
+
+> **Video placeholder:** Add a 45-second MP4 showing Cloud model selection, preferred-provider changes, and selecting a different model for a new task. Include captions.
+
+## Troubleshooting
+
+### No Cloud models are available
+
+Confirm the account is signed in, the application can reach Eigent services, and the current plan includes model access.
+
+### Credits are unavailable
+
+Open account management to review the plan or add credits.
+
+### The selected model changed
+
+Model availability can change. Open the Cloud catalog and select another supported model.
+
+## Related guides
+
+- [Models overview](/models/overview)
+- [Provider reference](/models/provider-reference)
+- [Privacy](/settings/privacy)

docs/models/overview.md

@@ -0,0 +1,96 @@
+---
+title: Models overview
+description: Choose between Eigent Cloud, your own provider keys, and local inference servers.
+icon: brain
+---
+
+Eigent is model-flexible by design. You can use managed Eigent Cloud models, connect provider accounts with your own keys, or run open models on local infrastructure.
+
+At least one valid model is required before Eigent can start a task.
+
+## Open Models
+
+1. Open the Eigent dashboard.
+2. Select **Agents**.
+3. Select **Models**.
+
+The Models page separates managed cloud, bring-your-own-key, and local providers.
+
+> **Screenshot placeholder:** Add a screenshot of the Models page with the Cloud, BYOK, and Local sections visible. Hide all credential values.
+
+## Choose a model source
+
+### Eigent Cloud
+
+Use managed models without configuring provider credentials. This is the quickest way to evaluate Eigent and is billed through Eigent credits.
+
+### Bring Your Own Key
+
+Connect a supported cloud provider with your own API key and endpoint. Provider billing and data handling follow the provider account.
+
+### Local models
+
+Connect Eigent to Ollama, vLLM, SGLang, LM Studio, or LLaMA.cpp. Local models can keep inference on infrastructure you control.
+
+## Configure a provider
+
+1. Select the provider.
+2. Enter the required key, endpoint, model name, and provider-specific fields.
+3. Validate or save the configuration.
+4. Enable the provider.
+5. Optional: Mark it as preferred.
+
+Some providers can load their model catalog dynamically. Others require a model name.
+
+## Select a default model
+
+The preferred provider becomes the default choice for new tasks. You can also choose a model from the task composer when model selection is available there.
+
+Changing the default affects future tasks. It does not replace the model already used by an active Run.
+
+## Compare model options
+
+Consider:
+
+- Reasoning quality
+- Tool-use reliability
+- Context window
+- Input and output modalities
+- Latency
+- Cost
+- Data residency
+- Local hardware requirements
+
+Use a representative task to validate a model before making it the default for all work.
+
+> **Video placeholder:** Add a 60-second MP4 showing one BYOK provider and one local runtime being configured, validated, enabled, and selected. Include captions.
+
+## Remove a provider
+
+1. Open the provider.
+2. Disable it.
+3. Select the delete or reset action.
+4. Confirm the removal.
+
+Removing a provider deletes its stored Eigent configuration. It does not delete the provider account or local model.
+
+## Troubleshooting
+
+### Validation fails
+
+Check the key, endpoint, model name, provider region, API version, and network proxy.
+
+### No local models appear
+
+Confirm the local runtime is running and supports model listing. Some runtimes require entering the model name manually.
+
+### A task still uses another model
+
+Confirm the preferred provider and the model selected in the task composer. Existing active Runs keep their current configuration.
+
+## Related guides
+
+- [Eigent Cloud models](/models/eigent-cloud)
+- [Bring Your Own Key](/core/models/byok)
+- [Local models](/core/models/local-model)
+- [Provider reference](/models/provider-reference)

docs/models/provider-reference.md

@@ -0,0 +1,110 @@
+---
+title: Provider reference
+description: Review every cloud and local model provider supported by Eigent.
+icon: list
+---
+
+Eigent supports multiple provider types so open-source deployments can choose models based on capability, cost, privacy, and infrastructure.
+
+Provider availability and required fields are defined by the current application. Use this page as an overview and the provider's official documentation for account, model, and billing details.
+
+## Cloud and BYOK providers
+
+| Provider             | Typical required values                    | Notes                                 |
+| -------------------- | ------------------------------------------ | ------------------------------------- |
+| Google Gemini        | API key, endpoint, model                   | Google model family                   |
+| OpenAI               | API key, endpoint, model                   | OpenAI API                            |
+| Anthropic            | API key, endpoint, model                   | Claude model family                   |
+| OrcaRouter           | API key, endpoint                          | Can load a grouped model catalog      |
+| OpenRouter           | API key, endpoint, model                   | Routes models from multiple providers |
+| Qwen                 | API key, endpoint, model                   | Tongyi Qianwen provider               |
+| DeepSeek             | API key, endpoint, model                   | DeepSeek model family                 |
+| MiniMax              | API key, endpoint, model                   | MiniMax model family                  |
+| Z.ai                 | API key, endpoint, model                   | Z.ai model family                     |
+| Moonshot             | API key, endpoint, model                   | Moonshot model family                 |
+| ModelArk             | API key, endpoint, model                   | ModelArk service                      |
+| SambaNova            | API key, endpoint, model                   | SambaNova hosted inference            |
+| Grok                 | API key, endpoint, model                   | xAI model family                      |
+| Mistral              | API key, endpoint, model                   | Mistral model family                  |
+| AWS Bedrock          | Region, access key, secret, model          | Optional session token                |
+| AWS Bedrock Converse | Region, access key, secret, model          | Uses Bedrock Converse integration     |
+| Microsoft Azure      | API key, endpoint, API version, deployment | Deployment name is required           |
+| Baidu ERNIE          | API key, endpoint, model                   | ERNIE model family                    |
+| OpenAI-compatible    | Endpoint, optional key, model              | For compatible third-party services   |
+
+<Note>
+Provider fields can change. Confirm required values in **Agents > Models** after updating Eigent.
+</Note>
+
+## Local runtimes
+
+| Runtime   | Default endpoint            | Model discovery                             |
+| --------- | --------------------------- | ------------------------------------------- |
+| Ollama    | `http://localhost:11434/v1` | Reads the Ollama tags API                   |
+| vLLM      | `http://localhost:8000/v1`  | Enter the served model when not listed      |
+| SGLang    | `http://localhost:30000/v1` | Enter the served model when not listed      |
+| LM Studio | `http://localhost:1234/v1`  | Enter the loaded model when not listed      |
+| LLaMA.cpp | `http://localhost:8080/v1`  | Reads the OpenAI-compatible models endpoint |
+
+## Configure a cloud provider
+
+1. Create an account with the provider.
+2. Create a restricted API credential.
+3. Confirm the provider endpoint and model identifier.
+4. In Eigent, open **Agents > Models**.
+5. Select the provider and enter the values.
+6. Validate and save.
+7. Run a small test task.
+
+## Configure an OpenAI-compatible endpoint
+
+Use the OpenAI-compatible provider for services that implement compatible chat APIs.
+
+Provide:
+
+- Base endpoint
+- API key when required
+- Exact model identifier exposed by the service
+
+Compatibility can vary. Test streaming, tool calls, and structured responses before using the provider for production work.
+
+## Configure a local runtime
+
+1. Install and start the runtime.
+2. Load or serve a model.
+3. Confirm the endpoint responds locally.
+4. In Eigent, open **Agents > Models > Local**.
+5. Select the runtime.
+6. Enter the endpoint and model.
+7. Validate and enable it.
+
+> **Screenshot placeholder:** Add a composite screenshot showing one cloud provider form, Azure provider-specific fields, and one local runtime form. Blur credentials.
+
+> **Video placeholder:** Add a 90-second MP4 showing an Ollama model and an OpenAI-compatible cloud endpoint being configured and tested. Include captions.
+
+## Provider page checklist
+
+Each dedicated provider guide should include:
+
+1. Account or runtime prerequisites
+2. Credential creation
+3. Endpoint format
+4. Model identifier examples
+5. Eigent configuration
+6. Validation
+7. Common errors
+8. Billing and privacy notes
+
+## Security guidance
+
+- Do not include credentials in screenshots, logs, or issue reports.
+- Use least-privilege cloud credentials.
+- Restrict local endpoints to trusted networks.
+- Rotate keys after accidental exposure.
+- Review the provider's data-retention policy.
+
+## Related guides
+
+- [Bring Your Own Key](/core/models/byok)
+- [Local models](/core/models/local-model)
+- [Self-hosting](/get_started/self-hosting)

docs/open-source/overview.md

@@ -0,0 +1,133 @@
+---
+title: Open-source Eigent
+description: Build, inspect, extend, and self-host Eigent from its public source code.
+icon: code-branch
+---
+
+Eigent is an open-source agent workspace built around model choice, extensible tools, and local control. You can inspect the implementation, run the application yourself, connect private infrastructure, and contribute changes.
+
+## Why open source matters
+
+Open source lets teams:
+
+- Choose managed, BYOK, or local models
+- Inspect agent and tool assembly
+- Connect local files and browsers
+- Add MCP servers and custom integrations
+- Modify the React and Electron application
+- Extend the Python Brain and server APIs
+- Operate with their own security controls
+
+## Repository structure
+
+The repository contains several major areas:
+
+| Area             | Purpose                                                       |
+| ---------------- | ------------------------------------------------------------- |
+| `src/`           | React application, stores, pages, and components              |
+| `electron/`      | Desktop host, IPC, windows, and local integrations            |
+| `backend/`       | Brain backend, agents, tools, memory, and workspace services  |
+| `server/`        | Server APIs, domains, persistence, remote control, and Spaces |
+| `test/`          | Frontend and Electron tests                                   |
+| `backend/tests/` | Brain backend tests                                           |
+| `server/tests/`  | Server tests                                                  |
+| `docs/`          | Mintlify product documentation                                |
+
+> **Screenshot placeholder:** Add a repository tree diagram or screenshot that highlights the major directories without exposing local paths or unrelated files.
+
+## Set up a development environment
+
+1. Clone the repository.
+2. Install the required Node.js and Python versions.
+3. Install dependencies.
+4. Review development environment files.
+5. Start the application.
+6. Configure a test model.
+
+See [Self-hosting](/get_started/self-hosting) for the setup workflow.
+
+## Run quality checks
+
+Common frontend checks include:
+
+```bash
+npm run type-check
+npm run lint
+npm test
+npm run format:check
+```
+
+Run focused backend and server tests for the modules you change.
+
+## Extend Eigent
+
+Common extension points include:
+
+- Add a model provider.
+- Add a local inference runtime.
+- Add an MCP integration.
+- Create an Agent Skill.
+- Add or modify a worker.
+- Add a trigger type.
+- Add a dashboard or Workspace surface.
+- Extend Space, Project, or remote-control APIs.
+
+Follow existing module boundaries and add tests for shared behavior.
+
+## Contribute changes
+
+A useful contribution should include:
+
+- A clear problem statement
+- Focused implementation
+- Tests proportional to risk
+- Documentation for user-facing behavior
+- Screenshots or recordings for UI changes
+- Migration notes for schema or configuration changes
+
+Before opening a pull request:
+
+1. Review the repository contribution guidance.
+2. Rebase or update from the target branch.
+3. Run relevant checks.
+4. Remove secrets and local-only files.
+5. Describe verification steps.
+
+> **Video placeholder:** Add a 90-second contributor onboarding MP4 showing repository setup, a small UI or documentation change, tests, and a pull request. Include captions.
+
+## Documentation contributions
+
+Product documentation lives in `docs/`.
+
+- Add pages to `docs/docs.json`.
+- Include `title` and `description` frontmatter.
+- Use task-based procedures.
+- Add visible screenshot and video placeholders when assets are not ready.
+- Keep provider docs synchronized with model configuration source files.
+- Mark coming-soon functionality clearly.
+
+## Community and support
+
+Use GitHub issues for reproducible bugs and feature requests. Include:
+
+- Eigent version
+- Operating system
+- Deployment mode
+- Model provider or local runtime
+- Reproduction steps
+- Expected and actual behavior
+- Sanitized logs
+
+## Related guides
+
+<CardGroup>
+  <Card title="Brain architecture" icon="diagram-project" href="/core/brain-architecture">
+    Understand the main runtime and service boundaries.
+  </Card>
+  <Card title="Self-hosting" icon="server" href="/get_started/self-hosting">
+    Run Eigent with your own infrastructure.
+  </Card>
+  <Card title="Custom MCP servers" icon="wrench" href="/connectors/custom-mcp">
+    Extend agents with new tools.
+  </Card>
+</CardGroup>

docs/projects/context-and-files.md

@@ -0,0 +1,94 @@
+---
+title: Context and files
+description: Manage local workspace files, uploaded context, and generated project outputs.
+icon: inbox
+---
+
+The Context tab is the file surface for the active Space and Project. It combines workspace files, user attachments, and outputs generated by agents.
+
+## Open Context
+
+1. Select a Space.
+2. In the project sidebar, select **Context**.
+
+If Context is disabled, the Space does not yet have a usable workspace binding.
+
+> **Screenshot placeholder:** Add a screenshot of the Context tab with the file tree, preview area, and an unread-file notification visible.
+
+## Understand file sources
+
+Context can include:
+
+- Files from a local-folder Space
+- Files stored in an Eigent scratch workspace
+- Files attached to user requests
+- Files generated by agents
+- Agent-specific working folders
+- Selected output files from a task run
+
+The project Session side panel can also list uploaded and generated files for the selected Run.
+
+## Open and preview a file
+
+1. In Context, browse or search the file tree.
+2. Select a file.
+3. Review the preview.
+
+Eigent supports previews for common text, source code, Markdown, image, HTML, document, and data formats. Unsupported formats remain available in the workspace even when they cannot be previewed.
+
+## Use a local-folder Space
+
+Local-folder Spaces use direct-write mode. Agents can read and modify files inside the selected folder, subject to available tools and permissions.
+
+Before starting a task:
+
+1. Confirm the folder shown by the Space binding.
+2. Commit or back up important work.
+3. Limit the request to the intended files.
+4. Review generated changes before accepting them.
+
+## Use a blank Space
+
+Blank Spaces use artifact-only mode. Eigent stores generated outputs in managed project storage instead of modifying an existing user folder.
+
+Use this mode for research, reports, presentations, and tasks that should produce isolated deliverables.
+
+## Review pending changes
+
+When the Space reports pending changes:
+
+1. Open the Space switcher or Context.
+2. Refresh the workspace when the displayed state is stale.
+3. Review the changed files.
+4. Apply the changes to keep them, or discard them to return to the previous state.
+
+> **Video placeholder:** Add a 60-90 second MP4 showing an agent creating a file, the unread Context indicator, file preview, and the apply or discard workflow. Include captions.
+
+## Open a run output
+
+1. Open the Project Session.
+2. Select the required Run.
+3. In the side panel, expand the file section.
+4. Select an output.
+
+Eigent opens Context and selects the file belonging to that Run.
+
+## Troubleshooting
+
+### A generated file does not appear immediately
+
+Wait a few seconds and refresh Context. Some outputs are written after the task sends its finished event.
+
+### Context shows the wrong project file
+
+Confirm the selected Project and Run. File selection is scoped to the selected Run when possible.
+
+### A local file cannot be opened
+
+Confirm that the file still exists and that Eigent has permission to access the containing folder.
+
+## Related guides
+
+- [Spaces](/dashboard/spaces)
+- [Sessions](/projects/sessions)
+- [Project runs](/core/project-runs)

docs/projects/create-project.md

@@ -0,0 +1,101 @@
+---
+title: Create a project
+description: Start a project, choose an execution mode, attach files, and submit the first task.
+icon: plus
+---
+
+Create a Project when you want Eigent to keep related tasks, files, and follow-up requests together.
+
+## Before you begin
+
+Confirm the following:
+
+- A Space is selected.
+- At least one model is configured.
+- The task goal is clear enough to plan or execute.
+- Required source files are available.
+
+If no model is configured, Eigent opens the Models page instead of starting the task.
+
+## Open the project composer
+
+Use one of these entry points:
+
+- In the project sidebar, select **New**.
+- In the project sidebar, select **Workspace**.
+- From the Home dashboard, create or open a Space.
+
+The composer displays the active Space and lets you select a project mode.
+
+> **Screenshot placeholder:** Add a screenshot of the new-project composer with the Space, project picker, Single Agent or Workforce toggle, attachment control, and send action visible.
+
+## Choose an execution mode
+
+### Single Agent
+
+Single Agent mode uses one CAMEL-based agent with the available tools. Choose it for focused tasks that benefit from one continuous context.
+
+### Workforce
+
+Workforce mode plans the request and distributes subtasks across specialized agents. Choose it for research, software, documents, or other work that benefits from parallel roles.
+
+You cannot change the execution mode of a run after it starts. Create another run or project when you need a different mode.
+
+## Attach source files
+
+1. In the composer, select the attachment control.
+2. Choose one or more files.
+3. Confirm that the file names appear in the composer.
+4. Mention the files and their purpose in the request.
+
+Attachments become part of the first run's execution context.
+
+## Write the first request
+
+Describe:
+
+- The desired outcome
+- Required source material
+- Constraints or acceptance criteria
+- Preferred output format
+- Any service or tool the agents should use
+
+For example:
+
+> Analyze the attached customer interview notes. Group the findings into themes, identify the five highest-impact problems, and create a Markdown report with supporting quotes and recommended product actions.
+
+## Start the project
+
+1. Review the selected Space, mode, files, and request.
+2. Select **Send**.
+
+Eigent creates a server-backed Project in the active Space, opens the Session, and starts the first Run.
+
+In Workforce mode, Eigent can show a task plan before execution. Review, edit, add, or remove subtasks before starting the plan.
+
+> **Video placeholder:** Add a 60-90 second MP4 showing project creation in both Single Agent and Workforce modes. Include captions and pause briefly on the Workforce plan review.
+
+## Troubleshooting
+
+### The send action does nothing
+
+Confirm that the request contains text and that project startup is not already in progress.
+
+### Eigent asks for a model
+
+Open **Agents > Models**, configure a provider, and return to the composer.
+
+### A file is missing
+
+Attach it again before sending, or add it from the Context tab in an existing project.
+
+### The wrong Space is selected
+
+Cancel the draft, select the correct Space, and start the project there. Space selection defines the project and file boundary.
+
+## Next steps
+
+- [Workspace](/projects/workspace)
+- [Sessions](/projects/sessions)
+- [Single Agent mode](/projects/single-agent)
+- [Workforce](/core/workforce)

docs/projects/overview.md

@@ -0,0 +1,88 @@
+---
+title: Projects overview
+description: Understand how Spaces, Projects, Sessions, and Runs organize work in Eigent.
+icon: folder-kanban
+---
+
+Projects are persistent workstreams inside a Space. A project keeps related conversations, task runs, agents, files, browser activity, terminal state, and automations together.
+
+## Product hierarchy
+
+Eigent organizes work into four levels:
+
+| Level   | Purpose                                           |
+| ------- | ------------------------------------------------- |
+| Space   | Defines the top-level workspace and file boundary |
+| Project | Groups related work around an ongoing goal        |
+| Session | Presents the conversation and execution surfaces  |
+| Run     | Represents one request or follow-up task          |
+
+For example, a Space called “Marketing” can contain a “Product launch” project. The project session can include separate runs for research, copywriting, and presentation creation.
+
+## Use the project sidebar
+
+The project sidebar is available in the main Workspace. It provides access to:
+
+- The Space switcher
+- Workspace
+- Context
+- Scheduled triggers
+- Dispatch
+- New project
+- Projects in the active Space
+- Project actions
+
+The sidebar can be resized or folded into an icon rail.
+
+> **Screenshot placeholder:** Add a screenshot of the expanded project sidebar. Annotate the Space switcher, Workspace, Context, Scheduled, Dispatch, New, and project list in surrounding text.
+
+## Start a project
+
+1. Select a Space from the sidebar.
+2. Select **New** or open the Workspace.
+3. Enter the first task.
+4. Choose Single Agent or Workforce mode.
+5. Attach required files.
+6. Send the task.
+
+Eigent creates the Project and opens its live Session.
+
+## Continue a project
+
+Submit a follow-up request in the same conversation. Eigent adds a new Run while preserving earlier prompts, progress, and outputs.
+
+Use this approach when the new request contributes to the same goal. Create another Project when the work needs a separate history, file context, or lifecycle.
+
+## Manage project status
+
+### Active
+
+An active project can accept new runs, execute triggers, and appear in the project sidebar.
+
+### Achieved
+
+An achieved project is complete. If a run is still active when you end the project, Eigent stops that run before saving the achieved state.
+
+### Archived or deleted
+
+Archived projects leave the active workflow. Deleting a project can also remove its local project data. Save important output files before deletion.
+
+## Search across projects
+
+Use `Command/Ctrl + K` from the Workspace to open global search. Search can help locate existing projects and sessions without returning to the Home dashboard.
+
+> **Video placeholder:** Add a 60-second MP4 showing project creation, a follow-up run, global search, and project completion. Include captions.
+
+## Related guides
+
+<CardGroup>
+  <Card title="Create a project" icon="plus" href="/projects/create-project">
+    Start the first run and choose an execution mode.
+  </Card>
+  <Card title="Sessions" icon="messages" href="/projects/sessions">
+    Follow agent execution and review outputs.
+  </Card>
+  <Card title="Project runs" icon="rotate" href="/core/project-runs">
+    Continue work with follow-up requests.
+  </Card>
+</CardGroup>

docs/projects/sessions.md

@@ -0,0 +1,105 @@
+---
+title: Sessions
+description: Follow task execution through chat, progress, agents, logs, files, browser, and terminal views.
+icon: messages
+---
+
+A Session combines the project conversation with live execution details. It is the main surface for reviewing what Eigent understood, what its agents are doing, and what they produced.
+
+## Session layout
+
+The Session contains:
+
+- A chat and task timeline
+- A task composer for follow-up requests
+- A session side panel
+- Workspace surfaces for files, browser, terminal, or workflow
+- Controls for pausing, resuming, stopping, or expanding work
+
+> **Screenshot placeholder:** Add a screenshot of an active Workforce Session. Show the chat, task log, Run selector, progress, agent pool, and workspace surface.
+
+## Review the conversation
+
+The chat timeline can contain:
+
+- User prompts and attachments
+- Planning status
+- Workforce task plans
+- Agent tool calls and logs
+- Human-in-the-loop questions
+- Completion summaries
+- Follow-up runs
+
+Expand task logs when you need operational detail. Use summaries and generated files for the final result.
+
+## Review a Workforce plan
+
+Before execution, Workforce can split the request into subtasks.
+
+1. Review each subtask.
+2. Edit unclear or overly broad items.
+3. Add missing work.
+4. Delete unnecessary work.
+5. Start the task.
+
+The coordinator assigns each subtask to an appropriate worker.
+
+## Use the session side panel
+
+In Workforce mode, the side panel can show:
+
+- Agent pool
+- Progress
+- Execution context
+- Uploaded files
+- Generated files
+- Skills and tools
+- Expanded Workforce canvas
+
+In Single Agent mode, it shows the selected agent's progress, context, and outputs without the multi-agent canvas.
+
+## Open an agent workspace
+
+Select an agent or subtask to open its workspace:
+
+- Browser agents use an embedded browser.
+- Developer agents use a terminal.
+- Document and file work appears in Context.
+- Workflow view shows the agent and task structure.
+
+When a browser needs manual help, use the available take-control flow, complete the action, and return control to the agent.
+
+## Pause, resume, or stop work
+
+- **Pause** preserves the task state and elapsed time.
+- **Resume** continues a paused task.
+- **Stop** ends the current execution while preserving the Project history.
+
+Use Stop when the task is no longer useful or is consuming resources without making progress.
+
+## Continue with a follow-up
+
+Enter another request in the composer. Eigent adds the request as a new Run. Use the Run selector to switch the side panel and workspaces between runs.
+
+> **Video placeholder:** Add a 90-second MP4 showing plan review, task execution, a browser or terminal workspace, pause and resume, and a follow-up Run. Include captions and a transcript.
+
+## Troubleshooting
+
+### Progress and chat show different runs
+
+Use the Run selector. The side panel follows the selected or visible Run.
+
+### An agent workspace is empty
+
+The selected Run might not have used that agent or workspace. Select another agent, return to workflow view, or choose the relevant Run.
+
+### A task is waiting
+
+Check the chat for a human-in-the-loop request, plan approval, authentication step, or unavailable tool.
+
+## Related guides
+
+- [Project runs](/core/project-runs)
+- [Single Agent mode](/projects/single-agent)
+- [Workforce](/core/workforce)
+- [Context and files](/projects/context-and-files)

docs/projects/single-agent.md

@@ -0,0 +1,88 @@
+---
+title: Single Agent mode
+description: Run a task with one CAMEL agent and monitor its progress, context, and outputs.
+icon: user-robot
+---
+
+Single Agent mode assigns a task to one CAMEL-based agent instead of creating a coordinated multi-agent Workforce. The agent can still use models, tools, Skills, files, browser sessions, and terminal access.
+
+## Choose Single Agent mode
+
+Use Single Agent mode for:
+
+- Focused tasks with one clear goal
+- Work that benefits from a continuous context
+- Short tool-driven workflows
+- Tasks where coordination overhead would add little value
+- Iterative follow-ups handled by the same execution pattern
+
+Use Workforce for broad tasks that benefit from specialized roles or parallel subtasks.
+
+## Start a Single Agent project
+
+1. Open the Workspace or select **New**.
+2. Select **Single Agent**.
+3. Enter the task.
+4. Attach required files.
+5. Send the request.
+
+Eigent opens a Session and starts the task without a Workforce planning stage.
+
+> **Screenshot placeholder:** Add a screenshot of the new-project composer with Single Agent mode selected.
+
+## Monitor the agent
+
+The Session side panel can show:
+
+- Task progress
+- Execution context
+- Uploaded files
+- Generated output files
+- Skills and tools
+
+The chat timeline shows tool calls, status updates, requests for user input, and the final response.
+
+## Use browser and terminal workspaces
+
+When the agent uses browser or terminal tools, the corresponding workspace becomes available in the Session. The workspace is scoped to the selected Run.
+
+## Continue with follow-ups
+
+1. Enter a follow-up request in the Session.
+2. Send the request.
+3. Use the Run selector to review earlier work.
+
+Each follow-up remains part of the same Project.
+
+## Compare execution modes
+
+| Capability                           | Single Agent | Workforce               |
+| ------------------------------------ | ------------ | ----------------------- |
+| One continuous agent context         | Yes          | No, work is distributed |
+| Task planning and splitting          | Limited      | Yes                     |
+| Parallel specialized agents          | No           | Yes                     |
+| Agent pool and workflow canvas       | No           | Yes                     |
+| Browser, terminal, files, and Skills | Yes          | Yes                     |
+| Best for                             | Focused work | Complex multi-step work |
+
+> **Video placeholder:** Add a side-by-side MP4 comparison of the same focused request in Single Agent and Workforce mode. Keep the example short and include captions.
+
+## Troubleshooting
+
+### The task needs another specialty
+
+Add the required tool to the agent, install a connector, or start a Workforce Project with specialized workers.
+
+### The agent cannot access a file
+
+Attach the file, add it to the Space workspace, and confirm that the active Space has the correct folder binding.
+
+### The task is too broad
+
+Split the request into smaller follow-up Runs or use Workforce mode.
+
+## Related guides
+
+- [Create a project](/projects/create-project)
+- [Agents overview](/agents/overview)
+- [Workforce](/core/workforce)

docs/projects/workspace.md

@@ -0,0 +1,84 @@
+---
+title: Workspace
+description: Use the Workspace landing page, project picker, instructions, agents, and recent sessions.
+icon: desktop
+---
+
+The Workspace is the starting surface for the active Space. Use it to start work, select a project, review recent sessions, configure project behavior, and manage the agents available to Workforce mode.
+
+## Open the Workspace
+
+1. In the project sidebar, select **Workspace**.
+2. Confirm the active Space in the sidebar.
+
+The main composer starts a new project unless you select an existing project.
+
+> **Screenshot placeholder:** Add a screenshot of the complete Workspace landing page with the composer, mode toggle, recent sessions, agent list, and instructions panel visible.
+
+## Select a project
+
+The project picker behaves differently depending on the current state:
+
+- In a fresh Workspace, select an existing project before submitting a task.
+- After work has started, the selected project is displayed as context.
+- Selecting a recent session opens that Project's live Session.
+
+Use **All sessions** to review more projects than the recent-session list shows.
+
+## Start a task
+
+1. Enter a request in the composer.
+2. Select Single Agent or Workforce mode.
+3. Attach required files.
+4. Select **Send**.
+
+Eigent creates a Project when no existing Project is selected.
+
+## Use example prompts
+
+Example prompts appear for an empty Project that does not use a custom agent folder or replayed history. Select a prompt to understand the expected level of task detail, then adapt it to your goal.
+
+## Manage Workforce agents
+
+The Workspace shows built-in and custom workers available to Workforce mode.
+
+You can:
+
+- Review the built-in Developer, Browser, Document, and Multimodal roles.
+- Add a worker.
+- Edit a custom worker.
+- Assign tools to a worker.
+- Remove workers that are no longer required.
+
+See [Workers](/core/workers) for configuration details.
+
+## Configure instructions, rules, and tone
+
+Project instructions provide persistent guidance for work in the active Space or Project. Use them for:
+
+- Output conventions
+- Brand or writing tone
+- Coding standards
+- Required files or workflows
+- Safety and approval rules
+
+Keep instructions focused and actionable. Put step-by-step reusable expertise in an Agent Skill instead of one large instruction file.
+
+> **Screenshot placeholder:** Add a screenshot of the instructions panel with a short example instruction. Do not include private repository rules.
+
+## Toggle workspace memory
+
+The Workspace includes a memory toggle for instruction behavior. This local setting is separate from the Agent Memory page, which is currently marked coming soon.
+
+## Open recent sessions
+
+Recent sessions display project names and current state. Select one to open its Session. Use the project sidebar or Home dashboard for the complete project history.
+
+> **Video placeholder:** Add a 60-second MP4 showing project selection, instruction editing, worker management, and opening a recent session. Include captions.
+
+## Related guides
+
+- [Create a project](/projects/create-project)
+- [Agents overview](/agents/overview)
+- [Agent Skills](/core/agent-skills)
+- [Sessions](/projects/sessions)

docs/settings/appearance.md

@@ -0,0 +1,85 @@
+---
+title: Appearance
+description: Customize color mode, themes, contrast, and workspace backgrounds.
+icon: palette
+---
+
+Appearance settings control Eigent's color mode, theme palette, contrast, and Workspace background.
+
+## Open Appearance
+
+1. Open the Eigent dashboard.
+2. Select **Settings**.
+3. Select **Appearance**.
+
+> **Screenshot placeholder:** Add a screenshot of Appearance settings with color mode, theme selection, color controls, contrast, and Workspace background visible.
+
+## Choose a color mode
+
+Select:
+
+- **Light**
+- **Dark**
+- **System**
+
+System mode follows the operating-system appearance.
+
+## Choose a theme
+
+Built-in theme families include:
+
+- Eigent
+- CAMEL
+- Claw
+- Starfish
+
+Additional customizable slots include Whale and Custom.
+
+Light and dark mode can use different selected themes.
+
+## Edit theme colors
+
+Depending on the theme, configure:
+
+- Accent
+- Background
+- Ink
+
+Enter a six-digit hexadecimal color or use the color picker. Select **Apply** to keep the pending color.
+
+## Adjust contrast
+
+Use the contrast slider to increase or reduce separation between generated theme colors.
+
+Review text, controls, borders, status colors, and focus indicators after changing contrast.
+
+## Reset a theme
+
+Use Reset to restore the selected theme to its default values. Custom values for that theme are removed.
+
+## Choose a Workspace background
+
+Available backgrounds include:
+
+- Plain
+- Grid
+- Dot pattern
+- Dashed lines
+- Dotted lines
+- Ruled lines
+
+The background changes the main Workspace canvas and does not affect project files or agent output.
+
+> **Video placeholder:** Add a 45-second MP4 showing light and dark mode, theme selection, custom accent color, contrast changes, and all Workspace backgrounds. Include captions.
+
+## Accessibility guidance
+
+- Keep text contrast high enough for comfortable reading.
+- Check status colors in both light and dark mode.
+- Avoid background patterns that reduce focus.
+- Use System mode when the operating system manages accessibility preferences.
+
+## Related guides
+
+- [General settings](/settings/general)
+- [Privacy](/settings/privacy)

docs/settings/general.md

@@ -0,0 +1,94 @@
+---
+title: General settings
+description: Manage your account, language, application version, and network proxy.
+icon: gear
+---
+
+General settings control the signed-in account, interface language, network proxy, and application version.
+
+## Open General settings
+
+1. Open the Eigent dashboard.
+2. Select **Settings**.
+3. Select **General**.
+
+> **Screenshot placeholder:** Add a screenshot of General settings with Profile, Language, and Network Proxy sections visible. Hide the full email address if required.
+
+## Manage the account
+
+The Profile section shows the current account.
+
+- Select **Manage** to open Eigent account management.
+- Select **Log out** to clear active task state, reset local installation state, and return to login.
+
+Save or finish important work before logging out.
+
+## Change the language
+
+1. Open the Language selector.
+2. Choose a language or **System default**.
+
+Current interface languages include:
+
+- English
+- Simplified Chinese
+- Traditional Chinese
+- Japanese
+- Arabic
+- French
+- German
+- Russian
+- Spanish
+- Korean
+- Italian
+
+Some third-party tool output and generated content can remain in another language.
+
+## Configure a network proxy
+
+1. Enter the proxy URL in **Network Proxy**.
+2. Select **Save**.
+3. Select **Restart to apply**.
+
+Supported schemes:
+
+- `http://`
+- `https://`
+- `socks4://`
+- `socks5://`
+
+Example:
+
+```text
+http://127.0.0.1:8080
+```
+
+Clear the field and save to remove the proxy.
+
+## Review updates
+
+The Settings sidebar shows the installed version. When an update is available, select the update action to start the package download.
+
+Self-hosted development builds should update through Git and the repository build process instead.
+
+> **Video placeholder:** Add a 45-second MP4 showing language change, proxy save and restart, and the version or update control. Include captions.
+
+## Troubleshooting
+
+### Proxy URL is rejected
+
+Include a supported scheme and valid host. Credentials, when required, must use valid URL encoding.
+
+### Network changes do not apply
+
+Restart Eigent after saving or removing the proxy.
+
+### Language changes only part of the interface
+
+Restart the application and report missing translation keys with the current version and locale.
+
+## Related guides
+
+- [Appearance](/settings/appearance)
+- [Privacy](/settings/privacy)
+- [Self-hosting](/get_started/self-hosting)

docs/settings/privacy.md

@@ -0,0 +1,104 @@
+---
+title: Privacy
+description: Understand Eigent's privacy controls and data-handling boundaries.
+icon: fingerprint
+---
+
+Eigent can process prompts, files, credentials, browser sessions, and external service data. Where that data goes depends on the selected model, deployment mode, Space type, and connectors.
+
+This page provides a practical privacy checklist. Review the current privacy policy and source code for deployment-specific guarantees.
+
+## Understand model data flow
+
+### Eigent Cloud
+
+Prompts and relevant context are sent through Eigent's managed model service.
+
+### Bring Your Own Key
+
+Prompts and relevant context are sent to the configured provider endpoint using your credentials.
+
+### Local models
+
+Model requests are sent to the configured local endpoint. Data can remain on infrastructure you control when all other tools and services are also local.
+
+<Note>
+A local model does not make the entire workflow local if the task also uses cloud connectors, search, remote MCP servers, or external browser services.
+</Note>
+
+## Understand file storage
+
+- Local-folder Spaces can let agents read and modify the selected directory.
+- Blank Spaces store generated artifacts in Eigent-managed project storage.
+- Uploaded files become task context.
+- Generated outputs can remain in project or workspace folders.
+
+Limit each Space to the files required for its work.
+
+## Protect credentials
+
+Credentials can include:
+
+- Model API keys
+- MCP environment variables
+- OAuth grants
+- Search credentials
+- Browser cookies
+- Remote-control links
+
+Use restricted credentials, rotate exposed values, and remove unused configurations.
+
+## Manage browser sessions
+
+Browser cookies can grant access to external accounts.
+
+- Use a dedicated automation profile.
+- Delete unused cookie domains.
+- Avoid privileged sessions.
+- Restart after changing cookie state.
+
+## Share tasks and remote links safely
+
+Before sharing:
+
+- Review prompts and generated outputs.
+- Remove personal or confidential data.
+- Confirm the active Space and Project.
+- Stop remote-control sessions after use.
+
+## Delete data
+
+Eigent provides deletion or removal actions for:
+
+- Tasks
+- Projects
+- Some Space records
+- Model providers
+- Connectors and MCP servers
+- Browser cookies
+- Remote-control sessions
+
+Deletion in Eigent does not automatically revoke data or credentials stored by an external provider.
+
+> **Screenshot placeholder:** Add a privacy-oriented composite screenshot showing provider removal, connector removal, cookie deletion, and project deletion confirmations. Do not include real data.
+
+> **Video placeholder:** Add a 60-second privacy walkthrough covering local versus cloud models, Space file boundaries, credential removal, and browser-cookie cleanup. Include captions.
+
+## Open-source deployments
+
+Self-hosting gives you control over the application and infrastructure, but you remain responsible for:
+
+- Network security
+- Database access
+- Secret storage
+- Logs and backups
+- User permissions
+- Provider configuration
+- Update and vulnerability management
+
+## Related guides
+
+- [Self-hosting](/get_started/self-hosting)
+- [Provider reference](/models/provider-reference)
+- [Custom MCP servers](/connectors/custom-mcp)
+- [Browser cookies](/browser/cookies)

docs/troubleshooting/bug.md

@@ -3,12 +3,7 @@ title: Bug
 description: 'Follow these simple steps to report bugs and help improve our product for everyone:'
 ---
 
-<img
-src="/docs/images/bug_report.gif"
-alt="Bug Report"
-width="100%"
-height="auto"
-/>
+> **Video placeholder:** Add a current video walkthrough for “Bug Report”. Include captions.
 
 ### Step 1: Open Report a bug
 

docs/troubleshooting/support.md

@@ -55,7 +55,7 @@ For inquiries about our Scalable and Custom plans, please please refer to our [*
 - Click **Upgrade** to move to a higher tier with more monthly Credits.
 - Click **+ Add Credits** to purchase an Add-On Pack when you've used up your monthly allowance.
 
-![Support Dashboard](/docs/images/support_dashboard.png)
+> **Screenshot placeholder:** Add a current screenshot for “Support Dashboard”.
 
 ### Invitation Code
 

scripts/design-token-usage.allowlist

@@ -17,3 +17,10 @@ src/components/ui/colorPicker.tsx
 electron/main/index.ts
 electron/main/fileReader.ts
 electron/preload/index.ts
+#
+# Animation assets — demo/preview components use hardcoded colors intentionally for visual fidelity.
+src/assets/animation/project/ProjectWorkspaceDisplay.tsx
+src/assets/animation/workspace/WorkspaceDisplay.tsx
+#
+# OnboardingSteps — theme accent swatches must reference exact brand hex values from the theme catalog.
+src/components/InstallStep/OnboardingSteps.tsx

src/assets/animation/README.md

@@ -0,0 +1,43 @@
+# Animation Interface Demos
+
+Self-contained TSX + CSS Module interface demos for the Eigent website.
+
+## Structure
+
+Each demo is three files:
+
+```
+{Name}Display.tsx       — server-renderable React component
+{Name}Cycler.tsx        — "use client" animation island
+{Name}Display.module.css — all styles (no Tailwind, no external vars)
+```
+
+## How to generate a new demo
+
+Use the `animation-interface-demo` skill:
+
+```
+/animation-interface-demo
+```
+
+Then describe the workflow or process you want to animate. The skill will generate all three files.
+
+## How to use in your website
+
+Drop all three files into your website's component directory. The `Display` component is server-renderable — just import and render it:
+
+```tsx
+import EigentInterfaceDisplay from "./EigentInterfaceDisplay";
+
+export default function Page() {
+  return <EigentInterfaceDisplay />;
+}
+```
+
+The `Cycler` island activates automatically on the client after idle. It pauses when the component is scrolled off-screen or the tab is hidden, and respects `prefers-reduced-motion`.
+
+## Requirements
+
+- React 18+
+- `next/image` (or swap with `<img>` for non-Next projects)
+- `lucide-react`

src/assets/animation/assets/eigent-icon-white.svg

@@ -0,0 +1,32 @@
+<svg width="30" height="33" viewBox="0 0 30 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dii_7646_73664)">
+<path d="M21 3H9C5.68629 3 3 5.68629 3 9V21C3 24.3137 5.68629 27 9 27H21C24.3137 27 27 24.3137 27 21V9C27 5.68629 24.3137 3 21 3Z" fill="white"/>
+<path d="M24.1368 21.4775H18.4092V20.6621L18.544 20.6602C19.2674 20.6479 19.6973 20.572 19.8399 20.5283C19.9794 20.4796 20.0566 20.4216 20.0958 20.3662C20.1181 20.3287 20.1454 20.2468 20.168 20.1016C20.1901 19.9598 20.2067 19.7729 20.2159 19.5391V19.5381C20.2219 19.4124 20.2335 18.5446 20.252 16.9277V12.6631C20.252 11.8293 20.2431 11.0137 20.2247 10.2168L20.2061 9.8291C20.1982 9.71564 20.1879 9.61779 20.1768 9.53516C20.1657 9.45243 20.1537 9.38724 20.1407 9.33887C20.1273 9.28925 20.116 9.26663 20.1114 9.25977L20.1055 9.25195C20.0596 9.1773 19.978 9.11361 19.8399 9.07129L19.8331 9.06934C19.7754 9.04881 19.6436 9.02676 19.42 9.00977C19.2016 8.99317 18.9099 8.98171 18.544 8.97559L18.4092 8.97363V8.11328H24.1368V8.97363L24.003 8.97559C23.6369 8.98171 23.3441 8.99317 23.1241 9.00977C22.8989 9.02676 22.7636 9.04916 22.7022 9.07031L22.6993 9.07129C22.5653 9.11394 22.4895 9.1683 22.4503 9.22363L22.4141 9.31543C22.4017 9.35896 22.3894 9.41615 22.378 9.48926C22.356 9.63098 22.3403 9.81795 22.3311 10.0518V10.0537C22.3251 10.1747 22.3125 11.0422 22.294 12.6641V16.9277C22.294 17.7617 22.3029 18.5744 22.3213 19.3652L22.3399 19.7539C22.3475 19.8679 22.3568 19.9671 22.3672 20.0508C22.3777 20.1344 22.3892 20.2007 22.4014 20.251C22.4132 20.2995 22.4246 20.3248 22.4307 20.3359C22.4846 20.4152 22.5697 20.4811 22.6993 20.5283C22.7632 20.5475 22.8997 20.5677 23.1231 20.583C23.3436 20.5981 23.6367 20.6091 24.003 20.6152L24.1368 20.6172V21.4775Z" fill="#1D1D1D" stroke="#1D1D1D" stroke-width="0.272725"/>
+<path d="M12.4844 8.11328C12.7489 8.11328 12.9685 8.19507 13.1123 8.38086L13.1621 8.44727C13.2737 8.61171 13.3541 8.84382 13.4112 9.12988C13.4865 9.49188 13.7478 10.6774 14.1954 12.6875C14.6427 14.6905 15.0113 16.2015 15.3008 17.2207C15.5914 18.2437 15.8185 18.9337 15.9825 19.2988C16.1413 19.6526 16.3287 19.8533 16.4893 20.0244C16.5367 20.0749 16.6423 20.1557 16.7774 20.2451C16.9092 20.3323 17.0587 20.4207 17.1856 20.4863C17.2593 20.5245 17.4006 20.5735 17.5606 20.6123C17.7204 20.6511 17.8822 20.676 17.9961 20.6729L18.1368 20.6689V21.4775H18C17.6925 21.4775 17.358 21.4752 17.0567 21.4736C16.7553 21.4721 16.4876 21.4707 16.3125 21.4707H15.5098C15.214 21.4707 14.9528 21.3839 14.7334 21.207C14.5161 21.0317 14.3476 20.7749 14.2227 20.4482C13.98 19.8132 13.5565 18.1249 12.9532 15.3994L11.794 10.3691C11.6729 9.85275 11.5285 9.52544 11.3741 9.35938C11.2314 9.20602 10.9773 9.1123 10.5752 9.1123C10.5064 9.11231 10.4059 9.11402 10.2774 9.11523C10.1492 9.11645 9.99437 9.11719 9.81836 9.11719H9.68164V8.50391L9.78906 8.48047C11.0251 8.20623 12.1413 8.1133 12.4844 8.11328Z" fill="#1D1D1D" stroke="#1D1D1D" stroke-width="0.272725"/>
+<path d="M11.1231 12.5596C10.4032 14.23 9.31718 16.6376 8.7334 17.9414C8.34161 18.8164 8.45025 18.563 8.24414 18.9814C8.17136 19.1292 7.98608 19.3883 7.79199 19.6377C7.59972 19.8847 7.41166 20.1068 7.34375 20.1777C7.30264 20.2207 7.20965 20.2908 7.08886 20.3691C6.97109 20.4455 6.83683 20.5226 6.72363 20.5801C6.66129 20.6117 6.53824 20.6507 6.39453 20.6807C6.25218 20.7103 6.10596 20.7284 6.00293 20.7256L5.86328 20.7217V21.4766H7.81933C8.34258 21.4765 8.95258 21.1786 9.19043 20.5684C9.40442 20.0193 10.8752 16.0785 11.584 13.8398L11.5938 13.8076L11.5889 13.7754L11.3828 12.5898L11.3047 12.1387L11.1231 12.5596Z" fill="#1D1D1D" stroke="#1D1D1D" stroke-width="0.272725"/>
+</g>
+<defs>
+<filter id="filter0_dii_7646_73664" x="0" y="2.25" width="30" height="30" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2.25"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7646_73664"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7646_73664" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.308181 0 0 0 0 0.308181 0 0 0 0 0.308181 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_7646_73664"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.75"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.113725 0 0 0 0 0.113725 0 0 0 0 0.113725 0 0 0 0.33 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_7646_73664" result="effect3_innerShadow_7646_73664"/>
+</filter>
+</defs>
+</svg>

src/assets/animation/assets/eigent-icon.svg

@@ -0,0 +1,32 @@
+<svg width="30" height="33" viewBox="0 0 30 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dii_7646_73652)">
+<path d="M21 3H9C5.68629 3 3 5.68629 3 9V21C3 24.3137 5.68629 27 9 27H21C24.3137 27 27 24.3137 27 21V9C27 5.68629 24.3137 3 21 3Z" fill="#1D1D1D"/>
+<path d="M24.1368 21.4775H18.4092V20.6621L18.544 20.6602C19.2674 20.6479 19.6973 20.572 19.8399 20.5283C19.9794 20.4796 20.0566 20.4216 20.0958 20.3662C20.1181 20.3287 20.1454 20.2468 20.168 20.1016C20.1901 19.9598 20.2067 19.7729 20.2159 19.5391V19.5381C20.2219 19.4124 20.2335 18.5446 20.252 16.9277V12.6631C20.252 11.8293 20.2431 11.0137 20.2247 10.2168L20.2061 9.8291C20.1982 9.71564 20.1879 9.61779 20.1768 9.53516C20.1657 9.45243 20.1537 9.38724 20.1407 9.33887C20.1273 9.28925 20.116 9.26663 20.1114 9.25977L20.1055 9.25195C20.0596 9.1773 19.978 9.11361 19.8399 9.07129L19.8331 9.06934C19.7754 9.04881 19.6436 9.02676 19.42 9.00977C19.2016 8.99317 18.9099 8.98171 18.544 8.97559L18.4092 8.97363V8.11328H24.1368V8.97363L24.003 8.97559C23.6369 8.98171 23.3441 8.99317 23.1241 9.00977C22.8989 9.02676 22.7636 9.04916 22.7022 9.07031L22.6993 9.07129C22.5653 9.11394 22.4895 9.1683 22.4503 9.22363L22.4141 9.31543C22.4017 9.35896 22.3894 9.41615 22.378 9.48926C22.356 9.63098 22.3403 9.81795 22.3311 10.0518V10.0537C22.3251 10.1747 22.3125 11.0422 22.294 12.6641V16.9277C22.294 17.7617 22.3029 18.5744 22.3213 19.3652L22.3399 19.7539C22.3475 19.8679 22.3568 19.9671 22.3672 20.0508C22.3777 20.1344 22.3892 20.2007 22.4014 20.251C22.4132 20.2995 22.4246 20.3248 22.4307 20.3359C22.4846 20.4152 22.5697 20.4811 22.6993 20.5283C22.7632 20.5475 22.8997 20.5677 23.1231 20.583C23.3436 20.5981 23.6367 20.6091 24.003 20.6152L24.1368 20.6172V21.4775Z" fill="white" stroke="white" stroke-width="0.272725"/>
+<path d="M12.4844 8.11328C12.7489 8.11328 12.9685 8.19507 13.1123 8.38086L13.1621 8.44727C13.2737 8.61171 13.3541 8.84382 13.4112 9.12988C13.4865 9.49188 13.7478 10.6774 14.1954 12.6875C14.6427 14.6905 15.0113 16.2015 15.3008 17.2207C15.5914 18.2437 15.8185 18.9337 15.9825 19.2988C16.1413 19.6526 16.3287 19.8533 16.4893 20.0244C16.5367 20.0749 16.6423 20.1557 16.7774 20.2451C16.9092 20.3323 17.0587 20.4207 17.1856 20.4863C17.2593 20.5245 17.4006 20.5735 17.5606 20.6123C17.7204 20.6511 17.8822 20.676 17.9961 20.6729L18.1368 20.6689V21.4775H18C17.6925 21.4775 17.358 21.4752 17.0567 21.4736C16.7553 21.4721 16.4876 21.4707 16.3125 21.4707H15.5098C15.214 21.4707 14.9528 21.3839 14.7334 21.207C14.5161 21.0317 14.3476 20.7749 14.2227 20.4482C13.98 19.8132 13.5565 18.1249 12.9532 15.3994L11.794 10.3691C11.6729 9.85275 11.5285 9.52544 11.3741 9.35938C11.2314 9.20602 10.9773 9.1123 10.5752 9.1123C10.5064 9.11231 10.4059 9.11402 10.2774 9.11523C10.1492 9.11645 9.99437 9.11719 9.81836 9.11719H9.68164V8.50391L9.78906 8.48047C11.0251 8.20623 12.1413 8.1133 12.4844 8.11328Z" fill="white" stroke="white" stroke-width="0.272725"/>
+<path d="M11.1231 12.5596C10.4032 14.23 9.31718 16.6376 8.7334 17.9414C8.34161 18.8164 8.45025 18.563 8.24414 18.9814C8.17136 19.1292 7.98608 19.3883 7.79199 19.6377C7.59972 19.8847 7.41166 20.1068 7.34375 20.1777C7.30264 20.2207 7.20965 20.2908 7.08886 20.3691C6.97109 20.4455 6.83683 20.5226 6.72363 20.5801C6.66129 20.6117 6.53824 20.6507 6.39453 20.6807C6.25218 20.7103 6.10596 20.7284 6.00293 20.7256L5.86328 20.7217V21.4766H7.81933C8.34258 21.4765 8.95258 21.1786 9.19043 20.5684C9.40442 20.0193 10.8752 16.0785 11.584 13.8398L11.5938 13.8076L11.5889 13.7754L11.3828 12.5898L11.3047 12.1387L11.1231 12.5596Z" fill="white" stroke="white" stroke-width="0.272725"/>
+</g>
+<defs>
+<filter id="filter0_dii_7646_73652" x="0" y="2.25" width="30" height="30" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2.25"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7646_73652"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7646_73652" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.831373 0 0 0 0 0.831373 0 0 0 0 0.831373 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_7646_73652"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.75"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.33 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_7646_73652" result="effect3_innerShadow_7646_73652"/>
+</filter>
+</defs>
+</svg>

src/assets/animation/assets/token.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7337_66344)">
+<path d="M2.5668 5.74669C2.46949 5.30838 2.48443 4.85259 2.61023 4.42158C2.73604 3.99058 2.96863 3.59832 3.28644 3.28117C3.60425 2.96402 3.997 2.73225 4.42827 2.60735C4.85953 2.48245 5.31535 2.46847 5.75346 2.56669C5.9946 2.18956 6.3268 1.8792 6.71943 1.66421C7.11206 1.44923 7.55249 1.33655 8.00013 1.33655C8.44776 1.33655 8.8882 1.44923 9.28083 1.66421C9.67346 1.8792 10.0057 2.18956 10.2468 2.56669C10.6856 2.46804 11.1422 2.48196 11.5741 2.60717C12.0061 2.73237 12.3994 2.96478 12.7174 3.28279C13.0354 3.6008 13.2678 3.99407 13.393 4.42603C13.5182 4.85798 13.5321 5.31458 13.4335 5.75336C13.8106 5.9945 14.121 6.32669 14.3359 6.71932C14.5509 7.11196 14.6636 7.55239 14.6636 8.00002C14.6636 8.44766 14.5509 8.88809 14.3359 9.28072C14.121 9.67336 13.8106 10.0056 13.4335 10.2467C13.5317 10.6848 13.5177 11.1406 13.3928 11.5719C13.2679 12.0032 13.0361 12.3959 12.719 12.7137C12.4018 13.0315 12.0096 13.2641 11.5786 13.3899C11.1476 13.5157 10.6918 13.5307 10.2535 13.4334C10.0126 13.8119 9.68018 14.1236 9.28688 14.3396C8.89358 14.5555 8.45215 14.6687 8.00346 14.6687C7.55478 14.6687 7.11335 14.5555 6.72004 14.3396C6.32674 14.1236 5.99429 13.8119 5.75346 13.4334C5.31535 13.5316 4.85953 13.5176 4.42827 13.3927C3.997 13.2678 3.60425 13.036 3.28644 12.7189C2.96863 12.4017 2.73604 12.0095 2.61023 11.5785C2.48443 11.1475 2.46949 10.6917 2.5668 10.2534C2.18677 10.0129 1.87374 9.68014 1.65683 9.28617C1.43992 8.8922 1.32617 8.44976 1.32617 8.00002C1.32617 7.55029 1.43992 7.10785 1.65683 6.71388C1.87374 6.31991 2.18677 5.9872 2.5668 5.74669Z" stroke="#CCCCCC" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.49902 3.9502C8.64909 3.95025 8.76821 3.9963 8.8457 4.09668C8.92244 4.1886 8.97831 4.33443 9.0166 4.52637C9.06117 4.74062 9.21592 5.44174 9.48047 6.62988C9.74489 7.81386 9.96244 8.70727 10.1338 9.31055C10.3056 9.91545 10.4401 10.3258 10.5381 10.5439C10.6341 10.7578 10.7484 10.8788 10.8438 10.9805C10.8744 11.0132 10.9396 11.0633 11.0195 11.1162C11.0982 11.1682 11.1877 11.2204 11.2637 11.2598C11.3304 11.2943 11.4746 11.3396 11.6084 11.3613C11.714 11.3785 11.8086 11.4667 11.8086 11.583C11.8085 11.6961 11.7168 11.7884 11.6035 11.7881C11.2802 11.7873 10.9405 11.7842 10.7617 11.7842H10.2871C10.1186 11.7842 9.97049 11.7346 9.84668 11.6348C9.72377 11.5355 9.62715 11.3888 9.55469 11.1992C9.44785 10.9196 9.28023 10.2899 9.05273 9.3125L8.80566 8.21875L8.12012 5.24609C8.04832 4.93983 7.96133 4.73915 7.86426 4.63477C7.77147 4.53529 7.61116 4.47949 7.37012 4.47949C7.30434 4.4795 7.19283 4.4807 7.04395 4.48145C6.94948 4.48192 6.87305 4.40571 6.87305 4.31152C6.87309 4.23178 6.92835 4.16226 7.00684 4.14551C7.69714 3.99975 8.30754 3.9502 8.49902 3.9502Z" fill="#CCCCCC" stroke="#CCCCCC" stroke-width="0.1"/>
+<path d="M7.93164 7.22388C7.88951 6.98139 7.55671 6.94257 7.45801 7.16724C7.06205 8.06855 6.58945 9.11855 6.31055 9.74146C6.07869 10.2593 6.1423 10.1104 6.02051 10.3577C5.97572 10.4483 5.86426 10.6034 5.75 10.7502C5.6364 10.8962 5.52483 11.0282 5.4834 11.0715C5.45644 11.0997 5.39868 11.1433 5.32715 11.1897C5.25673 11.2354 5.17637 11.2812 5.1084 11.3157C5.05046 11.3451 4.92297 11.3795 4.80273 11.3958C4.70437 11.4091 4.61645 11.4905 4.61621 11.5979C4.61621 11.7025 4.70115 11.7881 4.80566 11.7883H5.74219C6.04149 11.7883 6.38928 11.6173 6.52441 11.2708C6.64934 10.9502 7.49996 8.66961 7.92383 7.34009C7.93591 7.3021 7.93838 7.26269 7.93164 7.22388Z" fill="#CCCCCC" stroke="#CCCCCC" stroke-width="0.1"/>
+</g>
+<defs>
+<clipPath id="clip0_7337_66344">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/animation/project/ProjectWorkspaceCycler.tsx

@@ -0,0 +1,203 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+// 4 log steps × ~3.5s + 2.5s hold ≈ 16s loop
+const CYCLE_MS = 3500;
+const PAUSE_AT_FULL_MS = 2500;
+const ROOT_MARGIN = '200px';
+
+/**
+ * Drives the Eigent single-agent workspace animation purely by mutating
+ * data-* attributes — no React re-renders. Steps:
+ *   0 = reset (only "Preparing agent" visible, nothing done)
+ *   1..4 = reveal log group N, mark progress item N-1 done, reveal file(s)
+ *   5 (= totalSteps) = all done — hold, then loop.
+ */
+export default function ProjectWorkspaceCycler({
+  totalSteps,
+}: {
+  totalSteps: number;
+}) {
+  const anchorRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    const anchor = anchorRef.current;
+    if (!anchor) return;
+    if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return;
+
+    const root = anchor.closest<HTMLElement>('[data-cycle-root]');
+    if (!root) return;
+
+    const logGroups = Array.from(
+      root.querySelectorAll<HTMLElement>('[data-log-step]')
+    );
+    const progressItems = Array.from(
+      root.querySelectorAll<HTMLElement>('[data-progress-index]')
+    );
+    const folderFiles = Array.from(
+      root.querySelectorAll<HTMLElement>('[data-file-step]')
+    );
+    const workedEl = root.querySelector<HTMLElement>('[data-worked]');
+    const folderEmptyEl = root.querySelector<HTMLElement>(
+      '[data-folder-empty]'
+    );
+    const taskActiveEl = root.querySelector<HTMLElement>('[data-task-active]');
+    const contextDotEl = root.querySelector<HTMLElement>('[data-context-dot]');
+    const tokenEl = root.querySelector<HTMLElement>('[data-token]');
+
+    // Token counts shown at each step (0 = reset, 1-4 = steps, 5 = done)
+    const TOKEN_VALUES = [
+      '8.3K',
+      '54.1K',
+      '108.9K',
+      '162.5K',
+      '196.2K',
+      '228.0K',
+    ];
+
+    if (logGroups.length === 0) return;
+
+    let step = 0;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    let isVisible = true;
+    let isTabVisible = !document.hidden;
+
+    const applyStep = () => {
+      // Log groups appear cumulatively. The newest one is "active" (spinner),
+      // earlier ones are "done", later ones hidden.
+      for (const el of logGroups) {
+        const groupStep = Number(el.dataset.logStep);
+        if (step >= totalSteps) {
+          el.dataset.state = 'done';
+        } else if (groupStep < step) {
+          el.dataset.state = 'done';
+        } else if (groupStep === step) {
+          el.dataset.state = 'active';
+        } else {
+          el.dataset.state = 'hidden';
+        }
+      }
+
+      // Progress items: item i is done once its log step (i+1) has completed.
+      for (const el of progressItems) {
+        const idx = Number(el.dataset.progressIndex);
+        const done = step >= totalSteps ? true : idx < step - 1;
+        el.dataset.done = done ? 'true' : 'false';
+      }
+
+      // Agent folder files: revealed at their step.
+      let anyFile = false;
+      for (const el of folderFiles) {
+        const fileStep = Number(el.dataset.fileStep);
+        const shown = step >= totalSteps ? true : fileStep <= step && step > 0;
+        el.dataset.visible = shown ? 'true' : 'false';
+        if (shown) anyFile = true;
+      }
+      if (folderEmptyEl)
+        folderEmptyEl.dataset.visible = anyFile ? 'false' : 'true';
+
+      // Context dot mirrors Agent Folder — visible only when files are present.
+      if (contextDotEl)
+        contextDotEl.dataset.visible = anyFile ? 'true' : 'false';
+
+      // "Worked for" elapsed label.
+      if (workedEl) {
+        const secs = step >= totalSteps ? 122 : step * 28;
+        const m = Math.floor(secs / 60);
+        const sLeft = secs % 60;
+        workedEl.textContent =
+          step >= totalSteps
+            ? '2m 02s'
+            : `${m > 0 ? m + 'm ' : ''}${String(sLeft).padStart(m > 0 ? 2 : 1, '0')}s`;
+      }
+
+      // Sidebar task status icon: spinner while steps are running, done at ends.
+      if (taskActiveEl) {
+        taskActiveEl.dataset.taskStatus =
+          step > 0 && step < totalSteps ? 'running' : 'done';
+      }
+
+      // Token counter: roll to the value for this step.
+      if (tokenEl) {
+        const idx = Math.min(step, totalSteps);
+        tokenEl.textContent = TOKEN_VALUES[idx];
+        // Alternate a ↔ b to restart the CSS animation each update.
+        tokenEl.dataset.tokenAnim =
+          tokenEl.dataset.tokenAnim === 'a' ? 'b' : 'a';
+      }
+    };
+
+    const tick = () => {
+      if (!isVisible || !isTabVisible) {
+        timer = setTimeout(tick, CYCLE_MS);
+        return;
+      }
+      step = (step + 1) % (totalSteps + 1);
+      applyStep();
+      timer = setTimeout(
+        tick,
+        step === totalSteps ? PAUSE_AT_FULL_MS : CYCLE_MS
+      );
+    };
+
+    // SSR snapshot is step 2; sync the live state to it then begin.
+    step = 2;
+    applyStep();
+
+    let idleHandle: number | null = null;
+    let idleTimeout: ReturnType<typeof setTimeout> | null = null;
+    const start = () => {
+      timer = setTimeout(tick, CYCLE_MS);
+    };
+    if (typeof window.requestIdleCallback === 'function') {
+      idleHandle = window.requestIdleCallback(start, { timeout: 2500 });
+    } else {
+      idleTimeout = setTimeout(start, 500);
+    }
+
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        isVisible = entry.isIntersecting;
+      },
+      { rootMargin: ROOT_MARGIN }
+    );
+    io.observe(root);
+
+    const onVisibility = () => {
+      isTabVisible = !document.hidden;
+    };
+    document.addEventListener('visibilitychange', onVisibility);
+
+    return () => {
+      if (timer !== null) clearTimeout(timer);
+      if (
+        idleHandle !== null &&
+        typeof window.cancelIdleCallback === 'function'
+      ) {
+        window.cancelIdleCallback(idleHandle);
+      }
+      if (idleTimeout !== null) clearTimeout(idleTimeout);
+      io.disconnect();
+      document.removeEventListener('visibilitychange', onVisibility);
+    };
+  }, [totalSteps]);
+
+  return (
+    <span ref={anchorRef} aria-hidden="true" style={{ display: 'none' }} />
+  );
+}

src/assets/animation/project/ProjectWorkspaceDisplay.tsx

@@ -0,0 +1,600 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import {
+  ArrowLeft,
+  ArrowRight,
+  Cast,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  ChevronUp,
+  ChevronsUpDown,
+  CircleCheckBig,
+  CircleHelp,
+  CircleSlash,
+  FileSpreadsheet,
+  FileText,
+  Folder,
+  Gift,
+  Inbox,
+  Joystick,
+  LayoutGrid,
+  Loader2,
+  MessageCircle,
+  MoreHorizontal,
+  PanelLeft,
+  PanelRight,
+  Plus,
+  Settings,
+  Sparkles,
+  Zap,
+} from 'lucide-react';
+import React from 'react';
+import eigentIcon from '../assets/eigent-icon.svg';
+import tokenIcon from '../assets/token.svg';
+import s from '../ProjectWorkspaceDisplay.module.css';
+import ProjectWorkspaceCycler from './ProjectWorkspaceCycler';
+
+// 0 = reset, 1..4 = log steps, 5 = all done (hold) → ~10s loop
+const TOTAL_STEPS = 5;
+const INITIAL_STEP = 2;
+
+function initialLogState(groupStep: number): 'done' | 'active' | 'hidden' {
+  if (groupStep < INITIAL_STEP) return 'done';
+  if (groupStep === INITIAL_STEP) return 'active';
+  return 'hidden';
+}
+const initialProgressDone = (i: number) => i < INITIAL_STEP - 1;
+const initialFileVisible = (fileStep: number) => fileStep <= INITIAL_STEP;
+
+/* ── Sidebar nav item ───────────────────────────────────── */
+
+function NavItem({
+  icon,
+  label,
+  badge,
+  dot,
+  contextDot,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  badge?: string;
+  dot?: boolean;
+  contextDot?: boolean;
+}) {
+  return (
+    <div className={s.navItem}>
+      <span className={s.navIcon}>
+        {icon}
+        {dot && <span className={s.navDot} />}
+        {contextDot !== undefined && (
+          <span
+            className={s.navDot}
+            data-context-dot
+            data-visible={contextDot ? 'true' : 'false'}
+          />
+        )}
+      </span>
+      <span className={s.navLabel}>{label}</span>
+      {badge && <span className={s.navBadge}>{badge}</span>}
+    </div>
+  );
+}
+
+/* ── Sidebar task row ───────────────────────────────────── */
+
+function TaskRow({
+  status,
+  label,
+  active,
+  dataTaskActive,
+}: {
+  status: 'done' | 'failed' | 'chat';
+  label: string;
+  active?: boolean;
+  dataTaskActive?: boolean;
+}) {
+  return (
+    <div
+      className={`${s.taskRow} ${active ? s.taskRowActive : ''}`}
+      {...(dataTaskActive
+        ? { 'data-task-active': '', 'data-task-status': 'running' }
+        : {})}
+    >
+      <span className={s.taskRowIcon}>
+        {status === 'done' && (
+          <>
+            <CircleCheckBig
+              size={15}
+              className={`${s.iconGreen} ${dataTaskActive ? s.taskDoneIcon : ''}`}
+            />
+            {dataTaskActive && (
+              <Loader2
+                size={15}
+                className={`${s.iconDefault} ${s.spinner} ${s.taskSpinnerIcon}`}
+              />
+            )}
+          </>
+        )}
+        {status === 'failed' && <CircleSlash size={15} className={s.iconRed} />}
+        {status === 'chat' && (
+          <MessageCircle size={15} className={s.iconDefault} />
+        )}
+      </span>
+      <span className={s.taskRowLabel}>{label}</span>
+      {active && <MoreHorizontal size={13} className={s.iconMuted} />}
+    </div>
+  );
+}
+
+/* ── Log tool row (toolkit · method) ───────────────────── */
+
+function LogToolRow({ toolkit, method }: { toolkit: string; method: string }) {
+  return (
+    <div className={s.logToolRow}>
+      <span className={s.logRowText}>{toolkit}</span>
+      <span className={s.logSep}>·</span>
+      <span className={s.logRowText}>{method}</span>
+      <ChevronRight size={13} className={s.iconMuted} />
+    </div>
+  );
+}
+
+function LogNarration({ text }: { text: string }) {
+  return <div className={s.logNarration}>{text}</div>;
+}
+
+/* ── Right-panel accordion ──────────────────────────────── */
+
+function PanelSection({
+  title,
+  count,
+  children,
+}: {
+  title: string;
+  count?: number;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className={s.panelSection}>
+      <div className={s.panelSectionHeader}>
+        <span className={s.panelSectionTitle}>{title}</span>
+        {count !== undefined && <span className={s.countPill}>{count}</span>}
+        <ChevronDown size={15} className={s.panelChevron} />
+      </div>
+      <div className={s.panelSectionBody}>{children}</div>
+    </div>
+  );
+}
+
+/* ═══════════════════════════════════════════════════════════
+   MAIN
+═══════════════════════════════════════════════════════════ */
+
+export default function ProjectWorkspaceDisplay() {
+  const progressItems = [
+    'Create mock bank transfer CSV with 10 columns',
+    'Read and verify the CSV file contents',
+    'Summarize the data in a written report',
+    'Generate a chart to visualize relevant trends',
+  ];
+
+  return (
+    <div className={s.container} data-cycle-root aria-hidden="true">
+      <ProjectWorkspaceCycler totalSteps={TOTAL_STEPS} />
+      <div className={s.inner}>
+        {/* ── Title bar ────────────────────────────────────── */}
+        <div className={s.titleBar}>
+          <div className={s.trafficLights}>
+            <span className={`${s.dot} ${s.dotRed}`} />
+            <span className={`${s.dot} ${s.dotYellow}`} />
+            <span className={`${s.dot} ${s.dotGreen}`} />
+          </div>
+          <button className={s.titleIconBtn}>
+            <PanelLeft size={15} />
+          </button>
+          <div className={s.appLogo}>
+            <img
+              src={eigentIcon}
+              alt=""
+              className={s.appLogoImg}
+              draggable={false}
+            />
+            <span className={s.appLogoText}>Home</span>
+          </div>
+          <div className={s.titleSpacer} />
+          <div className={s.titleTrailing}>
+            <button className={s.titleIconBtn}>
+              <CircleHelp size={15} />
+            </button>
+            <button className={s.titleIconBtn}>
+              <Gift size={15} />
+            </button>
+            <div className={s.titleDivider} />
+            <button className={s.titleIconBtn}>
+              <Settings size={15} />
+            </button>
+          </div>
+        </div>
+
+        {/* ── Shell (sidebar layer + content box) ──────────── */}
+        <div className={s.shell}>
+          {/* ── Left sidebar ───────────────────────────────── */}
+          <div className={s.sidebar}>
+            <div className={s.spaceHeader}>
+              <Folder size={15} className={s.iconDefault} />
+              <span className={s.spaceName}>Eigent AI</span>
+              <ChevronsUpDown size={15} className={s.iconMuted} />
+            </div>
+
+            <div className={s.navGroup}>
+              <NavItem icon={<LayoutGrid size={15} />} label="Workspace" />
+              <NavItem
+                icon={<Inbox size={15} />}
+                label="Context"
+                badge="Local"
+                contextDot={initialFileVisible(1)}
+              />
+              <NavItem icon={<Zap size={15} />} label="Scheduled" />
+              <NavItem icon={<Cast size={15} />} label="Dispatch" />
+            </div>
+
+            <div className={s.navDivider} />
+
+            <div className={s.navItem}>
+              <span className={s.navIcon}>
+                <Plus size={15} />
+              </span>
+              <span className={s.navLabel}>New</span>
+            </div>
+
+            <div className={s.taskList}>
+              <TaskRow
+                status="done"
+                label="Create a mock bank tr…"
+                active
+                dataTaskActive
+              />
+              <TaskRow status="chat" label="what are the top AI trends…" />
+              <TaskRow status="done" label="Draft a blog post on agent…" />
+              <TaskRow status="done" label="Summarize Q3 product feed…" />
+              <TaskRow status="done" label="Research competitor pricing…" />
+              <TaskRow status="done" label="Generate weekly report for…" />
+            </div>
+          </div>
+
+          {/* ── Content box (chat + panel share one bg) ──────── */}
+          <div className={s.contentBox}>
+            {/* Chat column */}
+            <div className={s.chat}>
+              {/* Chat header */}
+              <div className={s.chatHeader}>
+                <button className={s.chatBackBtn}>
+                  <ArrowLeft size={15} />
+                </button>
+                <div className={s.chatHeaderSpacer} />
+                <div className={s.tokenBadge}>
+                  <img src={tokenIcon} alt="" className={s.tokenIcon} />
+                  <span className={s.tokenText}>
+                    Total:{' '}
+                    <span data-token data-token-anim="a">
+                      108.9K
+                    </span>
+                  </span>
+                </div>
+              </div>
+
+              {/* Scroll body (content capped + centered) */}
+              <div className={s.chatScroll}>
+                <div className={s.chatColumn}>
+                  {/* User message */}
+                  <div className={s.userBubble}>
+                    <p className={s.userBubbleText}>
+                      Create a mock bank transfer CSV file include 10 columns
+                      and 10 rows. Read the generated CSV file and summarize the
+                      data, generate a chart to visualize relevant trends or
+                      insights from the data.
+                    </p>
+                  </div>
+
+                  {/* Worked for */}
+                  <div className={s.workedRow}>
+                    <span className={s.workedLabel}>Worked for </span>
+                    <span className={s.workedValue} data-worked>
+                      0s
+                    </span>
+                    <ChevronDown size={13} className={s.iconMuted} />
+                  </div>
+
+                  {/* Preparing agent */}
+                  <div className={s.prepRow}>
+                    <span className={s.prepText}>Preparing agent</span>
+                    <span className={s.logSep}>·</span>
+                    <span className={s.prepText}>2 Registered</span>
+                    <ChevronRight size={13} className={s.iconMuted} />
+                  </div>
+
+                  {/* ── Animated log groups ───────────────────── */}
+
+                  {/* Step 1 */}
+                  <div
+                    className={s.logGroup}
+                    data-log-step={1}
+                    data-state={initialLogState(1)}
+                  >
+                    <div className={s.logGroupHeader}>
+                      <span className={s.logGroupLabel}>
+                        <span className={s.logAgentName}>CAMEL Agent</span>
+                        <span className={s.logSep}>·</span>
+                        <span className={s.logGroupDetail}>
+                          File Toolkit · Write to file
+                        </span>
+                      </span>
+                      <ChevronDown
+                        size={13}
+                        className={`${s.iconMuted} ${s.logChevronDown}`}
+                      />
+                      <ChevronRight
+                        size={13}
+                        className={`${s.iconMuted} ${s.logChevronRight}`}
+                      />
+                    </div>
+                    <div className={s.logBody}>
+                      <LogToolRow toolkit="TodoToolkit" method="Todo_write" />
+                      <LogNarration text="Writing mock bank transfer data to CSV file..." />
+                      <LogToolRow
+                        toolkit="File Toolkit"
+                        method="Write to file"
+                      />
+                    </div>
+                  </div>
+
+                  {/* Step 2 */}
+                  <div
+                    className={s.logGroup}
+                    data-log-step={2}
+                    data-state={initialLogState(2)}
+                  >
+                    <div className={s.logGroupHeader}>
+                      <span className={s.logGroupLabel}>
+                        <span className={s.logAgentName}>CAMEL Agent</span>
+                        <span className={s.logSep}>·</span>
+                        <span className={s.logGroupDetail}>
+                          File Toolkit · Read file
+                        </span>
+                      </span>
+                      <ChevronDown
+                        size={13}
+                        className={`${s.iconMuted} ${s.logChevronDown}`}
+                      />
+                      <ChevronRight
+                        size={13}
+                        className={`${s.iconMuted} ${s.logChevronRight}`}
+                      />
+                    </div>
+                    <div className={s.logBody}>
+                      <LogToolRow toolkit="File Toolkit" method="Read file" />
+                      <LogNarration text="Parsing CSV contents and verifying column structure..." />
+                      <LogToolRow toolkit="TodoToolkit" method="Todo_write" />
+                    </div>
+                  </div>
+
+                  {/* Step 3 */}
+                  <div
+                    className={s.logGroup}
+                    data-log-step={3}
+                    data-state={initialLogState(3)}
+                  >
+                    <div className={s.logGroupHeader}>
+                      <span className={s.logGroupLabel}>
+                        <span className={s.logAgentName}>CAMEL Agent</span>
+                        <span className={s.logSep}>·</span>
+                        <span className={s.logGroupDetail}>
+                          File Toolkit · Write to file
+                        </span>
+                      </span>
+                      <ChevronDown
+                        size={13}
+                        className={`${s.iconMuted} ${s.logChevronDown}`}
+                      />
+                      <ChevronRight
+                        size={13}
+                        className={`${s.iconMuted} ${s.logChevronRight}`}
+                      />
+                    </div>
+                    <div className={s.logBody}>
+                      <LogToolRow
+                        toolkit="Terminal Toolkit"
+                        method="Shell exec"
+                      />
+                      <LogNarration text="Generating markdown report with data summary..." />
+                      <LogToolRow
+                        toolkit="File Toolkit"
+                        method="Write to file"
+                      />
+                    </div>
+                  </div>
+
+                  {/* Step 4 */}
+                  <div
+                    className={s.logGroup}
+                    data-log-step={4}
+                    data-state={initialLogState(4)}
+                  >
+                    <div className={s.logGroupHeader}>
+                      <span className={s.logGroupLabel}>
+                        <span className={s.logAgentName}>CAMEL Agent</span>
+                        <span className={s.logSep}>·</span>
+                        <span className={s.logGroupDetail}>
+                          Terminal Toolkit · Shell exec
+                        </span>
+                      </span>
+                      <ChevronDown
+                        size={13}
+                        className={`${s.iconMuted} ${s.logChevronDown}`}
+                      />
+                      <ChevronRight
+                        size={13}
+                        className={`${s.iconMuted} ${s.logChevronRight}`}
+                      />
+                    </div>
+                    <div className={s.logBody}>
+                      <LogToolRow
+                        toolkit="Screenshot Toolkit"
+                        method="Read image"
+                      />
+                      <LogNarration text="Rendering chart visualization from bank transfer data..." />
+                      <LogToolRow
+                        toolkit="Terminal Toolkit"
+                        method="Shell exec"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Input bar (bottom box) */}
+              <div className={s.inputWrap}>
+                <div className={s.inputColumn}>
+                  <div className={s.inputBox}>
+                    <div className={s.inputTextRow}>
+                      <span className={s.inputPlaceholder}>
+                        Ask a follow-up
+                      </span>
+                    </div>
+                    <div className={s.inputActions}>
+                      <div className={s.inputActionsLeft}>
+                        <button className={s.inputPlusBtn}>
+                          <Plus size={15} />
+                        </button>
+                        <div className={s.modelChip}>
+                          <Sparkles size={14} className={s.iconDefault} />
+                          <span className={s.modelChipText}>
+                            Support Any Model you like
+                          </span>
+                        </div>
+                      </div>
+                      <div className={s.inputActionsRight}>
+                        <div className={s.modeToggle}>
+                          <Joystick size={14} className={s.iconDefault} />
+                          <span className={s.modeToggleText}>Single Agent</span>
+                          <span className={s.modeToggleChevrons}>
+                            <ChevronUp
+                              size={9}
+                              strokeWidth={2.5}
+                              className={s.iconMuted}
+                            />
+                            <ChevronDown
+                              size={9}
+                              strokeWidth={2.5}
+                              className={s.iconMuted}
+                            />
+                          </span>
+                        </div>
+                        <button className={s.sendBtn}>
+                          <ArrowRight size={15} color="#fff" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* ── Right session panel ──────────────────────── */}
+            <div className={s.panel}>
+              <div className={s.panelHeader}>
+                <PanelRight size={15} className={s.iconDefault} />
+                <span className={s.panelHeaderTitle}>Single Agent</span>
+              </div>
+
+              <div className={s.panelScroll}>
+                <PanelSection title="Progress" count={4}>
+                  <div className={s.progressList}>
+                    {progressItems.map((text, i) => (
+                      <div
+                        key={i}
+                        className={s.progressItem}
+                        data-progress-index={i}
+                        data-done={initialProgressDone(i) ? 'true' : 'false'}
+                      >
+                        <span className={s.progressCircleWrap}>
+                          <span className={s.progressCircleDone}>
+                            <Check size={9} strokeWidth={3.5} color="#fff" />
+                          </span>
+                          <span className={s.progressCirclePending} />
+                        </span>
+                        <span className={s.progressText}>{text}</span>
+                      </div>
+                    ))}
+                  </div>
+                </PanelSection>
+
+                <PanelSection title="Execution Context">
+                  <p className={s.panelEmpty}>
+                    Track skills, MCPs and referenced files used in this task.
+                  </p>
+                </PanelSection>
+
+                <PanelSection title="Agent Folder">
+                  <p
+                    className={s.panelEmpty}
+                    data-folder-empty
+                    data-visible="false"
+                  >
+                    Files the agent writes or updates during this task appear
+                    here so you can open them.
+                  </p>
+                  <div className={s.folderList}>
+                    <div
+                      className={s.folderFile}
+                      data-file-step={1}
+                      data-visible={initialFileVisible(1) ? 'true' : 'false'}
+                    >
+                      <FileSpreadsheet size={15} className={s.iconMuted} />
+                      <span className={s.folderFileName}>
+                        bank_transfers.csv
+                      </span>
+                    </div>
+                    <div
+                      className={s.folderFile}
+                      data-file-step={3}
+                      data-visible={initialFileVisible(3) ? 'true' : 'false'}
+                    >
+                      <FileText size={15} className={s.iconMuted} />
+                      <span className={s.folderFileName}>
+                        analysis_report.md
+                      </span>
+                    </div>
+                    <div
+                      className={s.folderFile}
+                      data-file-step={4}
+                      data-visible={initialFileVisible(4) ? 'true' : 'false'}
+                    >
+                      <FileText size={15} className={s.iconMuted} />
+                      <span className={s.folderFileName}>
+                        bank_transfer_chart.png
+                      </span>
+                    </div>
+                  </div>
+                </PanelSection>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/assets/animation/workspace/WorkspaceCycler.tsx

@@ -0,0 +1,111 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+// Each mode holds for 4.5 seconds before switching
+const HOLD_MS = 4500;
+const ROOT_MARGIN = '200px';
+
+/**
+ * Drives the workspace landing animation by alternating between
+ * "single" and "workforce" modes every 4.5 seconds.
+ *
+ * Only mutates data-* attributes — no React re-renders, no textContent.
+ * CSS selectors handle all visual changes (show/hide heading variants,
+ * show/hide agent row variants, fade-in animation restart).
+ *
+ *   [data-cycle-root].dataset.mode  → "single" | "workforce"
+ *   [data-cycle-root].dataset.anim  → "a" | "b"  (restarts CSS fade)
+ */
+export default function WorkspaceCycler() {
+  const anchorRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    const anchor = anchorRef.current;
+    if (!anchor) return;
+    if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return;
+
+    const root = anchor.closest<HTMLElement>('[data-cycle-root]');
+    if (!root) return;
+
+    const MODES = ['single', 'workforce'] as const;
+    let modeIdx = 0; // start at single
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    let isVisible = true;
+    let isTabVisible = !document.hidden;
+
+    const applyMode = (idx: number) => {
+      root.dataset.mode = MODES[idx];
+      // Alternate a↔b to restart the CSS keyframe fade each cycle
+      root.dataset.anim = root.dataset.anim === 'a' ? 'b' : 'a';
+    };
+
+    const tick = () => {
+      if (!isVisible || !isTabVisible) {
+        timer = setTimeout(tick, HOLD_MS);
+        return;
+      }
+      modeIdx = (modeIdx + 1) % MODES.length;
+      applyMode(modeIdx);
+      timer = setTimeout(tick, HOLD_MS);
+    };
+
+    // Sync to SSR default (single mode, anim=a to prime the first fade)
+    applyMode(0);
+
+    let idleHandle: number | null = null;
+    let idleTimeout: ReturnType<typeof setTimeout> | null = null;
+    const start = () => {
+      timer = setTimeout(tick, HOLD_MS);
+    };
+    if (typeof window.requestIdleCallback === 'function') {
+      idleHandle = window.requestIdleCallback(start, { timeout: 2500 });
+    } else {
+      idleTimeout = setTimeout(start, 500);
+    }
+
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        isVisible = entry.isIntersecting;
+      },
+      { rootMargin: ROOT_MARGIN }
+    );
+    io.observe(root);
+
+    const onVisibility = () => {
+      isTabVisible = !document.hidden;
+    };
+    document.addEventListener('visibilitychange', onVisibility);
+
+    return () => {
+      if (timer !== null) clearTimeout(timer);
+      if (
+        idleHandle !== null &&
+        typeof window.cancelIdleCallback === 'function'
+      ) {
+        window.cancelIdleCallback(idleHandle);
+      }
+      if (idleTimeout !== null) clearTimeout(idleTimeout);
+      io.disconnect();
+      document.removeEventListener('visibilitychange', onVisibility);
+    };
+  }, []);
+
+  return (
+    <span ref={anchorRef} aria-hidden="true" style={{ display: 'none' }} />
+  );
+}

src/assets/animation/workspace/WorkspaceDisplay.tsx

@@ -0,0 +1,412 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import {
+  ArrowRight,
+  Bot,
+  Cast,
+  ChevronDown,
+  ChevronRight,
+  ChevronUp,
+  ChevronsUpDown,
+  CircleCheckBig,
+  CircleHelp,
+  CodeXml,
+  FileText,
+  Folder,
+  Gift,
+  Globe,
+  Image,
+  Inbox,
+  Joystick,
+  LayoutGrid,
+  MessageCircle,
+  PanelLeft,
+  Plus,
+  Settings,
+  Sparkles,
+  Zap,
+} from 'lucide-react';
+import React from 'react';
+import eigentIcon from '../assets/eigent-icon.svg';
+import s from '../ProjectWorkspaceDisplay.module.css';
+import WorkspaceCycler from './WorkspaceCycler';
+
+/* ── Sidebar nav item ───────────────────────────────────── */
+
+function NavItem({
+  icon,
+  label,
+  badge,
+  active,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  badge?: string;
+  active?: boolean;
+}) {
+  return (
+    <div className={`${s.navItem} ${active ? s.navItemActive : ''}`}>
+      <span className={s.navIcon}>{icon}</span>
+      <span className={s.navLabel}>{label}</span>
+      {badge && <span className={s.navBadge}>{badge}</span>}
+    </div>
+  );
+}
+
+/* ── Sidebar task row (placeholder projects) ────────────── */
+
+function SidebarRow({
+  status,
+  label,
+}: {
+  status: 'done' | 'chat';
+  label: string;
+}) {
+  return (
+    <div className={s.taskRow}>
+      <span className={s.taskRowIcon}>
+        {status === 'done' && (
+          <CircleCheckBig size={15} className={s.iconGreen} />
+        )}
+        {status === 'chat' && (
+          <MessageCircle size={15} className={s.iconDefault} />
+        )}
+      </span>
+      <span className={s.taskRowLabel}>{label}</span>
+    </div>
+  );
+}
+
+/* (ProjectRow removed — project list section removed from layout) */
+
+/* ═══════════════════════════════════════════════════════════
+   MAIN
+═══════════════════════════════════════════════════════════ */
+
+export default function WorkspaceDisplay() {
+  return (
+    <div
+      className={s.container}
+      data-cycle-root
+      data-mode="single"
+      aria-hidden="true"
+    >
+      <WorkspaceCycler />
+      <div className={s.inner}>
+        {/* ── Title bar ────────────────────────────────────── */}
+        <div className={s.titleBar}>
+          <div className={s.trafficLights}>
+            <span className={`${s.dot} ${s.dotRed}`} />
+            <span className={`${s.dot} ${s.dotYellow}`} />
+            <span className={`${s.dot} ${s.dotGreen}`} />
+          </div>
+          <button className={s.titleIconBtn}>
+            <PanelLeft size={15} />
+          </button>
+          <div className={s.appLogo}>
+            <img
+              src={eigentIcon}
+              alt=""
+              className={s.appLogoImg}
+              draggable={false}
+            />
+            <span className={s.appLogoText}>Home</span>
+          </div>
+          <div className={s.titleSpacer} />
+          <div className={s.titleTrailing}>
+            <button className={s.titleIconBtn}>
+              <CircleHelp size={15} />
+            </button>
+            <button className={s.titleIconBtn}>
+              <Gift size={15} />
+            </button>
+            <div className={s.titleDivider} />
+            <button className={s.titleIconBtn}>
+              <Settings size={15} />
+            </button>
+          </div>
+        </div>
+
+        {/* ── Shell ────────────────────────────────────────── */}
+        <div className={s.shell}>
+          {/* ── Left sidebar ───────────────────────────────── */}
+          <div className={s.sidebar}>
+            <div className={s.spaceHeader}>
+              <Folder size={15} className={s.iconDefault} />
+              <span className={s.spaceName}>Eigent AI</span>
+              <ChevronsUpDown size={15} className={s.iconMuted} />
+            </div>
+
+            <div className={s.navGroup}>
+              <NavItem
+                icon={<LayoutGrid size={15} />}
+                label="Workspace"
+                active
+              />
+              <NavItem
+                icon={<Inbox size={15} />}
+                label="Context"
+                badge="Local"
+              />
+              <NavItem icon={<Zap size={15} />} label="Scheduled" />
+              <NavItem icon={<Cast size={15} />} label="Dispatch" />
+            </div>
+
+            <div className={s.navDivider} />
+
+            {/* New button */}
+            <div className={s.navItem}>
+              <span className={s.navIcon}>
+                <Plus size={15} />
+              </span>
+              <span className={s.navLabel}>New</span>
+            </div>
+
+            {/* Placeholder project items */}
+            <div className={s.taskList}>
+              <SidebarRow status="done" label="Create a mock bank tr…" />
+              <SidebarRow status="chat" label="what are the top AI trends…" />
+              <SidebarRow status="done" label="Draft a blog post on agent…" />
+              <SidebarRow status="done" label="Summarize Q3 product feed…" />
+              <SidebarRow status="done" label="Research competitor pricing…" />
+              <SidebarRow status="done" label="Generate weekly report for…" />
+            </div>
+          </div>
+
+          {/* ── Content box ──────────────────────────────────── */}
+          <div className={s.contentBox}>
+            {/* ── Workspace landing column ─────────────────── */}
+            <div className={s.workspaceLanding}>
+              {/* Workspace header toolbar — 44px */}
+              <div className={s.chatHeader}>
+                <div className={s.chatHeaderSpacer} />
+              </div>
+
+              {/* Two equal-height halves */}
+              <div className={s.workspaceScrollArea}>
+                {/* ── Top half: input area ─────────────────── */}
+                <div className={s.workspaceInputArea}>
+                  <div className={s.workspaceComposer}>
+                    {/* Project picker — mb-8, centered */}
+                    <div className={s.wsPickerRow}>
+                      <button className={s.spacePicker}>
+                        <Folder size={16} className={s.iconDefault} />
+                        <span>Eigent AI</span>
+                        <ChevronsUpDown
+                          size={16}
+                          className={s.iconMuted}
+                          style={{ opacity: 0.8 }}
+                        />
+                      </button>
+                    </div>
+
+                    {/* Heading — two variants, CSS shows the active one */}
+                    <h2 className={s.workspaceHeading}>
+                      <span data-ws-heading="single">
+                        Cowork with Single Agent
+                      </span>
+                      <span data-ws-heading="workforce">
+                        Cowork with Workforce
+                      </span>
+                    </h2>
+
+                    {/* Agent area — single box (default) or workforce row (cycled) */}
+                    <div className={s.wsAgentRow}>
+                      {/* Single agent mode: one Bot icon box */}
+                      <div className={s.singleAgentBox}>
+                        <Bot
+                          size={24}
+                          strokeWidth={2}
+                          className={s.iconMuted}
+                        />
+                      </div>
+
+                      {/* Workforce mode: 4 agent cards + add button (hidden by default) */}
+                      <div className={s.workforceAgentRow}>
+                        {/* Developer Agent — terminal green */}
+                        <div className={s.wfAgentCard}>
+                          <div className={s.wfAgentIconWrap}>
+                            <Bot
+                              size={24}
+                              strokeWidth={2}
+                              className={s.iconMuted}
+                            />
+                            <span
+                              className={`${s.wfAgentSubIcon} ${s.wfSubIconDev}`}
+                            >
+                              <CodeXml size={10} />
+                            </span>
+                          </div>
+                        </div>
+                        {/* Browser Agent — blue */}
+                        <div className={s.wfAgentCard}>
+                          <div className={s.wfAgentIconWrap}>
+                            <Bot
+                              size={24}
+                              strokeWidth={2}
+                              className={s.iconMuted}
+                            />
+                            <span
+                              className={`${s.wfAgentSubIcon} ${s.wfSubIconBrowser}`}
+                            >
+                              <Globe size={10} />
+                            </span>
+                          </div>
+                        </div>
+                        {/* Multi Modal Agent — fuchsia */}
+                        <div className={s.wfAgentCard}>
+                          <div className={s.wfAgentIconWrap}>
+                            <Bot
+                              size={24}
+                              strokeWidth={2}
+                              className={s.iconMuted}
+                            />
+                            <span
+                              className={`${s.wfAgentSubIcon} ${s.wfSubIconModal}`}
+                            >
+                              <Image size={10} />
+                            </span>
+                          </div>
+                        </div>
+                        {/* Document Agent — amber */}
+                        <div className={s.wfAgentCard}>
+                          <div className={s.wfAgentIconWrap}>
+                            <Bot
+                              size={24}
+                              strokeWidth={2}
+                              className={s.iconMuted}
+                            />
+                            <span
+                              className={`${s.wfAgentSubIcon} ${s.wfSubIconDoc}`}
+                            >
+                              <FileText size={10} />
+                            </span>
+                          </div>
+                        </div>
+                        {/* Add agent button */}
+                        <div className={s.wfAddBtn}>
+                          <Plus
+                            size={24}
+                            strokeWidth={2}
+                            className={s.iconMuted}
+                          />
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Input / BottomBox */}
+                    <div className={s.workspaceInputBox}>
+                      <div className={s.inputTextRow}>
+                        <span className={s.inputPlaceholder}>
+                          Describe a task for your agents…
+                        </span>
+                      </div>
+                      <div className={s.inputActions}>
+                        <div className={s.inputActionsLeft}>
+                          <button className={s.inputPlusBtn}>
+                            <Plus size={15} />
+                          </button>
+                          <div className={s.modelChip}>
+                            <Sparkles size={14} className={s.iconDefault} />
+                            <span className={s.modelChipText}>
+                              Support Any Model you like
+                            </span>
+                          </div>
+                        </div>
+                        <div className={s.inputActionsRight}>
+                          <div className={s.modeToggle}>
+                            <Joystick size={14} className={s.iconDefault} />
+                            <span className={s.modeToggleText}>
+                              <span data-ws-mode-label="single">
+                                Single Agent
+                              </span>
+                              <span data-ws-mode-label="workforce">
+                                Workforce
+                              </span>
+                            </span>
+                            <span className={s.modeToggleChevrons}>
+                              <ChevronUp
+                                size={9}
+                                strokeWidth={2.5}
+                                className={s.iconMuted}
+                              />
+                              <ChevronDown
+                                size={9}
+                                strokeWidth={2.5}
+                                className={s.iconMuted}
+                              />
+                            </span>
+                          </div>
+                          <button className={s.sendBtn}>
+                            <ArrowRight size={15} color="#fff" />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* ── Bottom half: example prompts ─────────────── */}
+                <div className={s.workspaceProjectsArea}>
+                  <div className={s.promptCardsWrap}>
+                    <div className={s.promptCard}>
+                      <span className={s.promptCardText}>
+                        Research the latest AI market trends and summarize key
+                        insights
+                      </span>
+                    </div>
+                    <div className={s.promptCard}>
+                      <span className={s.promptCardText}>
+                        Create a weekly status report from my project notes
+                      </span>
+                    </div>
+                    <div className={s.promptCard}>
+                      <span className={s.promptCardText}>
+                        Analyze competitors and suggest positioning strategies
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* ── Right CoworkPanel ────────────────────────── */}
+            <div className={s.coworkPanel}>
+              {/* Instructions + Memory settings card */}
+              <div className={s.coworkSettingsCard}>
+                <div className={s.coworkSettingsTitle}>Instructions</div>
+                <div className={s.coworkMemoryRow}>
+                  <span className={s.coworkMemoryLabel}>Memory</span>
+                  <button className={s.coworkMemoryBtn}>Off</button>
+                </div>
+              </div>
+
+              {/* Getting started — folded accordion */}
+              <div className={s.coworkAccordion}>
+                <button className={s.coworkAccordionTrigger}>
+                  <span className={s.coworkAccordionTitle}>
+                    Getting started
+                  </span>
+                  <span className={s.coworkAccordionCount}>0/4</span>
+                  <ChevronRight size={15} className={s.iconMuted} />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/InstallStep/InstallDependencies.tsx

@@ -12,55 +12,97 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
-import { CarouselStep } from '@/components/InstallStep/Carousel';
+import { OnboardingSteps } from '@/components/InstallStep/OnboardingSteps';
 import { ProgressInstall } from '@/components/ui/progress-install';
+import { cn } from '@/lib/utils';
+import { useAuthStore } from '@/store/authStore';
 import { useInstallationUI } from '@/store/installationStore';
+import { CheckCircle2 } from 'lucide-react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 export const InstallDependencies: React.FC = () => {
+  const { t } = useTranslation();
   const { progress, latestLog, isInstalling, installationState } =
     useInstallationUI();
+  const {
+    isFirstLaunch,
+    onboardingCompleted,
+    setOnboardingCompleted,
+    setIsFirstLaunch,
+  } = useAuthStore();
+
+  // Show onboarding panel when it's first launch and user hasn't completed setup
+  const showOnboarding = isFirstLaunch && !onboardingCompleted;
+
+  const installDone =
+    !isInstalling &&
+    installationState !== 'waiting-backend' &&
+    installationState !== 'idle';
+
+  const displayProgress =
+    isInstalling || installationState === 'waiting-backend' ? progress : 100;
+
+  const handleOnboardingComplete = () => {
+    setOnboardingCompleted(true);
+    setIsFirstLaunch(false);
+  };
 
   return (
-    <div className="inset-0 px-1 pb-1 pt-10 fixed !z-[100] flex h-full w-full items-center justify-center overflow-hidden">
-      <div className="gap-lg rounded-2xl bg-ds-bg-neutral-subtle-default p-4 flex h-full w-full flex-row justify-center">
-        <div className="pt-6 flex h-full w-1/3">
-          {/* {isInstalling.toString()} */}
-          <div className="flex w-full flex-col">
-            <ProgressInstall
-              value={
-                isInstalling || installationState === 'waiting-backend'
-                  ? progress
-                  : 100
-              }
-              className="mb-4 w-full"
-            />
-            <div className="mt-2 gap-4 flex w-full flex-col items-start justify-between">
-              <div className="flex w-full flex-row items-start justify-between">
-                <div className="text-body-sm font-medium leading-normal text-ds-text-neutral-default-default">
-                  {isInstalling
-                    ? 'System Installing ...'
-                    : installationState === 'waiting-backend'
-                      ? 'Starting up... First launch may take a minute.'
+    <div className="inset-0 min-h-0 px-1 pb-1 pt-10 absolute flex flex-row overflow-hidden">
+      <div className="min-h-0 min-w-0 rounded-2xl bg-ds-bg-neutral-default-default gap-2 p-1 flex h-full w-full flex-1 flex-row">
+        {/* ── Left: installation progress ───────────────────── */}
+        <div
+          className={cn(
+            'px-6 py-8 flex flex-col transition-all duration-500',
+            showOnboarding ? 'w-1/3' : 'w-full'
+          )}
+        >
+          <div className="gap-4 flex w-full flex-col">
+            <ProgressInstall value={displayProgress} className="w-full" />
+
+            <div className="flex w-full flex-row items-start justify-between">
+              <div className="text-body-sm font-medium text-ds-text-neutral-default-default">
+                {isInstalling
+                  ? t('layout.install-system-installing')
+                  : installationState === 'waiting-backend'
+                    ? t('layout.install-starting-up')
+                    : installDone
+                      ? t('layout.install-ready')
                       : ''}
-                </div>
-                <div className="text-body-sm font-medium leading-normal text-ds-text-neutral-default-default">
-                  {Math.round(
-                    (isInstalling || installationState === 'waiting-backend'
-                      ? progress
-                      : 100) ?? 0
-                  )}
-                  %
-                </div>
               </div>
-              <div className="text-body-sm font-normal leading-normal text-ds-text-neutral-muted-default w-full">
-                {latestLog?.data}
+              <div className="text-body-sm font-medium text-ds-text-neutral-default-default">
+                {Math.round(displayProgress ?? 0)}%
               </div>
             </div>
+
+            {/* Latest log line */}
+            {latestLog?.data && (
+              <div className="text-body-sm font-normal leading-normal text-ds-text-neutral-muted-default">
+                {latestLog.data}
+              </div>
+            )}
+
+            {/* Done state */}
+            {installDone && !isInstalling && (
+              <div className="gap-2 text-body-sm font-medium text-ds-text-neutral-muted-default flex items-center">
+                <CheckCircle2 size={15} className="text-green-500" />
+                {t('layout.install-complete')}
+              </div>
+            )}
           </div>
         </div>
-        <div className="rounded-2xl bg-ds-bg-neutral-default-default p-md flex h-full w-2/3">
-          <CarouselStep />
+
+        {/* ── Right: onboarding steps (first launch only) ────── */}
+        <div
+          className={cn(
+            'min-w-0 overflow-hidden transition-all duration-500',
+            showOnboarding ? 'w-2/3 opacity-100' : 'w-0 opacity-0'
+          )}
+        >
+          {showOnboarding && (
+            <OnboardingSteps onComplete={handleOnboardingComplete} />
+          )}
         </div>
       </div>
     </div>

src/components/InstallStep/OnboardingSteps.tsx

@@ -0,0 +1,506 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import {
+  DashedLinesBackground,
+  DotPatternBackground,
+  DottedLinesBackground,
+  GridPatternBackground,
+  RuledLinesBackground,
+} from '@/components/Background';
+import { Button } from '@/components/ui/button';
+import { LocaleEnum, switchLanguage } from '@/i18n';
+import { cn } from '@/lib/utils';
+import { useAuthStore, type WorkspaceMainBackground } from '@/store/authStore';
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  Check,
+  Monitor,
+  Moon,
+  Sun,
+} from 'lucide-react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type Step = 1 | 2 | 3;
+
+// ── Language ──────────────────────────────────────────────────────────────────
+
+const LANGUAGE_OPTIONS = [
+  { key: 'system', nativeLabel: null },
+  { key: LocaleEnum.English, nativeLabel: 'English' },
+  { key: LocaleEnum.SimplifiedChinese, nativeLabel: '中文（简体）' },
+  { key: LocaleEnum.TraditionalChinese, nativeLabel: '中文（繁體）' },
+  { key: LocaleEnum.Japanese, nativeLabel: '日本語' },
+  { key: LocaleEnum.Arabic, nativeLabel: 'العربية' },
+  { key: LocaleEnum.French, nativeLabel: 'Français' },
+  { key: LocaleEnum.German, nativeLabel: 'Deutsch' },
+  { key: LocaleEnum.Russian, nativeLabel: 'Русский' },
+  { key: LocaleEnum.Spanish, nativeLabel: 'Español' },
+  { key: LocaleEnum.Korean, nativeLabel: '한국어' },
+  { key: LocaleEnum.Italian, nativeLabel: 'Italiano' },
+];
+
+// ── Theme presets ─────────────────────────────────────────────────────────────
+
+const THEME_PRESETS = [
+  {
+    id: 'eigent',
+    label: 'Eigent',
+    lightAccent: '#1d1d1d',
+    darkAccent: '#ede1db',
+  },
+  {
+    id: 'camel',
+    label: 'CAMEL',
+    lightAccent: '#4c19e8',
+    darkAccent: '#b5afff',
+  },
+  { id: 'claw', label: 'Claw', lightAccent: '#cc7d5e', darkAccent: '#cc7d5e' },
+  {
+    id: 'starfish',
+    label: 'Starfish',
+    lightAccent: '#0169cc',
+    darkAccent: '#0169cc',
+  },
+] as const;
+
+// ── Background pattern metadata (labels resolved via t() in component) ────────
+
+const BG_PATTERN_DEFS: {
+  id: WorkspaceMainBackground;
+  labelKey: string;
+  Component: React.FC | null;
+}[] = [
+  { id: 'empty', labelKey: 'layout.onboarding-setup-bg-none', Component: null },
+  {
+    id: 'dots',
+    labelKey: 'layout.onboarding-setup-bg-dots',
+    Component: DotPatternBackground,
+  },
+  {
+    id: 'blocks',
+    labelKey: 'layout.onboarding-setup-bg-blocks',
+    Component: GridPatternBackground,
+  },
+  {
+    id: 'ruled',
+    labelKey: 'layout.onboarding-setup-bg-ruled',
+    Component: RuledLinesBackground,
+  },
+  {
+    id: 'dotted',
+    labelKey: 'layout.onboarding-setup-bg-dotted',
+    Component: DottedLinesBackground,
+  },
+  {
+    id: 'dashed',
+    labelKey: 'layout.onboarding-setup-bg-dashed',
+    Component: DashedLinesBackground,
+  },
+];
+
+// ── Step 1 — Language ─────────────────────────────────────────────────────────
+
+function StepLanguage({
+  selected,
+  onSelect,
+}: {
+  selected: string;
+  onSelect: (key: string) => void;
+}) {
+  const { t } = useTranslation();
+  return (
+    <div className="gap-8 flex flex-col">
+      <div className="gap-2 flex flex-col items-center">
+        <span className="text-heading-base font-bold text-ds-text-neutral-default-default">
+          {t('layout.onboarding-setup-language-title')}
+        </span>
+        <span className="mt-2 text-body-base text-ds-text-neutral-muted-default">
+          {t('layout.onboarding-setup-language-subtitle')}
+        </span>
+      </div>
+      <div className="gap-2 grid grid-cols-3">
+        {LANGUAGE_OPTIONS.map(({ key, nativeLabel }) => {
+          const active = selected === key;
+          const displayLabel =
+            nativeLabel ?? t('layout.onboarding-setup-language-system-default');
+          return (
+            <button
+              key={key}
+              onClick={() => onSelect(key)}
+              className={cn(
+                'rounded-xl px-6 py-3 text-body-sm font-medium transition-color flex items-center justify-between border border-solid duration-100',
+                active
+                  ? 'border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default text-ds-text-neutral-default-default'
+                  : 'bg-ds-bg-neutral-default-default text-ds-text-neutral-muted-default hover:bg-ds-bg-neutral-default-hover hover:border-ds-border-neutral-default-hover hover:text-ds-text-neutral-muted-hover border-transparent'
+              )}
+            >
+              <span>{displayLabel}</span>
+              {active && <Check size={14} strokeWidth={2.5} />}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ── Step 2 — Theme ────────────────────────────────────────────────────────────
+
+function StepTheme({
+  appearanceMode,
+  appearance,
+  activeThemeId,
+  onModeChange,
+  onThemeChange,
+}: {
+  appearanceMode: string;
+  appearance: 'light' | 'dark';
+  activeThemeId: string;
+  onModeChange: (mode: 'light' | 'dark' | 'system') => void;
+  onThemeChange: (themeId: string) => void;
+}) {
+  const { t } = useTranslation();
+
+  const MODES = [
+    {
+      id: 'system' as const,
+      label: t('layout.onboarding-setup-appearance-system'),
+      Icon: Monitor,
+    },
+    {
+      id: 'light' as const,
+      label: t('layout.onboarding-setup-appearance-light'),
+      Icon: Sun,
+    },
+    {
+      id: 'dark' as const,
+      label: t('layout.onboarding-setup-appearance-dark'),
+      Icon: Moon,
+    },
+  ];
+
+  return (
+    <div className="gap-8 flex flex-col">
+      {/* Mode selection */}
+      <div className="gap-4 flex w-full flex-col items-center">
+        <span className="text-heading-base font-bold text-ds-text-neutral-default-default">
+          {t('layout.onboarding-setup-appearance-title')}
+        </span>
+        <span className="mt-2 text-body-base text-ds-text-neutral-muted-default">
+          {t('layout.onboarding-setup-language-subtitle')}
+        </span>
+        <div className="gap-3 flex w-full">
+          {MODES.map(({ id, label, Icon }) => {
+            const active = appearanceMode === id;
+            return (
+              <button
+                key={id}
+                onClick={() => onModeChange(id)}
+                className={cn(
+                  'gap-2 rounded-xl py-4 flex flex-1 flex-col items-center border border-solid transition-colors duration-100',
+                  active
+                    ? 'border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default text-ds-text-neutral-default-default'
+                    : 'bg-ds-bg-neutral-default-default text-ds-text-neutral-muted-default hover:bg-ds-bg-neutral-default-hover hover:border-ds-border-neutral-default-hover hover:text-ds-text-neutral-muted-hover border-transparent'
+                )}
+              >
+                <Icon size={20} strokeWidth={1.5} />
+                <span className="text-body-sm font-medium">{label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Color theme selection */}
+      <div className="gap-4 flex w-full flex-col items-center">
+        <div>
+          <span className="text-body-lg font-semibold text-ds-text-neutral-default-default">
+            {t('layout.onboarding-setup-color-theme')}
+          </span>
+        </div>
+        <div className="gap-3 grid w-full grid-cols-4">
+          {THEME_PRESETS.map(({ id, label, lightAccent, darkAccent }) => {
+            const accent = appearance === 'dark' ? darkAccent : lightAccent;
+            const active = activeThemeId === id;
+            return (
+              <button
+                key={id}
+                onClick={() => onThemeChange(id)}
+                className={cn(
+                  'gap-3 rounded-xl p-4 flex flex-col items-center border border-solid transition-colors duration-100',
+                  active
+                    ? 'border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default'
+                    : 'bg-ds-bg-neutral-default-default hover:bg-ds-bg-neutral-default-hover hover:border-ds-border-neutral-default-hover border-transparent'
+                )}
+              >
+                <div
+                  className="h-10 w-10 rounded-lg ring-2 ring-offset-2 transition-all"
+                  style={
+                    {
+                      backgroundColor: accent,
+                      ringColor: active ? accent : 'transparent',
+                      '--tw-ring-color': active ? accent : 'transparent',
+                      '--tw-ring-offset-color': 'var(--ds-bg-neutral-default)',
+                    } as React.CSSProperties
+                  }
+                />
+                <span
+                  className={cn(
+                    'text-body-sm font-medium',
+                    active
+                      ? 'text-ds-text-neutral-default-default'
+                      : 'text-ds-text-neutral-muted-default'
+                  )}
+                >
+                  {label}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Step 3 — Background pattern ───────────────────────────────────────────────
+
+function PatternPreviewCard({
+  label,
+  Component,
+  selected,
+  onSelect,
+}: {
+  id: WorkspaceMainBackground;
+  label: string;
+  Component: React.FC | null;
+  selected: boolean;
+  onSelect: () => void;
+}) {
+  return (
+    <button
+      onClick={onSelect}
+      className={cn(
+        'gap-2 rounded-xl p-2 ition-colors flex flex-col items-center border border-solid',
+        selected
+          ? 'border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default'
+          : 'bg-ds-bg-neutral-default-default hover:border-ds-border-neutral-default-default border-transparent'
+      )}
+    >
+      <div className="h-24 rounded-xl bg-ds-bg-neutral-subtle-default relative isolate w-full overflow-hidden">
+        {Component && <Component />}
+        {selected && (
+          <div className="inset-0 absolute flex items-center justify-center">
+            <div className="bg-ds-bg-neutral-strong-default p-1 h-6 w-6 shadow-sm rounded-full">
+              <Check
+                size={12}
+                strokeWidth={2.5}
+                className="text-ds-text-neutral-default-default"
+              />
+            </div>
+          </div>
+        )}
+      </div>
+      <span
+        className={cn(
+          'pb-1 text-body-sm font-medium',
+          selected
+            ? 'text-ds-text-neutral-default-default'
+            : 'text-ds-text-neutral-muted-default'
+        )}
+      >
+        {label}
+      </span>
+    </button>
+  );
+}
+
+function StepBackground({
+  selected,
+  onSelect,
+}: {
+  selected: WorkspaceMainBackground;
+  onSelect: (id: WorkspaceMainBackground) => void;
+}) {
+  const { t } = useTranslation();
+  return (
+    <div className="gap-8 flex w-full flex-col">
+      <div className="gap-2 flex flex-col items-center">
+        <span className="text-heading-base font-bold text-ds-text-neutral-default-default">
+          {t('layout.onboarding-setup-workspace-title')}
+        </span>
+        <span className="mt-2 text-body-base text-ds-text-neutral-muted-default">
+          {t('layout.onboarding-setup-workspace-subtitle')}
+        </span>
+      </div>
+      <div className="gap-3 grid w-full grid-cols-3">
+        {BG_PATTERN_DEFS.map(({ id, labelKey, Component }) => (
+          <PatternPreviewCard
+            key={id}
+            id={id}
+            label={t(labelKey)}
+            Component={Component}
+            selected={selected === id}
+            onSelect={() => onSelect(id)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ── Main component ────────────────────────────────────────────────────────────
+
+export function OnboardingSteps({ onComplete }: { onComplete: () => void }) {
+  const { t } = useTranslation();
+  const [step, setStep] = useState<Step>(1);
+
+  const {
+    language,
+    appearanceMode,
+    appearance,
+    lightColorThemeId,
+    darkColorThemeId,
+    workspaceMainBackground,
+    setAppearanceMode,
+    setColorThemeForMode,
+    setWorkspaceMainBackground,
+    setOnboardingCompleted,
+    setIsFirstLaunch,
+  } = useAuthStore();
+
+  const activeThemeId =
+    appearance === 'dark' ? darkColorThemeId : lightColorThemeId;
+
+  const livePattern =
+    step === 3
+      ? BG_PATTERN_DEFS.find((p) => p.id === workspaceMainBackground)
+      : null;
+  const LivePatternComponent = livePattern?.Component ?? null;
+
+  const handleLanguage = (key: string) => {
+    if (key === 'system') {
+      const systemLang = navigator.language.toLowerCase();
+      const available = Object.values(LocaleEnum);
+      const matched = available.find((l) => systemLang.startsWith(l));
+      const langToApply = matched ?? LocaleEnum.English;
+      switchLanguage(langToApply);
+      useAuthStore.getState().setLanguage('system');
+    } else {
+      switchLanguage(key as LocaleEnum);
+    }
+  };
+
+  const handleThemePreset = (themeId: string) => {
+    setColorThemeForMode('light', themeId);
+    setColorThemeForMode('dark', themeId);
+  };
+
+  const handleComplete = () => {
+    setOnboardingCompleted(true);
+    setIsFirstLaunch(false);
+    onComplete();
+  };
+
+  return (
+    <div className="rounded-2xl bg-ds-bg-neutral-subtle-default relative flex h-full w-full flex-col overflow-hidden">
+      {LivePatternComponent && <LivePatternComponent />}
+
+      <div className="px-8 py-6 relative z-[1] flex h-full flex-col">
+        {/* Step indicator dots */}
+        <div className="mb-8 gap-2 flex items-center justify-center">
+          {([1, 2, 3] as Step[]).map((s) => (
+            <div
+              key={s}
+              className={cn(
+                'h-1.5 rounded-full transition-all duration-300',
+                s === step
+                  ? 'w-8 bg-ds-text-neutral-default-default'
+                  : s < step
+                    ? 'w-1.5 bg-ds-text-neutral-default-default opacity-40'
+                    : 'w-1.5 bg-ds-text-neutral-muted-default opacity-30'
+              )}
+            />
+          ))}
+        </div>
+
+        <div className="flex-1 overflow-auto">
+          {step === 1 && (
+            <StepLanguage selected={language} onSelect={handleLanguage} />
+          )}
+          {step === 2 && (
+            <StepTheme
+              appearanceMode={appearanceMode}
+              appearance={appearance}
+              activeThemeId={activeThemeId}
+              onModeChange={setAppearanceMode}
+              onThemeChange={handleThemePreset}
+            />
+          )}
+          {step === 3 && (
+            <StepBackground
+              selected={workspaceMainBackground}
+              onSelect={setWorkspaceMainBackground}
+            />
+          )}
+        </div>
+
+        {/* Navigation */}
+        <div className="mt-6 flex items-center justify-between">
+          <Button
+            variant="ghost"
+            size="md"
+            buttonContent="text"
+            buttonRadius="lg"
+            className={cn(
+              step === 1 ? 'pointer-events-none opacity-0' : 'opacity-100'
+            )}
+            onClick={() => setStep((s) => (s - 1) as Step)}
+          >
+            <ArrowLeftIcon />
+            {t('layout.back')}
+          </Button>
+
+          {step < 3 ? (
+            <Button
+              variant="primary"
+              size="md"
+              textWeight="semibold"
+              buttonContent="text"
+              buttonRadius="lg"
+              onClick={() => setStep((s) => (s + 1) as Step)}
+            >
+              {t('layout.continue')}
+              <ArrowRightIcon />
+            </Button>
+          ) : (
+            <Button
+              variant="primary"
+              size="md"
+              textWeight="semibold"
+              buttonContent="text"
+              buttonRadius="lg"
+              onClick={handleComplete}
+            >
+              {t('layout.onboarding-setup-get-started')}
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Layout/AnimationJson.tsx

@@ -1,49 +0,0 @@
-// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
-
-import lottie from 'lottie-web';
-import { useEffect } from 'react';
-export function AnimationJson({
-  animationData = '',
-  onComplete,
-}: {
-  animationData: any;
-  onComplete?: () => void;
-}) {
-  useEffect(() => {
-    const animation = lottie.loadAnimation({
-      container: document.getElementById('lottie-container')!,
-      renderer: 'svg',
-      loop: false,
-      autoplay: true,
-      animationData,
-    });
-    // listen to animation completion
-    animation.addEventListener('complete', () => {
-      console.log('animation completed');
-      onComplete?.(); // call the callback passed in externally
-    });
-
-    return () => {
-      animation.destroy(); // clean up resources
-    };
-  }, [animationData, onComplete]);
-
-  return (
-    <div
-      id="lottie-container"
-      className="inset-0 bg-ds-bg-neutral-subtle-default fixed z-[9999] h-full w-full"
-    ></div>
-  );
-}

src/components/Layout/index.tsx

@@ -12,9 +12,7 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
-import animationData from '@/assets/animation/onboarding_success.json';
 import { InstallDependencies } from '@/components/InstallStep/InstallDependencies';
-import { AnimationJson } from '@/components/Layout/AnimationJson';
 import TopBar from '@/components/TopBar';
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
 import { useInstallationSetup } from '@/hooks/useInstallationSetup';
@@ -32,7 +30,7 @@ const Layout = () => {
   const {
     initState,
     isFirstLaunch,
-    setIsFirstLaunch,
+    onboardingCompleted,
     setInitState: _setInitState,
   } = useAuthStore();
   const [noticeOpen, setNoticeOpen] = useState(false);
@@ -74,30 +72,30 @@ const Layout = () => {
     };
   }, [chatStore, host]);
 
-  // Determine what to show based on states
-  const shouldShowOnboarding =
-    initState === 'done' && isFirstLaunch && !isInstalling;
-
   // Show install screen if: installation UI is active, user hasn't finished setup,
   // or backend hasn't passed health check yet.
   // isBackendReady defaults to false on each app launch (non-persisted),
   // so the main UI is gated until health check passes — no race condition.
+  // Also wait for first-launch onboarding to be completed before showing main UI.
   const actualShouldShowInstallScreen =
-    shouldShowInstallScreen || initState !== 'done' || !isBackendReady;
+    shouldShowInstallScreen ||
+    initState !== 'done' ||
+    !isBackendReady ||
+    (isFirstLaunch && !onboardingCompleted);
   const shouldShowMainContent = !actualShouldShowInstallScreen;
 
   return (
-    <div className="relative flex h-full flex-col overflow-hidden bg-ds-bg-neutral-muted-default">
-      <TopBar />
-      <div className="relative h-full min-h-0 flex-1 overflow-hidden">
-        {/* Onboarding animation */}
-        {shouldShowOnboarding && (
-          <AnimationJson
-            onComplete={() => setIsFirstLaunch(false)}
-            animationData={animationData}
-          />
-        )}
-
+    <div className="bg-ds-bg-neutral-muted-default relative flex h-full flex-col overflow-hidden">
+      <div
+        className={
+          actualShouldShowInstallScreen
+            ? 'pointer-events-none select-none'
+            : undefined
+        }
+      >
+        <TopBar />
+      </div>
+      <div className="min-h-0 relative h-full flex-1 overflow-hidden">
         {/* Installation screen */}
         {actualShouldShowInstallScreen && <InstallDependencies />}
 

src/i18n/locales/ar/layout.json

@@ -484,5 +484,27 @@
   "failed-to-start-task": "Failed to start task. Please check your model configuration.",
   "workspace-session-mode-label": "Session mode",
   "workspace-session-mode-cycle-hint": "Click to switch session mode",
-  "please-select-model-first": "يرجى اختيار نموذج أولاً."
+  "please-select-model-first": "يرجى اختيار نموذج أولاً.",
+  "install-system-installing": "جارٍ تثبيت النظام…",
+  "install-starting-up": "بدء التشغيل… قد يستغرق الإطلاق الأول دقيقة.",
+  "install-ready": "جاهز",
+  "install-complete": "اكتمل التثبيت",
+  "onboarding-setup-language-title": "اختر لغتك",
+  "onboarding-setup-language-subtitle": "يمكنك تغيير هذا لاحقًا في الإعدادات.",
+  "onboarding-setup-language-system-default": "إعداد النظام الافتراضي",
+  "onboarding-setup-appearance-title": "اختر مظهرك",
+  "onboarding-setup-appearance-system": "النظام",
+  "onboarding-setup-appearance-light": "فاتح",
+  "onboarding-setup-appearance-dark": "داكن",
+  "onboarding-setup-color-theme": "ثيم الألوان",
+  "onboarding-setup-color-theme-subtitle": "يمكنك تخصيص الألوان بشكل أكبر في الإعدادات.",
+  "onboarding-setup-workspace-title": "اختر أسلوب مساحة العمل",
+  "onboarding-setup-workspace-subtitle": "نمط خلفية لمساحة العمل. يتم تحديث المعاينة مباشرةً.",
+  "onboarding-setup-bg-none": "بلا",
+  "onboarding-setup-bg-dots": "نقاط",
+  "onboarding-setup-bg-blocks": "مربعات",
+  "onboarding-setup-bg-ruled": "خطوط",
+  "onboarding-setup-bg-dotted": "منقط",
+  "onboarding-setup-bg-dashed": "متقطع",
+  "onboarding-setup-get-started": "ابدأ الآن"
 }

src/i18n/locales/de/layout.json

@@ -484,5 +484,27 @@
   "failed-to-start-task": "Failed to start task. Please check your model configuration.",
   "workspace-session-mode-label": "Session mode",
   "workspace-session-mode-cycle-hint": "Click to switch session mode",
-  "please-select-model-first": "Bitte wählen Sie zuerst ein Modell."
+  "please-select-model-first": "Bitte wählen Sie zuerst ein Modell.",
+  "install-system-installing": "System wird installiert…",
+  "install-starting-up": "Wird gestartet… Der erste Start kann eine Minute dauern.",
+  "install-ready": "Bereit",
+  "install-complete": "Installation abgeschlossen",
+  "onboarding-setup-language-title": "Sprache wählen",
+  "onboarding-setup-language-subtitle": "Du kannst dies später in den Einstellungen ändern.",
+  "onboarding-setup-language-system-default": "Systemstandard",
+  "onboarding-setup-appearance-title": "Erscheinungsbild wählen",
+  "onboarding-setup-appearance-system": "System",
+  "onboarding-setup-appearance-light": "Hell",
+  "onboarding-setup-appearance-dark": "Dunkel",
+  "onboarding-setup-color-theme": "Farbdesign",
+  "onboarding-setup-color-theme-subtitle": "Du kannst die Farben in den Einstellungen weiter anpassen.",
+  "onboarding-setup-workspace-title": "Arbeitsbereich-Stil wählen",
+  "onboarding-setup-workspace-subtitle": "Ein Hintergrundmuster für deinen Arbeitsbereich. Die Vorschau wird live aktualisiert.",
+  "onboarding-setup-bg-none": "Kein",
+  "onboarding-setup-bg-dots": "Punkte",
+  "onboarding-setup-bg-blocks": "Blöcke",
+  "onboarding-setup-bg-ruled": "Liniert",
+  "onboarding-setup-bg-dotted": "Gepunktet",
+  "onboarding-setup-bg-dashed": "Gestrichelt",
+  "onboarding-setup-get-started": "Loslegen"
 }

src/i18n/locales/en-us/layout.json

@@ -490,5 +490,27 @@
   "failed-to-start-task": "Failed to start task. Please check your model configuration.",
   "workspace-session-mode-label": "Project mode",
   "workspace-session-mode-cycle-hint": "Click to switch project mode",
-  "please-select-model-first": "Please select a model first."
+  "please-select-model-first": "Please select a model first.",
+  "install-system-installing": "System Installing…",
+  "install-starting-up": "Starting up… First launch may take a minute.",
+  "install-ready": "Ready",
+  "install-complete": "Installation complete",
+  "onboarding-setup-language-title": "Choose your language",
+  "onboarding-setup-language-subtitle": "You can change this later in Settings.",
+  "onboarding-setup-language-system-default": "System Default",
+  "onboarding-setup-appearance-title": "Choose your appearance",
+  "onboarding-setup-appearance-system": "System",
+  "onboarding-setup-appearance-light": "Light",
+  "onboarding-setup-appearance-dark": "Dark",
+  "onboarding-setup-color-theme": "Color theme",
+  "onboarding-setup-color-theme-subtitle": "You can customize colors further in Settings.",
+  "onboarding-setup-workspace-title": "Choose your workspace style",
+  "onboarding-setup-workspace-subtitle": "A background pattern for your workspace. The preview updates live.",
+  "onboarding-setup-bg-none": "None",
+  "onboarding-setup-bg-dots": "Dots",
+  "onboarding-setup-bg-blocks": "Blocks",
+  "onboarding-setup-bg-ruled": "Ruled",
+  "onboarding-setup-bg-dotted": "Dotted",
+  "onboarding-setup-bg-dashed": "Dashed",
+  "onboarding-setup-get-started": "Get Started"
 }

src/i18n/locales/es/layout.json

@@ -484,5 +484,27 @@
   "failed-to-start-task": "Failed to start task. Please check your model configuration.",
   "workspace-session-mode-label": "Session mode",
   "workspace-session-mode-cycle-hint": "Click to switch session mode",
-  "please-select-model-first": "Seleccione un modelo primero."
+  "please-select-model-first": "Seleccione un modelo primero.",
+  "install-system-installing": "Instalando el sistema…",
+  "install-starting-up": "Iniciando… El primer lanzamiento puede tardar un minuto.",
+  "install-ready": "Listo",
+  "install-complete": "Instalación completada",
+  "onboarding-setup-language-title": "Elige tu idioma",
+  "onboarding-setup-language-subtitle": "Puedes cambiar esto más tarde en Configuración.",
+  "onboarding-setup-language-system-default": "Predeterminado del sistema",
+  "onboarding-setup-appearance-title": "Elige tu apariencia",
+  "onboarding-setup-appearance-system": "Sistema",
+  "onboarding-setup-appearance-light": "Claro",
+  "onboarding-setup-appearance-dark": "Oscuro",
+  "onboarding-setup-color-theme": "Tema de color",
+  "onboarding-setup-color-theme-subtitle": "Puedes personalizar los colores en Configuración.",
+  "onboarding-setup-workspace-title": "Elige el estilo de tu espacio de trabajo",
+  "onboarding-setup-workspace-subtitle": "Un patrón de fondo para tu espacio de trabajo. La vista previa se actualiza en tiempo real.",
+  "onboarding-setup-bg-none": "Ninguno",
+  "onboarding-setup-bg-dots": "Puntos",
+  "onboarding-setup-bg-blocks": "Bloques",
+  "onboarding-setup-bg-ruled": "Rayado",
+  "onboarding-setup-bg-dotted": "Punteado",
+  "onboarding-setup-bg-dashed": "Discontinuo",
+  "onboarding-setup-get-started": "Empezar"
 }

src/i18n/locales/fr/layout.json

@@ -484,5 +484,27 @@
   "failed-to-start-task": "Failed to start task. Please check your model configuration.",
   "workspace-session-mode-label": "Session mode",
   "workspace-session-mode-cycle-hint": "Click to switch session mode",
-  "please-select-model-first": "Veuillez d'abord sélectionner un modèle."
+  "please-select-model-first": "Veuillez d'abord sélectionner un modèle.",
+  "install-system-installing": "Installation du système…",
+  "install-starting-up": "Démarrage… Le premier lancement peut prendre une minute.",
+  "install-ready": "Prêt",
+  "install-complete": "Installation terminée",
+  "onboarding-setup-language-title": "Choisissez votre langue",
+  "onboarding-setup-language-subtitle": "Vous pouvez modifier cela plus tard dans les paramètres.",
+  "onboarding-setup-language-system-default": "Par défaut du système",
+  "onboarding-setup-appearance-title": "Choisissez votre apparence",
+  "onboarding-setup-appearance-system": "Système",
+  "onboarding-setup-appearance-light": "Clair",
+  "onboarding-setup-appearance-dark": "Sombre",
+  "onboarding-setup-color-theme": "Thème de couleur",
+  "onboarding-setup-color-theme-subtitle": "Vous pouvez personnaliser davantage les couleurs dans les paramètres.",
+  "onboarding-setup-workspace-title": "Choisissez le style de votre espace de travail",
+  "onboarding-setup-workspace-subtitle": "Un motif d'arrière-plan pour votre espace de travail. L'aperçu se met à jour en temps réel.",
+  "onboarding-setup-bg-none": "Aucun",
+  "onboarding-setup-bg-dots": "Points",
+  "onboarding-setup-bg-blocks": "Blocs",
+  "onboarding-setup-bg-ruled": "Ligné",
+  "onboarding-setup-bg-dotted": "Pointillé",
+  "onboarding-setup-bg-dashed": "Tirets",
+  "onboarding-setup-get-started": "Commencer"
 }

src/i18n/locales/it/layout.json

@@ -484,5 +484,27 @@
   "failed-to-start-task": "Failed to start task. Please check your model configuration.",
   "workspace-session-mode-label": "Session mode",
   "workspace-session-mode-cycle-hint": "Click to switch session mode",
-  "please-select-model-first": "Seleziona prima un modello."
+  "please-select-model-first": "Seleziona prima un modello.",
+  "install-system-installing": "Installazione del sistema in corso…",
+  "install-starting-up": "Avvio in corso… Il primo avvio potrebbe richiedere un minuto.",
+  "install-ready": "Pronto",
+  "install-complete": "Installazione completata",
+  "onboarding-setup-language-title": "Scegli la tua lingua",
+  "onboarding-setup-language-subtitle": "Puoi modificarlo in seguito nelle Impostazioni.",
+  "onboarding-setup-language-system-default": "Impostazione predefinita del sistema",
+  "onboarding-setup-appearance-title": "Scegli il tuo aspetto",
+  "onboarding-setup-appearance-system": "Sistema",
+  "onboarding-setup-appearance-light": "Chiaro",
+  "onboarding-setup-appearance-dark": "Scuro",
+  "onboarding-setup-color-theme": "Tema colori",
+  "onboarding-setup-color-theme-subtitle": "Puoi personalizzare ulteriormente i colori nelle Impostazioni.",
+  "onboarding-setup-workspace-title": "Scegli lo stile dell'area di lavoro",
+  "onboarding-setup-workspace-subtitle": "Un motivo di sfondo per la tua area di lavoro. L'anteprima si aggiorna in tempo reale.",
+  "onboarding-setup-bg-none": "Nessuno",
+  "onboarding-setup-bg-dots": "Punti",
+  "onboarding-setup-bg-blocks": "Blocchi",
+  "onboarding-setup-bg-ruled": "Righe",
+  "onboarding-setup-bg-dotted": "Punteggiato",
+  "onboarding-setup-bg-dashed": "Tratteggiato",
+  "onboarding-setup-get-started": "Inizia"
 }

src/i18n/locales/ja/layout.json

@@ -484,5 +484,27 @@
   "failed-to-start-task": "Failed to start task. Please check your model configuration.",
   "workspace-session-mode-label": "Session mode",
   "workspace-session-mode-cycle-hint": "Click to switch session mode",
-  "please-select-model-first": "先にモデルを選択してください。"
+  "please-select-model-first": "先にモデルを選択してください。",
+  "install-system-installing": "システムをインストール中…",
+  "install-starting-up": "起動中… 初回起動には少し時間がかかります。",
+  "install-ready": "準備完了",
+  "install-complete": "インストール完了",
+  "onboarding-setup-language-title": "言語を選択",
+  "onboarding-setup-language-subtitle": "あとで設定から変更できます。",
+  "onboarding-setup-language-system-default": "システムのデフォルト",
+  "onboarding-setup-appearance-title": "外観を選択",
+  "onboarding-setup-appearance-system": "システム",
+  "onboarding-setup-appearance-light": "ライト",
+  "onboarding-setup-appearance-dark": "ダーク",
+  "onboarding-setup-color-theme": "カラーテーマ",
+  "onboarding-setup-color-theme-subtitle": "設定でさらに色をカスタマイズできます。",
+  "onboarding-setup-workspace-title": "ワークスペースのスタイルを選択",
+  "onboarding-setup-workspace-subtitle": "ワークスペースの背景パターン。選択するとリアルタイムでプレビューが更新されます。",
+  "onboarding-setup-bg-none": "なし",
+  "onboarding-setup-bg-dots": "ドット",
+  "onboarding-setup-bg-blocks": "ブロック",
+  "onboarding-setup-bg-ruled": "罫線",
+  "onboarding-setup-bg-dotted": "点線",
+  "onboarding-setup-bg-dashed": "破線",
+  "onboarding-setup-get-started": "はじめる"
 }

src/i18n/locales/ko/layout.json

@@ -484,5 +484,27 @@
   "failed-to-start-task": "Failed to start task. Please check your model configuration.",
   "workspace-session-mode-label": "Session mode",
   "workspace-session-mode-cycle-hint": "Click to switch session mode",
-  "please-select-model-first": "먼저 모델을 선택하세요."
+  "please-select-model-first": "먼저 모델을 선택하세요.",
+  "install-system-installing": "시스템 설치 중…",
+  "install-starting-up": "시작 중… 첫 실행은 잠시 시간이 걸릴 수 있습니다.",
+  "install-ready": "준비 완료",
+  "install-complete": "설치 완료",
+  "onboarding-setup-language-title": "언어 선택",
+  "onboarding-setup-language-subtitle": "나중에 설정에서 변경할 수 있습니다.",
+  "onboarding-setup-language-system-default": "시스템 기본값",
+  "onboarding-setup-appearance-title": "외관 선택",
+  "onboarding-setup-appearance-system": "시스템",
+  "onboarding-setup-appearance-light": "라이트",
+  "onboarding-setup-appearance-dark": "다크",
+  "onboarding-setup-color-theme": "색상 테마",
+  "onboarding-setup-color-theme-subtitle": "설정에서 색상을 더욱 세밀하게 조정할 수 있습니다.",
+  "onboarding-setup-workspace-title": "워크스페이스 스타일 선택",
+  "onboarding-setup-workspace-subtitle": "워크스페이스의 배경 패턴입니다. 선택 시 실시간으로 미리보기가 업데이트됩니다.",
+  "onboarding-setup-bg-none": "없음",
+  "onboarding-setup-bg-dots": "점",
+  "onboarding-setup-bg-blocks": "블록",
+  "onboarding-setup-bg-ruled": "줄",
+  "onboarding-setup-bg-dotted": "점선",
+  "onboarding-setup-bg-dashed": "파선",
+  "onboarding-setup-get-started": "시작하기"
 }

src/i18n/locales/ru/layout.json

@@ -484,5 +484,27 @@
   "failed-to-start-task": "Failed to start task. Please check your model configuration.",
   "workspace-session-mode-label": "Session mode",
   "workspace-session-mode-cycle-hint": "Click to switch session mode",
-  "please-select-model-first": "Сначала выберите модель."
+  "please-select-model-first": "Сначала выберите модель.",
+  "install-system-installing": "Установка системы…",
+  "install-starting-up": "Запуск… Первый запуск может занять минуту.",
+  "install-ready": "Готово",
+  "install-complete": "Установка завершена",
+  "onboarding-setup-language-title": "Выберите язык",
+  "onboarding-setup-language-subtitle": "Вы можете изменить это позже в настройках.",
+  "onboarding-setup-language-system-default": "Системный язык",
+  "onboarding-setup-appearance-title": "Выберите внешний вид",
+  "onboarding-setup-appearance-system": "Система",
+  "onboarding-setup-appearance-light": "Светлый",
+  "onboarding-setup-appearance-dark": "Тёмный",
+  "onboarding-setup-color-theme": "Цветовая тема",
+  "onboarding-setup-color-theme-subtitle": "Дополнительно настроить цвета можно в настройках.",
+  "onboarding-setup-workspace-title": "Выберите стиль рабочего пространства",
+  "onboarding-setup-workspace-subtitle": "Фоновый узор рабочего пространства. Предварительный просмотр обновляется в реальном времени.",
+  "onboarding-setup-bg-none": "Нет",
+  "onboarding-setup-bg-dots": "Точки",
+  "onboarding-setup-bg-blocks": "Блоки",
+  "onboarding-setup-bg-ruled": "Линии",
+  "onboarding-setup-bg-dotted": "Пунктир",
+  "onboarding-setup-bg-dashed": "Штрихи",
+  "onboarding-setup-get-started": "Начать"
 }

src/i18n/locales/zh-Hans/layout.json

@@ -484,5 +484,27 @@
   "failed-to-start-task": "启动任务失败，请检查模型配置。",
   "workspace-session-mode-label": "项目模式",
   "workspace-session-mode-cycle-hint": "点击切换项目模式",
-  "please-select-model-first": "请先选择模型。"
+  "please-select-model-first": "请先选择模型。",
+  "install-system-installing": "正在安装系统…",
+  "install-starting-up": "正在启动… 首次启动可能需要一点时间。",
+  "install-ready": "就绪",
+  "install-complete": "安装完成",
+  "onboarding-setup-language-title": "选择语言",
+  "onboarding-setup-language-subtitle": "您可以稍后在设置中更改。",
+  "onboarding-setup-language-system-default": "系统默认",
+  "onboarding-setup-appearance-title": "选择外观",
+  "onboarding-setup-appearance-system": "系统",
+  "onboarding-setup-appearance-light": "浅色",
+  "onboarding-setup-appearance-dark": "深色",
+  "onboarding-setup-color-theme": "颜色主题",
+  "onboarding-setup-color-theme-subtitle": "您可以在设置中进一步自定义颜色。",
+  "onboarding-setup-workspace-title": "选择工作区风格",
+  "onboarding-setup-workspace-subtitle": "为工作区选择背景图案，选中后实时预览。",
+  "onboarding-setup-bg-none": "无",
+  "onboarding-setup-bg-dots": "圆点",
+  "onboarding-setup-bg-blocks": "方格",
+  "onboarding-setup-bg-ruled": "横线",
+  "onboarding-setup-bg-dotted": "点线",
+  "onboarding-setup-bg-dashed": "虚线",
+  "onboarding-setup-get-started": "开始使用"
 }

src/i18n/locales/zh-Hant/layout.json

@@ -484,5 +484,27 @@
   "failed-to-start-task": "啟動任務失敗，請檢查模型設定。",
   "workspace-session-mode-label": "專案模式",
   "workspace-session-mode-cycle-hint": "點擊切換專案模式",
-  "please-select-model-first": "請先選擇模型。"
+  "please-select-model-first": "請先選擇模型。",
+  "install-system-installing": "正在安裝系統…",
+  "install-starting-up": "正在啟動… 首次啟動可能需要一點時間。",
+  "install-ready": "就緒",
+  "install-complete": "安裝完成",
+  "onboarding-setup-language-title": "選擇語言",
+  "onboarding-setup-language-subtitle": "您可以稍後在設定中更改。",
+  "onboarding-setup-language-system-default": "系統預設",
+  "onboarding-setup-appearance-title": "選擇外觀",
+  "onboarding-setup-appearance-system": "系統",
+  "onboarding-setup-appearance-light": "淺色",
+  "onboarding-setup-appearance-dark": "深色",
+  "onboarding-setup-color-theme": "色彩主題",
+  "onboarding-setup-color-theme-subtitle": "您可以在設定中進一步自訂顏色。",
+  "onboarding-setup-workspace-title": "選擇工作區風格",
+  "onboarding-setup-workspace-subtitle": "為工作區選擇背景圖案，選取後即時預覽。",
+  "onboarding-setup-bg-none": "無",
+  "onboarding-setup-bg-dots": "圓點",
+  "onboarding-setup-bg-blocks": "方格",
+  "onboarding-setup-bg-ruled": "橫線",
+  "onboarding-setup-bg-dotted": "點線",
+  "onboarding-setup-bg-dashed": "虛線",
+  "onboarding-setup-get-started": "開始使用"
 }

src/store/authStore.ts

@@ -76,6 +76,7 @@ interface AuthState {
   themeContrast: number;
   language: string;
   isFirstLaunch: boolean;
+  onboardingCompleted: boolean;
   modelType: ModelType;
   cloud_model_type: CloudModelType;
   /**
@@ -124,6 +125,7 @@ interface AuthState {
   setCloudModelType: (cloud_model_type: CloudModelType) => void;
   setHasModelConfigured: (hasModelConfigured: boolean) => void;
   setIsFirstLaunch: (isFirstLaunch: boolean) => void;
+  setOnboardingCompleted: (completed: boolean) => void;
   setPreferredIDE: (ide: PreferredIDE) => void;
   setWorkspaceMainBackground: (value: WorkspaceMainBackground) => void;
 
@@ -188,6 +190,7 @@ const authStore = create<AuthState>()(
       themeContrast: getRecommendedContrast(),
       language: 'system',
       isFirstLaunch: true,
+      onboardingCompleted: false,
       modelType: 'cloud',
       cloud_model_type: getRandomDefaultModel(),
       hasModelConfigured: false,
@@ -290,6 +293,9 @@ const authStore = create<AuthState>()(
 
       setIsFirstLaunch: (isFirstLaunch) => set({ isFirstLaunch }),
 
+      setOnboardingCompleted: (onboardingCompleted) =>
+        set({ onboardingCompleted }),
+
       setPreferredIDE: (preferredIDE) => set({ preferredIDE }),
 
       setWorkspaceMainBackground: (workspaceMainBackground) =>
@@ -340,7 +346,7 @@ const authStore = create<AuthState>()(
     }),
     {
       name: 'auth-storage',
-      version: 7,
+      version: 8,
       migrate: (persistedState, _version) => {
         const s = persistedState as
           | {
@@ -423,6 +429,7 @@ const authStore = create<AuthState>()(
         cloud_model_type: state.cloud_model_type,
         initState: state.initState,
         isFirstLaunch: state.isFirstLaunch,
+        onboardingCompleted: state.onboardingCompleted,
         preferredIDE: state.preferredIDE,
         workspaceMainBackground: state.workspaceMainBackground,
         localProxyValue: state.localProxyValue,