diff --git a/app-preview-awaiting.png b/app-preview-awaiting.png
new file mode 100644
index 0000000000..d62d670c7c
Binary files /dev/null and b/app-preview-awaiting.png differ
diff --git a/app-preview-completed.png b/app-preview-completed.png
new file mode 100644
index 0000000000..b58a127754
Binary files /dev/null and b/app-preview-completed.png differ
diff --git a/app-preview-current.png b/app-preview-current.png
new file mode 100644
index 0000000000..fce343386e
Binary files /dev/null and b/app-preview-current.png differ
diff --git a/app-preview-full.png b/app-preview-full.png
new file mode 100644
index 0000000000..0be1f673c3
Binary files /dev/null and b/app-preview-full.png differ
diff --git a/app-preview-pending.png b/app-preview-pending.png
new file mode 100644
index 0000000000..eb6771e60c
Binary files /dev/null and b/app-preview-pending.png differ
diff --git a/app-preview-plan-ready.png b/app-preview-plan-ready.png
new file mode 100644
index 0000000000..e614338535
Binary files /dev/null and b/app-preview-plan-ready.png differ
diff --git a/apps/landing/src/components/AppPreview/AppPreview.tsx b/apps/landing/src/components/AppPreview/AppPreview.tsx
deleted file mode 100644
index a0b646d6c6..0000000000
--- a/apps/landing/src/components/AppPreview/AppPreview.tsx
+++ /dev/null
@@ -1,483 +0,0 @@
-"use client";
-
-import { useMemo, useState } from "react";
-import {
-  ArrowDownIcon,
-  ArrowDownUpIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  CornerDownLeftIcon,
-  EyeIcon,
-  FolderIcon,
-  GitBranchIcon,
-  GlobeIcon,
-  ImageIcon,
-  LockIcon,
-  PencilIcon,
-  PlusIcon,
-  SearchIcon,
-  ShieldIcon,
-  TerminalIcon,
-  WrenchIcon,
-  ZapIcon,
-} from "lucide-react";
-import {
-  ACCESS_LABELS,
-  MODELS,
-  previewProjects,
-  previewThreads,
-  previewTurns,
-  type PreviewAccessMode,
-  type PreviewTurn,
-} from "./data";
-
-type ToolCallKind = "command" | "read" | "edit" | "search" | "fetch";
-
-const TOOL_ICONS: Record<ToolCallKind, typeof TerminalIcon> = {
-  command: TerminalIcon,
-  read: EyeIcon,
-  edit: PencilIcon,
-  search: SearchIcon,
-  fetch: GlobeIcon,
-};
-
-const ACCESS_ICONS: Record<PreviewAccessMode, typeof ShieldIcon> = {
-  "approval-required": ShieldIcon,
-  "auto-accept-edits": LockIcon,
-  "full-access": ZapIcon,
-};
-
-const ACCESS_ACCENTS: Record<PreviewAccessMode, string> = {
-  "approval-required": "text-sunbyte",
-  "auto-accept-edits": "text-curious-sky",
-  "full-access": "text-rebel-mint",
-};
-
-const MODEL_DOT_BG: Record<"fresh-syntax" | "rebel-mint" | "dream-shift" | "curious-sky", string> =
-  {
-    "fresh-syntax": "bg-fresh-syntax",
-    "rebel-mint": "bg-rebel-mint",
-    "dream-shift": "bg-dream-shift",
-    "curious-sky": "bg-curious-sky",
-  };
-
-function ProjectIcon({ icon }: { icon: "marcode" | "round" | "lawn" | "folder" }) {
-  if (icon === "marcode") {
-    return (
-      <span className="grid size-5 shrink-0 place-items-center rounded-md bg-fresh-syntax/15 text-fresh-syntax">
-        <span
-          className="text-[10px] font-semibold leading-none"
-          style={{ fontFamily: "var(--font-heading)" }}
-        >
-          M
-        </span>
-      </span>
-    );
-  }
-  if (icon === "round") {
-    return (
-      <span className="grid size-5 shrink-0 place-items-center rounded-md bg-curious-sky/15 text-curious-sky">
-        <span className="block size-2 rounded-full border-2 border-current" />
-      </span>
-    );
-  }
-  if (icon === "lawn") {
-    return (
-      <span className="grid size-5 shrink-0 place-items-center rounded-md bg-rebel-mint/15 text-rebel-mint">
-        <svg viewBox="0 0 24 24" className="size-3" aria-hidden>
-          <path d="m3 18 2-10 4.4 4.4L12 4l2.6 8.4L19 8l2 10Z" fill="currentColor" />
-        </svg>
-      </span>
-    );
-  }
-  return (
-    <span className="grid size-5 shrink-0 place-items-center rounded-md bg-dream-shift/15 text-dream-shift">
-      <FolderIcon className="size-3" />
-    </span>
-  );
-}
-
-function ToolCallRow({ call }: { call: { kind: ToolCallKind; heading: string; preview: string } }) {
-  const Icon = TOOL_ICONS[call.kind];
-  return (
-    <div className="flex items-start gap-2 rounded-md border border-border/40 bg-background/60 px-2.5 py-1.5">
-      <Icon className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
-      <div className="min-w-0 flex-1">
-        <div className="text-[11px] font-medium text-foreground/90">{call.heading}</div>
-        <div className="truncate font-mono text-[11px] text-muted-foreground">{call.preview}</div>
-      </div>
-    </div>
-  );
-}
-
-function TurnView({ turn }: { turn: PreviewTurn }) {
-  if (turn.type === "user") {
-    return (
-      <div className="flex justify-end">
-        <div className="max-w-[78%] rounded-2xl rounded-tr-md border border-fresh-syntax/25 bg-fresh-syntax/10 px-3.5 py-2 text-[13px] leading-relaxed text-foreground/95">
-          {turn.text}
-        </div>
-      </div>
-    );
-  }
-
-  if (turn.type === "tool") {
-    return (
-      <div className="flex items-start gap-3">
-        <span className="mt-0.5 grid size-6 shrink-0 place-items-center rounded-full bg-dream-shift/15 text-dream-shift">
-          <WrenchIcon className="size-3.5" />
-        </span>
-        <div className="min-w-0 flex-1 space-y-1.5">
-          <div className="text-[11px] font-medium text-muted-foreground">{turn.title}</div>
-          <div className="space-y-1.5">
-            {turn.calls.map((call, i) => (
-              <ToolCallRow key={i} call={call} />
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex items-start gap-3">
-      <span className="mt-0.5 grid size-6 shrink-0 place-items-center rounded-full bg-fresh-syntax/15 text-fresh-syntax">
-        <span
-          className="text-[10px] font-semibold leading-none"
-          style={{ fontFamily: "var(--font-heading)" }}
-        >
-          M
-        </span>
-      </span>
-      <div className="min-w-0 flex-1 text-[13px] leading-relaxed text-foreground/85">
-        {turn.text}
-      </div>
-    </div>
-  );
-}
-
-function StatusDot({ status }: { status: "Working" | "Completed" }) {
-  if (status === "Working") {
-    return (
-      <span className="relative inline-flex size-1.5 items-center justify-center">
-        <span className="absolute inline-flex size-full animate-ping rounded-full bg-fresh-syntax/40" />
-        <span className="relative inline-flex size-1.5 rounded-full bg-fresh-syntax" />
-      </span>
-    );
-  }
-  return <span className="inline-flex size-1.5 rounded-full bg-rebel-mint" />;
-}
-
-function PopoverButton({
-  label,
-  value,
-  icon,
-  accent,
-}: {
-  label: string;
-  value: string;
-  icon?: React.ReactNode;
-  accent?: string;
-}) {
-  return (
-    <button
-      type="button"
-      tabIndex={-1}
-      className={`group flex shrink-0 items-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-[11px] text-muted-foreground transition-colors hover:border-border hover:bg-background/60 hover:text-foreground ${accent ?? ""}`}
-      aria-label={label}
-    >
-      {icon}
-      <span className="font-medium text-foreground/85">{value}</span>
-      <ChevronDownIcon className="size-3 opacity-60" />
-    </button>
-  );
-}
-
-export function AppPreview() {
-  const [activeThreadId, setActiveThreadId] = useState(previewThreads[0]!.id);
-  const [activeModel, setActiveModel] = useState(MODELS[0]!.model);
-  const [collapsedProjects, setCollapsedProjects] = useState<Set<string>>(new Set());
-
-  const activeThread = useMemo(
-    () => previewThreads.find((t) => t.id === activeThreadId) ?? previewThreads[0]!,
-    [activeThreadId],
-  );
-  const activeTurns = previewTurns[activeThreadId] ?? [];
-  const AccessIcon = ACCESS_ICONS[activeThread.access];
-  const accessAccent = ACCESS_ACCENTS[activeThread.access];
-
-  const modelMeta = MODELS.find((m) => m.model === activeModel) ?? MODELS[0]!;
-
-  const toggleProject = (projectId: string) => {
-    setCollapsedProjects((prev) => {
-      const next = new Set(prev);
-      if (next.has(projectId)) next.delete(projectId);
-      else next.add(projectId);
-      return next;
-    });
-  };
-
-  return (
-    <div className="relative w-full">
-      {/* Decorative glow */}
-      <div className="pointer-events-none absolute -inset-x-12 -top-12 -bottom-12 -z-10">
-        <div className="absolute -left-24 top-12 size-72 rounded-full bg-fresh-syntax/10 blur-3xl" />
-        <div className="absolute -right-20 bottom-0 size-80 rounded-full bg-curious-sky/10 blur-3xl" />
-      </div>
-
-      <div className="overflow-hidden rounded-2xl border border-border/60 bg-noir/80 shadow-[0_30px_120px_-30px_rgba(119,230,233,0.25)] backdrop-blur-sm">
-        <div className="flex h-[600px] min-h-0">
-          {/* ── Sidebar ─────────────────────────────────────────── */}
-          <aside className="flex w-[260px] shrink-0 flex-col border-r border-border/50 bg-background/40">
-            {/* Top bar with traffic lights */}
-            <div className="flex items-center gap-3 border-b border-border/50 px-3 py-2.5">
-              <div className="flex items-center gap-1.5" aria-hidden>
-                <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="flex items-center gap-1.5">
-                <span
-                  className="text-[12px] font-medium tracking-tight"
-                  style={{ fontFamily: "var(--font-heading)" }}
-                >
-                  MarCode
-                </span>
-                <span className="rounded bg-fresh-syntax/15 px-1.5 py-0.5 text-[9px] font-semibold tracking-wider text-fresh-syntax">
-                  BETA
-                </span>
-              </div>
-            </div>
-
-            {/* Search */}
-            <div className="px-3 py-2">
-              <button
-                type="button"
-                tabIndex={-1}
-                aria-hidden
-                className="flex w-full items-center gap-2 rounded-md border border-border/40 bg-background/40 px-2.5 py-1.5 text-[12px] text-muted-foreground transition-colors hover:border-border/70"
-              >
-                <SearchIcon className="size-3.5" />
-                <span className="flex-1 text-left">Search</span>
-                <span className="rounded border border-border/60 px-1.5 py-px text-[10px]">⌘K</span>
-              </button>
-            </div>
-
-            {/* Section header */}
-            <div className="flex items-center justify-between px-4 pt-2 pb-1">
-              <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-                Projects
-              </span>
-              <div className="flex items-center gap-1 text-muted-foreground">
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  aria-label="Sort projects"
-                  className="grid size-5 place-items-center rounded transition-colors hover:bg-background/60 hover:text-foreground"
-                >
-                  <ArrowDownUpIcon className="size-3" />
-                </button>
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  aria-label="New thread"
-                  className="grid size-5 place-items-center rounded transition-colors hover:bg-background/60 hover:text-foreground"
-                >
-                  <PlusIcon className="size-3" />
-                </button>
-              </div>
-            </div>
-
-            {/* Project list */}
-            <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-3">
-              {previewProjects.map((project) => {
-                const isCollapsed = collapsedProjects.has(project.id);
-                const projectThreads = project.threads
-                  .map((id) => previewThreads.find((t) => t.id === id))
-                  .filter((t): t is NonNullable<typeof t> => Boolean(t));
-
-                return (
-                  <div key={project.id} className="mt-1">
-                    <button
-                      type="button"
-                      onClick={() => toggleProject(project.id)}
-                      className="group flex w-full items-center gap-1.5 rounded-md px-1.5 py-1 transition-colors hover:bg-background/40"
-                      aria-expanded={!isCollapsed}
-                    >
-                      <ChevronRightIcon
-                        className={`size-3 shrink-0 text-muted-foreground transition-transform ${isCollapsed ? "" : "rotate-90"}`}
-                      />
-                      <ProjectIcon icon={project.icon} />
-                      <span className="truncate text-[12px] font-medium text-foreground/90">
-                        {project.title}
-                      </span>
-                    </button>
-
-                    {!isCollapsed && (
-                      <div className="mt-0.5 ml-3 border-l border-border/30 pl-1">
-                        {projectThreads.map((thread) => {
-                          const active = thread.id === activeThreadId;
-                          return (
-                            <button
-                              key={thread.id}
-                              type="button"
-                              onClick={() => setActiveThreadId(thread.id)}
-                              className={`group flex w-full items-start gap-1.5 rounded-md px-1.5 py-1.5 text-left transition-colors ${
-                                active
-                                  ? "bg-fresh-syntax/10 text-foreground"
-                                  : "text-muted-foreground hover:bg-background/40 hover:text-foreground/90"
-                              }`}
-                            >
-                              <div className="min-w-0 flex-1 space-y-0.5">
-                                <div className="flex items-start gap-1.5">
-                                  <span className="line-clamp-2 flex-1 text-[11.5px] leading-snug">
-                                    {thread.title}
-                                  </span>
-                                </div>
-                                <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground/80">
-                                  {thread.status && <StatusDot status={thread.status} />}
-                                  <span>{thread.age}</span>
-                                </div>
-                              </div>
-                            </button>
-                          );
-                        })}
-                      </div>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          </aside>
-
-          {/* ── Main pane ───────────────────────────────────────── */}
-          <main className="flex min-w-0 flex-1 flex-col bg-background/20">
-            {/* Header */}
-            <header className="flex items-center gap-3 border-b border-border/50 px-5 py-3">
-              <div className="min-w-0 flex-1">
-                <div className="truncate text-[13px] font-medium text-foreground/95">
-                  {activeThread.title}
-                </div>
-                <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted-foreground">
-                  <ProjectIcon
-                    icon={
-                      previewProjects.find((p) => p.id === activeThread.projectId)?.icon ?? "folder"
-                    }
-                  />
-                  <span>{previewProjects.find((p) => p.id === activeThread.projectId)?.title}</span>
-                  <span>·</span>
-                  <span>{activeThread.age}</span>
-                </div>
-              </div>
-              {activeThread.status === "Working" ? (
-                <span className="flex items-center gap-1.5 rounded-full border border-fresh-syntax/30 bg-fresh-syntax/10 px-2 py-0.5 text-[10px] font-medium text-fresh-syntax">
-                  <StatusDot status="Working" />
-                  Working
-                </span>
-              ) : activeThread.status === "Completed" ? (
-                <span className="flex items-center gap-1.5 rounded-full border border-rebel-mint/30 bg-rebel-mint/10 px-2 py-0.5 text-[10px] font-medium text-rebel-mint">
-                  <StatusDot status="Completed" />
-                  Completed
-                </span>
-              ) : null}
-            </header>
-
-            {/* Timeline */}
-            <div className="min-h-0 flex-1 overflow-y-auto">
-              <div className="space-y-5 px-5 py-5">
-                {activeTurns.length === 0 ? (
-                  <div className="flex h-full items-center justify-center pt-16 text-[13px] text-muted-foreground">
-                    Send a prompt to begin a new turn.
-                  </div>
-                ) : (
-                  activeTurns.map((turn, i) => <TurnView key={i} turn={turn} />)
-                )}
-                {activeThread.status === "Working" && (
-                  <div className="flex items-center gap-2 pt-1 text-[11px] text-muted-foreground">
-                    <span className="size-1.5 animate-pulse rounded-full bg-fresh-syntax" />
-                    Working...
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Composer */}
-            <div className="border-t border-border/50 bg-background/40 p-3">
-              <div className="rounded-xl border border-border/60 bg-noir/40 p-3">
-                <textarea
-                  key={activeThreadId}
-                  defaultValue={activeThread.composerText}
-                  placeholder="Send a message…"
-                  rows={2}
-                  className="w-full resize-none border-none bg-transparent text-[13px] leading-relaxed text-foreground/95 placeholder:text-muted-foreground/70 focus:outline-none"
-                />
-
-                <div className="mt-2 flex flex-wrap items-center gap-1 border-t border-border/40 pt-2">
-                  {/* Model picker */}
-                  <div className="relative">
-                    <button
-                      type="button"
-                      tabIndex={-1}
-                      className="group flex shrink-0 items-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-[11px] text-muted-foreground transition-colors hover:border-border hover:bg-background/60 hover:text-foreground"
-                    >
-                      <span
-                        className={`size-1.5 rounded-full ${MODEL_DOT_BG[modelMeta.accent]}`}
-                        aria-hidden
-                      />
-                      <span className="font-medium text-foreground/85">{activeModel}</span>
-                      <ChevronDownIcon className="size-3 opacity-60" />
-                    </button>
-                  </div>
-
-                  <PopoverButton
-                    label="Effort"
-                    value="Medium"
-                    icon={<ZapIcon className="size-3 text-sunbyte" />}
-                  />
-                  <PopoverButton
-                    label="Access"
-                    value={ACCESS_LABELS[activeThread.access]}
-                    icon={<AccessIcon className={`size-3 ${accessAccent}`} />}
-                  />
-
-                  <div className="ml-auto flex items-center gap-1">
-                    <button
-                      type="button"
-                      tabIndex={-1}
-                      aria-hidden
-                      className="grid size-7 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-background/60 hover:text-foreground"
-                    >
-                      <ImageIcon className="size-3.5" />
-                    </button>
-                    <button
-                      type="button"
-                      tabIndex={-1}
-                      aria-hidden
-                      className="flex items-center gap-1.5 rounded-md bg-fresh-syntax px-2.5 py-1 text-[11px] font-medium text-noir transition-opacity hover:opacity-90"
-                    >
-                      <span>Send</span>
-                      <CornerDownLeftIcon className="size-3" />
-                    </button>
-                  </div>
-                </div>
-              </div>
-
-              {/* Checkout bar */}
-              <div className="mt-2 flex flex-wrap items-center gap-2 rounded-md border border-border/40 bg-background/40 px-2.5 py-1.5 text-[11px] text-muted-foreground">
-                <FolderIcon className="size-3 shrink-0" />
-                <span className="font-medium text-foreground/80">{activeThread.worktree}</span>
-                <span className="text-border">·</span>
-                <GitBranchIcon className="size-3 shrink-0" />
-                <span className="font-medium text-foreground/80">{activeThread.branch}</span>
-                <span className="ml-auto flex items-center gap-1 text-[10px] text-muted-foreground/80">
-                  <ArrowDownIcon className="size-3" />
-                  <span>Pull</span>
-                </span>
-              </div>
-            </div>
-          </main>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/landing/src/components/AppPreview/data.ts b/apps/landing/src/components/AppPreview/data.ts
deleted file mode 100644
index 3cfd76eb28..0000000000
--- a/apps/landing/src/components/AppPreview/data.ts
+++ /dev/null
@@ -1,353 +0,0 @@
-export type PreviewAccessMode = "approval-required" | "auto-accept-edits" | "full-access";
-
-export type PreviewThread = {
-  id: string;
-  projectId: string;
-  title: string;
-  age: string;
-  branch: string;
-  worktree: string;
-  access: PreviewAccessMode;
-  composerText: string;
-  status?: "Working" | "Completed";
-};
-
-export type PreviewProject = {
-  id: string;
-  title: string;
-  icon: "marcode" | "round" | "lawn" | "folder";
-  threads: string[];
-};
-
-export type PreviewTurn =
-  | { type: "user"; text: string }
-  | { type: "assistant"; text: string }
-  | {
-      type: "tool";
-      title: string;
-      calls: Array<{
-        kind: "command" | "read" | "edit" | "search" | "fetch";
-        heading: string;
-        preview: string;
-      }>;
-    };
-
-export const ACCESS_LABELS: Record<PreviewAccessMode, string> = {
-  "approval-required": "Supervised",
-  "auto-accept-edits": "Auto-accept edits",
-  "full-access": "Full access",
-};
-
-export const previewProjects: PreviewProject[] = [
-  {
-    id: "marcode-landing",
-    title: "marcode-landing",
-    icon: "marcode",
-    threads: ["preview-component", "minimap-rail", "rate-limit-meter", "old-hero"],
-  },
-  {
-    id: "round",
-    title: "round",
-    icon: "round",
-    threads: ["round-modernize"],
-  },
-  {
-    id: "lawn",
-    title: "lawn",
-    icon: "lawn",
-    threads: ["lawn-security", "lawn-analyze"],
-  },
-  {
-    id: "shoo",
-    title: "shoo",
-    icon: "folder",
-    threads: ["shoo-secure"],
-  },
-];
-
-export const previewThreads: PreviewThread[] = [
-  {
-    id: "preview-component",
-    projectId: "marcode-landing",
-    title: "Build an interactive app preview to replace the static screensh...",
-    age: "1m ago",
-    status: "Working",
-    branch: "feat/app-preview",
-    worktree: "marcode-landing",
-    access: "full-access",
-    composerText: "",
-  },
-  {
-    id: "minimap-rail",
-    projectId: "marcode-landing",
-    title: "Wire the chat minimap rail into the timeline",
-    age: "6m ago",
-    status: "Working",
-    branch: "feat/chat-minimap",
-    worktree: "marcode-landing",
-    access: "auto-accept-edits",
-    composerText: "Keep the rail collapsed by default and animate the active dash.",
-  },
-  {
-    id: "rate-limit-meter",
-    projectId: "marcode-landing",
-    title: "Surface provider rate limit usage in composer",
-    age: "8m ago",
-    status: "Completed",
-    branch: "feat/rate-limit-meter",
-    worktree: "marcode-landing",
-    access: "approval-required",
-    composerText: "Audit the Codex + Claude meter copy before shipping.",
-  },
-  {
-    id: "old-hero",
-    projectId: "marcode-landing",
-    title: "Drop the static hero screenshot",
-    age: "13h ago",
-    branch: "main",
-    worktree: "marcode-landing",
-    access: "full-access",
-    composerText: "Remove the legacy <Image> hero and confirm nothing else linked to it.",
-  },
-  {
-    id: "round-modernize",
-    projectId: "round",
-    title: "Modernize the dashboard shell",
-    age: "9m ago",
-    status: "Working",
-    branch: "feat/shell",
-    worktree: "round",
-    access: "full-access",
-    composerText: "Modernize the shell without changing the route structure.",
-  },
-  {
-    id: "lawn-security",
-    projectId: "lawn",
-    title: "What potential security issues should we look at first?",
-    age: "7m ago",
-    branch: "main",
-    worktree: "lawn",
-    access: "full-access",
-    composerText: "Audit the auth path and summarize the risky edges.",
-  },
-  {
-    id: "lawn-analyze",
-    projectId: "lawn",
-    title: "Help me analyze this project's hot paths",
-    age: "9m ago",
-    branch: "main",
-    worktree: "lawn",
-    access: "full-access",
-    composerText: "Build a concise project map from the repo structure.",
-  },
-  {
-    id: "shoo-secure",
-    projectId: "shoo",
-    title: "Is this app secure against token replay?",
-    age: "just now",
-    status: "Working",
-    branch: "main",
-    worktree: "shoo",
-    access: "full-access",
-    composerText: "Inspect the security posture and list the highest-risk fixes first.",
-  },
-];
-
-export const previewTurns: Record<string, PreviewTurn[]> = {
-  "preview-component": [
-    {
-      type: "user",
-      text: "Build an interactive app preview for the landing page. Use MarCode brand colors, no static screenshots.",
-    },
-    {
-      type: "assistant",
-      text: "I'll scaffold a React component that mirrors the app shell — sidebar, chat timeline, composer — and make thread switching real. Brand tokens from globals.css, Klaster Sans for the heading, Inter elsewhere.",
-    },
-    {
-      type: "tool",
-      title: "Tool calls (3)",
-      calls: [
-        {
-          kind: "read",
-          heading: "Read file",
-          preview: "apps/landing/src/app/globals.css",
-        },
-        {
-          kind: "read",
-          heading: "Read file",
-          preview: "apps/landing/src/components/Hero.tsx",
-        },
-        {
-          kind: "search",
-          heading: "Searched",
-          preview: 'rg "fresh-syntax|curious-sky" apps/landing/src',
-        },
-      ],
-    },
-    {
-      type: "assistant",
-      text: "Brand tokens are wired through `@theme inline` in globals.css. I'll use them directly in Tailwind utilities (bg-fresh-syntax/10, text-curious-sky, etc.) so dark-first stays consistent.",
-    },
-    {
-      type: "user",
-      text: "Make sure the threads switch when I click them — not just visual.",
-    },
-    {
-      type: "tool",
-      title: "Tool calls (2)",
-      calls: [
-        {
-          kind: "edit",
-          heading: "Edited file",
-          preview: "apps/landing/src/components/AppPreview/AppPreview.tsx",
-        },
-        {
-          kind: "edit",
-          heading: "Edited file",
-          preview: "apps/landing/src/components/AppPreview/data.ts",
-        },
-      ],
-    },
-    {
-      type: "assistant",
-      text: "Threads are wired through useState. Clicking any thread row swaps the timeline, composer placeholder, and checkout bar instantly — no animation jank, just structural state.",
-    },
-  ],
-  "minimap-rail": [
-    {
-      type: "user",
-      text: "I want a way to move between long chat sessions faster.",
-    },
-    {
-      type: "assistant",
-      text: "I'll add a minimap rail on the right side of the timeline — one dash per user message, hover to expand previews, click to jump.",
-    },
-    {
-      type: "tool",
-      title: "Tool calls (2)",
-      calls: [
-        {
-          kind: "read",
-          heading: "Read file",
-          preview: "apps/web/src/components/chat/MessagesTimeline.tsx",
-        },
-        {
-          kind: "search",
-          heading: "Searched",
-          preview: 'rg "LegendList|scrollToIndex" apps/web/src',
-        },
-      ],
-    },
-    {
-      type: "assistant",
-      text: "Active dash tracks scroll via the LegendList state. No rAF polling — just two listeners and a pure helper.",
-    },
-  ],
-  "rate-limit-meter": [
-    {
-      type: "user",
-      text: "Surface provider rate limit usage in the composer.",
-    },
-    {
-      type: "tool",
-      title: "Tool calls (1)",
-      calls: [
-        {
-          kind: "search",
-          heading: "Searched",
-          preview: 'rg "account.rate-limits.updated" apps/server/src',
-        },
-      ],
-    },
-    {
-      type: "assistant",
-      text: "ProviderRuntimeIngestion was dropping these events. Wired through to a new ProviderUsageMeter, normalised both Claude (rate_limit_event) and Codex (account/rateLimits/updated) shapes.",
-    },
-  ],
-  "old-hero": [
-    {
-      type: "user",
-      text: "Drop the static hero screenshot. The new preview replaces it.",
-    },
-    {
-      type: "tool",
-      title: "Tool calls (1)",
-      calls: [
-        {
-          kind: "command",
-          heading: "Ran command",
-          preview: "rg --files-with-matches /marcode-screenshot apps/landing/src",
-        },
-      ],
-    },
-    {
-      type: "assistant",
-      text: "Confirmed nothing else referenced it. Removed the <Image> from Hero and dropped the asset from /public.",
-    },
-  ],
-  "round-modernize": [
-    {
-      type: "user",
-      text: "Modernize the dashboard shell without rewriting the routes.",
-    },
-    {
-      type: "assistant",
-      text: "Lifting the shell to a layout component preserves the existing route tree. I'll start with the navigation rail and topbar.",
-    },
-  ],
-  "lawn-security": [
-    {
-      type: "user",
-      text: "What potential security issues should we look at first?",
-    },
-    {
-      type: "assistant",
-      text: "Auth path is the highest-risk surface. I'll start with token replay, missing CSRF on mutations, and any unvalidated redirects.",
-    },
-  ],
-  "lawn-analyze": [
-    {
-      type: "user",
-      text: "Help me analyze this project's hot paths.",
-    },
-    {
-      type: "assistant",
-      text: "Building a project map from the repo structure now. I'll group by package and call out shared services so the architecture is legible at a glance.",
-    },
-  ],
-  "shoo-secure": [
-    {
-      type: "user",
-      text: "Is this app secure against token replay?",
-    },
-    {
-      type: "tool",
-      title: "Tool calls (2)",
-      calls: [
-        {
-          kind: "search",
-          heading: "Searched",
-          preview: 'rg "sessionToken|nonce" apps/server/src/auth',
-        },
-        {
-          kind: "read",
-          heading: "Read file",
-          preview: "apps/server/src/auth/SessionCredentialService.ts",
-        },
-      ],
-    },
-    {
-      type: "assistant",
-      text: "Sessions are nonced and rotated on every refresh. Replay surface is small but I'd still tighten the pairing-link TTL.",
-    },
-  ],
-};
-
-export const MODELS = [
-  { provider: "Claude", model: "Claude Sonnet 4.5", accent: "fresh-syntax" as const },
-  { provider: "Claude", model: "Claude Opus 4.1", accent: "fresh-syntax" as const },
-  { provider: "Codex", model: "GPT-5", accent: "rebel-mint" as const },
-  { provider: "Codex", model: "GPT-5 mini", accent: "rebel-mint" as const },
-  { provider: "Cursor", model: "Auto", accent: "dream-shift" as const },
-  { provider: "OpenCode", model: "Opencode", accent: "curious-sky" as const },
-];
diff --git a/apps/landing/src/components/Hero.tsx b/apps/landing/src/components/Hero.tsx
index 6b4cc357fa..d838615ca2 100644
--- a/apps/landing/src/components/Hero.tsx
+++ b/apps/landing/src/components/Hero.tsx
@@ -2,11 +2,10 @@ import Image from "next/image";
 import type { DetectedOS } from "~/lib/detectOS";
 import type { Release } from "~/lib/github";
 import { DownloadButton } from "./DownloadButton";
-import { AppPreview } from "./AppPreview/AppPreview";
 
 export function Hero({ os, release }: { os: DetectedOS; release: Release | null }) {
   return (
-    <section className="relative flex flex-col items-center justify-center overflow-hidden px-6 pt-24 pb-12">
+    <section className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-6 py-24">
       {/* Decorative circles (BRAND.md: circle = core element) */}
       <div className="pointer-events-none absolute -left-32 -top-32 size-96 rounded-full bg-fresh-syntax/5 blur-3xl" />
       <div className="pointer-events-none absolute -bottom-48 -right-24 size-[500px] rounded-full bg-curious-sky/5 blur-3xl" />
@@ -40,11 +39,6 @@ export function Hero({ os, release }: { os: DetectedOS; release: Release | null
 
         <DownloadButton serverOS={os} serverRelease={release} />
       </div>
-
-      {/* Interactive app preview */}
-      <div className="relative z-10 mx-auto mt-16 w-full max-w-5xl px-2 sm:px-0">
-        <AppPreview />
-      </div>
     </section>
   );
 }
diff --git a/apps/server/src/processRunner.ts b/apps/server/src/processRunner.ts
index 03b164fc24..0d9674ad79 100644
--- a/apps/server/src/processRunner.ts
+++ b/apps/server/src/processRunner.ts
@@ -8,6 +8,7 @@ export interface ProcessRunOptions {
   allowNonZeroExit?: boolean | undefined;
   maxBufferBytes?: number | undefined;
   outputMode?: "error" | "truncate" | undefined;
+  shell?: boolean | undefined;
 }
 
 export interface ProcessRunResult {
@@ -152,7 +153,7 @@ export async function runProcess(
       cwd: options.cwd,
       env: options.env,
       stdio: "pipe",
-      shell: process.platform === "win32",
+      shell: options.shell ?? process.platform === "win32",
     });
 
     let stdout = "";
diff --git a/apps/server/src/provider/Layers/CursorProvider.test.ts b/apps/server/src/provider/Layers/CursorProvider.test.ts
index 6a567da934..46dff88411 100644
--- a/apps/server/src/provider/Layers/CursorProvider.test.ts
+++ b/apps/server/src/provider/Layers/CursorProvider.test.ts
@@ -262,6 +262,7 @@ const baseCursorSettings: CursorSettings = {
   enabled: true,
   binaryPath: "agent",
   apiEndpoint: "",
+  updateCommand: "",
   customModels: [],
 };
 
@@ -437,6 +438,7 @@ describe("discoverCursorModelsViaAcp", () => {
         enabled: true,
         binaryPath: wrapperPath,
         apiEndpoint: "",
+        updateCommand: "",
         customModels: [],
       }).pipe(Effect.provide(NodeServices.layer), Effect.scoped),
     );
@@ -461,6 +463,7 @@ describe("discoverCursorModelsViaAcp", () => {
         enabled: true,
         binaryPath: wrapperPath,
         apiEndpoint: "",
+        updateCommand: "",
         customModels: [],
       }).pipe(Effect.provide(NodeServices.layer)),
     );
@@ -495,6 +498,7 @@ describe("discoverCursorModelCapabilitiesViaAcp", () => {
           enabled: true,
           binaryPath: wrapperPath,
           apiEndpoint: "",
+          updateCommand: "",
           customModels: [],
         },
         existingModels,
diff --git a/apps/server/src/provider/providerUpdater.test.ts b/apps/server/src/provider/providerUpdater.test.ts
index 69ed85f059..39b6df9b56 100644
--- a/apps/server/src/provider/providerUpdater.test.ts
+++ b/apps/server/src/provider/providerUpdater.test.ts
@@ -1,9 +1,10 @@
 import { describe, it, assert } from "@effect/vitest";
 import type { ProviderKind, ServerProvider, ServerProviderUpdateState } from "@marcode/contracts";
-import { ServerProviderUpdateError } from "@marcode/contracts";
+import { DEFAULT_SERVER_SETTINGS, ServerProviderUpdateError } from "@marcode/contracts";
 import { Cause, Effect, Exit, Fiber, Ref, Schema, Stream } from "effect";
 
 import type { ProcessRunResult } from "../processRunner.ts";
+import type { ServerSettingsShape } from "../serverSettings.ts";
 import type { ProviderRegistryShape } from "./Services/ProviderRegistry.ts";
 import { makeProviderUpdater, type ProviderUpdateRunner } from "./providerUpdater.ts";
 
@@ -121,6 +122,54 @@ describe("providerUpdater", () => {
     }),
   );
 
+  it.effect("runs a configured provider update command", () =>
+    Effect.gen(function* () {
+      const { registry } = yield* makeRegistry({
+        ...baseProvider,
+        provider: "opencode",
+      });
+      const calls: Array<{
+        command: string;
+        args: ReadonlyArray<string>;
+        shell: boolean | undefined;
+      }> = [];
+      const serverSettings: ServerSettingsShape = {
+        start: Effect.void,
+        ready: Effect.void,
+        getSettings: Effect.succeed({
+          ...DEFAULT_SERVER_SETTINGS,
+          providers: {
+            ...DEFAULT_SERVER_SETTINGS.providers,
+            opencode: {
+              ...DEFAULT_SERVER_SETTINGS.providers.opencode,
+              updateCommand: "pnpm add -g opencode-ai@latest",
+            },
+          },
+        }),
+        updateSettings: () => Effect.succeed(DEFAULT_SERVER_SETTINGS),
+        streamChanges: Stream.empty,
+      };
+      const updater = yield* makeProviderUpdater({
+        providerRegistry: registry,
+        serverSettings,
+        runUpdate: async (command, args, options) => {
+          calls.push({ command, args, shell: options?.shell });
+          return okResult("updated");
+        },
+      });
+
+      yield* updater.updateProvider("opencode");
+
+      assert.deepStrictEqual(calls, [
+        {
+          command: "pnpm add -g opencode-ai@latest",
+          args: [],
+          shell: true,
+        },
+      ]);
+    }),
+  );
+
   it.effect("records command failure output in provider update state", () =>
     Effect.gen(function* () {
       const { registry } = yield* makeRegistry();
diff --git a/apps/server/src/provider/providerUpdater.ts b/apps/server/src/provider/providerUpdater.ts
index 4bf6a16b16..7123a77171 100644
--- a/apps/server/src/provider/providerUpdater.ts
+++ b/apps/server/src/provider/providerUpdater.ts
@@ -10,6 +10,7 @@ import * as Semaphore from "effect/Semaphore";
 
 import type { ProcessRunResult } from "../processRunner.ts";
 import { runProcess } from "../processRunner.ts";
+import type { ServerSettingsShape } from "../serverSettings.ts";
 import type { ProviderRegistryShape } from "./Services/ProviderRegistry.ts";
 import {
   enrichProviderSnapshotWithVersionAdvisory,
@@ -22,6 +23,7 @@ const UPDATE_OUTPUT_MAX_BYTES = 10_000;
 export type ProviderUpdateRunner = (
   command: string,
   args: ReadonlyArray<string>,
+  options?: { readonly shell?: boolean },
 ) => Promise<ProcessRunResult>;
 
 export interface ProviderUpdaterShape {
@@ -35,12 +37,13 @@ interface VerifiedProviderRefresh {
   readonly verifiedProvider: ServerProvider | undefined;
 }
 
-const defaultRunner: ProviderUpdateRunner = (command, args) =>
+const defaultRunner: ProviderUpdateRunner = (command, args, options) =>
   runProcess(command, args, {
     timeoutMs: UPDATE_TIMEOUT_MS,
     maxBufferBytes: UPDATE_OUTPUT_MAX_BYTES,
     outputMode: "truncate",
     allowNonZeroExit: true,
+    shell: options?.shell,
   });
 
 function trimNullable(value: string): string | null {
@@ -95,6 +98,7 @@ function makeUpdateState(input: {
 
 export const makeProviderUpdater = Effect.fn("makeProviderUpdater")(function* (input: {
   readonly providerRegistry: ProviderRegistryShape;
+  readonly serverSettings?: ServerSettingsShape;
   readonly runUpdate?: ProviderUpdateRunner;
 }) {
   const runningProvidersRef = yield* Ref.make<ReadonlySet<ProviderKind>>(new Set());
@@ -165,7 +169,22 @@ export const makeProviderUpdater = Effect.fn("makeProviderUpdater")(function* (i
   const updateProvider: ProviderUpdaterShape["updateProvider"] = (provider) =>
     Effect.gen(function* () {
       const lifecycle = getProviderVersionLifecycle(provider);
-      const updateExecutable = lifecycle.updateExecutable;
+      const settings = input.serverSettings
+        ? yield* input.serverSettings.getSettings.pipe(
+            Effect.catchCause((cause) =>
+              Effect.logWarning("Provider update command settings lookup failed", {
+                provider,
+                cause: Cause.pretty(cause),
+              }).pipe(Effect.as(null)),
+            ),
+          )
+        : null;
+      const configuredCommand = settings?.providers[provider].updateCommand.trim() ?? "";
+      const hasConfiguredCommand = configuredCommand.length > 0;
+      const updateExecutable = hasConfiguredCommand
+        ? configuredCommand
+        : lifecycle.updateExecutable;
+      const updateArgs = hasConfiguredCommand ? [] : lifecycle.updateArgs;
       const updateLockKey = lifecycle.updateLockKey;
       if (!updateExecutable || !updateLockKey) {
         return yield* new ServerProviderUpdateError({
@@ -212,7 +231,9 @@ export const makeProviderUpdater = Effect.fn("makeProviderUpdater")(function* (i
         );
 
         const result = yield* Effect.promise<ProcessRunResult>(() =>
-          runUpdate(updateExecutable, lifecycle.updateArgs),
+          runUpdate(updateExecutable, updateArgs, {
+            shell: hasConfiguredCommand,
+          }),
         );
         const finishedAt = new Date().toISOString();
         if (result.timedOut || result.code !== 0) {
@@ -236,9 +257,9 @@ export const makeProviderUpdater = Effect.fn("makeProviderUpdater")(function* (i
             startedAt,
             finishedAt,
             message: couldNotVerify
-              ? "Update command completed, but T3 Code could not verify the provider version."
+              ? "Update command completed, but MarCode could not verify the provider version."
               : stillOutdated
-                ? "Update command completed, but T3 Code still detects an outdated provider version."
+                ? "Update command completed, but MarCode still detects an outdated provider version."
                 : "Provider updated.",
             output: commandOutput(result),
           }),
diff --git a/apps/server/src/serverSettings.test.ts b/apps/server/src/serverSettings.test.ts
index eb3bb9f8ef..28273292b6 100644
--- a/apps/server/src/serverSettings.test.ts
+++ b/apps/server/src/serverSettings.test.ts
@@ -107,11 +107,13 @@ it.layer(NodeServices.layer)("server settings", (it) => {
         enabled: true,
         binaryPath: "/opt/homebrew/bin/codex",
         homePath: "/Users/julius/.codex",
+        updateCommand: "",
         customModels: [],
       });
       assert.deepEqual(next.providers.claudeAgent, {
         enabled: true,
         binaryPath: "/usr/local/bin/claude",
+        updateCommand: "",
         customModels: ["claude-custom"],
         launchArgs: "",
       });
@@ -209,6 +211,7 @@ it.layer(NodeServices.layer)("server settings", (it) => {
             binaryPath: "  /opt/homebrew/bin/opencode  ",
             serverUrl: "  http://127.0.0.1:4096  ",
             serverPassword: "  secret-password  ",
+            updateCommand: "  pnpm add -g opencode-ai@latest  ",
           },
         },
       });
@@ -217,11 +220,13 @@ it.layer(NodeServices.layer)("server settings", (it) => {
         enabled: true,
         binaryPath: "/opt/homebrew/bin/codex",
         homePath: "",
+        updateCommand: "",
         customModels: [],
       });
       assert.deepEqual(next.providers.claudeAgent, {
         enabled: true,
         binaryPath: "/opt/homebrew/bin/claude",
+        updateCommand: "",
         customModels: [],
         launchArgs: "",
       });
@@ -230,6 +235,7 @@ it.layer(NodeServices.layer)("server settings", (it) => {
         binaryPath: "/opt/homebrew/bin/opencode",
         serverUrl: "http://127.0.0.1:4096",
         serverPassword: "secret-password",
+        updateCommand: "pnpm add -g opencode-ai@latest",
         customModels: [],
       });
     }).pipe(Effect.provide(makeServerSettingsLayer())),
diff --git a/apps/server/src/ws.ts b/apps/server/src/ws.ts
index 42d8da042c..4525c427bc 100644
--- a/apps/server/src/ws.ts
+++ b/apps/server/src/ws.ts
@@ -148,10 +148,10 @@ const makeWsRpcLayer = (currentSessionId: AuthSessionId) =>
       const gitStatusBroadcaster = yield* GitStatusBroadcaster;
       const terminalManager = yield* TerminalManager;
       const providerRegistry = yield* ProviderRegistry;
-      const providerUpdater = yield* makeProviderUpdater({ providerRegistry });
+      const serverSettings = yield* ServerSettingsService;
+      const providerUpdater = yield* makeProviderUpdater({ providerRegistry, serverSettings });
       const config = yield* ServerConfig;
       const lifecycleEvents = yield* ServerLifecycleEvents;
-      const serverSettings = yield* ServerSettingsService;
       const startup = yield* ServerRuntimeStartup;
       const workspaceEntries = yield* WorkspaceEntries;
       const workspaceFileSystem = yield* WorkspaceFileSystem;
diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index a081553617..8070ff7960 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -226,6 +226,7 @@ import {
 } from "../lib/jiraReactQuery";
 import { ComposerAttachmentsPopover } from "./chat/ComposerAttachmentsPopover";
 import { deriveLatestContextWindowSnapshot } from "../lib/contextWindow";
+import { deriveLatestProviderUsageSnapshot } from "../lib/providerUsage";
 import {
   shouldUseCompactComposerPrimaryActions,
   shouldUseCompactComposerFooter,
@@ -237,6 +238,7 @@ import { MessagesTimeline } from "./chat/MessagesTimeline";
 import { type LegendListRef } from "@legendapp/list/react";
 import { ChatHeader } from "./chat/ChatHeader";
 import { ContextWindowMeter } from "./chat/ContextWindowMeter";
+import { ProviderUsageMeter } from "./chat/ProviderUsageMeter";
 import { buildExpandedImagePreview, ExpandedImagePreview } from "./chat/ExpandedImagePreview";
 import { ProviderModelPicker } from "./chat/ProviderModelPicker";
 import { getModelPickerOpen } from "../modelPickerOpenState";
@@ -318,6 +320,14 @@ const threadPlanCatalogCache = new LRUCache<{
   entry: ThreadPlanCatalogEntry;
 }>(MAX_THREAD_PLAN_CATALOG_CACHE_ENTRIES, MAX_THREAD_PLAN_CATALOG_CACHE_MEMORY_BYTES);
 
+function deriveActiveThreadActivityIso(thread: Thread): string {
+  for (let i = thread.messages.length - 1; i >= 0; i--) {
+    const message = thread.messages[i];
+    if (message?.role === "user") return message.createdAt;
+  }
+  return thread.updatedAt ?? thread.createdAt;
+}
+
 function estimateThreadPlanCatalogEntrySize(thread: Thread): number {
   return Math.max(
     64,
@@ -1125,6 +1135,10 @@ export default function ChatView({
     () => deriveLatestContextWindowSnapshot(activeThread?.activities ?? []),
     [activeThread?.activities],
   );
+  const activeProviderUsage = useMemo(
+    () => deriveLatestProviderUsageSnapshot(activeThread?.activities ?? []),
+    [activeThread?.activities],
+  );
   useEffect(() => {
     setMountedTerminalThreadIds((currentThreadIds) => {
       const nextThreadIds = reconcileMountedTerminalThreadIds({
@@ -4765,18 +4779,20 @@ export default function ChatView({
           isElectron && !sidebarVisible ? "pr-3 sm:pr-5 pl-[90px]" : "px-3 sm:px-5",
           isElectron
             ? cn(
-                "drag-region flex h-[52px] items-center wco:h-[env(titlebar-area-height)]",
+                "drag-region flex h-[72px] items-center wco:h-[env(titlebar-area-height)]",
                 reserveTitleBarControlInset &&
                   "wco:pr-[calc(100vw-env(titlebar-area-width)-env(titlebar-area-x)+1em)]",
               )
-            : "py-2 sm:py-3",
+            : "py-5 sm:py-6",
         )}
       >
         <ChatHeader
           activeThreadId={activeThread.id}
           activeThreadEnvironmentId={activeThreadEnvironmentId!}
           activeThreadTitle={activeThread.title}
+          activeThreadActivityAt={deriveActiveThreadActivityIso(activeThread)}
           activeProjectName={activeProject?.name}
+          activeProjectCwd={activeProject?.cwd ?? null}
           isGitRepo={isGitRepo}
           openInCwd={gitCwd}
           activeProjectScripts={activeProject?.scripts}
@@ -5211,6 +5227,9 @@ export default function ChatView({
                         }
                         className="flex shrink-0 flex-nowrap items-center justify-end gap-2"
                       >
+                        {activeProviderUsage ? (
+                          <ProviderUsageMeter usage={activeProviderUsage} />
+                        ) : null}
                         {activeContextWindow ? (
                           <ContextWindowMeter usage={activeContextWindow} />
                         ) : null}
diff --git a/apps/web/src/components/CommandPalette.tsx b/apps/web/src/components/CommandPalette.tsx
index 98ae8521fb..6c6dd4c8bf 100644
--- a/apps/web/src/components/CommandPalette.tsx
+++ b/apps/web/src/components/CommandPalette.tsx
@@ -458,6 +458,7 @@ function OpenCommandPaletteDialog() {
           <ProjectFavicon
             environmentId={project.environmentId}
             cwd={project.cwd}
+            seed={project.name}
             className={ITEM_ICON_CLASS}
           />
         ),
@@ -475,6 +476,7 @@ function OpenCommandPaletteDialog() {
           <ProjectFavicon
             environmentId={project.environmentId}
             cwd={project.cwd}
+            seed={project.name}
             className={ITEM_ICON_CLASS}
           />
         ),
diff --git a/apps/web/src/components/KeybindingsToast.browser.tsx b/apps/web/src/components/KeybindingsToast.browser.tsx
index 197458db4b..ba85571c7a 100644
--- a/apps/web/src/components/KeybindingsToast.browser.tsx
+++ b/apps/web/src/components/KeybindingsToast.browser.tsx
@@ -97,14 +97,27 @@ function createBaseServerConfig(): ServerConfig {
       defaultThreadEnvMode: "local" as const,
       textGenerationModelSelection: { provider: "codex" as const, model: "gpt-5.4-mini" },
       providers: {
-        codex: { enabled: true, binaryPath: "", homePath: "", customModels: [] },
-        claudeAgent: { enabled: true, binaryPath: "", customModels: [], launchArgs: "" },
-        cursor: { enabled: true, binaryPath: "", apiEndpoint: "", customModels: [] },
+        codex: { enabled: true, binaryPath: "", homePath: "", updateCommand: "", customModels: [] },
+        claudeAgent: {
+          enabled: true,
+          binaryPath: "",
+          updateCommand: "",
+          customModels: [],
+          launchArgs: "",
+        },
+        cursor: {
+          enabled: true,
+          binaryPath: "",
+          apiEndpoint: "",
+          updateCommand: "",
+          customModels: [],
+        },
         opencode: {
           enabled: true,
           binaryPath: "",
           serverUrl: "",
           serverPassword: "",
+          updateCommand: "",
           customModels: [],
         },
       },
diff --git a/apps/web/src/components/NoActiveThreadState.tsx b/apps/web/src/components/NoActiveThreadState.tsx
index cd1f76ed2c..9b2f8953ae 100644
--- a/apps/web/src/components/NoActiveThreadState.tsx
+++ b/apps/web/src/components/NoActiveThreadState.tsx
@@ -11,8 +11,8 @@ export function NoActiveThreadState() {
           className={cn(
             "border-b border-border px-3 sm:px-5",
             isElectron
-              ? "drag-region flex h-[52px] items-center wco:h-[env(titlebar-area-height)]"
-              : "py-2 sm:py-3",
+              ? "drag-region flex h-[72px] items-center wco:h-[env(titlebar-area-height)]"
+              : "py-5 sm:py-6",
           )}
         >
           {isElectron ? (
diff --git a/apps/web/src/components/ProjectFavicon.tsx b/apps/web/src/components/ProjectFavicon.tsx
index 7d65b6acac..5765777d58 100644
--- a/apps/web/src/components/ProjectFavicon.tsx
+++ b/apps/web/src/components/ProjectFavicon.tsx
@@ -1,41 +1,71 @@
 import type { EnvironmentId } from "@marcode/contracts";
-import { FolderIcon } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { resolveEnvironmentHttpUrl } from "../environments/runtime";
+import { ProjectSeededIcon } from "./ProjectSeededIcon";
 
-const loadedProjectFaviconSrcs = new Set<string>();
+const FALLBACK_MARKER = 'data-fallback="project-favicon"';
+const projectFaviconResolutionCache = new Map<string, "real" | "fallback">();
 
 export function ProjectFavicon(input: {
   environmentId: EnvironmentId;
   cwd: string;
-  className?: string;
+  seed: string;
+  className?: string | undefined;
+  iconClassName?: string | undefined;
 }) {
   const src = resolveEnvironmentHttpUrl({
     environmentId: input.environmentId,
     pathname: "/api/project-favicon",
     searchParams: { cwd: input.cwd },
   });
-  const [status, setStatus] = useState<"loading" | "loaded" | "error">(() =>
-    loadedProjectFaviconSrcs.has(src) ? "loaded" : "loading",
+  const [resolution, setResolution] = useState<"loading" | "real" | "fallback">(
+    () => projectFaviconResolutionCache.get(src) ?? "loading",
   );
 
-  return (
-    <>
-      {status !== "loaded" ? (
-        <FolderIcon
-          className={`size-3.5 shrink-0 text-muted-foreground/50 ${input.className ?? ""}`}
-        />
-      ) : null}
+  useEffect(() => {
+    const cached = projectFaviconResolutionCache.get(src);
+    if (cached) {
+      setResolution(cached);
+      return;
+    }
+    let cancelled = false;
+    void (async () => {
+      try {
+        const response = await fetch(src);
+        if (!response.ok) {
+          projectFaviconResolutionCache.set(src, "fallback");
+          if (!cancelled) setResolution("fallback");
+          return;
+        }
+        const text = await response.text();
+        const next: "real" | "fallback" = text.includes(FALLBACK_MARKER) ? "fallback" : "real";
+        projectFaviconResolutionCache.set(src, next);
+        if (!cancelled) setResolution(next);
+      } catch {
+        projectFaviconResolutionCache.set(src, "fallback");
+        if (!cancelled) setResolution("fallback");
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [src]);
+
+  if (resolution === "real") {
+    return (
       <img
         src={src}
         alt=""
-        className={`size-3.5 shrink-0 rounded-sm object-contain ${status === "loaded" ? "" : "hidden"} ${input.className ?? ""}`}
-        onLoad={() => {
-          loadedProjectFaviconSrcs.add(src);
-          setStatus("loaded");
-        }}
-        onError={() => setStatus("error")}
+        className={`size-5 shrink-0 rounded-md object-contain ${input.className ?? ""}`}
       />
-    </>
+    );
+  }
+
+  return (
+    <ProjectSeededIcon
+      seed={input.seed}
+      className={input.className}
+      iconClassName={input.iconClassName}
+    />
   );
 }
diff --git a/apps/web/src/components/ProjectSeededIcon.tsx b/apps/web/src/components/ProjectSeededIcon.tsx
new file mode 100644
index 0000000000..02ff14c7c9
--- /dev/null
+++ b/apps/web/src/components/ProjectSeededIcon.tsx
@@ -0,0 +1,93 @@
+import {
+  AnchorIcon,
+  BookOpenIcon,
+  BoxIcon,
+  CloudIcon,
+  CodeIcon,
+  CompassIcon,
+  DatabaseIcon,
+  FeatherIcon,
+  FlameIcon,
+  GitBranchIcon,
+  GlobeIcon,
+  HexagonIcon,
+  LayersIcon,
+  LeafIcon,
+  MonitorIcon,
+  OrbitIcon,
+  PackageIcon,
+  PaletteIcon,
+  RocketIcon,
+  ServerIcon,
+  SparklesIcon,
+  TargetIcon,
+  TerminalIcon,
+  ZapIcon,
+} from "lucide-react";
+
+const SEEDED_ICONS = [
+  DatabaseIcon,
+  MonitorIcon,
+  ZapIcon,
+  RocketIcon,
+  FlameIcon,
+  SparklesIcon,
+  CodeIcon,
+  TerminalIcon,
+  ServerIcon,
+  CloudIcon,
+  GlobeIcon,
+  PackageIcon,
+  BoxIcon,
+  LayersIcon,
+  HexagonIcon,
+  OrbitIcon,
+  CompassIcon,
+  AnchorIcon,
+  LeafIcon,
+  FeatherIcon,
+  PaletteIcon,
+  BookOpenIcon,
+  GitBranchIcon,
+  TargetIcon,
+] as const;
+
+const SEEDED_HUES = [200, 215, 235, 260, 285, 310, 335, 0, 20, 40, 145, 175] as const;
+
+function fnv1aHash(input: string): number {
+  let h = 0x811c9dc5;
+  for (let i = 0; i < input.length; i++) {
+    h ^= input.charCodeAt(i);
+    h = Math.imul(h, 0x01000193);
+  }
+  return h >>> 0;
+}
+
+export function resolveSeededProjectVisual(seed: string) {
+  const hash = fnv1aHash(seed);
+  const hue = SEEDED_HUES[hash % SEEDED_HUES.length]!;
+  const Icon = SEEDED_ICONS[Math.floor(hash / SEEDED_HUES.length) % SEEDED_ICONS.length]!;
+  return { hue, Icon };
+}
+
+export function ProjectSeededIcon(input: {
+  seed: string;
+  className?: string | undefined;
+  iconClassName?: string | undefined;
+}) {
+  const { hue, Icon } = resolveSeededProjectVisual(input.seed);
+  return (
+    <span
+      aria-hidden
+      className={`inline-flex size-5 shrink-0 items-center justify-center rounded-md ${
+        input.className ?? ""
+      }`}
+      style={{
+        backgroundColor: `hsl(${hue} 65% 55% / 0.22)`,
+        color: `hsl(${hue} 70% 55%)`,
+      }}
+    >
+      <Icon className={input.iconClassName ?? "size-3.5"} strokeWidth={2.25} />
+    </span>
+  );
+}
diff --git a/apps/web/src/components/ProviderUpdateLaunchNotification.logic.test.ts b/apps/web/src/components/ProviderUpdateLaunchNotification.logic.test.ts
index 46bd3a2d2c..56423d0390 100644
--- a/apps/web/src/components/ProviderUpdateLaunchNotification.logic.test.ts
+++ b/apps/web/src/components/ProviderUpdateLaunchNotification.logic.test.ts
@@ -161,7 +161,7 @@ describe("provider update launch notification logic", () => {
       phase: "failed",
       type: "error",
       title: "Provider update failed",
-      description: "command failed",
+      description: "command failed Command output: stderr",
     });
   });
 
@@ -183,7 +183,7 @@ describe("provider update launch notification logic", () => {
       phase: "failed",
       type: "error",
       title: "Codex v1.1.0 update failed",
-      description: "command failed",
+      description: "command failed Command output: stderr",
     });
   });
 
diff --git a/apps/web/src/components/ProviderUpdateLaunchNotification.logic.ts b/apps/web/src/components/ProviderUpdateLaunchNotification.logic.ts
index 48fa6a5009..133f47b324 100644
--- a/apps/web/src/components/ProviderUpdateLaunchNotification.logic.ts
+++ b/apps/web/src/components/ProviderUpdateLaunchNotification.logic.ts
@@ -53,6 +53,24 @@ function getProviderUpdatedDescription(providerCount: number): string {
     : "New sessions will use the updated providers.";
 }
 
+function getProviderUpdateOutputSummary(
+  provider: Pick<ServerProvider, "updateState">,
+): string | null {
+  const output = provider.updateState?.output?.trim();
+  if (!output) {
+    return null;
+  }
+  const firstLine = output
+    .split(/\r?\n/)
+    .find((line) => line.trim().length > 0)
+    ?.trim();
+  if (!firstLine) {
+    return null;
+  }
+  const truncated = firstLine.length > 180 ? `${firstLine.slice(0, 177)}...` : firstLine;
+  return `Command output: ${truncated}`;
+}
+
 function getProviderFailedUpdateTitle(
   provider: Pick<ServerProvider, "provider" | "versionAdvisory">,
 ): string {
@@ -162,6 +180,10 @@ export function getProviderUpdateProgressToastView(input: {
     (provider) => provider.updateState?.status === "unchanged",
   );
   if (unchangedProviders.length > 0) {
+    const singleOutputSummary =
+      unchangedProviders.length === 1
+        ? getProviderUpdateOutputSummary(unchangedProviders[0]!)
+        : null;
     return {
       phase: "unchanged",
       type: "warning",
@@ -169,9 +191,11 @@ export function getProviderUpdateProgressToastView(input: {
         unchangedProviders.length === 1
           ? "Provider still needs an update"
           : "Providers still need updates",
-      description: `${formatProviderList(unchangedProviders)} ${
-        unchangedProviders.length === 1 ? "still appears" : "still appear"
-      } outdated. Check provider settings for details.`,
+      description:
+        singleOutputSummary ??
+        `${formatProviderList(unchangedProviders)} ${
+          unchangedProviders.length === 1 ? "still appears" : "still appear"
+        } outdated. Check provider settings for details.`,
     };
   }
 
@@ -364,6 +388,8 @@ export function getProviderUpdateSidebarPillView(
   if (unchangedProviders.length > 0) {
     const unchangedProvider = unchangedProviders[0]!;
     const unchangedProviderName = PROVIDER_DISPLAY_NAMES[unchangedProvider.provider];
+    const singleOutputSummary =
+      unchangedProviders.length === 1 ? getProviderUpdateOutputSummary(unchangedProvider) : null;
     terminalCandidates.push({
       key: `unchanged:${unchangedProviders
         .map(
@@ -377,9 +403,11 @@ export function getProviderUpdateSidebarPillView(
         unchangedProviders.length === 1
           ? `${unchangedProviderName} still needs an update`
           : `${unchangedProviders.length} providers still need updates`,
-      description: `${formatProviderList(unchangedProviders)} ${
-        unchangedProviders.length === 1 ? "still appears" : "still appear"
-      } outdated. Review provider settings for details.`,
+      description:
+        singleOutputSummary ??
+        `${formatProviderList(unchangedProviders)} ${
+          unchangedProviders.length === 1 ? "still appears" : "still appear"
+        } outdated. Review provider settings for details.`,
       dismissible: true,
     });
   }
@@ -445,8 +473,14 @@ function getProviderUpdateInitialToastTitle(
 function getFailedProviderUpdateDescription(providers: ReadonlyArray<ServerProvider>): string {
   if (providers.length === 1) {
     const provider = providers[0]!;
+    const outputSummary = getProviderUpdateOutputSummary(provider);
     if (provider.updateState?.message) {
-      return provider.updateState.message;
+      return outputSummary
+        ? `${provider.updateState.message} ${outputSummary}`
+        : provider.updateState.message;
+    }
+    if (outputSummary) {
+      return outputSummary;
     }
   }
   return `${formatProviderList(providers)} failed to update. Check provider settings for details.`;
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index b918dbddbd..8ea958a755 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -1981,7 +1981,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
         <SidebarMenuButton
           ref={isManualProjectSorting ? dragHandleProps?.setActivatorNodeRef : undefined}
           size="sm"
-          className={`gap-2 pl-2 pr-8 py-1.5 text-left hover:bg-accent group-hover/project-header:bg-accent group-hover/project-header:text-sidebar-accent-foreground ${
+          className={`gap-2 pl-2.5 pr-9 py-2 text-left hover:bg-accent group-hover/project-header:bg-accent group-hover/project-header:text-sidebar-accent-foreground ${
             isManualProjectSorting ? "cursor-grab active:cursor-grabbing" : "cursor-pointer"
           }`}
           {...(isManualProjectSorting && dragHandleProps ? dragHandleProps.attributes : {})}
@@ -2013,8 +2013,14 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
               }`}
             />
           )}
-          <ProjectFavicon environmentId={project.environmentId} cwd={project.cwd} />
-          <span className="flex min-w-0 flex-1 items-center gap-2">
+          <ProjectFavicon
+            environmentId={project.environmentId}
+            cwd={project.cwd}
+            seed={project.displayName}
+            className="size-4.5"
+            iconClassName="size-3"
+          />
+          <span className="flex min-w-0 flex-1 items-center gap-1.5">
             <span className="truncate text-xs font-medium text-foreground/90">
               {project.displayName}
             </span>
@@ -2441,7 +2447,7 @@ const SidebarChromeHeader = memo(function SidebarChromeHeader({
               to="/"
             >
               <MarCodeWordmark />
-              <span className="rounded-full bg-muted/50 px-1.5 py-0.5 text-[8px] font-medium uppercase tracking-[0.18em] text-muted-foreground/60">
+              <span className="rounded-full bg-primary/15 px-1.5 py-0.5 text-[8px] font-medium uppercase tracking-[0.18em] text-primary">
                 {APP_STAGE_LABEL}
               </span>
             </Link>
diff --git a/apps/web/src/components/chat/ChatHeader.tsx b/apps/web/src/components/chat/ChatHeader.tsx
index 3f44eb0aba..64bd7b34e5 100644
--- a/apps/web/src/components/chat/ChatHeader.tsx
+++ b/apps/web/src/components/chat/ChatHeader.tsx
@@ -10,19 +10,22 @@ import { memo } from "react";
 import GitActionsControl from "../GitActionsControl";
 import { type DraftId } from "~/composerDraftStore";
 import { DiffIcon, ListTodoIcon, TerminalSquareIcon } from "lucide-react";
-import { Badge } from "../ui/badge";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import ProjectScriptsControl, { type NewProjectScriptInput } from "../ProjectScriptsControl";
 import { Toggle } from "../ui/toggle";
 import { SidebarTrigger } from "../ui/sidebar";
 import { OpenInPicker } from "./OpenInPicker";
+import { ProjectFavicon } from "../ProjectFavicon";
+import { formatRelativeTimeLabel } from "../../timestampFormat";
 
 interface ChatHeaderProps {
   activeThreadEnvironmentId: EnvironmentId;
   activeThreadId: ThreadId;
   draftId?: DraftId;
   activeThreadTitle: string;
+  activeThreadActivityAt: string | undefined;
   activeProjectName: string | undefined;
+  activeProjectCwd: string | null;
   isGitRepo: boolean;
   openInCwd: string | null;
   activeProjectScripts: ProjectScript[] | undefined;
@@ -52,7 +55,9 @@ export const ChatHeader = memo(function ChatHeader({
   activeThreadId,
   draftId,
   activeThreadTitle,
+  activeThreadActivityAt,
   activeProjectName,
+  activeProjectCwd,
   isGitRepo,
   openInCwd,
   activeProjectScripts,
@@ -76,14 +81,18 @@ export const ChatHeader = memo(function ChatHeader({
   onToggleDiff,
   onTogglePlanSidebar,
 }: ChatHeaderProps) {
+  const relativeActivityAt = activeThreadActivityAt
+    ? formatRelativeTimeLabel(activeThreadActivityAt)
+    : null;
+  const showMetaRow = Boolean(activeProjectName) || Boolean(relativeActivityAt);
   return (
     <div className="@container/header-actions flex min-w-0 flex-1 items-center gap-2">
-      <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden sm:gap-3">
-        <SidebarTrigger className="size-7 shrink-0 md:hidden" />
+      <SidebarTrigger className="size-7 shrink-0 md:hidden" />
+      <div className="flex min-w-0 flex-1 flex-col justify-center gap-1 overflow-hidden">
         <Tooltip>
           <TooltipTrigger
             render={
-              <h2 className="min-w-0 shrink truncate text-sm font-medium text-foreground">
+              <h2 className="min-w-0 truncate text-sm font-medium text-foreground">
                 {activeThreadTitle}
               </h2>
             }
@@ -95,15 +104,40 @@ export const ChatHeader = memo(function ChatHeader({
             {activeThreadTitle}
           </TooltipPopup>
         </Tooltip>
-        {activeProjectName && (
-          <Badge variant="outline" className="min-w-0 shrink overflow-hidden">
-            <span className="min-w-0 truncate">{activeProjectName}</span>
-          </Badge>
-        )}
-        {activeProjectName && !isGitRepo && (
-          <Badge variant="outline" className="shrink-0 text-[10px] text-amber-700">
-            No Git
-          </Badge>
+        {showMetaRow && (
+          <div className="flex min-w-0 items-center gap-2 text-[11px] text-muted-foreground">
+            {activeProjectName && activeProjectCwd && (
+              <ProjectFavicon
+                environmentId={activeThreadEnvironmentId}
+                cwd={activeProjectCwd}
+                seed={activeProjectName}
+              />
+            )}
+            {activeProjectName && <span className="min-w-0 truncate">{activeProjectName}</span>}
+            {activeProjectName && relativeActivityAt && (
+              <span aria-hidden className="shrink-0 text-muted-foreground/40">
+                ·
+              </span>
+            )}
+            {relativeActivityAt && <span className="shrink-0">{relativeActivityAt}</span>}
+            {activeProjectName && !isGitRepo && (
+              <>
+                <span aria-hidden className="shrink-0 text-muted-foreground/40">
+                  ·
+                </span>
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <span className="shrink-0 text-amber-600/80 dark:text-amber-400/80">
+                        No Git
+                      </span>
+                    }
+                  />
+                  <TooltipPopup side="bottom">This project is not a git repository.</TooltipPopup>
+                </Tooltip>
+              </>
+            )}
+          </div>
         )}
       </div>
       <div className="flex shrink-0 items-center justify-end gap-2 @3xl/header-actions:gap-3">
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index c5116409a8..3781d6c0b9 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -1179,7 +1179,7 @@ const EditableUserMessageTimelineRow = memo(function EditableUserMessageTimeline
   if (props.isEditing) {
     return (
       <div className="flex justify-end">
-        <div className="max-w-[80%] rounded-2xl rounded-br-sm border border-primary/40 bg-secondary px-4 py-3">
+        <div className="max-w-[80%] rounded-2xl rounded-br-sm border border-primary/60 bg-primary/10 px-4 py-3">
           <Textarea
             ref={textareaRef}
             unstyled
@@ -1285,7 +1285,7 @@ const EditableUserMessageTimelineRow = memo(function EditableUserMessageTimeline
 
   return (
     <div className="flex justify-end">
-      <div className="group relative max-w-[80%] rounded-2xl rounded-br-sm border border-border bg-secondary px-4 py-3">
+      <div className="group relative max-w-[80%] rounded-2xl rounded-br-sm border border-primary/30 bg-primary/10 px-4 py-3">
         {userImages.length > 0 && (
           <div className="mb-2 grid max-w-[420px] grid-cols-2 gap-2">
             {userImages.map((image: NonNullable<TimelineMessage["attachments"]>[number]) => (
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index 9b5af31c52..b54d366bba 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -10,7 +10,6 @@ import {
   PlusIcon,
   RefreshCwIcon,
   Trash2Icon,
-  Undo2Icon,
   UploadIcon,
   XIcon,
 } from "lucide-react";
@@ -22,7 +21,6 @@ import {
   type ProviderKind,
   type ServerProvider,
   type ServerProviderModel,
-  ThreadId,
   type ServerProviderUpdateState,
   type ServerProviderVersionAdvisory,
 } from "@marcode/contracts";
@@ -123,6 +121,7 @@ type InstallProviderSettings = {
   badgeLabel?: string;
   binaryPlaceholder: string;
   binaryDescription: ReactNode;
+  defaultUpdateCommand: string;
   serverUrlPlaceholder?: string;
   serverUrlDescription?: ReactNode;
   serverPasswordPlaceholder?: string;
@@ -138,6 +137,7 @@ const PROVIDER_SETTINGS: readonly InstallProviderSettings[] = [
     title: "Codex",
     binaryPlaceholder: "Codex binary path",
     binaryDescription: "Path to the Codex binary",
+    defaultUpdateCommand: "npm install -g @openai/codex@latest",
     homePathKey: "codexHomePath",
     homePlaceholder: "CODEX_HOME",
     homeDescription: "Optional custom Codex home and config directory.",
@@ -147,6 +147,7 @@ const PROVIDER_SETTINGS: readonly InstallProviderSettings[] = [
     title: "Claude",
     binaryPlaceholder: "Claude binary path",
     binaryDescription: "Path to the Claude binary",
+    defaultUpdateCommand: "npm install -g @anthropic-ai/claude-code@latest",
   },
   {
     provider: "cursor",
@@ -154,12 +155,14 @@ const PROVIDER_SETTINGS: readonly InstallProviderSettings[] = [
     badgeLabel: "Early Access",
     binaryPlaceholder: "Cursor agent binary path",
     binaryDescription: "Path to the Cursor agent binary",
+    defaultUpdateCommand: "agent update",
   },
   {
     provider: "opencode",
     title: "OpenCode",
     binaryPlaceholder: "OpenCode binary path",
     binaryDescription: "Path to the OpenCode binary",
+    defaultUpdateCommand: "npm install -g opencode-ai@latest",
     serverUrlPlaceholder: "http://127.0.0.1:4096",
     serverUrlDescription: "Leave blank to let MarCode spawn the server when needed",
     serverPasswordPlaceholder: "Server password (optional)",
@@ -294,7 +297,7 @@ function getProviderUpdateStatePresentation(updateState: ServerProviderUpdateSta
       return {
         detail:
           updateState.message ??
-          "Update command completed, but T3 Code still detects an outdated provider version.",
+          "Update command completed, but MarCode still detects an outdated provider version.",
         emphasis: "strong" as const,
       };
     case "idle":
@@ -302,6 +305,16 @@ function getProviderUpdateStatePresentation(updateState: ServerProviderUpdateSta
   }
 }
 
+function getProviderUpdateOutput(
+  updateState: ServerProviderUpdateState | undefined,
+): string | null {
+  if (updateState?.status !== "failed" && updateState?.status !== "unchanged") {
+    return null;
+  }
+  const output = updateState.output?.trim();
+  return output && output.length > 0 ? output : null;
+}
+
 function getProviderAdvisoryDetail(input: {
   readonly versionAdvisory: ReturnType<typeof getProviderVersionAdvisoryPresentation>;
   readonly updateStatePresentation: ReturnType<typeof getProviderUpdateStatePresentation>;
@@ -546,7 +559,6 @@ export function useSettingsRestore(onRestored?: () => void) {
       settings.addProjectBaseDirectory,
       settings.confirmThreadArchive,
       settings.confirmThreadDelete,
-      settings.addProjectBaseDirectory,
       settings.defaultThreadEnvMode,
       settings.diffWordWrap,
       settings.enableAssistantStreaming,
@@ -1078,22 +1090,30 @@ export function GeneralSettingsPanel({
     codex: Boolean(
       settings.providers.codex.binaryPath !== DEFAULT_UNIFIED_SETTINGS.providers.codex.binaryPath ||
       settings.providers.codex.homePath !== DEFAULT_UNIFIED_SETTINGS.providers.codex.homePath ||
+      settings.providers.codex.updateCommand !==
+        DEFAULT_UNIFIED_SETTINGS.providers.codex.updateCommand ||
       settings.providers.codex.customModels.length > 0,
     ),
     claudeAgent: Boolean(
       settings.providers.claudeAgent.binaryPath !==
         DEFAULT_UNIFIED_SETTINGS.providers.claudeAgent.binaryPath ||
+      settings.providers.claudeAgent.updateCommand !==
+        DEFAULT_UNIFIED_SETTINGS.providers.claudeAgent.updateCommand ||
       settings.providers.claudeAgent.customModels.length > 0 ||
       settings.providers.claudeAgent.launchArgs !== "",
     ),
     cursor: Boolean(
       settings.providers.cursor.binaryPath !==
         DEFAULT_UNIFIED_SETTINGS.providers.cursor.binaryPath ||
+      settings.providers.cursor.updateCommand !==
+        DEFAULT_UNIFIED_SETTINGS.providers.cursor.updateCommand ||
       settings.providers.cursor.customModels.length > 0,
     ),
     opencode: Boolean(
       settings.providers.opencode.binaryPath !==
         DEFAULT_UNIFIED_SETTINGS.providers.opencode.binaryPath ||
+      settings.providers.opencode.updateCommand !==
+        DEFAULT_UNIFIED_SETTINGS.providers.opencode.updateCommand ||
       settings.providers.opencode.serverUrl !==
         DEFAULT_UNIFIED_SETTINGS.providers.opencode.serverUrl ||
       settings.providers.opencode.serverPassword !==
@@ -1384,8 +1404,10 @@ export function GeneralSettingsPanel({
       homePlaceholder: providerSettings.homePlaceholder,
       homeDescription: providerSettings.homeDescription,
       binaryPathValue: providerConfig.binaryPath,
+      defaultUpdateCommand: providerSettings.defaultUpdateCommand,
       serverUrlValue: "serverUrl" in providerConfig ? providerConfig.serverUrl : "",
       serverPasswordValue: "serverPassword" in providerConfig ? providerConfig.serverPassword : "",
+      updateCommandValue: providerConfig.updateCommand,
       isDirty: !Equal.equals(providerConfig, defaultProviderConfig),
       liveProvider,
       models,
@@ -1776,8 +1798,12 @@ export function GeneralSettingsPanel({
           const providerDisplayName =
             PROVIDER_DISPLAY_NAMES[providerCard.provider] ?? providerCard.title;
           const versionAdvisory = providerCard.versionAdvisory;
-          const updateCommand = versionAdvisory?.updateCommand ?? null;
+          const updateCommand =
+            providerCard.updateCommandValue.trim() ||
+            versionAdvisory?.updateCommand ||
+            providerCard.defaultUpdateCommand;
           const updateStatePresentation = providerCard.updateStatePresentation;
+          const updateOutput = getProviderUpdateOutput(providerCard.updateState);
           const isUpdatingProvider =
             providerCard.updateState?.status === "queued" ||
             providerCard.updateState?.status === "running" ||
@@ -1840,58 +1866,70 @@ export function GeneralSettingsPanel({
                       {providerCard.summary.detail ? ` - ${providerCard.summary.detail}` : null}
                     </p>
                     {advisoryDetail ? (
-                      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
-                        <span
-                          className={cn(
-                            advisoryEmphasis === "strong" && "text-warning",
-                            advisoryEmphasis === "success" && "text-success",
-                            advisoryEmphasis === "danger" && "text-destructive",
-                            advisoryEmphasis === "normal" && "text-muted-foreground",
-                          )}
-                        >
-                          {advisoryDetail}
-                        </span>
-                        {updateCommand ? (
-                          <Tooltip>
-                            <TooltipTrigger
-                              render={
-                                <Button
-                                  type="button"
-                                  size="xs"
-                                  variant="ghost"
-                                  className="h-5 gap-1 px-1.5 text-[11px] text-muted-foreground hover:text-foreground"
-                                  onClick={() =>
-                                    copyToClipboard(updateCommand, {
-                                      providerName: providerDisplayName,
-                                    })
-                                  }
-                                >
-                                  <CopyIcon className="size-3" />
-                                  Copy command
-                                </Button>
-                              }
-                            />
-                            <TooltipPopup side="top">{updateCommand}</TooltipPopup>
-                          </Tooltip>
-                        ) : null}
-                        {canRunProviderUpdate ? (
-                          <Button
-                            type="button"
-                            size="xs"
-                            variant="outline"
-                            className="h-5 gap-1 px-1.5 text-[11px]"
-                            disabled={isUpdatingProvider}
-                            onClick={() =>
-                              updateProvider(providerCard.provider, providerDisplayName)
-                            }
-                          >
-                            {isUpdatingProvider ? (
-                              <LoaderIcon className="size-3 animate-spin" />
-                            ) : (
-                              <DownloadIcon className="size-3" />
+                      <div className="space-y-1.5 text-xs">
+                        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+                          <span
+                            className={cn(
+                              advisoryEmphasis === "strong" && "text-warning",
+                              advisoryEmphasis === "success" && "text-success",
+                              advisoryEmphasis === "danger" && "text-destructive",
+                              advisoryEmphasis === "normal" && "text-muted-foreground",
                             )}
-                            Update
-                          </Button>
+                          >
+                            {advisoryDetail}
+                          </span>
+                          {updateCommand ? (
+                            <Tooltip>
+                              <TooltipTrigger
+                                render={
+                                  <Button
+                                    type="button"
+                                    size="xs"
+                                    variant="ghost"
+                                    className="h-5 gap-1 px-1.5 text-[11px] text-muted-foreground hover:text-foreground"
+                                    onClick={() =>
+                                      copyToClipboard(updateCommand, {
+                                        providerName: providerDisplayName,
+                                      })
+                                    }
+                                  >
+                                    <CopyIcon className="size-3" />
+                                    Copy command
+                                  </Button>
+                                }
+                              />
+                              <TooltipPopup side="top">{updateCommand}</TooltipPopup>
+                            </Tooltip>
+                          ) : null}
+                          {canRunProviderUpdate ? (
+                            <Button
+                              type="button"
+                              size="xs"
+                              variant="outline"
+                              className="h-5 gap-1 px-1.5 text-[11px]"
+                              disabled={isUpdatingProvider}
+                              onClick={() =>
+                                updateProvider(providerCard.provider, providerDisplayName)
+                              }
+                            >
+                              {isUpdatingProvider ? (
+                                <LoaderIcon className="size-3 animate-spin" />
+                              ) : (
+                                <DownloadIcon className="size-3" />
+                              )}
+                              Update
+                            </Button>
+                          ) : null}
+                        </div>
+                        {updateOutput ? (
+                          <details className="max-w-2xl rounded-md border border-border/70 bg-muted/30 px-2 py-1.5 text-muted-foreground">
+                            <summary className="cursor-pointer text-[11px] font-medium text-foreground/80">
+                              Update command output
+                            </summary>
+                            <pre className="mt-1 max-h-36 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed text-muted-foreground">
+                              {updateOutput}
+                            </pre>
+                          </details>
                         ) : null}
                       </div>
                     ) : null}
@@ -2025,6 +2063,36 @@ export function GeneralSettingsPanel({
                       </div>
                     ) : null}
 
+                    <div className="border-t border-border/60 px-4 py-3 sm:px-5">
+                      <label
+                        htmlFor={`provider-install-${providerCard.provider}-update-command`}
+                        className="block"
+                      >
+                        <span className="text-xs font-medium text-foreground">Update command</span>
+                        <Input
+                          id={`provider-install-${providerCard.provider}-update-command`}
+                          className="mt-1.5 font-mono text-xs"
+                          value={providerCard.updateCommandValue}
+                          onChange={(event) =>
+                            updateSettings({
+                              providers: {
+                                ...settings.providers,
+                                [providerCard.provider]: {
+                                  ...settings.providers[providerCard.provider],
+                                  updateCommand: event.target.value,
+                                },
+                              },
+                            })
+                          }
+                          placeholder={updateCommand}
+                          spellCheck={false}
+                        />
+                        <span className="mt-1 block text-xs text-muted-foreground">
+                          Leave empty to use the MarCode default: <code>{updateCommand}</code>
+                        </span>
+                      </label>
+                    </div>
+
                     {providerCard.serverPasswordPlaceholder ? (
                       <div className="border-t border-border/60 px-4 py-3 sm:px-5">
                         <label
@@ -2421,7 +2489,13 @@ export function ArchivedThreadsPanel() {
           <SettingsSection
             key={project.id}
             title={project.name}
-            icon={<ProjectFavicon environmentId={project.environmentId} cwd={project.cwd} />}
+            icon={
+              <ProjectFavicon
+                environmentId={project.environmentId}
+                cwd={project.cwd}
+                seed={project.name}
+              />
+            }
           >
             {projectThreads.map((thread) => (
               <div
diff --git a/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx b/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx
index 3b05329862..0010f39825 100644
--- a/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx
+++ b/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx
@@ -35,10 +35,14 @@ export function SidebarProviderUpdatePill() {
   const [exitingKey, setExitingKey] = useState<string | null>(null);
   const [dismissAfterExitKey, setDismissAfterExitKey] = useState<string | null>(null);
   const sessionStartedAtMs = useMemo(() => Date.now(), []);
-  const view = getProviderUpdateSidebarPillView(providers, {
-    visibleAfterMs: sessionStartedAtMs,
-    dismissedKeys,
-  });
+  const view = useMemo(
+    () =>
+      getProviderUpdateSidebarPillView(providers, {
+        visibleAfterMs: sessionStartedAtMs,
+        dismissedKeys,
+      }),
+    [providers, sessionStartedAtMs, dismissedKeys],
+  );
 
   const openProviderSettings = useCallback(() => {
     void navigate({ to: "/settings/general", hash: "providers" });
diff --git a/apps/web/src/featureGuards.test.ts b/apps/web/src/featureGuards.test.ts
index f14b42e332..b88bf3b56b 100644
--- a/apps/web/src/featureGuards.test.ts
+++ b/apps/web/src/featureGuards.test.ts
@@ -129,4 +129,15 @@ describe("MarCode feature guards", () => {
     expect(routeSource).not.toContain("hydrateThread");
     expect(routeSource).not.toContain("MAX_HYDRATION_RETRIES");
   });
+
+  it("route gates thread detail subscription on server thread existence", () => {
+    const routeSource = readSrc("routes/_chat.$environmentId.$threadId.tsx");
+    const retainIndex = routeSource.indexOf("retainThreadDetailSubscription(");
+    const effectStart = routeSource.lastIndexOf("useEffect(", retainIndex);
+    const effectEnd = routeSource.indexOf("}, [", retainIndex);
+    expect(effectStart).toBeGreaterThan(-1);
+    expect(effectEnd).toBeGreaterThan(retainIndex);
+    const effectBody = routeSource.slice(effectStart, effectEnd);
+    expect(effectBody).toContain("threadExists");
+  });
 });
diff --git a/apps/web/src/lib/providerUsage.test.ts b/apps/web/src/lib/providerUsage.test.ts
new file mode 100644
index 0000000000..7ff05bc7fe
--- /dev/null
+++ b/apps/web/src/lib/providerUsage.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+import { EventId, type OrchestrationThreadActivity, TurnId } from "@marcode/contracts";
+
+import { deriveLatestProviderUsageSnapshot } from "./providerUsage";
+
+function makeActivity(id: string, payload: unknown): OrchestrationThreadActivity {
+  return {
+    id: EventId.make(id),
+    tone: "info",
+    kind: "account.rate-limits.updated",
+    summary: "Account rate limits updated",
+    payload,
+    turnId: TurnId.make("turn-1"),
+    createdAt: "2026-03-23T00:00:00.000Z",
+  };
+}
+
+describe("providerUsage", () => {
+  it("derives Claude rate-limit windows from SDK events", () => {
+    const snapshot = deriveLatestProviderUsageSnapshot([
+      makeActivity("activity-1", {
+        type: "rate_limit_event",
+        rate_limit_info: {
+          status: "allowed_warning",
+          resetsAt: 1776582000,
+          rateLimitType: "five_hour",
+          utilization: 0.83,
+        },
+      }),
+    ]);
+
+    expect(snapshot?.providerLabel).toBe("Claude");
+    expect(snapshot?.status).toBe("warning");
+    expect(snapshot?.windows).toEqual([
+      {
+        label: "Session (5 hrs)",
+        usedPercent: 83,
+        resetsAt: 1776582000,
+      },
+    ]);
+  });
+
+  it("derives Codex primary and secondary rate-limit windows", () => {
+    const snapshot = deriveLatestProviderUsageSnapshot([
+      makeActivity("activity-1", {
+        rateLimits: {
+          limitId: "codex",
+          primary: {
+            usedPercent: 12,
+            windowDurationMins: 300,
+            resetsAt: 1776587601,
+          },
+          secondary: {
+            usedPercent: 44,
+            windowDurationMins: 10080,
+            resetsAt: 1777019601,
+          },
+        },
+      }),
+    ]);
+
+    expect(snapshot?.providerLabel).toBe("Codex");
+    expect(snapshot?.status).toBe("ok");
+    expect(snapshot?.windows).toEqual([
+      {
+        label: "Session (5 hrs)",
+        usedPercent: 12,
+        resetsAt: 1776587601,
+      },
+      {
+        label: "Weekly",
+        usedPercent: 44,
+        resetsAt: 1777019601,
+      },
+    ]);
+  });
+});
diff --git a/apps/web/src/lib/providerUsage.ts b/apps/web/src/lib/providerUsage.ts
index 5e9d397f46..a299b14d56 100644
--- a/apps/web/src/lib/providerUsage.ts
+++ b/apps/web/src/lib/providerUsage.ts
@@ -12,10 +12,6 @@ function asString(value: unknown): string | null {
   return typeof value === "string" && value.length > 0 ? value : null;
 }
 
-function asBoolean(value: unknown): boolean | null {
-  return typeof value === "boolean" ? value : null;
-}
-
 export interface RateLimitWindow {
   /** Label for this window, e.g. "Session (5 hrs)" or "Weekly" */
   readonly label: string;
diff --git a/apps/web/src/routes/_chat.$environmentId.$threadId.tsx b/apps/web/src/routes/_chat.$environmentId.$threadId.tsx
index 761d628bdd..7d7ef354a3 100644
--- a/apps/web/src/routes/_chat.$environmentId.$threadId.tsx
+++ b/apps/web/src/routes/_chat.$environmentId.$threadId.tsx
@@ -234,11 +234,11 @@ function ChatThreadRouteView() {
   const threadThreadId = threadRef?.threadId ?? null;
 
   useEffect(() => {
-    if (!threadEnvironmentId || !threadThreadId) {
+    if (!threadEnvironmentId || !threadThreadId || !threadExists) {
       return;
     }
     return retainThreadDetailSubscription(threadEnvironmentId, threadThreadId);
-  }, [threadEnvironmentId, threadThreadId]);
+  }, [threadEnvironmentId, threadThreadId, threadExists]);
 
   if (!threadRef || !bootstrapComplete || !routeThreadExists) {
     return null;
diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts
index 059df53fb9..303dc5a7b1 100644
--- a/packages/contracts/src/settings.ts
+++ b/packages/contracts/src/settings.ts
@@ -131,6 +131,7 @@ export const CodexSettings = Schema.Struct({
   enabled: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(true))),
   binaryPath: makeBinaryPathSetting("codex"),
   homePath: TrimmedString.pipe(Schema.withDecodingDefault(Effect.succeed(""))),
+  updateCommand: TrimmedString.pipe(Schema.withDecodingDefault(Effect.succeed(""))),
   customModels: Schema.Array(Schema.String).pipe(Schema.withDecodingDefault(Effect.succeed([]))),
 });
 export type CodexSettings = typeof CodexSettings.Type;
@@ -138,6 +139,7 @@ export type CodexSettings = typeof CodexSettings.Type;
 export const ClaudeSettings = Schema.Struct({
   enabled: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(true))),
   binaryPath: makeBinaryPathSetting("claude"),
+  updateCommand: TrimmedString.pipe(Schema.withDecodingDefault(Effect.succeed(""))),
   customModels: Schema.Array(Schema.String).pipe(Schema.withDecodingDefault(Effect.succeed([]))),
   launchArgs: Schema.String.pipe(Schema.withDecodingDefault(Effect.succeed(""))),
 });
@@ -147,6 +149,7 @@ export const CursorSettings = Schema.Struct({
   enabled: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))),
   binaryPath: makeBinaryPathSetting("agent"),
   apiEndpoint: TrimmedString.pipe(Schema.withDecodingDefault(Effect.succeed(""))),
+  updateCommand: TrimmedString.pipe(Schema.withDecodingDefault(Effect.succeed(""))),
   customModels: Schema.Array(Schema.String).pipe(Schema.withDecodingDefault(Effect.succeed([]))),
 });
 export type CursorSettings = typeof CursorSettings.Type;
@@ -155,6 +158,7 @@ export const OpenCodeSettings = Schema.Struct({
   binaryPath: makeBinaryPathSetting("opencode"),
   serverUrl: TrimmedString.pipe(Schema.withDecodingDefault(Effect.succeed(""))),
   serverPassword: TrimmedString.pipe(Schema.withDecodingDefault(Effect.succeed(""))),
+  updateCommand: TrimmedString.pipe(Schema.withDecodingDefault(Effect.succeed(""))),
   customModels: Schema.Array(Schema.String).pipe(Schema.withDecodingDefault(Effect.succeed([]))),
 });
 export type OpenCodeSettings = typeof OpenCodeSettings.Type;
@@ -243,12 +247,14 @@ const CodexSettingsPatch = Schema.Struct({
   enabled: Schema.optionalKey(Schema.Boolean),
   binaryPath: Schema.optionalKey(Schema.String),
   homePath: Schema.optionalKey(Schema.String),
+  updateCommand: Schema.optionalKey(Schema.String),
   customModels: Schema.optionalKey(Schema.Array(Schema.String)),
 });
 
 const ClaudeSettingsPatch = Schema.Struct({
   enabled: Schema.optionalKey(Schema.Boolean),
   binaryPath: Schema.optionalKey(Schema.String),
+  updateCommand: Schema.optionalKey(Schema.String),
   customModels: Schema.optionalKey(Schema.Array(Schema.String)),
   launchArgs: Schema.optionalKey(Schema.String),
 });
@@ -257,6 +263,7 @@ const CursorSettingsPatch = Schema.Struct({
   enabled: Schema.optionalKey(Schema.Boolean),
   binaryPath: Schema.optionalKey(Schema.String),
   apiEndpoint: Schema.optionalKey(Schema.String),
+  updateCommand: Schema.optionalKey(Schema.String),
   customModels: Schema.optionalKey(Schema.Array(Schema.String)),
 });
 
@@ -265,6 +272,7 @@ const OpenCodeSettingsPatch = Schema.Struct({
   binaryPath: Schema.optionalKey(Schema.String),
   serverUrl: Schema.optionalKey(Schema.String),
   serverPassword: Schema.optionalKey(Schema.String),
+  updateCommand: Schema.optionalKey(Schema.String),
   customModels: Schema.optionalKey(Schema.Array(Schema.String)),
 });