diff --git a/.claude/skills/roast-skill b/.claude/skills/roast-skill
new file mode 160000
index 00000000..f2302d23
--- /dev/null
+++ b/.claude/skills/roast-skill
@@ -0,0 +1 @@
+Subproject commit f2302d2371fbaf16adb46363a89f9f549157693d
diff --git a/.cursor/hooks.json b/.cursor/hooks.json
new file mode 100644
index 00000000..ccbb5227
--- /dev/null
+++ b/.cursor/hooks.json
@@ -0,0 +1,10 @@
+{
+  "version": 1,
+  "hooks": {
+    "afterAgentResponse": [
+      {
+        "command": ".cursor/hooks/say-complete.sh"
+      }
+    ]
+  }
+}
diff --git a/.cursor/hooks/say-complete.sh b/.cursor/hooks/say-complete.sh
new file mode 100755
index 00000000..e613a279
--- /dev/null
+++ b/.cursor/hooks/say-complete.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# Read and discard hook payload from stdin.
+cat >/dev/null
+
+if command -v say >/dev/null 2>&1; then
+  say "已完成" >/dev/null 2>&1 &
+fi
+
+printf '{}\n'
diff --git a/apps/demo/src/app/app-error-boundary.tsx b/apps/demo/src/app/app-error-boundary.tsx
new file mode 100644
index 00000000..3221187c
--- /dev/null
+++ b/apps/demo/src/app/app-error-boundary.tsx
@@ -0,0 +1,49 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+
+type Props = { children: ReactNode };
+
+type State = { error: Error | null };
+
+export class AppErrorBoundary extends Component<Props, State> {
+  state: State = { error: null };
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error("Demo app error:", error, info.componentStack);
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div
+          style={{
+            padding: 24,
+            fontFamily: "system-ui, sans-serif",
+            maxWidth: 720,
+          }}
+        >
+          <h1 style={{ fontSize: 20, marginBottom: 12 }}>页面加载出错</h1>
+          <p style={{ color: "#666", marginBottom: 16 }}>
+            请打开开发者工具（Console）查看完整堆栈，或把下方错误信息发给开发者。
+          </p>
+          <pre
+            style={{
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+              background: "#f5f5f5",
+              padding: 12,
+              borderRadius: 8,
+              fontSize: 13,
+            }}
+          >
+            {this.state.error.message}
+          </pre>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
diff --git a/apps/slark/src/renderer/src/components/onboarding/ConnectRuntimeStep.tsx b/apps/slark/src/renderer/src/components/onboarding/ConnectRuntimeStep.tsx
deleted file mode 100644
index 56e9c88a..00000000
--- a/apps/slark/src/renderer/src/components/onboarding/ConnectRuntimeStep.tsx
+++ /dev/null
@@ -1,403 +0,0 @@
-import { Button, cn } from "@nexu-design/ui-web";
-import {
-  AlertTriangle,
-  ArrowRight,
-  Check,
-  ExternalLink,
-  Loader2,
-  RefreshCw,
-  Search,
-  X,
-} from "lucide-react";
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-
-import { useRuntimesStore } from "@/stores/runtimes";
-import type { Runtime } from "@/types";
-
-const INSTALL_GUIDES: {
-  type: string;
-  name: string;
-  desc: string;
-  install: string;
-  docsUrl: string;
-  docsLabel: string;
-}[] = [
-  {
-    type: "claude-code",
-    name: "Claude Code",
-    desc: "Anthropic's coding agent",
-    install: "npm install -g @anthropic-ai/claude-code",
-    docsUrl: "https://docs.claude.com/en/docs/claude-code/overview",
-    docsLabel: "docs.claude.com",
-  },
-  {
-    type: "cursor",
-    name: "Cursor",
-    desc: "AI-first code editor",
-    install: "Download the desktop app",
-    docsUrl: "https://docs.cursor.com/get-started/installation",
-    docsLabel: "docs.cursor.com",
-  },
-  {
-    type: "opencode",
-    name: "OpenCode",
-    desc: "Open-source coding agent",
-    install: "npm install -g opencode-ai",
-    docsUrl: "https://opencode.ai/docs",
-    docsLabel: "opencode.ai/docs",
-  },
-  {
-    type: "codex",
-    name: "Codex",
-    desc: "OpenAI coding agent",
-    install: "npm install -g @openai/codex",
-    docsUrl: "https://github.com/openai/codex#installation",
-    docsLabel: "github.com/openai/codex",
-  },
-  {
-    type: "gemini-cli",
-    name: "Gemini CLI",
-    desc: "Google's AI coding agent",
-    install: "npm install -g @google/gemini-cli",
-    docsUrl: "https://github.com/google-gemini/gemini-cli#quickstart",
-    docsLabel: "github.com/google-gemini/gemini-cli",
-  },
-  {
-    type: "hermes",
-    name: "Hermes",
-    desc: "Nous Research agent",
-    install: "See repo for install steps",
-    docsUrl: "https://github.com/nousresearch/hermes-agent",
-    docsLabel: "github.com/nousresearch/hermes-agent",
-  },
-  {
-    type: "openclaw",
-    name: "OpenClaw",
-    desc: "Multi-agent orchestrator",
-    install: "npm install -g openclaw",
-    docsUrl: "https://github.com/openclaw/openclaw#install",
-    docsLabel: "github.com/openclaw",
-  },
-  {
-    type: "pi",
-    name: "Pi",
-    desc: "Conversational AI assistant",
-    install: "brew install pi-cli",
-    docsUrl: "https://pi.ai/docs/cli",
-    docsLabel: "pi.ai/docs",
-  },
-];
-
-interface DetectedRuntime {
-  type: string;
-  name: string;
-  desc: string;
-  detected: boolean;
-  version?: string;
-  path?: string;
-  error?: string;
-}
-
-const RUNTIME_BRANDS: Record<string, { label: string; color: string }> = {
-  "claude-code": { label: ">_", color: "#B45309" },
-  cursor: { label: "▸", color: "#171717" },
-  opencode: { label: "</>", color: "#059669" },
-  codex: { label: "◎", color: "#0369A1" },
-  "gemini-cli": { label: "✦", color: "#4285F4" },
-  hermes: { label: "H", color: "#EA580C" },
-  openclaw: { label: "⊞", color: "#7C3AED" },
-  pi: { label: "π", color: "#DB2777" },
-};
-
-const SCAN_DURATION = 3500;
-const STAGGER_DELAY = 400;
-
-export function ConnectRuntimeStep(): React.ReactElement {
-  const navigate = useNavigate();
-  const setGlobalRuntimes = useRuntimesStore((s) => s.setRuntimes);
-  const devSimulateNone = useRuntimesStore((s) => s.devSimulateNone);
-  const [phase, setPhase] = useState<"scanning" | "done">("scanning");
-  const [scanProgress, setScanProgress] = useState(0);
-  const [runtimes, setRuntimes] = useState<DetectedRuntime[]>([
-    { type: "claude-code", name: "Claude Code", desc: "Anthropic's coding agent", detected: false },
-    { type: "cursor", name: "Cursor", desc: "AI-first code editor", detected: false },
-    { type: "opencode", name: "OpenCode", desc: "Open-source coding agent", detected: false },
-    { type: "codex", name: "Codex", desc: "OpenAI coding agent", detected: false },
-    { type: "gemini-cli", name: "Gemini CLI", desc: "Google's AI coding agent", detected: false },
-    { type: "hermes", name: "Hermes", desc: "Local LLM runtime", detected: false },
-    { type: "openclaw", name: "OpenClaw", desc: "Multi-agent orchestrator", detected: false },
-    { type: "pi", name: "Pi", desc: "Conversational AI assistant", detected: false },
-  ]);
-  const [selected, setSelected] = useState<Set<string>>(new Set());
-
-  useEffect(() => {
-    const start = Date.now();
-    const progressInterval = setInterval(() => {
-      const elapsed = Date.now() - start;
-      setScanProgress(Math.min(elapsed / SCAN_DURATION, 1));
-    }, 50);
-
-    const mockResults: { index: number; version: string; path: string; error?: string }[] =
-      devSimulateNone
-        ? []
-        : [
-            { index: 0, version: "1.0.12", path: "/usr/local/bin/claude" },
-            { index: 2, version: "0.5.3", path: "/usr/local/bin/opencode" },
-            { index: 4, version: "0.1.0", path: "/usr/local/bin/gemini" },
-            {
-              index: 6,
-              version: "0.2.1",
-              path: "/usr/local/bin/openclaw",
-              error: "Requires update (min v0.3.0)",
-            },
-            { index: 7, version: "1.3.0", path: "/usr/local/bin/pi", error: "Auth token expired" },
-          ];
-
-    let revealedCount = 0;
-    let finished = false;
-    const finishScan = (): void => {
-      if (finished) return;
-      finished = true;
-      setPhase("done");
-      clearInterval(progressInterval);
-      setScanProgress(1);
-    };
-
-    const timers = mockResults.map(({ index, version, path, error }, i) =>
-      setTimeout(
-        () => {
-          setRuntimes((prev) =>
-            prev.map((rt, j) =>
-              j === index ? { ...rt, detected: true, version, path, error } : rt,
-            ),
-          );
-          revealedCount++;
-          if (revealedCount === mockResults.length) {
-            setTimeout(finishScan, 400);
-          }
-        },
-        STAGGER_DELAY * (i + 2),
-      ),
-    );
-
-    const doneTimer = setTimeout(finishScan, SCAN_DURATION);
-
-    return () => {
-      clearInterval(progressInterval);
-      timers.forEach(clearTimeout);
-      clearTimeout(doneTimer);
-    };
-  }, [devSimulateNone]);
-
-  useEffect(() => {
-    if (phase === "done") {
-      const workingTypes = runtimes.filter((r) => r.detected && !r.error).map((r) => r.type);
-      setSelected(new Set(workingTypes));
-    }
-  }, [phase, runtimes]);
-
-  const toggleSelect = (type: string): void => {
-    const rt = runtimes.find((r) => r.type === type);
-    if (!rt?.detected || rt.error) return;
-    setSelected((prev) => {
-      const next = new Set(prev);
-      if (next.has(type)) next.delete(type);
-      else next.add(type);
-      return next;
-    });
-  };
-
-  const errorCount = runtimes.filter((r) => r.detected && r.error).length;
-  const detectedCount = runtimes.filter((r) => r.detected).length;
-  const showTutorial = phase === "done" && detectedCount === 0;
-
-  return (
-    <div className={cn("flex flex-col items-center pt-6", showTutorial ? "gap-4" : "gap-6 pt-8")}>
-      <div className="text-center max-w-lg">
-        <h2 className="text-2xl font-semibold">
-          {phase === "scanning"
-            ? "Detecting Runtimes..."
-            : showTutorial
-              ? "No Runtimes Found"
-              : "Runtimes Detected"}
-        </h2>
-        <p className="text-muted-foreground mt-2">
-          {phase === "scanning"
-            ? "Scanning your system for installed AI runtimes"
-            : showTutorial
-              ? "Install a runtime below, then rescan."
-              : `Found ${detectedCount} runtime${detectedCount !== 1 ? "s" : ""} on your system${errorCount > 0 ? ` · ${errorCount} need attention` : ""}`}
-        </p>
-        {!showTutorial && (
-          <p className="text-xs text-muted-foreground/70 mt-3 leading-relaxed">
-            Runtimes power your Agents — each agent connects to a runtime to execute tasks.
-            <br />
-            Once set up, you can @mention agents in chat to assign work, just like messaging a
-            teammate.
-          </p>
-        )}
-      </div>
-
-      {!showTutorial && (
-        <div className="w-full max-w-2xl h-10">
-          {phase === "scanning" && (
-            <>
-              <div className="flex items-center gap-2 mb-3">
-                <Search className="h-4 w-4 text-muted-foreground animate-pulse" />
-                <span className="text-sm text-muted-foreground">
-                  Checking PATH and common install locations...
-                </span>
-              </div>
-              <div className="h-1 w-full rounded-full bg-secondary overflow-hidden">
-                <div
-                  className="h-full bg-foreground/60 rounded-full transition-all duration-100"
-                  style={{ width: `${scanProgress * 100}%` }}
-                />
-              </div>
-            </>
-          )}
-        </div>
-      )}
-
-      {showTutorial && (
-        <div className="grid grid-cols-4 gap-2.5 w-full max-w-2xl">
-          {INSTALL_GUIDES.map((g) => {
-            const brand = RUNTIME_BRANDS[g.type];
-            return (
-              <a
-                key={g.type}
-                href={g.docsUrl}
-                target="_blank"
-                rel="noreferrer"
-                className="group flex flex-col gap-1.5 p-3 rounded-xl border border-border hover:border-muted-foreground/50 hover:bg-accent/40 transition-all text-left"
-              >
-                <div className="flex items-center justify-between w-full">
-                  <div
-                    className="h-6 w-6 rounded-md flex items-center justify-center text-[10px] font-bold text-white shrink-0"
-                    style={{ backgroundColor: brand?.color ?? "#666" }}
-                  >
-                    {brand?.label ?? "?"}
-                  </div>
-                  <ExternalLink className="h-3 w-3 text-muted-foreground opacity-60 group-hover:opacity-100 transition-opacity" />
-                </div>
-                <div className="font-medium text-sm leading-tight">{g.name}</div>
-                <div className="text-[11px] text-muted-foreground truncate group-hover:text-foreground/80 transition-colors">
-                  {g.docsLabel}
-                </div>
-              </a>
-            );
-          })}
-        </div>
-      )}
-
-      {!showTutorial && (
-        <div className="grid grid-cols-4 gap-3 w-full max-w-2xl">
-          {runtimes.map(({ type, name, desc, detected, version, path, error }) => {
-            const isSelected = selected.has(type);
-            const isScanning = phase === "scanning" && !detected;
-            const isError = detected && !!error;
-            const isWorking = detected && !error;
-            const brand = RUNTIME_BRANDS[type];
-            return (
-              <Button
-                type="button"
-                key={type}
-                onClick={() => phase === "done" && toggleSelect(type)}
-                disabled={phase === "scanning" || !isWorking}
-                variant="ghost"
-                className={cn(
-                  "flex flex-col items-start gap-2 p-4 rounded-xl border transition-all text-left relative min-h-[120px]",
-                  isWorking && isSelected
-                    ? "border-foreground bg-accent"
-                    : isWorking && !isSelected
-                      ? "border-border hover:border-muted-foreground/50"
-                      : isError
-                        ? "border-amber-500/40 bg-amber-500/5 opacity-80"
-                        : "border-border/50 opacity-50",
-                )}
-              >
-                <div className="flex items-center justify-between w-full">
-                  <div
-                    className="h-6 w-6 rounded-md flex items-center justify-center text-[10px] font-bold text-white shrink-0"
-                    style={{ backgroundColor: brand?.color ?? "#666" }}
-                  >
-                    {brand?.label ?? "?"}
-                  </div>
-                  {isWorking && <Check className="h-3 w-3 text-nexu-online" />}
-                  {isError && <AlertTriangle className="h-3 w-3 text-amber-500" />}
-                  {phase === "done" && !detected && <X className="h-3 w-3 text-muted-foreground" />}
-                  {isScanning && <Loader2 className="h-3 w-3 text-muted-foreground animate-spin" />}
-                </div>
-                <div>
-                  <div className="font-medium text-sm">{name}</div>
-                  <div className="text-xs text-muted-foreground">{desc}</div>
-                </div>
-                {isWorking && (
-                  <div className="text-[11px] text-muted-foreground truncate w-full">
-                    v{version} · {path}
-                  </div>
-                )}
-                {isError && (
-                  <div className="text-[11px] text-amber-500 w-full leading-tight">
-                    v{version} · {error}
-                  </div>
-                )}
-                {phase === "done" && !detected && (
-                  <div className="text-[11px] text-muted-foreground">Not found</div>
-                )}
-              </Button>
-            );
-          })}
-        </div>
-      )}
-
-      <div className="flex items-center gap-3 mt-4">
-        <Button
-          type="button"
-          onClick={() => navigate("/onboarding/agent")}
-          variant="ghost"
-          className="h-10 px-5 rounded-lg text-sm text-muted-foreground hover:text-foreground transition-colors"
-        >
-          Skip for now
-        </Button>
-        {showTutorial ? (
-          <Button
-            type="button"
-            onClick={() => window.location.reload()}
-            variant="default"
-            className="flex items-center gap-2 h-10 px-5 rounded-lg bg-foreground text-background text-sm font-medium hover:bg-foreground/90 transition-colors"
-          >
-            <RefreshCw className="h-4 w-4" />
-            Rescan
-          </Button>
-        ) : (
-          <Button
-            type="button"
-            onClick={() => {
-              const selectedRuntimes: Runtime[] = runtimes
-                .filter((r) => r.detected && !r.error && selected.has(r.type))
-                .map((r) => ({
-                  id: `rt-${r.type}`,
-                  name: r.name,
-                  type: r.type as Runtime["type"],
-                  status: "connected" as const,
-                  version: r.version,
-                  config: r.path ? { path: r.path } : {},
-                  ownerId: "u-1",
-                }));
-              setGlobalRuntimes(selectedRuntimes);
-              navigate("/onboarding/agent");
-            }}
-            disabled={phase === "scanning" || selected.size === 0}
-            variant="default"
-            className="flex items-center gap-2 h-10 px-5 rounded-lg bg-foreground text-background text-sm font-medium disabled:opacity-40 disabled:cursor-not-allowed hover:bg-foreground/90 transition-colors"
-          >
-            Continue with {selected.size} runtime{selected.size !== 1 ? "s" : ""}
-            <ArrowRight className="h-4 w-4" />
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/apps/slark/src/renderer/src/components/onboarding/CreateAgentStep.tsx b/apps/slark/src/renderer/src/components/onboarding/CreateAgentStep.tsx
deleted file mode 100644
index c7f8aa20..00000000
--- a/apps/slark/src/renderer/src/components/onboarding/CreateAgentStep.tsx
+++ /dev/null
@@ -1,298 +0,0 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { ArrowLeft, Rocket, Plus, Search } from "lucide-react";
-import {
-  Button,
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  FormField,
-  FormFieldControl,
-  Input,
-  InteractiveRow,
-  InteractiveRowContent,
-  InteractiveRowLeading,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Textarea,
-  cn,
-} from "@nexu-design/ui-web";
-import { useWorkspaceStore } from "@/stores/workspace";
-import { useAgentsStore } from "@/stores/agents";
-import { useRuntimesStore } from "@/stores/runtimes";
-import { mockAgentTemplates, mockRuntimes } from "@/mock/data";
-import type { AgentTemplate } from "@/types";
-
-type Phase = "templates" | "settings";
-
-export function CreateAgentStep(): React.ReactElement {
-  const navigate = useNavigate();
-  const completeOnboarding = useWorkspaceStore((s) => s.completeOnboarding);
-  const setPendingWelcomeAgent = useWorkspaceStore((s) => s.setPendingWelcomeAgent);
-  const addAgent = useAgentsStore((s) => s.addAgent);
-  const runtimes = useRuntimesStore((s) => s.runtimes);
-  const setGlobalRuntimes = useRuntimesStore((s) => s.setRuntimes);
-
-  const [phase, setPhase] = useState<Phase>("templates");
-  const [selectedTemplate, setSelectedTemplate] = useState<AgentTemplate | null>(null);
-
-  const [agentName, setAgentName] = useState("");
-  const [description, setDescription] = useState("");
-  const [runtimeId, setRuntimeId] = useState<string | null>(null);
-  const [showDiscardDialog, setShowDiscardDialog] = useState(false);
-
-  const handleSelectTemplate = (tpl: AgentTemplate): void => {
-    setSelectedTemplate(tpl);
-    setAgentName(tpl.name);
-    setDescription(tpl.description);
-    const firstConnected = runtimes.find((r) => r.status === "connected");
-    if (firstConnected) setRuntimeId(firstConnected.id);
-    setPhase("settings");
-  };
-
-  const handleSkip = (): void => {
-    completeOnboarding();
-    navigate("/chat/ch-welcome");
-  };
-
-  const handleBlankAgent = (): void => {
-    setSelectedTemplate(null);
-    setAgentName("");
-    setDescription("");
-    const firstConnected = runtimes.find((r) => r.status === "connected");
-    if (firstConnected) setRuntimeId(firstConnected.id);
-    setPhase("settings");
-  };
-
-  const handleBackToTemplates = (): void => {
-    const nameChanged = selectedTemplate ? agentName !== selectedTemplate.name : agentName !== "";
-    const descChanged = selectedTemplate
-      ? description !== selectedTemplate.description
-      : description !== "";
-    if (nameChanged || descChanged) {
-      setShowDiscardDialog(true);
-      return;
-    }
-    setPhase("templates");
-  };
-
-  const handleDetectRuntimes = (): void => {
-    const connected = mockRuntimes.filter((r) => r.status === "connected");
-    setGlobalRuntimes(connected);
-    if (connected.length > 0) setRuntimeId(connected[0].id);
-  };
-
-  const handleCreate = (): void => {
-    if (!agentName.trim()) return;
-    const agentId = `a-${Date.now()}`;
-    addAgent({
-      id: agentId,
-      name: agentName.trim(),
-      avatar:
-        selectedTemplate?.avatar ??
-        `https://api.dicebear.com/9.x/bottts/svg?seed=${agentId}&backgroundColor=6366f1`,
-      description: description.trim(),
-      systemPrompt:
-        selectedTemplate?.defaultPrompt ?? `You are ${agentName.trim()}, a helpful AI assistant.`,
-      status: "online",
-      skills: [],
-      runtimeId,
-      templateId: selectedTemplate?.id ?? null,
-      createdBy: "u-1",
-      createdAt: Date.now(),
-    });
-    setPendingWelcomeAgent(agentId);
-    completeOnboarding();
-    navigate("/chat/ch-welcome");
-  };
-
-  const connectedRuntimes = runtimes.filter((r) => r.status === "connected");
-
-  if (phase === "templates") {
-    return (
-      <div className="flex flex-col items-center gap-6 pt-8">
-        <div className="text-center">
-          <h2 className="text-2xl font-semibold">Create your first Agent</h2>
-          <p className="text-muted-foreground mt-2">Choose a template to get started</p>
-        </div>
-        <div className="grid grid-cols-2 gap-3 w-full">
-          {mockAgentTemplates.map((tpl) => (
-            <InteractiveRow
-              key={tpl.id}
-              onClick={() => handleSelectTemplate(tpl)}
-              tone="subtle"
-              className="items-start rounded-xl border border-border px-3 py-3"
-            >
-              <InteractiveRowLeading>
-                <img src={tpl.avatar} alt="" className="h-10 w-10 rounded-lg shrink-0" />
-              </InteractiveRowLeading>
-              <InteractiveRowContent>
-                <div className="font-medium text-sm">{tpl.name}</div>
-                <div className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
-                  {tpl.description}
-                </div>
-              </InteractiveRowContent>
-            </InteractiveRow>
-          ))}
-        </div>
-        <Button
-          onClick={handleBlankAgent}
-          variant="outline"
-          className="h-11 w-full border-dashed text-muted-foreground"
-          leadingIcon={<Plus className="h-4 w-4" />}
-        >
-          <span className="text-sm font-medium">Start from scratch</span>
-        </Button>
-        <Button onClick={handleSkip} variant="ghost" className="mt-2">
-          Skip for now
-        </Button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col items-center gap-6 pt-8">
-      <div className="text-center">
-        <h2 className="text-2xl font-semibold">Customize your Agent</h2>
-        <p className="text-muted-foreground mt-2">Set a name, description, and connect a runtime</p>
-      </div>
-
-      <div className="w-full max-w-md space-y-5">
-        {selectedTemplate && (
-          <div className="flex items-center gap-3 p-3 rounded-xl bg-accent/50 border border-border">
-            <img src={selectedTemplate.avatar} alt="" className="h-10 w-10 rounded-lg shrink-0" />
-            <div className="min-w-0 flex-1">
-              <div className="text-xs text-muted-foreground">Based on template</div>
-              <div className="text-sm font-medium">{selectedTemplate.name}</div>
-            </div>
-          </div>
-        )}
-
-        <FormField label="Agent Name">
-          <FormFieldControl>
-            <Input
-              type="text"
-              value={agentName}
-              onChange={(e) => setAgentName(e.target.value)}
-              placeholder="e.g. CodeBot"
-              autoFocus
-            />
-          </FormFieldControl>
-        </FormField>
-
-        <FormField label="Description">
-          <FormFieldControl>
-            <Textarea
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              placeholder="What does this agent do?"
-              rows={3}
-            />
-          </FormFieldControl>
-        </FormField>
-
-        <FormField label="Runtime">
-          <FormFieldControl>
-            <Select
-              value={runtimeId ?? undefined}
-              onValueChange={(value) => {
-                setRuntimeId(value);
-              }}
-              disabled={connectedRuntimes.length === 0}
-            >
-              <SelectTrigger>
-                <SelectValue
-                  placeholder={
-                    connectedRuntimes.length > 0 ? "Select a runtime" : "No runtime connected"
-                  }
-                />
-              </SelectTrigger>
-              <SelectContent>
-                {connectedRuntimes.map((rt) => (
-                  <SelectItem key={rt.id} value={rt.id}>
-                    <span className="flex w-full items-center gap-2">
-                      <span
-                        className={cn(
-                          "h-2 w-2 rounded-full shrink-0",
-                          rt.status === "connected" ? "bg-nexu-online" : "bg-nexu-offline",
-                        )}
-                      />
-                      <span className="truncate">{rt.name}</span>
-                      {rt.version ? (
-                        <span className="text-xs text-muted-foreground">v{rt.version}</span>
-                      ) : null}
-                    </span>
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </FormFieldControl>
-          {connectedRuntimes.length === 0 && (
-            <p className="mt-1.5 flex items-center gap-1.5 text-[11px] text-muted-foreground">
-              No runtimes detected.
-              <Button
-                onClick={handleDetectRuntimes}
-                type="button"
-                variant="link"
-                size="inline"
-                className="h-auto text-foreground"
-              >
-                <Search className="h-3 w-3" />
-                Scan now
-              </Button>
-            </p>
-          )}
-        </FormField>
-      </div>
-
-      <div className="flex items-center gap-3 mt-4">
-        <Button
-          onClick={handleBackToTemplates}
-          variant="ghost"
-          leadingIcon={<ArrowLeft className="h-4 w-4" />}
-        >
-          Back to templates
-        </Button>
-        <Button
-          onClick={handleCreate}
-          disabled={!agentName.trim()}
-          leadingIcon={<Rocket className="h-4 w-4" />}
-        >
-          Create Agent
-        </Button>
-      </div>
-
-      <Dialog open={showDiscardDialog} onOpenChange={setShowDiscardDialog}>
-        <DialogContent size="sm">
-          <DialogHeader>
-            <DialogTitle>Discard changes?</DialogTitle>
-            <DialogDescription>
-              Your edits to this agent draft will be lost if you go back to templates.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogBody />
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setShowDiscardDialog(false)}>
-              Keep editing
-            </Button>
-            <Button
-              onClick={() => {
-                setShowDiscardDialog(false);
-                setPhase("templates");
-              }}
-            >
-              Discard and go back
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}
diff --git a/apps/slark/src/renderer/src/components/onboarding/CreateWorkspaceStep.tsx b/apps/slark/src/renderer/src/components/onboarding/CreateWorkspaceStep.tsx
index 1856b9f1..e65392ac 100644
--- a/apps/slark/src/renderer/src/components/onboarding/CreateWorkspaceStep.tsx
+++ b/apps/slark/src/renderer/src/components/onboarding/CreateWorkspaceStep.tsx
@@ -1,310 +1,232 @@
-import { useState, useRef, useMemo } from "react";
-import { useNavigate } from "react-router-dom";
-import { ArrowRight, Building2, Mail, Send, Check, Link2, Copy, LogIn } from "lucide-react";
 import {
-  Badge,
   Button,
   FormField,
   FormFieldControl,
   Input,
-  Tabs,
-  TabsList,
-  TabsTrigger,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  TextLink,
 } from "@nexu-design/ui-web";
-import { useT } from "@/i18n";
+import { ArrowRight, Building2, Check, ChevronDown, Loader2, LogIn } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { mockAgentTemplates, mockRuntimes } from "@/mock/data";
+import { useAgentsStore } from "@/stores/agents";
+import { useRuntimesStore } from "@/stores/runtimes";
 import { useWorkspaceStore } from "@/stores/workspace";
+import type { Agent, Runtime } from "@/types";
 
-type Mode = "create" | "join";
+const SCAN_DURATION_MS = 600;
 
 export function CreateWorkspaceStep(): React.ReactElement {
-  const t = useT();
   const navigate = useNavigate();
   const setWorkspace = useWorkspaceStore((s) => s.setWorkspace);
   const completeOnboarding = useWorkspaceStore((s) => s.completeOnboarding);
+  const setPendingWelcomeAgent = useWorkspaceStore((s) => s.setPendingWelcomeAgent);
+  const setGlobalRuntimes = useRuntimesStore((s) => s.setRuntimes);
+  const globalRuntimes = useRuntimesStore((s) => s.runtimes);
+  const devSimulateNone = useRuntimesStore((s) => s.devSimulateNone);
+  const addAgent = useAgentsStore((s) => s.addAgent);
 
-  const [mode, setMode] = useState<Mode>("create");
-
-  // Create mode state
   const [name, setName] = useState("");
-  const [invitedEmails, setInvitedEmails] = useState<string[]>([]);
-  const [emailInput, setEmailInput] = useState("");
-  const [emailError, setEmailError] = useState("");
-  const [linkCopied, setLinkCopied] = useState(false);
-  const emailRef = useRef<HTMLInputElement>(null);
-  const errorTimerRef = useRef<ReturnType<typeof setTimeout>>(null);
-  const copyTimerRef = useRef<ReturnType<typeof setTimeout>>(null);
-
-  // Join mode state
-  const [inviteLink, setInviteLink] = useState("");
-  const [joinError, setJoinError] = useState("");
-  const [joining, setJoining] = useState(false);
-
-  const inviteToken = useMemo(
-    () => Math.random().toString(36).slice(2, 10) + Date.now().toString(36),
-    [],
-  );
-  const inviteLinkUrl = `${window.location.origin}/invite/${inviteToken}`;
-
-  const isValidEmail = (email: string): boolean => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-
-  const showError = (msg: string): void => {
-    setEmailError(msg);
-    if (errorTimerRef.current) clearTimeout(errorTimerRef.current);
-    errorTimerRef.current = setTimeout(() => setEmailError(""), 3000);
-  };
-
-  const addEmail = (): void => {
-    const email = emailInput.trim();
-    if (!email) return;
-    if (!isValidEmail(email)) {
-      showError(t("workspace.invalidEmail"));
-      return;
-    }
-    if (invitedEmails.includes(email)) {
-      showError(t("onboarding.emailAlreadyAdded"));
-      return;
-    }
-    setInvitedEmails((prev) => [...prev, email]);
-    setEmailInput("");
-    setEmailError("");
-  };
-
-  const handleEmailKeyDown = (e: React.KeyboardEvent): void => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      addEmail();
-    }
-  };
-
-  const handleCopyLink = async (): Promise<void> => {
-    try {
-      await navigator.clipboard.writeText(inviteLinkUrl);
-    } catch {
-      // fallback — ignore
-    }
-    setLinkCopied(true);
-    if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
-    copyTimerRef.current = setTimeout(() => setLinkCopied(false), 2000);
-  };
+  const [scanning, setScanning] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+
+  // Background runtime detection — runs implicitly while the user names the workspace.
+  useEffect(() => {
+    setScanning(true);
+    const timer = setTimeout(() => {
+      const detected = devSimulateNone ? [] : mockRuntimes.filter((r) => r.status === "connected");
+      setGlobalRuntimes(detected);
+      setScanning(false);
+    }, SCAN_DURATION_MS);
+    return () => clearTimeout(timer);
+  }, [devSimulateNone, setGlobalRuntimes]);
+
+  const detectedRuntimes = globalRuntimes.filter((r) => r.status === "connected");
+  const canContinue = Boolean(name.trim()) && !scanning && !submitting;
 
   const handleContinue = (): void => {
-    if (!name.trim()) return;
+    if (!canContinue) return;
+    setSubmitting(true);
+
+    const workspaceName = name.trim();
     setWorkspace({
       id: `ws-${Date.now()}`,
-      name: name.trim(),
+      name: workspaceName,
       createdAt: Date.now(),
     });
-    navigate("/onboarding/runtime");
-  };
 
-  const handleJoin = (): void => {
-    const link = inviteLink.trim();
-    if (!link) {
-      setJoinError(t("onboarding.pasteInviteOrCode"));
-      return;
-    }
-    // Accept full URL or bare token
-    const tokenMatch = link.match(/invite\/([^/?#]+)/);
-    const token = tokenMatch ? tokenMatch[1] : link;
-    if (token.length < 4) {
-      setJoinError(t("onboarding.invalidInviteLink"));
-      return;
+    const welcomeAgentId = mountDefaultAgent(detectedRuntimes, addAgent);
+    if (welcomeAgentId) {
+      setPendingWelcomeAgent(welcomeAgentId);
     }
-    setJoinError("");
-    setJoining(true);
-    setTimeout(() => {
-      setWorkspace({
-        id: "ws-1",
-        name: "Acme Engineering",
-        avatar: "https://api.dicebear.com/9.x/identicon/svg?seed=acme&backgroundColor=6d28d9",
-        createdAt: Date.now(),
-      });
-      completeOnboarding();
-      setJoining(false);
-      navigate("/");
-    }, 1200);
+
+    completeOnboarding();
+    navigate("/chat/ch-welcome");
   };
 
   return (
-    <div className="flex flex-col items-center gap-6 pt-10">
-      <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-accent">
-        <Building2 className="h-7 w-7 text-muted-foreground" />
+    <div className="flex flex-col items-center gap-6 py-10">
+      <div className="flex size-14 items-center justify-center rounded-2xl bg-surface-2">
+        <Building2 className="size-7 text-text-secondary" />
       </div>
+
       <div className="text-center">
-        <h2 className="text-2xl font-semibold">
-          {mode === "create" ? t("onboarding.createWorkspace") : t("onboarding.joinWorkspace")}
+        <h2 className="text-[22px] font-semibold text-text-heading">
+          What should we call your team?
         </h2>
-        <p className="text-muted-foreground mt-2">
-          {mode === "create"
-            ? t("onboarding.createWorkspaceDesc")
-            : t("onboarding.joinWorkspaceDesc")}
+        <p className="mt-1.5 text-[13px] text-text-secondary">
+          One step to get in. Invite teammates and agents from inside.
         </p>
       </div>
 
-      <Tabs value={mode} onValueChange={(value) => setMode(value as Mode)}>
-        <TabsList>
-          <TabsTrigger value="create">
-            <Building2 className="h-3.5 w-3.5" />
-            {t("onboarding.createNew")}
-          </TabsTrigger>
-          <TabsTrigger value="join">
-            <LogIn className="h-3.5 w-3.5" />
-            {t("onboarding.joinExisting")}
-          </TabsTrigger>
-        </TabsList>
-      </Tabs>
+      <div className="w-full max-w-sm space-y-4">
+        <FormField label="Workspace name">
+          <FormFieldControl>
+            <Input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && canContinue) {
+                  e.preventDefault();
+                  handleContinue();
+                }
+              }}
+              placeholder="e.g. My Digital Teammates"
+              autoFocus
+            />
+          </FormFieldControl>
+        </FormField>
+
+        <div className="flex items-center justify-center gap-1.5 text-sm text-text-muted">
+          <LogIn className="size-3" />
+          <span>Got an invite link?</span>
+          <TextLink href="#" size="xs" className="text-sm" onClick={handleNavigateToJoin(navigate)}>
+            Join a workspace
+          </TextLink>
+        </div>
+      </div>
 
-      {mode === "create" ? (
-        <>
-          <div className="w-full max-w-sm space-y-5">
-            <FormField label={t("onboarding.workspaceName")}>
-              <FormFieldControl>
-                <Input
-                  type="text"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  placeholder={t("onboarding.workspaceNamePlaceholder")}
-                  autoFocus
-                />
-              </FormFieldControl>
-            </FormField>
+      <div className="flex flex-col items-center gap-2">
+        <p className="text-[11px] text-text-muted">~15 seconds to your first message.</p>
+        <Button
+          size="lg"
+          onClick={handleContinue}
+          disabled={!canContinue}
+          trailingIcon={<ArrowRight size={18} />}
+        >
+          Continue
+        </Button>
+      </div>
 
-            <FormField
-              label={t("onboarding.inviteMembers")}
-              invalid={Boolean(emailError)}
-              error={emailError}
-            >
-              <div className="flex items-center gap-2">
-                <FormFieldControl className="flex-1">
-                  <Input
-                    ref={emailRef}
-                    type="email"
-                    value={emailInput}
-                    onChange={(e) => setEmailInput(e.target.value)}
-                    onKeyDown={handleEmailKeyDown}
-                    placeholder={t("workspace.invitePlaceholder")}
-                    leadingIcon={<Mail className="h-4 w-4 text-muted-foreground" />}
-                    invalid={Boolean(emailError)}
-                  />
-                </FormFieldControl>
-                <Button
-                  onClick={addEmail}
-                  disabled={!emailInput.trim()}
-                  size="sm"
-                  className="h-10 shrink-0"
-                  leadingIcon={<Send className="h-3.5 w-3.5" />}
-                >
-                  {t("workspace.invite")}
-                </Button>
-              </div>
+      <div className="mt-4">
+        <RuntimeStatusLight scanning={scanning} runtimes={detectedRuntimes} />
+      </div>
+    </div>
+  );
+}
 
-              <div className="mt-3 flex items-center gap-2 rounded-lg border border-dashed border-border bg-secondary/40 px-3 py-2.5">
-                <Link2 className="h-4 w-4 text-muted-foreground shrink-0" />
-                <div className="flex-1 min-w-0">
-                  <div className="text-xs text-muted-foreground mb-0.5">
-                    {t("onboarding.shareInviteLink")}
-                  </div>
-                  <div className="text-xs font-mono text-foreground truncate">{inviteLinkUrl}</div>
-                </div>
-                <Button
-                  onClick={handleCopyLink}
-                  variant="outline"
-                  size="xs"
-                  className="h-7 shrink-0"
-                  leadingIcon={
-                    linkCopied ? (
-                      <Check className="h-3 w-3 text-nexu-online" />
-                    ) : (
-                      <Copy className="h-3 w-3" />
-                    )
-                  }
-                >
-                  {linkCopied ? t("common.copied") : t("common.copy")}
-                </Button>
-              </div>
+function RuntimeStatusLight({
+  scanning,
+  runtimes,
+}: {
+  scanning: boolean;
+  runtimes: Runtime[];
+}): React.ReactElement {
+  if (scanning) {
+    return (
+      <span className="inline-flex items-center gap-1.5 rounded-full border border-border-subtle bg-surface-1 px-2.5 py-1 text-[11px] text-text-muted">
+        <Loader2 className="size-2.5 animate-spin" aria-hidden />
+        Scanning runtimes…
+      </span>
+    );
+  }
+
+  if (runtimes.length === 0) {
+    return (
+      <span className="inline-flex items-center gap-1.5 rounded-full border border-border-subtle bg-surface-1 px-2.5 py-1 text-[11px] text-text-muted">
+        <span className="size-1.5 rounded-full bg-text-muted/50" aria-hidden />
+        No runtimes yet — install one after sign-in.
+      </span>
+    );
+  }
+
+  const count = runtimes.length;
+  const label = `${count} runtime${count === 1 ? "" : "s"} ready`;
 
-              {invitedEmails.length > 0 && (
-                <div className="mt-3 space-y-1">
-                  {invitedEmails.map((email) => (
-                    <div
-                      key={email}
-                      className="flex items-center gap-3 px-3 py-2.5 rounded-lg border border-border"
-                    >
-                      <Mail className="h-4 w-4 text-muted-foreground shrink-0" />
-                      <div className="flex-1 min-w-0">
-                        <div className="text-sm font-medium truncate">{email}</div>
-                        <Badge variant="success" size="xs" className="mt-1">
-                          {t("onboarding.invitationSent")}
-                        </Badge>
-                      </div>
-                      <Check className="h-3.5 w-3.5 text-nexu-online shrink-0" />
-                    </div>
-                  ))}
-                </div>
-              )}
-            </FormField>
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex items-center gap-1.5 rounded-full border border-border-subtle bg-surface-1 py-1 pl-2.5 pr-1.5 text-[11px] text-text-secondary transition-colors hover:border-border hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand-primary)]/30"
+          aria-label={`${label} — click to see details`}
+        >
+          <span className="size-1.5 rounded-full bg-success" aria-hidden />
+          <span>{label}</span>
+          <ChevronDown className="size-3 text-text-muted" aria-hidden />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align="center" className="w-[280px] p-0">
+        <div className="border-b border-border-subtle px-3 py-2">
+          <div className="text-[12px] font-semibold text-text-heading">Detected runtimes</div>
+          <div className="text-[11px] text-text-muted">
+            Picked up in the background while you named the team
           </div>
+        </div>
+        <ul className="max-h-[260px] divide-y divide-border-subtle overflow-y-auto">
+          {runtimes.map((rt) => (
+            <li key={rt.id} className="flex items-center gap-2 px-3 py-2">
+              <Check className="size-3 shrink-0 text-success" strokeWidth={3} />
+              <div className="min-w-0 flex-1">
+                <div className="truncate text-[12px] font-medium text-text-primary">
+                  {rt.name.replace(/\s*\(Local\)$/, "")}
+                </div>
+                {rt.version ? (
+                  <div className="truncate text-[11px] text-text-muted">v{rt.version}</div>
+                ) : null}
+              </div>
+            </li>
+          ))}
+        </ul>
+      </PopoverContent>
+    </Popover>
+  );
+}
 
-          <Button
-            onClick={handleContinue}
-            disabled={!name.trim()}
-            className="mt-2 h-11"
-            trailingIcon={<ArrowRight className="h-4 w-4" />}
-          >
-            {t("common.continue")}
-          </Button>
-        </>
-      ) : (
-        <>
-          <div className="w-full max-w-sm space-y-5">
-            <FormField
-              label={t("onboarding.inviteLink")}
-              invalid={Boolean(joinError)}
-              error={joinError}
-              description={t("onboarding.inviteHint")}
-            >
-              <FormFieldControl>
-                <Input
-                  type="text"
-                  value={inviteLink}
-                  onChange={(e) => {
-                    setInviteLink(e.target.value);
-                    setJoinError("");
-                  }}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") {
-                      e.preventDefault();
-                      handleJoin();
-                    }
-                  }}
-                  placeholder={t("onboarding.invitePlaceholderUrl")}
-                  leadingIcon={<Link2 className="h-4 w-4 text-muted-foreground" />}
-                  invalid={Boolean(joinError)}
-                  autoFocus
-                />
-              </FormFieldControl>
-            </FormField>
-          </div>
+function mountDefaultAgent(runtimes: Runtime[], addAgent: (agent: Agent) => void): string | null {
+  if (runtimes.length === 0) return null;
+
+  const template = mockAgentTemplates[0];
+  if (!template) return null;
+
+  const runtime = runtimes[0];
+  const agentId = `a-onboard-${Date.now()}`;
+  addAgent({
+    id: agentId,
+    name: template.name,
+    avatar: template.avatar,
+    description: template.description,
+    systemPrompt: template.defaultPrompt,
+    status: "online",
+    skills: [],
+    runtimeId: runtime.id,
+    templateId: template.id,
+    createdBy: "u-1",
+    createdAt: Date.now(),
+  });
+  return agentId;
+}
 
-          <Button
-            onClick={handleJoin}
-            disabled={!inviteLink.trim() || joining}
-            className="mt-2 h-11"
-          >
-            {joining ? (
-              <>
-                <div className="h-4 w-4 rounded-full border-2 border-background border-t-transparent animate-spin" />
-                {t("onboarding.joining")}
-              </>
-            ) : (
-              <>
-                {t("onboarding.joinWorkspaceCta")}
-                <ArrowRight className="h-4 w-4" />
-              </>
-            )}
-          </Button>
-        </>
-      )}
-    </div>
-  );
+function handleNavigateToJoin(
+  navigate: ReturnType<typeof useNavigate>,
+): (event: React.MouseEvent) => void {
+  return (event) => {
+    event.preventDefault();
+    navigate("/onboarding/join");
+  };
 }
diff --git a/apps/slark/src/renderer/src/components/onboarding/JoinWorkspaceStep.tsx b/apps/slark/src/renderer/src/components/onboarding/JoinWorkspaceStep.tsx
new file mode 100644
index 00000000..2b0086d7
--- /dev/null
+++ b/apps/slark/src/renderer/src/components/onboarding/JoinWorkspaceStep.tsx
@@ -0,0 +1,110 @@
+import { Button, FormField, FormFieldControl, Input } from "@nexu-design/ui-web";
+import { ArrowLeft, ArrowRight, Link2, LogIn } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useWorkspaceStore } from "@/stores/workspace";
+
+export function JoinWorkspaceStep(): React.ReactElement {
+  const navigate = useNavigate();
+  const setWorkspace = useWorkspaceStore((s) => s.setWorkspace);
+  const completeOnboarding = useWorkspaceStore((s) => s.completeOnboarding);
+
+  const [inviteLink, setInviteLink] = useState("");
+  const [error, setError] = useState("");
+  const [joining, setJoining] = useState(false);
+
+  const handleJoin = (): void => {
+    const link = inviteLink.trim();
+    if (!link) {
+      setError("Paste an invite link or code to continue.");
+      return;
+    }
+    const tokenMatch = link.match(/invite\/([^/?#]+)/);
+    const token = tokenMatch ? tokenMatch[1] : link;
+    if (token.length < 4) {
+      setError("That invite link doesn't look right.");
+      return;
+    }
+
+    setError("");
+    setJoining(true);
+    setTimeout(() => {
+      setWorkspace({
+        id: "ws-1",
+        name: "Acme Engineering",
+        avatar: "https://api.dicebear.com/9.x/identicon/svg?seed=acme&backgroundColor=6d28d9",
+        createdAt: Date.now(),
+      });
+      completeOnboarding();
+      setJoining(false);
+      navigate("/");
+    }, 900);
+  };
+
+  return (
+    <div className="flex flex-col items-center gap-6 py-10">
+      <div className="flex size-14 items-center justify-center rounded-2xl bg-surface-2">
+        <LogIn className="size-7 text-text-secondary" />
+      </div>
+
+      <div className="text-center">
+        <h2 className="text-[22px] font-semibold text-text-heading">Join a workspace</h2>
+        <p className="mt-1.5 text-[13px] text-text-secondary">
+          Paste an invite link to hop into an existing team.
+        </p>
+      </div>
+
+      <div className="w-full max-w-sm">
+        <FormField
+          label="Invite link"
+          invalid={Boolean(error)}
+          error={error || undefined}
+          description={
+            !error ? "Looks like slark://invite/… or a URL your teammate shared." : undefined
+          }
+        >
+          <FormFieldControl>
+            <Input
+              type="text"
+              value={inviteLink}
+              onChange={(e) => {
+                setInviteLink(e.target.value);
+                setError("");
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  handleJoin();
+                }
+              }}
+              placeholder="https://slark.app/invite/…"
+              leadingIcon={<Link2 size={14} />}
+              invalid={Boolean(error)}
+              autoFocus
+            />
+          </FormFieldControl>
+        </FormField>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <Button
+          variant="ghost"
+          onClick={() => navigate("/onboarding/workspace")}
+          leadingIcon={<ArrowLeft size={16} />}
+        >
+          Back
+        </Button>
+        <Button
+          size="lg"
+          onClick={handleJoin}
+          disabled={!inviteLink.trim() || joining}
+          loading={joining}
+          trailingIcon={!joining ? <ArrowRight size={18} /> : undefined}
+        >
+          {joining ? "Joining…" : "Join workspace"}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/slark/src/renderer/src/components/onboarding/OnboardingFlow.tsx b/apps/slark/src/renderer/src/components/onboarding/OnboardingFlow.tsx
index 447a376a..51f12c67 100644
--- a/apps/slark/src/renderer/src/components/onboarding/OnboardingFlow.tsx
+++ b/apps/slark/src/renderer/src/components/onboarding/OnboardingFlow.tsx
@@ -1,71 +1,17 @@
-import { Stepper, StepperItem, StepperSeparator } from "@nexu-design/ui-web";
-import { Bot, Building2, PlugZap } from "lucide-react";
-import { Fragment } from "react";
-import { Navigate, Route, Routes, useLocation } from "react-router-dom";
+import { Navigate, Route, Routes } from "react-router-dom";
 
-import { ConnectRuntimeStep } from "./ConnectRuntimeStep";
-import { CreateAgentStep } from "./CreateAgentStep";
 import { CreateWorkspaceStep } from "./CreateWorkspaceStep";
+import { JoinWorkspaceStep } from "./JoinWorkspaceStep";
 import { SlarkAuthFrame } from "./slark-auth-frame";
 
-const steps = [
-  {
-    path: "workspace",
-    label: "Workspace",
-    icon: <Building2 className="size-4" />,
-  },
-  {
-    path: "runtime",
-    label: "Runtimes",
-    icon: <PlugZap className="size-4" />,
-  },
-  {
-    path: "agent",
-    label: "Agent",
-    icon: <Bot className="size-4" />,
-  },
-] as const;
-
 export function OnboardingFlow(): React.ReactElement {
-  const location = useLocation();
-  const currentStep = Math.max(
-    steps.findIndex((step) => location.pathname.includes(step.path)),
-    0,
-  );
-  const isRuntimeStep = location.pathname.includes("/runtime");
-
   return (
-    <SlarkAuthFrame
-      contentInnerClassName={
-        isRuntimeStep ? "mx-auto w-[760px] max-w-full" : "mx-auto max-w-[560px]"
-      }
-      hideBranding
-      hideFooter
-    >
-      <div className="space-y-8">
-        <Stepper>
-          {steps.map((step, index) => (
-            <Fragment key={step.path}>
-              <StepperItem
-                status={
-                  index < currentStep ? "completed" : index === currentStep ? "current" : "pending"
-                }
-                step={index + 1}
-                label={step.label}
-                icon={step.icon}
-              />
-              {index < steps.length - 1 ? <StepperSeparator active={index < currentStep} /> : null}
-            </Fragment>
-          ))}
-        </Stepper>
-
-        <Routes>
-          <Route path="workspace" element={<CreateWorkspaceStep />} />
-          <Route path="runtime" element={<ConnectRuntimeStep />} />
-          <Route path="agent" element={<CreateAgentStep />} />
-          <Route path="*" element={<Navigate to="workspace" replace />} />
-        </Routes>
-      </div>
+    <SlarkAuthFrame contentInnerClassName="mx-auto w-full max-w-[440px]" hideBranding hideFooter>
+      <Routes>
+        <Route path="workspace" element={<CreateWorkspaceStep />} />
+        <Route path="join" element={<JoinWorkspaceStep />} />
+        <Route path="*" element={<Navigate to="workspace" replace />} />
+      </Routes>
     </SlarkAuthFrame>
   );
 }
diff --git a/apps/storybook/src/stories/agent-run-message.stories.tsx b/apps/storybook/src/stories/agent-run-message.stories.tsx
new file mode 100644
index 00000000..1affb013
--- /dev/null
+++ b/apps/storybook/src/stories/agent-run-message.stories.tsx
@@ -0,0 +1,1106 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  AlertTriangle,
+  Check,
+  ChevronDown,
+  ChevronUp,
+  CircleDashed,
+  Hourglass,
+  X,
+} from "lucide-react";
+import { useState } from "react";
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Button,
+  ChatMessage,
+  FileAttachment,
+  cn,
+} from "@nexu-design/ui-web";
+
+/**
+ * Agent Run Message — review-only prototype stories
+ *
+ * Purpose: prototype three companion components that don't exist in ui-web yet:
+ *   - ThinkingLabel : shimmer-animated phase label (Cursor-style)
+ *   - AgentRunLog   : collapsible tool-call timeline
+ *   - AgentResultCard : structured success/failure output card
+ *   - AgentRunMessage : compose ChatMessage + the above into one "agent turn"
+ *
+ * Design direction captured from product review:
+ *   - "Thinking..." text has a subtle shimmer animation (Cursor style)
+ *   - Tool call count is de-emphasised (moved to trailing meta row)
+ *   - Timeline connector line softened / removed
+ *   - State dots minimized — rely more on icon shape + muted color than saturation
+ *
+ * These are INLINE prototypes only. Do not import them into apps/slark yet.
+ * Once approved, they graduate to packages/ui-web in a follow-up PR.
+ */
+
+// ---------------------------------------------------------------------------
+// Shimmer keyframes — scoped to this story file, not polluting global CSS.
+// When graduated to ui-web, move to packages/ui-web/src/styles.css.
+// ---------------------------------------------------------------------------
+
+const SHIMMER_STYLES = `
+  @keyframes agent-run-shimmer {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+  .agent-run-shimmer-text {
+    background: linear-gradient(
+      90deg,
+      var(--color-text-muted) 0%,
+      var(--color-text-muted) 40%,
+      var(--color-text-heading) 50%,
+      var(--color-text-muted) 60%,
+      var(--color-text-muted) 100%
+    );
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+    animation: agent-run-shimmer 2.4s linear infinite;
+  }
+  @keyframes agent-run-dot-pulse {
+    0%, 100% { opacity: 0.6; transform: scale(1); }
+    50%      { opacity: 1; transform: scale(1.2); }
+  }
+  .agent-run-dot-pulse {
+    animation: agent-run-dot-pulse 1.6s ease-in-out infinite;
+  }
+`;
+
+function SharedStyles(): React.ReactElement {
+  // biome-ignore lint/security/noDangerouslySetInnerHtml: prototype-scoped CSS; ok for story
+  return <style dangerouslySetInnerHTML={{ __html: SHIMMER_STYLES }} />;
+}
+
+// ---------------------------------------------------------------------------
+// Data model — mirrors the proposed ui-web type surface
+// ---------------------------------------------------------------------------
+
+type RunPhase = "thinking" | "executing" | "reviewing" | "completed" | "failed";
+type StepStatus = "done" | "running" | "pending" | "failed";
+
+interface RunStep {
+  id: string;
+  tool: string;
+  description: React.ReactNode;
+  status: StepStatus;
+  duration?: string;
+}
+
+interface ResultAttachment {
+  name: string;
+  meta?: string;
+  kind?: "doc" | "code" | "sheet" | "archive" | "media" | "generic";
+}
+
+type ResultTone = "success" | "warning" | "error" | "info";
+
+// ---------------------------------------------------------------------------
+// ThinkingLabel — phase text with optional shimmer
+// ---------------------------------------------------------------------------
+
+const PHASE_LABEL: Record<RunPhase, string> = {
+  thinking: "Thinking",
+  executing: "Executing",
+  reviewing: "Reviewing",
+  completed: "Completed",
+  failed: "Failed",
+};
+
+const ACTIVE_PHASES: RunPhase[] = ["thinking", "executing", "reviewing"];
+
+function ThinkingLabel({ phase }: { phase: RunPhase }): React.ReactElement {
+  const label = PHASE_LABEL[phase];
+  const isActive = ACTIVE_PHASES.includes(phase);
+  return (
+    <span
+      className={cn(
+        "text-[12px] font-medium tabular-nums",
+        !isActive && phase === "completed" && "text-success",
+        !isActive && phase === "failed" && "text-error",
+      )}
+    >
+      {isActive ? <span className="agent-run-shimmer-text">{label}…</span> : <>{label}</>}
+    </span>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Step timeline row — minimal dot + mono tool + description + duration
+// ---------------------------------------------------------------------------
+
+function StepDot({ status }: { status: StepStatus }): React.ReactElement {
+  const base = "inline-flex size-3 shrink-0 items-center justify-center rounded-full";
+  if (status === "done") {
+    return (
+      <span className={cn(base, "text-text-muted")} aria-label="Done">
+        <Check className="size-2.5" strokeWidth={2.5} />
+      </span>
+    );
+  }
+  if (status === "running") {
+    return (
+      <span className={cn(base)} aria-label="Running">
+        <span className="agent-run-dot-pulse inline-block size-1.5 rounded-full bg-info" />
+      </span>
+    );
+  }
+  if (status === "failed") {
+    return (
+      <span className={cn(base, "text-error")} aria-label="Failed">
+        <X className="size-2.5" strokeWidth={3} />
+      </span>
+    );
+  }
+  return (
+    <span className={cn(base, "text-text-tertiary/60")} aria-label="Pending">
+      <CircleDashed className="size-2.5" strokeWidth={1.5} />
+    </span>
+  );
+}
+
+function StepRow({ step }: { step: RunStep }): React.ReactElement {
+  const dim = step.status === "pending";
+  return (
+    <div className={cn("flex items-center gap-2.5 py-1 text-[12px]", dim && "text-text-tertiary")}>
+      <StepDot status={step.status} />
+      <span
+        className={cn(
+          "font-mono text-[11px] leading-none",
+          step.status === "pending" ? "text-text-tertiary" : "text-text-heading",
+        )}
+      >
+        {step.tool}
+      </span>
+      <span className="text-text-muted" aria-hidden>
+        —
+      </span>
+      <span
+        className={cn(
+          "min-w-0 flex-1 truncate leading-tight",
+          step.status === "pending" ? "text-text-tertiary" : "text-text-secondary",
+        )}
+      >
+        {step.description}
+      </span>
+      {step.duration ? (
+        <span className="shrink-0 font-mono text-[11px] tabular-nums text-text-muted">
+          {step.duration}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// AgentRunLog — the "Investigating retry loop" card
+// ---------------------------------------------------------------------------
+
+interface AgentRunLogProps {
+  title: string;
+  phase: RunPhase;
+  steps: RunStep[];
+  toolCallCount?: number;
+  totalDuration?: string;
+  defaultExpanded?: boolean;
+  className?: string;
+}
+
+function AgentRunLog({
+  title,
+  phase,
+  steps,
+  toolCallCount,
+  totalDuration,
+  defaultExpanded = true,
+  className,
+}: AgentRunLogProps): React.ReactElement {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+
+  const metaParts: string[] = [];
+  if (toolCallCount !== undefined) {
+    metaParts.push(`${toolCallCount} tool call${toolCallCount === 1 ? "" : "s"}`);
+  }
+  if (totalDuration) metaParts.push(totalDuration);
+
+  return (
+    <div
+      className={cn(
+        "w-full max-w-[620px] overflow-hidden rounded-xl border border-border-subtle bg-surface-0",
+        className,
+      )}
+    >
+      <button
+        type="button"
+        onClick={() => setExpanded((v) => !v)}
+        aria-expanded={expanded}
+        className={cn(
+          "flex w-full items-start justify-between gap-4 px-4 py-3 text-left transition-colors",
+          "hover:bg-surface-1/60",
+        )}
+      >
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-[14px] font-semibold text-text-heading">{title}</div>
+          <div className="mt-1 flex items-center gap-2 text-[11px] leading-none">
+            <ThinkingLabel phase={phase} />
+            {metaParts.length > 0 ? (
+              <>
+                <span className="text-text-tertiary" aria-hidden>
+                  ·
+                </span>
+                <span className="font-mono tabular-nums text-text-muted">
+                  {metaParts.join(" · ")}
+                </span>
+              </>
+            ) : null}
+          </div>
+        </div>
+        <span className="mt-0.5 shrink-0 text-text-muted" aria-hidden>
+          {expanded ? <ChevronUp className="size-4" /> : <ChevronDown className="size-4" />}
+        </span>
+      </button>
+
+      {expanded ? (
+        <div className="border-t border-border-subtle px-4 py-2">
+          {steps.map((step) => (
+            <StepRow key={step.id} step={step} />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// AgentResultCard — structured success / failure output
+// ---------------------------------------------------------------------------
+
+const TONE_STRIPE: Record<ResultTone, string> = {
+  success: "before:bg-success",
+  warning: "before:bg-warning",
+  error: "before:bg-error",
+  info: "before:bg-info",
+};
+
+interface AgentResultCardProps {
+  title: string;
+  bullets?: React.ReactNode[];
+  attachments?: ResultAttachment[];
+  tone?: ResultTone;
+  className?: string;
+}
+
+function AgentResultCard({
+  title,
+  bullets,
+  attachments,
+  tone = "success",
+  className,
+}: AgentResultCardProps): React.ReactElement {
+  return (
+    <div
+      className={cn(
+        "relative w-full max-w-[620px] overflow-hidden rounded-xl border border-border-subtle bg-surface-0 pl-4 pr-4 py-3",
+        "before:absolute before:left-0 before:top-0 before:h-full before:w-[3px]",
+        TONE_STRIPE[tone],
+        className,
+      )}
+    >
+      <div className="pl-2">
+        <div className="text-[14px] font-semibold text-text-heading">{title}</div>
+        {bullets && bullets.length > 0 ? (
+          <ul className="mt-2 space-y-1 text-[13px] leading-[1.55] text-text-secondary">
+            {bullets.map((b, i) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: bullets are static inside each story; arrays don't reorder
+              <li key={i} className="flex gap-2">
+                <span className="mt-[7px] inline-block size-[3px] shrink-0 rounded-full bg-text-muted" />
+                <span className="min-w-0">{b}</span>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+        {attachments && attachments.length > 0 ? (
+          <div className="mt-3 flex flex-wrap gap-2">
+            {attachments.map((a) => (
+              <FileAttachment
+                key={a.name}
+                name={a.name}
+                meta={a.meta}
+                kind={a.kind ?? "code"}
+                className="max-w-[240px]"
+              />
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// AgentRunMessage — wraps ChatMessage and adds a status badge next to name
+// ---------------------------------------------------------------------------
+
+interface AgentSender {
+  id: string;
+  name: string;
+  avatar?: string;
+  fallback: string;
+  accent?: string;
+}
+
+const STATUS_BADGE: Record<
+  "running" | "completed" | "failed" | "waiting",
+  { label: string; className: string }
+> = {
+  running: { label: "进行中", className: "bg-info-subtle text-info" },
+  completed: { label: "已完成", className: "bg-success-subtle text-success" },
+  failed: { label: "失败", className: "bg-error-subtle text-error" },
+  waiting: { label: "待确认", className: "bg-warning-subtle text-warning" },
+};
+
+interface AgentRunMessageProps {
+  sender: AgentSender;
+  time: string;
+  status: keyof typeof STATUS_BADGE;
+  preamble?: React.ReactNode;
+  run?: AgentRunLogProps;
+  result?: AgentResultCardProps;
+}
+
+/**
+ * Prototype that demonstrates the *future* shape of `<ChatMessage>` with a
+ * `senderBadge` slot. Built inline here so the real ChatMessage stays
+ * untouched until we've landed review.
+ *
+ * When graduated to ui-web, this composition shrinks to:
+ *   <ChatMessage sender={..} time={..} senderBadge={<StatusPill />} blocks={<><RunLog/><ResultCard/></>}>
+ *     {preamble}
+ *   </ChatMessage>
+ */
+function AgentRunMessage({
+  sender,
+  time,
+  status,
+  preamble,
+  run,
+  result,
+}: AgentRunMessageProps): React.ReactElement {
+  const accent = sender.accent ?? "var(--color-brand-primary)";
+  const badge = STATUS_BADGE[status];
+
+  return (
+    <div className="group relative flex gap-3 px-4 pt-5 pb-1">
+      <div className="w-8 shrink-0">
+        <Avatar className="size-8 rounded-full">
+          {sender.avatar ? <AvatarImage src={sender.avatar} alt={sender.name} /> : null}
+          <AvatarFallback
+            className="rounded-full text-[10px] font-semibold"
+            style={{
+              background: `color-mix(in srgb, ${accent} 14%, transparent)`,
+              color: accent,
+            }}
+          >
+            {sender.fallback}
+          </AvatarFallback>
+        </Avatar>
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="mb-0.5 flex items-baseline gap-1.5">
+          <span className="text-[13px] font-semibold text-text-heading">{sender.name}</span>
+          <span
+            className="inline-flex items-center gap-1 rounded-[4px] px-1.5 py-[1px] text-[10px] font-medium leading-tight"
+            style={{
+              background: `color-mix(in srgb, ${accent} 14%, transparent)`,
+              color: accent,
+            }}
+          >
+            AGENT
+          </span>
+          <span
+            className={cn(
+              "inline-flex items-center gap-1 rounded-[4px] px-1.5 py-[1px] text-[10px] font-medium leading-tight",
+              badge.className,
+            )}
+          >
+            {status === "running" ? <Hourglass className="size-2.5" /> : null}
+            {status === "completed" ? <Check className="size-2.5" strokeWidth={3} /> : null}
+            {status === "failed" ? <AlertTriangle className="size-2.5" /> : null}
+            {badge.label}
+          </span>
+          <span
+            className="ml-auto font-mono text-[11px] tabular-nums text-text-muted"
+            aria-label={`Sent at ${time}`}
+          >
+            {time}
+          </span>
+        </div>
+
+        {preamble ? (
+          <div className="text-[13px] leading-[1.6] text-text-primary whitespace-pre-wrap break-words">
+            {preamble}
+          </div>
+        ) : null}
+
+        {run || result ? (
+          <div className="mt-2 flex flex-col gap-2">
+            {run ? <AgentRunLog {...run} /> : null}
+            {result ? <AgentResultCard {...result} /> : null}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Sample data — reused across stories
+// ---------------------------------------------------------------------------
+
+const AIDER: AgentSender = {
+  id: "aider",
+  name: "Aider",
+  fallback: "AI",
+  accent: "#8b5cf6",
+};
+
+const retryLoopSteps: RunStep[] = [
+  {
+    id: "s1",
+    tool: "git.log",
+    description: "Scanned last 20 commits",
+    status: "done",
+    duration: "00:02",
+  },
+  {
+    id: "s2",
+    tool: "fs.read",
+    description: "src/retry.ts, src/queue.ts",
+    status: "done",
+    duration: "00:08",
+  },
+  { id: "s3", tool: "test.run", description: "Reproducing locally…", status: "running" },
+  { id: "s4", tool: "fs.edit", description: "Patch pending", status: "pending" },
+  { id: "s5", tool: "git.commit", description: "Commit pending", status: "pending" },
+];
+
+const themeProviderSteps: RunStep[] = [
+  {
+    id: "s1",
+    tool: "fs.read",
+    description: "Read existing theme token files",
+    status: "done",
+    duration: "00:05",
+  },
+  {
+    id: "s2",
+    tool: "fs.edit",
+    description: "ThemeProvider.tsx created",
+    status: "done",
+    duration: "03:12",
+  },
+  {
+    id: "s3",
+    tool: "fs.edit",
+    description: "useTheme.ts hook authored",
+    status: "done",
+    duration: "02:40",
+  },
+  {
+    id: "s4",
+    tool: "test.run",
+    description: "12 unit tests passing",
+    status: "done",
+    duration: "01:18",
+  },
+  {
+    id: "s5",
+    tool: "git.commit",
+    description: "feat: ThemeProvider + useTheme hook",
+    status: "done",
+    duration: "00:45",
+  },
+];
+
+const failedSteps: RunStep[] = [
+  {
+    id: "s1",
+    tool: "fs.read",
+    description: "Audited env loader",
+    status: "done",
+    duration: "00:03",
+  },
+  {
+    id: "s2",
+    tool: "fs.edit",
+    description: "Patched parse() fallback",
+    status: "done",
+    duration: "00:32",
+  },
+  {
+    id: "s3",
+    tool: "test.run",
+    description: "3 of 47 tests failed (auth-*)",
+    status: "failed",
+    duration: "00:58",
+  },
+];
+
+// ---------------------------------------------------------------------------
+// Meta + stories
+// ---------------------------------------------------------------------------
+
+const meta = {
+  title: "Scenarios/Agent Run Message",
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "Review-only prototypes for three missing ui-web pieces used when an " +
+          "agent takes a turn in chat: ThinkingLabel, AgentRunLog, AgentResultCard, " +
+          "and the AgentRunMessage composition. Visual style is intentionally " +
+          "understated (soft dots, muted connectors, Cursor-style shimmer on " +
+          "the phase label); final polish happens after wiring into slark.",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex w-full flex-col gap-6">
+        <SharedStyles />
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+// Primary stories: the four core run states
+// ---------------------------------------------------------------------------
+
+export const Thinking: Story = {
+  render: () => (
+    <div className="max-w-[680px]">
+      <AgentRunMessage
+        sender={AIDER}
+        time="10:01"
+        status="running"
+        preamble="Let me look at the retry loop first…"
+        run={{
+          title: "Investigating retry loop…",
+          phase: "thinking",
+          toolCallCount: 6,
+          totalDuration: "48s",
+          steps: retryLoopSteps,
+        }}
+      />
+    </div>
+  ),
+};
+
+export const Executing: Story = {
+  render: () => (
+    <div className="max-w-[680px]">
+      <AgentRunMessage
+        sender={AIDER}
+        time="10:15"
+        status="running"
+        preamble="Patching and re-running tests now."
+        run={{
+          title: "Fixing retry backoff in src/retry.ts",
+          phase: "executing",
+          toolCallCount: 9,
+          totalDuration: "1m 12s",
+          steps: [
+            {
+              id: "s1",
+              tool: "fs.read",
+              description: "src/retry.ts",
+              status: "done",
+              duration: "00:02",
+            },
+            {
+              id: "s2",
+              tool: "fs.edit",
+              description: "Exponential backoff + jitter",
+              status: "done",
+              duration: "00:18",
+            },
+            {
+              id: "s3",
+              tool: "test.run",
+              description: "Running retry-* suite…",
+              status: "running",
+            },
+            {
+              id: "s4",
+              tool: "fs.edit",
+              description: "Docstring update pending",
+              status: "pending",
+            },
+          ],
+        }}
+      />
+    </div>
+  ),
+};
+
+export const Completed: Story = {
+  render: () => (
+    <div className="max-w-[680px]">
+      <AgentRunMessage
+        sender={AIDER}
+        time="10:01"
+        status="completed"
+        preamble="收到，开始实现 ThemeProvider…"
+        run={{
+          title: "ThemeProvider + useTheme hook",
+          phase: "completed",
+          toolCallCount: 5,
+          totalDuration: "11m 0s",
+          defaultExpanded: false,
+          steps: themeProviderSteps,
+        }}
+        result={{
+          tone: "success",
+          title: "ThemeProvider + useTheme hook 完成",
+          bullets: [
+            "ThemeProvider: React Context + localStorage + system preference fallback",
+            "useTheme: { theme, setTheme, toggleTheme, resolvedTheme }",
+            "CSS variables auto-injected on theme change",
+          ],
+          attachments: [
+            { name: "ThemeProvider.tsx", meta: "4.2 KB · tsx", kind: "code" },
+            { name: "useTheme.ts", meta: "1.1 KB · ts", kind: "code" },
+          ],
+        }}
+      />
+    </div>
+  ),
+};
+
+export const Failed: Story = {
+  render: () => (
+    <div className="max-w-[680px]">
+      <AgentRunMessage
+        sender={AIDER}
+        time="11:24"
+        status="failed"
+        preamble="I attempted to patch the env loader but the auth test suite still breaks."
+        run={{
+          title: "Attempted: fix env parse fallback",
+          phase: "failed",
+          toolCallCount: 3,
+          totalDuration: "1m 33s",
+          steps: failedSteps,
+        }}
+        result={{
+          tone: "error",
+          title: "3 tests still failing after patch",
+          bullets: [
+            <span key="1">
+              <code className="rounded bg-surface-2 px-1 py-[1px] font-mono text-[11px]">
+                auth.test.ts
+              </code>{" "}
+              expected <code className="font-mono">401</code>, received{" "}
+              <code className="font-mono">500</code>
+            </span>,
+            "Likely candidate: JWT middleware still reads stale env on hot reload",
+            "Recommend reverting the parse() change; mock the env in tests instead",
+          ],
+          attachments: [{ name: "test-output.log", meta: "12 KB · log", kind: "code" }],
+        }}
+      />
+    </div>
+  ),
+};
+
+export const WaitingForApproval: Story = {
+  render: () => (
+    <div className="max-w-[680px]">
+      <AgentRunMessage
+        sender={AIDER}
+        time="10:42"
+        status="waiting"
+        preamble="Ready to commit — this touches 4 files. Approve to continue."
+        run={{
+          title: "Refactor: extract retry policy to shared module",
+          phase: "reviewing",
+          toolCallCount: 7,
+          totalDuration: "4m 10s",
+          steps: [
+            {
+              id: "s1",
+              tool: "fs.read",
+              description: "3 files under src/queue/",
+              status: "done",
+              duration: "00:06",
+            },
+            {
+              id: "s2",
+              tool: "fs.edit",
+              description: "src/retry/policy.ts created",
+              status: "done",
+              duration: "01:22",
+            },
+            {
+              id: "s3",
+              tool: "fs.edit",
+              description: "src/queue/worker.ts updated",
+              status: "done",
+              duration: "00:48",
+            },
+            {
+              id: "s4",
+              tool: "test.run",
+              description: "47 passing",
+              status: "done",
+              duration: "01:50",
+            },
+            {
+              id: "s5",
+              tool: "git.commit",
+              description: "Awaiting your approval",
+              status: "running",
+            },
+          ],
+        }}
+      />
+    </div>
+  ),
+};
+
+// ---------------------------------------------------------------------------
+// Secondary stories: subcomponents in isolation, for API review
+// ---------------------------------------------------------------------------
+
+export const RunLogStates: Story = {
+  name: "AgentRunLog · all phases",
+  render: () => (
+    <div className="flex max-w-[680px] flex-col gap-3">
+      <AgentRunLog
+        title="Investigating retry loop…"
+        phase="thinking"
+        steps={retryLoopSteps}
+        toolCallCount={6}
+        totalDuration="48s"
+      />
+      <AgentRunLog
+        title="Fixing retry backoff in src/retry.ts"
+        phase="executing"
+        steps={[
+          {
+            id: "s1",
+            tool: "fs.read",
+            description: "src/retry.ts",
+            status: "done",
+            duration: "00:02",
+          },
+          {
+            id: "s2",
+            tool: "fs.edit",
+            description: "Exponential backoff + jitter",
+            status: "done",
+            duration: "00:18",
+          },
+          { id: "s3", tool: "test.run", description: "Running retry-* suite…", status: "running" },
+        ]}
+        toolCallCount={9}
+        totalDuration="1m 12s"
+      />
+      <AgentRunLog
+        title="ThemeProvider + useTheme hook"
+        phase="completed"
+        steps={themeProviderSteps}
+        toolCallCount={5}
+        totalDuration="11m 0s"
+        defaultExpanded={false}
+      />
+      <AgentRunLog
+        title="Attempted: fix env parse fallback"
+        phase="failed"
+        steps={failedSteps}
+        toolCallCount={3}
+        totalDuration="1m 33s"
+      />
+    </div>
+  ),
+};
+
+export const ResultCardTones: Story = {
+  name: "AgentResultCard · all tones",
+  render: () => (
+    <div className="flex max-w-[680px] flex-col gap-3">
+      <AgentResultCard
+        tone="success"
+        title="Migration complete"
+        bullets={[
+          "12 components moved to @nexu-design/ui-web",
+          "3 obsolete local copies deleted",
+          "Type errors: 0 · Test failures: 0",
+        ]}
+        attachments={[{ name: "migration-report.md", meta: "3.4 KB · md", kind: "doc" }]}
+      />
+      <AgentResultCard
+        tone="warning"
+        title="Partial fix — deferring 2 edge cases"
+        bullets={[
+          "Patched main flow; smoke tests green",
+          "Deferred: IE11 fallback and SSR hydration edge",
+        ]}
+      />
+      <AgentResultCard
+        tone="error"
+        title="Build broken"
+        bullets={[
+          "tsc reports 4 errors in shared types",
+          "Reverting last two commits is recommended",
+        ]}
+        attachments={[{ name: "tsc-output.log", meta: "8.1 KB · log", kind: "code" }]}
+      />
+      <AgentResultCard
+        tone="info"
+        title="Dry-run summary"
+        bullets={[
+          "Would rename 14 files, modify 2",
+          "No file deletions",
+          "Run with --apply to commit changes",
+        ]}
+      />
+    </div>
+  ),
+};
+
+// ---------------------------------------------------------------------------
+// Scenario story: multi-turn conversation matching original product screenshot
+// ---------------------------------------------------------------------------
+
+const JASON: AgentSender = {
+  id: "jason",
+  name: "Jason",
+  fallback: "J",
+  accent: "#06b6d4",
+};
+
+export const Conversation: Story = {
+  name: "Full conversation · multi-turn",
+  parameters: { layout: "fullscreen" },
+  render: () => (
+    <div className="mx-auto flex min-h-screen max-w-[860px] flex-col gap-1 bg-surface-0 py-8">
+      <AgentRunMessage
+        sender={AIDER}
+        time="10:01"
+        status="completed"
+        preamble="收到，开始实现 ThemeProvider…"
+        run={{
+          title: "ThemeProvider + useTheme hook",
+          phase: "completed",
+          toolCallCount: 5,
+          totalDuration: "11m 0s",
+          defaultExpanded: false,
+          steps: themeProviderSteps,
+        }}
+        result={{
+          tone: "success",
+          title: "ThemeProvider + useTheme hook 完成",
+          bullets: [
+            "ThemeProvider: React Context + localStorage + system preference fallback",
+            "useTheme: { theme, setTheme, toggleTheme, resolvedTheme }",
+            "CSS variables auto-injected on theme change",
+          ],
+          attachments: [
+            { name: "ThemeProvider.tsx", meta: "4.2 KB · tsx", kind: "code" },
+            { name: "useTheme.ts", meta: "1.1 KB · ts", kind: "code" },
+          ],
+        }}
+      />
+
+      <ChatMessage
+        sender={{ id: JASON.id, name: JASON.name, fallback: JASON.fallback }}
+        time="10:20"
+      >
+        不错，ThemeProvider 看起来没问题。现在需要一个 ThemeToggle 组件，放在 header 右上角。要有
+        sun/moon icon 切换动画。
+      </ChatMessage>
+
+      <AgentRunMessage
+        sender={AIDER}
+        time="10:21"
+        status="completed"
+        preamble="开始实现 ThemeToggle…"
+        run={{
+          title: "ThemeToggle component",
+          phase: "completed",
+          toolCallCount: 4,
+          totalDuration: "9m 0s",
+          defaultExpanded: false,
+          steps: [
+            {
+              id: "s1",
+              tool: "fs.read",
+              description: "icons/sun.svg, icons/moon.svg",
+              status: "done",
+              duration: "00:03",
+            },
+            {
+              id: "s2",
+              tool: "fs.edit",
+              description: "ThemeToggle.tsx authored",
+              status: "done",
+              duration: "04:12",
+            },
+            {
+              id: "s3",
+              tool: "fs.edit",
+              description: "Framer Motion swap animation",
+              status: "done",
+              duration: "03:30",
+            },
+            {
+              id: "s4",
+              tool: "test.run",
+              description: "Rendering snapshot passed",
+              status: "done",
+              duration: "01:15",
+            },
+          ],
+        }}
+        result={{
+          tone: "success",
+          title: "ThemeToggle 组件完成，含 icon 切换动画",
+          attachments: [{ name: "ThemeToggle.tsx", meta: "2.3 KB · tsx", kind: "code" }],
+        }}
+      />
+    </div>
+  ),
+};
+
+// ---------------------------------------------------------------------------
+// Rationale page — reviewer doc
+// ---------------------------------------------------------------------------
+
+export const Rationale: Story = {
+  name: "Rationale · why these components",
+  parameters: { layout: "padded" },
+  render: () => (
+    <div className="mx-auto max-w-[720px] space-y-6 text-[13px] leading-relaxed text-text-secondary">
+      <header>
+        <h1 className="text-[20px] font-semibold text-text-heading">
+          Agent Run Message — design rationale
+        </h1>
+        <p className="mt-2 text-text-muted">
+          Prototype context for the three missing pieces: ThinkingLabel, AgentRunLog,
+          AgentResultCard. Built inline in this story until approved.
+        </p>
+      </header>
+
+      <section className="space-y-2">
+        <h2 className="text-[15px] font-semibold text-text-heading">
+          Why not just extend ContentBlocks (slark) or ChatMessage (ui-web)?
+        </h2>
+        <p>
+          ChatMessage is a generic chat row and rightly stays so. The run log and result card are{" "}
+          <em>agent-specific</em> content blocks. They belong <em>inside</em>{" "}
+          <code className="font-mono text-[12px]">blocks</code>, not baked into ChatMessage. This
+          keeps ChatMessage reusable for human messages and keeps the agent UX in one swappable
+          primitive we can iterate without breaking message infrastructure.
+        </p>
+      </section>
+
+      <section className="space-y-2">
+        <h2 className="text-[15px] font-semibold text-text-heading">ChatMessage proposed tweak</h2>
+        <p>
+          Add a <code className="font-mono text-[12px]">senderBadge</code> slot rendered right after
+          the time element, so statuses like "已完成 / 失败 / 待确认" sit in the header row with the
+          AGENT pill. Non-breaking; current usages pass{" "}
+          <code className="font-mono text-[12px]">undefined</code> and see no visual difference.
+        </p>
+      </section>
+
+      <section className="space-y-2">
+        <h2 className="text-[15px] font-semibold text-text-heading">Visual decisions</h2>
+        <ul className="ml-4 list-disc space-y-1">
+          <li>
+            Phase label (<strong>Thinking / Executing / Reviewing</strong>) uses a subtle shimmer
+            while active; static once done / failed. Cursor-style, conveys liveness without
+            spinners.
+          </li>
+          <li>
+            Tool call count moved to a <em>trailing</em> meta row and rendered in mono + muted. It's
+            reference info, not the headline.
+          </li>
+          <li>
+            Timeline connector dropped; step rows rely on tight vertical rhythm and a per-step dot.
+            Less visual noise at scale.
+          </li>
+          <li>
+            Step dots favour <em>icon shape</em> over <em>color saturation</em>: done uses a muted
+            check, running uses a small pulsing dot, pending uses a dashed ring, failed keeps a
+            saturated red for urgency.
+          </li>
+          <li>
+            Result card keeps a <code className="font-mono text-[12px]">3px</code> tone-coloured
+            left stripe — enough to signal success / warn / error / info without a full coloured
+            background.
+          </li>
+        </ul>
+      </section>
+
+      <section className="space-y-2">
+        <h2 className="text-[15px] font-semibold text-text-heading">
+          What graduates to ui-web in the follow-up PR
+        </h2>
+        <ul className="ml-4 list-disc space-y-1">
+          <li>
+            <code className="font-mono text-[12px]">AgentRunLog</code> →{" "}
+            <code className="font-mono text-[12px]">packages/ui-web/src/primitives/</code>
+          </li>
+          <li>
+            <code className="font-mono text-[12px]">AgentResultCard</code> → same
+          </li>
+          <li>
+            <code className="font-mono text-[12px]">ChatMessage.senderBadge</code> slot
+          </li>
+          <li>Dedicated primitive stories (per AGENTS.md) + unit + a11y tests</li>
+          <li>
+            Shimmer keyframes moved into{" "}
+            <code className="font-mono text-[12px]">packages/ui-web/src/styles.css</code>
+          </li>
+        </ul>
+      </section>
+
+      <section className="space-y-2">
+        <h2 className="text-[15px] font-semibold text-text-heading">Open questions</h2>
+        <ol className="ml-4 flex list-decimal flex-col gap-1 text-text-secondary">
+          <li>Should running steps expose a "cancel this step" affordance, or only "stop all"?</li>
+          <li>
+            When a run is <code className="font-mono text-[12px]">waiting_for_approval</code>, where
+            does the approve / reject UI live — inline in the run log, or as a separate{" "}
+            <code className="font-mono text-[12px]">ApprovalCard</code>?
+          </li>
+          <li>
+            In the failed state, do we always attach the log file, or only when it's under some size
+            threshold?
+          </li>
+        </ol>
+        <div>
+          <Badge variant="secondary" size="xs">
+            Not blocking — punt to after first slark integration
+          </Badge>
+        </div>
+      </section>
+    </div>
+  ),
+};
diff --git a/apps/storybook/src/stories/onboarding-flow.stories.tsx b/apps/storybook/src/stories/onboarding-flow.stories.tsx
new file mode 100644
index 00000000..b9443943
--- /dev/null
+++ b/apps/storybook/src/stories/onboarding-flow.stories.tsx
@@ -0,0 +1,761 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  ArrowRight,
+  Bot,
+  Building2,
+  Check,
+  ChevronDown,
+  LogIn,
+  MessageSquare,
+  Search,
+  Sparkles,
+  Users,
+  X,
+  Zap,
+} from "lucide-react";
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  EmptyState,
+  FormField,
+  FormFieldControl,
+  Input,
+  Label,
+  Stepper,
+  StepperItem,
+  StepperSeparator,
+  TextLink,
+  ThemeRoot,
+} from "@nexu-design/ui-web";
+
+/**
+ * Onboarding Flow — review comparison stories
+ *
+ * Purpose: compare the current 3-step onboarding (Workspace / Runtime / Agent)
+ * against a proposed 1.5-step flow that defers Runtime + Agent setup into the
+ * workspace itself. Used for cross-functional review before touching the real
+ * `apps/slark` implementation.
+ *
+ * Source of current flow: apps/slark/src/renderer/src/components/onboarding/*
+ */
+const meta = {
+  title: "Scenarios/Onboarding Flow",
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Review-only story: compares the current 3-step onboarding against a " +
+          "proposed 1.5-step variant. No changes to apps/slark yet.",
+      },
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+// Shared window frame — approximates the slark Electron window so reviewers
+// can judge information density at the real size.
+// ---------------------------------------------------------------------------
+
+interface WindowFrameProps {
+  label: string;
+  sublabel?: string;
+  children: React.ReactNode;
+}
+
+function WindowFrame({ label, sublabel, children }: WindowFrameProps) {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-baseline gap-2">
+        <span className="text-sm font-semibold text-text-primary">{label}</span>
+        {sublabel ? <span className="text-xs text-text-muted">{sublabel}</span> : null}
+      </div>
+      <div className="w-[640px] overflow-hidden rounded-xl border border-border bg-surface-0 shadow-sm">
+        <div className="flex h-8 items-center gap-1.5 border-b border-border-subtle bg-surface-1 px-3">
+          <span className="size-2.5 rounded-full bg-[#ff5f57]" />
+          <span className="size-2.5 rounded-full bg-[#febc2e]" />
+          <span className="size-2.5 rounded-full bg-[#28c840]" />
+        </div>
+        <div className="h-[520px] overflow-auto">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// CURRENT FLOW — reconstruction of the existing 3-step onboarding
+// ---------------------------------------------------------------------------
+
+function CurrentStepper({ current }: { current: 1 | 2 | 3 }) {
+  const step = (n: 1 | 2 | 3) =>
+    n < current ? "completed" : n === current ? "current" : "pending";
+
+  return (
+    <Stepper className="mx-auto max-w-md">
+      <StepperItem status={step(1)} step={1} label="Workspace" />
+      <StepperSeparator active={current > 1} />
+      <StepperItem status={step(2)} step={2} label="Runtime" />
+      <StepperSeparator active={current > 2} />
+      <StepperItem status={step(3)} step={3} label="Agent" />
+    </Stepper>
+  );
+}
+
+function CurrentStep1Workspace() {
+  return (
+    <div className="flex flex-col items-center gap-6 px-8 py-8">
+      <CurrentStepper current={1} />
+
+      <div className="flex size-14 items-center justify-center rounded-2xl bg-surface-2">
+        <Building2 className="size-7 text-text-secondary" />
+      </div>
+      <div className="text-center">
+        <h2 className="text-xl font-semibold text-text-primary">Create your workspace</h2>
+        <p className="mt-1 text-sm text-text-secondary">Set up a team space and invite people.</p>
+      </div>
+
+      <div className="inline-flex items-center gap-1 rounded-lg bg-surface-2 p-1">
+        <button
+          type="button"
+          className="flex h-8 items-center gap-1.5 rounded-md bg-surface-0 px-3 text-sm font-medium shadow-sm"
+        >
+          <Building2 className="size-3.5" /> Create new
+        </button>
+        <button
+          type="button"
+          className="flex h-8 items-center gap-1.5 rounded-md px-3 text-sm font-medium text-text-muted"
+        >
+          <LogIn className="size-3.5" /> Join existing
+        </button>
+      </div>
+
+      <div className="w-full max-w-sm space-y-4">
+        <FormField label="Workspace name">
+          <FormFieldControl>
+            <Input placeholder="e.g. Acme Engineering" />
+          </FormFieldControl>
+        </FormField>
+
+        <FormField label="Invite members">
+          <FormFieldControl>
+            <div className="flex items-center gap-2">
+              <Input placeholder="teammate@company.com" />
+              <Button variant="outline" size="sm">
+                Invite
+              </Button>
+            </div>
+          </FormFieldControl>
+        </FormField>
+
+        <div className="flex items-center gap-2 rounded-lg border border-dashed border-border bg-surface-1/60 px-3 py-2.5">
+          <div className="min-w-0 flex-1">
+            <div className="text-xs text-text-muted">Or share invite link</div>
+            <div className="truncate font-mono text-xs text-text-primary">
+              http://localhost:5173/invite/c07he0…
+            </div>
+          </div>
+          <Button variant="outline" size="xs">
+            Copy
+          </Button>
+        </div>
+      </div>
+
+      <Button trailingIcon={<ArrowRight className="size-4" />} disabled>
+        Continue
+      </Button>
+    </div>
+  );
+}
+
+const CURRENT_RUNTIMES = [
+  { name: "Claude Code", detected: true, version: "1.0.12", color: "#B45309", label: ">_" },
+  { name: "Cursor", detected: false, color: "#171717", label: "▸" },
+  { name: "OpenCode", detected: true, version: "0.5.3", color: "#059669", label: "</>" },
+  { name: "Codex", detected: false, color: "#0369A1", label: "◎" },
+  { name: "Gemini CLI", detected: true, version: "0.1.0", color: "#4285F4", label: "✦" },
+  { name: "Hermes", detected: false, color: "#EA580C", label: "H" },
+  { name: "OpenClaw", detected: true, version: "0.2.1", color: "#7C3AED", label: "⊞", error: true },
+  { name: "Pi", detected: false, color: "#DB2777", label: "π" },
+];
+
+function CurrentStep2Runtime() {
+  return (
+    <div className="flex flex-col items-center gap-6 px-8 py-8">
+      <CurrentStepper current={2} />
+
+      <div className="text-center">
+        <h2 className="text-xl font-semibold text-text-primary">Runtimes Detected</h2>
+        <p className="mt-1 text-sm text-text-secondary">
+          Found 3 runtimes on your system · 1 needs attention
+        </p>
+        <p className="mt-3 text-xs leading-relaxed text-text-muted">
+          Runtimes power your Agents — each agent connects to a runtime to execute tasks.
+        </p>
+      </div>
+
+      <div className="grid w-full max-w-xl grid-cols-4 gap-3">
+        {CURRENT_RUNTIMES.map((rt) => {
+          const isWorking = rt.detected && !rt.error;
+          return (
+            <div
+              key={rt.name}
+              className={`relative flex min-h-[112px] flex-col items-start gap-2 rounded-xl border p-3 text-left ${
+                isWorking
+                  ? "border-accent bg-accent/10"
+                  : rt.error
+                    ? "border-warning/40 bg-warning-subtle/40"
+                    : "border-border opacity-50"
+              }`}
+            >
+              <div className="flex w-full items-center justify-between">
+                <div
+                  className="flex size-6 items-center justify-center rounded-md text-[10px] font-bold text-white"
+                  style={{ backgroundColor: rt.color }}
+                >
+                  {rt.label}
+                </div>
+                {isWorking ? <Check className="size-3 text-success" /> : null}
+                {rt.error ? <span className="text-[10px] font-medium text-warning">!</span> : null}
+                {!rt.detected ? <X className="size-3 text-text-muted" /> : null}
+              </div>
+              <div>
+                <div className="text-sm font-medium text-text-primary">{rt.name}</div>
+                <div className="text-[11px] text-text-muted">
+                  {isWorking
+                    ? `v${rt.version}`
+                    : rt.error
+                      ? `v${rt.version} · needs update`
+                      : "Not found"}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="flex items-center gap-3">
+        <Button variant="ghost" size="sm">
+          Skip for now
+        </Button>
+        <Button trailingIcon={<ArrowRight className="size-4" />}>Continue with 3 runtimes</Button>
+      </div>
+    </div>
+  );
+}
+
+const CURRENT_TEMPLATES = [
+  { name: "Code Reviewer", desc: "Reviews pull requests, flags risks, suggests fixes." },
+  { name: "Product Manager", desc: "Drafts PRDs, tracks tickets, writes release notes." },
+  { name: "Support Triage", desc: "Categorizes tickets, drafts replies, escalates." },
+  { name: "Research Assistant", desc: "Summarizes docs, finds sources, compares options." },
+];
+
+function CurrentStep3aTemplates() {
+  return (
+    <div className="flex flex-col items-center gap-6 px-8 py-8">
+      <CurrentStepper current={3} />
+      <div className="text-center">
+        <h2 className="text-xl font-semibold text-text-primary">Create your first Agent</h2>
+        <p className="mt-1 text-sm text-text-secondary">Choose a template to get started.</p>
+      </div>
+
+      <div className="grid w-full grid-cols-2 gap-3">
+        {CURRENT_TEMPLATES.map((tpl) => (
+          <button
+            key={tpl.name}
+            type="button"
+            className="flex items-start gap-3 rounded-xl border border-border p-4 text-left hover:border-foreground/30 hover:bg-surface-2"
+          >
+            <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-accent/10">
+              <Bot className="size-5 text-accent" />
+            </div>
+            <div className="min-w-0">
+              <div className="text-sm font-medium text-text-primary">{tpl.name}</div>
+              <div className="mt-0.5 line-clamp-2 text-xs text-text-muted">{tpl.desc}</div>
+            </div>
+          </button>
+        ))}
+      </div>
+
+      <button
+        type="button"
+        className="flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-border p-3 text-sm text-text-muted hover:border-foreground/30"
+      >
+        + Start from scratch
+      </button>
+      <Button variant="ghost" size="sm">
+        Skip for now
+      </Button>
+    </div>
+  );
+}
+
+function CurrentStep3bSettings() {
+  return (
+    <div className="flex flex-col items-center gap-6 px-8 py-8">
+      <CurrentStepper current={3} />
+      <div className="text-center">
+        <h2 className="text-xl font-semibold text-text-primary">Customize your Agent</h2>
+        <p className="mt-1 text-sm text-text-secondary">
+          Set a name, description, and connect a runtime.
+        </p>
+      </div>
+
+      <div className="w-full max-w-md space-y-4">
+        <div className="flex items-center gap-3 rounded-xl border border-border bg-surface-1 p-3">
+          <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-accent/10">
+            <Bot className="size-5 text-accent" />
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="text-xs text-text-muted">Based on template</div>
+            <div className="text-sm font-medium">Code Reviewer</div>
+          </div>
+        </div>
+
+        <FormField label="Agent Name">
+          <FormFieldControl>
+            <Input defaultValue="Code Reviewer" />
+          </FormFieldControl>
+        </FormField>
+
+        <FormField label="Description">
+          <FormFieldControl>
+            <textarea
+              rows={3}
+              defaultValue="Reviews pull requests, flags risks, suggests fixes."
+              className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+            />
+          </FormFieldControl>
+        </FormField>
+
+        <FormField label="Runtime">
+          <FormFieldControl>
+            <button
+              type="button"
+              className="flex h-10 w-full items-center justify-between rounded-lg border border-border bg-background px-3 text-sm"
+            >
+              <span className="flex items-center gap-2">
+                <span className="size-2 rounded-full bg-success" />
+                Claude Code
+              </span>
+              <ChevronDown className="size-4 text-text-muted" />
+            </button>
+          </FormFieldControl>
+        </FormField>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <Button variant="ghost" size="sm">
+          ← Back to templates
+        </Button>
+        <Button leadingIcon={<Sparkles className="size-4" />}>Create Agent</Button>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// PROPOSED FLOW — 1.5 steps: one onboarding screen, then land in the workspace
+// ---------------------------------------------------------------------------
+
+function ProposedStep1Combined() {
+  return (
+    <div className="flex flex-col items-center gap-6 px-8 py-10">
+      <div className="flex size-14 items-center justify-center rounded-2xl bg-surface-2">
+        <Building2 className="size-7 text-text-secondary" />
+      </div>
+      <div className="text-center">
+        <h2 className="text-xl font-semibold text-text-primary">Name your workspace</h2>
+        <p className="mt-1 text-sm text-text-secondary">
+          One step to get in. Invite teammates and pick agents from inside.
+        </p>
+      </div>
+
+      <div className="w-full max-w-sm space-y-4">
+        <FormField label="Workspace name">
+          <FormFieldControl>
+            <Input autoFocus placeholder="e.g. Acme Engineering" />
+          </FormFieldControl>
+        </FormField>
+
+        <div className="flex items-center gap-2 rounded-lg bg-surface-1 px-3 py-2.5">
+          <Check className="size-3.5 text-success" strokeWidth={3} />
+          <span className="text-xs text-text-secondary">
+            Detected <strong className="text-text-primary">3 runtimes</strong> on this Mac — Claude
+            Code, OpenCode, Gemini CLI
+          </span>
+          <TextLink href="#" size="xs" className="ml-auto shrink-0">
+            Details
+          </TextLink>
+        </div>
+
+        <div className="flex items-center justify-center gap-2 text-xs text-text-muted">
+          <LogIn className="size-3" />
+          Got an invite link?{" "}
+          <TextLink href="#" size="xs">
+            Join a workspace
+          </TextLink>
+        </div>
+      </div>
+
+      <Button size="lg" trailingIcon={<ArrowRight className="size-4" />}>
+        Continue
+      </Button>
+
+      <p className="text-[11px] text-text-muted">~15 seconds to your first message.</p>
+    </div>
+  );
+}
+
+function ProposedLandedWorkspace() {
+  return (
+    <div className="flex h-full flex-col bg-surface-0">
+      <div className="flex items-center gap-3 border-b border-border px-5 py-3">
+        <div className="flex size-6 items-center justify-center rounded-md bg-accent text-[11px] font-bold text-accent-foreground">
+          A
+        </div>
+        <div className="flex-1">
+          <div className="flex items-baseline gap-2">
+            <span className="text-sm font-semibold text-text-primary">Acme Engineering</span>
+            <span className="text-xs text-text-muted">· #general</span>
+          </div>
+        </div>
+        <Badge variant="outline" size="xs">
+          <Sparkles className="size-3" />1 agent ready
+        </Badge>
+      </div>
+
+      <div className="flex-1 space-y-4 overflow-auto px-5 py-4">
+        <Alert variant="info" className="gap-3">
+          <Users className="size-4" />
+          <div className="flex-1">
+            <AlertTitle>Bring your team along</AlertTitle>
+            <AlertDescription>
+              Share your invite link or send email invitations from workspace settings.
+            </AlertDescription>
+          </div>
+          <div className="flex shrink-0 items-center gap-2">
+            <Button variant="outline" size="xs">
+              Invite
+            </Button>
+            <button
+              type="button"
+              aria-label="Dismiss"
+              className="text-text-muted hover:text-text-primary"
+            >
+              <X className="size-3.5" />
+            </button>
+          </div>
+        </Alert>
+
+        <div className="flex items-start gap-3 rounded-lg bg-surface-1 p-4">
+          <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent/10">
+            <Bot className="size-5 text-accent" />
+          </div>
+          <div className="min-w-0 flex-1 space-y-2">
+            <div className="flex items-baseline gap-2">
+              <span className="text-sm font-semibold text-text-primary">Claude</span>
+              <Badge variant="secondary" size="xs">
+                <Zap className="size-3" /> via Claude Code
+              </Badge>
+              <span className="text-xs text-text-muted">· just now</span>
+            </div>
+            <p className="text-sm leading-relaxed text-text-secondary">
+              Hi! I'm your first teammate. I detected{" "}
+              <strong className="text-text-primary">Claude Code</strong> on your Mac and connected
+              as your default agent.
+            </p>
+            <div className="flex flex-wrap gap-2 pt-1">
+              <Badge variant="outline" size="sm">
+                @claude summarize this repo
+              </Badge>
+              <Badge variant="outline" size="sm">
+                @claude review my last PR
+              </Badge>
+            </div>
+          </div>
+        </div>
+
+        <EmptyState
+          className="border-dashed bg-surface-1/40 py-6"
+          icon={<MessageSquare className="size-6 text-text-muted" />}
+          title={<span className="text-base">Say hi to your agent</span>}
+          description={
+            <span className="text-xs">
+              Or create another one from the sidebar — browse templates, pick a runtime, done.
+            </span>
+          }
+          action={
+            <div className="flex items-center gap-2">
+              <Button variant="outline" size="sm">
+                Browse templates
+              </Button>
+              <Button size="sm" trailingIcon={<ArrowRight className="size-3.5" />}>
+                Try a prompt
+              </Button>
+            </div>
+          }
+        />
+      </div>
+
+      <div className="border-t border-border bg-surface-1 px-5 py-3">
+        <div className="flex items-center gap-2 rounded-lg border border-border bg-surface-0 px-3 py-2">
+          <span className="text-sm text-text-muted">Message #general or @mention an agent…</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// RATIONALE panel — shown alongside the flows for context
+// ---------------------------------------------------------------------------
+
+function RationalePanel() {
+  return (
+    <Card padding="lg" className="w-[640px] bg-surface-1">
+      <CardHeader>
+        <CardTitle className="text-lg">Why 1.5 steps instead of 3</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4 text-sm text-text-secondary">
+        <div>
+          <Label className="text-xs uppercase tracking-wide text-text-muted">The gap</Label>
+          <p className="mt-1">
+            Current flow mixes three kinds of work into one pipeline: organization config
+            (Workspace, one-time), machine probing (Runtime, environment-dependent), and a
+            high-frequency product action (Agent, repeatable). Only the first belongs in onboarding.
+          </p>
+        </div>
+        <div>
+          <Label className="text-xs uppercase tracking-wide text-text-muted">The change</Label>
+          <ul className="mt-1 list-disc space-y-1 pl-5">
+            <li>
+              <strong>Workspace + Runtime</strong> merged — scan runs in the background while the
+              user names the workspace; the result shows as a single confirmation line.
+            </li>
+            <li>
+              <strong>Invite members</strong> moved to a dismissible in-workspace banner — first
+              users rarely commit to inviting before they see value.
+            </li>
+            <li>
+              <strong>Agent creation</strong> moved out of onboarding — we auto-mount a default
+              agent based on the first detected runtime, so the user can @mention it immediately.
+              Template browsing stays available from the sidebar as a normal product action.
+            </li>
+          </ul>
+        </div>
+        <div>
+          <Label className="text-xs uppercase tracking-wide text-text-muted">What it enables</Label>
+          <p className="mt-1">
+            Time-to-first-message drops from 4 screens to 2. The positioning from the competitive
+            analysis — <em>"Agent as teammate"</em> — is reinforced because the user lands in a room
+            that already has a teammate in it, instead of assembling one first.
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// STORIES
+// ---------------------------------------------------------------------------
+
+export const CurrentFlow: Story = {
+  name: "Current · 4 screens (Workspace → Runtime → Agent templates → Agent settings)",
+  render: () => (
+    <ThemeRoot>
+      <div className="min-h-screen bg-surface-2 p-8">
+        <div className="mx-auto mb-6 max-w-[2800px]">
+          <h1 className="text-2xl font-semibold text-text-primary">
+            Current onboarding (as shipped in apps/slark)
+          </h1>
+          <p className="mt-1 text-sm text-text-secondary">
+            Three stepper labels, but four actual screens because the Agent step has an internal
+            template → settings split. User reaches their first conversation on screen 5.
+          </p>
+        </div>
+        <div className="flex gap-6 overflow-x-auto pb-6">
+          <WindowFrame label="Screen 1" sublabel="Workspace · create">
+            <CurrentStep1Workspace />
+          </WindowFrame>
+          <WindowFrame label="Screen 2" sublabel="Runtime · detection grid">
+            <CurrentStep2Runtime />
+          </WindowFrame>
+          <WindowFrame label="Screen 3" sublabel="Agent · pick template">
+            <CurrentStep3aTemplates />
+          </WindowFrame>
+          <WindowFrame label="Screen 4" sublabel="Agent · configure">
+            <CurrentStep3bSettings />
+          </WindowFrame>
+        </div>
+      </div>
+    </ThemeRoot>
+  ),
+};
+
+export const ProposedFlow: Story = {
+  name: "Proposed · 1.5 steps (Workspace + background scan → Workspace with default agent)",
+  render: () => (
+    <ThemeRoot>
+      <div className="min-h-screen bg-surface-2 p-8">
+        <div className="mx-auto mb-6 max-w-[2800px]">
+          <h1 className="text-2xl font-semibold text-text-primary">
+            Proposed onboarding (for review)
+          </h1>
+          <p className="mt-1 text-sm text-text-secondary">
+            One required screen. Runtime detection is implicit. Agent creation defers to the
+            workspace itself — a default agent is auto-mounted from the first detected runtime so
+            the user can send a message immediately.
+          </p>
+        </div>
+        <div className="flex gap-6 overflow-x-auto pb-6">
+          <WindowFrame label="Screen 1" sublabel="Workspace + implicit runtime scan">
+            <ProposedStep1Combined />
+          </WindowFrame>
+          <WindowFrame label="Screen 2" sublabel="Landed in #general · agent ready">
+            <ProposedLandedWorkspace />
+          </WindowFrame>
+        </div>
+      </div>
+    </ThemeRoot>
+  ),
+};
+
+export const SideBySide: Story = {
+  name: "Side by side · current vs proposed",
+  render: () => (
+    <ThemeRoot>
+      <div className="min-h-screen bg-surface-2 p-8">
+        <div className="mx-auto mb-6 max-w-[2800px]">
+          <h1 className="text-2xl font-semibold text-text-primary">
+            Onboarding comparison — review cut
+          </h1>
+          <p className="mt-1 text-sm text-text-secondary">
+            Top row: current shipped flow. Bottom row: proposed. Same viewport size so information
+            density is comparable.
+          </p>
+        </div>
+
+        <section className="mb-8">
+          <div className="mb-3 flex items-center gap-2">
+            <Badge variant="outline" size="sm">
+              Current
+            </Badge>
+            <span className="text-sm text-text-secondary">
+              4 screens · ~45s–90s to first message · 3 decisions before product value
+            </span>
+          </div>
+          <div className="flex gap-6 overflow-x-auto pb-6">
+            <WindowFrame label="1" sublabel="Workspace">
+              <CurrentStep1Workspace />
+            </WindowFrame>
+            <WindowFrame label="2" sublabel="Runtime">
+              <CurrentStep2Runtime />
+            </WindowFrame>
+            <WindowFrame label="3" sublabel="Agent templates">
+              <CurrentStep3aTemplates />
+            </WindowFrame>
+            <WindowFrame label="4" sublabel="Agent settings">
+              <CurrentStep3bSettings />
+            </WindowFrame>
+          </div>
+        </section>
+
+        <section>
+          <div className="mb-3 flex items-center gap-2">
+            <Badge
+              variant="accent"
+              size="sm"
+              className="bg-[var(--color-brand-subtle)] text-[var(--color-brand-primary)]"
+            >
+              Proposed
+            </Badge>
+            <span className="text-sm text-text-secondary">
+              2 screens · ~15s to first message · 1 decision, everything else inferred
+            </span>
+          </div>
+          <div className="flex gap-6 overflow-x-auto pb-6">
+            <WindowFrame label="1" sublabel="Workspace + implicit runtime scan">
+              <ProposedStep1Combined />
+            </WindowFrame>
+            <WindowFrame label="2" sublabel="Landed in #general">
+              <ProposedLandedWorkspace />
+            </WindowFrame>
+            <RationalePanel />
+          </div>
+        </section>
+      </div>
+    </ThemeRoot>
+  ),
+};
+
+export const Rationale: Story = {
+  name: "Rationale · designer notes",
+  render: () => (
+    <ThemeRoot>
+      <div className="min-h-screen bg-surface-2 p-8">
+        <div className="mx-auto max-w-[720px] space-y-6">
+          <div>
+            <h1 className="text-2xl font-semibold text-text-primary">
+              Onboarding review — rationale
+            </h1>
+            <p className="mt-1 text-sm text-text-secondary">
+              Context for reviewers before they open the Current / Proposed stories.
+            </p>
+          </div>
+
+          <RationalePanel />
+
+          <Card padding="lg" variant="outline">
+            <CardHeader>
+              <CardTitle className="text-lg">Open questions</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3 text-sm text-text-secondary">
+              <p>
+                <strong className="text-text-primary">Q1.</strong> If no runtimes are detected on
+                step 1, should we block Continue or still land the user in the workspace with an
+                empty-state "Install a runtime" card? (Recommendation: land them — the workspace can
+                also demo without a live agent.)
+              </p>
+              <p>
+                <strong className="text-text-primary">Q2.</strong> Should the default agent use the
+                first detected runtime alphabetically, or the one the user is most likely to have
+                configured credentials for? (Recommendation: alphabetical for determinism; revisit
+                with telemetry.)
+              </p>
+              <p>
+                <strong className="text-text-primary">Q3.</strong> The "Browse templates" entry
+                point — sidebar button, command palette, or empty-state CTA only? (Recommendation:
+                all three, starting with the empty-state so it's visible on day one.)
+              </p>
+            </CardContent>
+          </Card>
+
+          <Alert variant="info">
+            <Search className="size-4" />
+            <div>
+              <AlertTitle>Not wired to real flow yet</AlertTitle>
+              <AlertDescription>
+                This story is for review only. No changes to{" "}
+                <code className="font-mono">apps/slark/src/renderer/src/components/onboarding</code>{" "}
+                have been made. Once approved, the implementation will land in two follow-up PRs.
+              </AlertDescription>
+            </div>
+          </Alert>
+        </div>
+      </div>
+    </ThemeRoot>
+  ),
+};
diff --git a/competitive-analysis.md b/competitive-analysis.md
new file mode 100644
index 00000000..f602907b
--- /dev/null
+++ b/competitive-analysis.md
@@ -0,0 +1,345 @@
+# Nexu 竞品分析报告
+
+> **目标受众**：开发团队  
+> **产品定位**：Nexu — AI 协作平台  
+> **报告日期**：2026-04-15
+
+---
+
+## 1. 概述
+
+Nexu 是一个 AI 协作平台，旨在帮助开发团队通过 AI Agent 提升协作效率。本报告选取了 6 个与 Nexu 发展方向相似的产品进行对比分析，识别可借鉴的功能设计与产品策略，为 Nexu 的迭代方向提供参考。
+
+---
+
+## 2. 竞品概览
+
+| 竞品 | 定位 | 开源 | GitHub Stars | 定价模式 | 产品页面 |
+|------|------|------|-------------|---------|---------|
+| **Paperclip** | AI Agent 编排平台（零人力公司） | ✅ MIT | 46,700+ | 免费自托管 | [官网](https://paperclip.ing/) · [GitHub](https://github.com/paperclipai/paperclip) |
+| **Multica** | AI 原生项目管理（人+Agent 团队） | ✅ 开源 | 4,000+ | 免费自托管 / 云托管 | [官网](https://multica.ai/) · [GitHub](https://github.com/multica-ai/multica) |
+| **Paseo** | 跨设备 AI coding agent 编排 | ✅ AGPL-3.0 | — | 免费自托管 | [官网](https://paseo.sh/) · [GitHub](https://github.com/getpaseo/paseo) |
+| **Cursor** | AI 代码编辑器 | ❌ | — | 免费 / $20-$200/月 | [官网](https://cursor.com/) · [定价](https://cursor.com/pricing) |
+| **飞书话题群** | 团队协作与知识沉淀 | ❌ | — | 飞书套件内置 | [话题群指南](https://www.feishu.cn/hc/zh-CN/articles/360049068007) |
+| **AgentsRoom** | 多 Agent 桌面管理 IDE | ❌ | — | 免费 3 项目 / Pro | [官网](https://agentsroom.dev/) |
+
+---
+
+## 3. 六维度对比分析
+
+### 3.1 AI 能力深度
+
+| 竞品 | 模型支持 | 上下文能力 | 自主性 |
+|------|---------|-----------|--------|
+| **Paperclip** | 自带 Agent（BYO Agent） | Agent 跨心跳恢复上下文，不重启 | 高 — Agent 自主领取任务、执行、汇报 |
+| **Multica** | Claude Code, Codex, OpenClaw, OpenCode | 任务队列保持上下文 | 高 — Agent 主动认领任务、报告阻塞 |
+| **Paseo** | Claude Code, Codex, OpenCode | Git worktree 隔离分支上下文 | 中 — 需用户发起，Agent 在分支内自主执行 |
+| **Cursor** | Claude, GPT, Gemini 多模型切换 | 全代码库索引 | 中高 — Agent 模式可自主执行多步任务 |
+| **飞书话题群** | 飞书 AI 助手（有限） | 话题内聚合上下文 | 低 — 以人为主导 |
+| **AgentsRoom** | Claude, Codex, OpenCode, Gemini CLI, Aider | 每个 Agent 独立终端+系统提示 | 中 — 需用户分配角色，Agent 自主执行 |
+
+**对 Nexu 的启示**：
+- Paperclip 的**跨心跳上下文恢复**值得借鉴，避免 Agent 重启丢失进度
+- Cursor 的**全代码库索引**能力是开发者体验的关键差异点
+- Multica 的 **Agent 自主认领任务+报告阻塞**模式在团队协作中非常实用
+
+### 3.2 协作工作流
+
+| 竞品 | 协作模式 | 任务管理 | 治理与审批 |
+|------|---------|---------|-----------|
+| **Paperclip** | 组织架构建模（部门、角色、目标） | Ticket 系统，Agent 通过 Ticket 通讯 | 审批门控 + 配置版本化 + 回滚 |
+| **Multica** | 人+Agent 统一工作区，Activity Feed | 任务队列 + 状态追踪 + 看板 | 自定义审批流 |
+| **Paseo** | 跨设备远程协作 | 分支导向的任务隔离 | 无内置治理 |
+| **Cursor** | 单人为主，Team 计划支持共享 | 无内置任务管理 | 无 |
+| **飞书话题群** | 话题订阅 + 线程式讨论 | 无（需配合飞书其他模块） | 群管理权限 |
+| **AgentsRoom** | 多 Agent 并行，角色分工 | 项目级 Prompt 管理 | 无内置治理 |
+
+**对 Nexu 的启示**：
+- Paperclip 的**治理模型**（审批门控 + 配置回滚）是企业级产品的必备能力
+- Multica 的**人与 Agent 在同一工作流中并存**是最自然的协作模式
+- 飞书话题群的**订阅机制**可有效降低信息噪音，值得在 AI 协作场景中复用
+
+### 3.3 开发者体验（DX）
+
+| 竞品 | 安装/部署 | 扩展性 | 文档质量 |
+|------|----------|--------|---------|
+| **Paperclip** | 交互式安装引导，内嵌数据库或 Postgres | 自定义 Agent + 多公司支持 | 良好（GitHub README + 社区） |
+| **Multica** | Docker Compose / K8s / 云托管 | 自定义 Agent 后端 + API 开放 | 良好 |
+| **Paseo** | CLI daemon + 客户端自动连接 | 多 Provider 可扩展 | 中等 |
+| **Cursor** | 下载即用 | 插件生态（VS Code 兼容） | 优秀（官方文档 + 大量社区内容） |
+| **飞书话题群** | 飞书内置，零部署 | 飞书开放平台 Bot API | 优秀 |
+| **AgentsRoom** | macOS App 下载安装 | 自定义角色 + Prompt 模板 | 中等 |
+
+**对 Nexu 的启示**：
+- **零配置上手**是关键 — Cursor 和飞书在这点上遥遥领先
+- Paperclip 的交互式安装引导是自托管产品的好实践
+- 开放 API 和自定义 Agent 后端是开发者社区增长的基础
+
+### 3.4 知识管理与沉淀
+
+| 竞品 | 知识沉淀方式 | 可复用性 |
+|------|------------|---------|
+| **Paperclip** | 全链路追踪（指令、响应、工具调用、决策） | Ticket 历史可回溯 |
+| **Multica** | 技能库（Skill Library）持续积累 | 技能跨任务复用，越用越强 |
+| **Paseo** | Git 分支历史 | 代码级沉淀 |
+| **Cursor** | 对话历史 + 代码库上下文 | 有限，对话不易结构化复用 |
+| **飞书话题群** | 话题即知识单元，可搜索 | 话题可收藏、可转发 |
+| **AgentsRoom** | Prompt 模板库（按项目、按文件夹、Git 提交） | Prompt 跨项目复用 |
+
+**对 Nexu 的启示**：
+- Multica 的**技能库**是最有竞争力的沉淀模式 — 让 Agent 的能力随使用积累
+- Paperclip 的**全链路追踪**对调试和审计至关重要
+- 飞书的**话题即知识单元**概念可以应用到 AI 协作场景中
+
+### 3.5 集成能力
+
+| 竞品 | 工具链集成 | Agent 生态 |
+|------|-----------|-----------|
+| **Paperclip** | 自定义 Agent，支持任意 LLM | OpenClaw 生态 |
+| **Multica** | Claude Code, Codex, OpenClaw, OpenCode | 自动检测已安装 CLI |
+| **Paseo** | Claude Code, Codex, OpenCode | 多 Provider 统一接口 |
+| **Cursor** | VS Code 插件生态 + MCP 协议 | 内置多模型 |
+| **飞书话题群** | 飞书全家桶（文档、日历、审批等） | 飞书 Bot 开放平台 |
+| **AgentsRoom** | Claude, Codex, OpenCode, Gemini CLI, Aider | 自定义角色 |
+
+**对 Nexu 的启示**：
+- 支持**主流 Agent CLI 自动检测**（如 Multica）降低接入门槛
+- Cursor 的 **MCP 协议**是 AI 工具集成的新标准，值得关注
+- 与**现有 IM 工具**（飞书/Slack）的集成是团队采纳的关键
+
+### 3.6 产品成熟度
+
+| 竞品 | 阶段 | 社区 | 商业化 |
+|------|------|------|--------|
+| **Paperclip** | 快速增长期（46K+ stars） | 活跃开源社区 | 尚未商业化 |
+| **Multica** | 早期增长（4K+ stars） | 成长中 | 云托管版本 |
+| **Paseo** | 早期 | 小规模 | 无 |
+| **Cursor** | 成熟期（$2B ARR，1M+ 付费用户） | 大规模用户社区 | 成熟订阅制 |
+| **飞书话题群** | 成熟 | 企业用户基础 | 飞书套件定价 |
+| **AgentsRoom** | 早期 | 小规模 | Freemium |
+
+---
+
+## 4. 各竞品详细分析
+
+### 4.1 Paperclip — [官网](https://paperclip.ing/) · [GitHub](https://github.com/paperclipai/paperclip)
+
+**产品简介**：Paperclip 是一个开源的 AI Agent 编排平台，目标是让用户能够构建和运行"零人力公司"。它提供组织架构建模、预算管理、治理门控等企业级功能。
+
+**核心亮点**：
+- **组织架构即代码**：部门、角色、目标、预算全部可配置，Agent 在组织结构中运作
+- **原子性任务调度**：任务领取和预算扣减是原子操作，杜绝重复工作和超支
+- **全链路可追踪**：每条指令、响应、工具调用和决策都有完整记录
+- **跨心跳上下文恢复**：Agent 断线后可恢复同一任务上下文，而非重新开始
+- **多公司隔离**：单实例支持多组织，数据完全隔离
+
+**不足**：
+- 定位偏"自动化公司"，对人机协作场景支持较弱
+- 无云托管版本，部署门槛较高
+- 对非技术用户不友好
+
+**对 Nexu 的借鉴**：
+- 治理门控 + 配置版本化 + 回滚机制
+- 原子性任务调度防止资源浪费
+- 全链路追踪能力
+
+---
+
+### 4.2 Multica — [官网](https://multica.ai/) · [GitHub](https://github.com/multica-ai/multica)
+
+**产品简介**：Multica 是一个 AI 原生项目管理平台，核心理念是将 coding agent 视为真正的团队成员。Agent 有自己的 profile，可以认领任务、报告状态、评论和更新进度。
+
+**核心亮点**：
+- **Agent 即队友**：Agent 出现在分配选择器中，分配任务给 Agent 和分配给同事的体验完全一致
+- **自主执行**：Agent 不只是响应 Prompt，而是主动认领任务、报告阻塞、留评论、更新状态
+- **技能库**：可复用的 Agent 能力随时间积累，越用越强
+- **统一活动流**：人和 Agent 的工作在同一个 Feed 中展示
+- **完全可审计**：每一行代码可审计，Agent 决策路径透明
+
+**不足**：
+- 社区规模较小（4K stars），生态尚未成熟
+- 主要面向 coding agent，非编码场景覆盖有限
+- 文档和教程仍在完善中
+
+**对 Nexu 的借鉴**：
+- **人+Agent 统一工作区**是最自然的协作形态
+- **技能库**是强大的飞轮效应——使用越多，Agent 越强
+- Agent 的 Profile 和状态系统设计
+
+---
+
+### 4.3 Paseo — [官网](https://paseo.sh/) · [GitHub](https://github.com/getpaseo/paseo)
+
+**产品简介**：Paseo 是一个开源的跨设备 AI coding agent 编排平台，支持从手机、桌面和 CLI 远程管理 Agent。基于 daemon 架构，本地运行，隐私优先。
+
+**核心亮点**：
+- **跨设备访问**：手机上也能管理和监控 Agent 的工作进度
+- **Git Worktree 原生支持**：并行 Agent 任务在隔离分支中运行，安全性高
+- **多 Provider 统一接口**：Claude Code, Codex, OpenCode 在同一界面管理
+- **语音输入**：设备端语音处理，解放双手
+- **E2E 加密中继**：远程访问时保证安全
+- **零遥测、零追踪**：隐私优先的设计哲学
+
+**不足**：
+- 无内置任务管理或项目管理功能
+- 协作能力有限，偏向个人使用
+- 社区和生态较小
+
+**对 Nexu 的借鉴**：
+- **跨设备体验**是差异化亮点——移动端监控 Agent 工作是刚需
+- **Git Worktree 隔离**是多 Agent 并行的安全保障
+- 隐私优先的设计赢得开发者信任
+
+---
+
+### 4.4 Cursor — [官网](https://cursor.com/) · [定价](https://cursor.com/pricing)
+
+**产品简介**：Cursor 是基于 VS Code 构建的 AI 代码编辑器，将 AI 深度集成到编辑体验的每个环节。目前是 AI 编码工具领域的市场领导者，拥有 100 万+付费用户和 $2B ARR。
+
+**核心亮点**：
+- **全代码库索引**：AI 基于完整的项目结构和文件依赖关系回答问题
+- **多文件编辑**（Composer）：跨 20+ 文件的重构、重命名、API 更新一次完成
+- **Agent 模式**：可自主执行多步任务，显著提升吞吐量
+- **多模型灵活切换**：Claude 做推理、GPT 做生成、Gemini 做快速迭代
+- **VS Code 兼容生态**：无缝使用已有插件
+- **成熟的定价体系**：从免费到 $200/月，覆盖所有用户层级
+
+**不足**：
+- 偏向个人开发者，团队协作能力较弱
+- Agent 模式仍在编辑器范围内，无法管理外部工作流
+- 闭源，无法自定义核心行为
+- 高级功能定价不低
+
+**对 Nexu 的借鉴**：
+- **全代码库索引**是 AI 理解项目的基础能力
+- **多模型切换**让用户为不同任务选择最优模型
+- 阶梯式定价策略和用户增长路径
+
+---
+
+### 4.5 飞书话题群 — [话题群指南](https://www.feishu.cn/hc/zh-CN/articles/360049068007) · [使用话题群](https://www.feishu.cn/hc/zh-CN/articles/360049067735)
+
+**产品简介**：飞书话题群是飞书即时通讯中的一种群组模式，所有内容以话题形式聚合展示，成员可发布、回复和订阅感兴趣的话题。
+
+**核心亮点**：
+- **话题即知识单元**：每个话题自成一个讨论线程，上下文天然聚合
+- **订阅机制降噪**：只关注感兴趣的话题，不关心的讨论不会发通知
+- **零学习成本**：飞书用户无需额外学习，聊天即协作
+- **与飞书生态深度打通**：文档、日历、审批、Bot 等模块无缝联动
+- **知识可搜索、可收藏**：话题沉淀为可检索的知识资产
+
+**不足**：
+- 无 AI Agent 能力（飞书 AI 助手功能有限）
+- 不面向开发场景，无代码相关功能
+- 话题量大时信息组织仍有挑战
+- 封闭生态，依赖飞书平台
+
+**对 Nexu 的借鉴**：
+- **话题+订阅**模式是管理 AI 协作信息流的绝佳方案
+- **零学习成本**的交互设计是产品采纳的关键
+- 将 AI 对话/任务结构化为可搜索的"话题"知识单元
+
+---
+
+### 4.6 AgentsRoom — [官网](https://agentsroom.dev/) · [Agent 角色](https://agentsroom.dev/agents)
+
+**产品简介**：AgentsRoom 是一个 macOS 原生桌面应用，为 AI coding agent 提供可视化管理界面。支持 13 种预设角色，每个 Agent 有独立终端和系统提示。
+
+**核心亮点**：
+- **13 种专业角色**：架构师、全栈、前端、后端、移动端、DevOps、QA、安全、PM、营销、Git 专家、SEO、本地化
+- **可视化状态监控**：颜色编码状态指示（思考中/完成/等待输入）
+- **独立终端**：每个 Agent 10K 行回滚、语法高亮、可点击链接
+- **Prompt 模板库**：按项目/文件夹组织，可 Git 提交
+- **移动端通知**：Agent 完成或卡住时手机推送
+- **多 Agent 支持**：Claude, Codex, OpenCode, Gemini CLI, Aider
+
+**不足**：
+- 仅支持 macOS
+- 无内置协作或项目管理功能
+- 偏向 Agent 管理 UI，缺乏深层工作流编排
+- 社区较小
+
+**对 Nexu 的借鉴**：
+- **角色系统+专属 System Prompt** 是组织多 Agent 的直观方式
+- **状态可视化**（思考中/完成/等待）是多 Agent 场景的基本需求
+- **Prompt 模板管理**帮助团队沉淀最佳实践
+
+---
+
+## 5. 对比矩阵总结
+
+评分标准：⭐ 弱 / ⭐⭐ 一般 / ⭐⭐⭐ 良好 / ⭐⭐⭐⭐ 优秀 / ⭐⭐⭐⭐⭐ 卓越
+
+| 维度 | Paperclip | Multica | Paseo | Cursor | 飞书话题群 | AgentsRoom |
+|------|-----------|---------|-------|--------|-----------|------------|
+| AI 能力深度 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐ | ⭐⭐⭐ |
+| 协作工作流 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐ |
+| 开发者体验 | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
+| 知识沉淀 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
+| 集成能力 | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
+| 产品成熟度 | ⭐⭐⭐ | ⭐⭐ | ⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐ |
+
+---
+
+## 6. Nexu 改进建议
+
+### 6.1 Quick Wins（1-2 周可落地）
+
+| 优先级 | 建议 | 参考竞品 | 预期效果 |
+|--------|------|---------|---------|
+| P0 | **多 Agent 状态可视化**：实时显示每个 Agent 的状态（思考中/执行中/完成/阻塞） | AgentsRoom | 降低多 Agent 管理的认知负担 |
+| P0 | **话题式信息组织**：将 AI 对话/任务按话题聚合，支持订阅和过滤 | 飞书话题群 | 减少信息噪音，提升信息获取效率 |
+| P1 | **Prompt 模板库**：团队共享的 Prompt 模板，按项目组织 | AgentsRoom | 沉淀最佳实践，降低新人上手成本 |
+
+### 6.2 中期规划（1-3 个月）
+
+| 优先级 | 建议 | 参考竞品 | 预期效果 |
+|--------|------|---------|---------|
+| P0 | **人+Agent 统一工作区**：Agent 作为团队成员出现在任务系统中，可分配/追踪 | Multica | 最自然的人机协作形态 |
+| P0 | **技能库系统**：Agent 的能力模块化、可复用、可积累 | Multica | 构建飞轮效应，越用越强 |
+| P1 | **治理与审批门控**：关键操作需审批，配置变更可回滚 | Paperclip | 满足企业级安全和合规需求 |
+| P1 | **全链路追踪**：记录 Agent 的每一步决策和操作 | Paperclip | 调试、审计、问责 |
+| P2 | **Git Worktree 隔离**：多 Agent 并行任务在隔离分支中运行 | Paseo | 提升多 Agent 并行的安全性 |
+
+### 6.3 长期战略（3-6 个月）
+
+| 优先级 | 建议 | 参考竞品 | 预期效果 |
+|--------|------|---------|---------|
+| P0 | **全代码库索引 + 多模型支持**：深度理解项目上下文，灵活切换最优模型 | Cursor | 核心 AI 能力的质变 |
+| P1 | **跨设备体验**：移动端监控和管理 Agent 工作 | Paseo | 满足随时随地查看进度的需求 |
+| P1 | **开放 Agent 生态**：支持自定义 Agent 后端 + 主流 CLI 自动检测 | Multica | 扩大开发者社区和生态 |
+| P2 | **MCP 协议支持**：对接 AI 工具集成新标准 | Cursor | 面向未来的集成能力 |
+
+---
+
+## 7. 总结
+
+### 核心发现
+
+1. **协作是主战场**：Paperclip 和 Multica 代表了两种协作范式——"Agent 自治组织"和"人+Agent 团队"。对于 Nexu 的 AI 协作平台定位，Multica 的"Agent 即队友"模式更贴合实际团队需求。
+
+2. **知识沉淀是护城河**：Multica 的技能库和飞书的话题模式都展示了结构化沉淀的价值。AI 协作产生的知识如果不能有效沉淀和复用，就是一次性消耗。
+
+3. **开发者体验决定采纳速度**：Cursor 的成功证明了"零配置 + 深度集成"的威力。Nexu 需要在上手体验上做到极致简单。
+
+4. **治理能力是企业级的门票**：Paperclip 的审批门控、配置回滚、全链路追踪是面向企业客户的必备能力。
+
+5. **跨设备和移动端是差异化机会**：Paseo 开辟了"手机管 Agent"的场景，这在其他竞品中尚未普及。
+
+### Nexu 的差异化路径建议
+
+Nexu 应聚焦于成为**"开发团队的 AI 协作中枢"**——结合 Multica 的人+Agent 协作模式、Paperclip 的企业级治理、飞书的信息组织方式、以及 Cursor 级别的开发者体验。关键是避免成为又一个"Agent 管理 UI"，而是真正解决团队协作中的信息流转、知识沉淀和决策追踪问题。
+
+---
+
+## Sources
+
+- [Paperclip 官网](https://paperclip.ing/)
+- [Paperclip GitHub](https://github.com/paperclipai/paperclip)
+- [Multica 官网](https://multica.ai/)
+- [Multica GitHub](https://github.com/multica-ai/multica)
+- [Paseo GitHub](https://github.com/getpaseo/paseo)
+- [Cursor 官网定价](https://cursor.com/pricing)
+- [飞书话题群指南](https://www.feishu.cn/hc/zh-CN/articles/360049068007)
+- [AgentsRoom](https://agentsroom.dev/)
+- [AgentsRoom vs Paseo](https://agentsroom.dev/compare/paseo)