diff --git a/.agents/skills/commit-all/SKILL.md b/.agents/skills/commit-all/SKILL.md
new file mode 100644
index 000000000..9f59dab0c
--- /dev/null
+++ b/.agents/skills/commit-all/SKILL.md
@@ -0,0 +1,36 @@
+---
+name: commit-all
+description: Use this skill when the user asks to "commit all", "commit everything", or wants all outstanding changes committed. Groups unrelated changes into separate, well-described commits instead of one catch-all commit.
+---
+
+# Commit All
+
+## Goal
+
+Commit every outstanding change in the working tree — but group unrelated changes into separate, informative commits so the git history stays useful.
+
+## Workflow
+
+1. **Survey all changes.** Run `git status` and `git diff` (staged + unstaged) to see the full picture. Include untracked files.
+2. **Identify logical groups.** Cluster files by the change they belong to. A "group" is a set of files that were modified for the same reason (e.g. a bug fix, a new feature, a config tweak, a dependency update). Use file paths, diff content, and your understanding of the codebase to decide.
+3. **Order commits.** Infra/config/dependency changes first, then library/core changes, then feature/UI changes, then docs/polish.
+4. **For each group, create one commit:**
+   - Stage only the files belonging to that group (`git add <file> ...`). Never use `git add -A` or `git add .`.
+   - Write a concise, informative commit message that describes *what* changed and *why*. Follow the repo's existing commit style (check `git log --oneline -10`).
+   - Do not lump unrelated changes together just because they're small.
+5. **Verify.** After all commits, run `git status` to confirm the tree is clean. Run `git log --oneline -n <N>` (where N = number of commits created) to show the user what was committed.
+
+## Commit Message Rules
+
+- Keep the subject line under 72 characters.
+- Use imperative mood ("add", "fix", "update", not "added", "fixes").
+- If a change is trivial (whitespace, typo, formatting), it's fine to batch those into one commit labeled accordingly.
+- End every commit message with the Co-Authored-By trailer.
+
+## Hard Rules
+
+- Never combine unrelated changes in one commit.
+- Never skip or discard changes — everything gets committed.
+- Never use `git add -A` or `git add .`.
+- Do not push. Only commit locally.
+- Do not commit files that look like they contain secrets (`.env`, credentials, tokens). Warn the user about those instead.
diff --git a/.agents/skills/writing-guide/SKILL.md b/.agents/skills/writing-guide/SKILL.md
new file mode 100644
index 000000000..422ca50aa
--- /dev/null
+++ b/.agents/skills/writing-guide/SKILL.md
@@ -0,0 +1,109 @@
+---
+name: writing-guide
+description: Use when writing or editing any Spacebot copy — README sections, docs, release notes, marketing text, design doc summaries. Covers voice, tone, patterns to avoid, and what good Spacebot writing sounds like.
+---
+
+# Writing Guide
+
+Spacebot copy should sound like a confident engineer wrote it, not a language model. The test: would a developer reading the README think "someone knows what they're talking about" or "this was AI-generated"? These rules exist because the second outcome is common and costs credibility.
+
+## Voice
+
+Direct. Technical. No hedging. Short sentences with real content. Lead with the fact, not the framing. State what something is — not what it isn't.
+
+The tagline sets the tone: "The agent harness that runs teams, communities, and companies." That's a claim. It doesn't explain itself. Good Spacebot copy makes claims and lets the detail below earn them.
+
+## Patterns to Avoid
+
+These are the specific patterns that make copy sound AI-generated. Avoid all of them.
+
+**Em dashes in prose sentences.** Em dashes are fine in bullet point labels ("**Shell** — run arbitrary commands") but not inside sentences. Replace with a comma, a period, or restructure.
+
+Bad: "The cortex sees across all channels — the only process with full system scope."
+Good: "The cortex is the only process that sees across all channels."
+
+**"Not X. Not Y." openers.** Starting a description by saying what something isn't.
+
+Bad: "Not markdown files. Not unstructured vectors. Spacebot's memory is..."
+Good: "Spacebot's memory is a typed, graph-connected knowledge system."
+
+**"This isn't X, it's Y."** Classic AI construction. Just say the thing.
+
+Bad: "This isn't a generic claim — it's four specific mechanisms."
+Good: "Spacebot builds on itself through four specific mechanisms."
+
+**"The result is..." and "The through-line:"** Setup language that delays the actual point.
+
+Bad: "The result is an agent that works out of the box."
+Good: "It works out of the box."
+
+**"No X. No Y." closers.** Ending a paragraph with a string of negatives.
+
+Bad: "No heartbeat.json. No drift."
+Good: Just cut it, or fold it into the sentence that precedes it.
+
+**"This is the most important X."** Let the reader decide what's important.
+
+Bad: "This is the most important structural difference between Spacebot and every other agent harness."
+Good: Just state the difference.
+
+**Semicolons in prose.** Use a period.
+
+Bad: "The agent proposes; you decide."
+Good: "The agent proposes. You decide."
+
+**Parallel triplets.** Three consecutive "same X, same Y, same Z" constructions sound mechanical.
+
+Bad: "Same context, same memories, same understanding."
+Good: "They have the full conversation history."
+
+**"Not only X, but also Y."** Pick one.
+
+**Generic improvement claims.** Never say "self-improving" or "gets smarter." Name the actual mechanism.
+
+Bad: "Spacebot learns from experience."
+Good: "After a conversation goes idle, a background branch reviews the history and saves skills and memories worth keeping."
+
+## What Spacebot Is Opinionated About
+
+When describing Spacebot's opinions, name them specifically: the process model, memory schema, and task lifecycle. Don't say its opinions are about "one thing" — they cover multiple things. The unifying idea is that state belongs in structured storage, not markdown files the LLM manages.
+
+## What Is and Isn't a Differentiator
+
+**Is a differentiator:**
+- The task system as the structural foundation of autonomy
+- True process-level concurrency across users
+- Typed memory graph in SQLite with graph edges and hybrid search
+- Autonomy channel with full context on wake, state tracked through tasks not files
+- Spacedrive integration for cross-device execution and safe data access
+
+**Is not a differentiator:**
+- Skills (every harness has skills, the format is not special)
+- "Self-improving" as a generic claim
+- Internal implementation details the user doesn't see
+
+Don't advertise internal improvements as external features. If Spacebot previously sent cold context to workers and now sends full context, that's an internal fix. The user-visible claim is "the autonomy channel wakes with full context" — not "unlike the old approach."
+
+## The Spacedrive Story
+
+Two layers:
+
+**What exists today:** multi-device access via P2P, remote execution via Spacedrive's permission system, file system intelligence via context nodes, safe data access via Prompt Guard 2 screening.
+
+**Where it's going:** team + personal library switching, org graph delegation, full company deployment model.
+
+Be honest about which is which. Don't present the vision as current capability.
+
+## Prose Structure
+
+Opening paragraphs should be 3-4 sentences. Lead with the strongest claim. No setup sentences ("In this section, we'll cover..."). No closing sentences that summarize what was just said.
+
+Bullet points are for lists of discrete items. Prose is for explanation, argument, and narrative. Don't bullet-point things that belong in prose.
+
+Section headers are short nouns or short sentences. No gerunds ("Building the Memory System"). No questions ("What Is the Task System?").
+
+## Words to Avoid
+
+comprehensive, utilize, harness (as a verb), unlock, revolutionary, groundbreaking, remarkable, pivotal, powerful, exciting, cutting-edge, seamless, robust, leverage, paradigm, ecosystem (when not literally true), journey, dive deep, explore, embark.
+
+Also avoid: "at its core," "under the hood," "out of the box" (unless used once, intentionally), "world-class," "best-in-class."
diff --git a/.gitignore b/.gitignore
index 78f85fdef..c50cebe07 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,9 @@
 .DS_Store
 .fastembed_cache
 .build/
+*.db
+*.db-shm
+*.db-wal
 
 # Interface
 interface/node_modules/
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 000000000..2fe95bf87
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,187 @@
+# Contributing
+
+Contributions welcome. Read [RUST_STYLE_GUIDE.md](RUST_STYLE_GUIDE.md) before writing any code, and [AGENTS.md](AGENTS.md) for the full implementation guide.
+
+---
+
+## Prerequisites
+
+- **Rust** 1.85+ with `rustfmt` and `clippy`
+- **protoc** (protobuf compiler)
+- **bun** (for frontend/interface work)
+- **just** (`brew install just` or `cargo install just --locked`)
+
+Optional: [Nix flakes](https://nixos.org/) for isolated dev environments (`nix develop` gives you everything).
+
+---
+
+## Getting Started
+
+1. Fork the repo and create a feature branch
+2. Run `./scripts/install-git-hooks.sh` (installs a pre-commit hook that runs `cargo fmt`)
+3. `cargo build` to verify the backend compiles
+4. For frontend work: `cd interface && bun install`
+5. Make your changes
+6. Run `just preflight && just gate-pr`
+7. Submit a PR
+
+---
+
+## PR Gate
+
+Every PR must pass `just gate-pr` before merge. This mirrors CI and checks:
+
+1. **Migration safety** — new migrations only, never edit existing ones
+2. **Formatting** — `cargo fmt --all -- --check`
+3. **Compile** — `cargo check --all-targets`
+4. **Lints** — `cargo clippy --all-targets -Dwarnings`
+5. **Tests** — `cargo test --lib`
+6. **Integration compile** — `cargo test --tests --no-run`
+
+Use `just gate-pr --fast` to skip clippy and integration compile during iteration.
+
+The frontend CI (`interface-ci.yml`) runs `bun ci` and `bunx tsc --noEmit` on interface changes.
+
+---
+
+## Project Structure
+
+Single binary crate (no workspace). Key directories:
+
+```
+src/
+├── main.rs           — CLI entry, config, startup
+├── lib.rs            — re-exports
+├── config.rs         — config loading/validation
+├── error.rs          — top-level Error enum
+├── llm/              — LlmManager, model routing, providers
+├── agent/            — Channel, Branch, Worker, Compactor, Cortex
+├── hooks/            — SpacebotHook, CortexHook
+├── tools/            — reply, branch, spawn_worker, memory_*, etc.
+├── memory/           — MemoryStore, hybrid search, graph ops
+├── messaging/        — Discord, Telegram, Slack, webhook adapters
+├── conversation/     — history persistence, context assembly
+├── cron/             — scheduler, CRUD
+├── identity/         — SOUL.md, IDENTITY.md, USER.md loading
+├── secrets/          — encrypted credentials (AES-256-GCM)
+├── settings/         — key-value settings
+└── db/               — SQLite migrations, connection setup
+
+interface/            — Dashboard UI (Vite + React + TypeScript)
+prompts/              — LLM prompts as markdown (not Rust strings)
+docs/                 — Documentation site (MDX)
+desktop/              — Tauri desktop app
+scripts/              — Dev tooling (hooks, gates, builds)
+```
+
+Module roots use `src/module.rs`, **not** `src/module/mod.rs`.
+
+---
+
+## Rust Conventions
+
+The full guide is in [RUST_STYLE_GUIDE.md](RUST_STYLE_GUIDE.md). Key points:
+
+**Imports** — three tiers separated by blank lines: (1) crate-local, (2) external crates, (3) std.
+
+**Error handling** — domain errors per module, wrapped by top-level `Error` enum via `#[from]`. Use `?` and `.context()`. Never silently discard with `let _ =`.
+
+**Async** — native RPITIT for async traits (not `#[async_trait]`). `tokio::spawn` for concurrent work. Clone before moving into async blocks.
+
+**Logging** — `tracing` crate, never `println!`. Structured key-value fields. `#[tracing::instrument]` for spans.
+
+**Lints** (enforced in Cargo.toml): `dbg_macro = "forbid"`, `todo = "forbid"`, `unimplemented = "forbid"`.
+
+**Testing** — `#[cfg(test)]` at end of file. `#[tokio::test]` for async. `.unwrap()` is fine in tests only.
+
+---
+
+## Frontend (Interface)
+
+Use **bun** exclusively — never npm, pnpm, or yarn.
+
+```bash
+cd interface
+bun install       # install deps
+bun run dev       # dev server
+bun run build     # production build
+```
+
+### SpaceUI Packages
+
+The dashboard uses `@spacedrive/*` packages published to npm from the [spaceui](https://github.com/spacedriveapp/spaceui) monorepo:
+
+- `@spacedrive/primitives` — base UI components
+- `@spacedrive/ai` — AI chat components
+- `@spacedrive/forms` — form components
+- `@spacedrive/explorer` — file explorer components
+- `@spacedrive/tokens` — design tokens
+
+`package.json` points to npm versions (e.g. `"^0.2.0"`). CI pulls from the registry. For local development, `bun link` overrides them with your local copies.
+
+**Local SpaceUI development:**
+
+Clone the spaceui repo adjacent to this one, then run the link command:
+
+```bash
+git clone https://github.com/spacedriveapp/spaceui ../spaceui
+just spaceui-link
+```
+
+This builds SpaceUI, registers all packages as global links, and connects them to `interface/`. Use `bun run watch` in the SpaceUI repo for automatic rebuilds.
+
+To unlink and restore npm versions: `just spaceui-unlink`.
+
+---
+
+## Useful Commands
+
+```bash
+just preflight                # validate git/remote state
+just gate-pr                  # full PR gate (mirrors CI)
+just gate-pr --fast           # skip clippy + integration compile
+just typegen                  # generate TypeScript API types
+just check-typegen            # verify types match
+just build-opencode-embed     # build OpenCode embed bundle
+just bundle-sidecar           # build Tauri sidecar
+just desktop-dev              # run desktop app in dev mode
+just update-frontend-hash     # update Nix hash after frontend dep changes
+```
+
+---
+
+## Migrations
+
+SQLite migrations are **immutable**. Never edit an existing migration file. Always create a new timestamped migration for schema changes.
+
+---
+
+## Architecture
+
+See [ARCHITECTURE.md](ARCHITECTURE.md) for the full design. The short version: five process types, each with one job.
+
+- **Channels** — user-facing LLM, stays responsive, never blocks on work
+- **Branches** — fork channel context to think, return conclusion, get deleted
+- **Workers** — independent task execution with focused tools, no conversation context
+- **Compactor** — programmatic context monitor, triggers compaction before channels fill up
+- **Cortex** — system observer, generates memory bulletins, supervises processes
+
+Key rule: **never block the channel**. Branch to think, spawn workers to act.
+
+---
+
+## Release Process
+
+Releases are triggered by git tags (`v*`). The CI workflow:
+
+1. Verifies `Cargo.toml` version matches the tag
+2. Builds multi-platform binaries (x86_64/aarch64, Linux/macOS)
+3. Builds Docker images (amd64/arm64)
+4. Creates a GitHub release with binaries
+5. Updates the Homebrew tap
+
+---
+
+## License
+
+FSL-1.1-ALv2 ([Functional Source License](https://fsl.software/)), converting to Apache 2.0 after two years.
diff --git a/README.md b/README.md
index bc79c3346..e921e9f54 100644
--- a/README.md
+++ b/README.md
@@ -5,9 +5,7 @@
 <h1 align="center">Spacebot</h1>
 
 <p align="center">
-  <strong>An AI agent for teams, communities, and multi-user environments.</strong><br/>
-  Thinks, executes, and responds — concurrently, not sequentially.<br/>
-  Never blocks. Never forgets.
+  <strong>The agent harness that runs teams, communities, and companies.</strong>
 </p>
 
 <p align="center">
@@ -21,15 +19,17 @@
     <img src="https://img.shields.io/discord/949090953497567312?label=Discord&color=5865F2" />
   </a>
 
-  [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/spacedriveapp/spacebot)
+  <a href="https://deepwiki.com/spacedriveapp/spacebot">
+    <img src="https://img.shields.io/static/v1?label=Ask&message=DeepWiki&color=5B6EF7" />
+  </a>
 </p>
 
 <p align="center">
   <a href="https://spacebot.sh"><strong>spacebot.sh</strong></a> •
   <a href="#how-it-works">How It Works</a> •
-  <a href="#architecture">Architecture</a> •
+  <a href="#goals-and-tasks">Goals & Tasks</a> •
   <a href="#quick-start">Quick Start</a> •
-  <a href="#tech-stack">Tech Stack</a> •
+  <a href="#spacebot--spacedrive">Spacedrive</a> •
   <a href="https://docs.spacebot.sh">Docs</a>
 </p>
 
@@ -41,194 +41,105 @@
 
 ---
 
-## The Problem
+Spacebot is opinionated agent infrastructure, built for teams and usable by anyone. **State belongs in structured storage, not markdown files the LLM manages.** Memory lives in a typed graph in SQLite. Autonomy runs on a task state machine linked to goals, not a heartbeat.json. The LLM reasons. The system holds state.
 
-Most AI agent frameworks run everything in a single session. One LLM thread handles conversation, thinking, tool execution, memory retrieval, and context compaction — all in one loop. When it's doing work, it can't talk to you. When it's compacting, it goes dark. When it retrieves memories, raw results pollute the context with noise.
+**It gets smarter the more you use it.** After complex tasks, the agent captures what it learned as reusable skills. After conversations go idle, a background process silently saves skills and memories worth keeping. Every session builds on the last — without any user action.
 
-[OpenClaw](https://github.com/anomalyco/openclaw) _does_ have subagents, but handles them poorly and there's no enforcement to their use. The session is the bottleneck for everything.
-
-Spacebot splits the monolith into specialized processes that only do one thing, and delegate everything else.
+It works out of the box and scales from one person to a whole community.
 
 ---
 
-## Built for Teams and Communities
-
-Most AI agents are built for one person in one conversation. Spacebot is built for many people working together — a Discord community with hundreds of active members, a Slack workspace with teams running parallel workstreams, a Telegram group coordinating across time zones.
-
-This is why the architecture exists. A single-threaded agent breaks the moment two people talk at once. Spacebot's delegation model means it can think about User A's question, execute a task for User B, and respond to User C's small talk — all at the same time, without any of them waiting on each other.
-
-**For communities** — drop Spacebot into a Discord server. It handles concurrent conversations across channels and threads, remembers context about every member, and does real work (code, research, file operations) without going dark. Fifty people can interact with it simultaneously.
-
-**For fast-moving channels** — when messages are flying in, Spacebot doesn't try to respond to every single one. A message coalescing system detects rapid-fire bursts, batches them into a single turn, and lets the LLM read the room — it picks the most interesting thing to engage with, or stays quiet if there's nothing to add. Configurable debounce timing, automatic DM bypass, and the LLM always knows which messages arrived together.
-
-**For teams** — connect it to Slack. Each channel gets a dedicated conversation with shared memory. Spacebot can run long coding sessions for one engineer while answering quick questions from another. Workers handle the heavy lifting in the background while the channel stays responsive.
-
-**For multi-agent setups** — run multiple agents on one instance. A community bot with a friendly personality on Discord, a no-nonsense dev assistant on Slack, and a research agent handling background tasks. Each with its own identity, memory, and security permissions. One binary, one deploy.
+## The Problem
 
-### Deploy Your Way
+Most AI agent frameworks run everything in a single session. One LLM thread handles conversation, thinking, tool execution, memory retrieval, and context compaction, all in one loop. When it's doing work, it can't talk to you. When it's compacting, it goes dark. When it retrieves memories, raw results pollute the context with noise.
 
-| Method                                 | What You Get                                                                                |
-| -------------------------------------- | ------------------------------------------------------------------------------------------- |
-| **[spacebot.sh](https://spacebot.sh)** | One-click hosted deploy. Connect your platforms, configure your agent, done.                |
-| **Self-hosted**                        | Single Rust binary. No Docker, no server dependencies, no microservices. Clone, build, run. |
-| **Docker**                             | Container image with everything included. Mount a volume for persistent data.               |
+Spacebot splits the monolith into specialized processes that only do one thing, and delegate everything else.
 
 ---
 
-## Capabilities
+## Built for Teams
 
-### Task Execution
+No other agent harness handles concurrent multi-user conversations, shared memory across channels, and true process-level concurrency. A Discord community with hundreds of active members, a Slack workspace running parallel workstreams, a Telegram group coordinating across time zones. Spacebot handles all of it without any user waiting on another.
 
-Workers come loaded with tools for real work:
+Solo users get the same infrastructure. Better memory, better concurrency, better structure. Everything teams rely on, for one person.
 
-- **Shell** — run arbitrary commands with configurable timeouts
-- **File** — read, write, and list files with auto-created directories
-- **Exec** — run specific programs with arguments and environment variables
-- **[OpenCode](https://opencode.ai)** — spawn a full coding agent as a persistent worker with codebase exploration, LSP awareness, and deep context management
-- **Browser** — headless Chrome automation with an accessibility-tree ref system. Navigate, click, type, screenshot, manage tabs — the LLM addresses elements by short refs (`e0`, `e1`) instead of fragile CSS selectors
-- **[Brave](https://brave.com/search/api/) web search** — search the web with freshness filters, localization, and configurable result count
-
-### Messaging
+**For communities:** drop Spacebot into a Discord server. It handles concurrent conversations across channels and threads, remembers context about every member, and does real work without going dark. Fifty people can interact simultaneously. A message coalescing system detects rapid-fire bursts, batches them into a single turn, and lets the agent read the room.
 
-Native adapters for Discord, Slack, Telegram, Twitch, and Webchat with full platform feature support:
-
-- **Message coalescing** — rapid-fire messages are batched into a single LLM turn with timing context, so the agent reads the room instead of spamming replies
-- **File attachments** — send and receive files, images, and documents
-- **Rich messages** — embeds/cards, interactive buttons, select menus, and polls (Discord). Block Kit messages and slash commands (Slack)
-- **Threading** — automatic thread creation for long conversations
-- **Reactions** — emoji reactions on messages
-- **Typing indicators** — visual feedback while the agent is thinking
-- **Message history backfill** — reads recent conversation context on first message
-- **Per-channel permissions** — guild, channel, and DM-level access control, hot-reloadable
-- **Webchat** — embeddable portal chat with SSE streaming, per-agent session isolation
-
-### Memory
+**For teams:** connect it to Slack. Each channel gets a dedicated conversation with shared memory. One engineer gets a deep coding session while another gets a quick answer. Workers handle heavy lifting in the background while the channel stays responsive.
 
-Not markdown files. Not _unstructured_ blocks in a vector database. Spacebot's memory is a typed, graph-connected knowledge system — and this opinionated structure is why agents are productive out of the box.
+**For multi-agent setups:** run multiple agents on one instance. A community bot on Discord, a dev assistant on Slack, a research agent handling background tasks. Each with its own identity, memory, and security permissions. One binary, one deploy.
 
-Every memory has a type, an importance score, and graph edges connecting it to related memories. The agent doesn't just "remember things" — it knows the difference between a fact it learned, a decision that was made, a goal it's working toward, and a preference the user expressed. This structure is what lets the cortex synthesize a useful briefing instead of dumping raw search results into context.
-
-- **Eight memory types** — Fact, Preference, Decision, Identity, Event, Observation, Goal, Todo
-- **Graph edges** — RelatedTo, Updates, Contradicts, CausedBy, PartOf
-- **Hybrid recall** — vector similarity + full-text search merged via Reciprocal Rank Fusion
-- **Memory import** — dump files into the `ingest/` folder and Spacebot extracts structured memories automatically. Supports text, markdown, and PDF files. Migrating from OpenClaw? Drop your markdown memory files in and walk away.
-- **Cross-channel recall** — branches can read transcripts from other conversations
-- **Memory bulletin** — the cortex generates a periodic briefing of the agent's knowledge, injected into every conversation
-- **Warmup readiness contract** — branch/worker/cron dispatch checks `ready_for_work` (warm state + embedding ready + fresh bulletin), records cold-dispatch metrics, and triggers background forced warmup without blocking channels
-
-### Scheduling
-
-Cron jobs created and managed from conversation or config:
+---
 
-- **Natural scheduling** — "check my inbox every 30 minutes" becomes a cron job with a delivery target
-- **Strict wall-clock schedules** — use cron expressions for exact local-time execution (for example, `0 9 * * *` for 9:00 every day)
-- **Legacy interval compatibility** — existing `interval_secs` jobs still run and remain configurable
-- **Configurable timeouts** — per-job `timeout_secs` to cap execution time (defaults to 120s)
-- **Active hours** — restrict jobs to specific time windows (supports midnight wrapping)
-- **Circuit breaker** — auto-disables after 3 consecutive failures
-- **Full agent capabilities** — each job gets a fresh channel with branching and workers
+## How It Works
 
-### Model Routing
+Five process types. Each does one job.
 
-Four-level routing system that picks the right model for every LLM call. Structural routing handles the common case — process types and task types are known at spawn time. Prompt-level routing handles the rest, scoring user messages to downgrade simple requests to cheaper models automatically.
+**Channels** are the user-facing LLM process. One per conversation, with soul, identity, and personality. A channel never executes tasks or searches memories directly. It branches to think, spawns workers to act, and stays responsive.
 
-- **Process-type defaults** — channels get the best conversational model, workers get something fast and cheap, compactors get the cheapest tier
-- **Task-type overrides** — a coding worker upgrades to a stronger model, a summarization worker stays cheap
-- **Prompt complexity scoring** — lightweight keyword scorer classifies user messages into three tiers (light/standard/heavy) and routes to the cheapest model that can handle it. Scores the user message only — system prompts and context are excluded. <1ms, no external calls
-- **Fallback chains** — when a model returns 429 or 502, the next model in the chain takes over automatically
-- **Rate limit tracking** — 429'd models are deprioritized across all agents for a configurable cooldown
-- **Per-agent routing profiles** — eco, balanced, or premium presets that shift what models each tier maps to. A budget agent routes simple messages to free models while a premium agent stays on opus
+**Branches** fork from the channel's context to think. They have the full conversation history and run concurrently. The channel sees the conclusion, not the working.
 
-```toml
-[defaults.routing]
-channel = "anthropic/claude-sonnet-4"
-worker = "anthropic/claude-haiku-4.5"
+**Workers** are independent processes. Each gets a specific task, a focused prompt, and task-appropriate tools, with no conversation context. Fire-and-forget for one-shot tasks, or interactive for longer sessions where follow-up routes to the active worker.
 
-[defaults.routing.task_overrides]
-coding = "anthropic/claude-sonnet-4"
+**The Compactor** is a programmatic monitor (not an LLM) that watches context size per channel and triggers compaction before the channel fills up. Compaction workers run alongside without blocking.
 
-[defaults.routing.prompt_routing]
-enabled = true
-process_types = ["channel", "branch"]
+**The Cortex** sees across all channels, workers, and branches simultaneously. It generates the memory bulletin, a periodically refreshed briefing of the agent's knowledge injected into every conversation. It supervises processes, maintains the memory graph, detects patterns, and provides an admin chat with full tool access.
 
-[defaults.routing.fallbacks]
-"anthropic/claude-sonnet-4" = ["anthropic/claude-haiku-4.5"]
 ```
+User sends message
+    → Channel receives it
+        → Branches to think (has channel's context)
+            → Branch recalls memories, decides what to do
+            → Branch might spawn a worker for heavy tasks
+            → Branch returns conclusion
+        → Branch deleted
+    → Channel responds to user
 
-**Z.ai (GLM) example** — use GLM models directly with a [GLM Coding Plan](https://z.ai) subscription:
-
-```toml
-[llm]
-zhipu_key = "env:ZHIPU_API_KEY"
-
-[defaults.routing]
-channel = "zhipu/glm-4.7"
-worker = "zhipu/glm-4.7"
-
-[defaults.routing.task_overrides]
-coding = "zhipu/glm-4.7"
+Channel context hits 80%
+    → Compactor notices
+        → Spins off a compaction worker
+            → Worker summarizes old context
+            → Compacted summary swaps in
+    → Channel never interrupted
 ```
 
-**Ollama example** — run against a local Ollama instance:
+For process capabilities, tool access by type, memory internals, cron, and multi-agent isolation, see [ARCHITECTURE.md](ARCHITECTURE.md).
 
-```toml
-[llm]
-ollama_base_url = "http://localhost:11434"
+---
 
-[defaults.routing]
-channel = "ollama/gemma3"
-worker = "ollama/gemma3"
+## Goals and Tasks
 
-[defaults.routing.task_overrides]
-coding = "ollama/qwen3"
-```
+Spacebot is built around a task system. Goals set direction. Tasks carry work. The agent executes, remembers, and improves whether or not you're present.
 
-**Custom provider example** — add any OpenAI-compatible or Anthropic-compatible endpoint:
+On a configured interval, the **autonomy channel** wakes with full context: identity, memory, working memory, the complete task state, active goals, and a summary of its last few runs. It picks the most important ready task, executes it with full tool access, and exits.
 
-```toml
-[llm.provider.my-provider]
-api_type = "openai_completions"  # or "openai_chat_completions", "openai_responses", "anthropic"
-base_url = "https://my-llm-host.example.com"
-api_key = "env:MY_PROVIDER_KEY"
+State lives in tasks. Progress notes go on the task itself. After a crash, the next wake reads task metadata and picks up where things left off. At the end of each run the autonomy channel writes a summary of what happened. On next wake, that summary is the first thing it reads.
 
-[defaults.routing]
-channel = "my-provider/my-model"
-```
+**The agent proposes. You decide.** Tasks the autonomy channel creates land in `pending_approval`. Nothing runs autonomously until you approve it.
 
-**Azure OpenAI Service** — configure Azure OpenAI deployments:
+---
 
-```toml
-[llm.provider.azure]
-api_type = "azure"
-base_url = "https://{resource-name}.openai.azure.com"
-api_key = "env:AZURE_API_KEY"
-api_version = "2024-06-01"  # required
-deployment = "gpt-4o"        # required — your deployment name
+## What It Does
 
-[defaults.routing]
-channel = "azure/gpt-4o"
-worker = "azure/gpt-4o-mini"
-```
+### Memory
 
-Important notes:
-- `base_url` must end with `.openai.azure.com`
-- `api_version` and `deployment` are required fields
-- API key authentication is handled automatically via the `api-key` header
-- For Azure AI Foundry (accessing Anthropic, Llama, or other models through Azure's model catalog), use `api_type = "openai_chat_completions"` instead and configure the deployment endpoint accordingly
+Spacebot's memory is a typed, graph-connected knowledge system in SQLite and LanceDB. Every memory has a type, an importance score, and graph edges to related memories. The agent distinguishes facts from decisions, preferences from goals. That structure lets the cortex synthesize a useful briefing rather than dumping raw search results into context.
 
-Additional built-in providers include **Kilo Gateway**, **OpenCode Go**, **NVIDIA**, **MiniMax**, **Moonshot AI (Kimi)**, and **Z.AI Coding Plan** — configure with `kilo_key`, `opencode_go_key`, `nvidia_key`, `minimax_key`, `moonshot_key`, or `zai_coding_plan_key` in `[llm]`.
+- **Eight memory types** — Fact, Preference, Decision, Identity, Event, Observation, Goal, Todo
+- **Graph edges** — RelatedTo, Updates, Contradicts, CausedBy, PartOf
+- **Hybrid recall** — vector similarity + full-text search merged via Reciprocal Rank Fusion
+- **Memory import** — drop files into `ingest/` and Spacebot extracts structured memories automatically. Supports text, markdown, and PDF.
+- **Memory bulletin** — the cortex generates a periodic knowledge briefing injected into every conversation
 
 ### Skills
 
-Extensible skill system integrated with [skills.sh](https://skills.sh):
+Skills are reusable procedures injected into worker system prompts. The agent writes them from experience — and they accumulate automatically over time.
 
-- **skills.sh registry** — install any skill from the public ecosystem with one command
-- **CLI management** — `spacebot skill add owner/repo` to install, list, remove, and inspect skills
+- **Autonomous skill capture** — when a channel identifies a workflow that required multiple steps or problem-solving, it delegates to a branch to write it as a skill. The skill loads into the next session and every session after
+- **Post-conversation reflection** — after a conversation goes idle, a background branch silently reviews the history and saves skills and memories worth keeping. No user action required
+- **AI-assisted authoring** — describe a skill in plain language, the agent generates it and shows a preview before saving
 - **Worker injection** — skills are injected into worker system prompts for specialized tasks
-- **Bundled resources** — scripts, references, and assets packaged with skills
-- **OpenClaw compatible** — drop in existing OpenClaw skills, or any skill from skills.sh
-
-**Install skills from the registry:**
+- **skills.sh registry** — install any skill from the public ecosystem with one command. Compatible with any skill from the public registry
 
 ```bash
 spacebot skill add vercel-labs/agent-skills
@@ -236,204 +147,103 @@ spacebot skill add anthropics/skills/pdf
 spacebot skill list
 ```
 
-### MCP Integration
-
-Connect workers to external [MCP](https://modelcontextprotocol.io/) (Model Context Protocol) servers for arbitrary tool access -- databases, APIs, SaaS products, custom integrations -- without native Rust implementations:
-
-- **Per-agent config** — each agent declares its own MCP servers in `config.toml`
-- **Both transports** — stdio (subprocess) for local tools, streamable HTTP for remote servers
-- **Automatic tool discovery** — tools are discovered via the MCP protocol and registered on worker ToolServers with namespaced names (`{server}_{tool}`)
-- **Automatic retry** — failed connections retry in the background with exponential backoff (5s initial, 60s cap, 12 attempts). A broken server never blocks agent startup
-- **Hot-reloadable** — add, remove, or change servers in config and they reconcile live
-- **API management** — full CRUD API under `/api/mcp/` for managing server definitions and monitoring connection status programmatically
-
-```toml
-[[mcp_servers]]
-name = "filesystem"
-transport = "stdio"
-command = "npx"
-args = ["-y", "@modelcontextprotocol/server-filesystem", "/workspace"]
-
-[[mcp_servers]]
-name = "sentry"
-transport = "http"
-url = "https://mcp.sentry.io"
-headers = { Authorization = "Bearer ${SENTRY_TOKEN}" }
-```
-
-### Security
-
-Spacebot runs autonomous LLM processes that execute arbitrary shell commands and spawn subprocesses. Security isn't an add-on — it's a layered system designed so that no single failure exposes credentials or breaks containment.
-
-#### Credential Isolation
-
-Secrets are split into two categories: **system** (LLM API keys, messaging tokens — never exposed to subprocesses) and **tool** (CLI credentials like `GH_TOKEN` — injected as env vars into workers). The category is auto-assigned based on the secret name, or set explicitly.
-
-- **Environment sanitization** — every subprocess starts with a clean environment (`--clearenv` on Linux, `env_clear()` everywhere else). Only safe baseline vars (`PATH`, `HOME`, `LANG`), tool-category secrets, and explicit `passthrough_env` entries are present. In sandbox mode, `HOME` is set to the workspace; in passthrough mode, `HOME` uses the parent environment. System secrets never enter any subprocess
-- **Secret store** — credentials live in a dedicated redb database, not in `config.toml`. Config references secrets by alias (`anthropic_key = "secret:ANTHROPIC_API_KEY"`), so the config file is safe to display, screenshot, or `cat`
-- **Encryption at rest** — optional AES-256-GCM encryption with a master key derived via Argon2id. The master key lives in the OS credential store (macOS Keychain, Linux kernel keyring) — never on disk, never in an env var, never accessible to worker subprocesses
-- **Keyring isolation** — on Linux, workers are spawned with a fresh empty session keyring via `pre_exec`. Even without the sandbox, workers cannot access the parent's kernel keyring where the master key lives
-- **Output scrubbing** — all tool secret values are redacted from worker output before it reaches channels or LLM context. A rolling buffer handles secrets split across stream chunks. Channels see `[REDACTED]`, never raw values
-- **Worker secret management** — workers can store credentials they obtain (API keys from account creation, OAuth tokens) via the `secret_set` tool. Stored secrets are immediately available to future workers
-
-#### Process Containment
-
-- **Process sandbox** — shell and exec tools run inside OS-level filesystem containment. On Linux, [bubblewrap](https://github.com/containers/bubblewrap) creates a mount namespace where the entire filesystem is read-only except the agent's workspace and configured writable paths. On macOS, `sandbox-exec` enforces equivalent restrictions via SBPL profiles. Kernel-enforced, not string-filtered
-- **Dynamic sandbox mode** — sandbox settings are hot-reloadable. Toggle via the dashboard or API without restarting the agent
-- **Workspace isolation** — file tools canonicalize all paths and reject anything outside the agent's workspace. Symlinks that escape are blocked
-- **Leak detection** — secret-pattern checks are enforced at channel egress (`reply` and plaintext fallback output) across plaintext, URL-encoded, base64, and hex encodings. Outbound text matching a secret pattern is blocked; worker tool outputs no longer hard-fail the worker
-- **Library injection blocking** — the exec tool blocks dangerous environment variables (`LD_PRELOAD`, `DYLD_INSERT_LIBRARIES`, `NODE_OPTIONS`, etc.) that could hijack child process loading
-- **SSRF protection** — the browser tool blocks requests to cloud metadata endpoints, private IPs, loopback, and link-local addresses
-- **Identity file protection** — writes to `SOUL.md`, `IDENTITY.md`, and `USER.md` are blocked at the application level
-- **Durable binary storage** — `tools/bin` directory on PATH survives hosted rollouts. Workers are instructed to install binaries there instead of ephemeral package manager locations
-
-```toml
-[agents.sandbox]
-mode = "enabled"                              # "enabled" (default) or "disabled"
-writable_paths = ["/home/user/projects/myapp"] # additional writable dirs beyond workspace
-passthrough_env = ["CUSTOM_VAR"]              # forward specific env vars to workers
-```
-
----
+### Scheduling
 
-## How It Works
+Cron jobs created and managed from conversation:
 
-Five process types. Each does one job.
+- **Natural scheduling** — "check my inbox every 30 minutes" becomes a cron job with a delivery target
+- **Strict wall-clock schedules** — cron expressions for exact local-time execution
+- **Single delivery** — all reply calls are buffered during the run and flushed as one message when the job completes. No mid-run fragments.
+- **Circuit breaker** — auto-disables after 3 consecutive failures
+- **Full agent capabilities** — each job gets a fresh channel with branching and workers
 
-### Channels
+### Task Execution
 
-The user-facing LLM process — the ambassador to the human. One per conversation (Discord thread, Slack channel, Telegram DM, etc). Has soul, identity, and personality. Talks to the user. Delegates everything else.
+Workers come loaded with tools for real work:
 
-A channel does **not**: execute tasks directly, search memories itself, or do any heavy tool work. It is always responsive — never blocked by work, never frozen by compaction.
+- **Shell** — run arbitrary commands with configurable timeouts
+- **File** — read, write, and list files with auto-created directories
+- **Browser** — headless Chrome automation with accessibility-tree refs. Navigate, click, type, screenshot, manage tabs
+- **[OpenCode](https://opencode.ai)** — spawn a full coding agent as a persistent worker with codebase exploration, LSP awareness, and deep context management
+- **[Brave](https://brave.com/search/api/) web search** — search the web with freshness filters, localization, and configurable result count
 
-When it needs to think, it branches. When it needs work done, it spawns a worker.
+### Messaging
 
-### Branches
+Native adapters for Discord, Slack, Telegram, Twitch, Signal, Mattermost, Email, and Webchat, plus a generic Webhook receiver:
 
-A fork of the channel's context that goes off to think. Has the channel's full conversation history — same context, same memories, same understanding. Operates independently. The channel never sees the working, only the conclusion.
+- **Message coalescing** — rapid-fire messages are batched into a single LLM turn with timing context
+- **File attachments** — send and receive files, images, and documents. Attachments are saved to the workspace and recalled by ID
+- **Rich messages** — embeds/cards, interactive buttons, select menus, and polls (Discord). Block Kit and slash commands (Slack)
+- **Email** — IMAP polling + SMTP delivery with TLS, UID-based dedup, allowed sender filtering, and attachment limits. Works with local bridges like Proton Bridge
+- **Webchat** — embeddable portal chat with SSE streaming, per-agent session isolation
+- **Per-channel permissions** — guild, channel, and DM-level access control, hot-reloadable
 
-```
-User A: "what do you know about X?"
-    → Channel branches (branch-1)
+### Model Routing
 
-User B: "hey, how's it going?"
-    → Channel responds directly: "Going well! Working on something for A."
+Four-level routing picks the right model for every call. Channels get the best conversational model. Workers get something fast and cheap. Coding workers upgrade automatically. Simple user messages are downgraded to cheaper models by a sub-millisecond prompt scorer with no external calls. Voice messages route to a dedicated voice model.
 
-Branch-1 resolves: "Here's what I found about X: [curated memories]"
-    → Channel sees the branch result on its next turn
-    → Channel responds to User A with the findings
-```
+Any OpenAI-compatible or Anthropic-compatible endpoint works, including Ollama for local models, Z.ai GLM models, Azure OpenAI, and custom providers. Built-in support for Kilo Gateway, NVIDIA, MiniMax, Moonshot AI, Gemini, GitHub Copilot, OpenCode Go, and more.
 
-Multiple branches run concurrently. First done, first incorporated. Each branch forks from the channel's context at creation time, like a git branch.
+### MCP Integration
 
-### Workers
+Connect workers to external [MCP](https://modelcontextprotocol.io/) servers for arbitrary tool access — databases, APIs, SaaS products, custom integrations. Both stdio and streamable HTTP transports. Automatic tool discovery, hot-reloadable, exponential-backoff retry so a broken server never blocks startup.
 
-Independent processes that do jobs. Get a specific task, a focused system prompt, and task-appropriate tools. No channel context, no soul, no personality.
+### Security
 
-**Fire-and-forget** — do a job and return a result. Summarization, file operations, one-shot tasks.
+Spacebot runs autonomous LLM processes that execute arbitrary shell commands. Security is layered so no single failure exposes credentials or breaks containment.
 
-**Interactive** — long-running, accept follow-up input from the channel. Coding sessions, multi-step tasks.
+**Credential isolation:** secrets split into system credentials (LLM API keys, messaging tokens, never exposed to subprocesses) and tool credentials (CLI tokens injected as env vars into workers). Every subprocess starts with a sanitized environment. System secrets never enter any subprocess.
 
-```
-User: "refactor the auth module"
-    → Branch spawns interactive coding worker
-    → Branch returns: "Started a coding session for the auth refactor"
+- **Secret store** — credentials live in a dedicated encrypted database, referenced by alias. Plain config files never contain secrets
+- **Encryption at rest** — optional AES-256-GCM with a master key derived via Argon2id, stored in the OS credential store (macOS Keychain, Linux kernel keyring), never on disk or in an env var
+- **Output scrubbing** — all tool secret values are redacted from worker output before it reaches channels or LLM context. A rolling buffer handles secrets split across stream chunks
 
-User: "actually, update the tests too"
-    → Channel routes message to active worker
-    → Worker receives follow-up, continues with its existing context
-```
+**Process containment:** shell and exec tools run inside OS-level filesystem containment. On Linux, [bubblewrap](https://github.com/containers/bubblewrap) creates a mount namespace where the filesystem is read-only except the agent's workspace. On macOS, `sandbox-exec` enforces equivalent restrictions via SBPL profiles. Enforced at the kernel level.
 
-Workers are pluggable. Any process that accepts a task and reports status can be a worker.
+- **Dynamic sandbox** — toggle sandbox mode via dashboard or API without restarting
+- **Workspace isolation** — file tools reject paths outside the agent's workspace. Symlinks that escape are blocked.
+- **Leak detection** — secret-pattern checks at channel egress across plaintext, URL-encoded, base64, and hex encodings
+- **SSRF protection** — browser tool blocks requests to cloud metadata endpoints, private IPs, loopback, and link-local addresses
 
-**Built-in workers** come with shell, file, exec, and browser tools out of the box. They can write code, run commands, manage files, browse the web — enough to build a whole project from scratch.
+---
 
-**[OpenCode](https://opencode.ai) workers** are a built-in integration that spawns a full OpenCode coding agent as a persistent subprocess. OpenCode brings its own codebase exploration, LSP awareness, and context management — purpose-built for deep coding sessions. When a user asks for a complex refactor or a new feature, the channel can spawn an OpenCode worker that maintains a rich understanding of the codebase across the entire session. Both built-in and OpenCode workers support interactive follow-ups.
+## Gets Better with Use
 
-### The Compactor
+Spacebot builds on itself over time through four specific mechanisms.
 
-Not an LLM process. A programmatic monitor per channel that watches context size and triggers compaction before the channel fills up.
+**Branches write skills from experience.** When a channel identifies a workflow that required multiple steps, problem-solving, or domain knowledge, it delegates to a branch to capture it as a structured skill. The skill goes to disk and loads into the next session. Future workers get it injected into their system prompt.
 
-| Threshold | Action                                       |
-| --------- | -------------------------------------------- |
-| **>80%**  | Background compaction (summarize oldest 30%) |
-| **>85%**  | Aggressive compaction (summarize oldest 50%) |
-| **>95%**  | Emergency truncation (hard drop, no LLM)     |
+**Post-conversation reflection saves what's worth keeping.** After a conversation goes idle, a background branch reviews the history and silently saves skills and memories worth keeping. It runs with a capped turn budget, produces no user-visible output, and fires only when there's enough conversation to learn from.
 
-Compaction workers run alongside the channel without blocking it. Summaries stack chronologically at the top of the context window.
+**Memory deepens with every interaction.** Each conversation adds facts, preferences, decisions, and observations to a typed graph with importance scoring and graph edges. The cortex synthesizes this into a briefing every future conversation benefits from.
 
-### The Cortex
+**Goals drive autonomous work between conversations.** The autonomy channel wakes on its interval, picks up ready tasks, and works through them. Working memory records what happened, so the next conversation picks up where things left off.
 
-The agent's inner monologue. The only process that sees across all channels, workers, and branches simultaneously. Generates a **memory bulletin** — a periodically refreshed, LLM-curated briefing of the agent's knowledge injected into every conversation. Supervises running processes (kills hanging workers, cleans up stale branches). Maintains the memory graph (decay, pruning, merging near-duplicates, cross-channel consolidation). Detects patterns across conversations and creates observations. Also provides a direct interactive admin chat with full tool access for system inspection and manual intervention.
+Everything goes through typed tools into structured storage. Nothing drifts.
 
 ---
 
-## Architecture
-
-```
-User sends message
-    → Channel receives it
-        → Branches to think (has channel's context)
-            → Branch recalls memories, decides what to do
-            → Branch might spawn a worker for heavy tasks
-            → Branch returns conclusion
-        → Branch deleted
-    → Channel responds to user
-
-Channel context hits 80%
-    → Compactor notices
-        → Spins off a compaction worker
-            → Worker summarizes old context + extracts memories
-            → Compacted summary swaps in
-    → Channel never interrupted
-```
-
-### What Each Process Gets
-
-| Process   | Type               | Tools                                     | Context                             |
-| --------- | ------------------ | ----------------------------------------- | ----------------------------------- |
-| Channel   | LLM                | Reply, branch, spawn workers, route       | Conversation + compaction summaries |
-| Branch    | LLM                | Memory recall, memory save, spawn workers | Fork of channel's context           |
-| Worker    | Pluggable          | Shell, file, exec, browser (configurable) | Fresh prompt + task description     |
-| Compactor | Programmatic       | Monitor context, trigger workers          | N/A                                 |
-| Cortex    | LLM + Programmatic | Memory, consolidation, system monitor     | Entire agent scope                  |
+## Spacebot + Spacedrive
 
-### Memory System
+Spacebot pairs with [Spacedrive](https://github.com/spacedriveapp/spacedrive), an open-source cross-platform file manager built on a virtual distributed filesystem. Neither requires the other. When paired, Spacebot is the only agent harness with direct integration into a cross-device filesystem.
 
-Memories are structured objects, not files. Every memory is a row in SQLite with typed metadata and graph connections, paired with a vector embedding in LanceDB.
+### What Pairing Enables Today
 
-- **Eight types** — Fact, Preference, Decision, Identity, Event, Observation, Goal, Todo
-- **Graph edges** — RelatedTo, Updates, Contradicts, CausedBy, PartOf
-- **Hybrid search** — Vector similarity + full-text search, merged via Reciprocal Rank Fusion
-- **Three creation paths** — Branch-initiated, compactor-initiated, cortex-initiated
-- **Importance scoring** — Access frequency, recency, graph centrality. Identity memories exempt from decay.
-
-### Cron Jobs
+**Multi-device access:** one Spacebot instance, all your devices. Talk to your agent from your phone while a worker executes on your server. Spacedrive's P2P layer (Iroh/QUIC) routes from every device through the paired node to Spacebot. No separate SDK, no separate auth.
 
-Scheduled recurring tasks. Each cron job gets a fresh short-lived channel with full branching and worker capabilities.
+**Remote execution:** workers can target any device in your library. A task that needs your home server's GPU, your work laptop's local repos, or your phone's camera routes through Spacedrive's permission system to the target device. From the agent's perspective, the tool call is identical.
 
-- Multiple cron jobs run independently on wall-clock schedules (or legacy intervals)
-- Stored in the database, created via config, conversation, or programmatically
-- Cron expressions execute against the resolved cron timezone for predictable local-time firing
-- Persisted `next_run_at` cursor for deterministic restart behavior and missed-run fast-forwarding
-- Claim-before-run scheduling so multi-process or restarted schedulers do not double-fire recurring jobs
-- Run-once jobs use at-most-once claiming semantics and disable before execution starts
-- Per-job `timeout_secs` to cap execution time
-- Circuit breaker auto-disables after 3 consecutive failures
-- Active hours support with midnight wrapping
-- Execution and delivery outcomes are logged separately, with bounded retry/backoff for proactive sends
+**File system intelligence:** every directory can carry context nodes describing what it contains and what policies apply. When the agent navigates your filesystem it gets that context, not a blind listing.
 
-### Multi-Agent
+**Safe data access:** Spacedrive indexes external sources (Gmail, Slack, Obsidian, GitHub, Apple Notes, contacts, calendar, browser history) as searchable data the agent can query. Every record passes through a local prompt injection classifier (Prompt Guard 2) before reaching the agent. The agent can search your emails without a malicious email hijacking it.
 
-Each agent is an independent entity with its own workspace, databases, identity files, cortex, and messaging bindings. All agents share one binary, one tokio runtime, and one set of API keys.
+### Where This Is Going
 
----
+A company deploys Spacebot + Spacedrive on their infrastructure. Employees install Spacedrive on their devices and join the company library. The company agent has access to employee devices through Spacedrive's permission system, with individual-level controls. The org graph in Spacebot defines hierarchy and delegation: which agents report to which, who can approve what, how tasks flow.
 
-### Spacedrive Integration (Future)
+An employee talks to the company agent from their MacBook. The agent knows their projects, their device, their role, and can spawn workers on any authorized machine. They switch to their personal Spacedrive library and connect to their home Spacebot, with personal data and personal context. The app is the same. The agent is different.
 
-Spacebot is the AI counterpart to [Spacedrive](https://github.com/spacedriveapp/spacedrive) — an open source cross-platform file manager built on a virtual distributed filesystem. Both projects are independent and fully functional on their own, but complementary by design. Spacedrive indexes files across all your devices, clouds, and platforms with content-addressed identity, semantic search, and local AI analysis. Spacebot brings autonomous reasoning, memory, and task execution. Together, an agent that can think, remember, and act — backed by terabytes of queryable data across every device you own.
-
-Read the full vision in the [roadmap](docs/content/docs/(deployment)/roadmap.mdx).
+No other agent harness is building this. It's a category.
 
 ---
 
@@ -442,7 +252,7 @@ Read the full vision in the [roadmap](docs/content/docs/(deployment)/roadmap.mdx
 ### Prerequisites
 
 - **Rust** 1.85+ ([rustup](https://rustup.rs/))
-- An LLM API key from any supported provider (Anthropic, OpenAI, OpenRouter, Kilo Gateway, Z.ai, Groq, Together, Fireworks, DeepSeek, xAI, Mistral, NVIDIA, MiniMax, Moonshot AI, OpenCode Zen, OpenCode Go) — or use `spacebot auth login` for Anthropic OAuth
+- An LLM API key from any supported provider (Anthropic, OpenAI, OpenRouter, Kilo Gateway, Z.ai, Groq, Together, Fireworks, DeepSeek, xAI, Mistral, NVIDIA, MiniMax, Moonshot AI, Gemini, GitHub Copilot, OpenCode Zen, OpenCode Go), or use `spacebot auth login` for Anthropic OAuth
 
 ### Build and Run
 
@@ -457,35 +267,7 @@ cd spacebot
 cargo build --release
 ```
 
-### Minimal Config
-
-Create `config.toml`:
-
-```toml
-[llm]
-openrouter_key = "env:OPENROUTER_API_KEY"
-
-[defaults.routing]
-channel = "anthropic/claude-sonnet-4"
-worker = "anthropic/claude-sonnet-4"
-
-[[agents]]
-id = "my-agent"
-
-[messaging.discord]
-token = "env:DISCORD_BOT_TOKEN"
-
-[[bindings]]
-agent_id = "my-agent"
-channel = "discord"
-guild_id = "your-discord-guild-id"
-
-# Optional: route a named adapter instance
-[[bindings]]
-agent_id = "my-agent"
-channel = "discord"
-adapter = "ops"
-```
+### Run
 
 ```bash
 spacebot                      # start as background daemon
@@ -500,7 +282,7 @@ The binary creates all databases and directories automatically on first run. See
 
 ### Authentication
 
-Spacebot supports Anthropic OAuth as an alternative to static API keys. Use your Claude Pro, Max, or API Console subscription directly:
+Spacebot supports Anthropic OAuth as an alternative to static API keys:
 
 ```bash
 spacebot auth login             # OAuth via Claude Pro/Max (opens browser)
@@ -510,7 +292,17 @@ spacebot auth refresh           # manually refresh the access token
 spacebot auth logout            # remove stored credentials
 ```
 
-OAuth tokens are stored in `anthropic_oauth.json` and auto-refresh transparently before each API call. When OAuth credentials are present, they take priority over a static `ANTHROPIC_API_KEY`.
+OAuth tokens are stored in `anthropic_oauth.json` and auto-refresh before each API call. When OAuth credentials are present, they take priority over a static `ANTHROPIC_API_KEY`.
+
+---
+
+## Deploy Your Way
+
+| Method                                 | What You Get                                                                                |
+| -------------------------------------- | ------------------------------------------------------------------------------------------- |
+| **[spacebot.sh](https://spacebot.sh)** | One-click hosted deploy. Connect your platforms, configure your agent, done.                |
+| **Self-hosted**                        | Single Rust binary. No Docker, no server dependencies, no microservices. Clone, build, run. |
+| **Docker**                             | Container image with everything included. Mount a volume for persistent data.               |
 
 ---
 
@@ -518,22 +310,22 @@ OAuth tokens are stored in `anthropic_oauth.json` and auto-refresh transparently
 
 | Layer           | Technology                                                                                                      |
 | --------------- | --------------------------------------------------------------------------------------------------------------- |
-| Language        | **Rust** (edition 2024)                                                                                         |
+| Language        | **Rust** (edition 2024) — single binary, no runtime dependencies, no GC pauses                                 |
 | Async runtime   | **Tokio**                                                                                                       |
 | LLM framework   | **[Rig](https://github.com/0xPlaygrounds/rig)** v0.31 — agentic loop, tool execution, hooks                     |
-| Relational data | **SQLite** (sqlx) — conversations, memory graph, cron jobs                                                      |
+| Relational data | **SQLite** (sqlx) — conversations, memory graph, tasks, goals, cron jobs                                        |
 | Vector + FTS    | **[LanceDB](https://lancedb.github.io/lancedb/)** — embeddings (HNSW), full-text (Tantivy), hybrid search (RRF) |
 | Key-value       | **[redb](https://github.com/cberner/redb)** — settings, encrypted secrets                                       |
 | Embeddings      | **FastEmbed** — local embedding generation                                                                      |
 | Crypto          | **AES-256-GCM** — secret encryption at rest                                                                     |
-| Discord         | **Serenity** — gateway, cache, events, rich messages, interactions                              |
-| Slack           | **slack-morphism** — Socket Mode, events, Block Kit, slash commands, streaming via message edits |
-| Telegram        | **teloxide** — long-poll, media attachments, group/DM support                                   |
-| Twitch          | **twitch-irc** — chat integration with trigger prefix                                           |
-| Browser         | **Chromiumoxide** — headless Chrome via CDP                                                     |
+| Discord         | **Serenity** — gateway, cache, events, rich messages, interactions                                              |
+| Slack           | **slack-morphism** — Socket Mode, events, Block Kit, slash commands                                             |
+| Telegram        | **teloxide** — long-poll, media attachments, group/DM support                                                   |
+| Twitch          | **twitch-irc** — chat integration with trigger prefix                                                           |
+| Browser         | **Chromiumoxide** — headless Chrome via CDP                                                                     |
 | CLI             | **Clap** — command line interface                                                                               |
 
-No server dependencies. Single binary. All data lives in embedded databases in a local directory.
+Single binary, no server dependencies. All data lives in embedded databases in a local directory.
 
 ---
 
@@ -541,33 +333,18 @@ No server dependencies. Single binary. All data lives in embedded databases in a
 
 | Doc                                    | Description                                              |
 | -------------------------------------- | -------------------------------------------------------- |
-| [Quick Start](docs/content/docs/(getting-started)/quickstart.mdx) | Setup, config, first run                                 |
-| [Config Reference](docs/content/docs/(configuration)/config.mdx) | Full `config.toml` reference                             |
-| [Agents](docs/content/docs/(core)/agents.mdx)                    | Multi-agent setup and isolation                          |
-| [Memory](docs/content/docs/(core)/memory.mdx)                    | Memory system design                                     |
-| [Tools](docs/content/docs/(features)/tools.mdx)                  | All available LLM tools                                  |
-| [Compaction](docs/content/docs/(core)/compaction.mdx)            | Context window management                                |
-| [Cortex](docs/content/docs/(core)/cortex.mdx)                    | Memory bulletin and system observation                   |
-| [Cron Jobs](docs/content/docs/(features)/cron.mdx)               | Scheduled recurring tasks                                |
-| [Routing](docs/content/docs/(core)/routing.mdx)                  | Model routing and fallback chains                        |
-| [Secrets](docs/content/docs/(configuration)/secrets.mdx)         | Credential storage, encryption, and output scrubbing     |
-| [Sandbox](docs/content/docs/(configuration)/sandbox.mdx)         | Process containment and environment sanitization         |
-| [Messaging](docs/content/docs/(messaging)/messaging.mdx)         | Adapter architecture (Discord, Slack, Telegram, Twitch, Webchat, webhook) |
-| [Discord Setup](docs/content/docs/(messaging)/discord-setup.mdx) | Discord bot setup guide                                  |
-| [Browser](docs/content/docs/(features)/browser.mdx)              | Headless Chrome for workers                              |
-| [MCP](docs/content/docs/(features)/mcp.mdx)                      | External tool servers via Model Context Protocol         |
-| [OpenCode](docs/content/docs/(features)/opencode.mdx)            | OpenCode as a worker backend                             |
-| [Philosophy](docs/content/docs/(core)/philosophy.mdx)            | Why Rust                                                 |
-
----
-
-## Why Rust
-
-Spacebot isn't a chatbot — it's an orchestration layer for autonomous AI processes running concurrently, sharing memory, and delegating to each other. That's infrastructure, and infrastructure should be machine code.
-
-Rust's strict type system and compiler mean there's one correct way to express something. When multiple AI processes share mutable state and spawn tasks without human oversight, "the compiler won't let you do that" is a feature. The result is a single binary with no runtime dependencies, no garbage collector pauses, and predictable resource usage.
-
-Read the full argument in [docs/philosophy](docs/content/docs/(core)/philosophy.mdx).
+| [Quick Start](docs/content/docs/(getting-started)/quickstart.mdx) | Setup, config, first run                    |
+| [Config Reference](docs/content/docs/(configuration)/config.mdx) | Full `config.toml` reference                |
+| [Architecture](ARCHITECTURE.md)        | Process types, tool access, memory internals, multi-agent |
+| [Memory](docs/content/docs/(core)/memory.mdx)                    | Memory system design                        |
+| [Tools](docs/content/docs/(features)/tools.mdx)                  | All available LLM tools                     |
+| [Routing](docs/content/docs/(core)/routing.mdx)                  | Model routing and fallback chains           |
+| [Secrets](docs/content/docs/(configuration)/secrets.mdx)         | Credential storage, encryption, output scrubbing |
+| [Sandbox](docs/content/docs/(configuration)/sandbox.mdx)         | Process containment and environment sanitization |
+| [Cron Jobs](docs/content/docs/(features)/cron.mdx)               | Scheduled recurring tasks                   |
+| [MCP](docs/content/docs/(features)/mcp.mdx)                      | External tool servers via Model Context Protocol |
+| [OpenCode](docs/content/docs/(features)/opencode.mdx)            | OpenCode as a worker backend                |
+| [Messaging](docs/content/docs/(messaging)/messaging.mdx)         | Adapter architecture and platform setup     |
 
 ---
 
@@ -583,10 +360,14 @@ Contributions welcome. Read [RUST_STYLE_GUIDE.md](RUST_STYLE_GUIDE.md) before wr
 6. Run `just preflight` and `just gate-pr`
 7. Submit a PR
 
+### SpaceUI (Frontend Components)
+
+The dashboard uses [`@spacedrive/*`](https://github.com/spacedriveapp/spaceui) packages from npm. For local development with linked packages, see [CONTRIBUTING.md](CONTRIBUTING.md).
+
 Formatting is still enforced in CI, but the hook catches it earlier by running `cargo fmt --all` before each commit. `just gate-pr` mirrors the CI gate and includes migration safety, compile checks, and test verification.
 
 ---
 
 ## License
 
-FSL-1.1-ALv2 — [Functional Source License](https://fsl.software/), converting to Apache 2.0 after two years. See [LICENSE](LICENSE) for details.
+FSL-1.1-ALv2, [Functional Source License](https://fsl.software/), converting to Apache 2.0 after two years. See [LICENSE](LICENSE) for details.
diff --git a/SPACEUI_MIGRATION.md b/SPACEUI_MIGRATION.md
new file mode 100644
index 000000000..1a1839bc1
--- /dev/null
+++ b/SPACEUI_MIGRATION.md
@@ -0,0 +1,342 @@
+# SpaceUI Migration
+
+**345 files changed | +39,873 / -17,225**
+
+Migrates the entire frontend to [SpaceUI](https://github.com/spacedriveapp/spaceui), Spacedrive's component library. The local UI primitives (~25 components, ~3000 lines) are gone — replaced by `@spacedrive/primitives`, `@spacedrive/ai`, `@spacedrive/forms`, and `@spacedrive/explorer`. Tailwind v3 is out, Tailwind v4 via `@tailwindcss/vite` is in, with SpaceUI's design token system and theme imports.
+
+But this isn't just a component swap. The interface has been restructured from the ground up.
+
+## Layout
+
+The old flat nav is replaced with a persistent sidebar (220px, Spacedrive-style) with labeled sections, accordion agent sub-nav, and a global workers popover in the footer. The org chart has its own dedicated tab instead of being crammed into the main view.
+
+A new **Dashboard** serves as the landing page with real data wired to action items (notifications), token usage, and recent activity cards.
+
+## UI rewrites
+
+Every major view was decomposed from monolithic files into modular components:
+
+- **Settings** — 2900-line monolith → 12 section components
+- **AgentConfig** — 1452-line monolith → ConfigSidebar, section editors, shared types
+- **TopologyGraph** — 2074-line monolith → OrgGraph, ProfileNode, GroupNode, edge/config panels, graph builder
+- **Workbench** — rewritten with modular WorkbenchSidebar, WorkerColumn, and OpenCode theme inheriting CSS custom properties
+
+**Tasks** got the biggest conceptual change — the kanban board is gone, replaced with a Linear-style task list with detail views, GitHub metadata badges, and SSE-driven updates.
+
+## New systems
+
+**Wiki** — full implementation from scratch. SQLite-backed (`wiki_pages` + `wiki_page_versions`), tolerant multi-pass edit matching, 6 tools (create/edit/read/list/search/history), REST API, frontend route with page browser and wiki-link navigation.
+
+**Notifications** — SQLite store, API endpoints, SSE real-time broadcasting, `useNotifications` hook with optimistic dismiss, wired into the dashboard's action items card. Task approval and worker failure notifications emitted automatically.
+
+**Portal** — webchat renamed to portal throughout. Modular PortalPanel/Timeline/Composer/Header replacing the monolithic WebChatPanel. File attachments with multipart upload, drag-and-drop, and timeline rendering. Conversation persistence with full CRUD.
+
+**Streaming** — `prompt_once_streaming` on SpacebotHook with token-by-token `WorkerText` deltas. OpenAI Responses API SSE streaming (~636 lines) supporting function call deltas, text deltas, reasoning summaries.
+
+**Built-in skills** — compiled into the binary via `include_str!`, starting with a wiki-writing skill.
+
+## Backend
+
+**Projects** elevated from per-agent to instance level — migration with full dedup logic, dropped `agent_id` from the projects table, updated all store/API/tool paths. Auto logo detection scanning `.github/`, `public/`, `src-tauri/`.
+
+**Conversation settings** — `ConversationSettings` struct with memory mode, delegation, worker context, model selection. Per-channel persistence via `ChannelSettingsStore` with resolution chain (per-channel DB > binding defaults > agent defaults). `ModelOverrides` threaded through Channel, Branch, Worker, Compactor. Settings hot-reload via `ProcessEvent::SettingsUpdated`.
+
+**Channel settings unification** — `ResponseMode` enum (Active/Observe/MentionOnly) replacing the old `listen_only_mode` system. Per-channel persistence, `[bindings.settings]` TOML support, slash commands that persist to DB. MentionOnly fixed to retain context and capture memories even when not responding.
+
+**Direct mode** — channels can now get full worker-level tools (shell, file, browser, wiki, web search, memory) with tool calls rendered in the portal timeline.
+
+**Tool-use enforcement** — configurable per-model prompt injection ("you MUST use tools") across all process types.
+
+**Token usage tracking** — `token_usage` table with `UsageAccumulator` flushed per-process, wired to the dashboard chart.
+
+## Design docs
+
+Added: conversation-settings, wiki, token-usage-tracking, cron-outcome-delivery, skill-authoring, worker-briefing, attachment-portal-and-defaults, slash-commands, autonomy, goals. Some implemented, others queued.
+
+---
+
+## Commit Log (newest first)
+
+> 14 merge commits omitted — no code changes.
+
+### 1. `248d740` — "tweaks" `+153 / -92`
+Reformatted Sidebar imports to multi-line, renamed task approval notifications from "Approval"/"Approve" to "Review" with Clock icon, unified cron job button variants to "gray", fixed workbench EmptyState centering.
+
+### 2. `de9e680` — "tweaks" `+6 / -480`
+Deleted the 474-line `autonomy-loop.md` design doc. Minor Tauri-to-desktop platform abstraction renames (`IS_TAURI` → `IS_DESKTOP`).
+
+### 3. `945ea8e` — "probably bad, likely revert" `+62 / -16`
+Rewrote `apply_history_after_turn` to extract `chat_history` from `PromptCancelled` and `MaxTurnsError` variants instead of the external history param (which Rig doesn't update on error). Flushes accumulated tool calls into `chat_history` before returning `PromptCancelled` in SpacebotHook.
+
+### 4. `28e7951` — "ui" `+164 / -9`
+New `ApprovalModal` component — full dialog for task approval notifications with task detail view, approve/dismiss actions, and query invalidation. Replaced the inline action button in ActionItemsCard.
+
+### 5. `7bb1874` — "Add CONTRIBUTING.md, SpaceUI link workflow, and npm version refs" `+219 / -5`
+Added CONTRIBUTING.md, switched `@spacedrive/*` deps from `link:` to `^0.2.0` (npm published with local bun link override), added `just spaceui-link` / `just spaceui-unlink` commands.
+
+### 6. `b841d1c` — "progress" `+458 / -406`
+Abstracted Tauri into a generic desktop host layer (`IS_DESKTOP`, `hasBundledServer`, `spawnBundledProcess`). Added active-project highlighting in sidebar, pinned "main" agent first, added macOS traffic-light padding, added stubs for cortex_chat and new tool registration.
+
+### 7. `1da3fbf` — "a lot of stuff" `+1,343 / -500`
+Built-in skills system (compiled via `include_str!`, wiki-writing skill). Added `company_name` to global settings with InstanceSection page. Implemented "direct mode" for channels giving them full worker-level tools (shell, file, browser, wiki, web search, memory). Added tool_call_run timeline items to portal view. Company name switcher popover in sidebar. Ingest section in agent config. Browser tool structs made `pub(crate)`.
+
+### 8. `731efa2` — "workers" `+43 / -47`
+Cosmetic Rust formatting only — line-break adjustments in usage.rs, wiki.rs, model.rs, pricing.rs, set_outcome.rs. No functional changes.
+
+### 9. `2790fac` — "workers" `+1,033 / -800`
+Workers panel refactor: added cancel button with `channel_id` tracking, extracted `channel_dispatch.rs` from `channel.rs`, added retrigger prompt fragment, improved wiki store error handling, switched hardcoded hex colors to semantic tokens (`text-status-success`, etc.).
+
+### 10. `bc097ea` — "wiki pt.2" `+91 / -2`
+Wired wiki tools into branches, workers, and channel dispatch. Added `wiki_enabled` flag to branch/worker prompt templates, `wiki_write: bool` to `WorkerContextMode`, propagated wiki store through all process spawn paths.
+
+### 11. `855db49` — "wiki" `+2,590 / -13`
+Full wiki system: SQLite migration (`wiki_pages`, `wiki_page_versions`), `WikiStore` with tolerant multi-pass text matching for edits, 6 wiki tools (create/edit/read/list/search/history), REST API endpoints, frontend Wiki route with page browser/viewer/create form and wiki-link navigation, TypeScript types.
+
+### 12. `7b704b4` — "wiki" `+419 / -11`
+Wiki design document (398 lines — page types, storage schema, tolerant edit matching, tool definitions, versioning, link syntax, agent access patterns, implementation phases). Added sidebar nav for Wiki, wired RecentActivityCard to real task data, added `.db*` to gitignore.
+
+### 13. `5cd0398` — "cron outcome delivery rewrite, token usage tracking, dashboard UI, task notifications" `+1,968 / -309`
+Replaced CronReplyBuffer with `set_outcome()` tool for clean cron delivery. Token usage tracking with new migration/table and `UsageAccumulator`. Connected TokenUsageCard to real API data. Rewired dashboard cards to SpaceUI primitives. WorkersPanel modal → inline slide-over. Wired `ApiState` through `AgentDeps` for task notification emission. Added token-usage-tracking and slash-commands design docs.
+
+### 14. `055bdba` — "cron, openai streaming improvements, ui" `+918 / -417`
+Wall-clock cron expression support alongside legacy interval mode. OpenAI Responses API SSE streaming in the LLM layer. Created `set_outcome` tool and prompt. Token-usage-tracking design doc. README rewrite. Dashboard cards switched to dark variant.
+
+### 15. `24b7abd` — "ui" `+146 / -226`
+Redesigned ChannelCard from list-style to square aspect-ratio with fade-masked message stream. Replaced inline WorkerBadge/BranchBadge with compact pills. Added PlatformIcon, CircleButton, typing indicator, auto-scroll on send to PortalTimeline.
+
+### 16. `6118909` — "design docs, new readme and attachments" `+2,401 / -443`
+Complete README rewrite. 6 design docs (autonomy, goals, cron-outcome-delivery, skill-authoring, worker-briefing, attachment-portal-and-defaults). File attachment support for portal chat (multipart upload API, drag-and-drop composer, attachment rendering in timeline, metadata in conversation history).
+
+### 17. `5059a55` — "ui" `+451 / -19`
+Global WorkersPanel as a sidebar footer popover with search, history/interactive tabs, per-agent worker queries, live SSE integration, modal detail view. Added PortalHeader component.
+
+### 18. `9ce5d23` — "notifications" `+1,167 / -293`
+Full notification system: SQLite migration, `NotificationStore` with CRUD/filtering, API endpoints, SSE real-time broadcasting, `useNotifications` hook with optimistic dismiss, wired ActionItemsCard to real data, cortex observation notifications on worker failure, task approval notification emission.
+
+### 19. `aa0f389` — "ui" `+1,692 / -895`
+Dashboard route with four cards (ActionItemsCard, TokenUsageCard, RecentActivityCard, GetSpacedriveCard). Extracted AgentSkills into modular components (SkillsSidebar, SkillsDirectory, SkillInspector, BundledSkills, InstalledSkillRow, RegistrySkillRow).
+
+### 20. `4331139` — "ui" `+1,497 / -1,457`
+Decomposed monolithic 1452-line AgentConfig.tsx into modular components: ConfigSidebar, ConfigSectionEditor (routing, tuning, compaction, cortex, coalesce, memory, browser, sandbox, projects), GeneralEditor, IdentityEditor, SaveBar, shared types/constants/utils. Added Config sub-item to sidebar agent nav.
+
+### 21. `7157fe3` — "settings" `+3,055 / -2,915`
+Decomposed monolithic 2900-line Settings page into 12 section components (ApiKeysSection, AppearanceSection, ChangelogSection, ChannelsSection, ChatGptOAuthDialog, ConfigFileSection, OpenCodeSection, ProviderCard, SecretsSection, ServerSection, UpdatesSection, WorkerLogsSection). Replaced ReactFlow Controls in OrgGraph with custom zoom buttons.
+
+### 22. `5b66aea` — "better workbench" `+715 / -407`
+Rewrote Workbench into modular components (WorkbenchSidebar, WorkerColumn, EmptyState, utils). Replaced hardcoded hex colors in OpenCode embed theme with CSS custom property references (`var(--color-*)`) for theme inheritance.
+
+### 23. `e92674b` — "fixes" `+60 / -17`
+Renamed Orchestrate → Workbench (route + sidebar). Fixed OpenCode proxy path prefix stripping. Fixed worker list to resolve project names from global ProjectStore. Added `@layer opencode-portals` CSS to prevent style conflicts.
+
+### 24. `c6b3489` — "ui" `+2,108 / -2,080`
+Decomposed 2074-line TopologyGraph.tsx into modular Org Chart components: OrgGraph, OrgGraphInner, ProfileNode, GroupNode, LinkEdge, EdgeConfigPanel, GroupConfigPanel, AgentEditDialog, HumanEditDialog, buildGraph, constants, handles, storage utils.
+
+### 25. `b1a6be5` — "color fix" `+5,080 / -2,298`
+Foundational SpaceUI component integration across 32 files: converted all UI from inline Tailwind/raw HTML to `@spacedrive/primitives` (Button, Input, Dialog, Badge, Switch, Select, etc.). Replaced hardcoded color classes with semantic design tokens. Added new TopBar component.
+
+### 26. `8a12e3d` — "progress" `+2,094 / -1,051`
+Replaced monolithic WebChatPanel and TopBar with modular Portal system (PortalPanel, PortalTimeline, PortalComposer, PortalHeader, PortalHistoryPopover, PortalActiveWorkers). Added AgentProjects route. Migrated projects from per-agent SQLite DBs to shared instance DB with full dedup migration logic.
+
+### 27. `2432984` — "ui" `+1,201 / -1,730`
+Rewrote task management: deleted 868-line TaskBoard (kanban) and replaced with Linear-style TaskList/TaskDetail/TaskCreateForm. Added GitHub metadata badges (issues/PRs) via TaskUtils.tsx. Rebuilt GlobalTasks with full task CRUD and SSE-driven updates.
+
+### 28. `b8ceff1` — "Rename @spaceui/* packages to @spacedrive/* (npm org)" `+56 / -56`
+Pure package rename across all imports and config: `@spaceui/*` → `@spacedrive/*` in package.json, vite.config.ts, styles.css, bun.lock.
+
+### 29. `c53a1e3` — "SpaceUI migration: sidebar redesign, global projects, logo detection" `+983 / -641`
+Three changes: (1) Sidebar redesign to Spacedrive style — 220px, labeled nav items, section headers, accordion agent sub-nav. (2) Projects made global by dropping `agent_id` from projects table + all Rust store/API/tool updates. (3) Auto project logo detection scanning `.github/`, `public/`, `src-tauri/` with new `GET /projects/{id}/logo` endpoint.
+
+### 30. `fb5c0f3` — "remove Channel Behaviour config tab" `+3 / -18`
+Removed the Channel Behaviour tab from agent config — per-channel response modes in channel settings replaced it.
+
+### 31. `7e223f4` — "rename Quiet to Observe, remove Listen Only toggle" `+89 / -88`
+Renamed `Quiet` response mode to `Observe` across full stack (Rust enums with serde alias, TS types, UI labels, docs). Observe = agent learns from context and captures memories but never responds.
+
+### 32. `ce2e9d7` — "docs: add Configuring Channels guide" `+141 / -1`
+New getting-started doc covering per-channel settings: response modes, model overrides, memory modes, delegation, worker context, slash commands. Added Channel Settings section to core channels doc.
+
+### 33. `f07cecc` — "fix helper text to include commands as a trigger" `+2 / -2`
+Updated two helper text strings to mention commands (not just mentions/replies) trigger responses in MentionOnly mode.
+
+### 34. `d421b03` — "address review: compaction guard, doc fixes, checkbox accessibility" `+31 / -17`
+Compaction check after injecting suppressed MentionOnly messages. Drops history write lock before async calls. Wraps checkbox inputs in `<label>` for accessibility.
+
+### 35. `99467d2` — "fix: MentionOnly mode now retains channel context and memory capture" `+64 / -29`
+Fixed MentionOnly to inject suppressed messages into in-memory LLM context and run passive memory capture, so the agent stays aware even when not responding. Added UI descriptions for the behavioral difference between binding-level and channel-level mention filtering.
+
+### 36. `955efd3` — "release: v0.4.1" `+21 / -2`
+Version bump 0.4.0 → 0.4.1 with CHANGELOG entry.
+
+### 37. `a1677ba` — "Remove audit-routes.sh script" `+0 / -78`
+Deleted the one-off route audit script added in `eba3c4a`.
+
+### 38. `10d683d` — "Make prompt inspector modal 80% viewport width" `+1 / -1`
+Single CSS change: PromptInspectModal width → `80vw`.
+
+### 39. `eba3c4a` — "Fix remaining API route mismatches from OpenAPI migration" `+94 / -16`
+Fixed 9 frontend API route paths broken during OpenAPI migration. Added audit-routes.sh script used to discover them.
+
+### 40. `1b1e14f` — "Fix API route mismatches broken during OpenAPI migration" `+4 / -4`
+Fixed ChatGPT OAuth routes and raw config editor route paths.
+
+### 41. `0d89b3b` — "spaceui" `+722 / -3,593`
+The foundational SpaceUI commit. Deleted the entire local UI component library (~25 files, ~3000 lines) and replaced all imports with SpaceUI packages. Added Vite aliases for local monorepo HMR. Replaced PostCSS/Tailwind v3 with Tailwind v4 via `@tailwindcss/vite`. Created new styles.css with SpaceUI design tokens. Extracted API client into `packages/api-client`.
+
+### 42. `5399f85` — "fix: correct ingest file upload endpoint URL" `+1 / -1`
+One-line API client fix for the ingest upload path.
+
+### 43. `5c85557` — "fix: create stub for openapi-spec binary in Docker dependency cache step" `+2 / -1`
+Dockerfile fix: touch stub for `openapi-spec` binary during dependency cache layer.
+
+### 44. `6d95ecd` — "release: v0.4.0" `+68 / -2`
+Version bump to 0.4.0 with CHANGELOG entry.
+
+### 45. `b914b3a` — "fix: address review feedback on deferred injection queue" `+16 / -7`
+Per-channel cap of 64 messages on deferred injection queue, avoids unnecessary cloning on send errors, re-queues inbound message on delivery failure.
+
+### 46. `bf99bdf` — "fix: scope active channels by (agent_id, conversation_id)" `+130 / -15`
+Fixed cron output leaking across agents sharing a conversation. Re-keyed `active_channels` HashMap with compound `ActiveChannelKey(agent_id, conversation_id)`. Added deferred injection queue for cross-agent message buffering.
+
+### 47. `389d9fb` — "fix: resolve clippy warnings" `+14 / -27`
+Three clippy fixes in Azure provider code: `ok_or` → `ok_or_else`, collapsed nested ifs, removed unnecessary `format!`.
+
+### 48. `e8bded2` — "style: cargo fmt" `+107 / -83`
+Pure formatting on Azure provider code.
+
+### 49. `c0f80cc` — "fix: address review findings on Azure provider PR" `+80 / -43`
+HTTPS validation for Azure endpoints, fixed Azure form validation in Settings UI, normalized trailing slashes, JSON errors instead of raw status codes.
+
+### 50. `9d582fe` — "style: fix cargo fmt" `+6 / -6`
+Formatting fix on channel_dispatch.rs and config/types.rs.
+
+### 51. `73f1f6e` — "fix(ui): allow save with empty API key for Azure" `+1 / -5`
+Removed frontend validation blocking Azure save with empty API key.
+
+### 52. `3a89130` — "fix(ui): allow test model with empty API key for Azure" `+0 / -4`
+Removed frontend validation blocking Azure test with empty key (backend uses stored key).
+
+### 53. `47d9cb2` — "fix(azure): use stored API key for model testing when none provided" `+43 / -11`
+Backend reads stored Azure API key from config.toml when request has empty key, instead of rejecting.
+
+### 54. `9f2dadb` — "feat(ui): enable test/save buttons even when API key is blank" `+20 / -12`
+Removed `!keyInput.trim()` from disabled conditions on Test/Save buttons, added Azure-specific validation.
+
+### 55. `583ea3b` — "fix(azure): correct deployment validation logic" `+2 / -1`
+Fixed `update_azure_provider` to construct full `azure/{deployment}` string before validation.
+
+### 56. `4b5d012` — "fix(azure): prevent API key exposure and correct model routing" `+57 / -40`
+Removed `api_key` from `ProviderConfigResponse`, preserves stored key on empty update, `azure/{deployment}` routing format, `AbortController` for stale config fetches, trailing slash strip.
+
+### 57. `43eb063` — "feat(azure): add complete Azure OpenAI provider support" `+1,098 / -77`
+Initial Azure OpenAI implementation: backend handler with validation (endpoint, API version, deployment regex), frontend config UI (base URL, API version, deployment), model routing in LLM layer, docs.
+
+### 58. `d158491` — "fix(cron): pass gate follow-up cleanup" `+44 / -22`
+Added `failure_class` parameter to `emit_cron_error()` distinguishing execution vs delivery failures. Formatting fixes.
+
+### 59. `2c3e953` — "fix(cron): restore breaker and re-enable semantics" `+100 / -36`
+`CronRunError` enum with Execution/Delivery variants. `set_job_enabled_state()` helper. Delivery failures now properly feed the circuit breaker. Unit tests.
+
+### 60. `bae1465` — "style: cargo fmt fixes for cron integration tests" `+15 / -7`
+Pure formatting on cron integration tests.
+
+### 61. `538f161` — "fix(cron): delivery failures should not count as execution failures" `+23 / -12`
+Returns `Ok(())` after delivery failure so `consecutive_failures` isn't incremented when execution succeeded. Reordered enable/disable lock logic.
+
+### 62. `68f2923` — "fix(cron): address P2 findings and add integration tests" `+276 / -1`
+4 integration tests for `claim_and_advance` atomicity: concurrent claim races, duplicate rejection, run-once behavior, stale cursor detection.
+
+### 63. `261afc6` — "fix(cron): address review feedback — race conditions and validation" `+39 / -9`
+5-second backoff after claim error, restores previous job on cursor failure, rejects `interval_secs == 0` without `cron_expr`, fixed cold re-enable sequence.
+
+### 64. `f880be1` — "fix(cron): address code review findings" `+23 / -15`
+SAFETY doc comment on `ExecutionGuard::drop` atomic ordering. Centralized `emit_cron_error()` helper replacing inline error emission.
+
+### 65. `1782e70` — "fix(cron): close remaining base review gaps" `+63 / -8`
+Added `cron_id` to `CronExecutionEntry`, separated execution-only metrics from delivery, structured error fields with 5s backoff on stale cursor, explicit match arms replacing silent `let _` on channel errors.
+
+### 66. `48b4783` — "fix(cron): close review gaps in runtime branch" `+384 / -140`
+Docs clarifying at-most-once run-once semantics. `claim_and_advance`/`advance_cursor` on CronStore. `broadcast_proactive` on MessagingManager with bounded retry/backoff. Refactored sandbox detection exports. Cron delivery metrics.
+
+### 67. `1a8d08f` — "fix(cron): persist scheduler state and delivery outcomes" `+2,026 / -344`
+Persistent `next_run_at` cursor with migration. Claim-before-run scheduling preventing double-firing across restarts. Separate execution/delivery outcome tracking with new migration columns. `broadcast_proactive` with retry/backoff. `src/messaging/traits.rs` with delivery target parsing. Cron UI showing split execution/delivery status. Run-once with at-most-once claiming.
+
+### 68. `2f990bd` — "feat(sandbox): add initialization test for sandbox startup" `+12 / -0`
+Compile-time test verifying `Sandbox`, `SandboxConfig`, and `detect_backend` public API exports.
+
+### 69. `02a003c` — "feat(sandbox): add workspace accessor and integration test for ShellTool" `+34 / -0`
+Added `pub fn workspace(&self) -> &Path` to Sandbox. Compile-time tests for ShellTool/Sandbox public exports.
+
+### 70. `85783e0` — "feat(sandbox): implement backend detection for bubblewrap and sandbox-exec" `+140 / -27`
+`SandboxBackend` enum (Bubblewrap/SandboxExec/None) and `detect_backend()` probing `bwrap` on Linux and `sandbox-exec` on macOS. Renamed internal enum to `InternalBackend`. Integration tests.
+
+### 71. `24c8583` — "feat(sandbox): add SandboxConfig unit tests" `+23 / -0`
+Unit tests for `SandboxConfig::default()` and `SandboxMode` variants.
+
+### 72. `3fb01be` — "fix: address PR review feedback for tool-use enforcement" `+41 / -32`
+Skips enforcement for compactor (no tools). Moves enforcement after skills rendering. Adds enforcement to resumed idle workers and coalesced-turn prompt. Cortex clones base prompt for fallback. Ingestion returns error on missing `memory_persistence_complete`. Bare TOML boolean support in deserialization.
+
+### 73. `a73bde2` — "fix: use subtler hover/active colors in conversation sidebar" `+271 / -225`
+Tab-based indentation rewrite of ConversationsSidebar.tsx. Active highlight → `bg-app-hover text-ink`, hover → `bg-app-hover/50`. Inline button → `<Button variant="outline">`. User message bubble → `bg-app-hover/30`.
+
+### 74. `584e55e` — "fix: use accent color for user message bubbles in portal chat" `+2 / -2`
+User message bubble → `bg-accent/15`. Empty-state text shows `agentDisplayName` instead of raw ID.
+
+### 75. `3e910e4` — "fix: show agent display name instead of ID in portal chat header" `+8 / -1`
+Queries agents list to look up display_name, renders it in portal chat header.
+
+### 76. `7cb1839` — "fix: replace unnecessary to_string() with as_ref() in main.rs" `+2 / -2`
+Avoids unnecessary string allocation in portal conversation and channel settings store lookups.
+
+### 77. `75d0ca4` — "fix: resolve clippy errors" `+53 / -62`
+Five clippy fixes: `too_many_arguments` allow on Branch::new, collapsed identical if/else, let-chains for nested if-let, flattened nested match, `or_default()`.
+
+### 78. `f9263a0` — "fix: remove stale settings field from platform config structs" `+8 / -11`
+Removed leftover `settings: None` from test initializers, added missing fields to context_dump tests.
+
+### 79. `f36b527` — "fix(slack): upgrade slack-morphism from 2.17 to 2.19" `+52 / -15`
+Dependency bump pulling in updated signal-hook, rand, chacha20. Motivated by intermittent Slack HTTP client failures.
+
+### 80. `0f1406b` — "fix: add missing settings field to all Binding initializers in tests" `+32 / -0`
+Added `settings: None` to every `Binding` struct in test cases after the field was added.
+
+### 81. `f165c25` — "fix: address remaining PR review feedback" `+153 / -76`
+ChannelCard resets settings from DB on reopen, invalidates channels query on save. WebChatPanel hydrates from cached data on switch. `reload_settings` preserves existing on DB errors. `set_response_mode` uses `tokio::spawn` for non-blocking writes. Config loader warns on unknown enum values instead of silent default.
+
+### 82. `d70163c` — "fix: address PR review feedback" `+146 / -74`
+`/status` shows resolved model overrides. ChannelCard waits for settings data before rendering. `parse_response_mode` maps `listen_only_mode=false` → Active. Binding settings only override when explicitly set in TOML. Idle worker resume loads from ChannelSettingsStore. Batched turn skips memory when MemoryMode is Off. Channel settings API validates channel existence.
+
+### 83. `76ba6b3` — "fix: settings popover overflow when advanced section is open" `+2 / -2`
+Added `max-h-[80vh]`, `overflow-y-auto`, `collisionPadding={16}` to settings popover.
+
+### 84. `c6eb977` — "fix: channel settings popover not opening on click" `+1 / -0`
+Added manual `setShowSettings` toggle because `stopPropagation` was blocking Radix's PopoverTrigger click.
+
+### 85. `c3e7db5` — "feat: settings hot-reload, response mode badges, portal header info" `+151 / -11`
+`ProcessEvent::SettingsUpdated` variant with `reload_settings()` method. Channels API includes `response_mode` and `model` from live state. Frontend shows response mode badges on ChannelCard and portal header with current model name.
+
+### 86. `15c9fe9` — "refactor: remove legacy listen_only_mode infrastructure" `+20 / -216`
+Deleted entire `listen_only_mode`/`listen_only_session_override` system, `sync_listen_only_mode_from_runtime()`, `set_listen_only_mode()`, RuntimeConfig fields, SettingsStore methods. Replaced with `is_suppressed()` checking `resolved_settings.response_mode`.
+
+### 87. `9e5b802` — "feat: channel settings unification — ResponseMode, per-channel persistence" `+903 / -72`
+`ResponseMode` enum (Active/Quiet/MentionOnly), `save_attachments` on ConversationSettings. `channel_settings` SQLite table + migration + `ChannelSettingsStore`. GET/PUT `/channels/{channel_id}/settings` API. Settings resolution: per-channel DB > binding defaults > agent defaults. `[bindings.settings]` TOML support. `/quiet`, `/active`, `/mention-only` slash commands persist to DB. ChannelCard gear icon + settings popover.
+
+### 88. `e804610` — "ui tweaks" `+284 / -89`
+Visual overhaul of ConversationSettingsPanel: readable multi-line preset definitions, contextual description text per setting, new `SettingField` component, widened popover to `w-96`, reformatted advanced section.
+
+### 89. `5a77c00` — "feat: finish conversation settings — load from DB, model overrides, worker memory tools" `+561 / -242`
+Loads ConversationSettings from PortalConversationStore at channel creation. `ModelOverrides` struct threaded through Channel, Branch, Worker, Compactor. Worker memory tools wired to `WorkerMemoryMode`. Memory persistence guard for Ambient/Off. Dynamic available models from models.dev catalog. Frontend Apply Settings button + per-process model override selects.
+
+### 90. `7957a4b` — "feat: add configurable tool-use enforcement" `+332 / -8`
+`tool_use_enforcement` config section with per-model pattern matching. Appends "you MUST use tools" prompt fragment to system prompts across all process types. Jinja2 template + `maybe_append_tool_use_enforcement` on prompt engine.
+
+### 91. `d454798` — "conversation settings impl" `+1,634 / -318`
+Foundational conversation settings: renamed webchat → portal throughout (API routes, stores, hooks). `ConversationSettings` struct (memory mode, delegation, worker context, model selection). `ResolvedConversationSettings` with resolution logic. ConversationSettingsPanel + ConversationsSidebar with conversation CRUD. Portal conversation API endpoints with settings persistence. DB migration. `WorkerContextSettings` threaded through dispatch/spawning. `/portal/defaults` endpoint.
+
+### 92. `b9dd1df` — "design doc" `+1,276 / -1`
+Conversation settings design document (1056 lines). Also includes desktop Tauri lockfile/schema changes (global-hotkey, gethostname crates).
+
+### 93. `9f9e7e0` — "streaming support" `+1,087 / -4`
+`prompt_once_streaming` on SpacebotHook using `StreamingCompletion` for token-by-token responses with `ProcessEvent::WorkerText` deltas. ~636 lines of OpenAI Responses API streaming logic in model.rs (function call deltas, text deltas, reasoning summary deltas, response completion). Channel now calls `prompt_once_streaming`.
+
+### 94. `05bbc07` — "feat: persist webchat conversations and add API client package" `+1,503 / -163`
+SQLite-backed webchat conversation persistence (`webchat_conversations` table + migration + `WebChatConversationStore` with full CRUD). New `@spacebot/api-client` npm package with typed client, SSE helpers, and re-exported schema types. Expanded OpenAPI schema types.
diff --git a/desktop/package.json b/desktop/package.json
index 957886790..b5ede8da1 100644
--- a/desktop/package.json
+++ b/desktop/package.json
@@ -3,8 +3,8 @@
   "private": true,
   "version": "0.1.0",
   "scripts": {
-    "tauri:dev": "tauri dev",
-    "tauri:build": "tauri build"
+    "tauri:dev": "../scripts/bundle-sidecar.sh && tauri dev",
+    "tauri:build": "../scripts/bundle-sidecar.sh --release && tauri build"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^2"
diff --git a/desktop/src-tauri/tauri.conf.json b/desktop/src-tauri/tauri.conf.json
index dc515b12f..47db546db 100644
--- a/desktop/src-tauri/tauri.conf.json
+++ b/desktop/src-tauri/tauri.conf.json
@@ -4,8 +4,8 @@
   "version": "0.1.0",
   "identifier": "sh.spacebot.desktop",
   "build": {
-    "beforeDevCommand": "../scripts/bundle-sidecar.sh && cd ../interface && bun install --frozen-lockfile && bun run dev",
-    "beforeBuildCommand": "../scripts/bundle-sidecar.sh --release && cd ../interface && bun install --frozen-lockfile && bun run build",
+    "beforeDevCommand": "cd ../interface && bun install --frozen-lockfile && bun run dev",
+    "beforeBuildCommand": "cd ../interface && bun install --frozen-lockfile && bun run build",
     "devUrl": "http://localhost:19840",
     "frontendDist": "../../interface/dist"
   },
diff --git a/docs/content/docs/(core)/architecture.mdx b/docs/content/docs/(core)/architecture.mdx
index ac5171418..f142ecaf9 100644
--- a/docs/content/docs/(core)/architecture.mdx
+++ b/docs/content/docs/(core)/architecture.mdx
@@ -105,6 +105,8 @@ This split keeps high-volume memory writes off the control bus so channel contro
 | `CompactionTriggered` | Compactor | Channel | Context compacted |
 | `StatusUpdate` | Various | UI (SSE) | Typing indicators, lifecycle |
 | `TaskUpdated` | Branch, Worker | UI | Task board change |
+| `WorkerText` | Hook | Channel, UI | Streaming token-by-token text deltas |
+| `SettingsUpdated` | API | Channel | Hot-reload channel settings |
 | `AgentMessageSent` | Channel | Link routing | Inter-agent message |
 | `AgentMessageReceived` | Link routing | Channel | Inbound inter-agent message |
 
@@ -163,8 +165,23 @@ The primary database. Stores everything that benefits from relational queries:
 | `tasks` | Structured task board (backlog → in_progress → done) |
 | `ingestion_progress` | Chunk-level progress for file ingestion |
 | `agent_profile` | Cortex-generated personality data |
+| `portal_conversations` | Portal chat conversation persistence with settings |
+| `channel_settings` | Per-channel settings (response mode, model overrides, memory mode) |
+| `token_usage` | Per-process token counts, model, provider, estimated cost |
 
-Migrations are in `migrations/` and are **immutable once committed**. Schema changes always go in new migration files. See [Memory](/docs/memory) for the memory graph schema.
+A separate **global database** (`~/.spacebot/data/global.db`) holds instance-wide data shared across all agents:
+
+| Table | Purpose |
+|-------|---------|
+| `projects` | Registered project directories with metadata |
+| `project_repos` | Git repositories within projects |
+| `project_worktrees` | Git worktrees linked to repos |
+| `notifications` | Actionable events (task approvals, worker failures) |
+| `wiki_pages` | Knowledge base pages with versioning |
+| `wiki_page_versions` | Full edit history for wiki pages |
+| `wiki_pages_fts` | FTS5 virtual table for wiki search |
+
+Migrations are in `migrations/` (per-agent) and `migrations/global/` (instance-wide). Both are **immutable once committed**. Schema changes always go in new migration files. See [Memory](/docs/memory) for the memory graph schema.
 
 ### LanceDB
 
@@ -196,7 +213,7 @@ Slack ───┤
 Telegram ┼──→ MessagingManager ──→ InboundMessage stream ──→ main.rs event loop
 Twitch ──┤                                                        │
 Webhook ─┤                                                        ▼
-WebChat ─┘                                              Channel.handle_message()
+Portal ──┘                                              Channel.handle_message()
                                                                   │
                                                                   ▼
                                                           OutboundResponse
@@ -310,7 +327,7 @@ An embedded Axum HTTP server provides the control API for the dashboard and exte
 | Group | Prefix | Purpose |
 |-------|--------|---------|
 | Agents | `/api/agents` | CRUD for agent definitions |
-| Channels | `/api/channels` | Channel listing, history, deletion |
+| Channels | `/api/channels` | Channel listing, history, settings, deletion |
 | Workers | `/api/workers` | Worker status, history, timeline |
 | Cortex | `/api/cortex` | Bulletin, profile, cortex chat |
 | Memory | `/api/memories` | Memory CRUD, graph queries |
@@ -320,9 +337,14 @@ An embedded Axum HTTP server provides the control API for the dashboard and exte
 | Tasks | `/api/tasks` | Task board CRUD |
 | Cron | `/api/cron` | Scheduled task management |
 | System | `/api/system` | Health, version, metrics |
-| WebChat | `/api/webchat` | Embedded chat interface |
+| Portal | `/api/portal` | Chat interface, conversations, attachments |
 | Models | `/api/models` | Available model listing |
 | Topology | `/api/topology` | Full communication graph |
+| Wiki | `/api/wiki` | Knowledge base pages and search |
+| Notifications | `/api/notifications` | Actionable events and inbox |
+| Projects | `/api/projects` | Project directories, repos, worktrees |
+| Usage | `/api/usage` | Token usage and cost tracking |
+| Secrets | `/api/secrets` | Credential store CRUD and encryption |
 
 The dashboard UI is a React SPA embedded in the binary via `rust-embed` and served at the root path. It communicates with these API endpoints for all operations.
 
@@ -381,7 +403,7 @@ src/
 │   ├── cortex.rs        — system observer
 │   └── status.rs        — live status snapshot
 │
-├── tools/               — 27 tool implementations (one per file)
+├── tools/               — 30+ tool implementations (one per file)
 ├── memory/              — memory graph, search, embeddings
 ├── llm/                 — model routing, provider clients
 ├── messaging/           — platform adapters
@@ -389,13 +411,15 @@ src/
 ├── prompts/             — template engine
 ├── hooks/               — PromptHook implementations
 ├── cron/                — scheduled tasks
-├── api/                 — 21 Axum endpoint modules
+├── api/                 — 30+ Axum endpoint modules
 ├── identity/            — identity file loading
 ├── secrets/             — secret store, OS keystore, output scrubbing
 ├── settings/            — key-value settings
 ├── tasks/               — task board
 ├── links/               — communication graph types
-├── skills/              — skill management
+├── skills/              — skill management (installed + built-in)
+├── wiki/                — wiki store, versioning, edit matching
+├── notifications/       — notification store, emission
 ├── opencode/            — OpenCode worker integration
 ├── sandbox/             — command sandboxing
 ├── telemetry/           — metrics (feature-gated)
diff --git a/docs/content/docs/(deployment)/meta.json b/docs/content/docs/(deployment)/meta.json
index e3251539c..37cb9184c 100644
--- a/docs/content/docs/(deployment)/meta.json
+++ b/docs/content/docs/(deployment)/meta.json
@@ -1,4 +1,4 @@
 {
   "title": "Deployment",
-  "pages": ["hosted", "metrics", "roadmap"]
+  "pages": ["metrics", "roadmap"]
 }
diff --git a/docs/content/docs/(deployment)/roadmap.mdx b/docs/content/docs/(deployment)/roadmap.mdx
index 61afccb9e..ee25d1a36 100644
--- a/docs/content/docs/(deployment)/roadmap.mdx
+++ b/docs/content/docs/(deployment)/roadmap.mdx
@@ -1,136 +1,83 @@
 ---
 title: Roadmap
-description: Development timeline and future plans for Spacebot.
+description: What's shipped, what's next, and what we decided against.
 ---
 
 # Roadmap
 
-Tracking progress from first compile to public launch.
-
-## Current State
-
-The full message-in → LLM → response-out pipeline is wired end-to-end across Discord, Telegram, Slack, and webhooks. The system starts messaging adapters, routes inbound messages to agent channels via binding resolution, runs real Rig agent loops for channels/branches/workers, and routes outbound responses back through the messaging layer. The hosted platform (spacebot.sh) is deployed with a control plane, dashboard, and marketing site. Config changes hot-reload without restarts.
-
-## Completed
-
-- **Project structure** — all modules declared, module root pattern (`src/memory.rs` not `mod.rs`)
-- **Error hierarchy** — thiserror domain enums wrapped by top-level `Error` with `#[from]`
-- **Config** — hierarchical TOML with `Config`, `AgentConfig`, `ResolvedAgentConfig`, `Binding`, `MessagingConfig`. File watcher with event filtering and content hash debounce for hot-reload.
-- **Multi-agent** — per-agent database isolation, `Agent` struct bundles all dependencies
-- **Database connections** — SQLite + LanceDB + redb per-agent, migrations for all tables
-- **LLM** — `SpacebotModel` implements Rig's `CompletionModel`, routes through `LlmManager` via HTTP with retries and fallback chains across 13 providers (Anthropic, OpenAI, OpenRouter, Kilo Gateway, Z.ai, Groq, Together, Fireworks, DeepSeek, xAI, Mistral, OpenCode Zen, OpenCode Go)
-- **Model routing** — `RoutingConfig` with process-type defaults, task overrides, fallback chains
-- **Memory** — full stack: types, SQLite store (CRUD + graph), LanceDB (embeddings + vector + FTS), fastembed, hybrid search (RRF fusion). `memory_type` filter wired end-to-end through SearchConfig. `total_cmp` for safe sorting.
-- **Memory maintenance** — decay + prune implemented
-- **Identity** — `Identity` struct loads SOUL.md/IDENTITY.md/ROLE.md from agent root, `Prompts` with fallback chain
-- **Agent loops** — all three process types run real Rig loops:
-  - **Channel** — per-turn tool registration, status injection, `max_turns(5)`
-  - **Branch** — history fork, `max_turns(10)`, memory tools, result injection
-  - **Worker** — fresh history, per-worker ToolServer, `max_turns(50)`, interactive mode with `input_tx` stored in ChannelState
-- **Compactor** — tiered thresholds (80%/85%/95%), LLM summarization, pre-compaction archiving, emergency truncation
-- **Cortex** — signal buffering, bulletin generation on 60min interval, association loop
-- **StatusBlock** — event-driven updates, renders to context string
-- **Hooks** — `SpacebotHook` with tool call/result events, leak detection (11 patterns scanning both tool args and output); `CortexHook` for observation (trace-only)
-- **Messaging** — `Messaging` trait with RPITIT + companion, `MessagingManager` with fan-in/routing
-- **Discord adapter** — full Serenity implementation (message handling, streaming via edit, typing indicators, guild/channel/DM filtering)
-- **Telegram adapter** — full teloxide implementation (long polling, typing indicators, attachment extraction, chat/DM filtering, 4096 char splitting)
-- **Slack adapter** — full slack-morphism implementation (Socket Mode, thread replies, file upload v2, reactions, streaming via edit, workspace/channel/DM filtering via hot-reloadable permissions)
-- **Webhook adapter** — Axum HTTP server (POST /send, GET `/poll/{id}`, GET /health)
-- **Tools** — 20+ tools implement Rig's `Tool` trait with real logic (including task board tools, memory tools, `spacebot_docs`, and `config_inspect` alongside reply/branch/worker/browser/shell primitives)
-- **Workspace containment** — file tool validates paths stay within workspace boundary, shell/exec tools block instance directory traversal, sensitive file access, and secret env var leakage
-- **Conversation persistence** — `ConversationLogger` with fire-and-forget SQLite writes, compaction archiving
-- **Cron** — scheduler with timers, active hours, circuit breaker (3 failures → disable), creates real channels. CronTool wired into channel tool factory.
-- **Message routing** — full event loop with binding resolution, channel lifecycle, outbound routing
-- **Settings store** — redb key-value with WorkerLogMode
-- **OpenClaw skills** — skill format parsing, tool mapping, directory watcher with hot reload, instance + per-agent directories
-- **Embedded UI** — Vite + React + TypeScript SPA, embedded into binary via rust_embed, served as SPA fallback
-- **Bindings API** — hot-creates bindings and starts adapters at runtime without restart via ArcSwap
-- **Hosted platform** — control plane, dashboard, marketing site. Instance provisioning, auth, reverse proxy to private instances over WireGuard mesh.
-- **Ingestion pipeline** — file watcher on `agents/{id}/ingest/`, chunking, per-chunk worker with INGESTION.md prompt, memory extraction, cleanup to `ingest/done/`
-- **Agent CLI** — `spacebot agents list/create/delete`, identity template bootstrapping
+## Where We Are
 
-## In Progress
+Spacebot is a working multi-agent system. Five process types (channel, branch, worker, compactor, cortex) run concurrently with delegation as the core pattern. Six messaging platforms are supported (Discord, Slack, Telegram, Twitch, Email, webhooks). The hosted platform is live at spacebot.sh.
 
-- **Cortex consolidation** — `run_consolidation()` is a stub, no actual memory merging or graph optimization
-- **Memory merge** — `merge_similar_memories()` is a no-op placeholder
-- **Cortex observe()** — extracts some event types but hardcodes `memory_type` and `importance` values instead of pulling from actual event data
-- **CortexHook** — all hook methods are trace-only passthrough, no observation logic
-- **Secrets store** — empty struct, no redb/AES-256-GCM integration
+The core systems are stable: memory graph with hybrid search, model routing with fallback chains across 14 providers (including Azure OpenAI), OS-level sandboxing, secret store with encryption at rest, per-channel settings with hot-reload, conversation persistence, token-by-token streaming, and a full React dashboard embedded in the binary.
 
-## Upcoming
+Recent work has focused on expanding what agents can do and how they share knowledge:
+
+- **[Wiki](/docs/wiki)** — instance-wide knowledge base with versioned pages, FTS search, and 6 LLM tools
+- **[Portal](/docs/portal)** — built-in web chat with conversation persistence, file attachments, and per-conversation settings
+- **[Notifications](/docs/notifications)** — real-time actionable events for task approvals and worker failures
+- **[Projects](/docs/projects)** — instance-level project management with repo/worktree tracking and auto logo detection
+- **[Direct mode](/docs/configuring-channels)** — channels can get full worker-level tools for power-user conversations
+- **Token usage tracking** — per-process usage with cost estimation, wired to the dashboard
+- **Built-in skills** — compiled into the binary, starting with wiki-writing guidelines
+- **Cron expressions** — wall-clock scheduling, persistent cursors, claim-before-run semantics
 
-### Streaming
+See the individual feature docs for details.
 
-`SpacebotModel.stream()` is implemented with provider SSE parsing. Remaining work is wiring stream-native Rig loops (`stream_prompt`) into runtime paths that still use non-streaming `.prompt(...)` calls (for example, cortex chat and channel loops).
+## In Progress
 
 ### Cortex Consolidation
 
-- Implement `run_consolidation()` — memory merging, decay management, graph optimization
-- Implement `merge_similar_memories()` in maintenance.rs
-- Cross-channel coherence — shared observations across an agent's conversations
-- Wire real values into `observe()` signal extraction
-- Implement CortexHook observation logic (anomaly detection, consolidation triggers)
+The cortex handles bulletin generation, health monitoring, and memory maintenance (decay + prune). The remaining cortex work is deeper cross-system inference:
 
-### ~~Secrets Store~~ ✓ Shipped
+- `run_consolidation()` — memory merging and graph optimization
+- `merge_similar_memories()` — duplicate detection and atomic merge
+- Cross-channel coherence — shared observations across an agent's conversations
+- Richer signal extraction in `observe()` — pulling real event data instead of hardcoded values
+- CortexHook observation logic — anomaly detection and consolidation triggers
 
-Implemented. Per-agent credential storage in `secrets.redb` with two categories (system/tool), `secret:` config resolution, auto-migration from plaintext config, and optional AES-256-GCM encryption at rest with OS keystore integration. See [Secret Store](/docs/secrets).
+### Budget Enforcement
 
-### Cost Tracking
+Token usage tracking is shipped. Remaining: warning thresholds, hard blocks when budgets are exceeded, session/daily/monthly aggregates, and per-model breakdown in the dashboard.
 
-Per-agent token usage and cost tracking with budget enforcement. Session, daily, and monthly aggregates stored in redb. Per-model breakdown so you can see what's expensive. Warning threshold at configurable percentage, hard block when budget is exceeded — the agent gets a clean error instead of a provider 429. Essential for the hosted platform's pricing model and for self-hosted users who want to cap spend.
+## Upcoming
 
 ### Hardening
 
-- **Autonomy levels** — readonly, supervised, full modes. Readonly blocks all write tools. Supervised requires confirmation for destructive operations. Full is the current unrestricted mode.
-- **Command allowlisting** — opt-in allowlist mode for shell tool (more secure than the current blocklist approach)
-- **SSRF protection** — block private IP ranges (RFC1918, link-local, loopback), IPv4-mapped IPv6 bypasses, and shared address space in browser and HTTP tools. Require domain allowlists for outbound requests from workers.
-- **Error message sanitization** — scrub API keys and tokens from provider error messages before they hit logs or the UI. Leak detection catches tool output, but provider errors can also contain credentials when auth fails.
-- **Audit logging** — structured JSONL trail of security-relevant events (command execution, file access, policy violations). Rotation by size. Pairs with autonomy levels to give visibility into what the agent did and whether it was approved.
-- Tool nudging — inject "use your tools" in `SpacebotHook.on_completion_response()` when LLM responds with text in early iterations
-- Outbound HTTP leak scanning — block exfiltration via tool output before it reaches external services
-
-### Observability
-
-- OpenTelemetry trace + metrics export (OTLP)
-- Prometheus metrics endpoint on the control API
-- Structured per-agent metrics: token usage, tool call counts, latency percentiles, memory operations
+- **Autonomy levels** — readonly, supervised, full modes. Readonly blocks all write tools. Supervised requires confirmation for destructive operations.
+- **Command allowlisting** — opt-in allowlist for the shell tool
+- **SSRF protection** — block private IP ranges in browser and HTTP tools. Domain allowlists for outbound worker requests.
+- **Error message sanitization** — scrub credentials from provider error messages before they reach logs or UI
+- **Audit logging** — structured JSONL trail of security-relevant events with size-based rotation
 
 ### Additional Channel Adapters
 
-- **WhatsApp** — Meta Cloud API. Hosted instances receive webhooks via the platform proxy. Self-hosted users point the callback URL at their own reverse proxy or Tailscale funnel.
-- **Matrix** — decentralized chat protocol. Bridges to self-hosted Matrix/Element deployments.
-- **iMessage** — macOS-only, AppleScript bridge. Personal use on self-hosted Mac instances.
-- **IRC** — TLS socket connection. Lightweight protocol, maps channels to conversations.
-- **Lark** — Feishu/Lark webhook integration for enterprise teams.
-- **DingTalk** — webhook integration for Chinese enterprise teams.
+- **WhatsApp** — Meta Cloud API
+- **Matrix** — decentralized chat protocol
+- **iMessage** — macOS-only, AppleScript bridge
+- **IRC** — TLS socket connection
+- **Lark / DingTalk** — enterprise webhook integrations
 
 ### Onboarding CLI
 
 - `spacebot setup --quick --provider openrouter --key sk-...` — non-interactive fast path for scripted deploys
 - `spacebot setup --channels-only` — add channels to an existing instance
 
-## Decided Against
+## Post-Launch
 
-### Built-in Tunnel Support
+- **Hot reload agent topology** — adding/removing agents without restart
+- **Agent templates** — pre-built configurations for common use cases
+- **JsonSchema-derived tool definitions** — replace hand-written JSON schemas with the `JsonSchema` derive already on every Args struct
+- **Spacedrive integration** — connect agents to terabytes of indexed, content-addressed file data across devices
 
-Some self-hosted agent frameworks bundle Cloudflare/ngrok/Tailscale tunnel management into the binary. We intentionally don't — it's unnecessary for Spacebot's architecture.
+## Decided Against
 
-All current channel adapters (Discord, Telegram, Slack, webhooks) use **outbound connections**. The bot connects to the platform's gateway or API — nothing needs to POST inbound to the agent. There's no port to expose.
+### Built-in Tunnel Support
 
-For hosted instances, the platform proxy handles access over a private WireGuard mesh. For self-hosted instances, the embedded API and UI are accessible on your LAN. If you want remote access, Tailscale works out of the box — just install it on the host machine and access the Spacebot API via your tailnet. No integration needed, no config, no child process management.
+All current channel adapters use outbound connections — the bot connects to the platform, nothing needs to POST inbound. There's no port to expose.
 
-If a future channel adapter requires inbound HTTP callbacks (e.g. WhatsApp Business API), hosted instances would handle it via the platform proxy, and self-hosted users can point the callback URL at their existing Tailscale/Cloudflare setup.
+For hosted instances, the platform proxy handles access over a private WireGuard mesh. For self-hosted instances, Tailscale works out of the box. If a future adapter requires inbound callbacks (e.g. WhatsApp), hosted instances handle it via the proxy, and self-hosted users point the callback at their existing reverse proxy.
 
 ### `doctor` Diagnostic Command
 
-Some agent frameworks ship a `doctor` CLI command that checks daemon heartbeats, scheduler health, and channel connectivity. This usually exists to compensate for a fragile runtime — if you need a separate command to tell you your process is dead, the process management is the problem.
-
-Spacebot handles this through its control interface and the cortex. The embedded UI shows adapter status, agent health, and active connections in real-time. The cortex observes system-wide signals and surfaces issues proactively. Channel token validation happens at setup time through the bindings API — if something is misconfigured, you find out immediately when you add the binding, not by running `doctor` ten minutes later.
-
-## Post-Launch
-
-- **Cross-agent communication** — routing between agents, shared observations
-- **Hot reload agent topology** — adding/removing agents without restart
-- **Agent templates** — pre-built configurations for common use cases
-- **JsonSchema-derived tool definitions** — replace hand-written JSON schemas in all tools with the `JsonSchema` derive that's already on every Args struct
-- **Spacedrive integration** — connect agents to terabytes of indexed, content-addressed file data across devices
+The embedded UI shows adapter status, agent health, and active connections in real-time. The cortex surfaces issues proactively. Channel token validation happens at setup time through the bindings API. A separate diagnostic command would compensate for a fragile runtime — which isn't the problem we have.
diff --git a/docs/content/docs/(features)/meta.json b/docs/content/docs/(features)/meta.json
index a9903832a..e49aaa419 100644
--- a/docs/content/docs/(features)/meta.json
+++ b/docs/content/docs/(features)/meta.json
@@ -1,4 +1,4 @@
 {
   "title": "Features",
-  "pages": ["workers", "tasks", "opencode", "tools", "mcp", "browser", "cron", "skills", "ingestion"]
+  "pages": ["workers", "tasks", "opencode", "tools", "browser", "cron", "skills", "ingestion", "wiki", "notifications", "portal", "projects"]
 }
diff --git a/docs/content/docs/(features)/notifications.mdx b/docs/content/docs/(features)/notifications.mdx
new file mode 100644
index 000000000..ed8ef8139
--- /dev/null
+++ b/docs/content/docs/(features)/notifications.mdx
@@ -0,0 +1,109 @@
+---
+title: Notifications
+description: Real-time notification system for task approvals, worker failures, and system events.
+---
+
+# Notifications
+
+Actionable events surfaced to the dashboard. When a task needs approval, a worker fails, or the cortex observes something notable, a notification is created and pushed to connected clients in real-time via SSE.
+
+## Notification Kinds
+
+| Kind | Trigger | Severity |
+|------|---------|----------|
+| `task_approval` | A task enters `pending_approval` status (cortex-promoted from a todo memory) | `info` |
+| `worker_failed` | A worker process fails during execution | `warn` |
+| `cortex_observation` | The cortex detects something that needs human attention | `info` |
+
+Each notification has a `related_entity_type` and `related_entity_id` that link back to the source — a task number, worker ID, or cortex event. The `action_url` field provides a deep link for the dashboard UI.
+
+## Storage
+
+One SQLite table in the global (instance-level) database:
+
+```sql
+CREATE TABLE notifications (
+    id TEXT PRIMARY KEY,
+    kind TEXT NOT NULL,              -- task_approval, worker_failed, cortex_observation
+    severity TEXT NOT NULL DEFAULT 'info',  -- info, warn, error
+    title TEXT NOT NULL,
+    body TEXT,
+    agent_id TEXT,                   -- source agent (NULL = instance-level)
+    related_entity_type TEXT,        -- task, worker, cortex_event
+    related_entity_id TEXT,
+    action_url TEXT,
+    metadata TEXT,                   -- JSON
+    created_at TEXT NOT NULL,
+    read_at TEXT,
+    dismissed_at TEXT
+);
+```
+
+A unique index on `(kind, related_entity_type, related_entity_id) WHERE dismissed_at IS NULL` prevents duplicate active notifications for the same event.
+
+## Lifecycle
+
+```
+Created → Read → Dismissed
+```
+
+- **Created** — a notification is emitted by the system (task approval, worker failure)
+- **Read** — the user has seen it (`read_at` set, but still visible in the inbox)
+- **Dismissed** — the user has acted on or cleared it (`dismissed_at` set, filtered from inbox queries)
+
+Notifications are never deleted. Dismissed notifications remain in the database for audit purposes.
+
+## Real-Time Delivery
+
+Notifications are broadcast to connected dashboard clients via Server-Sent Events. When a notification is created, updated, or dismissed, an SSE event is emitted so the UI updates instantly without polling.
+
+The frontend `useNotifications` hook manages the notification state:
+
+- Fetches the initial list on mount
+- Subscribes to SSE events for real-time updates
+- Supports **optimistic dismiss** — the UI removes the notification immediately on click, before the server confirms
+
+## API
+
+| Method | Path | Description |
+|--------|------|-------------|
+| `GET` | `/api/notifications` | List notifications (filterable by kind, agent_id, read/unread) |
+| `GET` | `/api/notifications/unread-count` | Count of unread notifications |
+| `POST` | `/api/notifications/:id/read` | Mark a notification as read |
+| `POST` | `/api/notifications/:id/dismiss` | Dismiss a notification |
+| `POST` | `/api/notifications/read-all` | Mark all as read |
+| `POST` | `/api/notifications/dismiss-read` | Dismiss all read notifications |
+
+## Dashboard Integration
+
+Notifications power the **Action Items** card on the dashboard. Each notification renders with:
+
+- Title and body text
+- Severity indicator (info, warn, error)
+- Source agent badge
+- Action button linked to the related entity (e.g. "Review" for task approvals opens the task detail)
+- Dismiss button
+
+Task approval notifications open a dedicated `ApprovalModal` with the full task detail view, approve/dismiss actions, and query invalidation on action.
+
+## Emission
+
+Notifications are emitted automatically by the system:
+
+- **Task approval** — when the cortex promotes a todo memory to a `pending_approval` task, a notification is created via `ApiState` (threaded through `AgentDeps`)
+- **Worker failure** — when a worker process returns an error, the cortex observation loop emits a notification
+- **Cortex observation** — the cortex can emit notifications for events that warrant human attention
+
+## Module Layout
+
+```
+src/
+├── notifications.rs          → notifications/
+│   └── store.rs              — NotificationStore: CRUD, filtering, count
+│
+├── api/
+│   └── notifications.rs      — REST endpoints + SSE broadcast
+│
+└── migrations/global/
+    └── 20260405120000_notifications.sql
+```
diff --git a/docs/content/docs/(features)/portal.mdx b/docs/content/docs/(features)/portal.mdx
new file mode 100644
index 000000000..d3574c4df
--- /dev/null
+++ b/docs/content/docs/(features)/portal.mdx
@@ -0,0 +1,126 @@
+---
+title: Portal
+description: Built-in web chat interface with conversation persistence, file attachments, and per-conversation settings.
+---
+
+# Portal
+
+The portal is Spacebot's built-in web chat interface. It's the primary way to interact with agents from the dashboard — a full conversation UI with message history, file attachments, streaming responses, and per-conversation settings.
+
+Portal conversations are first-class channels. They follow the same delegation model as Discord or Slack — messages go through channel processing, branches think, workers execute. The difference is that portal conversations are managed entirely within the Spacebot UI.
+
+## Conversations
+
+Each portal conversation is a persistent chat session tied to an agent. Conversations are stored in SQLite and survive restarts.
+
+```sql
+CREATE TABLE portal_conversations (
+    id TEXT PRIMARY KEY,
+    agent_id TEXT NOT NULL,
+    title TEXT NOT NULL,
+    title_source TEXT NOT NULL DEFAULT 'system',
+    archived INTEGER NOT NULL DEFAULT 0,
+    settings TEXT,                    -- JSON (ConversationSettings)
+    created_at TIMESTAMP NOT NULL,
+    updated_at TIMESTAMP NOT NULL
+);
+```
+
+### Conversation Lifecycle
+
+- **Create** — start a new conversation from the portal sidebar or API
+- **Chat** — send messages, receive streaming responses, view tool calls
+- **Rename** — title is auto-generated from the first message, editable manually
+- **Archive** — soft-delete, hidden from the sidebar but preserved in the database
+- **Delete** — removes the conversation and its message history
+
+### Channel Mapping
+
+Each portal conversation maps to a channel with ID `portal:{conversation_id}`. The channel is created on the first message and follows the standard channel lifecycle — upsert, history persistence, compaction, and status block injection.
+
+## Settings
+
+Every portal conversation can be configured independently via the settings panel (cog icon in the chat header). Settings are stored as JSON in the `settings` column and follow the same resolution chain as all channel settings:
+
+```
+Per-conversation settings → Per-channel settings → Binding defaults → System defaults
+```
+
+Available settings:
+
+| Setting | Options | Default |
+|---------|---------|---------|
+| **Response Mode** | Active, Observe, Mention Only | Active |
+| **Model** | Any configured model (per-process overrides) | Agent default |
+| **Memory** | Full, Ambient, Off | Full |
+| **Delegation** | Standard, Direct | Standard |
+| **Worker Context** | History mode (None/Summary/Recent/Full), Memory mode (None/Ambient/Tools/Full) | None, None |
+
+See [Configuring Channels](/docs/configuring-channels) for the full settings reference.
+
+### Defaults Endpoint
+
+`GET /api/portal/defaults?agent_id=` returns the resolved default settings for new portal conversations. The UI pre-populates the settings panel with these values.
+
+## File Attachments
+
+Portal conversations support file attachments via multipart upload:
+
+- **Upload** — drag files onto the composer or click to browse. Files are uploaded via `POST /api/portal/send` as multipart form data.
+- **Timeline rendering** — attachments appear inline in the conversation timeline with filename, size, and type metadata
+- **Conversation history** — attachment metadata is included in the conversation history sent to the LLM, so the agent is aware of uploaded files
+
+Attachments are stored on disk in the agent's data directory. The `save_attachments` flag on `ConversationSettings` controls whether attachments are persisted for future reference.
+
+## Frontend Components
+
+The portal UI is modular:
+
+| Component | Purpose |
+|-----------|---------|
+| `PortalPanel` | Main container — routes between conversation list and active chat |
+| `PortalTimeline` | Message list with auto-scroll, streaming text, and tool call rendering |
+| `PortalComposer` | Input field with file drag-and-drop, send button, and attachment preview |
+| `PortalHeader` | Conversation title, agent name, response mode badge, model name, settings cog |
+| `PortalHistoryPopover` | Conversation sidebar with search, create, rename, archive, and delete |
+| `PortalActiveWorkers` | Live worker status display in the portal view |
+
+### Tool Call Rendering
+
+In direct mode (when the channel has worker-level tools), tool calls are rendered inline in the portal timeline. Each tool call shows the tool name, arguments, and result — giving visibility into what the agent is doing without needing to check the workers panel.
+
+## Streaming
+
+Portal responses stream token-by-token via SSE. The `PortalTimeline` component renders text as it arrives, with a typing indicator during the initial processing delay. Auto-scroll keeps the latest content visible.
+
+## API
+
+| Method | Path | Description |
+|--------|------|-------------|
+| `POST` | `/api/portal/send` | Send a message (supports multipart for attachments) |
+| `GET` | `/api/portal/history` | Get message history for a conversation |
+| `GET` | `/api/portal/conversations` | List conversations for an agent |
+| `POST` | `/api/portal/conversations` | Create a new conversation |
+| `PUT` | `/api/portal/conversations/:id` | Update title or archive status |
+| `DELETE` | `/api/portal/conversations/:id` | Delete a conversation |
+| `GET` | `/api/portal/defaults` | Get default settings for new conversations |
+
+All endpoints require `agent_id` as a query parameter.
+
+## Module Layout
+
+```
+src/
+├── conversation/
+│   ├── portal.rs              — PortalConversationStore: CRUD, settings persistence
+│   └── settings.rs            — ConversationSettings, ResolvedConversationSettings
+│
+├── api/
+│   ├── portal.rs              — REST endpoints (send, history, CRUD, defaults)
+│   └── attachments.rs         — File attachment handling
+│
+└── migrations/
+    ├── 20260324000001_webchat_conversations.sql     — Original table
+    ├── 20260325120000_rename_webchat_to_portal.sql  — Rename migration
+    └── 20260325130000_add_portal_conversation_settings.sql
+```
diff --git a/docs/content/docs/(features)/projects.mdx b/docs/content/docs/(features)/projects.mdx
new file mode 100644
index 000000000..b9faca28f
--- /dev/null
+++ b/docs/content/docs/(features)/projects.mdx
@@ -0,0 +1,141 @@
+---
+title: Projects
+description: Instance-level project management with repo tracking, worktrees, and auto logo detection.
+---
+
+# Projects
+
+Projects represent the codebases and working directories that agents operate on. Each project maps to a root directory containing one or more git repositories and their worktrees.
+
+Projects are instance-level — shared across all agents. A single project can be referenced by any agent's workers, and the same codebase doesn't need to be registered multiple times for different agents.
+
+## What a Project Contains
+
+A project is a directory tree with:
+
+- **Root path** — the top-level directory (e.g. `/home/user/projects/myapp`)
+- **Repos** — git repositories discovered within the project, with remote URL, default branch, current branch, and disk usage
+- **Worktrees** — git worktrees linked to repos, for parallel branch work
+- **Logo** — auto-detected project icon from common locations
+- **Metadata** — name, description, icon emoji, tags, status, settings
+
+## Storage
+
+Three SQLite tables in the global (instance-level) database:
+
+### projects
+
+```sql
+CREATE TABLE projects (
+    id TEXT PRIMARY KEY,
+    name TEXT NOT NULL DEFAULT '',
+    description TEXT NOT NULL DEFAULT '',
+    icon TEXT NOT NULL DEFAULT '',
+    tags TEXT NOT NULL DEFAULT '[]',
+    root_path TEXT NOT NULL,
+    logo_path TEXT,
+    settings TEXT NOT NULL DEFAULT '{}',
+    status TEXT NOT NULL DEFAULT 'active',
+    created_at DATETIME NOT NULL,
+    updated_at DATETIME NOT NULL
+);
+```
+
+A unique index on `root_path` prevents duplicate registrations of the same directory.
+
+### project_repos
+
+```sql
+CREATE TABLE project_repos (
+    id TEXT PRIMARY KEY,
+    project_id TEXT NOT NULL,
+    name TEXT NOT NULL,
+    path TEXT NOT NULL,
+    remote_url TEXT NOT NULL DEFAULT '',
+    default_branch TEXT NOT NULL DEFAULT 'main',
+    current_branch TEXT,
+    description TEXT NOT NULL DEFAULT '',
+    disk_usage_bytes INTEGER,
+    created_at DATETIME NOT NULL,
+    updated_at DATETIME NOT NULL
+);
+```
+
+### project_worktrees
+
+```sql
+CREATE TABLE project_worktrees (
+    id TEXT PRIMARY KEY,
+    project_id TEXT NOT NULL,
+    repo_id TEXT NOT NULL,
+    name TEXT NOT NULL,
+    path TEXT NOT NULL,
+    branch TEXT NOT NULL,
+    created_by TEXT NOT NULL DEFAULT 'user',
+    disk_usage_bytes INTEGER,
+    created_at DATETIME NOT NULL,
+    updated_at DATETIME NOT NULL
+);
+```
+
+## Auto Logo Detection
+
+When a project is created or scanned, Spacebot looks for a logo in common locations within the project directory:
+
+- `.github/` — organization avatars and branding
+- `public/` — web app static assets
+- `src-tauri/` — Tauri app icons
+
+It scans up to 3 levels deep looking for files named `logo.{png,svg,webp}`, `icon.{png,svg,ico}`, or `favicon.{png,ico,svg}`, skipping `node_modules`, `target`, `.git`, `dist`, and `build` directories. The first match is stored as a relative `logo_path` on the project and served via a dedicated endpoint for the dashboard sidebar and project views.
+
+## Project Scanning
+
+The `POST /api/projects/:id/scan` endpoint triggers a full scan of the project directory:
+
+1. **Repo discovery** — walks the directory tree looking for `.git` directories
+2. **Branch detection** — reads the current branch and default branch for each repo
+3. **Worktree discovery** — finds linked git worktrees
+4. **Disk usage** — computes directory sizes asynchronously
+5. **Logo detection** — scans for project icons
+
+Scanning runs in the background. The project's repos, worktrees, and metadata are updated in the database as results come in.
+
+## API
+
+| Method | Path | Description |
+|--------|------|-------------|
+| `GET` | `/api/projects` | List all projects |
+| `POST` | `/api/projects` | Create a project (registers a root path) |
+| `GET` | `/api/projects/:id` | Get project with repos and worktrees |
+| `PUT` | `/api/projects/:id` | Update project metadata |
+| `DELETE` | `/api/projects/:id` | Delete project and associated repos/worktrees |
+| `POST` | `/api/projects/:id/scan` | Trigger a full directory scan |
+| `POST` | `/api/projects/:id/repos` | Register a repo within the project |
+| `DELETE` | `/api/projects/:id/repos/:repo_id` | Remove a repo |
+| `POST` | `/api/projects/:id/worktrees` | Create a git worktree |
+| `DELETE` | `/api/projects/:id/worktrees/:wt_id` | Delete a worktree |
+| `GET` | `/api/projects/:id/disk-usage` | Get disk usage breakdown |
+| `GET` | `/api/projects/:id/logo` | Serve the project logo image |
+| `PUT` | `/api/projects/reorder` | Update project sort order |
+
+## Dashboard
+
+Projects appear in the sidebar with their logo (or icon emoji fallback) and name. The active project is highlighted. Clicking a project navigates to its detail view showing repos, branches, worktrees, and disk usage.
+
+Workers spawned from the dashboard can target a specific project directory. The worker's `directory` parameter is set to the project's root path, and the sandbox writable paths are updated accordingly.
+
+## Worker Integration
+
+The `spawn_worker` tool accepts `project_id` and `worktree_id` parameters. When set, the worker operates in that project's context — the directory defaults to the project root or worktree path. The `worker_project_link` table (per-agent database) tracks which workers operated on which projects, providing a history of agent activity per codebase.
+
+A `project_manage` tool gives agents CRUD access to the project registry directly.
+
+## Migration History
+
+Projects were originally per-agent (stored in each agent's SQLite database with an `agent_id` column). They were elevated to instance-level in the SpaceUI migration:
+
+1. `20260306000003_projects.sql` — original per-agent tables
+2. `20260404120000_projects.sql` — global schema (instance-level)
+3. `20260404120000_drop_per_agent_projects.sql` — migration with dedup logic
+
+The dedup migration merges projects from all agents by `root_path`, preserving the most complete metadata.
diff --git a/docs/content/docs/(features)/skills.mdx b/docs/content/docs/(features)/skills.mdx
index 12e45b789..480e35fb8 100644
--- a/docs/content/docs/(features)/skills.mdx
+++ b/docs/content/docs/(features)/skills.mdx
@@ -270,17 +270,35 @@ assets/boilerplate/
 
 Workers copy or modify these files to produce results.
 
+## Built-in Skills
+
+Some skills are compiled directly into the Spacebot binary via `include_str!()`. These are always available without installation and serve as baseline capabilities.
+
+Currently shipped:
+
+| Skill | Description |
+|-------|-------------|
+| `wiki-writing` | Encyclopedic writing standards for the wiki system — page types, tone, structure, wiki-link syntax, editing discipline |
+
+Built-in skills follow the same `SKILL.md` format as installed skills. They're defined in `src/skills/builtin.rs` and sourced from `skills/builtin/` in the repo.
+
+### Precedence
+
+Built-in skills have the lowest priority. If you install a skill with the same name from the registry or create one locally, it overrides the built-in version.
+
 ## Skill Precedence
 
-Skills are loaded from two locations with workspace-level skills overriding instance-level:
+Skills are loaded from three tiers, with later tiers overriding earlier ones on name conflicts:
 
-1. **Instance-level:** `\{instance_dir\}/skills/` — shared across all agents
-2. **Workspace-level:** `\{agent_workspace\}/skills/` — agent-specific
+1. **Built-in:** Compiled into the binary. Lowest priority. Marked `SkillSource::Builtin`.
+2. **Instance-level:** `\{instance_dir\}/skills/` — shared across all agents. Marked `SkillSource::Instance`.
+3. **Workspace-level:** `\{agent_workspace\}/skills/` — agent-specific. Highest priority. Marked `SkillSource::Workspace`.
 
-If both locations have a skill named `pdf`, the workspace version wins.
+If all three tiers have a skill named `wiki-writing`, the workspace version wins.
 
 **Use case:**
 
+- Built-in skills provide baseline capabilities out of the box
 - Install common skills (pdf, browser-use) at instance level
 - Override with agent-specific versions in workspace
 - Test new skill versions without affecting other agents
@@ -506,8 +524,10 @@ rm -rf ~/.spacebot/agents/my-agent/workspace/skills/conflicting-skill
 **File structure:**
 
 ```rust
-src/skills.rs           // Skill loading and prompt injection
-src/skills/installer.rs // GitHub download and .skill file extraction
+src/skills.rs             // Skill loading, precedence resolution, prompt injection
+src/skills/installer.rs   // GitHub download and .skill file extraction
+src/skills/builtin.rs     // Built-in skill registration (include_str! macros)
+skills/builtin/           // Built-in skill SKILL.md files (compiled into binary)
 ```
 
 **Loading:**
diff --git a/docs/content/docs/(features)/tasks.mdx b/docs/content/docs/(features)/tasks.mdx
index cf48bb645..5844b7915 100644
--- a/docs/content/docs/(features)/tasks.mdx
+++ b/docs/content/docs/(features)/tasks.mdx
@@ -1,11 +1,11 @@
 ---
 title: Tasks
-description: Kanban-style task board with structured tracking, cortex pickup, and worker execution.
+description: Task management with structured tracking, cortex pickup, and worker execution.
 ---
 
 # Tasks
 
-A kanban-style task board built into every agent. Tasks are spec-driven documents — the description is a full markdown spec that evolves through conversation, with pre-filled subtasks as an execution plan. Each task has a short title, rich description, status, priority, subtasks, and a numeric reference (`#42`). Each agent has its own independent task store backed by its own SQLite database.
+A task management system built into every agent. Tasks are spec-driven documents — the description is a full markdown spec that evolves through conversation, with pre-filled subtasks as an execution plan. Each task has a short title, rich description, status, priority, subtasks, and a numeric reference (`#42`). Each agent has its own independent task store backed by its own SQLite database.
 
 Tasks are not tickets. They're living specs written for workers who have no conversation context. A good task description includes requirements, constraints, file paths, examples, and acceptance criteria. The branch refines the spec as the user clarifies scope, and moves it to `ready` when it's complete. The cortex picks it up and spawns a worker that executes against the spec.
 
@@ -252,22 +252,29 @@ The `action` field is one of `"created"`, `"updated"`, or `"deleted"`. The kanba
 
 ## Interface
 
-### Kanban Board
+### Task List
 
-The **Tasks** tab on the agent page renders a five-column kanban board. Each column corresponds to a task status. Task cards show:
+The **Tasks** tab renders a Linear-style task list. Each row shows:
 
 - `#N` task number and title
+- Status indicator
 - Priority badge (color-coded: red for critical, amber for high, default for medium, outline for low)
-- Subtask progress bar (if subtasks exist)
+- Subtask progress (if subtasks exist)
+- GitHub metadata badges (linked issues and PRs, rendered from metadata fields)
 - Worker badge (if a worker is bound)
-- Quick action buttons (Approve, Execute, Mark Done)
 - Creation timestamp and author
 
-Clicking a card opens a detail dialog with the full description, subtask checklist, metadata, timestamps, and status action buttons.
+### Task Detail
+
+Clicking a task opens a detail view with the full markdown description, subtask checklist, metadata, timestamps, and action buttons (Approve, Execute, Mark Done). GitHub issue and PR links in metadata render as clickable badges with status indicators.
 
 ### Create Task
 
-The "Create Task" button opens a dialog with fields for title, description, priority, and initial status. Tasks created from the UI default to `backlog` status and `"human"` as the creator.
+The create form has fields for title, description, priority, and initial status. Tasks created from the UI default to `backlog` status and `"human"` as the creator.
+
+### Real-Time Updates
+
+Task state changes are pushed to the UI via SSE events. When a worker completes a task, marks subtasks done, or a status transition occurs, the task list updates immediately without polling.
 
 ## Storage
 
@@ -336,8 +343,7 @@ The channel itself has no task tools — it always branches to manage tasks. Thi
 ## What's Not Implemented Yet
 
 - **Cortex todo-promotion loop** — the cortex loop that scans `Todo` memories and promotes them to `pending_approval` tasks. The data model and execution path are ready; the promotion evaluation prompt and loop are not yet built.
-- **Drag-and-drop** — the kanban board has quick action buttons but no drag-and-drop between columns yet.
-- **Activity timeline** — the detail dialog doesn't show a history of status changes, approvals, and worker events.
+- **Activity timeline** — the detail view doesn't show a history of status changes, approvals, and worker events.
 - **Task count badge** — the Tasks tab doesn't show a badge with the pending approval count yet.
-- **Task archival** — done tasks accumulate indefinitely. Options: auto-archive after N days, a separate `archived` status, or UI filtering (currently, done tasks are shown in the Done column).
+- **Task archival** — done tasks accumulate indefinitely. Options: auto-archive after N days, a separate `archived` status, or UI filtering.
 - **Rejection feedback** — when a human deletes a pending task, that signal isn't fed back to the cortex. Saving it as a memory would help the cortex learn what's not actionable.
diff --git a/docs/content/docs/(features)/wiki.mdx b/docs/content/docs/(features)/wiki.mdx
new file mode 100644
index 000000000..cf019d83a
--- /dev/null
+++ b/docs/content/docs/(features)/wiki.mdx
@@ -0,0 +1,185 @@
+---
+title: Wiki
+description: Instance-wide knowledge base with versioned pages, wiki-link navigation, and agent-accessible tools.
+---
+
+# Wiki
+
+A shared knowledge base that lives alongside the memory graph. While memories are structured objects optimized for recall and association, wiki pages are long-form documents — written and edited by agents and humans alike. Entity profiles, decision records, project docs, concept explainers, reference material.
+
+The wiki is instance-wide. All agents and users share it. Every edit is versioned permanently.
+
+## Why Both Wiki and Memory
+
+Memories are atomic facts: "James prefers Rust over TypeScript." They're created automatically during conversation, scored by importance, and decay over time. They're optimized for search and injection into prompts.
+
+Wiki pages are authored documents: "Authentication Architecture" with sections, links to related pages, and a full edit history. They don't decay. They're not injected into prompts automatically — agents read them on demand via tools.
+
+| | Memory | Wiki |
+|---|---|---|
+| **Unit** | A single fact, preference, or observation | A full document with sections |
+| **Creation** | Automatic (branches, compaction, cortex) | Intentional (tools, API, UI) |
+| **Lifecycle** | Importance decay, pruning, merging | Permanent, versioned, archivable |
+| **Prompt injection** | Via bulletin and recall | On-demand via `wiki_read` tool |
+| **Scope** | Per-agent | Instance-wide |
+
+## Page Types
+
+Every page has a type that signals its purpose:
+
+| Type | Description |
+|------|-------------|
+| `entity` | A person, team, service, or system |
+| `concept` | An idea, pattern, or methodology |
+| `decision` | A decision record with context and rationale |
+| `project` | A project overview with goals and status |
+| `reference` | Technical reference, API docs, runbooks |
+
+Page types are enforced at creation and can't be changed after. They help agents decide what kind of page to create and help the UI organize content.
+
+## Wiki Links
+
+Pages link to each other using wiki-link syntax:
+
+```markdown
+See [Authentication Architecture](wiki:authentication-architecture) for details.
+```
+
+The `wiki:slug` format is recognized in page content. The frontend renders these as navigable links between pages. The `related` field on each page stores an explicit list of related page slugs for bidirectional discovery.
+
+## Storage
+
+Two SQLite tables in the global (instance-level) database:
+
+### wiki_pages
+
+```sql
+CREATE TABLE wiki_pages (
+    id          TEXT PRIMARY KEY,
+    slug        TEXT NOT NULL UNIQUE,
+    title       TEXT NOT NULL,
+    page_type   TEXT NOT NULL,   -- entity, concept, decision, project, reference
+    content     TEXT NOT NULL DEFAULT '',
+    related     TEXT NOT NULL DEFAULT '[]',   -- JSON array of related slugs
+    created_by  TEXT NOT NULL,
+    updated_by  TEXT NOT NULL,
+    version     INTEGER NOT NULL DEFAULT 1,
+    archived    INTEGER NOT NULL DEFAULT 0,
+    created_at  TEXT NOT NULL,
+    updated_at  TEXT NOT NULL
+);
+```
+
+### wiki_page_versions
+
+Every edit creates a version row. Nothing is ever deleted.
+
+```sql
+CREATE TABLE wiki_page_versions (
+    id           TEXT PRIMARY KEY,
+    page_id      TEXT NOT NULL REFERENCES wiki_pages(id),
+    version      INTEGER NOT NULL,
+    content      TEXT NOT NULL,
+    edit_summary TEXT,
+    author_type  TEXT NOT NULL,   -- agent or user
+    author_id    TEXT NOT NULL,
+    created_at   TEXT NOT NULL,
+    UNIQUE (page_id, version)
+);
+```
+
+### Full-Text Search
+
+An FTS5 virtual table (`wiki_pages_fts`) indexes title and content with automatic trigger-based sync. The `wiki_search` tool and API search endpoint query this directly.
+
+## Tolerant Edit Matching
+
+When an agent edits a wiki page, it provides an `old_text` and `new_text` pair. The wiki store uses a multi-pass matching strategy to find the edit target:
+
+1. **Exact match** — the `old_text` appears verbatim in the page content
+2. **Normalized match** — whitespace and line endings are normalized before matching
+3. **Fuzzy match** — leading/trailing whitespace is trimmed, internal whitespace collapsed
+
+The full pass sequence:
+
+1. **Exact match** — direct substring lookup
+2. **Line-trimmed** — per-line trim, then line-block matching
+3. **Whitespace-normalized** — collapse all whitespace before matching
+4. **Indentation-flexible** — strip leading whitespace per line
+5. **Block anchor** — Levenshtein-scored first/last lines with interior similarity (60% threshold)
+
+This tolerance handles the common case where an LLM reproduces text with slightly different formatting. If all passes fail, the edit is rejected with an error describing what was attempted. The `replace_all` flag controls whether multiple occurrences are replaced or only the first match.
+
+## Tools
+
+Six LLM tools provide full wiki access to branches and workers (when `wiki_enabled` is true):
+
+| Tool | Purpose |
+|------|---------|
+| `wiki_create` | Create a new page with title, slug, type, content, and related links |
+| `wiki_edit` | Edit a page using old_text/new_text replacement with edit summary |
+| `wiki_read` | Read a page by slug, returns full content and metadata |
+| `wiki_list` | List pages with optional type filter and pagination |
+| `wiki_search` | Full-text search across titles and content |
+| `wiki_history` | View version history for a page |
+
+### Tool Availability
+
+Wiki tools are wired into branches and workers based on configuration:
+
+- **Branches** get wiki tools when the agent's config has `wiki_enabled = true`
+- **Workers** get wiki tools when `WorkerContextMode` includes `wiki_write: true`
+- **Direct mode channels** get wiki tools alongside other worker-level tools
+
+The built-in `wiki-writing` skill provides agents with style guidelines for encyclopedic writing — page type selection, tone, structure, and editing discipline.
+
+## API
+
+REST endpoints under `/api/wiki/`:
+
+| Method | Path | Description |
+|--------|------|-------------|
+| `GET` | `/wiki/pages` | List pages (filterable by type, archived status) |
+| `GET` | `/wiki/search?q=` | Full-text search |
+| `POST` | `/wiki/pages` | Create a page |
+| `GET` | `/wiki/pages/:slug` | Get a page by slug |
+| `POST` | `/wiki/pages/:slug/edit` | Edit a page (old_text/new_text with edit summary) |
+| `GET` | `/wiki/pages/:slug/history` | Version history |
+| `POST` | `/wiki/pages/:slug/restore` | Restore a previous version |
+| `DELETE` | `/wiki/pages/:slug` | Archive a page (soft delete) |
+
+## Frontend
+
+The Wiki route provides a full page browser:
+
+- **Page list** — filterable by type, searchable, sorted by last updated
+- **Page viewer** — rendered markdown with wiki-link navigation
+- **Create form** — title, slug (auto-generated from title), type selector, content editor
+- **Version history** — view previous versions with author and edit summary
+
+Wiki links in page content render as clickable navigation links. Clicking a `wiki:slug` link navigates to that page within the wiki route.
+
+## Module Layout
+
+```
+src/
+├── wiki.rs                    → wiki/
+│   └── store.rs               — WikiStore: CRUD, search, versioning, edit matching
+│
+├── tools/
+│   ├── wiki_create.rs         — wiki_create LLM tool
+│   ├── wiki_edit.rs           — wiki_edit LLM tool (tolerant matching)
+│   ├── wiki_read.rs           — wiki_read LLM tool
+│   ├── wiki_list.rs           — wiki_list LLM tool
+│   ├── wiki_search.rs         — wiki_search LLM tool (FTS5)
+│   └── wiki_history.rs        — wiki_history LLM tool
+│
+├── api/
+│   └── wiki.rs                — REST endpoints
+│
+├── skills/builtin/
+│   └── wiki-writing/SKILL.md  — Built-in wiki writing guidelines
+│
+└── migrations/global/
+    └── 20260407120000_wiki.sql — Schema + FTS + triggers
+```
diff --git a/docs/content/docs/index.mdx b/docs/content/docs/index.mdx
index ead345b0a..7f64e1f57 100644
--- a/docs/content/docs/index.mdx
+++ b/docs/content/docs/index.mdx
@@ -30,4 +30,6 @@ Spacebot runs as a single binary with no server dependencies. All data lives in
   <Card title="Architecture" href="/docs/architecture" />
   <Card title="Configuration" href="/docs/config" />
   <Card title="Memory System" href="/docs/memory" />
+  <Card title="Wiki" href="/docs/wiki" />
+  <Card title="Portal" href="/docs/portal" />
 </Cards>
diff --git a/docs/design-docs/attachment-portal-and-defaults.md b/docs/design-docs/attachment-portal-and-defaults.md
new file mode 100644
index 000000000..d370b076c
--- /dev/null
+++ b/docs/design-docs/attachment-portal-and-defaults.md
@@ -0,0 +1,210 @@
+# Attachment Persistence: Portal Integration & Remaining Gaps
+
+The core attachment system described in `channel-attachment-persistence.md` is implemented: the `saved_attachments` table, `channel_attachments.rs`, the `attachment_recall` tool, and adapter extraction across Telegram, Discord, Slack, and email are all in production.
+
+This doc covers what remains:
+
+1. **Default-on** — `save_attachments` currently defaults to `false`; it should default to `true`
+2. **Image re-injection** — the recall tool's `get_content` action returns a metadata description for images instead of actual image content
+3. **Portal chat upload** — no file input in the composer
+4. **Portal timeline display** — no attachment previews in message history
+5. **Attachment serving API** — no endpoints to retrieve attachment files for the dashboard
+
+---
+
+## 1. Default On
+
+Change the default from `false` to `true` in `ChannelConfig`:
+
+```rust
+pub struct ChannelConfig {
+    pub save_attachments: bool,  // was: false, now: true
+}
+```
+
+And in the TOML config resolution — `save_attachments` omitted from config means `true`.
+
+**Rationale:** The user's intent is that no attachment sent to the agent, from any platform, should ever be lost. Opt-in defeats this — most users won't discover or enable the setting. The risk the original doc cited ("surprises for disk space") is acceptable given that attachments are typically small and the workspace directory is already user-managed. Retention policy can come later; the default behavior should be safe and complete from day one.
+
+No migration needed. The table already exists. Channels that currently have no `save_attachments` config will start saving attachments on next message.
+
+---
+
+## 2. Image Re-injection Fix
+
+The recall tool's `get_content` action handles text files correctly (returns inline content) but for images currently returns a metadata description only:
+
+```
+"summary": "Image file screenshot.png (image/png, 240 KB). Use get_path to get the disk path for worker delegation."
+```
+
+This is wrong. The channel called `get_content` because it wants to see the image again. It should get the image.
+
+The problem is that tool output is JSON — it can't directly inject a `UserContent::Image` block. The fix is a side-channel: the recall tool writes the image content to a pending injection buffer on the tool context, and the channel's per-turn tool result processing checks this buffer and appends the image content to the next LLM turn.
+
+This is the same mechanism used for any tool that needs to inject rich content (images, files) back into the LLM context after a tool call — the tool call result carries the text summary, and the injection buffer carries the actual `UserContent`.
+
+**Tool output (text, for LLM context):**
+```json
+{
+  "action": "get_content",
+  "summary": "Image screenshot.png loaded for analysis (240 KB).",
+  "attachment_id": "a1b2c3d4"
+}
+```
+
+**Injected alongside the tool result:** `UserContent::Image` (base64 PNG)
+
+The channel renders this as an additional image block in the same turn as the tool result, so the LLM sees both the tool confirmation and the image.
+
+**Size limit:** 10 MB, same as today. Files larger than this return the metadata description and direct the channel to delegate to a worker with `get_path`.
+
+**Non-image files:** No change. Text files are already returned inline correctly.
+
+---
+
+## 3. Portal Chat Upload
+
+The portal composer needs a file input. Users should be able to attach files to messages in portal chat the same way they can on Telegram or Discord.
+
+### Composer Changes
+
+The `PortalComposer` wraps `ChatComposer` from `@spacedrive/ai`. File attachment needs to be surfaced at the portal layer:
+
+- A paperclip button in the composer toolbar, left of the send button
+- Clicking it opens a native file picker (no drag-and-drop in v1)
+- Selected files show as chips above the text input: `[filename.png ×]`
+- Files can be removed before sending by clicking ×
+- Multiple files supported (same as Telegram)
+- No file type or size restriction in the UI — the backend handles limits
+
+### Sending Files
+
+Files are uploaded to a new API endpoint before the message is sent. On send:
+
+1. Upload each attachment file: `POST /agents/{agent_id}/channels/{channel_id}/attachments/upload`
+2. Receive back an attachment reference with a temporary token
+3. Send the message with the attachment references included in the message payload
+
+**Upload endpoint:**
+```
+POST /agents/{agent_id}/channels/{channel_id}/attachments/upload
+Content-Type: multipart/form-data
+
+→ { id, original_filename, mime_type, size_bytes }
+```
+
+This uploads the file to `workspace/saved/` and creates the `saved_attachments` record immediately, before the message is sent. The returned `id` is included in the message payload so the channel can associate it with the conversation message.
+
+**Message send payload** (extends existing send message API):
+```json
+{
+  "content": "Here's that screenshot",
+  "attachment_ids": ["a1b2c3d4-..."]
+}
+```
+
+The channel picks up the attachment IDs, looks them up in `saved_attachments`, and injects them into the LLM turn as `UserContent` exactly as it does for platform-delivered attachments. No base64 is sent over the wire in the message payload — the files are already on disk.
+
+### Portal Attachment Flow vs Platform Attachment Flow
+
+Platform adapters (Telegram, Discord) download files from external URLs during message processing. Portal uploads are pre-uploaded. The channel processes them identically after that point — both paths produce `SavedAttachment` records and `UserContent` blocks.
+
+---
+
+## 4. Portal Timeline Display
+
+Message bubbles in the portal timeline need to show attachments.
+
+### Layout
+
+Attachments render below the message text, above the timestamp:
+
+```
+┌─────────────────────────────────┐
+│ Here's that screenshot          │
+│                                 │
+│ ┌─────────────────┐             │
+│ │  [thumbnail]    │             │
+│ │  screenshot.png │             │
+│ │  240 KB         │             │
+│ └─────────────────┘             │
+│                         2:34 PM │
+└─────────────────────────────────┘
+```
+
+**Images:** Thumbnail preview, click to open full-size in a lightbox or new tab.
+
+**Other files:** Icon + filename + size. Click to download.
+
+**Voice/audio:** Waveform placeholder or audio player. The transcription text is already in the message content (wrapped in `<voice_transcript>` tags) — strip the tags and render it as a quoted block below the player.
+
+### Data Source
+
+The portal timeline reads attachment metadata from the message's `metadata.attachments` array. This is already stored in `conversation_messages.metadata` for every message where `save_attachments` was enabled.
+
+To display the actual file content (thumbnails, downloads), the timeline calls:
+
+```
+GET /agents/{agent_id}/attachments/{attachment_id}
+→ streams the file from disk with correct Content-Type
+```
+
+Thumbnails use the same endpoint with a `?thumbnail=true` query param — the API generates a 200×200 JPEG on the fly for image files. For non-image files, `?thumbnail=true` returns a generic file-type icon.
+
+### History Messages
+
+Older messages that were sent before attachment persistence was enabled will have no `metadata.attachments`. These render normally with no attachment section. The `[Attachments: ...]` text annotation (added by history reconstruction for the LLM's benefit) should be stripped from the portal display — it's internal context for the LLM, not UI copy.
+
+---
+
+## 5. Attachment Serving API
+
+Two new endpoints:
+
+### `GET /agents/{agent_id}/attachments/{attachment_id}`
+
+Streams the saved file from disk.
+
+- Looks up `attachment_id` in `saved_attachments` for this agent's channels
+- Streams `disk_path` with `Content-Type: {mime_type}`
+- Adds `Content-Disposition: inline; filename="{original_filename}"` for browser display
+- `?download=true` → `Content-Disposition: attachment` (forces download)
+- `?thumbnail=true` → returns 200×200 JPEG thumbnail for image files; generic icon PNG for others
+- Returns 404 if ID not found or file missing from disk
+
+### `GET /agents/{agent_id}/channels/{channel_id}/attachments`
+
+Lists saved attachments for a channel. Used by the portal timeline to fetch attachment metadata when loading history.
+
+```json
+{
+  "attachments": [
+    {
+      "id": "a1b2c3d4-...",
+      "original_filename": "screenshot.png",
+      "mime_type": "image/png",
+      "size_bytes": 245760,
+      "message_id": "msg_xyz",
+      "created_at": "2026-04-05T14:23:00Z"
+    }
+  ]
+}
+```
+
+Optional query params: `?message_id={id}` to filter to attachments from a specific message, `?limit=N&before={created_at}` for pagination.
+
+---
+
+## Summary of Changes
+
+| Change | Location | Notes |
+|---|---|---|
+| Default `save_attachments = true` | `src/config/types.rs` | One-line change |
+| Image re-injection in recall tool | `src/tools/attachment_recall.rs` + channel turn loop | Injection buffer mechanism |
+| File upload endpoint | `src/api/channels.rs` | New route |
+| Attachment serve endpoint | `src/api/` | New route, thumbnail generation |
+| Attachment list endpoint | `src/api/channels.rs` | New route |
+| Portal composer file picker | `interface/src/components/portal/PortalComposer.tsx` | File input + chips UI |
+| Portal timeline attachment display | `interface/src/components/portal/PortalTimeline.tsx` | Thumbnail/file rendering |
+| Voice transcript display | Portal timeline | Strip `<voice_transcript>` tags, render as quote |
diff --git a/docs/design-docs/autonomy-loop.md b/docs/design-docs/autonomy-loop.md
deleted file mode 100644
index e9eb0e2fe..000000000
--- a/docs/design-docs/autonomy-loop.md
+++ /dev/null
@@ -1,474 +0,0 @@
-# Autonomy Loop
-
-Today Spacebot is reactive. It responds to messages, executes cron jobs from scratch, and runs four hardcoded cortex loops (warmup, bulletin, association, ready-task pickup). It has no mechanism for proactive, self-directed cognition — the kind where the agent works overnight tracking issues, processing emails, monitoring repos, and surfaces curated intelligence when you ask for it in the morning.
-
-The [custom cortex loops](./custom-cortex-loops.md) design proposed solving this with user-created, per-topic cortex processes. This doc supersedes that approach. The core objection: the cortex should be something the user never thinks about. It is the system's internal monologue, not a user-configurable surface. Exposing "cortex loops" as a concept — with a creation tool, dashboard tab, and per-loop settings — turns internal cognition into just a fancier cron job.
-
-This doc proposes two changes instead:
-
-1. **The autonomy loop** — a single new built-in cortex process that gives the agent general proactive behavior, driven by its identity and role rather than user-enumerated monitoring tasks.
-2. **Stateful cron jobs** — adding optional memory continuity to the existing cron system so scheduled jobs can accumulate knowledge across runs.
-
-Together these cover the same use cases as custom cortex loops with far less conceptual overhead. The user tells the agent what it is (identity files) and what it should do on a schedule (cron jobs). The system figures out the rest.
-
-## The Problem
-
-When a user tells their agent "keep tabs on the Spacedrive issues" or "give me a morning briefing every day at 9am," there's no good mechanism for this today:
-
-1. **Cron jobs** spin up a fresh channel each time. No cross-run context. No accumulated knowledge. The cron fires, the agent sees the prompt cold, does its thing, delivers the result. Each run is isolated — the agent doesn't build on what it learned last time.
-
-2. **The existing cortex loops** are hardcoded system functions (bulletin, associations, task pickup). They don't support user-directed proactive work.
-
-3. **The ready-task pickup loop** provides autonomous execution, but only for tasks that were explicitly created by a human conversation. The agent never generates its own work.
-
-The gap: there's no way for the agent to think on its own about the things it's been told to care about.
-
-## The Autonomy Loop
-
-A new fifth built-in cortex loop, alongside warmup, bulletin, association, and ready-task pickup. One per agent. Not user-created — it's part of the system, like the bulletin.
-
-### What It Does
-
-Each cycle, the autonomy loop wakes up as a branch with memory tools and worker-spawning capability. It receives the agent's full identity context (soul, role) and the current memory bulletin. It recalls its own previous findings. Then it decides what to do — what to check on, what to investigate, what to follow up on — based on what it knows about its role, its recent history, and the tools available to it.
-
-The key insight: the agent's identity files already define what it should care about. A ROLE.md that says "You manage the Spacedrive project" implies the agent should be tracking Spacedrive issues, PRs, and CI. A SOUL.md that says "You are Jamie's engineering assistant" implies it should be aware of Jamie's email, calendar, and active projects. The autonomy loop operationalizes the identity — it's the system asking itself "given who I am and what I know, what should I be doing right now?"
-
-### What It Doesn't Do
-
-- It doesn't deliver results to the user. It saves memories and creates tasks. The bulletin and cron jobs handle delivery.
-- It doesn't have its own personality or conversation context. It's a cortex process — internal cognition.
-- It doesn't replace cron jobs. Cron jobs are "do X at time Y and tell the user." The autonomy loop is "think about what I should be aware of."
-- It doesn't require user configuration beyond identity files. The agent figures out what to monitor.
-
-### Execution Model
-
-The autonomy loop runs on a configurable interval (default: 30 minutes). Each cycle:
-
-```
-1. CONTEXT ASSEMBLY
-   ├─ Load identity context (soul.md, role.md, identity.md, user.md)
-   ├─ Load current memory bulletin
-   ├─ Load active tasks from the task board
-   └─ Load recent cortex event log (what happened since last cycle)
-
-2. RECALL PHASE
-   ├─ Recall memories with source "cortex:autonomy" (previous cycle findings)
-   ├─ Recall recent high-importance memories (what's changed in the world)
-   └─ Build a context summary of current state + recent changes
-
-3. EXECUTION PHASE (branch with worker-spawning capability)
-   ├─ System prompt: autonomy_loop.md.j2
-   ├─ Identity context + bulletin + recalled context injected
-   ├─ Branch decides what to investigate this cycle:
-   │   ├─ Check integrations relevant to its role (GitHub, email, etc.)
-   │   ├─ Follow up on unresolved items from previous cycles
-   │   ├─ Evaluate task board for stale or blocked items
-   │   └─ Look for patterns or emerging issues across recent activity
-   ├─ Spawns workers for actual work (API calls, shell commands)
-   ├─ Saves findings as memories (source: "cortex:autonomy")
-   ├─ Creates tasks for actionable items (status: pending_approval or backlog)
-   └─ Max turns from config (default: 15)
-
-4. SAVE PHASE
-   ├─ Force-save a cycle summary memory (source: "cortex:autonomy")
-   │   covering: what was checked, what was found, what was deferred
-   ├─ Log execution to cortex_events
-   └─ Update last_executed_at
-```
-
-### Why One Loop, Not Many
-
-The custom cortex loops design had separate loops for each concern ("track-spacedrive-issues", "monitor-email", "weekly-project-review"). The autonomy loop is a single process that handles all proactive concerns. The trade-offs:
-
-**What you lose:**
-- Per-topic interval control ("check issues every 5 min, email every hour")
-- Per-topic circuit breakers and failure isolation
-- Clear separation of concerns in execution logs
-
-**What you gain:**
-- The agent prioritizes dynamically. If there's a CI failure, it focuses on that instead of dutifully running all N loops regardless of urgency.
-- No user-facing complexity. No "cortex loop" concept to explain, no creation tool, no dashboard tab.
-- Natural cross-concern reasoning. The agent can connect "Alice emailed about the contract" with "there's a PR pending review from Alice" in a single thought process, rather than having two separate loops that don't talk to each other.
-- Bounded resource consumption. One branch + N workers per cycle, not N branches each spawning their own workers.
-- The agent gets better over time. As it accumulates memories about what's relevant, it naturally spends more cycles on what matters and less on what doesn't.
-
-**The prioritization concern is key.** With separate loops, each topic gets equal treatment regardless of urgency. With a single autonomy loop, the agent can look at everything it knows and decide "the CI failure is the most important thing right now, I'll check email later." This is closer to how human awareness actually works.
-
-### Source-Tagged Memory Accumulation
-
-The autonomy loop uses the source tag `cortex:autonomy` on all memories it creates. This requires making source tags functional in the memory system — today they're stored but never filtered on.
-
-**Required changes to the memory system:**
-
-1. Add `source: Option<String>` to `SearchConfig`
-2. Add a `WHERE source = ?` clause to `MemoryStore::get_sorted()` when source is set
-3. Add source post-filtering in `MemorySearch::hybrid_search()` (alongside the existing `memory_type` filter)
-4. Add a `source` parameter to `MemoryRecallArgs` in the recall tool
-5. Add a SQLite index on the `source` column: `CREATE INDEX idx_memories_source ON memories(source)`
-6. Expose `source` in the API query structs (`MemoriesListQuery`, `MemoriesSearchQuery`)
-
-The autonomy loop's recall phase uses source filtering to pull memories from previous cycles. But the memories also surface naturally through semantic recall — when a user asks "what's going on with Spacedrive issues?", autonomy loop memories about Spacedrive surface by relevance alongside memories from conversations.
-
-### Interaction with Existing Systems
-
-**Bulletin.** No changes needed. The bulletin already queries memories across all sources. Autonomy loop memories appear in the "Recent Memories," "Observations," "Events," and other bulletin sections based on type and recency. The bulletin is how the agent's autonomous findings reach every conversation.
-
-**Ready-task pickup.** The autonomy loop creates tasks. The ready-task loop executes them. This is the natural flow: **autonomy loop monitors and discovers → creates task → task system executes**. Tasks created by the autonomy loop should default to `pending_approval` unless the agent's config allows auto-approval for autonomy-generated tasks.
-
-**Cron jobs.** The autonomy loop builds awareness. Cron jobs deliver it on schedule. A morning briefing cron fires, branches to recall, and autonomy loop memories surface. No direct integration needed — the memory system bridges them.
-
-**Email adapter.** Email channels already handle immediate triage (save memories about important emails, skip spam). The autonomy loop synthesizes across email memories: "5 emails today, 1 urgent from Alice about a contract deadline." The channel handles triage; the autonomy loop handles synthesis.
-
-**Association loop.** Continues to run independently. Autonomy loop memories get the same auto-association treatment as all other memories.
-
-### Configuration
-
-Add to `CortexConfig`:
-
-```rust
-pub struct CortexConfig {
-    // ... existing fields ...
-
-    /// Whether the autonomy loop is enabled. Default: true.
-    pub autonomy_enabled: bool,
-    /// Interval between autonomy loop cycles in seconds. Default: 1800 (30 min).
-    /// Minimum: 300 (5 min).
-    pub autonomy_interval_secs: u64,
-    /// Max LLM turns per autonomy cycle. Default: 15.
-    pub autonomy_max_turns: usize,
-    /// Max concurrent workers the autonomy loop can spawn per cycle. Default: 3.
-    pub autonomy_max_workers: usize,
-    /// Whether autonomy-created tasks require approval. Default: true.
-    pub autonomy_tasks_require_approval: bool,
-}
-```
-
-These are system settings, not user-facing configuration. They're tunable in `config.toml` or via the API but don't require a dedicated UI.
-
-### System Prompt
-
-New template: `prompts/en/autonomy_loop.md.j2`
-
-```jinja
-You are the autonomy process for {{ agent_name }}. You are the agent's proactive awareness — the part that thinks about what's going on without being asked.
-
-This is not a conversation. There is no user present. You are background cognition, waking up periodically to stay informed, identify emerging issues, and prepare knowledge that will be useful when the user next interacts.
-
-{% if identity_context %}
-{{ identity_context }}
-{% endif %}
-
-{% if memory_bulletin %}
-## Current Awareness
-{{ memory_bulletin }}
-{% endif %}
-
-## Previous Cycle Findings
-{{ recalled_context }}
-
-## Active Tasks
-{{ active_tasks }}
-
-## Recent Activity
-{{ recent_events }}
-
-## Instructions
-
-Based on your identity, role, and current awareness:
-
-1. **Assess the current state.** What do you know? What has changed since your last cycle? What are the most important things happening right now?
-
-2. **Decide what to investigate.** You have access to workers that can execute shell commands, check APIs, read files, browse the web. What would be most valuable to check right now? Prioritize by urgency and relevance to your role.
-
-3. **Do the work.** Spawn workers to gather information. Review what they find. Connect it to what you already know.
-
-4. **Save what you learn.** Every finding, observation, status change, or emerging pattern should be saved as a memory. Use appropriate memory types:
-   - **event** — something that happened (CI failed, PR merged, email received)
-   - **observation** — a pattern or trend you notice (build times increasing, certain contributor very active)
-   - **fact** — a concrete piece of information (current issue count, deployment status)
-   - **decision** — something you decided or concluded (this issue is urgent, this can wait)
-
-5. **Create tasks for actionable items.** If you discover something that needs human attention or automated action, create a task on the board. Be specific about what needs to happen and why.
-
-6. **Decide what to defer.** You can't check everything every cycle. Note what you're deferring and why, so you can pick it up next time.
-
-Tag all memories with source "cortex:autonomy". Be efficient with your turn budget — spawn workers for the actual work, use your turns for reasoning and synthesis.
-```
-
-### Implementation
-
-The autonomy loop is implemented as `spawn_autonomy_loop` alongside the existing four cortex loops. It follows the same pattern: a `tokio::spawn` that runs for the lifetime of the process.
-
-```
-spawn_autonomy_loop(deps, logger)
-  └─ loop:
-       1. Sleep for autonomy_interval_secs
-       2. Check autonomy_enabled (hot-reload via ArcSwap)
-       3. Acquire execution lock (prevent overlap)
-       4. Assemble context:
-          a. Load identity (from RuntimeConfig)
-          b. Load bulletin (from RuntimeConfig)
-          c. Load active tasks (from TaskStore)
-          d. Query recent cortex events
-          e. Recall memories with source "cortex:autonomy" (latest N)
-       5. Create a branch:
-          - System prompt: autonomy_loop.md.j2 with assembled context
-          - Tools: memory_save, memory_recall, spawn_worker, task_create, task_list
-          - Max turns: autonomy_max_turns
-          - Worker limit: autonomy_max_workers
-       6. Run the branch
-       7. Force-save cycle summary memory (source: "cortex:autonomy")
-       8. Log to cortex_events
-       9. Circuit breaker: disable after N consecutive failures
-```
-
-The branch creation reuses the existing `Branch` infrastructure. The only new code is the runner function, the prompt template, and the context assembly.
-
-## Stateful Cron Jobs
-
-The second half of the design. Today, cron jobs are stateless — each run spins up a fresh channel with no memory of previous runs. This is fine for simple reminders ("remind me at 9am") but insufficient for recurring analytical tasks ("give me a morning briefing of what changed overnight").
-
-### The Change
-
-Add an optional `source_tag` field to `CronConfig`. When set, the cron job's channel automatically:
-
-1. **Recalls memories** tagged with this source before executing the prompt
-2. **Saves relevant findings** tagged with this source after execution
-3. **Accumulates knowledge** across runs — each execution builds on the previous
-
-```rust
-pub struct CronConfig {
-    // ... existing fields ...
-
-    /// Optional source tag for memory continuity across runs.
-    /// When set, the cron channel recalls memories with this source
-    /// before execution and saves findings with this source after.
-    /// Format: "cron:{id}" (auto-set from job ID if enabled).
-    pub stateful: bool,  // default: false
-}
-```
-
-When `stateful` is true, the source tag is automatically derived as `cron:{id}` (e.g., `cron:morning-briefing`). No user-specified tags — keep it simple.
-
-### How It Works
-
-When a stateful cron job fires, the existing `run_cron_job` flow is modified:
-
-```
-1. Create fresh channel (same as today)
-2. NEW: If stateful, inject a recall preamble:
-   "You are running a recurring scheduled task. Here is context
-    from previous executions:"
-   + recalled memories filtered by source "cron:{id}"
-3. Send the cron prompt as a synthetic message (same as today)
-4. Collect responses and deliver (same as today)
-5. NEW: If stateful, spawn a brief memory-persistence branch
-   that saves relevant findings with source "cron:{id}"
-```
-
-The recall happens before the prompt, injected as part of the system context. The save happens after delivery, as a fire-and-forget branch (same pattern as the existing `memory_persistence` branches that run after conversations). The cron job itself doesn't need to know about memory mechanics — it's handled by the runtime.
-
-### Cron Tool Update
-
-The `CronTool` gains a `stateful` parameter on the `create` action:
-
-```
-Arguments (create):
-  id: String (required)
-  prompt: String (required)
-  interval_secs: u64 (optional, default 3600)
-  delivery_target: String (required)
-  active_hours: String (optional)
-  run_once: bool (optional, default false)
-  stateful: bool (optional, default false)    // NEW
-```
-
-The LLM decides whether a cron job should be stateful based on the user's request:
-
-- "Remind me at 9am to check email" → stateful: false (one-shot reminder)
-- "Give me a morning briefing every day" → stateful: true (needs to accumulate overnight context)
-- "Check the build status every hour and ping me if it fails" → stateful: true (needs to know previous state to detect changes)
-
-### Migration
-
-```sql
-ALTER TABLE cron_jobs ADD COLUMN stateful INTEGER NOT NULL DEFAULT 0;
-```
-
-### What This Replaces
-
-In the custom cortex loops design, the suggested approach for a "morning briefing" was:
-
-1. Create cortex loop `track-spacebot-repo` (monitors repo every 30 min)
-2. Create cortex loop `monitor-email` (monitors email every 15 min)
-3. Create cron job `morning-briefing` (delivers at 9am, recalls loop memories)
-
-With the autonomy loop + stateful cron approach:
-
-1. The autonomy loop already monitors things relevant to the agent's role (repo, email, etc.) — no user action needed
-2. Create stateful cron job `morning-briefing` (delivers at 9am, recalls previous briefing memories + autonomy loop memories surface naturally via the bulletin)
-
-The user creates one thing (the cron job) instead of three. The system handles the rest.
-
-## How It All Fits Together
-
-```
-Identity files (SOUL.md, ROLE.md, etc.)
-  │
-  │ define what the agent cares about
-  ▼
-Autonomy Loop (runs every 30 min)
-  │ proactively monitors relevant integrations
-  │ saves findings as memories (source: "cortex:autonomy")
-  │ creates tasks for actionable items
-  │
-  ├──► Memory system ◄── Email channels (triage incoming mail)
-  │         │              Conversations (save user context)
-  │         │              Compactor (extract from history)
-  │         │
-  │         ▼
-  │    Bulletin (synthesizes all memories hourly)
-  │         │
-  │         ▼
-  │    Every channel reads the bulletin
-  │         │
-  │         ▼
-  │    User conversations have ambient awareness
-  │
-  ├──► Task board
-  │         │
-  │         ▼
-  │    Ready-task pickup loop (executes autonomy-created tasks)
-  │
-  └──► Stateful cron jobs
-          │ recall previous run memories + autonomy memories surface via bulletin
-          │ deliver accumulated knowledge on schedule
-          ▼
-       User gets a morning briefing with overnight findings
-```
-
-## Example Scenarios
-
-### Scenario 1: Overnight Monitoring + Morning Briefing
-
-**Setup:**
-- ROLE.md says: "You are the engineering assistant for the Spacebot project. You monitor the spacebot repo, track CI status, and keep the team informed."
-- User creates a stateful cron job: "Every morning at 9am, give me a briefing of what happened overnight"
-
-**Overnight:**
-- Autonomy loop runs every 30 min:
-  - Cycle 1: Recalls no previous findings (first run). Reads role.md — should monitor spacebot repo. Spawns worker to check GitHub. Finds 2 new issues, 1 merged PR. Saves as memories.
-  - Cycle 2: Recalls cycle 1 findings. Spawns worker to check CI — main build passing. Checks issues again — 1 new comment on issue #423. Saves findings.
-  - Cycle 3: Recalls cycles 1-2. CI still passing. No new issues. Defers to next cycle.
-  - Cycle 4: Recalls previous cycles. New email from Alice about contract renewal (surfaced via email channel memories in bulletin). Notes this is important. Saves observation: "Alice's contract renewal needs attention by Friday."
-
-**9am:**
-- Morning briefing cron fires (stateful)
-- Recalls its own previous briefing memories (context from last briefing)
-- Bulletin has been refreshed with autonomy loop findings
-- Channel branches to recall — autonomy memories surface by relevance
-- Delivers: "Good morning. Overnight: 2 new issues on spacebot (#423 memory leak, #424 docs update), PR #420 merged (email adapter). CI is green. Alice emailed about her contract renewal — deadline is Friday."
-
-### Scenario 2: Proactive Task Creation
-
-**Setup:**
-- Agent has been told it's responsible for CI health
-
-**Autonomy cycle:**
-- Recalls previous findings: CI was passing last cycle
-- Spawns worker to check GitHub Actions — build failing for 2 hours
-- Saves event memory: "CI failure on main: test_memory_search failing since commit abc123"
-- Creates task: "Investigate CI failure: test_memory_search on main" (status: pending_approval, priority: high)
-- Saves observation: "CI has been unstable this week — 3 failures in 5 days"
-
-**Next bulletin refresh:**
-- Bulletin picks up the CI failure event and the instability observation
-- Every channel now has ambient awareness of the CI problem
-
-**User opens chat:**
-- Agent's channel prompt includes the bulletin with CI failure info
-- User asks "what's going on?" — agent already knows, no recall needed
-
-### Scenario 3: Email Synthesis
-
-**Ongoing:**
-- Email channels process incoming mail (already implemented on `feat/email-adapter`)
-- Each email is triaged: save memories for important ones, skip spam
-- Email memories accumulate: sender, subject, urgency, key content
-
-**Autonomy cycle:**
-- Recalls recent email-related memories (they surface by relevance alongside cortex:autonomy memories)
-- Synthesizes: "5 emails today. 1 urgent from Alice (contract renewal, Friday deadline). 2 newsletters (skipped). 1 from Bob about the API redesign meeting next Tuesday. 1 GitHub notification (PR review requested)."
-- Saves consolidated observation
-
-**User asks "any important emails?":**
-- Branch recalls autonomy observations about email
-- Can also use `email_search` tool to read specific emails on demand
-- Delivers curated summary without the user needing to check their inbox
-
-## Phases
-
-### Phase 1: Source Filter Infrastructure
-
-- Add `source: Option<String>` to `SearchConfig`
-- Add source filtering to `MemoryStore::get_sorted()` SQL queries
-- Add source post-filtering in `MemorySearch::hybrid_search()`
-- Add `source` parameter to `MemoryRecallArgs` and the API query structs
-- Add SQLite index on `memories.source`
-- This is prerequisite for both the autonomy loop and stateful cron
-
-### Phase 2: Autonomy Loop
-
-- `spawn_autonomy_loop` function in `cortex.rs`
-- `autonomy_loop.md.j2` system prompt template
-- Context assembly: identity + bulletin + tasks + recent events + recalled memories
-- Branch creation with memory tools + worker spawning + task tools
-- Forced cycle summary save (source: "cortex:autonomy")
-- Execution logging to `cortex_events`
-- Circuit breaker (disable after N consecutive failures)
-- `CortexConfig` extensions (autonomy_enabled, autonomy_interval_secs, etc.)
-- Wire into `main.rs` alongside existing cortex loops
-
-### Phase 3: Stateful Cron Jobs
-
-- Add `stateful` column to `cron_jobs` table (migration)
-- Add `stateful` field to `CronConfig` and `CronJob`
-- Modify `run_cron_job` to inject recalled memories when stateful
-- Add post-execution memory persistence branch for stateful crons
-- Update `CronTool` to accept `stateful` parameter on create
-- Update cron tool description prompt to explain when to use stateful
-
-### Phase 4: Polish
-
-- Bulletin section showing autonomy loop status and recent findings
-- SSE events for autonomy cycle state changes
-- Smart model routing — use cheaper model for recall/save phases
-- Concurrency limiting for autonomy-spawned workers
-- Dashboard visibility: autonomy loop status in the cortex section (read-only, not configurable)
-
-### Phase Ordering
-
-```
-Phase 1 (source filters)  — standalone, unblocks 2 and 3
-Phase 2 (autonomy loop)   — depends on Phase 1
-Phase 3 (stateful cron)   — depends on Phase 1, independent of Phase 2
-Phase 4 (polish)           — depends on Phases 2 + 3
-```
-
-Phases 2 and 3 can run in parallel after Phase 1.
-
-## Open Questions
-
-**Autonomy loop prioritization.** How does the autonomy loop decide what to check each cycle? The prompt instructs it to prioritize by urgency and role relevance, but in practice the LLM might fall into a rut (always checking the same things). Options: (a) trust the LLM and let memory accumulation guide it naturally, (b) inject a "what haven't you checked recently?" nudge using the cycle summary from the previous run, (c) rotate through a checklist derived from the role. Starting with (a) + (b) seems right — the cycle summary already captures what was deferred.
-
-**Autonomy loop depth vs. breadth.** Should the loop try to check everything each cycle (broad, shallow) or focus on one area per cycle (narrow, deep)? The prompt says "decide what to investigate" — leaving it to the LLM. A 30-minute interval with 15 max turns is enough for 2-3 worker spawns with reasoning around them. If the loop is too shallow, increase max_turns or decrease interval. This is a tuning problem, not an architectural one.
-
-**Task approval for autonomy-generated tasks.** The design defaults to `pending_approval` for tasks created by the autonomy loop. This prevents the agent from auto-executing potentially expensive or destructive work. But it means someone has to approve tasks — which defeats the purpose of autonomous operation for trusted agents. The `autonomy_tasks_require_approval` config flag allows disabling this per-agent. High-trust deployments (personal assistants) might auto-approve; team deployments might require approval.
-
-**Stateful cron recall budget.** How many memories should a stateful cron recall from previous runs? Too few and it loses continuity; too many and the channel's context fills up before the prompt even runs. A default of 10-15 most recent memories from `cron:{id}` is probably right, with a configurable cap.
-
-**Autonomy loop and multi-agent.** In a multi-agent setup, each agent has its own autonomy loop. Should they coordinate? The multi-agent communication system (send_agent_message) handles cross-agent messaging, but the autonomy loops run independently. If two agents both monitor the same repo, they'll duplicate work. This is acceptable for now — the memory system is per-agent, and each agent needs its own awareness. Cross-agent deduplication is a future concern.
-
-**Warmup gating.** The autonomy loop should respect the same `WorkReadiness` gates as branches and workers. It should not run until the warmup state is `Warm` and the first bulletin has been generated. This ensures it has a bulletin to reference on its first cycle.
-
-**Cycle budget allocation.** With 15 max turns per cycle: how many should go to reasoning vs. worker spawns? Workers run asynchronously — the branch spawns them and they report back. If the branch spawns 3 workers at turn 2 and they all complete by turn 5, it has 10 turns to reason about results and save memories. If workers are slow, the branch might hit its turn limit before results arrive. The branch-worker interaction pattern in the existing codebase handles this (branches wait for workers or move on), but the autonomy loop prompt should instruct the LLM to spawn workers early in the turn budget.
diff --git a/docs/design-docs/autonomy.md b/docs/design-docs/autonomy.md
new file mode 100644
index 000000000..fe8ba5263
--- /dev/null
+++ b/docs/design-docs/autonomy.md
@@ -0,0 +1,287 @@
+# Autonomy
+
+Spacebot has all the primitives for autonomous operation but no loop that ties them together. Tasks can be claimed. Workers can be spawned. Memories can be saved. Goals can be stored. The cortex observes everything. But none of this fires without a user message.
+
+This doc defines the autonomy system: how Spacebot wakes up, what it sees, what it can do, and how state is tracked — without a heartbeat.json or heartbeat.md.
+
+---
+
+## Philosophy
+
+Most agent harnesses implement "heartbeat" as: run a prompt on a timer, let the LLM figure out what to do, persist state to a markdown or JSON file for next time.
+
+This has a well-known failure mode: the agent writes malformed JSON, overwrites fields it shouldn't, or drifts from the schema over time. The Spacebot approach inverts this: **state lives in structured storage, not in files the LLM writes.** The database is the source of truth. State is tracked through tasks and the working memory event log. The LLM reads from structured queries and writes through typed tools. There is no heartbeat.md and no heartbeat.json.
+
+---
+
+## The Autonomy Channel
+
+The autonomy channel is the agent's process for self-directed work. It is not per-task. It is one channel that wakes on a configured interval, surveys the task state, does as much enrichment and preparation as useful, executes ready tasks if any exist, and exits. On the next interval it wakes again.
+
+It is structurally similar to a cron channel — periodic, no user present, full agent context. The difference is that it is persistent across runs and has awareness of its own history.
+
+The autonomy channel is the only process that:
+- Enriches and researches `pending_approval` tasks without a user present
+- Executes `ready` tasks (user-approved) without a user present
+- Creates new tasks as part of its run
+- Maintains a run history via `autonomy_complete`
+
+It does **not** branch. Branches exist to keep memory tool calls out of user-facing channel context. The autonomy channel has no user context to protect — it uses tools directly.
+
+---
+
+## Context on Wake
+
+The cortex assembles the autonomy channel's context before each wake. It gets:
+
+- **Identity** — SOUL.md, IDENTITY.md, ROLE.md. The agent knows who it is.
+- **Memory bulletin** — the cortex's current knowledge synthesis.
+- **Working memory** — recent system events. What's been happening across all channels.
+- **Task state** — all active tasks: ready, in-progress, backlog, pending_approval. Full detail on each, including all comments.
+- **Goals** — all active goals with descriptions and notes. Background context and direction, not a work queue. See [`goals.md`](goals.md).
+- **Active workers** — what's currently running so it doesn't duplicate work.
+- **Last few run summaries** — the `autonomy_complete` output from its previous runs, with timestamps. This is the primary continuity mechanism.
+
+The last run summaries are surfaced up front: "Last run (2h ago): enriched tasks X and Y, created tasks Z for backlog." The autonomy channel wakes with spatial awareness of where things stand and what it did recently.
+
+---
+
+## What It Does
+
+All tasks require human approval before execution. `pending_approval` tasks are waiting for the user to review them. `ready` tasks have been approved and are waiting to be executed. The autonomy channel's primary activity — especially overnight or during long idle windows — is **enrichment**: researching, investigating, and preparing `pending_approval` tasks so they are fully reasoned when the user comes to review them.
+
+The autonomy channel reasons about which tasks to prioritise given goal context and current system state — it is not a FIFO queue.
+
+During a run it can:
+- **Enrich pending tasks** — spawn investigation workers, reason about their findings, and add comments to tasks with synthesised results. A task that arrived as a title becomes a fully researched brief before the user ever approves it.
+- **Execute ready tasks** — tasks the user has approved. Uses execution tools directly (shell, file, browser) with no forced delegation. Workers available for genuine parallelism.
+- **Create new tasks** — identifies follow-on work and adds it to `pending_approval`. The agent proposes; the user decides.
+- **Update task metadata** — priority, blockers, progress notes.
+
+What it **cannot** do:
+- Reply to users (no `reply` tool)
+- Execute tasks that are still in `pending_approval`
+- Create cron jobs
+- Spawn other autonomy channels
+
+---
+
+## Task Comments
+
+Comments are the primary output of the enrichment loop. When the autonomy channel or a worker completes investigation on a task, findings are written as a comment — not appended to the task description, not stuffed into metadata. Comments are append-only and chronological. The task description remains the stable statement of what needs to be done; comments are everything that has been learned or decided since.
+
+Both the agent and the user can comment on a task. This makes tasks a shared workspace: the agent enriches overnight, the user wakes up to investigated briefs and can weigh in before approving.
+
+### Schema
+
+```sql
+CREATE TABLE task_comments (
+    id          TEXT PRIMARY KEY DEFAULT (lower(hex(randomblob(16)))),
+    task_id     TEXT NOT NULL REFERENCES tasks(id) ON DELETE CASCADE,
+    author_type TEXT NOT NULL,   -- 'agent' | 'user' | 'worker'
+    author_id   TEXT,            -- user_id for users, worker_id for workers, null for agent
+    body        TEXT NOT NULL,   -- synthesised comment text (2-5 lines)
+    worker_id   TEXT,            -- if this comment summarises a worker run, links to that worker
+    metadata    TEXT DEFAULT '{}',
+    created_at  TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ', 'now'))
+);
+
+CREATE INDEX task_comments_task ON task_comments(task_id, created_at);
+```
+
+`worker_id` links a comment to a specific worker run. The UI renders it as a pill on the comment — click to expand the full worker output. The comment body is always the agent's synthesised 2-5 line summary; the worker output is available on demand, never inlined.
+
+### `add_task_comment` tool
+
+Available to the autonomy channel and to workers (via the task tools toolset).
+
+```rust
+struct AddTaskCommentInput {
+    task_id: String,
+    body: String,               // synthesised finding — 2-5 lines
+    worker_id: Option<String>,  // tag the worker whose output this summarises
+}
+```
+
+### Enrichment Pattern
+
+```
+wake → survey pending_approval tasks
+  → pick highest-priority unenriched task
+  → spawn 1-3 investigation workers in parallel
+  → reason about worker findings
+  → add_task_comment: synthesised finding + worker_id(s)
+  → repeat for next task within turn budget
+  → set_outcome → exit
+```
+
+The autonomy channel system prompt instructs: investigate and comment freely; never execute a task still in `pending_approval`.
+
+### Worker Briefing
+
+When a `ready` task is eventually executed, `WorkerContextMode::Briefed` pulls the task's comments as part of the briefing synthesis alongside memory recall and working memory events. The executing worker walks in knowing what was investigated, what solution was proposed, and what the user said — without re-doing any of the research.
+
+---
+
+## Task Selection and Deduplication
+
+### `last_enriched_at`
+
+Tasks gain a `last_enriched_at` timestamp, set by the autonomy channel each time it works on a task. This prevents the same tasks from dominating every run.
+
+```sql
+ALTER TABLE tasks ADD COLUMN last_enriched_at TEXT;
+```
+
+### Task Ownership
+
+Tasks have an `assigned_agent_id` field. Once an agent claims a task, no other agent can work on it. Ownership is enforced at the query level and set atomically when a task is first enriched or executed.
+
+```sql
+-- Atomic claim: only succeeds if still unassigned or already assigned to this agent
+UPDATE tasks SET assigned_agent_id = ?1
+WHERE id = ?2 AND (assigned_agent_id IS NULL OR assigned_agent_id = ?1)
+```
+
+If the UPDATE affects 0 rows, another agent claimed it first — skip and move on.
+
+`claim_unowned` is an agent-level config flag (default: `true`). Set to `false` for agents that should only work on tasks explicitly assigned to them — useful in multi-agent setups where task routing is intentional. Once claimed, ownership is permanent. Reassignment is user-initiated only.
+
+### Selection Priority
+
+On wake, tasks are ordered by:
+
+1. **User-engaged since last enrichment** — tasks where a user comment exists with `created_at > last_enriched_at`. A user weighing in is the strongest signal to come back.
+2. **Never enriched** — `last_enriched_at IS NULL`. Fresh tasks the agent hasn't seen yet.
+3. **Stale** — `last_enriched_at < now - (interval_secs * 3)`. Tasks not touched in a while.
+4. **Excluded** — `last_enriched_at > last_run_started_at`. Worked on in the most recent run — skip unless the user has commented since.
+
+Rule 4 prevents just-worked-on tasks from floating to the top next wake. Rule 1 clears that exclusion when the user responds — natural gate, no separate flag needed.
+
+The channel selects up to `max_tasks_per_run` from this ordered list, reasoning about which are most valuable given goal context. Not a mechanical top-N pick. All queries filter to `assigned_agent_id = this_agent OR assigned_agent_id IS NULL` (when `claim_unowned = true`).
+
+### Run History as Context
+
+The last few `autonomy_complete` summaries provide a second deduplication layer — even if a task slips through the timestamp filter, the channel can see "I already researched this last run" and move on.
+
+---
+
+## Soft Timeout
+
+Hard timeouts waste runs — cutting off mid-task leaves work in undefined state. Spacebot uses a soft warning instead.
+
+The cortex monitors elapsed time. At `warn_secs`, it injects an addendum into the channel's live context:
+
+```
+You have approximately 2 minutes remaining in this run.
+Finish your current task, add any final comments, and call set_outcome.
+Do not start a new task.
+```
+
+The channel wraps up gracefully and exits cleanly. The hard `timeout_secs` remains as a safety net but should almost never fire.
+
+This uses the existing addendum context delivery mechanism (same path as worker context injection).
+
+---
+
+## Continuity Between Runs
+
+**Task comments** — the primary record of what has been investigated and found. Persist indefinitely. The next run sees all prior comments when it reads task state on wake, so it does not duplicate completed investigation.
+
+**Run summaries** — on exit, `autonomy_complete` records what was enriched, what was executed, what was created. The next wake receives the last `run_history_count` summaries as part of its context.
+
+Working memory provides broader system context. Run summaries provide the autonomy-specific thread.
+
+---
+
+## Lifecycle
+
+```
+Cortex tick
+  → elapsed since last autonomy run >= interval_secs
+  → no autonomy channel currently running
+  → autonomy.enabled = true
+  ↓
+Cortex assembles context (identity + bulletin + working memory + tasks + goals + run summaries)
+  ↓
+Autonomy channel wakes with full context
+  ↓
+  ├─ pending_approval tasks exist?
+  │    → enrich: spawn investigation workers, reason about findings, add_task_comment
+  │    → repeat within turn/task budget
+  │
+  ├─ ready tasks exist?
+  │    → execute: pick highest-priority, run with full context + briefing from comments
+  │
+  └─ no tasks worth acting on?
+       → create pending_approval tasks from goals, or exit with "nothing to do"
+  ↓
+Calls set_outcome → summary recorded
+  ↓
+Channel exits → cortex records last_run_at, cleans up
+```
+
+If the channel crashes mid-execution, the task returns to `ready`. If a task fails 3 consecutive times, it moves to `failed` and emits a working memory `Error` event. Enrichment runs (comments only) do not count as failures.
+
+---
+
+## Configuration
+
+```toml
+[autonomy]
+enabled = false                    # Off by default
+interval_secs = 1800               # How often to wake (seconds)
+active_hours = [8, 22]             # UTC hour range — suppress wakes outside this window (optional)
+max_turns = 20                     # Turn budget per run — on exhaustion, behaves like soft timeout
+max_tasks_per_run = 2              # Max tasks to work on per wake
+timeout_secs = 600                 # Hard timeout — last resort, should rarely fire
+warn_secs = 480                    # Cortex injects soft warning at this point
+run_history_count = 5              # How many past run summaries to surface on wake
+claim_unowned = true               # Pick up tasks with no assigned agent
+```
+
+### Validation
+
+Enforced at startup and on config reload — autonomy does not start if any rule is violated:
+
+- `timeout_secs` ≤ `interval_secs` — a run cannot outlast the interval. If equal, runs are back-to-back (continuous operation) — valid but intentional.
+- `warn_secs` < `timeout_secs` — warning must fire before hard timeout. Clamped to `timeout_secs - 60` if violated.
+- `max_tasks_per_run` ≥ 1
+- `interval_secs` ≥ 60 — minimum 1 minute, prevents accidental tight loops.
+
+---
+
+## Implementation
+
+**Phase 1 — Autonomy Channel**
+- `AutonomyChannelContext` builder: identity + bulletin + working memory + tasks + goals + run summaries
+- `autonomy_channel.md.j2` system prompt (enrichment-first, `autonomy_complete` on exit, never execute `pending_approval`)
+- Goals table migration + `goal_create`, `goal_update`, `goal_list` tools (see `goals.md`)
+- Cortex: interval trigger, `last_run_at` tracking, context assembly, channel lifecycle, soft timeout addendum at `warn_secs`
+- `autonomy_complete` tool + run summary storage + retrieval for run history (note: `set_outcome` already exists for cron delivery — `autonomy_complete` is intentionally distinct)
+- `last_enriched_at` column on tasks; atomic claim via `assigned_agent_id`; selection query with priority ordering
+- Task retry/failure handling (3 strikes → `failed`, working memory error event)
+- All config fields + validation
+
+**Phase 2 — Task Comments**
+- `task_comments` table migration
+- `add_task_comment` tool (autonomy channel + workers)
+- Task comments included in task state context on wake
+- Task comments pulled into `WorkerContextMode::Briefed` pipeline
+- API endpoints: list and create comments per task
+- UI: chronological comments on task detail, worker pill with expandable full output
+
+**Phase 3 — Polish**
+- Autonomy UI surface: run history, last wake time, active enrichment progress
+- "Quiet while active" flag: suppress autonomy wakes when user channels have been recently active
+- Autonomy outcomes surfaced to relevant user channels via working memory synthesis
+
+---
+
+## Non-Goals
+
+- **No talking to users.** No `reply` tool. Output goes to task comments, working memory, and `autonomy_complete`.
+- **No recursive autonomy.** The autonomy channel cannot spawn other autonomy channels.
+- **No identity or config modification.** Factory tools remain cortex-chat / admin only.
+- **Goals are not auto-completed.** The agent proposes completion; the user confirms.
+- **Per-goal active hours** are out of scope. `active_hours` applies to the whole system.
diff --git a/docs/design-docs/cron-outcome-delivery.md b/docs/design-docs/cron-outcome-delivery.md
new file mode 100644
index 000000000..5b77654d4
--- /dev/null
+++ b/docs/design-docs/cron-outcome-delivery.md
@@ -0,0 +1,113 @@
+# Cron Outcome Delivery
+
+Cron jobs with a delivery target currently spam it. A daily briefing that spawns three workers produces four Telegram messages: one when the channel starts talking, one per worker result as they arrive. The user gets fragments instead of a briefing.
+
+The fix is structural. The cron channel's `reply` tool is replaced by a buffering mechanism. Replies accumulate silently during the run. When the channel exits, the buffer is flushed as a single delivery. The agent cannot accidentally deliver early — the runtime makes it impossible.
+
+---
+
+## Root Cause
+
+A cron channel is a real channel. When the agent calls `reply`, the message routes to the delivery target immediately — the same path as any platform channel sending to Telegram. There is no gate. The cron scheduler's `await_cron_delivery_response()` takes the first response it sees, but by the time it does, Telegram has already received everything.
+
+The system prompt tells the agent "no user present, execute autonomously" but says nothing about delivery discipline. The agent behaves naturally: it narrates as it works, sends status as workers complete, delivers a summary at the end. Four messages.
+
+Prompt-only fixes are fragile. A user-modified cron prompt loses the discipline instruction. A future prompt change can reintroduce the problem silently. The runtime must enforce single delivery regardless of what the prompt says.
+
+---
+
+## Design
+
+### The Reply Buffer
+
+When a cron job has a delivery target, the channel is created with a `CronReplyBuffer` instead of a live `RoutedSender`. The buffer is an `Arc<Mutex<Vec<String>>>` — every `reply` call appends to it. Nothing is sent to the delivery adapter during the run.
+
+```rust
+pub struct CronReplyBuffer {
+    entries: Arc<Mutex<Vec<String>>>,
+}
+
+impl CronReplyBuffer {
+    pub fn stage(&self, content: String) {
+        self.entries.lock().unwrap().push(content);
+    }
+
+    pub fn take_all(&self) -> Vec<String> {
+        self.entries.lock().unwrap().drain(..).collect()
+    }
+}
+```
+
+The `reply` tool receives a `ReplyTarget` enum. For normal channels this is `ReplyTarget::Live(RoutedSender)`. For cron channels it is `ReplyTarget::Buffered(CronReplyBuffer)`. The tool impl branches on this:
+
+```rust
+match &self.target {
+    ReplyTarget::Live(sender) => sender.send(content),
+    ReplyTarget::Buffered(buffer) => buffer.stage(content),
+}
+```
+
+The agent calls `reply` however many times it wants. No errors, no changed tool signature. The buffer silently absorbs every call.
+
+### Delivery at Exit
+
+After the channel's LLM loop exits, the cron runner calls `buffer.take_all()`. What it does with the entries depends on how many there are:
+
+- **Zero entries** — the agent never called `reply`. Fall back to the last LLM text response from the run (captured separately via the existing `await_cron_delivery_response` mechanism). If that's also empty, deliver nothing.
+- **One entry** — deliver it directly.
+- **Multiple entries** — concatenate with double newlines and deliver as one message. No LLM synthesis step — the agent is responsible for structuring its final reply well. If it called `reply` three times with three chunks, those chunks are joined in order.
+
+The concatenation-without-synthesis approach is intentional. Adding an LLM synthesis step here introduces latency, cost, and a failure point. The better solution is the system prompt (below) ensuring the agent only calls `reply` once with a complete message.
+
+### System Prompt Addition
+
+The cron system prompt gains a delivery section that makes the buffering behavior explicit:
+
+```
+## Delivery
+
+Your reply() calls are buffered — nothing is sent to the delivery target
+until your run completes. When you have finished all your work and have the
+complete output ready, call reply() once with the full synthesized message.
+
+Do not call reply() for interim progress or partial results. Workers report
+back to you — collect their results, synthesize, then reply once.
+
+If you have nothing meaningful to report, do not call reply() at all.
+```
+
+The structural enforcement makes this safe even if the user modifies the prompt and removes this section. The buffer still holds everything. Single delivery still happens. The prompt guidance is about quality (one well-structured message vs concatenated fragments), not correctness.
+
+### No New Config, No UI Changes
+
+There is no `output_mode` setting. Every cron channel with a delivery target uses the buffer. There is no opt-out in the UI — this is always the correct behavior for cron delivery.
+
+The `CronFormData`, `CreateCronRequest`, and all related types are unchanged. The buffer is an implementation detail of the cron runner, invisible to the API surface.
+
+The only observable behavioral change is: the delivery target receives one message instead of many, and it arrives when the run completes rather than progressively throughout.
+
+### Cron Jobs Without a Delivery Target
+
+Some cron jobs have no delivery target — they do background maintenance work with no output destination. These are unaffected. The buffer is only created when `delivery_target` is set. When it is not, the channel runs as today with the `reply` tool wired to a no-op (its current behavior for targetless cron jobs).
+
+---
+
+## What the Agent Experiences
+
+From the agent's perspective, `reply` works exactly as documented. It accepts content, returns a confirmation. The difference is the confirmation message changes slightly:
+
+- **Live mode:** `"Message sent."`
+- **Buffered mode:** `"Message staged for delivery at end of run."`
+
+This surfaces the buffering behavior in tool results, so if the agent calls reply multiple times it can see in its context that previous calls were staged, not delivered. This nudges it toward the intended pattern without preventing anything.
+
+---
+
+## Implementation Touchpoints
+
+- `src/cron/scheduler.rs` — create `CronReplyBuffer` when `delivery_target` is set; pass to channel; call `buffer.take_all()` and deliver after run
+- `src/tools/reply.rs` — add `ReplyTarget` enum; branch on live vs buffered in `call()`
+- `src/agent/channel.rs` — accept `ReplyTarget` parameter in channel construction; thread through to reply tool registration
+- `prompts/cron.md.j2` (or equivalent) — add delivery section as above
+
+No schema changes. No API changes. No UI changes.
diff --git a/docs/design-docs/goals.md b/docs/design-docs/goals.md
new file mode 100644
index 000000000..e0611c1ca
--- /dev/null
+++ b/docs/design-docs/goals.md
@@ -0,0 +1,208 @@
+# Goals
+
+Goals are user-defined objectives — the "why" behind task work. They're closer to Linear milestones than to tasks: high-level, persistent, and always visible. The agent uses goals as motivational context in every conversation, not just during autonomous operation.
+
+This doc covers the goals data model, tools, context injection, and lifecycle. For how goals drive autonomous work, see [`autonomy.md`](autonomy.md).
+
+---
+
+## Why Goals Are Different from Tasks
+
+Tasks are work to be done. Goals are things to achieve. The distinction matters:
+
+- A task is complete when its output is delivered. A goal is complete when the user says it is.
+- Tasks come and go. Goals persist until the objective is met or abandoned.
+- Tasks are the mechanism. Goals are the motivation.
+
+Goals are not auto-completed when their linked tasks finish. The agent can note that all linked work is done and suggest the goal is ready for review — but the user closes it. This is intentional. The agent doesn't know when an objective is truly met; the user does.
+
+Goals are also different from `MemoryType::Goal`, which is for agent-internal notes. User goals are top-level, always-visible objectives defined explicitly by the user.
+
+---
+
+## Schema
+
+```sql
+CREATE TABLE goals (
+    id           TEXT PRIMARY KEY DEFAULT (lower(hex(randomblob(16)))),
+    title        TEXT NOT NULL,
+    description  TEXT,
+    status       TEXT NOT NULL DEFAULT 'active',  -- active, paused, completed, abandoned
+    priority     TEXT NOT NULL DEFAULT 'medium',  -- critical, high, medium, low
+    due_date     TEXT,                             -- ISO 8601 date, nullable
+    notes        TEXT,                             -- agent-writable progress notes
+    metadata     TEXT DEFAULT '{}',               -- JSON, extensible
+    created_at   TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ', 'now')),
+    updated_at   TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ', 'now')),
+    completed_at TEXT
+);
+
+CREATE INDEX goals_status ON goals(status);
+CREATE INDEX goals_priority ON goals(status, priority);
+```
+
+### Fields
+
+- `title` — one-line label ("Migrate auth to Clerk", "Ship v2 before May")
+- `description` — context and acceptance criteria. What does success look like?
+- `status` — `active | paused | completed | abandoned`
+- `priority` — same four levels as tasks: `critical | high | medium | low`
+- `due_date` — optional deadline, day-granularity. Not a datetime — goals have deadlines, not appointments.
+- `notes` — single agent-writable field. The agent replaces this with its current assessment, not appends. Acts as "where this stands right now." Not a history log.
+- `metadata` — extensible JSON for integrations (e.g., `{"github_milestone": "v2.0", "linear_id": "OBJ-12"}`)
+
+### Task Linking
+
+```sql
+ALTER TABLE tasks ADD COLUMN goal_id TEXT REFERENCES goals(id);
+CREATE INDEX tasks_goal ON tasks(goal_id);
+```
+
+Tasks link to goals via `goal_id`. One task, one goal (or none). A goal can have many tasks. The goal review process creates tasks with `goal_id` set; users can also set it manually.
+
+---
+
+## Context Injection
+
+Goals appear in agent context at two fidelity levels.
+
+### Short Format — Channel System Prompt (always)
+
+All active goals in a compact list, injected into every channel system prompt. ~200 token budget. Goals inform every conversation, not just autonomous operation.
+
+```
+## Active Goals
+- [HIGH] Migrate auth to Clerk (due: 2026-05-01) — Tracking task created, research in progress
+- [MEDIUM] Ship v2 documentation — No tasks yet
+- [LOW] Improve test coverage to 80% — 3 tasks in progress
+```
+
+The agent reads these as background context: "these are the things I'm working toward." They don't dominate conversation — they orient it.
+
+### Extended Format — Goal Review and Autonomy Channels
+
+Full goal detail for the linked goal (for autonomy channels) or all goals (for goal review):
+
+```
+## Goal: Migrate auth to Clerk
+Priority: high | Due: 2026-05-01 | Status: active
+
+Description:
+Replace the current custom JWT auth with Clerk. All endpoints should
+use Clerk middleware. Session tokens should not be stored server-side.
+
+Progress notes:
+Audit complete — 12 endpoints need migration. Started with /api/user
+endpoints. Clerk SDK installed and tested in staging.
+
+Linked tasks:
+- [done]        Audit auth endpoints
+- [in_progress] Migrate /api/user endpoints
+- [ready]       Migrate /api/admin endpoints
+- [backlog]     Remove legacy session storage
+- [backlog]     Update auth docs
+```
+
+No token budget — autonomy channels and goal review get the full picture.
+
+---
+
+## Tools
+
+### Branch and Task Channel Tools
+
+- `goal_create(title, description?, priority?, due_date?)` — create a new goal
+- `goal_update(id, status?, priority?, due_date?, notes?, metadata_patch?)` — update fields
+- `goal_list(status?)` — list goals, optionally filtered by status
+- `goal_note(id, notes)` — update the progress notes field (shorthand for `goal_update`)
+
+### Channel Tools (read-only)
+
+Channels get `goal_list` only. They can read goals and reference them in conversation, but cannot mutate them. Goal mutations go through branches.
+
+### Goal Completion
+
+Goals are not completed by tool — they're completed by the user via the API or UI. The agent can call `goal_update(status: "completed")` only with explicit user instruction. The goal review process does not call this automatically.
+
+What the goal review *can* do: set `notes` to "All linked tasks complete — ready for your review" when it detects all tasks are done. This surfaces the completion candidate to the user without presuming to close it.
+
+---
+
+## Lifecycle
+
+```
+goal_create → active
+  ↓
+Autonomy channel wakes, sees goal with no tasks
+  → creates pending_approval tasks, updates goal notes
+  ↓
+User approves tasks → backlog / ready
+  ↓
+Autonomy channel executes tasks
+  → updates goal notes as progress is made
+  ↓
+Autonomy channel detects all tasks complete
+  → sets notes: "All linked tasks complete — ready for your review"
+  ↓
+User reviews → goal_update(status: "completed")  ← user-initiated
+```
+
+**Status transitions:**
+- `active → paused` — user pauses (no autonomous work on paused goals)
+- `active → completed` — user confirms objective met
+- `active → abandoned` — user drops the goal
+- `paused → active` — user resumes
+
+The autonomy channel skips paused and abandoned goals entirely. When picking a task, it checks the linked goal's status — if the goal is paused or abandoned, the task is skipped and flagged.
+
+---
+
+## UI
+
+Goals surface in two places in the interface:
+
+### Goals Tab
+
+A dedicated view alongside Tasks. Goals list with priority indicators, due dates, progress notes, and linked task counts by status. Think Linear milestones — linear progress bar derived from task completion ratio, click through to see linked tasks.
+
+Actions: create, edit, pause, complete, abandon. Goal detail panel shows description, notes, full linked task list with status badges.
+
+### Channel Context
+
+The active goals list is visible in the channel context panel (same panel that shows knowledge synthesis, working memory). The user can see what the agent is oriented toward in the current conversation.
+
+---
+
+## Relationship to Autonomy
+
+Goals don't drive execution directly — the task system does. The autonomy channel reads goals on each wake, uses them to inform which task to pick and what new tasks to create, and updates their notes as progress is made. There is no separate goal review process.
+
+```
+Goals → Autonomy Channel → pending_approval tasks → (user approves) → ready tasks → execution
+```
+
+Goals are the "why." Tasks are the "what." The autonomy channel is the "how."
+
+A goal without tasks is a signal the autonomy channel acts on — it creates `pending_approval` tasks toward the objective. A goal with all tasks complete is a signal the autonomy channel surfaces to the user via `notes`. In between, goals provide the orienting context that makes individual task work coherent.
+
+---
+
+## Implementation Phases
+
+**Phase 1 — Data Model + Tools**
+- `goals` table migration
+- `goal_id` FK on tasks migration
+- `goal_create`, `goal_update`, `goal_list`, `goal_note` tools
+- Active goals injected into channel system prompt (short format)
+- API endpoints: CRUD for goals
+
+**Phase 2 — Autonomy Integration**
+- Autonomy channel receives all active goals in extended format on wake
+- Autonomy channel uses `goal_id` when creating tasks from goals
+- Autonomy channel updates `notes` as progress is made
+- Autonomy channel sets `notes` when all linked tasks are complete
+
+**Phase 3 — UI**
+- Goals tab: list, create, detail panel, linked task counts
+- Progress indicator (task completion ratio)
+- Channel context panel shows active goals
diff --git a/docs/design-docs/skill-authoring.md b/docs/design-docs/skill-authoring.md
new file mode 100644
index 000000000..1b37484b0
--- /dev/null
+++ b/docs/design-docs/skill-authoring.md
@@ -0,0 +1,236 @@
+# Skill Authoring
+
+Spacebot already has a skills system: agents load skills from disk, inject a summary into the channel prompt, and workers receive full skill content to follow. Skills can be installed from the skills.sh registry or uploaded as zip files. What's missing is any path for an agent to **write a skill** — capturing reusable approaches as they emerge.
+
+Skills are structured markdown files. An agent writing one is no different from a user installing one or uploading a zip. Same format, same load path, same effect. The only thing missing is the write path and the trigger.
+
+This doc covers three additions:
+
+1. **`write_skill` tool** — a Branch-accessible tool to create or update workspace skills
+2. **Post-conversation reflection** — a background Branch that fires after conversations to decide what (if anything) to save
+3. **`CreateSkill` UI** — an AI-assisted skill creation surface in the interface
+
+---
+
+## What Already Exists
+
+The skills infrastructure is largely in place:
+
+- `src/skills.rs` — `SkillSet` loads from `{instance_dir}/skills/` and `{workspace}/skills/`, parses YAML frontmatter, resolves `{baseDir}` references
+- `src/tools/read_skill.rs` — workers call this to get full skill content by name
+- `src/tools/install_skill.rs` — installs from GitHub spec, reloads `RuntimeConfig.skills` immediately
+- `src/api/skills.rs` — list, content, install, remove, upload, registry browse/search endpoints
+- `interface/src/components/skills/` — full UI: sidebar, directory, inspector, bundled skills, rows
+- `interface/src/routes/AgentSkills.tsx` — route container wiring mutations and queries
+
+What doesn't exist: any path for an agent to **write** a skill to its workspace.
+
+---
+
+## 1. `write_skill` Tool
+
+A new tool available to **branches only** (same access level as `memory_save`). Channels delegate to a branch when they want to save a skill; branches call the tool directly.
+
+### Input
+
+```rust
+struct WriteSkillInput {
+    /// Skill name. Becomes the directory name (slugified). Used as the skill's
+    /// display name in the index. Must be unique within the workspace — if a
+    /// skill with this name exists, it is overwritten.
+    name: String,
+
+    /// One-line description injected into the channel prompt index.
+    description: String,
+
+    /// Full skill content (markdown body, no frontmatter — the tool writes
+    /// frontmatter). Should follow the standard skill format: When to Use,
+    /// Procedure, Pitfalls, Verification sections.
+    content: String,
+
+    /// Optional list of tags for future search/filtering.
+    #[serde(default)]
+    tags: Vec<String>,
+}
+```
+
+### Behavior
+
+1. Slugify `name` → `skill_name` (lowercase, spaces to hyphens)
+2. Resolve the agent's skills dir: `{instance_dir}/skills/{skill_name}/`
+3. Create or overwrite `SKILL.md` with YAML frontmatter + content body:
+
+```markdown
+---
+name: {name}
+description: {description}
+tags: [{tags}]
+---
+
+{content}
+```
+
+4. Reload the agent's `SkillSet` in `RuntimeConfig` (same reload path as `install_skill`)
+5. Return the skill name and file path on success
+
+**Constraints:**
+- Writes to the agent's own skills directory. Cross-agent skill sharing is out of scope.
+- Create and overwrite are the same operation — no separate patch. The agent rewrites the skill with improved content.
+- The tool does not delete skills. Deletion is user-initiated via the API or UI.
+
+### Tool Registration
+
+`write_skill` is added to the branch `ToolServer` alongside `memory_save`. It is not available to channels, workers, or cortex.
+
+---
+
+## 2. Post-Conversation Reflection
+
+After a conversation ends — or goes idle for a configurable window — a background Branch runs to review the conversation and decide whether to save skills or memories.
+
+### Trigger Conditions
+
+A reflection branch is eligible to fire when:
+
+- The channel receives no new message for `reflection_idle_secs` (default: 300 seconds / 5 minutes)
+- **And** at least `reflection_min_turns` user turns occurred in the conversation (default: 6)
+- **And** no reflection has run for this conversation in the last `reflection_cooldown_secs` (default: 3600 / 1 hour)
+
+All three thresholds are configurable in `config.toml` under `[reflection]`. Setting `reflection_idle_secs = 0` disables reflection entirely.
+
+The cooldown prevents multiple reflections per conversation for long-running interactive sessions. The minimum turn count prevents reflection on short exchanges that are unlikely to contain reusable knowledge.
+
+### What the Reflection Branch Does
+
+The branch receives the full conversation history (identical to how a normal branch works — it's a clone of channel history at trigger time). It runs with a capped turn budget (max 6 turns) and a focused system prompt:
+
+```
+Review the conversation above. Consider two things:
+
+**Skills**: Was a non-trivial workflow used that required multiple steps,
+trial and error, or problem-solving? If so, and if that workflow would be
+reusable in future sessions, save it as a skill using write_skill. Only
+save skills that represent genuinely reusable procedures — not one-off
+tasks or simple requests.
+
+**Memories**: Did the user reveal preferences, constraints, or facts about
+themselves or their environment that would reduce the need for future
+clarification? If so, save them using memory_save.
+
+If nothing is worth saving, output only: "Nothing to save." and stop.
+Do not explain your reasoning unless you take an action.
+```
+
+**Tools available:** `write_skill`, `memory_save`, `memory_recall` (to avoid duplicating existing memories).
+
+**Silent by default.** The branch result is not injected into the channel's history and produces no user-visible output. The agent runtime logs the reflection outcome (skill/memory saved, or nothing) at `DEBUG` level.
+
+### Implementation Notes
+
+The idle timer lives on the channel. When the channel's message loop has been waiting longer than `reflection_idle_secs` without receiving a message, it checks the cooldown and minimum turn count, then spawns the reflection branch if eligible. This is structurally similar to how the compactor monitors context size — it's a threshold check in the channel's tick loop, not a separate process.
+
+The branch runs on the same concurrency budget as normal branches (`max_concurrent_branches`). If the channel is already at its branch limit, the reflection is skipped for this idle window and retried on the next.
+
+---
+
+## 3. `CreateSkill` UI
+
+The `CreateSkill` component is currently a "coming soon" stub. It becomes an AI-assisted skill authoring surface.
+
+### User Flow
+
+The user describes a skill in plain language. The agent generates the skill content, shows a preview, and the user can edit before saving.
+
+```
+┌──────────────────────────────────────────────┐
+│ Create Skill                                  │
+│ Describe a skill and let the agent generate  │
+│ it for you.                                  │
+├──────────────────────────────────────────────┤
+│ ┌────────────────────────────────────────┐   │
+│ │ What should this skill do?             │   │
+│ │                                        │   │
+│ │ e.g. "Deploy a Next.js app to Fly.io"  │   │
+│ └────────────────────────────────────────┘   │
+│                          [Generate Skill →]  │
+├──────────────────────────────────────────────┤
+│ Preview (editable)                           │
+│ ┌────────────────────────────────────────┐   │
+│ │ ---                                    │   │
+│ │ name: deploy-nextjs-fly                │   │
+│ │ description: Deploy Next.js to Fly.io  │   │
+│ │ ---                                    │   │
+│ │                                        │   │
+│ │ # Deploy Next.js to Fly.io             │   │
+│ │ ...                                    │   │
+│ └────────────────────────────────────────┘   │
+│                                              │
+│                      [Cancel]  [Save Skill]  │
+└──────────────────────────────────────────────┘
+```
+
+### States
+
+- **Empty** — prompt input, generate button
+- **Generating** — spinner, streaming skill content into preview pane
+- **Preview** — editable textarea showing generated SKILL.md, save/cancel buttons
+- **Saving** — calls `POST /agents/skills/write`, shows loading state
+- **Success** — dismisses to sidebar with new skill selected; query invalidation refreshes installed list
+
+### New Backend Endpoint
+
+```
+POST /agents/skills/write
+Body: { agent_id, name, description, content }
+Response: { name, description, file_path, base_dir, source, source_repo }
+```
+
+This is the same logic as `write_skill` tool but exposed over HTTP for the UI. It writes to `{instance_dir}/skills/{slug}/SKILL.md` and reloads the skill set.
+
+The generate step calls an existing agent endpoint (e.g., a one-shot branch or the cortex chat endpoint) with the skill generation prompt. The exact routing is an implementation decision — the UI just needs a streaming text response to populate the preview pane.
+
+---
+
+## Skill Authoring Guidance in System Prompt
+
+The channel system prompt gets a brief `SKILL_GUIDANCE` block when skills are loaded:
+
+```
+When you encounter a non-trivial workflow — something that required multiple
+steps, problem-solving, or domain knowledge — consider whether it would be
+worth saving as a skill for future reuse. If so, delegate to a branch to
+capture it with write_skill. Don't save obvious or one-off tasks.
+```
+
+This nudges the agent toward proactive skill capture without over-instructing it. It only appears when `skill_set.len() > 0` or when `write_skill` is in scope — no guidance is shown to agents that haven't opted into the skills system.
+
+---
+
+## What This Enables
+
+With these three pieces, skills accumulate from experience:
+
+```
+User conversation
+  → Channel identifies reusable workflow, delegates to branch
+  → Branch writes skill via write_skill
+  → Skill on disk, loaded into next session
+
+OR
+
+Conversation ends (idle 5 min, ≥6 turns)
+  → Reflection branch reviews history
+  → Saves skills and/or memories silently
+  → Next conversation benefits from captured knowledge
+```
+
+The memory side already works (branches write memories, cortex maintains them). Skills are the missing procedural half — and they're just files.
+
+---
+
+## Non-Goals
+
+- **Skill evaluation** — no metrics on whether saved skills actually improve outcomes. That's a future concern.
+- **Cross-agent skill sharing** — skills are workspace-scoped per agent. Instance-level sharing remains admin-managed.
+- **Skill versioning** — overwrite is the update mechanism. Git history covers version tracking if needed.
+- **Structured skill templates** — the agent writes free-form markdown. Format guidance is in the skill authoring prompt, not enforced by schema.
diff --git a/docs/design-docs/slash-commands.md b/docs/design-docs/slash-commands.md
new file mode 100644
index 000000000..eeec692d0
--- /dev/null
+++ b/docs/design-docs/slash-commands.md
@@ -0,0 +1,239 @@
+# Slash Commands
+
+Slash commands are the power-user interface to Spacebot — session control, memory, tasks, skills, and agent state, accessible from any platform without leaving the conversation.
+
+Currently, Slack has config-driven slash commands that route raw text to an agent. That's not a command system — it's a message routing alias. This doc defines a real one: a central registry, a consistent command set, and support across Discord, Slack, Telegram, Portal, and text-based adapters.
+
+---
+
+## Central Registry
+
+All commands are defined once. Every platform derives its command list, help text, and routing from the same source. No per-adapter command tables, no duplication.
+
+```rust
+pub struct CommandDef {
+    /// Canonical name without slash (e.g. "retry")
+    pub name: &'static str,
+
+    /// Short description shown in platform menus and /help
+    pub description: &'static str,
+
+    /// Grouping for /help display
+    pub category: CommandCategory,
+
+    /// Alternative names that resolve to this command
+    pub aliases: &'static [&'static str],
+
+    /// Usage hint shown in help (e.g. "[on|off]", "<query>")
+    pub args_hint: &'static str,
+
+    /// Tab-completable subcommand options for platforms that support it
+    pub subcommands: &'static [&'static str],
+
+    /// How this command is handled
+    pub handler: CommandHandler,
+
+    /// Which platforms this command is available on
+    pub availability: CommandAvailability,
+}
+
+pub enum CommandHandler {
+    /// Handled locally by the adapter or frontend — never sent to agent
+    /// (e.g. /help, /status, /new)
+    Local,
+
+    /// Forwarded to the agent as a structured message
+    /// The agent sees the command name and args, not raw text
+    Agent,
+}
+
+pub struct CommandAvailability {
+    pub portal: bool,
+    pub discord: bool,
+    pub slack: bool,
+    pub telegram: bool,
+    pub text_adapters: bool,  // Signal, Mattermost, Email, Webhook
+}
+```
+
+### `CommandCategory`
+
+```rust
+pub enum CommandCategory {
+    Session,
+    Memory,
+    Tasks,
+    Skills,
+    Info,
+    Config,
+}
+```
+
+---
+
+## Command Set
+
+### Session
+
+| Command | Aliases | Description | Args | Handler |
+|---------|---------|-------------|------|---------|
+| `/new` | `reset` | Start a new conversation | — | Local |
+| `/retry` | — | Resend the last message | — | Agent |
+| `/undo` | — | Remove the last exchange | — | Agent |
+| `/compress` | — | Manually trigger context compaction | — | Agent |
+| `/stop` | — | Cancel all active workers and branches | — | Agent |
+| `/background` | `bg` | Run a prompt without blocking the conversation | `<prompt>` | Agent |
+
+### Memory
+
+| Command | Aliases | Description | Args | Handler |
+|---------|---------|-------------|------|---------|
+| `/memory` | `memories` | Search or list memories | `[query]` | Agent |
+| `/remember` | — | Save something to memory immediately | `<text>` | Agent |
+
+### Tasks & Goals
+
+| Command | Aliases | Description | Args | Handler |
+|---------|---------|-------------|------|---------|
+| `/tasks` | — | List tasks | `[status]` | Agent |
+| `/goals` | — | List active goals | — | Agent |
+| `/approve` | — | Approve a pending task | `[id]` | Agent |
+
+### Skills
+
+| Command | Aliases | Description | Args | Handler |
+|---------|---------|-------------|------|---------|
+| `/skills` | — | List installed skills | — | Agent |
+| `/skill` | — | Invoke a skill by name | `<name>` | Agent |
+
+### Info
+
+| Command | Aliases | Description | Args | Handler |
+|---------|---------|-------------|------|---------|
+| `/help` | `commands` | Show available commands | — | Local |
+| `/status` | — | Show conversation info: model, turn count, context usage | — | Local |
+| `/workers` | — | List active workers and their status | — | Agent |
+| `/usage` | — | Show token usage for this conversation | — | Local |
+
+### Config
+
+| Command | Aliases | Description | Args | Handler |
+|---------|---------|-------------|------|---------|
+| `/model` | — | Switch model for this conversation | `[model]` | Local |
+| `/voice` | — | Toggle voice mode | `[on\|off\|status]` | Local |
+
+---
+
+## Platform Behaviour
+
+### Portal
+
+Portal has no slash commands today. Commands are parsed client-side when input starts with `/`. A command palette appears as the user types, showing matching commands with descriptions and args hints. Submit runs the command.
+
+`Local` commands are handled in the frontend (no round trip). `Agent` commands are sent to `POST /api/channels/:id/command` with `{ name, args }`, which formats a structured inbound message and injects it into the channel.
+
+### Discord
+
+Native Discord slash command interactions via Serenity. Commands are registered with Discord's application commands API on startup (global or per-guild, configurable). Discord surfaces them in its built-in command palette with descriptions and argument hints.
+
+`Local` commands return an ephemeral interaction response immediately. `Agent` commands ack the interaction within 3 seconds and defer — the real response comes through the normal message path.
+
+### Slack
+
+Replaces the current config-driven slash command system. Instead of per-command Slack app registrations pointing at different agents, a single `/spacebot` command with subcommands covers everything: `/spacebot retry`, `/spacebot tasks`, etc. Aliases work: `/spacebot bg do the thing`.
+
+Slack is acked immediately; response delivered as a follow-up message. Removes `SlackCommandConfig` from config — no more per-command agent routing config required.
+
+### Telegram
+
+Telegram's `/command` syntax is native. The bot's command menu (set via `setMyCommands`) is generated from the registry at startup — description truncated to Telegram's 256-char limit, name to 32 chars. Commands are parsed from incoming messages that start with `/`.
+
+`Local` commands reply with formatted text. `Agent` commands forward to the channel handler as a structured message.
+
+### Text Adapters (Signal, Mattermost, Email, Webhook)
+
+Messages starting with `/` are parsed as commands. If the first word matches a known command name or alias, it's dispatched as a command with the remainder as args. No native platform command UI — `/help` is the discovery mechanism.
+
+---
+
+## Routing
+
+Command dispatch lives in the messaging layer, before the message reaches a channel. Each adapter calls `CommandRegistry::parse(text)` which returns `Option<ParsedCommand>`. If it's a `Local` command, the adapter handles it directly and no inbound message is created. If it's an `Agent` command, an `InboundMessage` is created with `MessageKind::Command { name, args }` instead of `MessageKind::Text`.
+
+Channels receive the structured command, not raw text. The agent's system prompt includes a commands block explaining what commands exist and what they mean — the agent doesn't have to parse `/approve 3` from a text string.
+
+```rust
+pub struct ParsedCommand {
+    pub def: &'static CommandDef,
+    pub args: String,
+}
+```
+
+`CommandRegistry::parse()` strips the leading slash, splits on the first whitespace, and does a case-insensitive lookup across names and aliases.
+
+---
+
+## `/help` Output
+
+Grouped by category, adapts to platform:
+
+**Portal / Discord (rich):**
+```
+Session
+  /new          Start a new conversation
+  /retry        Resend the last message
+  /stop         Cancel active workers
+
+Memory
+  /memory       Search or list memories
+  /remember     Save something to memory
+...
+```
+
+**Telegram / text (compact):**
+```
+/new — new conversation
+/retry — resend last message
+/memory [query] — search memories
+/tasks [status] — list tasks
+/help — show this
+```
+
+---
+
+## Implementation
+
+**`src/commands/`** — new module
+
+- `registry.rs` — `CommandDef`, `CommandRegistry`, static registry, `parse()`
+- `handler.rs` — local command dispatch (help, status, usage, model, voice, new)
+
+**Changes per adapter:**
+- `portal.rs` — parse `/` prefix in inbound messages, route local commands before forwarding
+- `discord.rs` — register application commands on startup, handle interaction events
+- `slack.rs` — replace `SlackCommandConfig` dispatch with registry parse on all messages; single `/spacebot` app command
+- `telegram.rs` — generate `setMyCommands` from registry, parse `/command` prefix
+- text adapters — parse `/` prefix via shared utility
+
+**API:**
+```
+POST /api/channels/:id/command
+Body: { name: string, args: string }
+```
+
+Used by Portal frontend for `Agent` commands. `Local` commands never hit the API.
+
+---
+
+## What This Replaces
+
+`SlackCommandConfig` and the current per-command agent routing config in `config.messaging.slack.commands` are removed. Slack slash commands go through the registry. The migration path: any existing `/command → agent_id` config becomes a binding.
+
+---
+
+## Non-Goals
+
+- **Custom user-defined commands** — skills serve this purpose
+- **Per-channel command availability** — registry is instance-wide
+- **Command permissions** — commands respect existing channel permission rules; no separate command ACL
+- **CLI/TUI** — out of scope
diff --git a/docs/design-docs/token-usage-tracking.md b/docs/design-docs/token-usage-tracking.md
new file mode 100644
index 000000000..180c756a5
--- /dev/null
+++ b/docs/design-docs/token-usage-tracking.md
@@ -0,0 +1,213 @@
+# Token Usage Tracking
+
+Track token consumption and estimated cost per API call, accumulated across conversations, agents, and the full instance. The dashboard TokenUsageCard currently shows dummy data. This makes it real.
+
+---
+
+## What Gets Tracked
+
+Seven fields per API call:
+
+| Field | Description |
+|-------|-------------|
+| `input_tokens` | Non-cached prompt tokens |
+| `output_tokens` | Completion/generation tokens |
+| `cache_read_tokens` | Tokens served from prompt cache |
+| `cache_write_tokens` | Tokens written to prompt cache |
+| `reasoning_tokens` | Thinking tokens (extended thinking, o3-family) |
+| `request_count` | Number of API calls (always 1 per call, summed over time) |
+| `estimated_cost_usd` | Cost in USD, null if pricing is unknown |
+
+Derived values (computed on read, not stored):
+- `prompt_tokens` = `input_tokens + cache_read_tokens + cache_write_tokens`
+- `total_tokens` = `prompt_tokens + output_tokens`
+
+---
+
+## Schema
+
+### New table: `token_usage`
+
+One row per agent process invocation (channel turn, branch, worker, cortex run, cron job).
+
+```sql
+CREATE TABLE token_usage (
+    id                  TEXT PRIMARY KEY DEFAULT (lower(hex(randomblob(16)))),
+    agent_id            TEXT NOT NULL,
+    process_type        TEXT NOT NULL,     -- 'channel' | 'branch' | 'worker' | 'cortex' | 'cron'
+    conversation_id     TEXT,              -- null for workers/branches not tied to a conversation
+    model               TEXT NOT NULL,
+    provider            TEXT NOT NULL,
+    input_tokens        INTEGER NOT NULL DEFAULT 0,
+    output_tokens       INTEGER NOT NULL DEFAULT 0,
+    cache_read_tokens   INTEGER NOT NULL DEFAULT 0,
+    cache_write_tokens  INTEGER NOT NULL DEFAULT 0,
+    reasoning_tokens    INTEGER NOT NULL DEFAULT 0,
+    request_count       INTEGER NOT NULL DEFAULT 0,
+    estimated_cost_usd  REAL,              -- null if provider pricing is unknown
+    cost_status         TEXT NOT NULL DEFAULT 'unknown',  -- see CostStatus below
+    recorded_at         TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ', 'now'))
+);
+
+CREATE INDEX token_usage_agent    ON token_usage(agent_id, recorded_at DESC);
+CREATE INDEX token_usage_conv     ON token_usage(conversation_id) WHERE conversation_id IS NOT NULL;
+CREATE INDEX token_usage_recorded ON token_usage(recorded_at DESC);
+```
+
+One row is written at the end of each process invocation (not per API call). The process accumulates in memory and flushes to the DB once on completion. Workers that crash without completing do not write a row — acceptable loss.
+
+### `cost_status` values
+
+```rust
+pub enum CostStatus {
+    Estimated,   // computed from our pricing table, may be slightly off
+    Included,    // subscription-included route (GitHub Copilot, etc.) — $0
+    Unknown,     // provider or model not in pricing table
+}
+```
+
+---
+
+## Pricing
+
+### Data structure
+
+```rust
+pub struct PricingEntry {
+    pub input_per_million: Option<Decimal>,
+    pub output_per_million: Option<Decimal>,
+    pub cache_read_per_million: Option<Decimal>,
+    pub cache_write_per_million: Option<Decimal>,
+}
+```
+
+### Lookup order
+
+1. **Hardcoded table** — covers all providers we ship with. Snapshotted from official pricing pages, versioned with a date string (e.g. `"anthropic-2026-04-07"`). Updated manually when pricing changes.
+2. **OpenRouter `/models` API** — fetched on startup, cached for 1 hour. Covers any model routed through OpenRouter.
+3. **Custom endpoint `/models`** — fetched on startup for configured custom endpoints. Cached per base URL.
+4. **Subscription-included** — certain routes (e.g. GitHub Copilot) are always $0, status `Included`.
+5. **Unknown** — cost is `null`, status `Unknown`.
+
+### Cost formula
+
+```
+cost = (input_tokens × input_per_million / 1_000_000)
+     + (output_tokens × output_per_million / 1_000_000)
+     + (cache_read_tokens × cache_read_per_million / 1_000_000)
+     + (cache_write_tokens × cache_write_per_million / 1_000_000)
+```
+
+Arithmetic uses `Decimal` throughout to avoid floating-point drift. Stored as `REAL` in SQLite (precision is fine at these magnitudes).
+
+### Normalization
+
+API providers report cache tokens differently. Normalize before computing:
+
+**Anthropic** — straightforward:
+```
+input_tokens       = usage.input_tokens
+cache_read_tokens  = usage.cache_read_input_tokens
+cache_write_tokens = usage.cache_creation_input_tokens
+```
+
+**OpenAI-compatible** — cached tokens are bundled inside `prompt_tokens`, must subtract:
+```
+cache_read_tokens  = usage.prompt_tokens_details.cached_tokens
+cache_write_tokens = usage.prompt_tokens_details.cache_write_tokens
+input_tokens       = usage.prompt_tokens - cache_read_tokens - cache_write_tokens
+```
+
+**Reasoning tokens** (extended thinking, o3-family):
+```
+reasoning_tokens = usage.output_tokens_details.reasoning_tokens
+```
+
+All fields default to 0 if absent. `max(0, ...)` guards against negative values from provider bugs.
+
+---
+
+## Accumulation
+
+Each process type accumulates token counts in memory and writes once on completion.
+
+```rust
+pub struct UsageAccumulator {
+    pub input_tokens: u64,
+    pub output_tokens: u64,
+    pub cache_read_tokens: u64,
+    pub cache_write_tokens: u64,
+    pub reasoning_tokens: u64,
+    pub request_count: u32,
+    pub estimated_cost_usd: Option<Decimal>,
+    pub cost_status: CostStatus,
+}
+```
+
+After each streaming response completes, call `accumulator.add(canonical_usage)`. On process exit (normal or error), flush to `token_usage`.
+
+Cost status is the most conservative status seen across all calls in the accumulation window: `Unknown > Estimated > Included`.
+
+---
+
+## API
+
+### `GET /api/usage`
+
+Returns aggregated token usage for the instance.
+
+Query params:
+- `agent_id` — filter to one agent (optional)
+- `since` — ISO 8601 datetime lower bound (optional, default: 30 days ago)
+- `until` — ISO 8601 datetime upper bound (optional)
+- `group_by` — `day | agent | model` (optional, default: no grouping)
+
+Response:
+```json
+{
+  "total": {
+    "input_tokens": 1240000,
+    "output_tokens": 380000,
+    "cache_read_tokens": 890000,
+    "cache_write_tokens": 120000,
+    "reasoning_tokens": 45000,
+    "request_count": 1840,
+    "estimated_cost_usd": 4.82,
+    "cost_status": "estimated"
+  },
+  "by_agent": [...],
+  "by_model": [...],
+  "by_day": [...]
+}
+```
+
+`estimated_cost_usd` is `null` in the response if `cost_status` is `unknown`.
+
+### `GET /api/usage/conversation/:id`
+
+Aggregated usage for a single conversation (all channel turns, branches, and workers spawned from it).
+
+---
+
+## Dashboard
+
+The `TokenUsageCard` currently shows dummy data. Replace with real data from `GET /api/usage`.
+
+Display:
+- **Total cost** (period) — prominent, with "estimated" label and tooltip explaining it
+- **Token breakdown** — input / output / cache read / cache write / reasoning
+- **Period selector** — 7d / 30d / 90d
+- **By model breakdown** — collapsed by default, expandable
+
+If `cost_status` is `unknown` for any portion of the period, show a note: "Some usage has unknown pricing and is excluded from the cost total."
+
+Cache tokens are worth surfacing explicitly — cache read tokens cost ~10× less than input tokens on Anthropic. Users with heavy caching should see the savings.
+
+---
+
+## What's Not In Scope
+
+- **Budget alerts / spend limits** — future work
+- **Per-user attribution** in multi-user channels — too noisy, agent-level is enough
+- **Actual billing reconciliation** — we show estimates only, not actuals from provider invoices
+- **Retroactive pricing** — usage rows store the cost at time of recording; we don't recalculate if pricing changes
diff --git a/docs/design-docs/wiki.md b/docs/design-docs/wiki.md
new file mode 100644
index 000000000..3246780e6
--- /dev/null
+++ b/docs/design-docs/wiki.md
@@ -0,0 +1,398 @@
+# Wiki
+
+A shared, versioned knowledge base for the entire Spacebot instance. Multiple agents and multiple users can read and write. Every edit is recorded permanently — like Wikipedia, nothing is ever destroyed, and the full history of how the wiki evolved is always traceable.
+
+The wiki is not per-agent. It belongs to the instance. A company running Spacebot has one wiki. All agents contribute to it. All users can browse and edit it.
+
+---
+
+## What the Wiki Is Not
+
+- **Not a replacement for the memory graph.** Atomic facts, preferences, and decisions stay in the graph. The wiki is for long-form structured knowledge that would be awkward as graph nodes — entity pages, concept docs, decision records, project syntheses.
+- **Not the file system.** Agents never write wiki content by editing files directly. All mutations go through wiki tools. The content lives in the database.
+- **Not the bulletin.** The bulletin is ephemeral, per-agent, and auto-generated. Wiki pages are persistent, instance-wide, and intentionally authored.
+
+---
+
+## Page Types
+
+| Type | What it covers | Examples |
+|------|---------------|---------|
+| **Entity** | A person, project, codebase, tool, or organisation | "Jamie Pine", "Spacebot", "Anthropic API" |
+| **Concept** | A pattern, approach, or idea that recurs | "component conventions", "auth migration pattern" |
+| **Decision** | The record of a significant decision | "why SQLite over Postgres", "model routing choices" |
+| **Project** | A running synthesis of an ongoing workstream | "v2 launch", "dashboard redesign" |
+| **Reference** | Stable factual content used repeatedly | "deployment checklist", "API rate limits" |
+
+---
+
+## Storage
+
+The wiki lives in the **global instance database** — not in any agent's workspace, not on the filesystem.
+
+```sql
+CREATE TABLE wiki_pages (
+    id           TEXT PRIMARY KEY DEFAULT (lower(hex(randomblob(16)))),
+    slug         TEXT NOT NULL UNIQUE,   -- url-safe identifier, derived from title
+    title        TEXT NOT NULL,
+    page_type    TEXT NOT NULL,          -- entity | concept | decision | project | reference
+    content      TEXT NOT NULL,          -- current markdown content (no frontmatter)
+    related      TEXT DEFAULT '[]',      -- JSON array of related page slugs
+    created_by   TEXT NOT NULL,          -- agent_id or user_id
+    updated_by   TEXT NOT NULL,
+    version      INTEGER NOT NULL DEFAULT 1,
+    created_at   TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ', 'now')),
+    updated_at   TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ', 'now'))
+);
+
+CREATE TABLE wiki_page_versions (
+    id           TEXT PRIMARY KEY DEFAULT (lower(hex(randomblob(16)))),
+    page_id      TEXT NOT NULL REFERENCES wiki_pages(id),
+    version      INTEGER NOT NULL,
+    content      TEXT NOT NULL,          -- full content snapshot at this version
+    edit_summary TEXT,                   -- optional one-line description of what changed
+    author_type  TEXT NOT NULL,          -- 'agent' | 'user'
+    author_id    TEXT NOT NULL,          -- agent_id or user_id
+    created_at   TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ', 'now')),
+    UNIQUE(page_id, version)
+);
+
+CREATE INDEX wiki_pages_type    ON wiki_pages(page_type);
+CREATE INDEX wiki_pages_updated ON wiki_pages(updated_at DESC);
+CREATE INDEX wiki_versions_page ON wiki_page_versions(page_id, version DESC);
+```
+
+`wiki_pages` always reflects the current state. `wiki_page_versions` is the immutable history — every edit appends a new row, nothing is ever deleted. Version numbers increment monotonically per page.
+
+---
+
+## The Wiki Edit Tool
+
+Wiki editing uses the same `old_string` / `new_string` pattern as `file_edit`, but with tolerant matching. Since wiki content is LLM-authored and formatting can drift slightly across edits, strict exact-match fails too often. The tool uses a multi-pass fallback strategy:
+
+1. **Exact match** — direct string replacement
+2. **Line-trimmed match** — ignores leading/trailing whitespace per line
+3. **Whitespace-normalised match** — collapses all whitespace to single spaces
+4. **Indentation-flexible match** — strips indentation and matches
+5. **Block anchor match** — for multi-line blocks, anchors on first and last line with Levenshtein similarity scoring in between
+
+If none pass, return a clear error with a suggestion to provide more surrounding context. The LLM should always read the page before editing it.
+
+This is the same approach OpenCode uses for file editing. It works well for LLM-authored content because the tolerance strategies handle the subtle variations that cause strict matching to fail.
+
+### Tool Definitions
+
+**`wiki_create`** — create a new page (first version)
+
+```rust
+struct WikiCreateInput {
+    title: String,
+    page_type: WikiPageType,
+    content: String,          // full markdown body
+    related: Vec<String>,     // slugs of related pages
+    edit_summary: Option<String>,
+}
+```
+
+**`wiki_edit`** — partial edit on an existing page (creates new version)
+
+```rust
+struct WikiEditInput {
+    slug: String,
+    old_string: String,       // text to find (tolerant matching)
+    new_string: String,       // replacement text
+    replace_all: bool,        // default false — requires unique match
+    edit_summary: Option<String>,
+}
+```
+
+**`wiki_read`** — read current version of a page
+
+```rust
+struct WikiReadInput {
+    slug: String,
+    version: Option<u32>,     // if omitted, returns current version
+}
+```
+
+**`wiki_search`** — FTS search across all pages
+
+```rust
+struct WikiSearchInput {
+    query: String,
+    page_type: Option<WikiPageType>,
+}
+```
+
+**`wiki_list`** — list all pages, optionally filtered by type
+
+```rust
+struct WikiListInput {
+    page_type: Option<WikiPageType>,
+}
+```
+
+**`wiki_history`** — list version history for a page
+
+```rust
+struct WikiHistoryInput {
+    slug: String,
+    limit: Option<u32>,   // default 20
+}
+```
+
+**Channels** do not have wiki tools by default — they delegate to branches. When delegation mode is disabled, the channel has direct access to all tools including wiki.
+
+**Branches** have `file_read` (not write/edit), `wiki_read`, and `wiki_write`, in addition to their existing memory and task tools. This makes branches the natural unit for wiki authoring: a branch can read files for context, reason about what to write, and call `wiki_create` / `wiki_edit` directly — without a worker relay. For memory-derived wiki pages (the autonomy loop's escalation flow), the branch reads the memory graph and synthesises the page; for file-derived content, it reads the source files directly.
+
+**Workers** can be granted wiki write access via a `wiki_write: bool` flag on `WorkerContextMode` (default: `false`). Enable it when the worker is explicitly tasked with wiki creation so it can read and write in one pass. Workers doing background task enrichment for the autonomy loop leave this off and surface findings via task comments instead.
+
+**The autonomy channel** has full wiki access — memory escalation, ingest-triggered synthesis, and wiki maintenance (stale pages, broken links, contradictions). It has the context to do all of this meaningfully: memory bulletin, working memory events, and run history.
+
+---
+
+## Versioning
+
+Every `wiki_create` writes version 1. Every `wiki_edit` increments the version and appends a row to `wiki_page_versions` with a full content snapshot. Pages are never deleted — only a user (via the UI or API) can archive a page, which sets a soft `archived` flag but preserves all history.
+
+This means:
+- An agent can never destroy wiki content by misusing a tool
+- Every change is traceable: who edited, when, what the content was before
+- Any version can be restored from `wiki_page_versions`
+- The complete evolution of the wiki is always available
+
+---
+
+## When the Wiki Gets Updated
+
+Four triggers:
+
+**1. Mid-conversation, branch-initiated.** The channel identifies something worth a wiki page — a decision made, a pattern established, an entity worth documenting. It delegates to a branch which calls `wiki_create` or reads + `wiki_edit`.
+
+**2. Post-conversation reflection.** The reflection branch (see `skill-authoring.md`) is extended to include wiki updates:
+
+```
+**Wiki**: Did this conversation establish or substantially update knowledge about
+a person, project, concept, or decision that would benefit from a wiki page?
+If so, create or update the relevant page. Only write pages for knowledge that
+is structured, reusable, and likely to be referenced again.
+```
+
+**3. Ingest.** When files are dropped into `ingest/`, they are chunked and fed into the memory graph as today. When an ingest batch completes, it emits a working memory event. On its next wake, the autonomy channel checks what was recently ingested and considers whether any of it warrants a wiki page — a reference document, a spec, a decision record, a README. If so, it reads the relevant memories extracted from the ingest and synthesises a wiki page from them.
+
+Structured documents are the best candidates: markdown files with clear headings, PDFs that read like reference material, anything that looks like it was written to be read as a whole rather than searched by fragment. The autonomy channel uses judgement — not every ingested file needs a wiki page.
+
+**4. Memory escalation in the autonomy loop.** Memories accumulate fast — a conversation can produce a dozen facts about a topic. A wiki page needs time and attention to get right. The autonomy loop bridges these two speeds.
+
+On each wake, the autonomy channel looks for memory clusters: groups of related memories around the same entity, concept, or decision that have no corresponding wiki page. When it finds one, it synthesises the cluster into a wiki page — reading all the relevant memories, reasoning about what the stable long-form version should say, and calling `wiki_create`. When a page already exists, it checks whether accumulated memories since the last edit are substantial enough to warrant an update.
+
+This is "promotion" — memories are the raw signal, wiki pages are the settled knowledge. The autonomy loop decides when enough has accumulated to be worth writing up.
+
+Instruction in the autonomy channel system prompt:
+```
+Periodically review recent memories for clusters around a shared topic.
+If you find multiple memories about the same entity, concept, or decision
+with no corresponding wiki page, synthesise them into one. If a page exists
+but feels stale relative to what's accumulated since, update it.
+Wiki pages should be earned — only promote when there's enough to say something
+true and useful that will hold up over time.
+```
+
+**4. Autonomy loop maintenance.** On each wake, the autonomy channel also scans the wiki for maintenance needs — it has the context to do this meaningfully:
+- Pages not updated in > `wiki_stale_days` with substantial new memories accumulated — update them
+- Broken `wiki:` links and `related` references — fix in place (it can reason about what the correct target should be)
+- Contradictions between wiki content and memory graph — surface as a working memory observation or resolve directly
+
+The actual cortex maintenance pass (`memory/maintenance.rs`) is a pure algorithmic background process: importance decay, low-importance pruning, and near-duplicate memory merging by embedding similarity. It has no wiki awareness and no LLM reasoning — it operates entirely on the memory graph.
+
+---
+
+## Links and the Page Graph
+
+### Link Syntax
+
+Standard markdown links with a `wiki:` URI scheme:
+
+```markdown
+[display text](wiki:slug)
+```
+
+Examples in prose:
+```markdown
+The decision to use [SQLite over Postgres](wiki:sqlite-choice) came down to
+the single-binary constraint. See also the [auth migration pattern](wiki:auth-pattern)
+for how this affects our approach.
+```
+
+This is standard markdown — every model writes it naturally. The `wiki:` scheme is the only signal needed to distinguish wiki links from external URLs. No double-bracket conventions, no special syntax to forget.
+
+### In the UI
+
+The wiki renderer detects `[text](wiki:slug)` links and renders them as clickable internal navigation to `/wiki/[slug]`. Resolved links look like standard inline links. Broken links (slug not found) render in a distinct style — muted colour or strikethrough — so authors notice them immediately.
+
+Clicking a link navigates to that wiki page within the same Wiki view. Back navigation works as expected.
+
+### In the Agent
+
+The agent does not click links, but `wiki_read` resolves them. The response includes a `links` field — all slugs referenced inline, resolved to their current titles — without fetching full page content. The agent sees what's connected and decides what to pull.
+
+```json
+{
+  "slug": "auth-rewrite",
+  "title": "Auth Rewrite",
+  "content": "...",
+  "related": ["v2-launch", "sqlite-choice"],
+  "links": [
+    { "slug": "jamie-pine", "title": "Jamie Pine" },
+    { "slug": "clerk", "title": "Clerk" },
+    { "slug": "auth-pattern", "title": "Auth Migration Pattern" }
+  ],
+  "version": 4
+}
+```
+
+**Worker briefing** follows this graph one level deep — reads the page, fetches any linked pages automatically. One hop, not recursive.
+
+### Two Edge Types
+
+- **`related`** (frontmatter) — declared relationships. Coarse-grained, set at create/edit time.
+- **`[text](wiki:slug)` inline links** — semantic connections within prose. Fine-grained, emerge naturally from writing.
+
+Both are traversable. The cortex lint pass validates all `wiki:` links on each maintenance pass and fixes broken ones when a page is renamed or archived — updating all pages that linked to it.
+
+---
+
+## Writing Guide
+
+Wiki pages are written to be useful, not impressive. The agent's system prompt includes the following guidance whenever wiki tools are in scope:
+
+```
+## Wiki Writing Guide
+
+A wiki page should be true, stable, and useful to someone — human or agent —
+who knows nothing about the current conversation.
+
+**Structure**
+- Lead with what the page is about in one sentence
+- Use ## headings to organise sections. Keep them short and factual.
+- Use bullet points for lists of facts. Use prose for reasoning and context.
+- Link related pages inline using [display text](wiki:slug).
+  Don't over-link — only where the connection is genuinely useful to follow.
+  First mention of a notable entity on a page should be linked. Subsequent
+  mentions don't need to be.
+
+**Tone**
+- Factual and direct. No hedging, no filler.
+- Write in the present tense where possible ("The API uses OAuth 2.0",
+  not "The API was updated to use OAuth 2.0 in January").
+- No speculation. If something is uncertain, say so explicitly.
+
+**When to create vs update**
+- Create a new page when a topic is substantial enough to stand alone.
+- Update an existing page rather than creating a near-duplicate.
+- Read the existing page before editing it. Preserve what's still true.
+- Write an edit_summary describing what changed and why.
+
+**What not to write**
+- Don't transcribe conversation. Synthesise.
+- Don't duplicate what's in the memory graph. Wiki pages are for
+  structured knowledge that benefits from prose and context.
+- Don't write pages for things that are likely to change tomorrow.
+  Wiki pages should earn their place.
+```
+
+---
+
+## Agent Access
+
+Agents do not get all wiki pages injected into every conversation. The agent knows what exists; it fetches what it needs.
+
+**Index in bulletin.** The memory bulletin includes a compact wiki index: page titles and types only, no content. The agent sees what pages exist and can fetch any of them with `wiki_read`.
+
+```
+## Wiki (14 pages)
+Projects: v2-launch, auth-rewrite, dashboard-redesign
+Entities: jamie-pine, spacebot, spacedrive, anthropic-api
+Concepts: component-conventions, auth-pattern, deploy-process
+Decisions: sqlite-choice, model-routing, tailwind-migration
+Reference: deployment-checklist, api-rate-limits
+```
+
+**Worker briefing.** `WorkerContextMode::Briefed` pulls relevant wiki pages via FTS against the task description. A worker briefed on an auth task gets the auth-rewrite project page and the auth-pattern concept page injected alongside memory recall.
+
+---
+
+## User Access
+
+Wiki is a top-level item in the sidebar alongside Dashboard, Tasks, and Workbench — not nested under any agent. It belongs at the top level because it's instance-wide. Users can:
+- Browse by page type
+- Read any page with full rendered markdown
+- Edit any page directly (creates a version with `author_type: user`)
+- Restore any prior version
+- See full version history per page with diffs
+
+User edits are respected — the cortex lint pass does not overwrite user-authored content without explicit re-synthesis instruction.
+
+---
+
+## Relationship to Memory Graph
+
+| | Memory Graph | Wiki |
+|--|------------|------|
+| **Scope** | Per-agent | Instance-wide |
+| **Unit** | Atomic typed fact | Full page |
+| **Retrieval** | Vector + FTS + RRF | Title lookup + FTS |
+| **Volatility** | Frequently updated | Relatively stable |
+| **Versioning** | None (replace) | Full history |
+| **Primary reader** | Agent (fast retrieval) | Agent + all humans |
+
+The two complement each other. A preference in the memory graph and a section on a wiki entity page may express the same knowledge at different granularities. In conflicts, the more recently updated record is the signal — the agent can reconcile via a lint pass or a branch.
+
+---
+
+## Configuration
+
+```toml
+[wiki]
+enabled = true
+wiki_stale_days = 30          # Flag pages not updated in this many days
+max_pages = 1000              # Soft cap — lint warns above this
+```
+
+---
+
+## Implementation
+
+**Phase 1 — Core**
+- `wiki_pages` + `wiki_page_versions` migrations (global database)
+- `wiki_create`, `wiki_edit`, `wiki_read`, `wiki_search`, `wiki_list`, `wiki_history` tools
+- Tolerant matching in `wiki_edit` (multi-pass fallback)
+- `wiki:` link parsing in `wiki_read` response
+- Branch tool registration: add `file_read`, `wiki_read`, `wiki_write` to branch toolset
+- Cortex + autonomy channel tool registration
+- `wiki_write: bool` field on `WorkerContextMode` (default: `false`) — enables wiki write tools on a per-spawn basis
+- Wiki index block in bulletin template
+- Writing guide in branch system prompt when wiki tools are in scope
+- API endpoints: CRUD + version history + restore
+
+**Phase 2 — Integration**
+- Post-conversation reflection extended to cover wiki updates
+- Autonomy loop: memory cluster detection → wiki promotion
+- Ingest: working memory event on batch complete; autonomy channel checks for structured docs worth synthesising into wiki pages
+- Worker briefing (`WorkerHistoryMode::Briefed`) pulls relevant wiki pages via FTS + one-hop link traversal
+- Autonomy loop wiki maintenance: stale page updates, broken `wiki:` link repair, contradiction surfacing
+
+**Phase 3 — UI**
+- Wiki tab: browse by type, read with rendered links, edit
+- Version history viewer with diffs
+- Version restore
+
+---
+
+## Non-Goals
+
+- **No cross-instance wiki federation.** One wiki per instance.
+- **No real-time collaborative editing.** Last write wins. Version history covers conflicts.
+- **No structured schema enforcement** on page content. Format guidance lives in the agent's system prompt.
+- **No batch wiki extraction from ingest.** Ingest feeds the memory graph. The autonomy loop decides whether ingested material warrants a wiki page — it is not automatic or per-file.
+- **Workers do not write wiki pages.** Workers surface findings via task comments. Branches and the autonomy channel decide what's worth persisting to the wiki.
diff --git a/docs/design-docs/worker-briefing.md b/docs/design-docs/worker-briefing.md
new file mode 100644
index 000000000..a98828daa
--- /dev/null
+++ b/docs/design-docs/worker-briefing.md
@@ -0,0 +1,245 @@
+# Worker Briefing
+
+Workers are context-poor by default — they get the task description, filesystem context, and tool definitions. Nothing else. A worker continuing a multi-day refactor has the same starting context as one checking a file.
+
+This doc defines worker briefing: on-demand context enrichment controlled per spawn via `WorkerContextMode`. Workers always have memory tools (`memory_recall`, `memory_save`, `memory_delete`) — briefing is about what gets **injected into the system prompt** before the worker starts.
+
+---
+
+## What Already Exists
+
+`WorkerContextMode` is a struct on `ChannelState` today:
+
+```rust
+pub struct WorkerContextMode {
+    pub history: WorkerHistoryMode,  // None | Summary | Recent(n) | Full
+    pub memory: WorkerMemoryMode,    // None | Ambient | Tools | Full
+}
+```
+
+Both default to `None` — workers get no context. The memory variants are:
+- `Ambient` — injects knowledge synthesis + working memory into the system prompt (read-only)
+- `Tools` — ambient + `memory_recall` tool
+- `Full` — ambient + full memory tools (recall, save, delete)
+
+The history variants let conversation messages be passed to the worker.
+
+**Two problems with this:**
+
+First, it's a **static channel setting** — read from `ChannelState.worker_context_settings` which is set from conversation settings at channel init. The agent has no per-spawn control. Every worker from a channel gets identical context regardless of what it's doing.
+
+Second, the design is over-engineered for what's actually needed. `WorkerHistoryMode` is the wrong primitive — if a worker needs conversation context, the channel should branch first, reason about it, and write a self-contained task description. Passing raw history to a worker is context dumping with no framework to interpret it. `WorkerMemoryMode::Tools` is confusingly named — sounds like execution tools (shell, file, browser), not memory tools. And the four-variant memory enum collapses to a single question once memory tools are always on: does the worker get ambient context injected or not?
+
+---
+
+## `WorkerContextMode` — Redesigned
+
+A flat enum set by the agent per `spawn_worker` call. Replaces the struct (which is dropped along with `WorkerHistoryMode` and `WorkerMemoryMode`).
+
+```rust
+pub enum WorkerContextMode {
+    /// No ambient context. Worker sees only the task description.
+    /// For self-contained one-shot work: run this command, check this file.
+    None,
+
+    /// Knowledge synthesis + working memory injected.
+    /// Worker knows what the agent knows and what's been happening.
+    /// Good default for most tasks.
+    Ambient,
+
+    /// Ambient + targeted recall synthesis scoped to this task.
+    /// A curated briefing block is generated before the worker starts.
+    /// For complex ongoing work where prior context matters.
+    Briefed,
+}
+```
+
+**Default: `None`.** The agent explicitly opts in. The channel system prompt gets guidance on when to use each level.
+
+**When to use each:**
+
+`None` — self-contained tasks where the task description is fully sufficient:
+- "Run `cargo test` and report results"
+- "Check the contents of config.toml"
+- "Fetch this URL and return the response"
+
+`Ambient` — tasks that benefit from knowing the agent's current state:
+- "Fix the failing CI build"
+- "Add the new endpoint to the API"
+- "Write a summary of the changes in this PR"
+
+`Briefed` — tasks that depend on prior decisions, patterns, or ongoing work:
+- "Continue the auth migration — pick up from where the last worker left off"
+- "Fix the flaky test in the payments module"
+- "Write a changelog entry for the v2 release in Jamie's voice"
+- "Review the PR against our established patterns"
+
+---
+
+## Memory Tools
+
+Workers always have `memory_recall`, `memory_save`, and `memory_delete`. No setting controls this. Workers are trusted processes — they already have shell and file access. Memory tools are strictly less dangerous and strictly more useful. A worker that finds something worth remembering while doing a task should just save it.
+
+---
+
+## The Briefing Pipeline
+
+When `WorkerContextMode::Briefed`, before `Worker::new()` is called, `WorkerBriefing::prepare()` runs:
+
+### Step 1: Targeted Memory Recall
+
+Semantic search against the full memory graph using the task description as the query. Same hybrid search (vector + FTS + RRF) that branches use — run programmatically, not through the LLM.
+
+- Query: task description
+- Limit: 12 results
+- Exclude `Observation` type (too low signal)
+- Boost `Decision` and `Preference` types
+- Recency bias: memories accessed in last 7 days get a retrieval boost
+
+### Step 2: Recent Relevant Events
+
+Query the working memory event log for events that overlap with the task:
+- Pull last 48 hours of events
+- Filter by cosine similarity to task description (threshold: 0.6)
+- Always include `WorkerCompleted` and `Decision` events within last 7 days
+- Cap at 8 events
+
+### Step 3: LLM Synthesis
+
+A small, fast LLM call synthesizes steps 1–2 into a `## Worker Briefing` block (150–300 words):
+
+```
+A worker is about to execute the following task:
+{task}
+
+Here are potentially relevant memories and recent events:
+{recalled_memories}
+{recent_events}
+
+Write a concise briefing covering:
+- What the agent has already decided or established about this area
+- Relevant preferences or patterns that should shape the work
+- What prior workers have done on related tasks (if any)
+- Any constraints or context the worker should know going in
+
+Be specific and direct. Omit anything not relevant to this task.
+If nothing is relevant, output: NO_BRIEFING
+```
+
+If `NO_BRIEFING` is returned, the block is omitted and the worker spawns with ambient context only. No noise injection.
+
+Model: fast model (same as cortex synthesis).
+
+### Step 4: Injection
+
+Appended to the worker system prompt after all other context:
+
+```
+[... worker system prompt ...]
+[... knowledge synthesis ...]
+[... working memory ...]
+
+## Worker Briefing
+
+{synthesized briefing text}
+```
+
+The worker's first message remains the task description unchanged. Briefing is context, not instruction.
+
+---
+
+## Latency
+
+| Step | Latency |
+|---|---|
+| Memory recall | ~50ms |
+| Event log query + similarity filter | ~30ms |
+| LLM synthesis | ~800ms–1.5s |
+| Total | ~1–2s |
+
+Acceptable for tasks where the worker will run for tens of seconds to minutes. For task channels (spawned by the cortex for autonomous task execution), `Briefed` runs unconditionally — every autonomous task is by definition complex.
+
+---
+
+## System Prompt Changes
+
+Two prompts need updating.
+
+### `spawn_worker` tool description
+
+Currently: *"Spawn an independent worker process. The worker only sees the task description you provide — no conversation history."*
+
+Needs a `context` parameter added to the tool schema and its description updated to explain when to use each level:
+
+```
+Spawn an independent worker process.
+
+**context** — how much agent context the worker receives:
+- `"none"` (default) — worker sees only the task. Use for self-contained
+  one-shot work: run a command, read a file, fetch a URL.
+- `"ambient"` — worker receives the agent's knowledge synthesis and recent
+  working memory. Use when the worker needs to know the agent's current state
+  but not specific prior history.
+- `"briefed"` — ambient plus a targeted briefing synthesized from memory and
+  recent events relevant to this specific task. Use for complex or ongoing
+  work: continuing a refactor, fixing a recurring issue, producing output in
+  the agent's voice, working within established patterns.
+```
+
+### Channel system prompt (`channel.md.j2`)
+
+The delegation section currently says workers only know what the task description tells them. Add guidance alongside the existing worker spawning instructions:
+
+```
+When spawning a worker, set context based on what the worker needs:
+- Most tasks: omit context (defaults to none) — write a self-contained task description
+- Worker needs to know the agent's current state: context "ambient"
+- Worker is continuing prior work or needs established patterns: context "briefed"
+
+Do not branch just to enrich worker context — set context "briefed" instead.
+```
+
+The last line matters: currently agents branch before spawning workers specifically to gather context for the task description. With `briefed`, that branch is unnecessary for context enrichment (though branching for other reasons — memory saves, decisions — is unchanged).
+
+---
+
+## What This Doesn't Do
+
+**It doesn't replace good task descriptions.** The channel should still write specific, contextual task descriptions. Briefing adds what can't go in the description — prior history, established patterns, previous related work.
+
+**It doesn't inject conversation history.** `WorkerHistoryMode` is dropped. If conversation context matters before spawning a worker, branch first, reason about it, write a self-contained task description. Workers don't need raw conversation history.
+
+---
+
+## Implementation
+
+**Location:** `src/agent/worker_briefing.rs` — `WorkerBriefing::prepare()`. Called from `spawn_worker_inner()` in `channel_dispatch.rs` and from the task channel context builder.
+
+**Dependencies:** memory store, working memory store, LLM manager, embedding model.
+
+**Error handling:** Briefing failure degrades silently to `Ambient` — never block worker spawn.
+
+**Observability:** Emit a low-importance `System` working memory event when a briefing runs.
+
+---
+
+## Implementation Phases
+
+**Phase 1 — `WorkerContextMode` enum + ambient**
+- Replace existing `WorkerContextMode` struct with flat enum (`None`, `Ambient`, `Briefed`)
+- Drop `WorkerHistoryMode` and `WorkerMemoryMode`
+- Wire `WorkerContextMode` as a per-spawn arg on `SpawnWorkerArgs` (not a channel setting)
+- Implement `Ambient`: inject knowledge synthesis + working memory
+- Always give workers memory tools regardless of mode
+- Update `spawn_worker` tool description with guidance on when to use each level
+
+**Phase 2 — Targeted recall (no LLM)**
+- `WorkerBriefing::prepare()` steps 1–2: memory recall + event query
+- Inject as raw blocks: `## Relevant Knowledge`, `## Related Activity`
+- Validate recall quality before adding synthesis overhead
+
+**Phase 3 — LLM synthesis**
+- Add step 3: fast LLM synthesis call
+- Synthesized `## Worker Briefing` block replaces raw blocks
+- `NO_BRIEFING` handling
+- Working memory event emission
diff --git a/interface/bun.lock b/interface/bun.lock
index 4fc28204e..2766a0283 100644
--- a/interface/bun.lock
+++ b/interface/bun.lock
@@ -1,6 +1,6 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
+  "configVersion": 1,
   "workspaces": {
     "": {
       "name": "spacebot-interface",
@@ -19,20 +19,14 @@
         "@fortawesome/free-solid-svg-icons": "^7.2.0",
         "@fortawesome/react-fontawesome": "^3.0.0",
         "@hookform/resolvers": "^5.2.2",
-        "@hugeicons/core-free-icons": "^3.1.1",
-        "@hugeicons/react": "^1.1.5",
         "@lobehub/icons": "^4.6.0",
-        "@radix-ui/react-checkbox": "^1.3.3",
-        "@radix-ui/react-dialog": "^1.1.15",
-        "@radix-ui/react-dropdown-menu": "^2.1.16",
-        "@radix-ui/react-popover": "^1.1.15",
-        "@radix-ui/react-radio-group": "^1.3.8",
-        "@radix-ui/react-select": "^2.2.6",
-        "@radix-ui/react-slider": "^1.3.6",
-        "@radix-ui/react-switch": "^1.2.6",
-        "@radix-ui/react-tabs": "^1.1.13",
-        "@radix-ui/react-tooltip": "^1.2.8",
+        "@phosphor-icons/react": "^2.1.10",
         "@react-sigma/core": "^5.0.6",
+        "@spacedrive/ai": "^0.2.3",
+        "@spacedrive/explorer": "^0.2.3",
+        "@spacedrive/forms": "^0.2.3",
+        "@spacedrive/primitives": "^0.2.3",
+        "@spacedrive/tokens": "^0.2.3",
         "@tanstack/react-query": "^5.62.0",
         "@tanstack/react-query-devtools": "^5.91.3",
         "@tanstack/react-router": "^1.159.5",
@@ -61,15 +55,12 @@
         "zod": "^4.3.6",
       },
       "devDependencies": {
+        "@tailwindcss/vite": "^4.2.2",
         "@types/react": "^19.0.0",
         "@types/react-dom": "^19.0.0",
         "@vitejs/plugin-react": "^4.3.4",
-        "autoprefixer": "^10.4.18",
         "openapi-typescript": "^7",
-        "postcss": "^8.4.36",
-        "sass": "^1.72.0",
-        "tailwindcss": "^3.4.1",
-        "tailwindcss-animate": "^1.0.7",
+        "tailwindcss": "^4.2.2",
         "typescript": "^5.6.2",
         "vite": "^6.0.0",
       },
@@ -80,17 +71,15 @@
     },
   },
   "packages": {
-    "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, ""],
-
     "@ant-design/colors": ["@ant-design/colors@8.0.1", "", { "dependencies": { "@ant-design/fast-color": "^3.0.0" } }, "sha512-foPVl0+SWIslGUtD/xBr1p9U4AKzPhNYEseXYRRo5QSzGACYZrQbe11AYJbYfAWnWSpGBx6JjBmSeugUsD9vqQ=="],
 
-    "@ant-design/cssinjs": ["@ant-design/cssinjs@2.1.0", "", { "dependencies": { "@babel/runtime": "^7.11.1", "@emotion/hash": "^0.8.0", "@emotion/unitless": "^0.7.5", "@rc-component/util": "^1.4.0", "clsx": "^2.1.1", "csstype": "^3.1.3", "stylis": "^4.3.4" }, "peerDependencies": { "react": ">=16.0.0", "react-dom": ">=16.0.0" } }, "sha512-eZFrPCnrYrF3XtL7qA4L75P0qA3TtZta8H3Yggy7UYFh8gZgu5bSMNF+v4UVCzGxzYmx8ZvPdgOce0BJ6PsW9g=="],
+    "@ant-design/cssinjs": ["@ant-design/cssinjs@2.1.2", "", { "dependencies": { "@babel/runtime": "^7.11.1", "@emotion/hash": "^0.8.0", "@emotion/unitless": "^0.7.5", "@rc-component/util": "^1.4.0", "clsx": "^2.1.1", "csstype": "^3.1.3", "stylis": "^4.3.4" }, "peerDependencies": { "react": ">=16.0.0", "react-dom": ">=16.0.0" } }, "sha512-2Hy8BnCEH31xPeSLbhhB2ctCPXE2ZnASdi+KbSeS79BNbUhL9hAEe20SkUk+BR8aKTmqb6+FKFruk7w8z0VoRQ=="],
 
-    "@ant-design/cssinjs-utils": ["@ant-design/cssinjs-utils@2.1.1", "", { "dependencies": { "@ant-design/cssinjs": "^2.1.0", "@babel/runtime": "^7.23.2", "@rc-component/util": "^1.4.0" }, "peerDependencies": { "react": ">=18", "react-dom": ">=18" } }, "sha512-RKxkj5pGFB+FkPJ5NGhoX3DK3xsv0pMltha7Ei1AnY3tILeq38L7tuhaWDPQI/5nlPxOog44wvqpNyyGcUsNMg=="],
+    "@ant-design/cssinjs-utils": ["@ant-design/cssinjs-utils@2.1.2", "", { "dependencies": { "@ant-design/cssinjs": "^2.1.2", "@babel/runtime": "^7.23.2", "@rc-component/util": "^1.4.0" }, "peerDependencies": { "react": ">=18", "react-dom": ">=18" } }, "sha512-5fTHQ158jJJ5dC/ECeyIdZUzKxE/mpEMRZxthyG1sw/AKRHKgJBg00Yi6ACVXgycdje7KahRNvNET/uBccwCnA=="],
 
     "@ant-design/fast-color": ["@ant-design/fast-color@3.0.1", "", {}, "sha512-esKJegpW4nckh0o6kV3Tkb7NPIZYbPnnFxmQDUmL08ukXZAvV85TZBr70eGuke/CIArLaP6aw8lt9KILjnWuOw=="],
 
-    "@ant-design/icons": ["@ant-design/icons@6.1.0", "", { "dependencies": { "@ant-design/colors": "^8.0.0", "@ant-design/icons-svg": "^4.4.0", "@rc-component/util": "^1.3.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.0.0", "react-dom": ">=16.0.0" } }, "sha512-KrWMu1fIg3w/1F2zfn+JlfNDU8dDqILfA5Tg85iqs1lf8ooyGlbkA+TkwfOKKgqpUmAiRY1PTFpuOU2DAIgSUg=="],
+    "@ant-design/icons": ["@ant-design/icons@6.1.1", "", { "dependencies": { "@ant-design/colors": "^8.0.0", "@ant-design/icons-svg": "^4.4.0", "@rc-component/util": "^1.3.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.0.0", "react-dom": ">=16.0.0" } }, "sha512-AMT4N2y++TZETNHiM77fs4a0uPVCJGuL5MTonk13Pvv7UN7sID1cNEZOc1qNqx6zLKAOilTEFAdAoAFKa0U//Q=="],
 
     "@ant-design/icons-svg": ["@ant-design/icons-svg@4.4.2", "", {}, "sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA=="],
 
@@ -98,45 +87,45 @@
 
     "@antfu/install-pkg": ["@antfu/install-pkg@1.1.0", "", { "dependencies": { "package-manager-detector": "^1.3.0", "tinyexec": "^1.0.1" } }, "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ=="],
 
-    "@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, ""],
+    "@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
 
-    "@babel/compat-data": ["@babel/compat-data@7.29.0", "", {}, ""],
+    "@babel/compat-data": ["@babel/compat-data@7.29.0", "", {}, "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg=="],
 
-    "@babel/core": ["@babel/core@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-compilation-targets": "^7.28.6", "@babel/helper-module-transforms": "^7.28.6", "@babel/helpers": "^7.28.6", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/traverse": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, ""],
+    "@babel/core": ["@babel/core@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-compilation-targets": "^7.28.6", "@babel/helper-module-transforms": "^7.28.6", "@babel/helpers": "^7.28.6", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/traverse": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA=="],
 
-    "@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, ""],
+    "@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
 
-    "@babel/helper-compilation-targets": ["@babel/helper-compilation-targets@7.28.6", "", { "dependencies": { "@babel/compat-data": "^7.28.6", "@babel/helper-validator-option": "^7.27.1", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" } }, ""],
+    "@babel/helper-compilation-targets": ["@babel/helper-compilation-targets@7.28.6", "", { "dependencies": { "@babel/compat-data": "^7.28.6", "@babel/helper-validator-option": "^7.27.1", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" } }, "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA=="],
 
-    "@babel/helper-globals": ["@babel/helper-globals@7.28.0", "", {}, ""],
+    "@babel/helper-globals": ["@babel/helper-globals@7.28.0", "", {}, "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw=="],
 
-    "@babel/helper-module-imports": ["@babel/helper-module-imports@7.28.6", "", { "dependencies": { "@babel/traverse": "^7.28.6", "@babel/types": "^7.28.6" } }, ""],
+    "@babel/helper-module-imports": ["@babel/helper-module-imports@7.28.6", "", { "dependencies": { "@babel/traverse": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw=="],
 
-    "@babel/helper-module-transforms": ["@babel/helper-module-transforms@7.28.6", "", { "dependencies": { "@babel/helper-module-imports": "^7.28.6", "@babel/helper-validator-identifier": "^7.28.5", "@babel/traverse": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, ""],
+    "@babel/helper-module-transforms": ["@babel/helper-module-transforms@7.28.6", "", { "dependencies": { "@babel/helper-module-imports": "^7.28.6", "@babel/helper-validator-identifier": "^7.28.5", "@babel/traverse": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA=="],
 
-    "@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, ""],
+    "@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
 
-    "@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, ""],
+    "@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
 
-    "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, ""],
+    "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
 
-    "@babel/helper-validator-option": ["@babel/helper-validator-option@7.27.1", "", {}, ""],
+    "@babel/helper-validator-option": ["@babel/helper-validator-option@7.27.1", "", {}, "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg=="],
 
-    "@babel/helpers": ["@babel/helpers@7.28.6", "", { "dependencies": { "@babel/template": "^7.28.6", "@babel/types": "^7.28.6" } }, ""],
+    "@babel/helpers": ["@babel/helpers@7.29.2", "", { "dependencies": { "@babel/template": "^7.28.6", "@babel/types": "^7.29.0" } }, "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw=="],
 
-    "@babel/parser": ["@babel/parser@7.29.0", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": { "parser": "bin/babel-parser.js" } }, ""],
+    "@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
 
-    "@babel/plugin-transform-react-jsx-self": ["@babel/plugin-transform-react-jsx-self@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, ""],
+    "@babel/plugin-transform-react-jsx-self": ["@babel/plugin-transform-react-jsx-self@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw=="],
 
-    "@babel/plugin-transform-react-jsx-source": ["@babel/plugin-transform-react-jsx-source@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, ""],
+    "@babel/plugin-transform-react-jsx-source": ["@babel/plugin-transform-react-jsx-source@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw=="],
 
-    "@babel/runtime": ["@babel/runtime@7.28.6", "", {}, "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA=="],
+    "@babel/runtime": ["@babel/runtime@7.29.2", "", {}, "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g=="],
 
-    "@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, ""],
+    "@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
 
-    "@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, ""],
+    "@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
 
-    "@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, ""],
+    "@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
 
     "@base-ui/react": ["@base-ui/react@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.28.4", "@base-ui/utils": "0.2.3", "@floating-ui/react-dom": "^2.1.6", "@floating-ui/utils": "^0.2.10", "reselect": "^5.1.1", "tabbable": "^6.3.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-4USBWz++DUSLTuIYpbYkSgy1F9ZmNG9S/lXvlUN6qMK0P0RlW+6eQmDUB4DgZ7HVvtXl4pvi4z5J2fv6Z3+9hg=="],
 
@@ -144,33 +133,33 @@
 
     "@braintree/sanitize-url": ["@braintree/sanitize-url@7.1.2", "", {}, "sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA=="],
 
-    "@chevrotain/cst-dts-gen": ["@chevrotain/cst-dts-gen@11.0.3", "", { "dependencies": { "@chevrotain/gast": "11.0.3", "@chevrotain/types": "11.0.3", "lodash-es": "4.17.21" } }, "sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ=="],
+    "@chevrotain/cst-dts-gen": ["@chevrotain/cst-dts-gen@12.0.0", "", { "dependencies": { "@chevrotain/gast": "12.0.0", "@chevrotain/types": "12.0.0" } }, "sha512-fSL4KXjTl7cDgf0B5Rip9Q05BOrYvkJV/RrBTE/bKDN096E4hN/ySpcBK5B24T76dlQ2i32Zc3PAE27jFnFrKg=="],
 
-    "@chevrotain/gast": ["@chevrotain/gast@11.0.3", "", { "dependencies": { "@chevrotain/types": "11.0.3", "lodash-es": "4.17.21" } }, "sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q=="],
+    "@chevrotain/gast": ["@chevrotain/gast@12.0.0", "", { "dependencies": { "@chevrotain/types": "12.0.0" } }, "sha512-1ne/m3XsIT8aEdrvT33so0GUC+wkctpUPK6zU9IlOyJLUbR0rg4G7ZiApiJbggpgPir9ERy3FRjT6T7lpgetnQ=="],
 
-    "@chevrotain/regexp-to-ast": ["@chevrotain/regexp-to-ast@11.0.3", "", {}, "sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA=="],
+    "@chevrotain/regexp-to-ast": ["@chevrotain/regexp-to-ast@12.0.0", "", {}, "sha512-p+EW9MaJwgaHguhoqwOtx/FwuGr+DnNn857sXWOi/mClXIkPGl3rn7hGNWvo31HA3vyeQxjqe+H36yZJwYU8cA=="],
 
-    "@chevrotain/types": ["@chevrotain/types@11.0.3", "", {}, "sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ=="],
+    "@chevrotain/types": ["@chevrotain/types@12.0.0", "", {}, "sha512-S+04vjFQKeuYw0/eW3U52LkAHQsB1ASxsPGsLPUyQgrZ2iNNibQrsidruDzjEX2JYfespXMG0eZmXlhA6z7nWA=="],
 
-    "@chevrotain/utils": ["@chevrotain/utils@11.0.3", "", {}, "sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ=="],
+    "@chevrotain/utils": ["@chevrotain/utils@12.0.0", "", {}, "sha512-lB59uJoaGIfOOL9knQqQRfhl9g7x8/wqFkp13zTdkRu1huG9kg6IJs1O8hqj9rs6h7orGxHJUKb+mX3rPbWGhA=="],
 
-    "@codemirror/autocomplete": ["@codemirror/autocomplete@6.20.0", "", { "dependencies": { "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.17.0", "@lezer/common": "^1.0.0" } }, "sha512-bOwvTOIJcG5FVo5gUUupiwYh8MioPLQ4UcqbcRf7UQ98X90tCa9E1kZ3Z7tqwpZxYyOvh1YTYbmZE9RTfTp5hg=="],
+    "@codemirror/autocomplete": ["@codemirror/autocomplete@6.20.1", "", { "dependencies": { "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.17.0", "@lezer/common": "^1.0.0" } }, "sha512-1cvg3Vz1dSSToCNlJfRA2WSI4ht3K+WplO0UMOgmUYPivCyy2oueZY6Lx7M9wThm7SDUBViRmuT+OG/i8+ON9A=="],
 
-    "@codemirror/commands": ["@codemirror/commands@6.10.2", "", { "dependencies": { "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.4.0", "@codemirror/view": "^6.27.0", "@lezer/common": "^1.1.0" } }, "sha512-vvX1fsih9HledO1c9zdotZYUZnE4xV0m6i3m25s5DIfXofuprk6cRcLUZvSk3CASUbwjQX21tOGbkY2BH8TpnQ=="],
+    "@codemirror/commands": ["@codemirror/commands@6.10.3", "", { "dependencies": { "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.6.0", "@codemirror/view": "^6.27.0", "@lezer/common": "^1.1.0" } }, "sha512-JFRiqhKu+bvSkDLI+rUhJwSxQxYb759W5GBezE8Uc8mHLqC9aV/9aTC7yJSqCtB3F00pylrLCwnyS91Ap5ej4Q=="],
 
-    "@codemirror/language": ["@codemirror/language@6.12.1", "", { "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.23.0", "@lezer/common": "^1.5.0", "@lezer/highlight": "^1.0.0", "@lezer/lr": "^1.0.0", "style-mod": "^4.0.0" } }, "sha512-Fa6xkSiuGKc8XC8Cn96T+TQHYj4ZZ7RdFmXA3i9xe/3hLHfwPZdM+dqfX0Cp0zQklBKhVD8Yzc8LS45rkqcwpQ=="],
+    "@codemirror/language": ["@codemirror/language@6.12.3", "", { "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.23.0", "@lezer/common": "^1.5.0", "@lezer/highlight": "^1.0.0", "@lezer/lr": "^1.0.0", "style-mod": "^4.0.0" } }, "sha512-QwCZW6Tt1siP37Jet9Tb02Zs81TQt6qQrZR2H+eGMcFsL1zMrk2/b9CLC7/9ieP1fjIUMgviLWMmgiHoJrj+ZA=="],
 
     "@codemirror/legacy-modes": ["@codemirror/legacy-modes@6.5.2", "", { "dependencies": { "@codemirror/language": "^6.0.0" } }, "sha512-/jJbwSTazlQEDOQw2FJ8LEEKVS72pU0lx6oM54kGpL8t/NJ2Jda3CZ4pcltiKTdqYSRk3ug1B3pil1gsjA6+8Q=="],
 
-    "@codemirror/lint": ["@codemirror/lint@6.9.4", "", { "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.35.0", "crelt": "^1.0.5" } }, "sha512-ABc9vJ8DEmvOWuH26P3i8FpMWPQkduD9Rvba5iwb6O3hxASgclm3T3krGo8NASXkHCidz6b++LWlzWIUfEPSWw=="],
+    "@codemirror/lint": ["@codemirror/lint@6.9.5", "", { "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.35.0", "crelt": "^1.0.5" } }, "sha512-GElsbU9G7QT9xXhpUg1zWGmftA/7jamh+7+ydKRuT0ORpWS3wOSP0yT1FOlIZa7mIJjpVPipErsyvVqB9cfTFA=="],
 
     "@codemirror/search": ["@codemirror/search@6.6.0", "", { "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.37.0", "crelt": "^1.0.5" } }, "sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw=="],
 
-    "@codemirror/state": ["@codemirror/state@6.5.4", "", { "dependencies": { "@marijn/find-cluster-break": "^1.0.0" } }, "sha512-8y7xqG/hpB53l25CIoit9/ngxdfoG+fx+V3SHBrinnhOtLvKHRyAJJuHzkWrR4YXXLX8eXBsejgAAxHUOdW1yw=="],
+    "@codemirror/state": ["@codemirror/state@6.6.0", "", { "dependencies": { "@marijn/find-cluster-break": "^1.0.0" } }, "sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ=="],
 
     "@codemirror/theme-one-dark": ["@codemirror/theme-one-dark@6.1.3", "", { "dependencies": { "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0", "@lezer/highlight": "^1.0.0" } }, "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA=="],
 
-    "@codemirror/view": ["@codemirror/view@6.39.14", "", { "dependencies": { "@codemirror/state": "^6.5.0", "crelt": "^1.0.6", "style-mod": "^4.1.0", "w3c-keyname": "^2.2.4" } }, "sha512-WJcvgHm/6Q7dvGT0YFv/6PSkoc36QlR0VCESS6x9tGsnF1lWLmmYxOgX3HH6v8fo6AvSLgpcs+H0Olre6MKXlg=="],
+    "@codemirror/view": ["@codemirror/view@6.41.0", "", { "dependencies": { "@codemirror/state": "^6.6.0", "crelt": "^1.0.6", "style-mod": "^4.1.0", "w3c-keyname": "^2.2.4" } }, "sha512-6H/qadXsVuDY219Yljhohglve8xf4B8xJkVOEWfA5uiYKiTFppjqsvsfR5iPA0RbvRBoOyTZpbLIxe9+0UR8xA=="],
 
     "@dnd-kit/accessibility": ["@dnd-kit/accessibility@3.1.1", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw=="],
 
@@ -212,19 +201,69 @@
 
     "@emotion/weak-memoize": ["@emotion/weak-memoize@0.4.0", "", {}, "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg=="],
 
-    "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.25.12", "", { "os": "darwin", "cpu": "arm64" }, ""],
+    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.12", "", { "os": "aix", "cpu": "ppc64" }, "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA=="],
+
+    "@esbuild/android-arm": ["@esbuild/android-arm@0.25.12", "", { "os": "android", "cpu": "arm" }, "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg=="],
+
+    "@esbuild/android-arm64": ["@esbuild/android-arm64@0.25.12", "", { "os": "android", "cpu": "arm64" }, "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg=="],
+
+    "@esbuild/android-x64": ["@esbuild/android-x64@0.25.12", "", { "os": "android", "cpu": "x64" }, "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg=="],
+
+    "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.25.12", "", { "os": "darwin", "cpu": "arm64" }, "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg=="],
+
+    "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.25.12", "", { "os": "darwin", "cpu": "x64" }, "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA=="],
+
+    "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.25.12", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg=="],
+
+    "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.25.12", "", { "os": "freebsd", "cpu": "x64" }, "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ=="],
+
+    "@esbuild/linux-arm": ["@esbuild/linux-arm@0.25.12", "", { "os": "linux", "cpu": "arm" }, "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw=="],
+
+    "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.25.12", "", { "os": "linux", "cpu": "arm64" }, "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ=="],
+
+    "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.25.12", "", { "os": "linux", "cpu": "ia32" }, "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA=="],
+
+    "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.25.12", "", { "os": "linux", "cpu": "none" }, "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng=="],
+
+    "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.25.12", "", { "os": "linux", "cpu": "none" }, "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw=="],
+
+    "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.25.12", "", { "os": "linux", "cpu": "ppc64" }, "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA=="],
+
+    "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.25.12", "", { "os": "linux", "cpu": "none" }, "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w=="],
+
+    "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.25.12", "", { "os": "linux", "cpu": "s390x" }, "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg=="],
+
+    "@esbuild/linux-x64": ["@esbuild/linux-x64@0.25.12", "", { "os": "linux", "cpu": "x64" }, "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw=="],
+
+    "@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.25.12", "", { "os": "none", "cpu": "arm64" }, "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg=="],
+
+    "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.25.12", "", { "os": "none", "cpu": "x64" }, "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ=="],
+
+    "@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.25.12", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A=="],
+
+    "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.25.12", "", { "os": "openbsd", "cpu": "x64" }, "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw=="],
+
+    "@esbuild/openharmony-arm64": ["@esbuild/openharmony-arm64@0.25.12", "", { "os": "none", "cpu": "arm64" }, "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg=="],
+
+    "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.25.12", "", { "os": "sunos", "cpu": "x64" }, "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w=="],
 
-    "@floating-ui/core": ["@floating-ui/core@1.7.4", "", { "dependencies": { "@floating-ui/utils": "^0.2.10" } }, "sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg=="],
+    "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.25.12", "", { "os": "win32", "cpu": "arm64" }, "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg=="],
 
-    "@floating-ui/dom": ["@floating-ui/dom@1.7.5", "", { "dependencies": { "@floating-ui/core": "^1.7.4", "@floating-ui/utils": "^0.2.10" } }, "sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg=="],
+    "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.25.12", "", { "os": "win32", "cpu": "ia32" }, "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ=="],
 
-    "@floating-ui/react": ["@floating-ui/react@0.27.17", "", { "dependencies": { "@floating-ui/react-dom": "^2.1.7", "@floating-ui/utils": "^0.2.10", "tabbable": "^6.0.0" }, "peerDependencies": { "react": ">=17.0.0", "react-dom": ">=17.0.0" } }, "sha512-LGVZKHwmWGg6MRHjLLgsfyaX2y2aCNgnD1zT/E6B+/h+vxg+nIJUqHPAlTzsHDyqdgEpJ1Np5kxWuFEErXzoGg=="],
+    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.12", "", { "os": "win32", "cpu": "x64" }, "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA=="],
 
-    "@floating-ui/react-dom": ["@floating-ui/react-dom@2.1.7", "", { "dependencies": { "@floating-ui/dom": "^1.7.5" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-0tLRojf/1Go2JgEVm+3Frg9A3IW8bJgKgdO0BN5RkF//ufuz2joZM63Npau2ff3J6lUVYgDSNzNkR+aH3IVfjg=="],
+    "@floating-ui/core": ["@floating-ui/core@1.7.5", "", { "dependencies": { "@floating-ui/utils": "^0.2.11" } }, "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ=="],
 
-    "@floating-ui/utils": ["@floating-ui/utils@0.2.10", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],
+    "@floating-ui/dom": ["@floating-ui/dom@1.7.6", "", { "dependencies": { "@floating-ui/core": "^1.7.5", "@floating-ui/utils": "^0.2.11" } }, "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ=="],
 
-    "@fontsource/ibm-plex-sans": ["@fontsource/ibm-plex-sans@5.2.8", "", {}, ""],
+    "@floating-ui/react": ["@floating-ui/react@0.27.19", "", { "dependencies": { "@floating-ui/react-dom": "^2.1.8", "@floating-ui/utils": "^0.2.11", "tabbable": "^6.0.0" }, "peerDependencies": { "react": ">=17.0.0", "react-dom": ">=17.0.0" } }, "sha512-31B8h5mm8YxotlE7/AU/PhNAl8eWxAmjL/v2QOxroDNkTFLk3Uu82u63N3b6TXa4EGJeeZLVcd/9AlNlVqzeog=="],
+
+    "@floating-ui/react-dom": ["@floating-ui/react-dom@2.1.8", "", { "dependencies": { "@floating-ui/dom": "^1.7.6" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A=="],
+
+    "@floating-ui/utils": ["@floating-ui/utils@0.2.11", "", {}, "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg=="],
+
+    "@fontsource/ibm-plex-sans": ["@fontsource/ibm-plex-sans@5.2.8", "", {}, "sha512-eztSXjDhPhcpxNIiGTgMebdLP9qS4rWkysuE1V7c+DjOR0qiezaiDaTwQE7bTnG5HxAY/8M43XKDvs3cYq6ZYQ=="],
 
     "@fortawesome/fontawesome-common-types": ["@fortawesome/fontawesome-common-types@7.2.0", "", {}, "sha512-IpR0bER9FY25p+e7BmFH25MZKEwFHTfRAfhOyJubgiDnoJNsSvJ7nigLraHtp4VOG/cy8D7uiV0dLkHOne5Fhw=="],
 
@@ -234,31 +273,29 @@
 
     "@fortawesome/free-solid-svg-icons": ["@fortawesome/free-solid-svg-icons@7.2.0", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "7.2.0" } }, "sha512-YTVITFGN0/24PxzXrwqCgnyd7njDuzp5ZvaCx5nq/jg55kUYd94Nj8UTchBdBofi/L0nwRfjGOg0E41d2u9T1w=="],
 
-    "@fortawesome/react-fontawesome": ["@fortawesome/react-fontawesome@3.2.0", "", { "peerDependencies": { "@fortawesome/fontawesome-svg-core": "~6 || ~7", "react": "^18.0.0 || ^19.0.0" } }, "sha512-E9Gu1hqd6JussVO26EC4WqRZssXMnQr2ol7ZNWkkFOH8jZUaxDJ9Z9WF9wIVkC+kJGXUdY3tlffpDwEKfgQrQw=="],
+    "@fortawesome/react-fontawesome": ["@fortawesome/react-fontawesome@3.3.0", "", { "peerDependencies": { "@fortawesome/fontawesome-svg-core": "~6 || ~7", "react": "^18.0.0 || ^19.0.0" } }, "sha512-EHmHeTf8WgO29sdY3iX/7ekE3gNUdlc2RW6mm/FzELlHFKfTrA9S4MlyquRR+RRCRCn8+jXfLFpLGB2l7wCWyw=="],
 
     "@giscus/react": ["@giscus/react@3.1.0", "", { "dependencies": { "giscus": "^1.6.0" }, "peerDependencies": { "react": "^16 || ^17 || ^18 || ^19", "react-dom": "^16 || ^17 || ^18 || ^19" } }, "sha512-0TCO2TvL43+oOdyVVGHDItwxD1UMKP2ZYpT6gXmhFOqfAJtZxTzJ9hkn34iAF/b6YzyJ4Um89QIt9z/ajmAEeg=="],
 
-    "@hookform/resolvers": ["@hookform/resolvers@5.2.2", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "react-hook-form": "^7.55.0" } }, "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA=="],
-
-    "@hugeicons/core-free-icons": ["@hugeicons/core-free-icons@3.1.1", "", {}, "sha512-UpS2lUQFi5sKyJSWwM6rO+BnPLvVz1gsyCpPHeZyVuZqi89YH8ksliza4cwaODqKOZyeXmG8juo1ty4QtQofkg=="],
+    "@headlessui/react": ["@headlessui/react@1.7.19", "", { "dependencies": { "@tanstack/react-virtual": "^3.0.0-beta.60", "client-only": "^0.0.1" }, "peerDependencies": { "react": "^16 || ^17 || ^18", "react-dom": "^16 || ^17 || ^18" } }, "sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw=="],
 
-    "@hugeicons/react": ["@hugeicons/react@1.1.5", "", { "peerDependencies": { "react": ">=16.0.0" } }, "sha512-JX/iDz3oO7hWdVqbjwFwRrAjHk8h2vI+mBkNzp4JcXG3t4idoupfjon73nLOA7cr27m0M8hrRC1Q2h6nEBGKVA=="],
+    "@hookform/resolvers": ["@hookform/resolvers@5.2.2", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "react-hook-form": "^7.55.0" } }, "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA=="],
 
     "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],
 
     "@iconify/utils": ["@iconify/utils@3.1.0", "", { "dependencies": { "@antfu/install-pkg": "^1.1.0", "@iconify/types": "^2.0.0", "mlly": "^1.8.0" } }, "sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw=="],
 
-    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, ""],
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
 
-    "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, ""],
+    "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
 
-    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, ""],
+    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
 
-    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, ""],
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
 
-    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, ""],
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
-    "@lezer/common": ["@lezer/common@1.5.1", "", {}, "sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw=="],
+    "@lezer/common": ["@lezer/common@1.5.2", "", {}, "sha512-sxQE460fPZyU3sdc8lafxiPwJHBzZRy/udNFynGQky1SePYBdhkBl1kOagA9uT3pxR8K09bOrmTUqA9wb/PjSQ=="],
 
     "@lezer/highlight": ["@lezer/highlight@1.2.3", "", { "dependencies": { "@lezer/common": "^1.3.0" } }, "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g=="],
 
@@ -272,7 +309,7 @@
 
     "@lobehub/fluent-emoji": ["@lobehub/fluent-emoji@4.1.0", "", { "dependencies": { "@lobehub/emojilib": "^1.0.0", "antd-style": "^4.1.0", "emoji-regex": "^10.6.0", "es-toolkit": "^1.43.0", "lucide-react": "^0.562.0", "url-join": "^5.0.0" }, "peerDependencies": { "react": "^19.0.0", "react-dom": "^19.0.0" } }, "sha512-R1MB2lfUkDvB7XAQdRzY75c1dx/tB7gEvBPaEEMarzKfCJWmXm7rheS6caVzmgwAlq5sfmTbxPL+un99sp//Yw=="],
 
-    "@lobehub/icons": ["@lobehub/icons@4.6.0", "", { "dependencies": { "antd-style": "^4.1.0", "lucide-react": "^0.469.0", "polished": "^4.3.1" }, "peerDependencies": { "@lobehub/ui": "^4.3.3", "antd": "^6.1.1", "react": "^19.0.0", "react-dom": "^19.0.0" } }, "sha512-TuU0837kalurxQfGwfyd6UODwKtPluhvuT8XrgqHo/D0B/ggbYWrLF1pwIYG+p9ccA6oz6HeaEQhmNH2eQl2sw=="],
+    "@lobehub/icons": ["@lobehub/icons@4.12.0", "", { "dependencies": { "antd-style": "^4.1.0", "lucide-react": "^0.469.0", "polished": "^4.3.1" }, "peerDependencies": { "@lobehub/ui": "^4.3.3", "antd": "^6.1.1", "react": "^19.0.0", "react-dom": "^19.0.0" } }, "sha512-DVH7pVzM6wEvua2LXH+Iv10/cLeBbueggMFBHa8IlfQel5u3I6JzuaNXXxj2qJu5QYjUCNL5LTpSWuh4TnuLGw=="],
 
     "@lobehub/ui": ["@lobehub/ui@4.38.4", "", { "dependencies": { "@ant-design/cssinjs": "^2.0.3", "@base-ui/react": "1.0.0", "@dnd-kit/core": "^6.3.1", "@dnd-kit/modifiers": "^9.0.0", "@dnd-kit/sortable": "^10.0.0", "@dnd-kit/utilities": "^3.2.2", "@emoji-mart/data": "^1.2.1", "@emoji-mart/react": "^1.1.1", "@emotion/is-prop-valid": "^1.4.0", "@floating-ui/react": "^0.27.17", "@giscus/react": "^3.1.0", "@mdx-js/mdx": "^3.1.1", "@mdx-js/react": "^3.1.1", "@pierre/diffs": "^1.0.10", "@radix-ui/react-slot": "^1.2.4", "@shikijs/core": "^3.22.0", "@shikijs/transformers": "^3.22.0", "@splinetool/runtime": "0.9.526", "ahooks": "^3.9.6", "antd-style": "^4.1.0", "chroma-js": "^3.2.0", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "dayjs": "^1.11.19", "emoji-mart": "^5.6.0", "es-toolkit": "^1.44.0", "fast-deep-equal": "^3.1.3", "immer": "^11.1.3", "katex": "^0.16.28", "leva": "^0.10.1", "lucide-react": "^0.563.0", "marked": "^17.0.1", "mermaid": "^11.12.2", "motion": "^12.30.0", "numeral": "^2.0.6", "polished": "^4.3.1", "query-string": "^9.3.1", "rc-collapse": "^4.0.0", "rc-footer": "^0.6.8", "rc-image": "^7.12.0", "rc-input-number": "^9.5.0", "rc-menu": "^9.16.1", "re-resizable": "^6.11.2", "react-avatar-editor": "^14.0.0", "react-error-boundary": "^6.1.0", "react-hotkeys-hook": "^5.2.4", "react-markdown": "^10.1.0", "react-merge-refs": "^3.0.2", "react-rnd": "^10.5.2", "react-zoom-pan-pinch": "^3.7.0", "rehype-github-alerts": "^4.2.0", "rehype-katex": "^7.0.1", "rehype-raw": "^7.0.0", "remark-breaks": "^4.0.0", "remark-cjk-friendly": "^1.2.3", "remark-gfm": "^4.0.1", "remark-github": "^12.0.0", "remark-math": "^6.0.0", "remend": "^1.2.0", "shiki": "^3.22.0", "shiki-stream": "^0.1.4", "swr": "^2.4.0", "ts-md5": "^2.0.1", "unified": "^11.0.5", "url-join": "^5.0.0", "use-merge-value": "^1.2.0", "uuid": "^13.0.0", "virtua": "^0.48.5" }, "peerDependencies": { "@lobehub/fluent-emoji": "^4.0.0", "@lobehub/icons": "^4.0.0", "antd": "^6.1.1", "react": "^19.0.0", "react-dom": "^19.0.0" } }, "sha512-FYQeWkR0CoZCaPqEX9AUGrhaIfkYeuacW2KtV+1GS7eGVjREFNNOAgY5PLk20ZMYV/cRFsn9fNG0rqn9PxChxw=="],
 
@@ -282,95 +319,99 @@
 
     "@mdx-js/react": ["@mdx-js/react@3.1.1", "", { "dependencies": { "@types/mdx": "^2.0.0" }, "peerDependencies": { "@types/react": ">=16", "react": ">=16" } }, "sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw=="],
 
-    "@mermaid-js/parser": ["@mermaid-js/parser@0.6.3", "", { "dependencies": { "langium": "3.3.1" } }, "sha512-lnjOhe7zyHjc+If7yT4zoedx2vo4sHaTmtkl1+or8BRTnCtDmcTpAjpzDSfCZrshM5bCoz0GyidzadJAH1xobA=="],
+    "@mermaid-js/parser": ["@mermaid-js/parser@1.1.0", "", { "dependencies": { "langium": "^4.0.0" } }, "sha512-gxK9ZX2+Fex5zu8LhRQoMeMPEHbc73UKZ0FQ54YrQtUxE1VVhMwzeNtKRPAu5aXks4FasbMe4xB4bWrmq6Jlxw=="],
 
-    "@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, ""],
+    "@phosphor-icons/react": ["@phosphor-icons/react@2.1.10", "", { "peerDependencies": { "react": ">= 16.8", "react-dom": ">= 16.8" } }, "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA=="],
 
-    "@nodelib/fs.stat": ["@nodelib/fs.stat@2.0.5", "", {}, ""],
+    "@pierre/diffs": ["@pierre/diffs@1.1.12", "", { "dependencies": { "@pierre/theme": "0.0.28", "@shikijs/transformers": "^3.0.0", "diff": "8.0.3", "hast-util-to-html": "9.0.5", "lru_map": "0.4.1", "shiki": "^3.0.0" }, "peerDependencies": { "react": "^18.3.1 || ^19.0.0", "react-dom": "^18.3.1 || ^19.0.0" } }, "sha512-InssHHM7f0nkazIRkuaiNCy6GkBLfwJlqc7LtTkMD/KSqsuc6bnL2V9sIQoG5PZu9jwinQiXUb/gT7itFa6U9A=="],
 
-    "@nodelib/fs.walk": ["@nodelib/fs.walk@1.2.8", "", { "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" } }, ""],
+    "@pierre/theme": ["@pierre/theme@0.0.28", "", {}, "sha512-1j/H/fECBuc9dEvntdWI+l435HZapw+RCJTlqCA6BboQ5TjlnE005j/ROWutXIs8aq5OAc82JI2Kwk4A1WWBgw=="],
 
-    "@parcel/watcher": ["@parcel/watcher@2.5.6", "", { "dependencies": { "detect-libc": "^2.0.3", "is-glob": "^4.0.3", "node-addon-api": "^7.0.0", "picomatch": "^4.0.3" }, "optionalDependencies": { "@parcel/watcher-darwin-arm64": "2.5.6" } }, ""],
+    "@primer/octicons": ["@primer/octicons@19.23.1", "", { "dependencies": { "object-assign": "^4.1.1" } }, "sha512-CzjGmxkmNhyst6EekrS3SJPdtzgIkUMP/LSJch65y99/kmiFXbO1a+q7zoYe3hnI9NaOM0IN+ydDIbOmd8YqcA=="],
 
-    "@parcel/watcher-darwin-arm64": ["@parcel/watcher-darwin-arm64@2.5.6", "", { "os": "darwin", "cpu": "arm64" }, ""],
+    "@radix-ui/number": ["@radix-ui/number@1.1.1", "", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],
 
-    "@pierre/diffs": ["@pierre/diffs@1.0.11", "", { "dependencies": { "@shikijs/core": "^3.0.0", "@shikijs/engine-javascript": "^3.0.0", "@shikijs/transformers": "^3.0.0", "diff": "8.0.3", "hast-util-to-html": "9.0.5", "lru_map": "0.4.1", "shiki": "^3.0.0" }, "peerDependencies": { "react": "^18.3.1 || ^19.0.0", "react-dom": "^18.3.1 || ^19.0.0" } }, "sha512-j6zIEoyImQy1HfcJqbrDwP0O5I7V2VNXAaw53FqQ+SykRfaNwABeZHs9uibXO4supaXPmTx6LEH9Lffr03e1Tw=="],
+    "@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
 
-    "@primer/octicons": ["@primer/octicons@19.22.0", "", { "dependencies": { "object-assign": "^4.1.1" } }, "sha512-nWoh9PlE6u7xbiZF3KcUm3ktLpN2rQPt11trwp/t4EsKuYRNVWVbBp1LkCBsvZq7ScckNKUURLigIU0wS1FQdw=="],
+    "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w=="],
 
-    "@radix-ui/number": ["@radix-ui/number@1.1.1", "", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],
+    "@radix-ui/react-checkbox": ["@radix-ui/react-checkbox@1.3.3", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw=="],
 
-    "@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
+    "@radix-ui/react-collapsible": ["@radix-ui/react-collapsible@1.1.12", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA=="],
+
+    "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
+
+    "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
 
-    "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w=="],
+    "@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
-    "@radix-ui/react-checkbox": ["@radix-ui/react-checkbox@1.3.3", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw=="],
+    "@radix-ui/react-context-menu": ["@radix-ui/react-context-menu@2.2.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww=="],
 
-    "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
+    "@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw=="],
 
-    "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
+    "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],
 
-    "@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
+    "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg=="],
 
-    "@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw=="],
+    "@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw=="],
 
-    "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],
+    "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw=="],
 
-    "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg=="],
+    "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
 
-    "@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw=="],
+    "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
 
-    "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw=="],
+    "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg=="],
 
-    "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
+    "@radix-ui/react-popover": ["@radix-ui/react-popover@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA=="],
 
-    "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
+    "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.8", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw=="],
 
-    "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg=="],
+    "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.9", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ=="],
 
-    "@radix-ui/react-popover": ["@radix-ui/react-popover@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA=="],
+    "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.5", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ=="],
 
-    "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.8", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw=="],
+    "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.9", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ=="],
+    "@radix-ui/react-progress": ["@radix-ui/react-progress@1.1.8", "", { "dependencies": { "@radix-ui/react-context": "1.1.3", "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA=="],
 
-    "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.5", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ=="],
+    "@radix-ui/react-radio-group": ["@radix-ui/react-radio-group@1.3.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ=="],
 
-    "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+    "@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA=="],
 
-    "@radix-ui/react-radio-group": ["@radix-ui/react-radio-group@1.3.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ=="],
+    "@radix-ui/react-select": ["@radix-ui/react-select@2.2.6", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-visually-hidden": "1.2.3", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ=="],
 
-    "@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA=="],
+    "@radix-ui/react-slider": ["@radix-ui/react-slider@1.3.6", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw=="],
 
-    "@radix-ui/react-select": ["@radix-ui/react-select@2.2.6", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-visually-hidden": "1.2.3", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ=="],
+    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
 
-    "@radix-ui/react-slider": ["@radix-ui/react-slider@1.3.6", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw=="],
+    "@radix-ui/react-switch": ["@radix-ui/react-switch@1.2.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ=="],
 
-    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+    "@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.13", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A=="],
 
-    "@radix-ui/react-switch": ["@radix-ui/react-switch@1.2.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ=="],
+    "@radix-ui/react-toggle": ["@radix-ui/react-toggle@1.1.10", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ=="],
 
-    "@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.13", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A=="],
+    "@radix-ui/react-toggle-group": ["@radix-ui/react-toggle-group@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-toggle": "1.1.10", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q=="],
 
-    "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-visually-hidden": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg=="],
+    "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-visually-hidden": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg=="],
 
-    "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
+    "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
 
-    "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.2", "", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg=="],
+    "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.2", "", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg=="],
 
-    "@radix-ui/react-use-effect-event": ["@radix-ui/react-use-effect-event@0.0.2", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA=="],
+    "@radix-ui/react-use-effect-event": ["@radix-ui/react-use-effect-event@0.0.2", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA=="],
 
-    "@radix-ui/react-use-escape-keydown": ["@radix-ui/react-use-escape-keydown@1.1.1", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g=="],
+    "@radix-ui/react-use-escape-keydown": ["@radix-ui/react-use-escape-keydown@1.1.1", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g=="],
 
-    "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
+    "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
 
-    "@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ=="],
+    "@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ=="],
 
-    "@radix-ui/react-use-rect": ["@radix-ui/react-use-rect@1.1.1", "", { "dependencies": { "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w=="],
+    "@radix-ui/react-use-rect": ["@radix-ui/react-use-rect@1.1.1", "", { "dependencies": { "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w=="],
 
-    "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ=="],
+    "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ=="],
 
-    "@radix-ui/react-visually-hidden": ["@radix-ui/react-visually-hidden@1.2.3", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug=="],
+    "@radix-ui/react-visually-hidden": ["@radix-ui/react-visually-hidden@1.2.3", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug=="],
 
     "@radix-ui/rect": ["@radix-ui/rect@1.1.1", "", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
 
@@ -382,7 +423,7 @@
 
     "@rc-component/collapse": ["@rc-component/collapse@1.2.0", "", { "dependencies": { "@babel/runtime": "^7.10.1", "@rc-component/motion": "^1.1.4", "@rc-component/util": "^1.3.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-ZRYSKSS39qsFx93p26bde7JUZJshsUBEQRlRXPuJYlAiNX0vyYlF5TsAm8JZN3LcF8XvKikdzPbgAtXSbkLUkw=="],
 
-    "@rc-component/color-picker": ["@rc-component/color-picker@3.1.0", "", { "dependencies": { "@ant-design/fast-color": "^3.0.0", "@rc-component/util": "^1.3.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-o7Vavj7yyfVxFmeynXf0fCHVlC0UTE9al74c6nYuLck+gjuVdQNWSVXR8Efq/mmWFy7891SCOsfaPq6Eqe1s/g=="],
+    "@rc-component/color-picker": ["@rc-component/color-picker@3.1.1", "", { "dependencies": { "@ant-design/fast-color": "^3.0.1", "@rc-component/util": "^1.3.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-OHaCHLHszCegdXmIq2ZRIZBN/EtpT6Wm8SG/gpzLATHbVKc/avvuKi+zlOuk05FTWvgaMmpxAko44uRJ3M+2pg=="],
 
     "@rc-component/context": ["@rc-component/context@2.0.1", "", { "dependencies": { "@rc-component/util": "^1.3.0" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-HyZbYm47s/YqtP6pKXNMjPEMaukyg7P0qVfgMLzr7YiFNMHbK2fKTAGzms9ykfGHSfyf75nBbgWw+hHkp+VImw=="],
 
@@ -392,9 +433,9 @@
 
     "@rc-component/dropdown": ["@rc-component/dropdown@1.0.2", "", { "dependencies": { "@rc-component/trigger": "^3.0.0", "@rc-component/util": "^1.2.1", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.11.0", "react-dom": ">=16.11.0" } }, "sha512-6PY2ecUSYhDPhkNHHb4wfeAya04WhpmUSKzdR60G+kMNVUCX2vjT/AgTS0Lz0I/K6xrPMJ3enQbwVpeN3sHCgg=="],
 
-    "@rc-component/form": ["@rc-component/form@1.6.2", "", { "dependencies": { "@rc-component/async-validator": "^5.1.0", "@rc-component/util": "^1.6.2", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-OgIn2RAoaSBqaIgzJf/X6iflIa9LpTozci1lagLBdURDFhGA370v0+T0tXxOi8YShMjTha531sFhwtnrv+EJaQ=="],
+    "@rc-component/form": ["@rc-component/form@1.8.0", "", { "dependencies": { "@rc-component/async-validator": "^5.1.0", "@rc-component/util": "^1.6.2", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-eUD5KKYnIZWmJwRA0vnyO/ovYUfHGU1svydY1OrqU5fw8Oz9Tdqvxvrlh0wl6xI/EW69dT7II49xpgOWzK3T5A=="],
 
-    "@rc-component/image": ["@rc-component/image@1.6.0", "", { "dependencies": { "@rc-component/motion": "^1.0.0", "@rc-component/portal": "^2.1.2", "@rc-component/util": "^1.3.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-tSfn2ZE/oP082g4QIOxeehkmgnXB7R+5AFj/lIFr4k7pEuxHBdyGIq9axoCY9qea8NN0DY6p4IB/F07tLqaT5A=="],
+    "@rc-component/image": ["@rc-component/image@1.8.1", "", { "dependencies": { "@rc-component/motion": "^1.0.0", "@rc-component/portal": "^2.1.2", "@rc-component/util": "^1.10.1", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-JfPCijmMl+EaMvbftsEs/4VHmTyJKsZBh5ujFowSA45i9NTVYS1vuHtgpVV/QrGa27kXwbVOZriffCe/PNKuMw=="],
 
     "@rc-component/input": ["@rc-component/input@1.1.2", "", { "dependencies": { "@rc-component/util": "^1.4.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.0.0", "react-dom": ">=16.0.0" } }, "sha512-Q61IMR47piUBudgixJ30CciKIy9b1H95qe7GgEKOmSJVJXvFRWJllJfQry9tif+MX2cWFXWJf/RXz4kaCeq/Fg=="],
 
@@ -404,9 +445,9 @@
 
     "@rc-component/menu": ["@rc-component/menu@1.2.0", "", { "dependencies": { "@rc-component/motion": "^1.1.4", "@rc-component/overflow": "^1.0.0", "@rc-component/trigger": "^3.0.0", "@rc-component/util": "^1.3.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-VWwDuhvYHSnTGj4n6bV3ISrLACcPAzdPOq3d0BzkeiM5cve8BEYfvkEhNoM0PLzv51jpcejeyrLXeMVIJ+QJlg=="],
 
-    "@rc-component/mini-decimal": ["@rc-component/mini-decimal@1.1.0", "", { "dependencies": { "@babel/runtime": "^7.18.0" } }, "sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ=="],
+    "@rc-component/mini-decimal": ["@rc-component/mini-decimal@1.1.3", "", { "dependencies": { "@babel/runtime": "^7.18.0" } }, "sha512-bk/FJ09fLf+NLODMAFll6CfYrHPBioTedhW6lxDBuuWucJEqFUd4l/D/5JgIi3dina6sYahB8iuPAZTNz2pMxw=="],
 
-    "@rc-component/motion": ["@rc-component/motion@1.1.6", "", { "dependencies": { "@rc-component/util": "^1.2.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-aEQobs/YA0kqRvHIPjQvOytdtdRVyhf/uXAal4chBjxDu6odHckExJzjn2D+Ju1aKK6hx3pAs6BXdV9+86xkgQ=="],
+    "@rc-component/motion": ["@rc-component/motion@1.3.2", "", { "dependencies": { "@rc-component/util": "^1.2.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-itfd+GztzJYAb04Z4RkEub1TbJAfZc2Iuy8p44U44xD1F5+fNYFKI3897ijlbIyfvXkTmMm+KGcjkQQGMHywEQ=="],
 
     "@rc-component/mutate-observer": ["@rc-component/mutate-observer@2.0.1", "", { "dependencies": { "@rc-component/util": "^1.2.0" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-AyarjoLU5YlxuValRi+w8JRH2Z84TBbFO2RoGWz9d8bSu0FqT8DtugH3xC3BV7mUwlmROFauyWuXFuq4IFbH+w=="],
 
@@ -416,7 +457,7 @@
 
     "@rc-component/pagination": ["@rc-component/pagination@1.2.0", "", { "dependencies": { "@rc-component/util": "^1.3.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-YcpUFE8dMLfSo6OARJlK6DbHHvrxz7pMGPGmC/caZSJJz6HRKHC1RPP001PRHCvG9Z/veD039uOQmazVuLJzlw=="],
 
-    "@rc-component/picker": ["@rc-component/picker@1.9.0", "", { "dependencies": { "@rc-component/overflow": "^1.0.0", "@rc-component/resize-observer": "^1.0.0", "@rc-component/trigger": "^3.6.15", "@rc-component/util": "^1.3.0", "clsx": "^2.1.1" }, "peerDependencies": { "date-fns": ">= 2.x", "dayjs": ">= 1.x", "luxon": ">= 3.x", "moment": ">= 2.x", "react": ">=16.9.0", "react-dom": ">=16.9.0" }, "optionalPeers": ["date-fns", "dayjs", "luxon", "moment"] }, "sha512-OLisdk8AWVCG9goBU1dWzuH5QlBQk8jktmQ6p0/IyBFwdKGwyIZOSjnBYo8hooHiTdl0lU+wGf/OfMtVBw02KQ=="],
+    "@rc-component/picker": ["@rc-component/picker@1.9.1", "", { "dependencies": { "@rc-component/overflow": "^1.0.0", "@rc-component/resize-observer": "^1.0.0", "@rc-component/trigger": "^3.6.15", "@rc-component/util": "^1.3.0", "clsx": "^2.1.1" }, "peerDependencies": { "date-fns": ">= 2.x", "dayjs": ">= 1.x", "luxon": ">= 3.x", "moment": ">= 2.x", "react": ">=16.9.0", "react-dom": ">=16.9.0" }, "optionalPeers": ["date-fns", "dayjs", "luxon", "moment"] }, "sha512-9FBYYsvH3HMLICaPDA/1Th5FLaDkFa7qAtangIdlhKb3ZALaR745e9PsOhheJb6asS4QXc12ffiAcjdkZ4C5/g=="],
 
     "@rc-component/portal": ["@rc-component/portal@1.1.2", "", { "dependencies": { "@babel/runtime": "^7.18.0", "classnames": "^2.3.2", "rc-util": "^5.24.4" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg=="],
 
@@ -426,11 +467,11 @@
 
     "@rc-component/rate": ["@rc-component/rate@1.0.1", "", { "dependencies": { "@rc-component/util": "^1.3.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-bkXxeBqDpl5IOC7yL7GcSYjQx9G8H+6kLYQnNZWeBYq2OYIv1MONd6mqKTjnnJYpV0cQIU2z3atdW0j1kttpTw=="],
 
-    "@rc-component/resize-observer": ["@rc-component/resize-observer@1.1.1", "", { "dependencies": { "@rc-component/util": "^1.2.0" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-NfXXMmiR+SmUuKE1NwJESzEUYUFWIDUn2uXpxCTOLwiRUUakd62DRNFjRJArgzyFW8S5rsL4aX5XlyIXyC/vRA=="],
+    "@rc-component/resize-observer": ["@rc-component/resize-observer@1.1.2", "", { "dependencies": { "@rc-component/util": "^1.2.0" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-t/Bb0W8uvL4PYKAB3YcChC+DlHh0Wt5kM7q/J+0qpVEUMLe7Hk5zuvc9km0hMnTFPSx5Z7Wu/fzCLN6erVLE8Q=="],
 
     "@rc-component/segmented": ["@rc-component/segmented@1.3.0", "", { "dependencies": { "@babel/runtime": "^7.11.1", "@rc-component/motion": "^1.1.4", "@rc-component/util": "^1.3.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.0.0", "react-dom": ">=16.0.0" } }, "sha512-5J/bJ01mbDnoA6P/FW8SxUvKn+OgUSTZJPzCNnTBntG50tzoP7DydGhqxp7ggZXZls7me3mc2EQDXakU3iTVFg=="],
 
-    "@rc-component/select": ["@rc-component/select@1.6.10", "", { "dependencies": { "@rc-component/overflow": "^1.0.0", "@rc-component/trigger": "^3.0.0", "@rc-component/util": "^1.3.0", "@rc-component/virtual-list": "^1.0.1", "clsx": "^2.1.1" }, "peerDependencies": { "react": "*", "react-dom": "*" } }, "sha512-y4+2LnyGZrAorIBwflk78PmFVUWcSc9pcljiH72oHj7K1YY/BFUmj224pD7P4o7J+tbIFES45Z7LIpjVmvYlNA=="],
+    "@rc-component/select": ["@rc-component/select@1.6.15", "", { "dependencies": { "@rc-component/overflow": "^1.0.0", "@rc-component/trigger": "^3.0.0", "@rc-component/util": "^1.3.0", "@rc-component/virtual-list": "^1.0.1", "clsx": "^2.1.1" }, "peerDependencies": { "react": "*", "react-dom": "*" } }, "sha512-SyVCWnqxCQZZcQvQJ/CxSjx2bGma6ds/HtnpkIfZVnt6RoEgbqUmHgD6vrzNarNXwbLXerwVzWwq8F3d1sst7g=="],
 
     "@rc-component/slider": ["@rc-component/slider@1.0.1", "", { "dependencies": { "@rc-component/util": "^1.3.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-uDhEPU1z3WDfCJhaL9jfd2ha/Eqpdfxsn0Zb0Xcq1NGQAman0TWaR37OWp2vVXEOdV2y0njSILTMpTfPV1454g=="],
 
@@ -448,7 +489,7 @@
 
     "@rc-component/tour": ["@rc-component/tour@2.3.0", "", { "dependencies": { "@rc-component/portal": "^2.2.0", "@rc-component/trigger": "^3.0.0", "@rc-component/util": "^1.7.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-K04K9r32kUC+auBSQfr+Fss4SpSIS9JGe56oq/ALAX0p+i2ylYOI1MgR83yBY7v96eO6ZFXcM/igCQmubps0Ow=="],
 
-    "@rc-component/tree": ["@rc-component/tree@1.2.3", "", { "dependencies": { "@rc-component/motion": "^1.0.0", "@rc-component/util": "^1.8.1", "@rc-component/virtual-list": "^1.0.1", "clsx": "^2.1.1" }, "peerDependencies": { "react": "*", "react-dom": "*" } }, "sha512-mG8hF2ogQcKaEpfyxzPvMWqqkptofd7Sf+YiXOpPzuXLTLwNKfLDJtysc1/oybopbnzxNqWh2Vgwi+GYwNIb7w=="],
+    "@rc-component/tree": ["@rc-component/tree@1.2.4", "", { "dependencies": { "@rc-component/motion": "^1.0.0", "@rc-component/util": "^1.8.1", "@rc-component/virtual-list": "^1.0.1", "clsx": "^2.1.1" }, "peerDependencies": { "react": "*", "react-dom": "*" } }, "sha512-5Gli43+m4R7NhpYYz3Z61I6LOw9yI6CNChxgVtvrO6xB1qML7iE6QMLVMB3+FTjo2yF6uFdAHtqWPECz/zbX5w=="],
 
     "@rc-component/tree-select": ["@rc-component/tree-select@1.8.0", "", { "dependencies": { "@rc-component/select": "~1.6.0", "@rc-component/tree": "~1.2.0", "@rc-component/util": "^1.4.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": "*", "react-dom": "*" } }, "sha512-iYsPq3nuLYvGqdvFAW+l+I9ASRIOVbMXyA8FGZg2lGym/GwkaWeJGzI4eJ7c9IOEhRj0oyfIN4S92Fl3J05mjQ=="],
 
@@ -456,91 +497,191 @@
 
     "@rc-component/upload": ["@rc-component/upload@1.1.0", "", { "dependencies": { "@rc-component/util": "^1.3.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-LIBV90mAnUE6VK5N4QvForoxZc4XqEYZimcp7fk+lkE4XwHHyJWxpIXQQwMU8hJM+YwBbsoZkGksL1sISWHQxw=="],
 
-    "@rc-component/util": ["@rc-component/util@1.9.0", "", { "dependencies": { "is-mobile": "^5.0.0", "react-is": "^18.2.0" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-5uW6AfhIigCWeEQDthTozlxiT4Prn6xYQWeO0xokjcaa186OtwPRHBZJ2o0T0FhbjGhZ3vXdbkv0sx3gAYW7Vg=="],
+    "@rc-component/util": ["@rc-component/util@1.10.1", "", { "dependencies": { "is-mobile": "^5.0.0", "react-is": "^18.2.0" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-q++9S6rUa5Idb/xIBNz6jtvumw5+O5YV5V0g4iK9mn9jWs4oGJheE3ZN1kAnE723AXyaD8v95yeOASmdk8Jnng=="],
 
     "@rc-component/virtual-list": ["@rc-component/virtual-list@1.0.2", "", { "dependencies": { "@babel/runtime": "^7.20.0", "@rc-component/resize-observer": "^1.0.1", "@rc-component/util": "^1.4.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-uvTol/mH74FYsn5loDGJxo+7kjkO4i+y4j87Re1pxJBs0FaeuMuLRzQRGaXwnMcV1CxpZLi2Z56Rerj2M00fjQ=="],
 
     "@react-sigma/core": ["@react-sigma/core@5.0.6", "", { "peerDependencies": { "graphology": "^0.26.0", "react": "^18.0.0 || ^19.0.0", "sigma": "^3.0.2" } }, "sha512-Xu2qXyvDZIhmvGC1n8d7Kcxm5Ntcz4HbPIM7CPDD2e4h3s/oxVpVPX7wtsNreJRRPj9mK+3oqB6SWXNI4mTqVg=="],
 
+    "@react-spring/animated": ["@react-spring/animated@9.7.5", "", { "dependencies": { "@react-spring/shared": "~9.7.5", "@react-spring/types": "~9.7.5" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg=="],
+
+    "@react-spring/core": ["@react-spring/core@9.7.5", "", { "dependencies": { "@react-spring/animated": "~9.7.5", "@react-spring/shared": "~9.7.5", "@react-spring/types": "~9.7.5" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w=="],
+
+    "@react-spring/rafz": ["@react-spring/rafz@9.7.5", "", {}, "sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw=="],
+
+    "@react-spring/shared": ["@react-spring/shared@9.7.5", "", { "dependencies": { "@react-spring/rafz": "~9.7.5", "@react-spring/types": "~9.7.5" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw=="],
+
+    "@react-spring/types": ["@react-spring/types@9.7.5", "", {}, "sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g=="],
+
+    "@react-spring/web": ["@react-spring/web@9.7.5", "", { "dependencies": { "@react-spring/animated": "~9.7.5", "@react-spring/core": "~9.7.5", "@react-spring/shared": "~9.7.5", "@react-spring/types": "~9.7.5" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "sha512-lmvqGwpe+CSttsWNZVr+Dg62adtKhauGwLyGE/RRyZ8AAMLgb9x3NDMA5RMElXo+IMyTkPp7nxTB8ZQlmhb6JQ=="],
+
     "@redocly/ajv": ["@redocly/ajv@8.11.2", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2", "uri-js-replace": "^1.0.1" } }, "sha512-io1JpnwtIcvojV7QKDUSIuMN/ikdOUd1ReEnUnMKGfDVridQZ31J0MmIuqwuRjWDZfmvr+Q0MqCcfHM2gTivOg=="],
 
     "@redocly/config": ["@redocly/config@0.22.0", "", {}, "sha512-gAy93Ddo01Z3bHuVdPWfCwzgfaYgMdaZPcfL7JZ7hWJoK9V0lXDbigTWkhiPFAaLWzbOJ+kbUQG1+XwIm0KRGQ=="],
 
     "@redocly/openapi-core": ["@redocly/openapi-core@1.34.11", "", { "dependencies": { "@redocly/ajv": "8.11.2", "@redocly/config": "0.22.0", "colorette": "1.4.0", "https-proxy-agent": "7.0.6", "js-levenshtein": "1.1.6", "js-yaml": "4.1.1", "minimatch": "5.1.9", "pluralize": "8.0.0", "yaml-ast-parser": "0.0.43" } }, "sha512-V09ayfnb5GyysmvARbt+voFZAjGcf7hSYxOYxSkCc4fbH/DTfq5YWoec8cflvmHHqyIFbqvmGKmYFzqhr9zxDg=="],
 
-    "@reduxjs/toolkit": ["@reduxjs/toolkit@2.11.2", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", "immer": "^11.0.0", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "reselect": "^5.1.0" }, "peerDependencies": { "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" } }, ""],
+    "@reduxjs/toolkit": ["@reduxjs/toolkit@2.11.2", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", "immer": "^11.0.0", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "reselect": "^5.1.0" }, "peerDependencies": { "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" }, "optionalPeers": ["react", "react-redux"] }, "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ=="],
+
+    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-beta.27", "", {}, "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA=="],
+
+    "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.60.1", "", { "os": "android", "cpu": "arm" }, "sha512-d6FinEBLdIiK+1uACUttJKfgZREXrF0Qc2SmLII7W2AD8FfiZ9Wjd+rD/iRuf5s5dWrr1GgwXCvPqOuDquOowA=="],
+
+    "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.60.1", "", { "os": "android", "cpu": "arm64" }, "sha512-YjG/EwIDvvYI1YvYbHvDz/BYHtkY4ygUIXHnTdLhG+hKIQFBiosfWiACWortsKPKU/+dUwQQCKQM3qrDe8c9BA=="],
+
+    "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.60.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-mjCpF7GmkRtSJwon+Rq1N8+pI+8l7w5g9Z3vWj4T7abguC4Czwi3Yu/pFaLvA3TTeMVjnu3ctigusqWUfjZzvw=="],
+
+    "@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.60.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-haZ7hJ1JT4e9hqkoT9R/19XW2QKqjfJVv+i5AGg57S+nLk9lQnJ1F/eZloRO3o9Scy9CM3wQ9l+dkXtcBgN5Ew=="],
 
-    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-beta.27", "", {}, ""],
+    "@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.60.1", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-czw90wpQq3ZsAVBlinZjAYTKduOjTywlG7fEeWKUA7oCmpA8xdTkxZZlwNJKWqILlq0wehoZcJYfBvOyhPTQ6w=="],
 
-    "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.57.1", "", { "os": "darwin", "cpu": "arm64" }, ""],
+    "@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.60.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-KVB2rqsxTHuBtfOeySEyzEOB7ltlB/ux38iu2rBQzkjbwRVlkhAGIEDiiYnO2kFOkJp+Z7pUXKyrRRFuFUKt+g=="],
 
-    "@shikijs/core": ["@shikijs/core@3.22.0", "", { "dependencies": { "@shikijs/types": "3.22.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-iAlTtSDDbJiRpvgL5ugKEATDtHdUVkqgHDm/gbD2ZS9c88mx7G1zSYjjOxp5Qa0eaW0MAQosFRmJSk354PRoQA=="],
+    "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.60.1", "", { "os": "linux", "cpu": "arm" }, "sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g=="],
 
-    "@shikijs/engine-javascript": ["@shikijs/engine-javascript@3.22.0", "", { "dependencies": { "@shikijs/types": "3.22.0", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.3.4" } }, "sha512-jdKhfgW9CRtj3Tor0L7+yPwdG3CgP7W+ZEqSsojrMzCjD1e0IxIbwUMDDpYlVBlC08TACg4puwFGkZfLS+56Tw=="],
+    "@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.60.1", "", { "os": "linux", "cpu": "arm" }, "sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg=="],
 
-    "@shikijs/engine-oniguruma": ["@shikijs/engine-oniguruma@3.22.0", "", { "dependencies": { "@shikijs/types": "3.22.0", "@shikijs/vscode-textmate": "^10.0.2" } }, "sha512-DyXsOG0vGtNtl7ygvabHd7Mt5EY8gCNqR9Y7Lpbbd/PbJvgWrqaKzH1JW6H6qFkuUa8aCxoiYVv8/YfFljiQxA=="],
+    "@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.60.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ=="],
 
-    "@shikijs/langs": ["@shikijs/langs@3.22.0", "", { "dependencies": { "@shikijs/types": "3.22.0" } }, "sha512-x/42TfhWmp6H00T6uwVrdTJGKgNdFbrEdhaDwSR5fd5zhQ1Q46bHq9EO61SCEWJR0HY7z2HNDMaBZp8JRmKiIA=="],
+    "@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.60.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA=="],
 
-    "@shikijs/themes": ["@shikijs/themes@3.22.0", "", { "dependencies": { "@shikijs/types": "3.22.0" } }, "sha512-o+tlOKqsr6FE4+mYJG08tfCFDS+3CG20HbldXeVoyP+cYSUxDhrFf3GPjE60U55iOkkjbpY2uC3It/eeja35/g=="],
+    "@rollup/rollup-linux-loong64-gnu": ["@rollup/rollup-linux-loong64-gnu@4.60.1", "", { "os": "linux", "cpu": "none" }, "sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ=="],
 
-    "@shikijs/transformers": ["@shikijs/transformers@3.22.0", "", { "dependencies": { "@shikijs/core": "3.22.0", "@shikijs/types": "3.22.0" } }, "sha512-E7eRV7mwDBjueLF6852n2oYeJYxBq3NSsDk+uyruYAXONv4U8holGmIrT+mPRJQ1J1SNOH6L8G19KRzmBawrFw=="],
+    "@rollup/rollup-linux-loong64-musl": ["@rollup/rollup-linux-loong64-musl@4.60.1", "", { "os": "linux", "cpu": "none" }, "sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw=="],
 
-    "@shikijs/types": ["@shikijs/types@3.22.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-491iAekgKDBFE67z70Ok5a8KBMsQ2IJwOWw3us/7ffQkIBCyOQfm/aNwVMBUriP02QshIfgHCBSIYAl3u2eWjg=="],
+    "@rollup/rollup-linux-ppc64-gnu": ["@rollup/rollup-linux-ppc64-gnu@4.60.1", "", { "os": "linux", "cpu": "ppc64" }, "sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw=="],
+
+    "@rollup/rollup-linux-ppc64-musl": ["@rollup/rollup-linux-ppc64-musl@4.60.1", "", { "os": "linux", "cpu": "ppc64" }, "sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg=="],
+
+    "@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.60.1", "", { "os": "linux", "cpu": "none" }, "sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg=="],
+
+    "@rollup/rollup-linux-riscv64-musl": ["@rollup/rollup-linux-riscv64-musl@4.60.1", "", { "os": "linux", "cpu": "none" }, "sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg=="],
+
+    "@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.60.1", "", { "os": "linux", "cpu": "s390x" }, "sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ=="],
+
+    "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.60.1", "", { "os": "linux", "cpu": "x64" }, "sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg=="],
+
+    "@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.60.1", "", { "os": "linux", "cpu": "x64" }, "sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w=="],
+
+    "@rollup/rollup-openbsd-x64": ["@rollup/rollup-openbsd-x64@4.60.1", "", { "os": "openbsd", "cpu": "x64" }, "sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw=="],
+
+    "@rollup/rollup-openharmony-arm64": ["@rollup/rollup-openharmony-arm64@4.60.1", "", { "os": "none", "cpu": "arm64" }, "sha512-4Cv23ZrONRbNtbZa37mLSueXUCtN7MXccChtKpUnQNgF010rjrjfHx3QxkS2PI7LqGT5xXyYs1a7LbzAwT0iCA=="],
+
+    "@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.60.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-i1okWYkA4FJICtr7KpYzFpRTHgy5jdDbZiWfvny21iIKky5YExiDXP+zbXzm3dUcFpkEeYNHgQ5fuG236JPq0g=="],
+
+    "@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.60.1", "", { "os": "win32", "cpu": "ia32" }, "sha512-u09m3CuwLzShA0EYKMNiFgcjjzwqtUMLmuCJLeZWjjOYA3IT2Di09KaxGBTP9xVztWyIWjVdsB2E9goMjZvTQg=="],
+
+    "@rollup/rollup-win32-x64-gnu": ["@rollup/rollup-win32-x64-gnu@4.60.1", "", { "os": "win32", "cpu": "x64" }, "sha512-k+600V9Zl1CM7eZxJgMyTUzmrmhB/0XZnF4pRypKAlAgxmedUA+1v9R+XOFv56W4SlHEzfeMtzujLJD22Uz5zg=="],
+
+    "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.60.1", "", { "os": "win32", "cpu": "x64" }, "sha512-lWMnixq/QzxyhTV6NjQJ4SFo1J6PvOX8vUx5Wb4bBPsEb+8xZ89Bz6kOXpfXj9ak9AHTQVQzlgzBEc1SyM27xQ=="],
+
+    "@shikijs/core": ["@shikijs/core@3.23.0", "", { "dependencies": { "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA=="],
+
+    "@shikijs/engine-javascript": ["@shikijs/engine-javascript@3.23.0", "", { "dependencies": { "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.3.4" } }, "sha512-aHt9eiGFobmWR5uqJUViySI1bHMqrAgamWE1TYSUoftkAeCCAiGawPMwM+VCadylQtF4V3VNOZ5LmfItH5f3yA=="],
+
+    "@shikijs/engine-oniguruma": ["@shikijs/engine-oniguruma@3.23.0", "", { "dependencies": { "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2" } }, "sha512-1nWINwKXxKKLqPibT5f4pAFLej9oZzQTsby8942OTlsJzOBZ0MWKiwzMsd+jhzu8YPCHAswGnnN1YtQfirL35g=="],
+
+    "@shikijs/langs": ["@shikijs/langs@3.23.0", "", { "dependencies": { "@shikijs/types": "3.23.0" } }, "sha512-2Ep4W3Re5aB1/62RSYQInK9mM3HsLeB91cHqznAJMuylqjzNVAVCMnNWRHFtcNHXsoNRayP9z1qj4Sq3nMqYXg=="],
+
+    "@shikijs/themes": ["@shikijs/themes@3.23.0", "", { "dependencies": { "@shikijs/types": "3.23.0" } }, "sha512-5qySYa1ZgAT18HR/ypENL9cUSGOeI2x+4IvYJu4JgVJdizn6kG4ia5Q1jDEOi7gTbN4RbuYtmHh0W3eccOrjMA=="],
+
+    "@shikijs/transformers": ["@shikijs/transformers@3.23.0", "", { "dependencies": { "@shikijs/core": "3.23.0", "@shikijs/types": "3.23.0" } }, "sha512-F9msZVxdF+krQNSdQ4V+Ja5QemeAoTQ2jxt7nJCwhDsdF1JWS3KxIQXA3lQbyKwS3J61oHRUSv4jYWv3CkaKTQ=="],
+
+    "@shikijs/types": ["@shikijs/types@3.23.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ=="],
 
     "@shikijs/vscode-textmate": ["@shikijs/vscode-textmate@10.0.2", "", {}, "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg=="],
 
+    "@spacedrive/ai": ["@spacedrive/ai@0.2.3", "", { "dependencies": { "@phosphor-icons/react": "^2.1.0", "@spacedrive/primitives": "^0.2.0", "clsx": "^2.1.0", "framer-motion": "^11.0.0", "react-loader-spinner": "^8.0.2", "react-markdown": "^9.0.0", "rehype-raw": "^7.0.0", "remark-gfm": "^4.0.0" }, "optionalDependencies": { "@dnd-kit/core": "^6.0.0", "@dnd-kit/sortable": "^8.0.0", "@dnd-kit/utilities": "^3.0.0", "@react-sigma/core": "^4.0.0", "graphology": "^0.25.0", "sigma": "^3.0.0" }, "peerDependencies": { "@tanstack/react-query": "^5.0.0", "@tanstack/react-virtual": "^3.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-/mHRJq5T5+xa17m9uzofH1yoO4s+ZvJLp7iLnXwv1mXLX0KVvgafBG4zc2LpsKm5SyOz6QyCzatIfbA8ub6z/g=="],
+
+    "@spacedrive/explorer": ["@spacedrive/explorer@0.2.3", "", { "dependencies": { "@phosphor-icons/react": "^2.1.0", "@spacedrive/primitives": "^0.2.0", "clsx": "^2.1.0" }, "peerDependencies": { "@tanstack/react-virtual": "^3.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-I0D2OonJZFZ3DdKdmePGX9kT/RF64fev3A8pp3utvpLevYp0tR/ka6ngXE66huV588KcFpAcr3BVSKsYF7RXUQ=="],
+
+    "@spacedrive/forms": ["@spacedrive/forms@0.2.3", "", { "dependencies": { "@spacedrive/primitives": "^0.2.0", "clsx": "^2.1.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0", "react-hook-form": "^7.0.0", "zod": "^3.0.0" } }, "sha512-DqqHrHBgolUGK1EdLc4rQd4H3uu90TgW+Zz9xIdH3lez27x/fv/Pb60ibw3EPOKf5dW973e0fADUvluo4yJvag=="],
+
+    "@spacedrive/primitives": ["@spacedrive/primitives@0.2.3", "", { "dependencies": { "@headlessui/react": "^1.7.0", "@phosphor-icons/react": "^2.1.0", "@radix-ui/react-checkbox": "^1.1.0", "@radix-ui/react-collapsible": "^1.1.0", "@radix-ui/react-context-menu": "^2.2.0", "@radix-ui/react-dialog": "^1.1.0", "@radix-ui/react-dropdown-menu": "^2.1.0", "@radix-ui/react-popover": "^1.1.0", "@radix-ui/react-progress": "^1.1.0", "@radix-ui/react-radio-group": "^1.2.0", "@radix-ui/react-select": "^2.1.0", "@radix-ui/react-slider": "^1.2.0", "@radix-ui/react-switch": "^1.1.0", "@radix-ui/react-tabs": "^1.1.0", "@radix-ui/react-toggle-group": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.0", "@react-spring/web": "^9.7.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "framer-motion": "^11.0.0", "react-hook-form": "^7.50.0", "react-loading-icons": "^1.1.0", "react-resizable-layout": "^0.7.0", "sonner": "^1.4.0", "zod": "^3.22.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0", "tailwindcss": "^4.1.0" } }, "sha512-2ak+qriCS81QLfPsLxrA69A57eJoyARVWd3pj/0gZmHpIeH6fTgQvao9Da7/o8azjMZ5o2gCC8tb3b5CoEHIbw=="],
+
+    "@spacedrive/tokens": ["@spacedrive/tokens@0.2.3", "", {}, "sha512-AozHOoDjyx08R7hn6mvXAxGNMobro7XjsPML59fAP6e+E/ZRiOSuDCh9s6xgUgsH+iiOBkv52Em9QAR4LT47iQ=="],
+
     "@splinetool/runtime": ["@splinetool/runtime@0.9.526", "", { "dependencies": { "on-change": "^4.0.0", "semver-compare": "^1.0.0" } }, "sha512-qznHbXA5aKwDbCgESAothCNm1IeEZcmNWG145p5aXj4w5uoqR1TZ9qkTHTKLTsUbHeitCwdhzmRqan1kxboLgQ=="],
 
-    "@standard-schema/spec": ["@standard-schema/spec@1.1.0", "", {}, ""],
+    "@standard-schema/spec": ["@standard-schema/spec@1.1.0", "", {}, "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="],
 
-    "@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, ""],
+    "@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
 
     "@stitches/react": ["@stitches/react@1.2.8", "", { "peerDependencies": { "react": ">= 16.3.0" } }, "sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA=="],
 
-    "@tanstack/history": ["@tanstack/history@1.154.14", "", {}, ""],
+    "@tailwindcss/node": ["@tailwindcss/node@4.2.2", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.19.0", "jiti": "^2.6.1", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.2.2" } }, "sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA=="],
+
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.2.2", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.2.2", "@tailwindcss/oxide-darwin-arm64": "4.2.2", "@tailwindcss/oxide-darwin-x64": "4.2.2", "@tailwindcss/oxide-freebsd-x64": "4.2.2", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.2", "@tailwindcss/oxide-linux-arm64-gnu": "4.2.2", "@tailwindcss/oxide-linux-arm64-musl": "4.2.2", "@tailwindcss/oxide-linux-x64-gnu": "4.2.2", "@tailwindcss/oxide-linux-x64-musl": "4.2.2", "@tailwindcss/oxide-wasm32-wasi": "4.2.2", "@tailwindcss/oxide-win32-arm64-msvc": "4.2.2", "@tailwindcss/oxide-win32-x64-msvc": "4.2.2" } }, "sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg=="],
+
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.2.2", "", { "os": "android", "cpu": "arm64" }, "sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg=="],
+
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.2.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg=="],
+
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.2.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw=="],
+
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.2.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ=="],
+
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2", "", { "os": "linux", "cpu": "arm" }, "sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ=="],
+
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.2.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw=="],
+
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.2.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag=="],
+
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.2.2", "", { "os": "linux", "cpu": "x64" }, "sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg=="],
+
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.2.2", "", { "os": "linux", "cpu": "x64" }, "sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ=="],
 
-    "@tanstack/query-core": ["@tanstack/query-core@5.90.20", "", {}, ""],
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.2.2", "", { "dependencies": { "@emnapi/core": "^1.8.1", "@emnapi/runtime": "^1.8.1", "@emnapi/wasi-threads": "^1.1.0", "@napi-rs/wasm-runtime": "^1.1.1", "@tybys/wasm-util": "^0.10.1", "tslib": "^2.8.1" }, "cpu": "none" }, "sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q=="],
 
-    "@tanstack/query-devtools": ["@tanstack/query-devtools@5.93.0", "", {}, "sha512-+kpsx1NQnOFTZsw6HAFCW3HkKg0+2cepGtAWXjiiSOJJ1CtQpt72EE2nyZb+AjAbLRPoeRmPJ8MtQd8r8gsPdg=="],
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.2.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ=="],
 
-    "@tanstack/react-query": ["@tanstack/react-query@5.90.21", "", { "dependencies": { "@tanstack/query-core": "5.90.20" }, "peerDependencies": { "react": "^18 || ^19" } }, ""],
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.2.2", "", { "os": "win32", "cpu": "x64" }, "sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA=="],
 
-    "@tanstack/react-query-devtools": ["@tanstack/react-query-devtools@5.91.3", "", { "dependencies": { "@tanstack/query-devtools": "5.93.0" }, "peerDependencies": { "@tanstack/react-query": "^5.90.20", "react": "^18 || ^19" } }, "sha512-nlahjMtd/J1h7IzOOfqeyDh5LNfG0eULwlltPEonYy0QL+nqrBB+nyzJfULV+moL7sZyxc2sHdNJki+vLA9BSA=="],
+    "@tailwindcss/vite": ["@tailwindcss/vite@4.2.2", "", { "dependencies": { "@tailwindcss/node": "4.2.2", "@tailwindcss/oxide": "4.2.2", "tailwindcss": "4.2.2" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7 || ^8" } }, "sha512-mEiF5HO1QqCLXoNEfXVA1Tzo+cYsrqV7w9Juj2wdUFyW07JRenqMG225MvPwr3ZD9N1bFQj46X7r33iHxLUW0w=="],
 
-    "@tanstack/react-router": ["@tanstack/react-router@1.159.5", "", { "dependencies": { "@tanstack/history": "1.154.14", "@tanstack/react-store": "^0.8.0", "@tanstack/router-core": "1.159.4", "isbot": "^5.1.22", "tiny-invariant": "^1.3.3", "tiny-warning": "^1.0.3" }, "peerDependencies": { "react": ">=18.0.0 || >=19.0.0", "react-dom": ">=18.0.0 || >=19.0.0" } }, ""],
+    "@tanstack/history": ["@tanstack/history@1.161.6", "", {}, "sha512-NaOGLRrddszbQj9upGat6HG/4TKvXLvu+osAIgfxPYA+eIvYKv8GKDJOrY2D3/U9MRnKfMWD7bU4jeD4xmqyIg=="],
 
-    "@tanstack/react-router-devtools": ["@tanstack/react-router-devtools@1.159.5", "", { "dependencies": { "@tanstack/router-devtools-core": "1.159.4" }, "peerDependencies": { "@tanstack/react-router": "^1.159.5", "@tanstack/router-core": "^1.159.4", "react": ">=18.0.0 || >=19.0.0", "react-dom": ">=18.0.0 || >=19.0.0" } }, ""],
+    "@tanstack/query-core": ["@tanstack/query-core@5.97.0", "", {}, "sha512-QdpLP5VzVMgo4VtaPppRA2W04UFjIqX+bxke/ZJhE5cfd5UPkRzqIAJQt9uXkQJjqE8LBOMbKv7f8HCsZltXlg=="],
 
-    "@tanstack/react-store": ["@tanstack/react-store@0.8.0", "", { "dependencies": { "@tanstack/store": "0.8.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, ""],
+    "@tanstack/query-devtools": ["@tanstack/query-devtools@5.97.0", "", {}, "sha512-ZMjAuYhQCKwKLKFMrD+HJDehHwWBVTGOuWBf4vEjR9unO+UGUjQ1mw2TuVbQKoLN/eRwB7qtlPsWBqobBoRBMQ=="],
 
-    "@tanstack/react-virtual": ["@tanstack/react-virtual@3.13.18", "", { "dependencies": { "@tanstack/virtual-core": "3.13.18" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, ""],
+    "@tanstack/react-query": ["@tanstack/react-query@5.97.0", "", { "dependencies": { "@tanstack/query-core": "5.97.0" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-y4So4eGcQoK2WVMAcDNZE9ofB/p5v1OlKvtc1F3uqHwrtifobT7q+ZnXk2mRkc8E84HKYSlAE9z6HXl2V0+ySQ=="],
 
-    "@tanstack/router-core": ["@tanstack/router-core@1.159.4", "", { "dependencies": { "@tanstack/history": "1.154.14", "@tanstack/store": "^0.8.0", "cookie-es": "^2.0.0", "seroval": "^1.4.2", "seroval-plugins": "^1.4.2", "tiny-invariant": "^1.3.3", "tiny-warning": "^1.0.3" } }, ""],
+    "@tanstack/react-query-devtools": ["@tanstack/react-query-devtools@5.97.0", "", { "dependencies": { "@tanstack/query-devtools": "5.97.0" }, "peerDependencies": { "@tanstack/react-query": "^5.97.0", "react": "^18 || ^19" } }, "sha512-X4/VZKCbBIRj8cVD/oZCKTwwPmFXrY1VOfwUT5qI/+/JZYAUS+8vGNMqwBXbaAu1ZsVzzDzkT/wtBE/5OtQYGg=="],
 
-    "@tanstack/router-devtools": ["@tanstack/router-devtools@1.159.5", "", { "dependencies": { "@tanstack/react-router-devtools": "1.159.5", "clsx": "^2.1.1", "goober": "^2.1.16" }, "peerDependencies": { "@tanstack/react-router": "^1.159.5", "csstype": "^3.0.10", "react": ">=18.0.0 || >=19.0.0", "react-dom": ">=18.0.0 || >=19.0.0" } }, ""],
+    "@tanstack/react-router": ["@tanstack/react-router@1.168.10", "", { "dependencies": { "@tanstack/history": "1.161.6", "@tanstack/react-store": "^0.9.3", "@tanstack/router-core": "1.168.9", "isbot": "^5.1.22" }, "peerDependencies": { "react": ">=18.0.0 || >=19.0.0", "react-dom": ">=18.0.0 || >=19.0.0" } }, "sha512-/RmDlOwDkCug609KdPB3U+U1zmrtadJpvsmRg2zEn8TRCKRNri7dYZIjQZbNg8PgUiRL4T6njrZBV1ChzblNaA=="],
 
-    "@tanstack/router-devtools-core": ["@tanstack/router-devtools-core@1.159.4", "", { "dependencies": { "clsx": "^2.1.1", "goober": "^2.1.16", "tiny-invariant": "^1.3.3" }, "peerDependencies": { "@tanstack/router-core": "^1.159.4", "csstype": "^3.0.10" } }, ""],
+    "@tanstack/react-router-devtools": ["@tanstack/react-router-devtools@1.166.11", "", { "dependencies": { "@tanstack/router-devtools-core": "1.167.1" }, "peerDependencies": { "@tanstack/react-router": "^1.168.2", "@tanstack/router-core": "^1.168.2", "react": ">=18.0.0 || >=19.0.0", "react-dom": ">=18.0.0 || >=19.0.0" }, "optionalPeers": ["@tanstack/router-core"] }, "sha512-WYR3q4Xui5yPT/5PXtQh8i03iUA7q8dONBjWpV3nsGdM8Cs1FxpfhLstW0wZO1dOvSyElscwTRCJ6nO5N8r3Lg=="],
 
-    "@tanstack/store": ["@tanstack/store@0.8.0", "", {}, ""],
+    "@tanstack/react-store": ["@tanstack/react-store@0.9.3", "", { "dependencies": { "@tanstack/store": "0.9.3", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-y2iHd/N9OkoQbFJLUX1T9vbc2O9tjH0pQRgTcx1/Nz4IlwLvkgpuglXUx+mXt0g5ZDFrEeDnONPqkbfxXJKwRg=="],
 
-    "@tanstack/virtual-core": ["@tanstack/virtual-core@3.13.18", "", {}, ""],
+    "@tanstack/react-virtual": ["@tanstack/react-virtual@3.13.23", "", { "dependencies": { "@tanstack/virtual-core": "3.13.23" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-XnMRnHQ23piOVj2bzJqHrRrLg4r+F86fuBcwteKfbIjJrtGxb4z7tIvPVAe4B+4UVwo9G4Giuz5fmapcrnZ0OQ=="],
+
+    "@tanstack/router-core": ["@tanstack/router-core@1.168.9", "", { "dependencies": { "@tanstack/history": "1.161.6", "cookie-es": "^2.0.0", "seroval": "^1.4.2", "seroval-plugins": "^1.4.2" }, "bin": { "intent": "bin/intent.js" } }, "sha512-18oeEwEDyXOIuO1VBP9ACaK7tYHZUjynGDCoUh/5c/BNhia9vCJCp9O0LfhZXOorDc/PmLSgvmweFhVmIxF10g=="],
+
+    "@tanstack/router-devtools": ["@tanstack/router-devtools@1.166.11", "", { "dependencies": { "@tanstack/react-router-devtools": "1.166.11", "clsx": "^2.1.1", "goober": "^2.1.16" }, "peerDependencies": { "@tanstack/react-router": "^1.168.2", "csstype": "^3.0.10", "react": ">=18.0.0 || >=19.0.0", "react-dom": ">=18.0.0 || >=19.0.0" }, "optionalPeers": ["csstype"] }, "sha512-jvFKr1fQ5pWMOZTILhitJc1kJt1wj8qqtRClVJvyD1AjHc1XINihkqK+R6+FmC8F2m+XOhKME4CSnTtJ6Nf34w=="],
+
+    "@tanstack/router-devtools-core": ["@tanstack/router-devtools-core@1.167.1", "", { "dependencies": { "clsx": "^2.1.1", "goober": "^2.1.16" }, "peerDependencies": { "@tanstack/router-core": "^1.168.2", "csstype": "^3.0.10" }, "optionalPeers": ["csstype"] }, "sha512-ECMM47J4KmifUvJguGituSiBpfN8SyCUEoxQks5RY09hpIBfR2eswCv2e6cJimjkKwBQXOVTPkTUk/yRvER+9w=="],
+
+    "@tanstack/store": ["@tanstack/store@0.9.3", "", {}, "sha512-8reSzl/qGWGGVKhBoxXPMWzATSbZLZFWhwBAFO9NAyp0TxzfBP0mIrGb8CP8KrQTmvzXlR/vFPPUrHTLBGyFyw=="],
+
+    "@tanstack/virtual-core": ["@tanstack/virtual-core@3.13.23", "", {}, "sha512-zSz2Z2HNyLjCplANTDyl3BcdQJc2k1+yyFoKhNRmCr7V7dY8o8q5m8uFTI1/Pg1kL+Hgrz6u3Xo6eFUB7l66cg=="],
 
     "@tauri-apps/api": ["@tauri-apps/api@2.10.1", "", {}, "sha512-hKL/jWf293UDSUN09rR69hrToyIXBb8CjGaWC7gfinvnQrBVvnLr08FeFi38gxtugAVyVcTa5/FD/Xnkb1siBw=="],
 
     "@tauri-apps/plugin-shell": ["@tauri-apps/plugin-shell@2.3.5", "", { "dependencies": { "@tauri-apps/api": "^2.10.1" } }, "sha512-jewtULhiQ7lI7+owCKAjc8tYLJr92U16bPOeAa472LHJdgaibLP83NcfAF2e+wkEcA53FxKQAZ7byDzs2eeizg=="],
 
-    "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, ""],
+    "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
 
-    "@types/babel__generator": ["@types/babel__generator@7.27.0", "", { "dependencies": { "@babel/types": "^7.0.0" } }, ""],
+    "@types/babel__generator": ["@types/babel__generator@7.27.0", "", { "dependencies": { "@babel/types": "^7.0.0" } }, "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg=="],
 
-    "@types/babel__template": ["@types/babel__template@7.4.4", "", { "dependencies": { "@babel/parser": "^7.1.0", "@babel/types": "^7.0.0" } }, ""],
+    "@types/babel__template": ["@types/babel__template@7.4.4", "", { "dependencies": { "@babel/parser": "^7.1.0", "@babel/types": "^7.0.0" } }, "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A=="],
 
-    "@types/babel__traverse": ["@types/babel__traverse@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.2" } }, ""],
+    "@types/babel__traverse": ["@types/babel__traverse@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.2" } }, "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q=="],
 
     "@types/d3": ["@types/d3@7.4.3", "", { "dependencies": { "@types/d3-array": "*", "@types/d3-axis": "*", "@types/d3-brush": "*", "@types/d3-chord": "*", "@types/d3-color": "*", "@types/d3-contour": "*", "@types/d3-delaunay": "*", "@types/d3-dispatch": "*", "@types/d3-drag": "*", "@types/d3-dsv": "*", "@types/d3-ease": "*", "@types/d3-fetch": "*", "@types/d3-force": "*", "@types/d3-format": "*", "@types/d3-geo": "*", "@types/d3-hierarchy": "*", "@types/d3-interpolate": "*", "@types/d3-path": "*", "@types/d3-polygon": "*", "@types/d3-quadtree": "*", "@types/d3-random": "*", "@types/d3-scale": "*", "@types/d3-scale-chromatic": "*", "@types/d3-selection": "*", "@types/d3-shape": "*", "@types/d3-time": "*", "@types/d3-time-format": "*", "@types/d3-timer": "*", "@types/d3-transition": "*", "@types/d3-zoom": "*" } }, "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww=="],
 
-    "@types/d3-array": ["@types/d3-array@3.2.2", "", {}, ""],
+    "@types/d3-array": ["@types/d3-array@3.2.2", "", {}, "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw=="],
 
     "@types/d3-axis": ["@types/d3-axis@3.0.6", "", { "dependencies": { "@types/d3-selection": "*" } }, "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw=="],
 
@@ -548,7 +689,7 @@
 
     "@types/d3-chord": ["@types/d3-chord@3.0.6", "", {}, "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg=="],
 
-    "@types/d3-color": ["@types/d3-color@3.1.3", "", {}, ""],
+    "@types/d3-color": ["@types/d3-color@3.1.3", "", {}, "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="],
 
     "@types/d3-contour": ["@types/d3-contour@3.0.6", "", { "dependencies": { "@types/d3-array": "*", "@types/geojson": "*" } }, "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg=="],
 
@@ -560,7 +701,7 @@
 
     "@types/d3-dsv": ["@types/d3-dsv@3.0.7", "", {}, "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g=="],
 
-    "@types/d3-ease": ["@types/d3-ease@3.0.2", "", {}, ""],
+    "@types/d3-ease": ["@types/d3-ease@3.0.2", "", {}, "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="],
 
     "@types/d3-fetch": ["@types/d3-fetch@3.0.7", "", { "dependencies": { "@types/d3-dsv": "*" } }, "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA=="],
 
@@ -572,9 +713,9 @@
 
     "@types/d3-hierarchy": ["@types/d3-hierarchy@3.1.7", "", {}, "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg=="],
 
-    "@types/d3-interpolate": ["@types/d3-interpolate@3.0.4", "", { "dependencies": { "@types/d3-color": "*" } }, ""],
+    "@types/d3-interpolate": ["@types/d3-interpolate@3.0.4", "", { "dependencies": { "@types/d3-color": "*" } }, "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA=="],
 
-    "@types/d3-path": ["@types/d3-path@3.1.1", "", {}, ""],
+    "@types/d3-path": ["@types/d3-path@3.1.1", "", {}, "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="],
 
     "@types/d3-polygon": ["@types/d3-polygon@3.0.2", "", {}, "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA=="],
 
@@ -582,88 +723,84 @@
 
     "@types/d3-random": ["@types/d3-random@3.0.3", "", {}, "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ=="],
 
-    "@types/d3-scale": ["@types/d3-scale@4.0.9", "", { "dependencies": { "@types/d3-time": "*" } }, ""],
+    "@types/d3-scale": ["@types/d3-scale@4.0.9", "", { "dependencies": { "@types/d3-time": "*" } }, "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw=="],
 
     "@types/d3-scale-chromatic": ["@types/d3-scale-chromatic@3.1.0", "", {}, "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ=="],
 
     "@types/d3-selection": ["@types/d3-selection@3.0.11", "", {}, "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w=="],
 
-    "@types/d3-shape": ["@types/d3-shape@3.1.8", "", { "dependencies": { "@types/d3-path": "*" } }, ""],
+    "@types/d3-shape": ["@types/d3-shape@3.1.8", "", { "dependencies": { "@types/d3-path": "*" } }, "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w=="],
 
-    "@types/d3-time": ["@types/d3-time@3.0.4", "", {}, ""],
+    "@types/d3-time": ["@types/d3-time@3.0.4", "", {}, "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="],
 
     "@types/d3-time-format": ["@types/d3-time-format@4.0.3", "", {}, "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg=="],
 
-    "@types/d3-timer": ["@types/d3-timer@3.0.2", "", {}, ""],
+    "@types/d3-timer": ["@types/d3-timer@3.0.2", "", {}, "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="],
 
     "@types/d3-transition": ["@types/d3-transition@3.0.9", "", { "dependencies": { "@types/d3-selection": "*" } }, "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg=="],
 
     "@types/d3-zoom": ["@types/d3-zoom@3.0.8", "", { "dependencies": { "@types/d3-interpolate": "*", "@types/d3-selection": "*" } }, "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw=="],
 
-    "@types/debug": ["@types/debug@4.1.12", "", { "dependencies": { "@types/ms": "*" } }, ""],
+    "@types/debug": ["@types/debug@4.1.13", "", { "dependencies": { "@types/ms": "*" } }, "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw=="],
 
-    "@types/estree": ["@types/estree@1.0.8", "", {}, ""],
+    "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
 
-    "@types/estree-jsx": ["@types/estree-jsx@1.0.5", "", { "dependencies": { "@types/estree": "*" } }, ""],
+    "@types/estree-jsx": ["@types/estree-jsx@1.0.5", "", { "dependencies": { "@types/estree": "*" } }, "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg=="],
 
     "@types/geojson": ["@types/geojson@7946.0.16", "", {}, "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="],
 
-    "@types/hast": ["@types/hast@3.0.4", "", { "dependencies": { "@types/unist": "*" } }, ""],
+    "@types/hast": ["@types/hast@3.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ=="],
 
     "@types/js-cookie": ["@types/js-cookie@3.0.6", "", {}, "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ=="],
 
     "@types/katex": ["@types/katex@0.16.8", "", {}, "sha512-trgaNyfU+Xh2Tc+ABIb44a5AYUpicB3uwirOioeOkNPPbmgRNtcWyDeeFRzjPZENO9Vq8gvVqfhaaXWLlevVwg=="],
 
-    "@types/mdast": ["@types/mdast@4.0.4", "", { "dependencies": { "@types/unist": "*" } }, ""],
+    "@types/mdast": ["@types/mdast@4.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA=="],
 
     "@types/mdx": ["@types/mdx@2.0.13", "", {}, "sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw=="],
 
-    "@types/ms": ["@types/ms@2.1.0", "", {}, ""],
+    "@types/ms": ["@types/ms@2.1.0", "", {}, "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA=="],
 
     "@types/parse-json": ["@types/parse-json@4.0.2", "", {}, "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="],
 
-    "@types/react": ["@types/react@19.2.14", "", { "dependencies": { "csstype": "^3.2.2" } }, ""],
+    "@types/react": ["@types/react@19.2.14", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w=="],
 
-    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, ""],
+    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
 
     "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
 
-    "@types/unist": ["@types/unist@3.0.3", "", {}, ""],
+    "@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
+
+    "@types/use-sync-external-store": ["@types/use-sync-external-store@0.0.6", "", {}, "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="],
 
-    "@types/use-sync-external-store": ["@types/use-sync-external-store@0.0.6", "", {}, ""],
+    "@ungap/structured-clone": ["@ungap/structured-clone@1.3.0", "", {}, "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="],
 
-    "@ungap/structured-clone": ["@ungap/structured-clone@1.3.0", "", {}, ""],
+    "@upsetjs/venn.js": ["@upsetjs/venn.js@2.0.0", "", { "optionalDependencies": { "d3-selection": "^3.0.0", "d3-transition": "^3.0.1" } }, "sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw=="],
 
     "@use-gesture/core": ["@use-gesture/core@10.3.1", "", {}, "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw=="],
 
     "@use-gesture/react": ["@use-gesture/react@10.3.1", "", { "dependencies": { "@use-gesture/core": "10.3.1" }, "peerDependencies": { "react": ">= 16.8.0" } }, "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g=="],
 
-    "@vitejs/plugin-react": ["@vitejs/plugin-react@4.7.0", "", { "dependencies": { "@babel/core": "^7.28.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.27", "@types/babel__core": "^7.20.5", "react-refresh": "^0.17.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, ""],
+    "@vitejs/plugin-react": ["@vitejs/plugin-react@4.7.0", "", { "dependencies": { "@babel/core": "^7.28.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.27", "@types/babel__core": "^7.20.5", "react-refresh": "^0.17.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA=="],
 
-    "@xyflow/react": ["@xyflow/react@12.10.1", "", { "dependencies": { "@xyflow/system": "0.0.75", "classcat": "^5.0.3", "zustand": "^4.4.0" }, "peerDependencies": { "react": ">=17", "react-dom": ">=17" } }, "sha512-5eSWtIK/+rkldOuFbOOz44CRgQRjtS9v5nufk77DV+XBnfCGL9HAQ8PG00o2ZYKqkEU/Ak6wrKC95Tu+2zuK3Q=="],
+    "@xyflow/react": ["@xyflow/react@12.10.2", "", { "dependencies": { "@xyflow/system": "0.0.76", "classcat": "^5.0.3", "zustand": "^4.4.0" }, "peerDependencies": { "react": ">=17", "react-dom": ">=17" } }, "sha512-CgIi6HwlcHXwlkTpr0fxLv/0sRVNZ8IdwKLzzeCscaYBwpvfcH1QFOCeaTCuEn1FQEs/B8CjnTSjhs8udgmBgQ=="],
 
-    "@xyflow/system": ["@xyflow/system@0.0.75", "", { "dependencies": { "@types/d3-drag": "^3.0.7", "@types/d3-interpolate": "^3.0.4", "@types/d3-selection": "^3.0.10", "@types/d3-transition": "^3.0.8", "@types/d3-zoom": "^3.0.8", "d3-drag": "^3.0.0", "d3-interpolate": "^3.0.1", "d3-selection": "^3.0.0", "d3-zoom": "^3.0.0" } }, "sha512-iXs+AGFLi8w/VlAoc/iSxk+CxfT6o64Uw/k0CKASOPqjqz6E0rb5jFZgJtXGZCpfQI6OQpu5EnumP5fGxQheaQ=="],
+    "@xyflow/system": ["@xyflow/system@0.0.76", "", { "dependencies": { "@types/d3-drag": "^3.0.7", "@types/d3-interpolate": "^3.0.4", "@types/d3-selection": "^3.0.10", "@types/d3-transition": "^3.0.8", "@types/d3-zoom": "^3.0.8", "d3-drag": "^3.0.0", "d3-interpolate": "^3.0.1", "d3-selection": "^3.0.0", "d3-zoom": "^3.0.0" } }, "sha512-hvwvnRS1B3REwVDlWexsq7YQaPZeG3/mKo1jv38UmnpWmxihp14bW6VtEOuHEwJX2FvzFw8k77LyKSk/wiZVNA=="],
 
-    "acorn": ["acorn@8.15.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="],
+    "acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
 
     "acorn-jsx": ["acorn-jsx@5.3.2", "", { "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="],
 
     "agent-base": ["agent-base@7.1.4", "", {}, "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ=="],
 
-    "ahooks": ["ahooks@3.9.6", "", { "dependencies": { "@babel/runtime": "^7.21.0", "@types/js-cookie": "^3.0.6", "dayjs": "^1.9.1", "intersection-observer": "^0.12.0", "js-cookie": "^3.0.5", "lodash": "^4.17.21", "react-fast-compare": "^3.2.2", "resize-observer-polyfill": "^1.5.1", "screenfull": "^5.0.0", "tslib": "^2.4.1" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Mr7f05swd5SmKlR9SZo5U6M0LsL4ErweLzpdgXjA1JPmnZ78Vr6wzx0jUtvoxrcqGKYnX0Yjc02iEASVxHFPjQ=="],
+    "ahooks": ["ahooks@3.9.7", "", { "dependencies": { "@babel/runtime": "^7.21.0", "@types/js-cookie": "^3.0.6", "dayjs": "^1.9.1", "intersection-observer": "^0.12.0", "js-cookie": "^3.0.5", "lodash": "^4.17.21", "react-fast-compare": "^3.2.2", "resize-observer-polyfill": "^1.5.1", "screenfull": "^5.0.0", "tslib": "^2.4.1" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-S0lvzhbdlhK36RFBkGv+RbOM/dbbweym+BIHM/bwwuWVSVN5TuVErHPMWo4w0t1NDYg5KPp2iEf7Y7E5LASYiw=="],
 
     "ansi-colors": ["ansi-colors@4.1.3", "", {}, "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw=="],
 
-    "antd": ["antd@6.3.0", "", { "dependencies": { "@ant-design/colors": "^8.0.1", "@ant-design/cssinjs": "^2.1.0", "@ant-design/cssinjs-utils": "^2.1.1", "@ant-design/fast-color": "^3.0.1", "@ant-design/icons": "^6.1.0", "@ant-design/react-slick": "~2.0.0", "@babel/runtime": "^7.28.4", "@rc-component/cascader": "~1.14.0", "@rc-component/checkbox": "~2.0.0", "@rc-component/collapse": "~1.2.0", "@rc-component/color-picker": "~3.1.0", "@rc-component/dialog": "~1.8.4", "@rc-component/drawer": "~1.4.2", "@rc-component/dropdown": "~1.0.2", "@rc-component/form": "~1.6.2", "@rc-component/image": "~1.6.0", "@rc-component/input": "~1.1.2", "@rc-component/input-number": "~1.6.2", "@rc-component/mentions": "~1.6.0", "@rc-component/menu": "~1.2.0", "@rc-component/motion": "~1.1.6", "@rc-component/mutate-observer": "^2.0.1", "@rc-component/notification": "~1.2.0", "@rc-component/pagination": "~1.2.0", "@rc-component/picker": "~1.9.0", "@rc-component/progress": "~1.0.2", "@rc-component/qrcode": "~1.1.1", "@rc-component/rate": "~1.0.1", "@rc-component/resize-observer": "^1.1.1", "@rc-component/segmented": "~1.3.0", "@rc-component/select": "~1.6.5", "@rc-component/slider": "~1.0.1", "@rc-component/steps": "~1.2.2", "@rc-component/switch": "~1.0.3", "@rc-component/table": "~1.9.1", "@rc-component/tabs": "~1.7.0", "@rc-component/textarea": "~1.1.2", "@rc-component/tooltip": "~1.4.0", "@rc-component/tour": "~2.3.0", "@rc-component/tree": "~1.2.3", "@rc-component/tree-select": "~1.8.0", "@rc-component/trigger": "^3.9.0", "@rc-component/upload": "~1.1.0", "@rc-component/util": "^1.9.0", "clsx": "^2.1.1", "dayjs": "^1.11.11", "scroll-into-view-if-needed": "^3.1.0", "throttle-debounce": "^5.0.2" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-bbHJcASrRHp02wTpr940KtUHlTT6tvmaD4OAjqgOJXNmTQ/+qBDdBVWY/yeDV41p/WbWjTLlaqRGVbL3UEVpNw=="],
+    "antd": ["antd@6.3.5", "", { "dependencies": { "@ant-design/colors": "^8.0.1", "@ant-design/cssinjs": "^2.1.2", "@ant-design/cssinjs-utils": "^2.1.2", "@ant-design/fast-color": "^3.0.1", "@ant-design/icons": "^6.1.1", "@ant-design/react-slick": "~2.0.0", "@babel/runtime": "^7.28.4", "@rc-component/cascader": "~1.14.0", "@rc-component/checkbox": "~2.0.0", "@rc-component/collapse": "~1.2.0", "@rc-component/color-picker": "~3.1.1", "@rc-component/dialog": "~1.8.4", "@rc-component/drawer": "~1.4.2", "@rc-component/dropdown": "~1.0.2", "@rc-component/form": "~1.8.0", "@rc-component/image": "~1.8.0", "@rc-component/input": "~1.1.2", "@rc-component/input-number": "~1.6.2", "@rc-component/mentions": "~1.6.0", "@rc-component/menu": "~1.2.0", "@rc-component/motion": "^1.3.2", "@rc-component/mutate-observer": "^2.0.1", "@rc-component/notification": "~1.2.0", "@rc-component/pagination": "~1.2.0", "@rc-component/picker": "~1.9.1", "@rc-component/progress": "~1.0.2", "@rc-component/qrcode": "~1.1.1", "@rc-component/rate": "~1.0.1", "@rc-component/resize-observer": "^1.1.2", "@rc-component/segmented": "~1.3.0", "@rc-component/select": "~1.6.15", "@rc-component/slider": "~1.0.1", "@rc-component/steps": "~1.2.2", "@rc-component/switch": "~1.0.3", "@rc-component/table": "~1.9.1", "@rc-component/tabs": "~1.7.0", "@rc-component/textarea": "~1.1.2", "@rc-component/tooltip": "~1.4.0", "@rc-component/tour": "~2.3.0", "@rc-component/tree": "~1.2.4", "@rc-component/tree-select": "~1.8.0", "@rc-component/trigger": "^3.9.0", "@rc-component/upload": "~1.1.0", "@rc-component/util": "^1.10.0", "clsx": "^2.1.1", "dayjs": "^1.11.11", "scroll-into-view-if-needed": "^3.1.0", "throttle-debounce": "^5.0.2" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-8BPz9lpZWQm42PTx7yL4KxWAotVuqINiKcoYRcLtdd5BFmAcAZicVyFTnBJyRDlzGZFZeRW3foGu6jXYFnej6Q=="],
 
     "antd-style": ["antd-style@4.1.0", "", { "dependencies": { "@ant-design/cssinjs": "^2.0.0", "@babel/runtime": "^7.24.1", "@emotion/cache": "^11.11.0", "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.4", "@emotion/serialize": "^1.1.3", "@emotion/utils": "^1.2.1", "use-merge-value": "^1.2.0" }, "peerDependencies": { "antd": ">=6.0.0", "react": ">=18" } }, "sha512-vnPBGg0OVlSz90KRYZhxd89aZiOImTiesF+9MQqN8jsLGZUQTjbP04X9jTdEfsztKUuMbBWg/RmB/wHTakbtMQ=="],
 
-    "any-promise": ["any-promise@1.3.0", "", {}, ""],
-
-    "anymatch": ["anymatch@3.1.3", "", { "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" } }, ""],
-
-    "arg": ["arg@5.0.2", "", {}, ""],
-
     "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
 
     "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],
@@ -674,47 +811,39 @@
 
     "attr-accept": ["attr-accept@2.2.5", "", {}, "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ=="],
 
-    "autoprefixer": ["autoprefixer@10.4.24", "", { "dependencies": { "browserslist": "^4.28.1", "caniuse-lite": "^1.0.30001766", "fraction.js": "^5.3.4", "picocolors": "^1.1.1", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.1.0" }, "bin": "bin/autoprefixer" }, ""],
-
     "babel-plugin-macros": ["babel-plugin-macros@3.1.0", "", { "dependencies": { "@babel/runtime": "^7.12.5", "cosmiconfig": "^7.0.0", "resolve": "^1.19.0" } }, "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg=="],
 
-    "bail": ["bail@2.0.2", "", {}, ""],
+    "bail": ["bail@2.0.2", "", {}, "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw=="],
 
     "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
 
-    "baseline-browser-mapping": ["baseline-browser-mapping@2.9.19", "", { "bin": "dist/cli.js" }, ""],
-
-    "binary-extensions": ["binary-extensions@2.3.0", "", {}, ""],
+    "baseline-browser-mapping": ["baseline-browser-mapping@2.10.17", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-HdrkN8eVG2CXxeifv/VdJ4A4RSra1DTW8dc/hdxzhGHN8QePs6gKaWM9pHPcpCoxYZJuOZ8drHmbdpLHjCYjLA=="],
 
-    "brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
+    "brace-expansion": ["brace-expansion@2.0.3", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-MCV/fYJEbqx68aE58kv2cA/kiky1G8vux3OR6/jbS+jIMe/6fJWa0DTzJU7dqijOWYwHi1t29FlfYI9uytqlpA=="],
 
-    "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, ""],
-
-    "browserslist": ["browserslist@4.28.1", "", { "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", "electron-to-chromium": "^1.5.263", "node-releases": "^2.0.27", "update-browserslist-db": "^1.2.0" }, "bin": "cli.js" }, ""],
+    "browserslist": ["browserslist@4.28.2", "", { "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", "electron-to-chromium": "^1.5.328", "node-releases": "^2.0.36", "update-browserslist-db": "^1.2.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg=="],
 
     "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
 
-    "camelcase-css": ["camelcase-css@2.0.1", "", {}, ""],
+    "camelize": ["camelize@1.0.1", "", {}, "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="],
 
-    "caniuse-lite": ["caniuse-lite@1.0.30001769", "", {}, ""],
+    "caniuse-lite": ["caniuse-lite@1.0.30001787", "", {}, "sha512-mNcrMN9KeI68u7muanUpEejSLghOKlVhRqS/Za2IeyGllJ9I9otGpR9g3nsw7n4W378TE/LyIteA0+/FOZm4Kg=="],
 
-    "ccount": ["ccount@2.0.1", "", {}, ""],
+    "ccount": ["ccount@2.0.1", "", {}, "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg=="],
 
     "change-case": ["change-case@5.4.4", "", {}, "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w=="],
 
-    "character-entities": ["character-entities@2.0.2", "", {}, ""],
-
-    "character-entities-html4": ["character-entities-html4@2.1.0", "", {}, ""],
+    "character-entities": ["character-entities@2.0.2", "", {}, "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ=="],
 
-    "character-entities-legacy": ["character-entities-legacy@3.0.0", "", {}, ""],
+    "character-entities-html4": ["character-entities-html4@2.1.0", "", {}, "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA=="],
 
-    "character-reference-invalid": ["character-reference-invalid@2.0.1", "", {}, ""],
+    "character-entities-legacy": ["character-entities-legacy@3.0.0", "", {}, "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ=="],
 
-    "chevrotain": ["chevrotain@11.0.3", "", { "dependencies": { "@chevrotain/cst-dts-gen": "11.0.3", "@chevrotain/gast": "11.0.3", "@chevrotain/regexp-to-ast": "11.0.3", "@chevrotain/types": "11.0.3", "@chevrotain/utils": "11.0.3", "lodash-es": "4.17.21" } }, "sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw=="],
+    "character-reference-invalid": ["character-reference-invalid@2.0.1", "", {}, "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw=="],
 
-    "chevrotain-allstar": ["chevrotain-allstar@0.3.1", "", { "dependencies": { "lodash-es": "^4.17.21" }, "peerDependencies": { "chevrotain": "^11.0.0" } }, "sha512-b7g+y9A0v4mxCW1qUhf3BSVPg+/NvGErk/dOkrDaHA0nQIQGAtrOjlX//9OQtRlSCy+x9rfB5N8yC71lH1nvMw=="],
+    "chevrotain": ["chevrotain@12.0.0", "", { "dependencies": { "@chevrotain/cst-dts-gen": "12.0.0", "@chevrotain/gast": "12.0.0", "@chevrotain/regexp-to-ast": "12.0.0", "@chevrotain/types": "12.0.0", "@chevrotain/utils": "12.0.0" } }, "sha512-csJvb+6kEiQaqo1woTdSAuOWdN0WTLIydkKrBnS+V5gZz0oqBrp4kQ35519QgK6TpBThiG3V1vNSHlIkv4AglQ=="],
 
-    "chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, ""],
+    "chevrotain-allstar": ["chevrotain-allstar@0.4.1", "", { "dependencies": { "lodash-es": "^4.17.21" }, "peerDependencies": { "chevrotain": "^12.0.0" } }, "sha512-PvVJm3oGqrveUVW2Vt/eZGeiAIsJszYweUcYwcskg9e+IubNYKKD+rHHem7A6XVO22eDAL+inxNIGAzZ/VIWlA=="],
 
     "chroma-js": ["chroma-js@3.2.0", "", {}, "sha512-os/OippSlX1RlWWr+QDPcGUZs0uoqr32urfxESG9U93lhUfbnlyckte84Q8P1UQY/qth983AS1JONKmLS4T0nw=="],
 
@@ -724,7 +853,9 @@
 
     "classnames": ["classnames@2.5.1", "", {}, "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="],
 
-    "clsx": ["clsx@2.1.1", "", {}, ""],
+    "client-only": ["client-only@0.0.1", "", {}, "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="],
+
+    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
     "codemirror": ["codemirror@6.0.2", "", { "dependencies": { "@codemirror/autocomplete": "^6.0.0", "@codemirror/commands": "^6.0.0", "@codemirror/language": "^6.0.0", "@codemirror/lint": "^6.0.0", "@codemirror/search": "^6.0.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0" } }, "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw=="],
 
@@ -734,17 +865,17 @@
 
     "colorette": ["colorette@1.4.0", "", {}, "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g=="],
 
-    "comma-separated-tokens": ["comma-separated-tokens@2.0.3", "", {}, ""],
+    "comma-separated-tokens": ["comma-separated-tokens@2.0.3", "", {}, "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg=="],
 
-    "commander": ["commander@4.1.1", "", {}, ""],
+    "commander": ["commander@8.3.0", "", {}, "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="],
 
     "compute-scroll-into-view": ["compute-scroll-into-view@3.1.1", "", {}, "sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw=="],
 
     "confbox": ["confbox@0.1.8", "", {}, "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w=="],
 
-    "convert-source-map": ["convert-source-map@2.0.0", "", {}, ""],
+    "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
 
-    "cookie-es": ["cookie-es@2.0.0", "", {}, ""],
+    "cookie-es": ["cookie-es@2.0.1", "", {}, "sha512-aVf4A4hI2w70LnF7GG+7xDQUkliwiXWXFvTjkip4+b64ygDQ2sJPRSKFDHbxn8o0xu9QzPkMuuiWIXyFSE2slA=="],
 
     "cose-base": ["cose-base@1.0.3", "", { "dependencies": { "layout-base": "^1.0.0" } }, "sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg=="],
 
@@ -752,11 +883,13 @@
 
     "crelt": ["crelt@1.0.6", "", {}, "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="],
 
-    "cssesc": ["cssesc@3.0.0", "", { "bin": "bin/cssesc" }, ""],
+    "css-color-keywords": ["css-color-keywords@1.0.0", "", {}, "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="],
 
-    "csstype": ["csstype@3.2.3", "", {}, ""],
+    "css-to-react-native": ["css-to-react-native@3.2.0", "", { "dependencies": { "camelize": "^1.0.0", "css-color-keywords": "^1.0.0", "postcss-value-parser": "^4.0.2" } }, "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ=="],
 
-    "cytoscape": ["cytoscape@3.33.1", "", {}, "sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ=="],
+    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
+
+    "cytoscape": ["cytoscape@3.33.2", "", {}, "sha512-sj4HXd3DokGhzZAdjDejGvTPLqlt84vNFN8m7bGsOzDY5DyVcxIb2ejIXat2Iy7HxWhdT/N1oKyheJ5YdpsGuw=="],
 
     "cytoscape-cose-bilkent": ["cytoscape-cose-bilkent@4.1.0", "", { "dependencies": { "cose-base": "^1.0.0" }, "peerDependencies": { "cytoscape": "^3.2.0" } }, "sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ=="],
 
@@ -764,7 +897,7 @@
 
     "d3": ["d3@7.9.0", "", { "dependencies": { "d3-array": "3", "d3-axis": "3", "d3-brush": "3", "d3-chord": "3", "d3-color": "3", "d3-contour": "4", "d3-delaunay": "6", "d3-dispatch": "3", "d3-drag": "3", "d3-dsv": "3", "d3-ease": "3", "d3-fetch": "3", "d3-force": "3", "d3-format": "3", "d3-geo": "3", "d3-hierarchy": "3", "d3-interpolate": "3", "d3-path": "3", "d3-polygon": "3", "d3-quadtree": "3", "d3-random": "3", "d3-scale": "4", "d3-scale-chromatic": "3", "d3-selection": "3", "d3-shape": "3", "d3-time": "3", "d3-time-format": "4", "d3-timer": "3", "d3-transition": "3", "d3-zoom": "3" } }, "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA=="],
 
-    "d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, ""],
+    "d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
 
     "d3-axis": ["d3-axis@3.0.0", "", {}, "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="],
 
@@ -772,7 +905,7 @@
 
     "d3-chord": ["d3-chord@3.0.1", "", { "dependencies": { "d3-path": "1 - 3" } }, "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g=="],
 
-    "d3-color": ["d3-color@3.1.0", "", {}, ""],
+    "d3-color": ["d3-color@3.1.0", "", {}, "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="],
 
     "d3-contour": ["d3-contour@4.0.2", "", { "dependencies": { "d3-array": "^3.2.0" } }, "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA=="],
 
@@ -784,21 +917,21 @@
 
     "d3-dsv": ["d3-dsv@3.0.1", "", { "dependencies": { "commander": "7", "iconv-lite": "0.6", "rw": "1" }, "bin": { "csv2json": "bin/dsv2json.js", "csv2tsv": "bin/dsv2dsv.js", "dsv2dsv": "bin/dsv2dsv.js", "dsv2json": "bin/dsv2json.js", "json2csv": "bin/json2dsv.js", "json2dsv": "bin/json2dsv.js", "json2tsv": "bin/json2dsv.js", "tsv2csv": "bin/dsv2dsv.js", "tsv2json": "bin/dsv2json.js" } }, "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q=="],
 
-    "d3-ease": ["d3-ease@3.0.1", "", {}, ""],
+    "d3-ease": ["d3-ease@3.0.1", "", {}, "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="],
 
     "d3-fetch": ["d3-fetch@3.0.1", "", { "dependencies": { "d3-dsv": "1 - 3" } }, "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw=="],
 
     "d3-force": ["d3-force@3.0.0", "", { "dependencies": { "d3-dispatch": "1 - 3", "d3-quadtree": "1 - 3", "d3-timer": "1 - 3" } }, "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg=="],
 
-    "d3-format": ["d3-format@3.1.2", "", {}, ""],
+    "d3-format": ["d3-format@3.1.2", "", {}, "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg=="],
 
     "d3-geo": ["d3-geo@3.1.1", "", { "dependencies": { "d3-array": "2.5.0 - 3" } }, "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q=="],
 
     "d3-hierarchy": ["d3-hierarchy@3.1.2", "", {}, "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA=="],
 
-    "d3-interpolate": ["d3-interpolate@3.0.1", "", { "dependencies": { "d3-color": "1 - 3" } }, ""],
+    "d3-interpolate": ["d3-interpolate@3.0.1", "", { "dependencies": { "d3-color": "1 - 3" } }, "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g=="],
 
-    "d3-path": ["d3-path@3.1.0", "", {}, ""],
+    "d3-path": ["d3-path@3.1.0", "", {}, "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="],
 
     "d3-polygon": ["d3-polygon@3.0.1", "", {}, "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg=="],
 
@@ -808,73 +941,71 @@
 
     "d3-sankey": ["d3-sankey@0.12.3", "", { "dependencies": { "d3-array": "1 - 2", "d3-shape": "^1.2.0" } }, "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ=="],
 
-    "d3-scale": ["d3-scale@4.0.2", "", { "dependencies": { "d3-array": "2.10.0 - 3", "d3-format": "1 - 3", "d3-interpolate": "1.2.0 - 3", "d3-time": "2.1.1 - 3", "d3-time-format": "2 - 4" } }, ""],
+    "d3-scale": ["d3-scale@4.0.2", "", { "dependencies": { "d3-array": "2.10.0 - 3", "d3-format": "1 - 3", "d3-interpolate": "1.2.0 - 3", "d3-time": "2.1.1 - 3", "d3-time-format": "2 - 4" } }, "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ=="],
 
     "d3-scale-chromatic": ["d3-scale-chromatic@3.1.0", "", { "dependencies": { "d3-color": "1 - 3", "d3-interpolate": "1 - 3" } }, "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ=="],
 
     "d3-selection": ["d3-selection@3.0.0", "", {}, "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="],
 
-    "d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, ""],
+    "d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],
 
-    "d3-time": ["d3-time@3.1.0", "", { "dependencies": { "d3-array": "2 - 3" } }, ""],
+    "d3-time": ["d3-time@3.1.0", "", { "dependencies": { "d3-array": "2 - 3" } }, "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q=="],
 
-    "d3-time-format": ["d3-time-format@4.1.0", "", { "dependencies": { "d3-time": "1 - 3" } }, ""],
+    "d3-time-format": ["d3-time-format@4.1.0", "", { "dependencies": { "d3-time": "1 - 3" } }, "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg=="],
 
-    "d3-timer": ["d3-timer@3.0.1", "", {}, ""],
+    "d3-timer": ["d3-timer@3.0.1", "", {}, "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="],
 
     "d3-transition": ["d3-transition@3.0.1", "", { "dependencies": { "d3-color": "1 - 3", "d3-dispatch": "1 - 3", "d3-ease": "1 - 3", "d3-interpolate": "1 - 3", "d3-timer": "1 - 3" }, "peerDependencies": { "d3-selection": "2 - 3" } }, "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w=="],
 
     "d3-zoom": ["d3-zoom@3.0.0", "", { "dependencies": { "d3-dispatch": "1 - 3", "d3-drag": "2 - 3", "d3-interpolate": "1 - 3", "d3-selection": "2 - 3", "d3-transition": "2 - 3" } }, "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw=="],
 
-    "dagre-d3-es": ["dagre-d3-es@7.0.13", "", { "dependencies": { "d3": "^7.9.0", "lodash-es": "^4.17.21" } }, "sha512-efEhnxpSuwpYOKRm/L5KbqoZmNNukHa/Flty4Wp62JRvgH2ojwVgPgdYyr4twpieZnyRDdIH7PY2mopX26+j2Q=="],
+    "dagre-d3-es": ["dagre-d3-es@7.0.14", "", { "dependencies": { "d3": "^7.9.0", "lodash-es": "^4.17.21" } }, "sha512-P4rFMVq9ESWqmOgK+dlXvOtLwYg0i7u0HBGJER0LZDJT2VHIPAMZ/riPxqJceWMStH5+E61QxFra9kIS3AqdMg=="],
 
-    "dayjs": ["dayjs@1.11.19", "", {}, "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw=="],
+    "dayjs": ["dayjs@1.11.20", "", {}, "sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ=="],
 
-    "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, ""],
+    "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
-    "decimal.js-light": ["decimal.js-light@2.5.1", "", {}, ""],
+    "decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],
 
-    "decode-named-character-reference": ["decode-named-character-reference@1.3.0", "", { "dependencies": { "character-entities": "^2.0.0" } }, ""],
+    "decode-named-character-reference": ["decode-named-character-reference@1.3.0", "", { "dependencies": { "character-entities": "^2.0.0" } }, "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q=="],
 
     "decode-uri-component": ["decode-uri-component@0.4.1", "", {}, "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ=="],
 
-    "delaunator": ["delaunator@5.0.1", "", { "dependencies": { "robust-predicates": "^3.0.2" } }, "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw=="],
+    "delaunator": ["delaunator@5.1.0", "", { "dependencies": { "robust-predicates": "^3.0.2" } }, "sha512-AGrQ4QSgssa1NGmWmLPqN5NY2KajF5MqxetNEO+o0n3ZwZZeTmt7bBnvzHWrmkZFxGgr4HdyFgelzgi06otLuQ=="],
 
-    "dequal": ["dequal@2.0.3", "", {}, ""],
+    "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
 
-    "detect-libc": ["detect-libc@2.1.2", "", {}, ""],
+    "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
 
     "detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],
 
-    "devlop": ["devlop@1.1.0", "", { "dependencies": { "dequal": "^2.0.0" } }, ""],
-
-    "didyoumean": ["didyoumean@1.2.2", "", {}, ""],
+    "devlop": ["devlop@1.1.0", "", { "dependencies": { "dequal": "^2.0.0" } }, "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA=="],
 
     "diff": ["diff@8.0.3", "", {}, "sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ=="],
 
-    "dlv": ["dlv@1.1.3", "", {}, ""],
-
-    "dompurify": ["dompurify@3.3.1", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q=="],
+    "dompurify": ["dompurify@3.3.3", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-Oj6pzI2+RqBfFG+qOaOLbFXLQ90ARpcGG6UePL82bJLtdsa6CYJD7nmiU8MW9nQNOtCHV3lZ/Bzq1X0QYbBZCA=="],
 
-    "electron-to-chromium": ["electron-to-chromium@1.5.286", "", {}, ""],
+    "electron-to-chromium": ["electron-to-chromium@1.5.334", "", {}, "sha512-mgjZAz7Jyx1SRCwEpy9wefDS7GvNPazLthHg8eQMJ76wBdGQQDW33TCrUTvQ4wzpmOrv2zrFoD3oNufMdyMpog=="],
 
     "emoji-mart": ["emoji-mart@5.6.0", "", {}, "sha512-eJp3QRe79pjwa+duv+n7+5YsNhRcMl812EcFVwrnRvYKoNPoQb5qxU8DG6Bgwji0akHdp6D4Ln6tYLG58MFSow=="],
 
     "emoji-regex": ["emoji-regex@10.6.0", "", {}, "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A=="],
 
+    "enhanced-resolve": ["enhanced-resolve@5.20.1", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.0" } }, "sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA=="],
+
     "entities": ["entities@6.0.1", "", {}, "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g=="],
 
     "error-ex": ["error-ex@1.3.4", "", { "dependencies": { "is-arrayish": "^0.2.1" } }, "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ=="],
 
-    "es-toolkit": ["es-toolkit@1.44.0", "", {}, ""],
+    "es-toolkit": ["es-toolkit@1.45.1", "", {}, "sha512-/jhoOj/Fx+A+IIyDNOvO3TItGmlMKhtX8ISAHKE90c4b/k1tqaqEZ+uUqfpU8DMnW5cgNJv606zS55jGvza0Xw=="],
 
     "esast-util-from-estree": ["esast-util-from-estree@2.0.0", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "devlop": "^1.0.0", "estree-util-visit": "^2.0.0", "unist-util-position-from-estree": "^2.0.0" } }, "sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ=="],
 
     "esast-util-from-js": ["esast-util-from-js@2.0.1", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "acorn": "^8.0.0", "esast-util-from-estree": "^2.0.0", "vfile-message": "^4.0.0" } }, "sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw=="],
 
-    "esbuild": ["esbuild@0.25.12", "", { "optionalDependencies": { "@esbuild/darwin-arm64": "0.25.12" }, "bin": "bin/esbuild" }, ""],
+    "esbuild": ["esbuild@0.25.12", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.12", "@esbuild/android-arm": "0.25.12", "@esbuild/android-arm64": "0.25.12", "@esbuild/android-x64": "0.25.12", "@esbuild/darwin-arm64": "0.25.12", "@esbuild/darwin-x64": "0.25.12", "@esbuild/freebsd-arm64": "0.25.12", "@esbuild/freebsd-x64": "0.25.12", "@esbuild/linux-arm": "0.25.12", "@esbuild/linux-arm64": "0.25.12", "@esbuild/linux-ia32": "0.25.12", "@esbuild/linux-loong64": "0.25.12", "@esbuild/linux-mips64el": "0.25.12", "@esbuild/linux-ppc64": "0.25.12", "@esbuild/linux-riscv64": "0.25.12", "@esbuild/linux-s390x": "0.25.12", "@esbuild/linux-x64": "0.25.12", "@esbuild/netbsd-arm64": "0.25.12", "@esbuild/netbsd-x64": "0.25.12", "@esbuild/openbsd-arm64": "0.25.12", "@esbuild/openbsd-x64": "0.25.12", "@esbuild/openharmony-arm64": "0.25.12", "@esbuild/sunos-x64": "0.25.12", "@esbuild/win32-arm64": "0.25.12", "@esbuild/win32-ia32": "0.25.12", "@esbuild/win32-x64": "0.25.12" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg=="],
 
-    "escalade": ["escalade@3.2.0", "", {}, ""],
+    "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
 
     "escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="],
 
@@ -882,7 +1013,7 @@
 
     "estree-util-build-jsx": ["estree-util-build-jsx@3.0.1", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "devlop": "^1.0.0", "estree-util-is-identifier-name": "^3.0.0", "estree-walker": "^3.0.0" } }, "sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ=="],
 
-    "estree-util-is-identifier-name": ["estree-util-is-identifier-name@3.0.0", "", {}, ""],
+    "estree-util-is-identifier-name": ["estree-util-is-identifier-name@3.0.0", "", {}, "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg=="],
 
     "estree-util-scope": ["estree-util-scope@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "devlop": "^1.0.0" } }, "sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ=="],
 
@@ -892,43 +1023,35 @@
 
     "estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
 
-    "eventemitter3": ["eventemitter3@5.0.4", "", {}, ""],
+    "eventemitter3": ["eventemitter3@5.0.4", "", {}, "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw=="],
 
     "events": ["events@3.3.0", "", {}, "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="],
 
-    "extend": ["extend@3.0.2", "", {}, ""],
+    "extend": ["extend@3.0.2", "", {}, "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="],
 
     "extend-shallow": ["extend-shallow@2.0.1", "", { "dependencies": { "is-extendable": "^0.1.0" } }, "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug=="],
 
     "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
 
-    "fast-glob": ["fast-glob@3.3.3", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.8" } }, ""],
-
-    "fastq": ["fastq@1.20.1", "", { "dependencies": { "reusify": "^1.0.4" } }, ""],
-
-    "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" } }, ""],
+    "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
 
     "file-selector": ["file-selector@0.5.0", "", { "dependencies": { "tslib": "^2.0.3" } }, "sha512-s8KNnmIDTBoD0p9uJ9uD0XY38SCeBOtj0UMXyQSLg1Ypfrfj8+dAvwsLjYQkQ2GjhVtp2HrnF5cJzMhBjfD8HA=="],
 
-    "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, ""],
-
     "filter-obj": ["filter-obj@5.1.0", "", {}, "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng=="],
 
     "find-root": ["find-root@1.1.0", "", {}, "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="],
 
     "for-in": ["for-in@1.0.2", "", {}, "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ=="],
 
-    "fraction.js": ["fraction.js@5.3.4", "", {}, ""],
-
-    "framer-motion": ["framer-motion@12.34.0", "", { "dependencies": { "motion-dom": "^12.34.0", "motion-utils": "^12.29.2", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid"] }, ""],
+    "framer-motion": ["framer-motion@12.38.0", "", { "dependencies": { "motion-dom": "^12.38.0", "motion-utils": "^12.36.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g=="],
 
-    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, ""],
+    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
-    "function-bind": ["function-bind@1.1.2", "", {}, ""],
+    "function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
 
-    "gensync": ["gensync@1.0.0-beta.2", "", {}, ""],
+    "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
 
-    "get-east-asian-width": ["get-east-asian-width@1.4.0", "", {}, "sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q=="],
+    "get-east-asian-width": ["get-east-asian-width@1.5.0", "", {}, "sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA=="],
 
     "get-nonce": ["get-nonce@1.0.1", "", {}, "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="],
 
@@ -936,9 +1059,9 @@
 
     "giscus": ["giscus@1.6.0", "", { "dependencies": { "lit": "^3.2.1" } }, "sha512-Zrsi8r4t1LVW950keaWcsURuZUQwUaMKjvJgTCY125vkW6OiEBkatE7ScJDbpqKHdZwb///7FVC21SE3iFK3PQ=="],
 
-    "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, ""],
+    "goober": ["goober@2.1.18", "", { "peerDependencies": { "csstype": "^3.0.10" } }, "sha512-2vFqsaDVIT9Gz7N6kAL++pLpp41l3PfDuusHcjnGLfR6+huZkl6ziX+zgVC3ZxpqWhzH6pyDdGrCeDhMIvwaxw=="],
 
-    "goober": ["goober@2.1.18", "", { "peerDependencies": { "csstype": "^3.0.10" } }, ""],
+    "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
 
     "graphology": ["graphology@0.26.0", "", { "dependencies": { "events": "^3.3.0" }, "peerDependencies": { "graphology-types": ">=0.24.0" } }, "sha512-8SSImzgUUYC89Z042s+0r/vMibY7GX/Emz4LDO5e7jYXhuoWfHISPFJYjpRLUSJGq6UQ6xlenvX1p/hJdfXuXg=="],
 
@@ -950,7 +1073,7 @@
 
     "hachure-fill": ["hachure-fill@0.5.2", "", {}, "sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg=="],
 
-    "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, ""],
+    "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
 
     "hast-util-from-dom": ["hast-util-from-dom@5.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "hastscript": "^9.0.0", "web-namespaces": "^2.0.0" } }, "sha512-N+LqofjR2zuzTjCPzyDUdSshy4Ma6li7p/c3pA78uTwzFgENbgbUrm2ugwsOdcjI1muO+o6Dgzp9p8WHtn/39Q=="],
 
@@ -970,19 +1093,19 @@
 
     "hast-util-to-html": ["hast-util-to-html@9.0.5", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "ccount": "^2.0.0", "comma-separated-tokens": "^2.0.0", "hast-util-whitespace": "^3.0.0", "html-void-elements": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0", "stringify-entities": "^4.0.0", "zwitch": "^2.0.4" } }, "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw=="],
 
-    "hast-util-to-jsx-runtime": ["hast-util-to-jsx-runtime@2.3.6", "", { "dependencies": { "@types/estree": "^1.0.0", "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "comma-separated-tokens": "^2.0.0", "devlop": "^1.0.0", "estree-util-is-identifier-name": "^3.0.0", "hast-util-whitespace": "^3.0.0", "mdast-util-mdx-expression": "^2.0.0", "mdast-util-mdx-jsx": "^3.0.0", "mdast-util-mdxjs-esm": "^2.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0", "style-to-js": "^1.0.0", "unist-util-position": "^5.0.0", "vfile-message": "^4.0.0" } }, ""],
+    "hast-util-to-jsx-runtime": ["hast-util-to-jsx-runtime@2.3.6", "", { "dependencies": { "@types/estree": "^1.0.0", "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "comma-separated-tokens": "^2.0.0", "devlop": "^1.0.0", "estree-util-is-identifier-name": "^3.0.0", "hast-util-whitespace": "^3.0.0", "mdast-util-mdx-expression": "^2.0.0", "mdast-util-mdx-jsx": "^3.0.0", "mdast-util-mdxjs-esm": "^2.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0", "style-to-js": "^1.0.0", "unist-util-position": "^5.0.0", "vfile-message": "^4.0.0" } }, "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg=="],
 
     "hast-util-to-parse5": ["hast-util-to-parse5@8.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "comma-separated-tokens": "^2.0.0", "devlop": "^1.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0", "web-namespaces": "^2.0.0", "zwitch": "^2.0.0" } }, "sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA=="],
 
     "hast-util-to-text": ["hast-util-to-text@4.0.2", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "hast-util-is-element": "^3.0.0", "unist-util-find-after": "^5.0.0" } }, "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A=="],
 
-    "hast-util-whitespace": ["hast-util-whitespace@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, ""],
+    "hast-util-whitespace": ["hast-util-whitespace@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw=="],
 
     "hastscript": ["hastscript@9.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "comma-separated-tokens": "^2.0.0", "hast-util-parse-selector": "^4.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0" } }, "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w=="],
 
     "hoist-non-react-statics": ["hoist-non-react-statics@3.3.2", "", { "dependencies": { "react-is": "^16.7.0" } }, "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw=="],
 
-    "html-url-attributes": ["html-url-attributes@3.0.1", "", {}, ""],
+    "html-url-attributes": ["html-url-attributes@3.0.1", "", {}, "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ=="],
 
     "html-void-elements": ["html-void-elements@3.0.0", "", {}, "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg=="],
 
@@ -990,63 +1113,53 @@
 
     "iconv-lite": ["iconv-lite@0.6.3", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw=="],
 
-    "immer": ["immer@10.2.0", "", {}, ""],
-
-    "immutable": ["immutable@5.1.4", "", {}, ""],
+    "immer": ["immer@10.2.0", "", {}, "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw=="],
 
     "import-fresh": ["import-fresh@3.3.1", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ=="],
 
     "index-to-position": ["index-to-position@1.2.0", "", {}, "sha512-Yg7+ztRkqslMAS2iFaU+Oa4KTSidr63OsFGlOrJoW981kIYO3CGCS3wA95P1mUi/IVSJkn0D479KTJpVpvFNuw=="],
 
-    "inline-style-parser": ["inline-style-parser@0.2.7", "", {}, ""],
+    "inline-style-parser": ["inline-style-parser@0.2.7", "", {}, "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA=="],
 
-    "internmap": ["internmap@2.0.3", "", {}, ""],
+    "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
 
     "intersection-observer": ["intersection-observer@0.12.2", "", {}, "sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg=="],
 
-    "is-alphabetical": ["is-alphabetical@2.0.1", "", {}, ""],
+    "is-alphabetical": ["is-alphabetical@2.0.1", "", {}, "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ=="],
 
-    "is-alphanumerical": ["is-alphanumerical@2.0.1", "", { "dependencies": { "is-alphabetical": "^2.0.0", "is-decimal": "^2.0.0" } }, ""],
+    "is-alphanumerical": ["is-alphanumerical@2.0.1", "", { "dependencies": { "is-alphabetical": "^2.0.0", "is-decimal": "^2.0.0" } }, "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw=="],
 
     "is-arrayish": ["is-arrayish@0.2.1", "", {}, "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="],
 
-    "is-binary-path": ["is-binary-path@2.1.0", "", { "dependencies": { "binary-extensions": "^2.0.0" } }, ""],
+    "is-core-module": ["is-core-module@2.16.1", "", { "dependencies": { "hasown": "^2.0.2" } }, "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w=="],
 
-    "is-core-module": ["is-core-module@2.16.1", "", { "dependencies": { "hasown": "^2.0.2" } }, ""],
-
-    "is-decimal": ["is-decimal@2.0.1", "", {}, ""],
+    "is-decimal": ["is-decimal@2.0.1", "", {}, "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A=="],
 
     "is-extendable": ["is-extendable@1.0.1", "", { "dependencies": { "is-plain-object": "^2.0.4" } }, "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA=="],
 
-    "is-extglob": ["is-extglob@2.1.1", "", {}, ""],
-
-    "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, ""],
-
-    "is-hexadecimal": ["is-hexadecimal@2.0.1", "", {}, ""],
+    "is-hexadecimal": ["is-hexadecimal@2.0.1", "", {}, "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg=="],
 
     "is-mobile": ["is-mobile@5.0.0", "", {}, "sha512-Tz/yndySvLAEXh+Uk8liFCxOwVH6YutuR74utvOcu7I9Di+DwM0mtdPVZNaVvvBUM2OXxne/NhOs1zAO7riusQ=="],
 
-    "is-number": ["is-number@7.0.0", "", {}, ""],
-
-    "is-plain-obj": ["is-plain-obj@4.1.0", "", {}, ""],
+    "is-plain-obj": ["is-plain-obj@4.1.0", "", {}, "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg=="],
 
     "is-plain-object": ["is-plain-object@2.0.4", "", { "dependencies": { "isobject": "^3.0.1" } }, "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og=="],
 
-    "isbot": ["isbot@5.1.35", "", {}, ""],
+    "isbot": ["isbot@5.1.37", "", {}, "sha512-5bcicX81xf6NlTEV8rWdg7Pk01LFizDetuYGHx6d/f6y3lR2/oo8IfxjzJqn1UdDEyCcwT9e7NRloj8DwCYujQ=="],
 
     "isobject": ["isobject@3.0.1", "", {}, "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="],
 
-    "jiti": ["jiti@1.21.7", "", { "bin": "bin/jiti.js" }, ""],
+    "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
 
     "js-cookie": ["js-cookie@3.0.5", "", {}, "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw=="],
 
     "js-levenshtein": ["js-levenshtein@1.1.6", "", {}, "sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g=="],
 
-    "js-tokens": ["js-tokens@4.0.0", "", {}, ""],
+    "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
 
     "js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="],
 
-    "jsesc": ["jsesc@3.1.0", "", { "bin": "bin/jsesc" }, ""],
+    "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
 
     "json-parse-even-better-errors": ["json-parse-even-better-errors@2.3.1", "", {}, "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="],
 
@@ -1054,21 +1167,43 @@
 
     "json2mq": ["json2mq@0.2.0", "", { "dependencies": { "string-convert": "^0.2.0" } }, "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA=="],
 
-    "json5": ["json5@2.2.3", "", { "bin": "lib/cli.js" }, ""],
+    "json5": ["json5@2.2.3", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],
 
-    "katex": ["katex@0.16.28", "", { "dependencies": { "commander": "^8.3.0" }, "bin": { "katex": "cli.js" } }, "sha512-YHzO7721WbmAL6Ov1uzN/l5mY5WWWhJBSW+jq4tkfZfsxmo1hu6frS0EOswvjBUnWE6NtjEs48SFn5CQESRLZg=="],
+    "katex": ["katex@0.16.45", "", { "dependencies": { "commander": "^8.3.0" }, "bin": { "katex": "cli.js" } }, "sha512-pQpZbdBu7wCTmQUh7ufPmLr0pFoObnGUoL/yhtwJDgmmQpbkg/0HSVti25Fu4rmd1oCR6NGWe9vqTWuWv3GcNA=="],
 
     "khroma": ["khroma@2.1.0", "", {}, "sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw=="],
 
-    "langium": ["langium@3.3.1", "", { "dependencies": { "chevrotain": "~11.0.3", "chevrotain-allstar": "~0.3.0", "vscode-languageserver": "~9.0.1", "vscode-languageserver-textdocument": "~1.0.11", "vscode-uri": "~3.0.8" } }, "sha512-QJv/h939gDpvT+9SiLVlY7tZC3xB2qK57v0J04Sh9wpMb6MP1q8gB21L3WIo8T5P1MSMg3Ep14L7KkDCFG3y4w=="],
+    "langium": ["langium@4.2.2", "", { "dependencies": { "@chevrotain/regexp-to-ast": "~12.0.0", "chevrotain": "~12.0.0", "chevrotain-allstar": "~0.4.1", "vscode-languageserver": "~9.0.1", "vscode-languageserver-textdocument": "~1.0.11", "vscode-uri": "~3.1.0" } }, "sha512-JUshTRAfHI4/MF9dH2WupvjSXyn8JBuUEWazB8ZVJUtXutT0doDlAv1XKbZ1Pb5sMexa8FF4CFBc0iiul7gbUQ=="],
 
     "layout-base": ["layout-base@1.0.2", "", {}, "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg=="],
 
     "leva": ["leva@0.10.1", "", { "dependencies": { "@radix-ui/react-portal": "^1.1.4", "@radix-ui/react-tooltip": "^1.1.8", "@stitches/react": "^1.2.8", "@use-gesture/react": "^10.2.5", "colord": "^2.9.2", "dequal": "^2.0.2", "merge-value": "^1.0.0", "react-colorful": "^5.5.1", "react-dropzone": "^12.0.0", "v8n": "^1.3.3", "zustand": "^3.6.9" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-BcjnfUX8jpmwZUz2L7AfBtF9vn4ggTH33hmeufDULbP3YgNZ/C+ss/oO3stbrqRQyaOmRwy70y7BGTGO81S3rA=="],
 
-    "lilconfig": ["lilconfig@3.1.3", "", {}, ""],
+    "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
+
+    "lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
+
+    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.32.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ=="],
+
+    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.32.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w=="],
+
+    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.32.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig=="],
+
+    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.32.0", "", { "os": "linux", "cpu": "arm" }, "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw=="],
+
+    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ=="],
+
+    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg=="],
 
-    "lines-and-columns": ["lines-and-columns@1.2.4", "", {}, ""],
+    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA=="],
+
+    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg=="],
+
+    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.32.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw=="],
+
+    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="],
+
+    "lines-and-columns": ["lines-and-columns@1.2.4", "", {}, "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="],
 
     "lit": ["lit@3.3.2", "", { "dependencies": { "@lit/reactive-element": "^2.1.0", "lit-element": "^4.2.0", "lit-html": "^3.3.0" } }, "sha512-NF9zbsP79l4ao2SNrH3NkfmFgN/hBYSQo90saIVI1o5GpjAdCPVstVzO1MrLOakHoEhYkrtRjPK6Ob521aoYWQ=="],
 
@@ -1076,89 +1211,89 @@
 
     "lit-html": ["lit-html@3.3.2", "", { "dependencies": { "@types/trusted-types": "^2.0.2" } }, "sha512-Qy9hU88zcmaxBXcc10ZpdK7cOLXvXpRoBxERdtqV9QOrfpMZZ6pSYP91LhpPtap3sFMUiL7Tw2RImbe0Al2/kw=="],
 
-    "lodash": ["lodash@4.17.23", "", {}, "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w=="],
+    "lodash": ["lodash@4.18.1", "", {}, "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q=="],
 
-    "lodash-es": ["lodash-es@4.17.23", "", {}, "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg=="],
+    "lodash-es": ["lodash-es@4.18.1", "", {}, "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A=="],
 
-    "longest-streak": ["longest-streak@3.1.0", "", {}, ""],
+    "longest-streak": ["longest-streak@3.1.0", "", {}, "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g=="],
 
     "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
 
-    "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, ""],
+    "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
 
     "lru_map": ["lru_map@0.4.1", "", {}, "sha512-I+lBvqMMFfqaV8CJCISjI3wbjmwVu/VyOoU7+qtu9d7ioW5klMgsTTiUOUp+DJvfTTzKXoPbyC6YfgkNcyPSOg=="],
 
     "lucide-react": ["lucide-react@0.469.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw=="],
 
+    "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
+
     "markdown-extensions": ["markdown-extensions@2.0.0", "", {}, "sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q=="],
 
-    "markdown-table": ["markdown-table@3.0.4", "", {}, ""],
+    "markdown-table": ["markdown-table@3.0.4", "", {}, "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw=="],
 
-    "marked": ["marked@17.0.2", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-s5HZGFQea7Huv5zZcAGhJLT3qLpAfnY7v7GWkICUr0+Wd5TFEtdlRR2XUL5Gg+RH7u2Df595ifrxR03mBaw7gA=="],
+    "marked": ["marked@17.0.6", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-gB0gkNafnonOw0obSTEGZTT86IuhILt2Wfx0mWH/1Au83kybTayroZ/V6nS25mN7u8ASy+5fMhgB3XPNrOZdmA=="],
 
-    "mdast-util-find-and-replace": ["mdast-util-find-and-replace@3.0.2", "", { "dependencies": { "@types/mdast": "^4.0.0", "escape-string-regexp": "^5.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, ""],
+    "mdast-util-find-and-replace": ["mdast-util-find-and-replace@3.0.2", "", { "dependencies": { "@types/mdast": "^4.0.0", "escape-string-regexp": "^5.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg=="],
 
-    "mdast-util-from-markdown": ["mdast-util-from-markdown@2.0.2", "", { "dependencies": { "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "mdast-util-to-string": "^4.0.0", "micromark": "^4.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-decode-string": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "unist-util-stringify-position": "^4.0.0" } }, ""],
+    "mdast-util-from-markdown": ["mdast-util-from-markdown@2.0.3", "", { "dependencies": { "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "mdast-util-to-string": "^4.0.0", "micromark": "^4.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-decode-string": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q=="],
 
-    "mdast-util-gfm": ["mdast-util-gfm@3.1.0", "", { "dependencies": { "mdast-util-from-markdown": "^2.0.0", "mdast-util-gfm-autolink-literal": "^2.0.0", "mdast-util-gfm-footnote": "^2.0.0", "mdast-util-gfm-strikethrough": "^2.0.0", "mdast-util-gfm-table": "^2.0.0", "mdast-util-gfm-task-list-item": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, ""],
+    "mdast-util-gfm": ["mdast-util-gfm@3.1.0", "", { "dependencies": { "mdast-util-from-markdown": "^2.0.0", "mdast-util-gfm-autolink-literal": "^2.0.0", "mdast-util-gfm-footnote": "^2.0.0", "mdast-util-gfm-strikethrough": "^2.0.0", "mdast-util-gfm-table": "^2.0.0", "mdast-util-gfm-task-list-item": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ=="],
 
-    "mdast-util-gfm-autolink-literal": ["mdast-util-gfm-autolink-literal@2.0.1", "", { "dependencies": { "@types/mdast": "^4.0.0", "ccount": "^2.0.0", "devlop": "^1.0.0", "mdast-util-find-and-replace": "^3.0.0", "micromark-util-character": "^2.0.0" } }, ""],
+    "mdast-util-gfm-autolink-literal": ["mdast-util-gfm-autolink-literal@2.0.1", "", { "dependencies": { "@types/mdast": "^4.0.0", "ccount": "^2.0.0", "devlop": "^1.0.0", "mdast-util-find-and-replace": "^3.0.0", "micromark-util-character": "^2.0.0" } }, "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ=="],
 
-    "mdast-util-gfm-footnote": ["mdast-util-gfm-footnote@2.1.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "devlop": "^1.1.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0" } }, ""],
+    "mdast-util-gfm-footnote": ["mdast-util-gfm-footnote@2.1.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "devlop": "^1.1.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0" } }, "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ=="],
 
-    "mdast-util-gfm-strikethrough": ["mdast-util-gfm-strikethrough@2.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, ""],
+    "mdast-util-gfm-strikethrough": ["mdast-util-gfm-strikethrough@2.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg=="],
 
-    "mdast-util-gfm-table": ["mdast-util-gfm-table@2.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "markdown-table": "^3.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, ""],
+    "mdast-util-gfm-table": ["mdast-util-gfm-table@2.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "markdown-table": "^3.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg=="],
 
-    "mdast-util-gfm-task-list-item": ["mdast-util-gfm-task-list-item@2.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, ""],
+    "mdast-util-gfm-task-list-item": ["mdast-util-gfm-task-list-item@2.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ=="],
 
     "mdast-util-math": ["mdast-util-math@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "longest-streak": "^3.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.1.0", "unist-util-remove-position": "^5.0.0" } }, "sha512-Tl9GBNeG/AhJnQM221bJR2HPvLOSnLE/T9cJI9tlc6zwQk2nPk/4f0cHkOdEixQPC/j8UtKDdITswvLAy1OZ1w=="],
 
     "mdast-util-mdx": ["mdast-util-mdx@3.0.0", "", { "dependencies": { "mdast-util-from-markdown": "^2.0.0", "mdast-util-mdx-expression": "^2.0.0", "mdast-util-mdx-jsx": "^3.0.0", "mdast-util-mdxjs-esm": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, "sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w=="],
 
-    "mdast-util-mdx-expression": ["mdast-util-mdx-expression@2.0.1", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, ""],
+    "mdast-util-mdx-expression": ["mdast-util-mdx-expression@2.0.1", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ=="],
 
-    "mdast-util-mdx-jsx": ["mdast-util-mdx-jsx@3.2.0", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "ccount": "^2.0.0", "devlop": "^1.1.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0", "parse-entities": "^4.0.0", "stringify-entities": "^4.0.0", "unist-util-stringify-position": "^4.0.0", "vfile-message": "^4.0.0" } }, ""],
+    "mdast-util-mdx-jsx": ["mdast-util-mdx-jsx@3.2.0", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "ccount": "^2.0.0", "devlop": "^1.1.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0", "parse-entities": "^4.0.0", "stringify-entities": "^4.0.0", "unist-util-stringify-position": "^4.0.0", "vfile-message": "^4.0.0" } }, "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q=="],
 
-    "mdast-util-mdxjs-esm": ["mdast-util-mdxjs-esm@2.0.1", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, ""],
+    "mdast-util-mdxjs-esm": ["mdast-util-mdxjs-esm@2.0.1", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg=="],
 
     "mdast-util-newline-to-break": ["mdast-util-newline-to-break@2.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-find-and-replace": "^3.0.0" } }, "sha512-MbgeFca0hLYIEx/2zGsszCSEJJ1JSCdiY5xQxRcLDDGa8EPvlLPupJ4DSajbMPAnC0je8jfb9TiUATnxxrHUog=="],
 
-    "mdast-util-phrasing": ["mdast-util-phrasing@4.1.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "unist-util-is": "^6.0.0" } }, ""],
+    "mdast-util-phrasing": ["mdast-util-phrasing@4.1.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "unist-util-is": "^6.0.0" } }, "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w=="],
 
-    "mdast-util-to-hast": ["mdast-util-to-hast@13.2.1", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "@ungap/structured-clone": "^1.0.0", "devlop": "^1.0.0", "micromark-util-sanitize-uri": "^2.0.0", "trim-lines": "^3.0.0", "unist-util-position": "^5.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" } }, ""],
+    "mdast-util-to-hast": ["mdast-util-to-hast@13.2.1", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "@ungap/structured-clone": "^1.0.0", "devlop": "^1.0.0", "micromark-util-sanitize-uri": "^2.0.0", "trim-lines": "^3.0.0", "unist-util-position": "^5.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" } }, "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA=="],
 
-    "mdast-util-to-markdown": ["mdast-util-to-markdown@2.1.2", "", { "dependencies": { "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "longest-streak": "^3.0.0", "mdast-util-phrasing": "^4.0.0", "mdast-util-to-string": "^4.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-decode-string": "^2.0.0", "unist-util-visit": "^5.0.0", "zwitch": "^2.0.0" } }, ""],
+    "mdast-util-to-markdown": ["mdast-util-to-markdown@2.1.2", "", { "dependencies": { "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "longest-streak": "^3.0.0", "mdast-util-phrasing": "^4.0.0", "mdast-util-to-string": "^4.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-decode-string": "^2.0.0", "unist-util-visit": "^5.0.0", "zwitch": "^2.0.0" } }, "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA=="],
 
-    "mdast-util-to-string": ["mdast-util-to-string@4.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0" } }, ""],
+    "mdast-util-to-string": ["mdast-util-to-string@4.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0" } }, "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg=="],
 
     "merge-value": ["merge-value@1.0.0", "", { "dependencies": { "get-value": "^2.0.6", "is-extendable": "^1.0.0", "mixin-deep": "^1.2.0", "set-value": "^2.0.0" } }, "sha512-fJMmvat4NeKz63Uv9iHWcPDjCWcCkoiRoajRTEO8hlhUC6rwaHg0QCF9hBOTjZmm4JuglPckPSTtcuJL5kp0TQ=="],
 
-    "merge2": ["merge2@1.4.1", "", {}, ""],
-
-    "mermaid": ["mermaid@11.12.2", "", { "dependencies": { "@braintree/sanitize-url": "^7.1.1", "@iconify/utils": "^3.0.1", "@mermaid-js/parser": "^0.6.3", "@types/d3": "^7.4.3", "cytoscape": "^3.29.3", "cytoscape-cose-bilkent": "^4.1.0", "cytoscape-fcose": "^2.2.0", "d3": "^7.9.0", "d3-sankey": "^0.12.3", "dagre-d3-es": "7.0.13", "dayjs": "^1.11.18", "dompurify": "^3.2.5", "katex": "^0.16.22", "khroma": "^2.1.0", "lodash-es": "^4.17.21", "marked": "^16.2.1", "roughjs": "^4.6.6", "stylis": "^4.3.6", "ts-dedent": "^2.2.0", "uuid": "^11.1.0" } }, "sha512-n34QPDPEKmaeCG4WDMGy0OT6PSyxKCfy2pJgShP+Qow2KLrvWjclwbc3yXfSIf4BanqWEhQEpngWwNp/XhZt6w=="],
+    "mermaid": ["mermaid@11.14.0", "", { "dependencies": { "@braintree/sanitize-url": "^7.1.1", "@iconify/utils": "^3.0.2", "@mermaid-js/parser": "^1.1.0", "@types/d3": "^7.4.3", "@upsetjs/venn.js": "^2.0.0", "cytoscape": "^3.33.1", "cytoscape-cose-bilkent": "^4.1.0", "cytoscape-fcose": "^2.2.0", "d3": "^7.9.0", "d3-sankey": "^0.12.3", "dagre-d3-es": "7.0.14", "dayjs": "^1.11.19", "dompurify": "^3.3.1", "katex": "^0.16.25", "khroma": "^2.1.0", "lodash-es": "^4.17.23", "marked": "^16.3.0", "roughjs": "^4.6.6", "stylis": "^4.3.6", "ts-dedent": "^2.2.0", "uuid": "^11.1.0" } }, "sha512-GSGloRsBs+JINmmhl0JDwjpuezCsHB4WGI4NASHxL3fHo3o/BRXTxhDLKnln8/Q0lRFRyDdEjmk1/d5Sn1Xz8g=="],
 
-    "micromark": ["micromark@4.0.2", "", { "dependencies": { "@types/debug": "^4.0.0", "debug": "^4.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-core-commonmark": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-combine-extensions": "^2.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-encode": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-sanitize-uri": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark": ["micromark@4.0.2", "", { "dependencies": { "@types/debug": "^4.0.0", "debug": "^4.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-core-commonmark": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-combine-extensions": "^2.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-encode": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-sanitize-uri": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA=="],
 
-    "micromark-core-commonmark": ["micromark-core-commonmark@2.0.3", "", { "dependencies": { "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-factory-destination": "^2.0.0", "micromark-factory-label": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-factory-title": "^2.0.0", "micromark-factory-whitespace": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-html-tag-name": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark-core-commonmark": ["micromark-core-commonmark@2.0.3", "", { "dependencies": { "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-factory-destination": "^2.0.0", "micromark-factory-label": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-factory-title": "^2.0.0", "micromark-factory-whitespace": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-html-tag-name": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg=="],
 
     "micromark-extension-cjk-friendly": ["micromark-extension-cjk-friendly@1.2.3", "", { "dependencies": { "devlop": "^1.1.0", "micromark-extension-cjk-friendly-util": "2.1.1", "micromark-util-chunked": "^2.0.1", "micromark-util-resolve-all": "^2.0.1", "micromark-util-symbol": "^2.0.1" }, "peerDependencies": { "micromark": "^4.0.0", "micromark-util-types": "^2.0.0" }, "optionalPeers": ["micromark-util-types"] }, "sha512-gRzVLUdjXBLX6zNPSnHGDoo+ZTp5zy+MZm0g3sv+3chPXY7l9gW+DnrcHcZh/jiPR6MjPKO4AEJNp4Aw6V9z5Q=="],
 
     "micromark-extension-cjk-friendly-util": ["micromark-extension-cjk-friendly-util@2.1.1", "", { "dependencies": { "get-east-asian-width": "^1.3.0", "micromark-util-character": "^2.1.1", "micromark-util-symbol": "^2.0.1" } }, "sha512-egs6+12JU2yutskHY55FyR48ZiEcFOJFyk9rsiyIhcJ6IvWB6ABBqVrBw8IobqJTDZ/wdSr9eoXDPb5S2nW1bg=="],
 
-    "micromark-extension-gfm": ["micromark-extension-gfm@3.0.0", "", { "dependencies": { "micromark-extension-gfm-autolink-literal": "^2.0.0", "micromark-extension-gfm-footnote": "^2.0.0", "micromark-extension-gfm-strikethrough": "^2.0.0", "micromark-extension-gfm-table": "^2.0.0", "micromark-extension-gfm-tagfilter": "^2.0.0", "micromark-extension-gfm-task-list-item": "^2.0.0", "micromark-util-combine-extensions": "^2.0.0", "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark-extension-gfm": ["micromark-extension-gfm@3.0.0", "", { "dependencies": { "micromark-extension-gfm-autolink-literal": "^2.0.0", "micromark-extension-gfm-footnote": "^2.0.0", "micromark-extension-gfm-strikethrough": "^2.0.0", "micromark-extension-gfm-table": "^2.0.0", "micromark-extension-gfm-tagfilter": "^2.0.0", "micromark-extension-gfm-task-list-item": "^2.0.0", "micromark-util-combine-extensions": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w=="],
 
-    "micromark-extension-gfm-autolink-literal": ["micromark-extension-gfm-autolink-literal@2.1.0", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-sanitize-uri": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark-extension-gfm-autolink-literal": ["micromark-extension-gfm-autolink-literal@2.1.0", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-sanitize-uri": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw=="],
 
-    "micromark-extension-gfm-footnote": ["micromark-extension-gfm-footnote@2.1.0", "", { "dependencies": { "devlop": "^1.0.0", "micromark-core-commonmark": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-sanitize-uri": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark-extension-gfm-footnote": ["micromark-extension-gfm-footnote@2.1.0", "", { "dependencies": { "devlop": "^1.0.0", "micromark-core-commonmark": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-sanitize-uri": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw=="],
 
-    "micromark-extension-gfm-strikethrough": ["micromark-extension-gfm-strikethrough@2.1.0", "", { "dependencies": { "devlop": "^1.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark-extension-gfm-strikethrough": ["micromark-extension-gfm-strikethrough@2.1.0", "", { "dependencies": { "devlop": "^1.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw=="],
 
-    "micromark-extension-gfm-table": ["micromark-extension-gfm-table@2.1.1", "", { "dependencies": { "devlop": "^1.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark-extension-gfm-table": ["micromark-extension-gfm-table@2.1.1", "", { "dependencies": { "devlop": "^1.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg=="],
 
-    "micromark-extension-gfm-tagfilter": ["micromark-extension-gfm-tagfilter@2.0.0", "", { "dependencies": { "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark-extension-gfm-tagfilter": ["micromark-extension-gfm-tagfilter@2.0.0", "", { "dependencies": { "micromark-util-types": "^2.0.0" } }, "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg=="],
 
-    "micromark-extension-gfm-task-list-item": ["micromark-extension-gfm-task-list-item@2.1.0", "", { "dependencies": { "devlop": "^1.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark-extension-gfm-task-list-item": ["micromark-extension-gfm-task-list-item@2.1.0", "", { "dependencies": { "devlop": "^1.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw=="],
 
     "micromark-extension-math": ["micromark-extension-math@3.1.0", "", { "dependencies": { "@types/katex": "^0.16.0", "devlop": "^1.0.0", "katex": "^0.16.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg=="],
 
@@ -1172,79 +1307,71 @@
 
     "micromark-extension-mdxjs-esm": ["micromark-extension-mdxjs-esm@3.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "devlop": "^1.0.0", "micromark-core-commonmark": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-events-to-acorn": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "unist-util-position-from-estree": "^2.0.0", "vfile-message": "^4.0.0" } }, "sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A=="],
 
-    "micromark-factory-destination": ["micromark-factory-destination@2.0.1", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark-factory-destination": ["micromark-factory-destination@2.0.1", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA=="],
 
-    "micromark-factory-label": ["micromark-factory-label@2.0.1", "", { "dependencies": { "devlop": "^1.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark-factory-label": ["micromark-factory-label@2.0.1", "", { "dependencies": { "devlop": "^1.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg=="],
 
     "micromark-factory-mdx-expression": ["micromark-factory-mdx-expression@2.0.3", "", { "dependencies": { "@types/estree": "^1.0.0", "devlop": "^1.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-events-to-acorn": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "unist-util-position-from-estree": "^2.0.0", "vfile-message": "^4.0.0" } }, "sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ=="],
 
-    "micromark-factory-space": ["micromark-factory-space@2.0.1", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark-factory-space": ["micromark-factory-space@2.0.1", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg=="],
 
-    "micromark-factory-title": ["micromark-factory-title@2.0.1", "", { "dependencies": { "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark-factory-title": ["micromark-factory-title@2.0.1", "", { "dependencies": { "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw=="],
 
-    "micromark-factory-whitespace": ["micromark-factory-whitespace@2.0.1", "", { "dependencies": { "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark-factory-whitespace": ["micromark-factory-whitespace@2.0.1", "", { "dependencies": { "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ=="],
 
-    "micromark-util-character": ["micromark-util-character@2.1.1", "", { "dependencies": { "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark-util-character": ["micromark-util-character@2.1.1", "", { "dependencies": { "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q=="],
 
-    "micromark-util-chunked": ["micromark-util-chunked@2.0.1", "", { "dependencies": { "micromark-util-symbol": "^2.0.0" } }, ""],
+    "micromark-util-chunked": ["micromark-util-chunked@2.0.1", "", { "dependencies": { "micromark-util-symbol": "^2.0.0" } }, "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA=="],
 
-    "micromark-util-classify-character": ["micromark-util-classify-character@2.0.1", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark-util-classify-character": ["micromark-util-classify-character@2.0.1", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q=="],
 
-    "micromark-util-combine-extensions": ["micromark-util-combine-extensions@2.0.1", "", { "dependencies": { "micromark-util-chunked": "^2.0.0", "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark-util-combine-extensions": ["micromark-util-combine-extensions@2.0.1", "", { "dependencies": { "micromark-util-chunked": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg=="],
 
-    "micromark-util-decode-numeric-character-reference": ["micromark-util-decode-numeric-character-reference@2.0.2", "", { "dependencies": { "micromark-util-symbol": "^2.0.0" } }, ""],
+    "micromark-util-decode-numeric-character-reference": ["micromark-util-decode-numeric-character-reference@2.0.2", "", { "dependencies": { "micromark-util-symbol": "^2.0.0" } }, "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw=="],
 
-    "micromark-util-decode-string": ["micromark-util-decode-string@2.0.1", "", { "dependencies": { "decode-named-character-reference": "^1.0.0", "micromark-util-character": "^2.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-symbol": "^2.0.0" } }, ""],
+    "micromark-util-decode-string": ["micromark-util-decode-string@2.0.1", "", { "dependencies": { "decode-named-character-reference": "^1.0.0", "micromark-util-character": "^2.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-symbol": "^2.0.0" } }, "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ=="],
 
-    "micromark-util-encode": ["micromark-util-encode@2.0.1", "", {}, ""],
+    "micromark-util-encode": ["micromark-util-encode@2.0.1", "", {}, "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw=="],
 
     "micromark-util-events-to-acorn": ["micromark-util-events-to-acorn@2.0.3", "", { "dependencies": { "@types/estree": "^1.0.0", "@types/unist": "^3.0.0", "devlop": "^1.0.0", "estree-util-visit": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "vfile-message": "^4.0.0" } }, "sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg=="],
 
-    "micromark-util-html-tag-name": ["micromark-util-html-tag-name@2.0.1", "", {}, ""],
+    "micromark-util-html-tag-name": ["micromark-util-html-tag-name@2.0.1", "", {}, "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA=="],
 
-    "micromark-util-normalize-identifier": ["micromark-util-normalize-identifier@2.0.1", "", { "dependencies": { "micromark-util-symbol": "^2.0.0" } }, ""],
+    "micromark-util-normalize-identifier": ["micromark-util-normalize-identifier@2.0.1", "", { "dependencies": { "micromark-util-symbol": "^2.0.0" } }, "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q=="],
 
-    "micromark-util-resolve-all": ["micromark-util-resolve-all@2.0.1", "", { "dependencies": { "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark-util-resolve-all": ["micromark-util-resolve-all@2.0.1", "", { "dependencies": { "micromark-util-types": "^2.0.0" } }, "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg=="],
 
-    "micromark-util-sanitize-uri": ["micromark-util-sanitize-uri@2.0.1", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-encode": "^2.0.0", "micromark-util-symbol": "^2.0.0" } }, ""],
+    "micromark-util-sanitize-uri": ["micromark-util-sanitize-uri@2.0.1", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-encode": "^2.0.0", "micromark-util-symbol": "^2.0.0" } }, "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ=="],
 
-    "micromark-util-subtokenize": ["micromark-util-subtokenize@2.1.0", "", { "dependencies": { "devlop": "^1.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, ""],
+    "micromark-util-subtokenize": ["micromark-util-subtokenize@2.1.0", "", { "dependencies": { "devlop": "^1.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA=="],
 
-    "micromark-util-symbol": ["micromark-util-symbol@2.0.1", "", {}, ""],
+    "micromark-util-symbol": ["micromark-util-symbol@2.0.1", "", {}, "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q=="],
 
-    "micromark-util-types": ["micromark-util-types@2.0.2", "", {}, ""],
-
-    "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, ""],
+    "micromark-util-types": ["micromark-util-types@2.0.2", "", {}, "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA=="],
 
     "minimatch": ["minimatch@5.1.9", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw=="],
 
     "mixin-deep": ["mixin-deep@1.3.2", "", { "dependencies": { "for-in": "^1.0.2", "is-extendable": "^1.0.1" } }, "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA=="],
 
-    "mlly": ["mlly@1.8.0", "", { "dependencies": { "acorn": "^8.15.0", "pathe": "^2.0.3", "pkg-types": "^1.3.1", "ufo": "^1.6.1" } }, "sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g=="],
-
-    "motion": ["motion@12.34.0", "", { "dependencies": { "framer-motion": "^12.34.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-01Sfa/zgsD/di8zA/uFW5Eb7/SPXoGyUfy+uMRMW5Spa8j0z/UbfQewAYvPMYFCXRlyD6e5aLHh76TxeeJD+RA=="],
-
-    "motion-dom": ["motion-dom@12.34.0", "", { "dependencies": { "motion-utils": "^12.29.2" } }, ""],
+    "mlly": ["mlly@1.8.2", "", { "dependencies": { "acorn": "^8.16.0", "pathe": "^2.0.3", "pkg-types": "^1.3.1", "ufo": "^1.6.3" } }, "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA=="],
 
-    "motion-utils": ["motion-utils@12.29.2", "", {}, ""],
+    "motion": ["motion@12.38.0", "", { "dependencies": { "framer-motion": "^12.38.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-uYfXzeHlgThchzwz5Te47dlv5JOUC7OB4rjJ/7XTUgtBZD8CchMN8qEJ4ZVsUmTyYA44zjV0fBwsiktRuFnn+w=="],
 
-    "ms": ["ms@2.1.3", "", {}, ""],
+    "motion-dom": ["motion-dom@12.38.0", "", { "dependencies": { "motion-utils": "^12.36.0" } }, "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA=="],
 
-    "mz": ["mz@2.7.0", "", { "dependencies": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", "thenify-all": "^1.0.0" } }, ""],
+    "motion-utils": ["motion-utils@12.36.0", "", {}, "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg=="],
 
-    "nanoid": ["nanoid@3.3.11", "", { "bin": "bin/nanoid.cjs" }, ""],
+    "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
-    "node-addon-api": ["node-addon-api@7.1.1", "", {}, ""],
+    "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
 
-    "node-releases": ["node-releases@2.0.27", "", {}, ""],
-
-    "normalize-path": ["normalize-path@3.0.0", "", {}, ""],
+    "node-releases": ["node-releases@2.0.37", "", {}, "sha512-1h5gKZCF+pO/o3Iqt5Jp7wc9rH3eJJ0+nh/CIoiRwjRxde/hAHyLPXYN4V3CqKAbiZPSeJFSWHmJsbkicta0Eg=="],
 
     "numeral": ["numeral@2.0.6", "", {}, "sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA=="],
 
-    "object-assign": ["object-assign@4.1.1", "", {}, ""],
+    "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
 
-    "object-hash": ["object-hash@3.0.0", "", {}, ""],
+    "obliterator": ["obliterator@2.0.5", "", {}, "sha512-42CPE9AhahZRsMNslczq0ctAEtqk8Eka26QofnqC346BZdHDySk3LWka23LI7ULIw11NmltpiLagIq8gBozxTw=="],
 
     "ogl": ["ogl@1.0.11", "", {}, "sha512-kUpC154AFfxi16pmZUK4jk3J+8zxwTWGPo03EoYA8QPbzikHoaC82n6pNTbd+oEaJonaE8aPWBlX7ad9zrqLsA=="],
 
@@ -1252,7 +1379,7 @@
 
     "oniguruma-parser": ["oniguruma-parser@0.12.1", "", {}, "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w=="],
 
-    "oniguruma-to-es": ["oniguruma-to-es@4.3.4", "", { "dependencies": { "oniguruma-parser": "^0.12.1", "regex": "^6.0.1", "regex-recursion": "^6.0.2" } }, "sha512-3VhUGN3w2eYxnTzHn+ikMI+fp/96KoRSVK9/kMTcFqj1NRDh2IhQCKvYxDnWePKRXY/AqH+Fuiyb7VHSzBjHfA=="],
+    "oniguruma-to-es": ["oniguruma-to-es@4.3.5", "", { "dependencies": { "oniguruma-parser": "^0.12.1", "regex": "^6.1.0", "regex-recursion": "^6.0.2" } }, "sha512-Zjygswjpsewa0NLTsiizVuMQZbp0MDyM6lIt66OxsF21npUDlzpHi1Mgb/qhQdkb+dWFTzJmFbEWdvZgRho8eQ=="],
 
     "openapi-fetch": ["openapi-fetch@0.17.0", "", { "dependencies": { "openapi-typescript-helpers": "^0.1.0" } }, "sha512-PsbZR1wAPcG91eEthKhN+Zn92FMHxv+/faECIwjXdxfTODGSGegYv0sc1Olz+HYPvKOuoXfp+0pA2XVt2cI0Ig=="],
 
@@ -1264,7 +1391,7 @@
 
     "parent-module": ["parent-module@1.0.1", "", { "dependencies": { "callsites": "^3.0.0" } }, "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g=="],
 
-    "parse-entities": ["parse-entities@4.0.2", "", { "dependencies": { "@types/unist": "^2.0.0", "character-entities-legacy": "^3.0.0", "character-reference-invalid": "^2.0.0", "decode-named-character-reference": "^1.0.0", "is-alphanumerical": "^2.0.0", "is-decimal": "^2.0.0", "is-hexadecimal": "^2.0.0" } }, ""],
+    "parse-entities": ["parse-entities@4.0.2", "", { "dependencies": { "@types/unist": "^2.0.0", "character-entities-legacy": "^3.0.0", "character-reference-invalid": "^2.0.0", "decode-named-character-reference": "^1.0.0", "is-alphanumerical": "^2.0.0", "is-decimal": "^2.0.0", "is-hexadecimal": "^2.0.0" } }, "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw=="],
 
     "parse-json": ["parse-json@8.3.0", "", { "dependencies": { "@babel/code-frame": "^7.26.2", "index-to-position": "^1.1.0", "type-fest": "^4.39.1" } }, "sha512-ybiGyvspI+fAoRQbIPRddCcSTV9/LsJbf0e/S85VLowVGzRmokfneg2kwVW/KU5rOXrPSbF1qAKPMgNTqqROQQ=="],
 
@@ -1272,19 +1399,15 @@
 
     "path-data-parser": ["path-data-parser@0.1.0", "", {}, "sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w=="],
 
-    "path-parse": ["path-parse@1.0.7", "", {}, ""],
+    "path-parse": ["path-parse@1.0.7", "", {}, "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="],
 
     "path-type": ["path-type@4.0.0", "", {}, "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="],
 
     "pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
 
-    "picocolors": ["picocolors@1.1.1", "", {}, ""],
-
-    "picomatch": ["picomatch@4.0.3", "", {}, ""],
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
-    "pify": ["pify@2.3.0", "", {}, ""],
-
-    "pirates": ["pirates@4.0.7", "", {}, ""],
+    "picomatch": ["picomatch@4.0.4", "", {}, "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A=="],
 
     "pkg-types": ["pkg-types@1.3.1", "", { "dependencies": { "confbox": "^0.1.8", "mlly": "^1.7.4", "pathe": "^2.0.1" } }, "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ=="],
 
@@ -1296,28 +1419,16 @@
 
     "polished": ["polished@4.3.1", "", { "dependencies": { "@babel/runtime": "^7.17.8" } }, "sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA=="],
 
-    "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, ""],
-
-    "postcss-import": ["postcss-import@15.1.0", "", { "dependencies": { "postcss-value-parser": "^4.0.0", "read-cache": "^1.0.0", "resolve": "^1.1.7" }, "peerDependencies": { "postcss": "^8.0.0" } }, ""],
-
-    "postcss-js": ["postcss-js@4.1.0", "", { "dependencies": { "camelcase-css": "^2.0.1" }, "peerDependencies": { "postcss": "^8.4.21" } }, ""],
-
-    "postcss-load-config": ["postcss-load-config@6.0.1", "", { "dependencies": { "lilconfig": "^3.1.1" }, "peerDependencies": { "jiti": ">=1.21.0", "postcss": ">=8.0.9", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["tsx", "yaml"] }, ""],
-
-    "postcss-nested": ["postcss-nested@6.2.0", "", { "dependencies": { "postcss-selector-parser": "^6.1.1" }, "peerDependencies": { "postcss": "^8.2.14" } }, ""],
-
-    "postcss-selector-parser": ["postcss-selector-parser@6.1.2", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, ""],
+    "postcss": ["postcss@8.5.9", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-7a70Nsot+EMX9fFU3064K/kdHWZqGVY+BADLyXc8Dfv+mTLLVl6JzJpPaCZ2kQL9gIJvKXSLMHhqdRRjwQeFtw=="],
 
-    "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, ""],
+    "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
 
     "prop-types": ["prop-types@15.8.1", "", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
 
-    "property-information": ["property-information@7.1.0", "", {}, ""],
+    "property-information": ["property-information@7.1.0", "", {}, "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ=="],
 
     "query-string": ["query-string@9.3.1", "", { "dependencies": { "decode-uri-component": "^0.4.1", "filter-obj": "^5.1.0", "split-on-first": "^3.0.0" } }, "sha512-5fBfMOcDi5SA9qj5jZhWAcTtDfKF5WFdd2uD9nVNlbxVv1baq65aALy6qofpNEGELHvisjjasxQp7BlM9gvMzw=="],
 
-    "queue-microtask": ["queue-microtask@1.2.3", "", {}, ""],
-
     "rc-collapse": ["rc-collapse@4.0.0", "", { "dependencies": { "@babel/runtime": "^7.10.1", "classnames": "2.x", "rc-motion": "^2.3.4", "rc-util": "^5.27.0" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-SwoOByE39/3oIokDs/BnkqI+ltwirZbP8HZdq1/3SkPSBi7xDdvWHTp7cpNI9ullozkR6mwTWQi6/E/9huQVrA=="],
 
     "rc-dialog": ["rc-dialog@9.6.0", "", { "dependencies": { "@babel/runtime": "^7.10.1", "@rc-component/portal": "^1.0.0-8", "classnames": "^2.2.6", "rc-motion": "^2.3.0", "rc-util": "^5.21.0" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-ApoVi9Z8PaCQg6FsUzS8yvBEQy0ZL2PkuvAgrmohPkN3okps5WZ5WQWPc1RNuiOKaAYv8B97ACdsFU5LizzCqg=="],
@@ -1342,15 +1453,15 @@
 
     "re-resizable": ["re-resizable@6.11.2", "", { "peerDependencies": { "react": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-2xI2P3OHs5qw7K0Ud1aLILK6MQxW50TcO+DetD9eIV58j84TqYeHoZcL9H4GXFXXIh7afhH8mv5iUCXII7OW7A=="],
 
-    "react": ["react@19.2.4", "", {}, ""],
+    "react": ["react@19.2.5", "", {}, "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA=="],
 
     "react-avatar-editor": ["react-avatar-editor@14.0.0", "", { "peerDependencies": { "react": "^0.14.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^0.14.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-NaQM3oo4u0a1/Njjutc2FjwKX35vQV+t6S8hovsbAlMpBN1ntIwP/g+Yr9eDIIfaNtRXL0AqboTnPmRxhD/i8A=="],
 
     "react-colorful": ["react-colorful@5.6.1", "", { "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw=="],
 
-    "react-dom": ["react-dom@19.2.4", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.4" } }, ""],
+    "react-dom": ["react-dom@19.2.5", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.5" } }, "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag=="],
 
-    "react-draggable": ["react-draggable@4.4.6", "", { "dependencies": { "clsx": "^1.1.1", "prop-types": "^15.8.1" }, "peerDependencies": { "react": ">= 16.3.0", "react-dom": ">= 16.3.0" } }, "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw=="],
+    "react-draggable": ["react-draggable@4.5.0", "", { "dependencies": { "clsx": "^2.1.1", "prop-types": "^15.8.1" }, "peerDependencies": { "react": ">= 16.3.0", "react-dom": ">= 16.3.0" } }, "sha512-VC+HBLEZ0XJxnOxVAZsdRi8rD04Iz3SiiKOoYzamjylUcju/hP9np/aZdLHf/7WOD268WMoNJMvYfB5yAK45cw=="],
 
     "react-dropzone": ["react-dropzone@12.1.0", "", { "dependencies": { "attr-accept": "^2.2.2", "file-selector": "^0.5.0", "prop-types": "^15.8.1" }, "peerDependencies": { "react": ">= 16.8" } }, "sha512-iBYHA1rbopIvtzokEX4QubO6qk5IF/x3BtKGu74rF2JkQDXnwC4uO/lHKpaw4PJIV6iIAYOlwLv2FpiGyqHNog=="],
 
@@ -1358,35 +1469,37 @@
 
     "react-fast-compare": ["react-fast-compare@3.2.2", "", {}, "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="],
 
-    "react-hook-form": ["react-hook-form@7.71.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-9SUJKCGKo8HUSsCO+y0CtqkqI5nNuaDqTxyqPsZPqIwudpj4rCrAz/jZV+jn57bx5gtZKOh3neQu94DXMc+w5w=="],
+    "react-hook-form": ["react-hook-form@7.72.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-RhwBoy2ygeVZje+C+bwJ8g0NjTdBmDlJvAUHTxRjTmSUKPYsKfMphkS2sgEMotsY03bP358yEYlnUeZy//D9Ig=="],
 
     "react-hotkeys-hook": ["react-hotkeys-hook@5.2.4", "", { "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-BgKg+A1+TawkYluh5Bo4cTmcgMN5L29uhJbDUQdHwPX+qgXRjIPYU5kIDHyxnAwCkCBiu9V5OpB2mpyeluVF2A=="],
 
-    "react-is": ["react-is@19.2.4", "", {}, ""],
+    "react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
 
-    "react-markdown": ["react-markdown@10.1.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "hast-util-to-jsx-runtime": "^2.0.0", "html-url-attributes": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "remark-parse": "^11.0.0", "remark-rehype": "^11.0.0", "unified": "^11.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" }, "peerDependencies": { "@types/react": ">=18", "react": ">=18" } }, ""],
+    "react-loader-spinner": ["react-loader-spinner@8.0.2", "", { "dependencies": { "styled-components": "^6.3.6", "tinycolor2": "^1.6.0" }, "peerDependencies": { "react": ">=17.0.0 <20.0.0", "react-dom": ">=17.0.0 <20.0.0" } }, "sha512-N2gHEy88VKRaijzEFoRp/aHEPE6Lr6upkmPBPu9hfqZqdxftxsXd1B+lzOmVnn3BYHyXwvYrifWzMbR64lwQlw=="],
 
-    "react-merge-refs": ["react-merge-refs@3.0.2", "", { "peerDependencies": { "react": ">=16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["react"] }, "sha512-MSZAfwFfdbEvwkKWP5EI5chuLYnNUxNS7vyS0i1Jp+wtd8J4Ga2ddzhaE68aMol2Z4vCnRM/oGOo1a3V75UPlw=="],
+    "react-loading-icons": ["react-loading-icons@1.1.0", "", {}, "sha512-Y9eZ6HAufmUd8DIQd6rFrx5Bt/oDlTM9Nsjvf8YpajTa3dI8cLNU8jUN5z7KTANU+Yd6/KJuBjxVlrU2dMw33g=="],
 
-    "react-redux": ["react-redux@9.2.0", "", { "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "@types/react": "^18.2.25 || ^19", "react": "^18.0 || ^19", "redux": "^5.0.0" } }, ""],
+    "react-markdown": ["react-markdown@10.1.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "hast-util-to-jsx-runtime": "^2.0.0", "html-url-attributes": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "remark-parse": "^11.0.0", "remark-rehype": "^11.0.0", "unified": "^11.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" }, "peerDependencies": { "@types/react": ">=18", "react": ">=18" } }, "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ=="],
 
-    "react-refresh": ["react-refresh@0.17.0", "", {}, ""],
+    "react-merge-refs": ["react-merge-refs@3.0.2", "", { "peerDependencies": { "react": ">=16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["react"] }, "sha512-MSZAfwFfdbEvwkKWP5EI5chuLYnNUxNS7vyS0i1Jp+wtd8J4Ga2ddzhaE68aMol2Z4vCnRM/oGOo1a3V75UPlw=="],
 
-    "react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
+    "react-redux": ["react-redux@9.2.0", "", { "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "@types/react": "^18.2.25 || ^19", "react": "^18.0 || ^19", "redux": "^5.0.0" }, "optionalPeers": ["@types/react", "redux"] }, "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g=="],
 
-    "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
+    "react-refresh": ["react-refresh@0.17.0", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="],
 
-    "react-rnd": ["react-rnd@10.5.2", "", { "dependencies": { "re-resizable": "6.11.2", "react-draggable": "4.4.6", "tslib": "2.6.2" }, "peerDependencies": { "react": ">=16.3.0", "react-dom": ">=16.3.0" } }, "sha512-0Tm4x7k7pfHf2snewJA8x7Nwgt3LV+58MVEWOVsFjk51eYruFEa6Wy7BNdxt4/lH0wIRsu7Gm3KjSXY2w7YaNw=="],
+    "react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
 
-    "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
+    "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
 
-    "react-zoom-pan-pinch": ["react-zoom-pan-pinch@3.7.0", "", { "peerDependencies": { "react": "*", "react-dom": "*" } }, "sha512-UmReVZ0TxlKzxSbYiAj+LeGRW8s8LraAFTXRAxzMYnNRgGPsxCudwZKVkjvGmjtx7SW/hZamt69NUmGf4xrkXA=="],
+    "react-resizable-layout": ["react-resizable-layout@0.7.3", "", { "peerDependencies": { "react": ">=17.0.0", "react-dom": ">=17.0.0" } }, "sha512-bQBZ/u5gbn3ijm258KSb5OM2RaqWdDvTppe2ykji6RcSqgEdYui1p7px3MU/1rPMp4o3KPnKQ4Od5UOX4sLe8g=="],
+
+    "react-rnd": ["react-rnd@10.5.3", "", { "dependencies": { "re-resizable": "^6.11.2", "react-draggable": "^4.5.0", "tslib": "2.6.2" }, "peerDependencies": { "react": ">=16.3.0", "react-dom": ">=16.3.0" } }, "sha512-s/sIT3pGZnQ+57egijkTp9mizjIWrJz68Pq6yd+F/wniFY3IriML18dUXnQe/HP9uMiJ+9MAp44hljG99fZu6Q=="],
 
-    "read-cache": ["read-cache@1.0.0", "", { "dependencies": { "pify": "^2.3.0" } }, ""],
+    "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
 
-    "readdirp": ["readdirp@4.1.2", "", {}, ""],
+    "react-zoom-pan-pinch": ["react-zoom-pan-pinch@3.7.0", "", { "peerDependencies": { "react": "*", "react-dom": "*" } }, "sha512-UmReVZ0TxlKzxSbYiAj+LeGRW8s8LraAFTXRAxzMYnNRgGPsxCudwZKVkjvGmjtx7SW/hZamt69NUmGf4xrkXA=="],
 
-    "recharts": ["recharts@3.7.0", "", { "dependencies": { "@reduxjs/toolkit": "1.x.x || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, ""],
+    "recharts": ["recharts@3.8.1", "", { "dependencies": { "@reduxjs/toolkit": "^1.9.0 || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-mwzmO1s9sFL0TduUpwndxCUNoXsBw3u3E/0+A+cLcrSfQitSG62L32N69GhqUrrT5qKcAE3pCGVINC6pqkBBQg=="],
 
     "recma-build-jsx": ["recma-build-jsx@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-build-jsx": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew=="],
 
@@ -1396,9 +1509,9 @@
 
     "recma-stringify": ["recma-stringify@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-to-js": "^2.0.0", "unified": "^11.0.0", "vfile": "^6.0.0" } }, "sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g=="],
 
-    "redux": ["redux@5.0.1", "", {}, ""],
+    "redux": ["redux@5.0.1", "", {}, "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="],
 
-    "redux-thunk": ["redux-thunk@3.1.0", "", { "peerDependencies": { "redux": "^5.0.0" } }, ""],
+    "redux-thunk": ["redux-thunk@3.1.0", "", { "peerDependencies": { "redux": "^5.0.0" } }, "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw=="],
 
     "regex": ["regex@6.1.0", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg=="],
 
@@ -1418,7 +1531,7 @@
 
     "remark-cjk-friendly": ["remark-cjk-friendly@1.2.3", "", { "dependencies": { "micromark-extension-cjk-friendly": "1.2.3" }, "peerDependencies": { "@types/mdast": "^4.0.0", "unified": "^11.0.0" }, "optionalPeers": ["@types/mdast"] }, "sha512-UvAgxwlNk+l9Oqgl/9MWK2eWRS7zgBW/nXX9AthV7nd/3lNejF138E7Xbmk9Zs4WjTJGs721r7fAEc7tNFoH7g=="],
 
-    "remark-gfm": ["remark-gfm@4.0.1", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-gfm": "^3.0.0", "micromark-extension-gfm": "^3.0.0", "remark-parse": "^11.0.0", "remark-stringify": "^11.0.0", "unified": "^11.0.0" } }, ""],
+    "remark-gfm": ["remark-gfm@4.0.1", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-gfm": "^3.0.0", "micromark-extension-gfm": "^3.0.0", "remark-parse": "^11.0.0", "remark-stringify": "^11.0.0", "unified": "^11.0.0" } }, "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg=="],
 
     "remark-github": ["remark-github@12.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-find-and-replace": "^3.0.0", "mdast-util-to-string": "^4.0.0", "to-vfile": "^8.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" } }, "sha512-ByefQKFN184LeiGRCabfl7zUJsdlMYWEhiLX1gpmQ11yFg6xSuOTW7LVCv0oc1x+YvUMJW23NU36sJX2RWGgvg=="],
 
@@ -1426,71 +1539,65 @@
 
     "remark-mdx": ["remark-mdx@3.1.1", "", { "dependencies": { "mdast-util-mdx": "^3.0.0", "micromark-extension-mdxjs": "^3.0.0" } }, "sha512-Pjj2IYlUY3+D8x00UJsIOg5BEvfMyeI+2uLPn9VO9Wg4MEtN/VTIq2NEJQfde9PnX15KgtHyl9S0BcTnWrIuWg=="],
 
-    "remark-parse": ["remark-parse@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-from-markdown": "^2.0.0", "micromark-util-types": "^2.0.0", "unified": "^11.0.0" } }, ""],
+    "remark-parse": ["remark-parse@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-from-markdown": "^2.0.0", "micromark-util-types": "^2.0.0", "unified": "^11.0.0" } }, "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA=="],
 
-    "remark-rehype": ["remark-rehype@11.1.2", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "mdast-util-to-hast": "^13.0.0", "unified": "^11.0.0", "vfile": "^6.0.0" } }, ""],
+    "remark-rehype": ["remark-rehype@11.1.2", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "mdast-util-to-hast": "^13.0.0", "unified": "^11.0.0", "vfile": "^6.0.0" } }, "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw=="],
 
-    "remark-stringify": ["remark-stringify@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-to-markdown": "^2.0.0", "unified": "^11.0.0" } }, ""],
+    "remark-stringify": ["remark-stringify@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-to-markdown": "^2.0.0", "unified": "^11.0.0" } }, "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw=="],
 
-    "remend": ["remend@1.2.0", "", {}, "sha512-NbKrdWweTRuByPYErzQCNpNtsR9M1QQ0hK2UzmnmlSaEqHnkQ5Korlyi8KpdbOJ0rImJfRy4EAY0uDxYnL9Plw=="],
+    "remend": ["remend@1.3.0", "", {}, "sha512-iIhggPkhW3hFImKtB10w0dz4EZbs28mV/dmbcYVonWEJ6UGHHpP+bFZnTh6GNWJONg5m+U56JrL+8IxZRdgWjw=="],
 
     "require-from-string": ["require-from-string@2.0.2", "", {}, "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="],
 
-    "reselect": ["reselect@5.1.1", "", {}, ""],
+    "reselect": ["reselect@5.1.1", "", {}, "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="],
 
     "resize-observer-polyfill": ["resize-observer-polyfill@1.5.1", "", {}, "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="],
 
-    "resolve": ["resolve@1.22.11", "", { "dependencies": { "is-core-module": "^2.16.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": "bin/resolve" }, ""],
+    "resolve": ["resolve@1.22.11", "", { "dependencies": { "is-core-module": "^2.16.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ=="],
 
     "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
 
-    "reusify": ["reusify@1.1.0", "", {}, ""],
-
-    "robust-predicates": ["robust-predicates@3.0.2", "", {}, "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="],
+    "robust-predicates": ["robust-predicates@3.0.3", "", {}, "sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA=="],
 
-    "rollup": ["rollup@4.57.1", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-darwin-arm64": "4.57.1", "fsevents": "~2.3.2" }, "bin": "dist/bin/rollup" }, ""],
+    "rollup": ["rollup@4.60.1", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.60.1", "@rollup/rollup-android-arm64": "4.60.1", "@rollup/rollup-darwin-arm64": "4.60.1", "@rollup/rollup-darwin-x64": "4.60.1", "@rollup/rollup-freebsd-arm64": "4.60.1", "@rollup/rollup-freebsd-x64": "4.60.1", "@rollup/rollup-linux-arm-gnueabihf": "4.60.1", "@rollup/rollup-linux-arm-musleabihf": "4.60.1", "@rollup/rollup-linux-arm64-gnu": "4.60.1", "@rollup/rollup-linux-arm64-musl": "4.60.1", "@rollup/rollup-linux-loong64-gnu": "4.60.1", "@rollup/rollup-linux-loong64-musl": "4.60.1", "@rollup/rollup-linux-ppc64-gnu": "4.60.1", "@rollup/rollup-linux-ppc64-musl": "4.60.1", "@rollup/rollup-linux-riscv64-gnu": "4.60.1", "@rollup/rollup-linux-riscv64-musl": "4.60.1", "@rollup/rollup-linux-s390x-gnu": "4.60.1", "@rollup/rollup-linux-x64-gnu": "4.60.1", "@rollup/rollup-linux-x64-musl": "4.60.1", "@rollup/rollup-openbsd-x64": "4.60.1", "@rollup/rollup-openharmony-arm64": "4.60.1", "@rollup/rollup-win32-arm64-msvc": "4.60.1", "@rollup/rollup-win32-ia32-msvc": "4.60.1", "@rollup/rollup-win32-x64-gnu": "4.60.1", "@rollup/rollup-win32-x64-msvc": "4.60.1", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w=="],
 
     "roughjs": ["roughjs@4.6.6", "", { "dependencies": { "hachure-fill": "^0.5.2", "path-data-parser": "^0.1.0", "points-on-curve": "^0.2.0", "points-on-path": "^0.2.1" } }, "sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ=="],
 
-    "run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, ""],
-
     "rw": ["rw@1.3.3", "", {}, "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="],
 
     "safer-buffer": ["safer-buffer@2.1.2", "", {}, "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="],
 
-    "sass": ["sass@1.97.3", "", { "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", "source-map-js": ">=0.6.2 <2.0.0" }, "optionalDependencies": { "@parcel/watcher": "^2.4.1" }, "bin": "sass.js" }, ""],
-
-    "scheduler": ["scheduler@0.27.0", "", {}, ""],
+    "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
 
     "screenfull": ["screenfull@5.2.0", "", {}, "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA=="],
 
     "scroll-into-view-if-needed": ["scroll-into-view-if-needed@3.1.0", "", { "dependencies": { "compute-scroll-into-view": "^3.0.2" } }, "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ=="],
 
-    "semver": ["semver@6.3.1", "", { "bin": "bin/semver.js" }, ""],
+    "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 
     "semver-compare": ["semver-compare@1.0.0", "", {}, "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow=="],
 
-    "seroval": ["seroval@1.5.0", "", {}, ""],
+    "seroval": ["seroval@1.5.2", "", {}, "sha512-xcRN39BdsnO9Tf+VzsE7b3JyTJASItIV1FVFewJKCFcW4s4haIKS3e6vj8PGB9qBwC7tnuOywQMdv5N4qkzi7Q=="],
 
-    "seroval-plugins": ["seroval-plugins@1.5.0", "", { "peerDependencies": { "seroval": "^1.0" } }, ""],
+    "seroval-plugins": ["seroval-plugins@1.5.2", "", { "peerDependencies": { "seroval": "^1.0" } }, "sha512-qpY0Cl+fKYFn4GOf3cMiq6l72CpuVaawb6ILjubOQ+diJ54LfOWaSSPsaswN8DRPIPW4Yq+tE1k5aKd7ILyaFg=="],
 
     "set-value": ["set-value@2.0.1", "", { "dependencies": { "extend-shallow": "^2.0.1", "is-extendable": "^0.1.1", "is-plain-object": "^2.0.3", "split-string": "^3.0.1" } }, "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw=="],
 
-    "shiki": ["shiki@3.22.0", "", { "dependencies": { "@shikijs/core": "3.22.0", "@shikijs/engine-javascript": "3.22.0", "@shikijs/engine-oniguruma": "3.22.0", "@shikijs/langs": "3.22.0", "@shikijs/themes": "3.22.0", "@shikijs/types": "3.22.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-LBnhsoYEe0Eou4e1VgJACes+O6S6QC0w71fCSp5Oya79inkwkm15gQ1UF6VtQ8j/taMDh79hAB49WUk8ALQW3g=="],
+    "shiki": ["shiki@3.23.0", "", { "dependencies": { "@shikijs/core": "3.23.0", "@shikijs/engine-javascript": "3.23.0", "@shikijs/engine-oniguruma": "3.23.0", "@shikijs/langs": "3.23.0", "@shikijs/themes": "3.23.0", "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-55Dj73uq9ZXL5zyeRPzHQsK7Nbyt6Y10k5s7OjuFZGMhpp4r/rsLBH0o/0fstIzX1Lep9VxefWljK/SKCzygIA=="],
 
     "shiki-stream": ["shiki-stream@0.1.4", "", { "dependencies": { "@shikijs/core": "^3.0.0" }, "peerDependencies": { "react": "^19.0.0", "solid-js": "^1.9.0", "vue": "^3.2.0" }, "optionalPeers": ["react", "solid-js", "vue"] }, "sha512-4pz6JGSDmVTTkPJ/ueixHkFAXY4ySCc+unvCaDZV7hqq/sdJZirRxgIXSuNSKgiFlGTgRR97sdu2R8K55sPsrw=="],
 
     "sigma": ["sigma@3.0.2", "", { "dependencies": { "events": "^3.3.0", "graphology-utils": "^2.5.2" } }, "sha512-/BUbeOwPGruiBOm0YQQ6ZMcLIZ6tf/W+Jcm7dxZyAX0tK3WP9/sq7/NAWBxPIxVahdGjCJoGwej0Gdrv0DxlQQ=="],
 
-    "smol-toml": ["smol-toml@1.6.0", "", {}, "sha512-4zemZi0HvTnYwLfrpk/CF9LOd9Lt87kAt50GnqhMpyF9U3poDAP2+iukq2bZsO/ufegbYehBkqINbsWxj4l4cw=="],
+    "smol-toml": ["smol-toml@1.6.1", "", {}, "sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg=="],
 
     "sonner": ["sonner@2.0.7", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w=="],
 
     "source-map": ["source-map@0.7.6", "", {}, "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ=="],
 
-    "source-map-js": ["source-map-js@1.2.1", "", {}, ""],
+    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
-    "space-separated-tokens": ["space-separated-tokens@2.0.2", "", {}, ""],
+    "space-separated-tokens": ["space-separated-tokens@2.0.2", "", {}, "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q=="],
 
     "split-on-first": ["split-on-first@3.0.0", "", {}, "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA=="],
 
@@ -1498,115 +1605,105 @@
 
     "string-convert": ["string-convert@0.2.1", "", {}, "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="],
 
-    "stringify-entities": ["stringify-entities@4.0.4", "", { "dependencies": { "character-entities-html4": "^2.0.0", "character-entities-legacy": "^3.0.0" } }, ""],
+    "stringify-entities": ["stringify-entities@4.0.4", "", { "dependencies": { "character-entities-html4": "^2.0.0", "character-entities-legacy": "^3.0.0" } }, "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg=="],
 
     "style-mod": ["style-mod@4.1.3", "", {}, "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ=="],
 
-    "style-to-js": ["style-to-js@1.1.21", "", { "dependencies": { "style-to-object": "1.0.14" } }, ""],
+    "style-to-js": ["style-to-js@1.1.21", "", { "dependencies": { "style-to-object": "1.0.14" } }, "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ=="],
 
-    "style-to-object": ["style-to-object@1.0.14", "", { "dependencies": { "inline-style-parser": "0.2.7" } }, ""],
+    "style-to-object": ["style-to-object@1.0.14", "", { "dependencies": { "inline-style-parser": "0.2.7" } }, "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw=="],
 
-    "stylis": ["stylis@4.3.6", "", {}, "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ=="],
+    "styled-components": ["styled-components@6.4.0", "", { "dependencies": { "@emotion/is-prop-valid": "1.4.0", "css-to-react-native": "3.2.0", "csstype": "3.2.3", "stylis": "4.3.6" }, "peerDependencies": { "react": ">= 16.8.0", "react-dom": ">= 16.8.0", "react-native": ">= 0.68.0" }, "optionalPeers": ["react-dom", "react-native"] }, "sha512-BL1EDFpt+q10eAeZB0q9ps6pSlPejaBQWBkiuM16pyoVTG4NhZrPrZK0cqNbrozxSsYwUsJ9SQYN6NyeKJYX9A=="],
 
-    "sucrase": ["sucrase@3.35.1", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.2", "commander": "^4.0.0", "lines-and-columns": "^1.1.6", "mz": "^2.7.0", "pirates": "^4.0.1", "tinyglobby": "^0.2.11", "ts-interface-checker": "^0.1.9" }, "bin": { "sucrase": "bin/sucrase", "sucrase-node": "bin/sucrase-node" } }, ""],
+    "stylis": ["stylis@4.3.6", "", {}, "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ=="],
 
     "supports-color": ["supports-color@10.2.2", "", {}, "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g=="],
 
-    "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, ""],
+    "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
 
-    "swr": ["swr@2.4.0", "", { "dependencies": { "dequal": "^2.0.3", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-sUlC20T8EOt1pHmDiqueUWMmRRX03W7w5YxovWX7VR2KHEPCTMly85x05vpkP5i6Bu4h44ePSMD9Tc+G2MItFw=="],
+    "swr": ["swr@2.4.1", "", { "dependencies": { "dequal": "^2.0.3", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-2CC6CiKQtEwaEeNiqWTAw9PGykW8SR5zZX8MZk6TeAvEAnVS7Visz8WzphqgtQ8v2xz/4Q5K+j+SeMaKXeeQIA=="],
 
     "tabbable": ["tabbable@6.4.0", "", {}, "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg=="],
 
-    "tailwindcss": ["tailwindcss@3.4.19", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.6.0", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.3.2", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "jiti": "^1.21.7", "lilconfig": "^3.1.3", "micromatch": "^4.0.8", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.1.1", "postcss": "^8.4.47", "postcss-import": "^15.1.0", "postcss-js": "^4.0.1", "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0", "postcss-nested": "^6.2.0", "postcss-selector-parser": "^6.1.2", "resolve": "^1.22.8", "sucrase": "^3.35.0" }, "bin": { "tailwind": "lib/cli.js", "tailwindcss": "lib/cli.js" } }, ""],
+    "tailwindcss": ["tailwindcss@4.2.2", "", {}, "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q=="],
 
-    "tailwindcss-animate": ["tailwindcss-animate@1.0.7", "", { "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders" } }, ""],
-
-    "thenify": ["thenify@3.3.1", "", { "dependencies": { "any-promise": "^1.0.0" } }, ""],
-
-    "thenify-all": ["thenify-all@1.6.0", "", { "dependencies": { "thenify": ">= 3.1.0 < 4" } }, ""],
+    "tapable": ["tapable@2.3.2", "", {}, "sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA=="],
 
     "throttle-debounce": ["throttle-debounce@5.0.2", "", {}, "sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A=="],
 
-    "tiny-invariant": ["tiny-invariant@1.3.3", "", {}, ""],
-
-    "tiny-warning": ["tiny-warning@1.0.3", "", {}, ""],
+    "tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],
 
-    "tinyexec": ["tinyexec@1.0.2", "", {}, "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg=="],
+    "tinycolor2": ["tinycolor2@1.6.0", "", {}, "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="],
 
-    "tinyglobby": ["tinyglobby@0.2.15", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.3" } }, ""],
+    "tinyexec": ["tinyexec@1.1.1", "", {}, "sha512-VKS/ZaQhhkKFMANmAOhhXVoIfBXblQxGX1myCQ2faQrfmobMftXeJPcZGp0gS07ocvGJWDLZGyOZDadDBqYIJg=="],
 
-    "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, ""],
+    "tinyglobby": ["tinyglobby@0.2.16", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg=="],
 
     "to-vfile": ["to-vfile@8.0.0", "", { "dependencies": { "vfile": "^6.0.0" } }, "sha512-IcmH1xB5576MJc9qcfEC/m/nQCFt3fzMHz45sSlgJyTWjRbKW1HAkJpuf3DgE57YzIlZcwcBZA5ENQbBo4aLkg=="],
 
-    "trim-lines": ["trim-lines@3.0.1", "", {}, ""],
+    "trim-lines": ["trim-lines@3.0.1", "", {}, "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg=="],
 
-    "trough": ["trough@2.2.0", "", {}, ""],
+    "trough": ["trough@2.2.0", "", {}, "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw=="],
 
     "ts-dedent": ["ts-dedent@2.2.0", "", {}, "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ=="],
 
-    "ts-interface-checker": ["ts-interface-checker@0.1.13", "", {}, ""],
-
     "ts-md5": ["ts-md5@2.0.1", "", {}, "sha512-yF35FCoEOFBzOclSkMNEUbFQZuv89KEQ+5Xz03HrMSGUGB1+r+El+JiGOFwsP4p9RFNzwlrydYoTLvPOuICl9w=="],
 
-    "tslib": ["tslib@2.8.1", "", {}, ""],
+    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
     "type-fest": ["type-fest@4.41.0", "", {}, "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA=="],
 
-    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, ""],
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
 
     "ufo": ["ufo@1.6.3", "", {}, "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q=="],
 
-    "unified": ["unified@11.0.5", "", { "dependencies": { "@types/unist": "^3.0.0", "bail": "^2.0.0", "devlop": "^1.0.0", "extend": "^3.0.0", "is-plain-obj": "^4.0.0", "trough": "^2.0.0", "vfile": "^6.0.0" } }, ""],
+    "unified": ["unified@11.0.5", "", { "dependencies": { "@types/unist": "^3.0.0", "bail": "^2.0.0", "devlop": "^1.0.0", "extend": "^3.0.0", "is-plain-obj": "^4.0.0", "trough": "^2.0.0", "vfile": "^6.0.0" } }, "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA=="],
 
     "unist-util-find-after": ["unist-util-find-after@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0" } }, "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ=="],
 
-    "unist-util-is": ["unist-util-is@6.0.1", "", { "dependencies": { "@types/unist": "^3.0.0" } }, ""],
+    "unist-util-is": ["unist-util-is@6.0.1", "", { "dependencies": { "@types/unist": "^3.0.0" } }, "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g=="],
 
-    "unist-util-position": ["unist-util-position@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0" } }, ""],
+    "unist-util-position": ["unist-util-position@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0" } }, "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA=="],
 
     "unist-util-position-from-estree": ["unist-util-position-from-estree@2.0.0", "", { "dependencies": { "@types/unist": "^3.0.0" } }, "sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ=="],
 
     "unist-util-remove-position": ["unist-util-remove-position@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-visit": "^5.0.0" } }, "sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q=="],
 
-    "unist-util-stringify-position": ["unist-util-stringify-position@4.0.0", "", { "dependencies": { "@types/unist": "^3.0.0" } }, ""],
+    "unist-util-stringify-position": ["unist-util-stringify-position@4.0.0", "", { "dependencies": { "@types/unist": "^3.0.0" } }, "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ=="],
 
-    "unist-util-visit": ["unist-util-visit@5.1.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, ""],
+    "unist-util-visit": ["unist-util-visit@5.1.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg=="],
 
-    "unist-util-visit-parents": ["unist-util-visit-parents@6.0.2", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0" } }, ""],
+    "unist-util-visit-parents": ["unist-util-visit-parents@6.0.2", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0" } }, "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ=="],
 
-    "update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": "cli.js" }, ""],
+    "update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],
 
     "uri-js-replace": ["uri-js-replace@1.0.1", "", {}, "sha512-W+C9NWNLFOoBI2QWDp4UT9pv65r2w5Cx+3sTYFvtMdDBxkKt1syCqsUdSFAChbEe1uK5TfS04wt/nGwmaeIQ0g=="],
 
     "url-join": ["url-join@5.0.0", "", {}, "sha512-n2huDr9h9yzd6exQVnH/jU5mr+Pfx08LRXXZhkLLetAMESRj+anQsTAh940iMrIetKAmry9coFuZQ2jY8/p3WA=="],
 
-    "use-callback-ref": ["use-callback-ref@1.3.3", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg=="],
+    "use-callback-ref": ["use-callback-ref@1.3.3", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg=="],
 
     "use-merge-value": ["use-merge-value@1.2.0", "", { "peerDependencies": { "react": ">= 16.x" } }, "sha512-DXgG0kkgJN45TcyoXL49vJnn55LehnrmoHc7MbKi+QDBvr8dsesqws8UlyIWGHMR+JXgxc1nvY+jDGMlycsUcw=="],
 
-    "use-sidecar": ["use-sidecar@1.1.3", "", { "dependencies": { "detect-node-es": "^1.1.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ=="],
-
-    "use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, ""],
+    "use-sidecar": ["use-sidecar@1.1.3", "", { "dependencies": { "detect-node-es": "^1.1.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ=="],
 
-    "util-deprecate": ["util-deprecate@1.0.2", "", {}, ""],
+    "use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],
 
     "uuid": ["uuid@13.0.0", "", { "bin": { "uuid": "dist-node/bin/uuid" } }, "sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w=="],
 
     "v8n": ["v8n@1.5.1", "", {}, "sha512-LdabyT4OffkyXFCe9UT+uMkxNBs5rcTVuZClvxQr08D5TUgo1OFKkoT65qYRCsiKBl/usHjpXvP4hHMzzDRj3A=="],
 
-    "vfile": ["vfile@6.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" } }, ""],
+    "vfile": ["vfile@6.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" } }, "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q=="],
 
     "vfile-location": ["vfile-location@5.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg=="],
 
-    "vfile-message": ["vfile-message@4.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" } }, ""],
+    "vfile-message": ["vfile-message@4.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw=="],
 
-    "victory-vendor": ["victory-vendor@37.3.6", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, ""],
+    "victory-vendor": ["victory-vendor@37.3.6", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ=="],
 
-    "virtua": ["virtua@0.48.6", "", { "peerDependencies": { "react": ">=16.14.0", "react-dom": ">=16.14.0", "solid-js": ">=1.0", "svelte": ">=5.0", "vue": ">=3.2" }, "optionalPeers": ["react", "react-dom", "solid-js", "svelte", "vue"] }, "sha512-Cl4uMvMV5c9RuOy9zhkFMYwx/V4YLBMYLRSWkO8J46opQZ3P7KMq0CqCVOOAKUckjl/r//D2jWTBGYWzmgtzrQ=="],
+    "virtua": ["virtua@0.48.8", "", { "peerDependencies": { "react": ">=16.14.0", "react-dom": ">=16.14.0", "solid-js": ">=1.0", "svelte": ">=5.0", "vue": ">=3.2" }, "optionalPeers": ["react", "react-dom", "solid-js", "svelte", "vue"] }, "sha512-jpsxOw5V4B6hg44JePRLo9DL0TV7N1lBEVtPjKpAJebXyhI2s9lfiXJESaLapNtr3vtiSk/pWHiLf7B2a6UcgQ=="],
 
-    "vite": ["vite@6.4.1", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.13" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "less", "lightningcss", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": "bin/vite.js" }, ""],
+    "vite": ["vite@6.4.2", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.13" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ=="],
 
     "vscode-jsonrpc": ["vscode-jsonrpc@8.2.0", "", {}, "sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA=="],
 
@@ -1618,15 +1715,15 @@
 
     "vscode-languageserver-types": ["vscode-languageserver-types@3.17.5", "", {}, "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg=="],
 
-    "vscode-uri": ["vscode-uri@3.0.8", "", {}, "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw=="],
+    "vscode-uri": ["vscode-uri@3.1.0", "", {}, "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ=="],
 
     "w3c-keyname": ["w3c-keyname@2.2.8", "", {}, "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="],
 
     "web-namespaces": ["web-namespaces@2.0.1", "", {}, "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ=="],
 
-    "yallist": ["yallist@3.1.1", "", {}, ""],
+    "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
 
-    "yaml": ["yaml@1.10.2", "", {}, "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="],
+    "yaml": ["yaml@1.10.3", "", {}, "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA=="],
 
     "yaml-ast-parser": ["yaml-ast-parser@0.0.43", "", {}, "sha512-2PTINUwsRqSd+s8XxKaJWQlUuEMHJQyEuh2edBbW8KNJz0SJPwUSD2zRWqezFEdN7IzAgeuYHFUCF7o8zRdZ0A=="],
 
@@ -1636,11 +1733,7 @@
 
     "zustand": ["zustand@4.5.7", "", { "dependencies": { "use-sync-external-store": "^1.2.2" }, "peerDependencies": { "@types/react": ">=16.8", "immer": ">=9.0.6", "react": ">=16.8" }, "optionalPeers": ["@types/react", "immer", "react"] }, "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw=="],
 
-    "zwitch": ["zwitch@2.0.4", "", {}, ""],
-
-    "@chevrotain/cst-dts-gen/lodash-es": ["lodash-es@4.17.21", "", {}, "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="],
-
-    "@chevrotain/gast/lodash-es": ["lodash-es@4.17.21", "", {}, "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="],
+    "zwitch": ["zwitch@2.0.4", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],
 
     "@emotion/babel-plugin/@emotion/hash": ["@emotion/hash@0.9.2", "", {}, "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g=="],
 
@@ -1658,12 +1751,28 @@
 
     "@lobehub/fluent-emoji/lucide-react": ["lucide-react@0.562.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw=="],
 
-    "@lobehub/ui/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
-
-    "@lobehub/ui/immer": ["immer@11.1.4", "", {}, ""],
+    "@lobehub/ui/immer": ["immer@11.1.4", "", {}, "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw=="],
 
     "@lobehub/ui/lucide-react": ["lucide-react@0.563.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-8dXPB2GI4dI8jV4MgUDGBeLdGk8ekfqVZ0BdLcrRzocGgG75ltNEmWS+gE7uokKF/0oSUuczNDT+g9hFJ23FkA=="],
 
+    "@radix-ui/react-collection/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-menu/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-popover/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-progress/@radix-ui/react-context": ["@radix-ui/react-context@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw=="],
+
+    "@radix-ui/react-progress/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
+
+    "@radix-ui/react-select/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-tooltip/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "@rc-component/dialog/@rc-component/portal": ["@rc-component/portal@2.2.0", "", { "dependencies": { "@rc-component/util": "^1.2.1", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-oc6FlA+uXCMiwArHsJyHcIkX4q6uKyndrPol2eWX8YPkAnztHOPsFIRtmWG4BMlGE5h7YIRE3NiaJ5VS8Lb1QQ=="],
 
     "@rc-component/drawer/@rc-component/portal": ["@rc-component/portal@2.2.0", "", { "dependencies": { "@rc-component/util": "^1.2.1", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-oc6FlA+uXCMiwArHsJyHcIkX4q6uKyndrPol2eWX8YPkAnztHOPsFIRtmWG4BMlGE5h7YIRE3NiaJ5VS8Lb1QQ=="],
@@ -1674,13 +1783,35 @@
 
     "@rc-component/trigger/@rc-component/portal": ["@rc-component/portal@2.2.0", "", { "dependencies": { "@rc-component/util": "^1.2.1", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-oc6FlA+uXCMiwArHsJyHcIkX4q6uKyndrPol2eWX8YPkAnztHOPsFIRtmWG4BMlGE5h7YIRE3NiaJ5VS8Lb1QQ=="],
 
-    "@rc-component/util/react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
+    "@reduxjs/toolkit/immer": ["immer@11.1.4", "", {}, "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw=="],
 
-    "@reduxjs/toolkit/immer": ["immer@11.1.4", "", {}, ""],
+    "@spacedrive/ai/@dnd-kit/sortable": ["@dnd-kit/sortable@8.0.0", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.1.0", "react": ">=16.8.0" } }, "sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g=="],
 
-    "anymatch/picomatch": ["picomatch@2.3.1", "", {}, ""],
+    "@spacedrive/ai/@react-sigma/core": ["@react-sigma/core@4.0.3", "", { "peerDependencies": { "graphology": "^0.25.4", "react": "^18.0.0", "sigma": "^3.0.0-beta.24" } }, "sha512-/y/U1GH18xjGYMWNYXXqHGJ+8tHf+e4z1i0gNSm9iuhch8sGFJooO3VfyPJlBox42Wl4/gCapQhOHAfVW0pRtw=="],
 
-    "chevrotain/lodash-es": ["lodash-es@4.17.21", "", {}, "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="],
+    "@spacedrive/ai/framer-motion": ["framer-motion@11.18.2", "", { "dependencies": { "motion-dom": "^11.18.1", "motion-utils": "^11.18.1", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w=="],
+
+    "@spacedrive/ai/graphology": ["graphology@0.25.4", "", { "dependencies": { "events": "^3.3.0", "obliterator": "^2.0.2" }, "peerDependencies": { "graphology-types": ">=0.24.0" } }, "sha512-33g0Ol9nkWdD6ulw687viS8YJQBxqG5LWII6FI6nul0pq6iM2t5EKquOTFDbyTblRB3O9I+7KX4xI8u5ffekAQ=="],
+
+    "@spacedrive/ai/react-markdown": ["react-markdown@9.1.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "hast-util-to-jsx-runtime": "^2.0.0", "html-url-attributes": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "remark-parse": "^11.0.0", "remark-rehype": "^11.0.0", "unified": "^11.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" }, "peerDependencies": { "@types/react": ">=18", "react": ">=18" } }, "sha512-xaijuJB0kzGiUdG7nc2MOMDUDBWPyGAjZtUrow9XxUeua8IqeP+VlIfAZ3bphpcLTnSZXz6z9jcVC/TCwbfgdw=="],
+
+    "@spacedrive/primitives/framer-motion": ["framer-motion@11.18.2", "", { "dependencies": { "motion-dom": "^11.18.1", "motion-utils": "^11.18.1", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w=="],
+
+    "@spacedrive/primitives/sonner": ["sonner@1.7.4", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw=="],
+
+    "@spacedrive/primitives/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.9.2", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.1", "tslib": "^2.4.0" }, "bundled": true }, "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.9.2", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.3", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" }, "bundled": true }, "sha512-xK9sGVbJWYb08+mTJt3/YV24WxvxpXcXtP6B172paPZ+Ts69Re9dAr7lKwJoeIx8OoeuimEiRZ7umkiUVClmmQ=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
     "cosmiconfig/parse-json": ["parse-json@5.2.0", "", { "dependencies": { "@babel/code-frame": "^7.0.0", "error-ex": "^1.3.1", "json-parse-even-better-errors": "^2.3.0", "lines-and-columns": "^1.1.6" } }, "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg=="],
 
@@ -1694,50 +1825,40 @@
 
     "extend-shallow/is-extendable": ["is-extendable@0.1.1", "", {}, "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw=="],
 
-    "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, ""],
-
     "hoist-non-react-statics/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
-    "katex/commander": ["commander@8.3.0", "", {}, "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="],
-
     "leva/zustand": ["zustand@3.7.2", "", { "peerDependencies": { "react": ">=16.8" }, "optionalPeers": ["react"] }, "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA=="],
 
-    "mdast-util-find-and-replace/escape-string-regexp": ["escape-string-regexp@5.0.0", "", {}, ""],
+    "mdast-util-find-and-replace/escape-string-regexp": ["escape-string-regexp@5.0.0", "", {}, "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw=="],
 
     "mermaid/marked": ["marked@16.4.2", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA=="],
 
     "mermaid/uuid": ["uuid@11.1.0", "", { "bin": { "uuid": "dist/esm/bin/uuid" } }, "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A=="],
 
-    "micromatch/picomatch": ["picomatch@2.3.1", "", {}, ""],
-
-    "parse-entities/@types/unist": ["@types/unist@2.0.11", "", {}, ""],
+    "parse-entities/@types/unist": ["@types/unist@2.0.11", "", {}, "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="],
 
     "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
     "rc-menu/@rc-component/trigger": ["@rc-component/trigger@2.3.1", "", { "dependencies": { "@babel/runtime": "^7.23.2", "@rc-component/portal": "^1.1.0", "classnames": "^2.3.2", "rc-motion": "^2.0.0", "rc-resize-observer": "^1.3.1", "rc-util": "^5.44.0" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-ORENF39PeXTzM+gQEshuk460Z8N4+6DkjpxlpE7Q3gYy1iBpLrx0FOJz3h62ryrJZ/3zCAUIkT1Pb/8hHWpb3A=="],
 
-    "rc-util/react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
-
-    "react-draggable/clsx": ["clsx@1.2.1", "", {}, "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="],
-
     "react-rnd/tslib": ["tslib@2.6.2", "", {}, "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="],
 
     "set-value/is-extendable": ["is-extendable@0.1.1", "", {}, "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw=="],
 
     "split-string/extend-shallow": ["extend-shallow@3.0.2", "", { "dependencies": { "assign-symbols": "^1.0.0", "is-extendable": "^1.0.1" } }, "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q=="],
 
-    "tailwindcss/chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, ""],
+    "@spacedrive/ai/framer-motion/motion-dom": ["motion-dom@11.18.1", "", { "dependencies": { "motion-utils": "^11.18.1" } }, "sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw=="],
 
-    "cytoscape-fcose/cose-base/layout-base": ["layout-base@2.0.1", "", {}, "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg=="],
+    "@spacedrive/ai/framer-motion/motion-utils": ["motion-utils@11.18.1", "", {}, "sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA=="],
 
-    "d3-sankey/d3-array/internmap": ["internmap@1.0.1", "", {}, "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="],
+    "@spacedrive/primitives/framer-motion/motion-dom": ["motion-dom@11.18.1", "", { "dependencies": { "motion-utils": "^11.18.1" } }, "sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw=="],
 
-    "d3-sankey/d3-shape/d3-path": ["d3-path@1.0.9", "", {}, "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="],
+    "@spacedrive/primitives/framer-motion/motion-utils": ["motion-utils@11.18.1", "", {}, "sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA=="],
 
-    "tailwindcss/chokidar/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, ""],
+    "cytoscape-fcose/cose-base/layout-base": ["layout-base@2.0.1", "", {}, "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg=="],
 
-    "tailwindcss/chokidar/readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, ""],
+    "d3-sankey/d3-array/internmap": ["internmap@1.0.1", "", {}, "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="],
 
-    "tailwindcss/chokidar/readdirp/picomatch": ["picomatch@2.3.1", "", {}, ""],
+    "d3-sankey/d3-shape/d3-path": ["d3-path@1.0.9", "", {}, "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="],
   }
 }
diff --git a/interface/opencode-embed-src/embed.tsx b/interface/opencode-embed-src/embed.tsx
index 73413ccfe..8787d8670 100644
--- a/interface/opencode-embed-src/embed.tsx
+++ b/interface/opencode-embed-src/embed.tsx
@@ -22,6 +22,12 @@ import { MetaProvider } from "@solidjs/meta"
 import { MemoryRouter, Route, createMemoryHistory } from "@solidjs/router"
 import { ErrorBoundary, lazy, onMount, type ParentProps, Show, Suspense } from "solid-js"
 import { render } from "solid-js/web"
+// Theme overrides use `var(--color-*)` SpaceUI tokens rather than static hex,
+// so the embed tracks whichever Spacebot theme class is on <html> (dark,
+// midnight, noir, slate, nord, mocha, vanilla). CSS custom properties
+// inherit across Shadow DOM boundaries, so the embed picks them up even
+// though it mounts into a shadow root. Seeds stay hex — OpenCode's theme
+// engine tints/shades them in TypeScript at registration time.
 import spacebotTheme from "./spacebot-theme.json"
 import { CommandProvider } from "@/context/command"
 import { CommentsProvider } from "@/context/comments"
diff --git a/interface/opencode-embed-src/spacebot-theme.json b/interface/opencode-embed-src/spacebot-theme.json
index 6dc5be2d2..abffeee9d 100644
--- a/interface/opencode-embed-src/spacebot-theme.json
+++ b/interface/opencode-embed-src/spacebot-theme.json
@@ -15,31 +15,94 @@
       "diffDelete": "#f0b0b0"
     },
     "overrides": {
-      "background-base": "#f5f3f7",
-      "background-weak": "#eeedf2",
-      "background-strong": "#faf9fc",
-      "background-stronger": "#fdfcfe",
-      "text-base": "#1a1a20",
-      "text-weak": "#4a4a56",
-      "text-strong": "#0c0c0e",
-      "surface-base": "#faf9fc",
-      "surface-raised-base": "#ffffff",
-      "surface-weak": "#eeedf2",
-      "input-base": "#ffffff",
-      "border-weak-base": "#dddbe6",
-      "border-base": "#b5b3c2",
-      "border-strong-base": "#7a788a",
-      "syntax-string": "#3dba72",
-      "syntax-primitive": "#d44848",
-      "syntax-property": "#a54de8",
-      "syntax-type": "#d4993f",
-      "syntax-constant": "#5096d4",
-      "markdown-heading": "#a54de8",
-      "markdown-text": "#1a1a20",
-      "markdown-code": "#3dba72",
-      "markdown-strong": "#a54de8",
-      "markdown-link": "#a54de8",
-      "markdown-link-text": "#a54de8"
+      "background-base": "var(--color-app)",
+      "background-weak": "var(--color-app-box)",
+      "background-strong": "var(--color-app)",
+      "background-stronger": "var(--color-app)",
+      "surface-base": "var(--color-app-box)",
+      "base": "var(--color-app-box)",
+      "surface-base-hover": "var(--color-app-hover)",
+      "surface-base-active": "var(--color-app-active)",
+      "surface-inset-base": "var(--color-app-dark-box)",
+      "surface-raised-base": "var(--color-app-overlay)",
+      "surface-raised-base-hover": "var(--color-app-hover)",
+      "surface-raised-strong": "var(--color-app-light-box)",
+      "surface-raised-stronger": "var(--color-app-active)",
+      "surface-weak": "var(--color-app-dark-box)",
+      "surface-weaker": "var(--color-app-darker-box)",
+      "surface-float-base": "var(--color-app-overlay)",
+      "input-base": "var(--color-app-input)",
+      "input-hover": "var(--color-app-hover)",
+      "input-active": "var(--color-app-active)",
+      "input-selected": "var(--color-app-selected)",
+      "text-base": "var(--color-ink)",
+      "text-weak": "var(--color-ink-dull)",
+      "text-weaker": "var(--color-ink-faint)",
+      "text-strong": "var(--color-ink)",
+      "text-interactive-base": "var(--color-accent)",
+      "icon-base": "var(--color-ink-dull)",
+      "icon-weak-base": "var(--color-ink-faint)",
+      "icon-strong-base": "var(--color-ink)",
+      "icon-interactive-base": "var(--color-accent)",
+      "border-weak-base": "var(--color-app-line)",
+      "border-weak-hover": "var(--color-app-line)",
+      "border-weak-active": "var(--color-app-divider)",
+      "border-weak-selected": "var(--color-app-divider)",
+      "border-weak-disabled": "var(--color-app-line)",
+      "border-weak-focus": "var(--color-accent-faint)",
+      "border-base": "var(--color-app-line)",
+      "border-hover": "var(--color-app-divider)",
+      "border-active": "var(--color-app-divider)",
+      "border-selected": "var(--color-accent-faint)",
+      "border-disabled": "var(--color-app-line)",
+      "border-focus": "var(--color-accent-faint)",
+      "border-strong-base": "var(--color-app-divider)",
+      "border-strong-hover": "var(--color-app-divider)",
+      "border-strong-active": "var(--color-app-divider)",
+      "border-strong-selected": "var(--color-accent-faint)",
+      "border-strong-disabled": "var(--color-app-line)",
+      "border-strong-focus": "var(--color-accent-faint)",
+      "border-weaker-base": "var(--color-app-line)",
+      "border-weaker-hover": "var(--color-app-line)",
+      "border-weaker-active": "var(--color-app-divider)",
+      "surface-interactive-base": "var(--color-accent-deep)",
+      "surface-interactive-hover": "var(--color-accent)",
+      "surface-interactive-weak": "var(--color-accent-deep)",
+      "surface-brand-base": "var(--color-accent)",
+      "surface-brand-hover": "var(--color-accent-faint)",
+      "button-secondary-base": "var(--color-app-button)",
+      "button-secondary-hover": "var(--color-app-hover)",
+      "button-ghost-hover": "var(--color-app-hover)",
+      "button-ghost-hover2": "var(--color-app-active)",
+      "surface-diff-add-base": "#0e2018",
+      "surface-diff-delete-base": "#200e10",
+      "surface-diff-hidden-base": "#18181f",
+      "syntax-comment": "var(--color-ink-faint)",
+      "syntax-string": "#5cf0b0",
+      "syntax-primitive": "#f06060",
+      "syntax-property": "#c080f0",
+      "syntax-type": "#f0c070",
+      "syntax-constant": "#70d0f0",
+      "syntax-keyword": "var(--color-ink-dull)",
+      "syntax-operator": "var(--color-ink-dull)",
+      "syntax-variable": "var(--color-ink)",
+      "syntax-object": "var(--color-ink)",
+      "syntax-punctuation": "var(--color-ink-dull)",
+      "syntax-info": "#70d0f0",
+      "markdown-heading": "var(--color-accent-faint)",
+      "markdown-text": "var(--color-ink)",
+      "markdown-link": "var(--color-accent)",
+      "markdown-link-text": "var(--color-accent)",
+      "markdown-code": "#5cf0b0",
+      "markdown-block-quote": "var(--color-ink-dull)",
+      "markdown-emph": "#f0c070",
+      "markdown-strong": "var(--color-accent-faint)",
+      "markdown-horizontal-rule": "var(--color-app-line)",
+      "markdown-list-item": "var(--color-accent-faint)",
+      "markdown-list-enumeration": "var(--color-accent-faint)",
+      "markdown-image": "var(--color-accent-faint)",
+      "markdown-image-text": "var(--color-accent-faint)",
+      "markdown-code-block": "var(--color-ink)"
     }
   },
   "dark": {
@@ -55,93 +118,94 @@
       "diffDelete": "#f06060"
     },
     "overrides": {
-      "background-base": "#0c0c0e",
-      "background-weak": "#0e0e11",
-      "background-strong": "#0a0a0c",
-      "background-stronger": "#080809",
-      "surface-base": "#131317",
-      "base": "#131317",
-      "surface-base-hover": "#18181d",
-      "surface-raised-base": "#0e0e11",
-      "surface-raised-base-hover": "#131317",
-      "surface-raised-strong": "#1a1a1f",
-      "surface-raised-stronger": "#222228",
-      "surface-weak": "#111114",
-      "surface-weaker": "#0e0e11",
-      "surface-float-base": "#0a0a0c",
-      "surface-inset-base": "#0a0a0c",
-      "input-base": "#111114",
-      "input-hover": "#131317",
-      "input-active": "#0e0e11",
-      "input-selected": "#2a1a4a",
-      "text-base": "#eeeff3",
-      "text-weak": "#6d6e74",
-      "text-weaker": "#55565c",
-      "text-strong": "#ffffff",
-      "text-interactive-base": "#c080f0",
-      "icon-base": "#6d6e74",
-      "icon-weak-base": "#3a3a42",
-      "icon-strong-base": "#eeeff3",
-      "icon-interactive-base": "#a54de8",
-      "border-weak-base": "#222228",
-      "border-weak-hover": "#2a2a32",
-      "border-weak-active": "#32323c",
-      "border-weak-selected": "#3a3a46",
-      "border-weak-disabled": "#141418",
-      "border-weak-focus": "#2e2e38",
-      "border-base": "#3a3a46",
-      "border-hover": "#444450",
-      "border-active": "#4e4e5a",
-      "border-selected": "#585864",
-      "border-disabled": "#1a1a1f",
-      "border-focus": "#484854",
-      "border-strong-base": "#585864",
-      "border-strong-hover": "#62626e",
-      "border-strong-active": "#6c6c78",
-      "border-strong-selected": "#767682",
-      "border-strong-disabled": "#28282e",
-      "border-strong-focus": "#666672",
-      "border-weaker-base": "#141418",
-      "border-weaker-hover": "#1a1a1f",
-      "border-weaker-active": "#222228",
-      "surface-interactive-base": "#1e0e3a",
-      "surface-interactive-hover": "#2a1a4a",
-      "surface-interactive-weak": "#140a28",
-      "surface-brand-base": "#a54de8",
-      "surface-brand-hover": "#9340d4",
+      "background-base": "var(--color-app)",
+      "background-weak": "var(--color-app-box)",
+      "background-strong": "var(--color-app)",
+      "background-stronger": "var(--color-app)",
+      "surface-base": "var(--color-app-box)",
+      "base": "var(--color-app-box)",
+      "surface-base-hover": "var(--color-app-hover)",
+      "surface-base-active": "var(--color-app-active)",
+      "surface-inset-base": "var(--color-app-dark-box)",
+      "surface-raised-base": "var(--color-app-overlay)",
+      "surface-raised-base-hover": "var(--color-app-hover)",
+      "surface-raised-strong": "var(--color-app-light-box)",
+      "surface-raised-stronger": "var(--color-app-active)",
+      "surface-weak": "var(--color-app-dark-box)",
+      "surface-weaker": "var(--color-app-darker-box)",
+      "surface-float-base": "var(--color-app-overlay)",
+      "input-base": "var(--color-app-input)",
+      "input-hover": "var(--color-app-hover)",
+      "input-active": "var(--color-app-active)",
+      "input-selected": "var(--color-app-selected)",
+      "text-base": "var(--color-ink)",
+      "text-weak": "var(--color-ink-dull)",
+      "text-weaker": "var(--color-ink-faint)",
+      "text-strong": "var(--color-ink)",
+      "text-interactive-base": "var(--color-accent)",
+      "icon-base": "var(--color-ink-dull)",
+      "icon-weak-base": "var(--color-ink-faint)",
+      "icon-strong-base": "var(--color-ink)",
+      "icon-interactive-base": "var(--color-accent)",
+      "border-weak-base": "var(--color-app-line)",
+      "border-weak-hover": "var(--color-app-line)",
+      "border-weak-active": "var(--color-app-divider)",
+      "border-weak-selected": "var(--color-app-divider)",
+      "border-weak-disabled": "var(--color-app-line)",
+      "border-weak-focus": "var(--color-accent-faint)",
+      "border-base": "var(--color-app-line)",
+      "border-hover": "var(--color-app-divider)",
+      "border-active": "var(--color-app-divider)",
+      "border-selected": "var(--color-accent-faint)",
+      "border-disabled": "var(--color-app-line)",
+      "border-focus": "var(--color-accent-faint)",
+      "border-strong-base": "var(--color-app-divider)",
+      "border-strong-hover": "var(--color-app-divider)",
+      "border-strong-active": "var(--color-app-divider)",
+      "border-strong-selected": "var(--color-accent-faint)",
+      "border-strong-disabled": "var(--color-app-line)",
+      "border-strong-focus": "var(--color-accent-faint)",
+      "border-weaker-base": "var(--color-app-line)",
+      "border-weaker-hover": "var(--color-app-line)",
+      "border-weaker-active": "var(--color-app-divider)",
+      "surface-interactive-base": "var(--color-accent-deep)",
+      "surface-interactive-hover": "var(--color-accent)",
+      "surface-interactive-weak": "var(--color-accent-deep)",
+      "surface-brand-base": "var(--color-accent)",
+      "surface-brand-hover": "var(--color-accent-faint)",
+      "button-secondary-base": "var(--color-app-button)",
+      "button-secondary-hover": "var(--color-app-hover)",
+      "button-ghost-hover": "var(--color-app-hover)",
+      "button-ghost-hover2": "var(--color-app-active)",
       "surface-diff-add-base": "#0e2018",
       "surface-diff-delete-base": "#200e10",
       "surface-diff-hidden-base": "#18181f",
-      "button-secondary-base": "#1a1a1f",
-      "button-secondary-hover": "#222228",
-      "button-ghost-hover": "#131317",
-      "button-ghost-hover2": "#18181d",
-      "syntax-comment": "var(--text-weak)",
+      "syntax-comment": "var(--color-ink-faint)",
       "syntax-string": "#5cf0b0",
       "syntax-primitive": "#f06060",
       "syntax-property": "#c080f0",
       "syntax-type": "#f0c070",
       "syntax-constant": "#70d0f0",
-      "syntax-keyword": "var(--text-weak)",
-      "syntax-operator": "var(--text-weak)",
-      "syntax-variable": "var(--text-strong)",
-      "syntax-object": "var(--text-strong)",
-      "syntax-punctuation": "var(--text-weak)",
+      "syntax-keyword": "var(--color-ink-dull)",
+      "syntax-operator": "var(--color-ink-dull)",
+      "syntax-variable": "var(--color-ink)",
+      "syntax-object": "var(--color-ink)",
+      "syntax-punctuation": "var(--color-ink-dull)",
       "syntax-info": "#70d0f0",
-      "markdown-heading": "#c080f0",
-      "markdown-text": "#eeeff3",
-      "markdown-link": "#c080f0",
-      "markdown-link-text": "#c080f0",
+      "markdown-heading": "var(--color-accent-faint)",
+      "markdown-text": "var(--color-ink)",
+      "markdown-link": "var(--color-accent)",
+      "markdown-link-text": "var(--color-accent)",
       "markdown-code": "#5cf0b0",
-      "markdown-block-quote": "#6d6e74",
+      "markdown-block-quote": "var(--color-ink-dull)",
       "markdown-emph": "#f0c070",
-      "markdown-strong": "#c080f0",
-      "markdown-horizontal-rule": "#222228",
-      "markdown-list-item": "#c080f0",
-      "markdown-list-enumeration": "#c080f0",
-      "markdown-image": "#c080f0",
-      "markdown-image-text": "#c080f0",
-      "markdown-code-block": "#eeeff3"
+      "markdown-strong": "var(--color-accent-faint)",
+      "markdown-horizontal-rule": "var(--color-app-line)",
+      "markdown-list-item": "var(--color-accent-faint)",
+      "markdown-list-enumeration": "var(--color-accent-faint)",
+      "markdown-image": "var(--color-accent-faint)",
+      "markdown-image-text": "var(--color-accent-faint)",
+      "markdown-code-block": "var(--color-ink)"
     }
   }
 }
diff --git a/interface/package.json b/interface/package.json
index 80cb3661f..1ebefa2d5 100644
--- a/interface/package.json
+++ b/interface/package.json
@@ -23,20 +23,14 @@
 		"@fortawesome/free-solid-svg-icons": "^7.2.0",
 		"@fortawesome/react-fontawesome": "^3.0.0",
 		"@hookform/resolvers": "^5.2.2",
-		"@hugeicons/core-free-icons": "^3.1.1",
-		"@hugeicons/react": "^1.1.5",
 		"@lobehub/icons": "^4.6.0",
-		"@radix-ui/react-checkbox": "^1.3.3",
-		"@radix-ui/react-dialog": "^1.1.15",
-		"@radix-ui/react-dropdown-menu": "^2.1.16",
-		"@radix-ui/react-popover": "^1.1.15",
-		"@radix-ui/react-radio-group": "^1.3.8",
-		"@radix-ui/react-select": "^2.2.6",
-		"@radix-ui/react-slider": "^1.3.6",
-		"@radix-ui/react-switch": "^1.2.6",
-		"@radix-ui/react-tabs": "^1.1.13",
-		"@radix-ui/react-tooltip": "^1.2.8",
+		"@phosphor-icons/react": "^2.1.10",
 		"@react-sigma/core": "^5.0.6",
+		"@spacedrive/ai": "^0.2.3",
+		"@spacedrive/explorer": "^0.2.3",
+		"@spacedrive/forms": "^0.2.3",
+		"@spacedrive/primitives": "^0.2.3",
+		"@spacedrive/tokens": "^0.2.3",
 		"@tanstack/react-query": "^5.62.0",
 		"@tanstack/react-query-devtools": "^5.91.3",
 		"@tanstack/react-router": "^1.159.5",
@@ -65,15 +59,12 @@
 		"zod": "^4.3.6"
 	},
 	"devDependencies": {
+		"@tailwindcss/vite": "^4.2.2",
 		"@types/react": "^19.0.0",
 		"@types/react-dom": "^19.0.0",
 		"@vitejs/plugin-react": "^4.3.4",
-		"autoprefixer": "^10.4.18",
 		"openapi-typescript": "^7",
-		"postcss": "^8.4.36",
-		"sass": "^1.72.0",
-		"tailwindcss": "^3.4.1",
-		"tailwindcss-animate": "^1.0.7",
+		"tailwindcss": "^4.2.2",
 		"typescript": "^5.6.2",
 		"vite": "^6.0.0"
 	},
diff --git a/interface/postcss.config.js b/interface/postcss.config.js
deleted file mode 100644
index 7b75c83af..000000000
--- a/interface/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {},
-	},
-};
diff --git a/interface/src/api/client.ts b/interface/src/api/client.ts
index 6435b3e9c..97679dd47 100644
--- a/interface/src/api/client.ts
+++ b/interface/src/api/client.ts
@@ -1,4 +1,10 @@
-export const BASE_PATH: string = (window as any).__SPACEBOT_BASE_PATH || "";
+declare global {
+	interface Window {
+		__SPACEBOT_BASE_PATH?: string;
+	}
+}
+
+export const BASE_PATH: string = window.__SPACEBOT_BASE_PATH || "";
 
 /**
  * Dynamic server URL for the Tauri desktop app. When set, all API
@@ -13,7 +19,7 @@ export function getServerUrl(): string {
 	return _serverUrl;
 }
 
-function getApiBase(): string {
+export function getApiBase(): string {
 	if (_serverUrl) return `${_serverUrl}/api`;
 	return BASE_PATH + "/api";
 }
@@ -108,6 +114,7 @@ export interface InboundMessageEvent {
 	sender_name?: string | null;
 	sender_id: string;
 	text: string;
+	attachments?: AttachmentMeta[];
 }
 
 export interface OutboundMessageEvent {
@@ -266,6 +273,14 @@ export type ApiEvent =
 
 // -- Timeline types (discriminated union parts) --
 
+export interface AttachmentMeta {
+	id: string;
+	filename: string;
+	saved_filename: string;
+	mime_type: string;
+	size_bytes: number;
+}
+
 export interface TimelineMessage {
 	type: "message";
 	id: string;
@@ -274,6 +289,7 @@ export interface TimelineMessage {
 	sender_id: string | null;
 	content: string;
 	created_at: string;
+	attachments?: AttachmentMeta[];
 }
 
 export interface TimelineBranchRun {
@@ -338,12 +354,45 @@ export interface StatusBlockSnapshot {
 	completed_items: CompletedItemInfo[];
 }
 
+/**
+ * One entry in the prompt history. Mirrors rig's `Message` enum as
+ * serialized to JSON: role plus content that may be a plain string,
+ * a single block, or an array of blocks depending on the LLM provider.
+ */
+export interface PromptHistoryMessage {
+	role: string;
+	content: PromptHistoryContent;
+}
+
+export type PromptHistoryContent =
+	| string
+	| PromptHistoryBlock
+	| PromptHistoryBlock[];
+
+/**
+ * A single content block inside a `PromptHistoryMessage`. Fields are
+ * optional because rig's content variants are structurally different:
+ * text blocks, tool calls, tool results, and reasoning all flow through
+ * the same channel.
+ */
+export interface PromptHistoryBlock {
+	type?: string;
+	text?: string;
+	id?: string;
+	content?: unknown;
+	function?: {
+		name: string;
+		arguments: string | Record<string, unknown>;
+	};
+	reasoning?: string[];
+}
+
 export interface PromptInspectResponse {
 	channel_id: string;
 	system_prompt: string;
 	total_chars: number;
 	history_length: number;
-	history: unknown[];
+	history: PromptHistoryMessage[];
 	capture_enabled: boolean;
 	/** Present when the channel is not active */
 	error?: string;
@@ -368,7 +417,7 @@ export interface PromptSnapshot {
 	user_message: string;
 	system_prompt: string;
 	system_prompt_chars: number;
-	history: unknown;
+	history: PromptHistoryMessage[];
 	history_length: number;
 }
 
@@ -838,6 +887,7 @@ export interface OpenCodeSettingsUpdate {
 }
 
 export interface GlobalSettingsUpdate {
+	company_name?: string;
 	brave_search_key?: string | null;
 	api_enabled?: boolean;
 	api_port?: number;
@@ -853,7 +903,7 @@ export interface SkillInfo {
 	description: string;
 	file_path: string;
 	base_dir: string;
-	source: "instance" | "workspace";
+	source: "builtin" | "instance" | "workspace";
 	source_repo?: string;
 }
 
@@ -990,6 +1040,47 @@ export interface UpdateTaskRequest {
 	approved_by?: string;
 }
 
+// -- Notification Types --
+
+export type NotificationKind = "task_approval" | "worker_failed" | "cortex_observation";
+export type NotificationSeverity = "info" | "warn" | "error";
+
+export interface NotificationItem {
+	id: string;
+	kind: NotificationKind;
+	severity: NotificationSeverity;
+	title: string;
+	body?: string;
+	agent_id?: string;
+	related_entity_type?: string;
+	related_entity_id?: string;
+	action_url?: string;
+	metadata?: string;
+	created_at: string;
+	read_at?: string;
+	dismissed_at?: string;
+}
+
+export interface NotificationsResponse {
+	notifications: NotificationItem[];
+}
+
+export interface UnreadCountResponse {
+	count: number;
+}
+
+export interface NotificationCreatedEvent {
+	type: "notification_created";
+	notification: NotificationItem;
+}
+
+export interface NotificationUpdatedEvent {
+	type: "notification_updated";
+	id: string;
+	read: boolean;
+	dismissed: boolean;
+}
+
 // -- Messaging / Bindings Types --
 
 export interface BindingInfo {
@@ -1153,14 +1244,15 @@ export type ProjectStatus = "active" | "archived";
 
 export interface Project {
 	id: string;
-	agent_id: string;
 	name: string;
 	description: string;
 	icon: string;
 	tags: string[];
 	root_path: string;
+	logo_path: string | null;
 	settings: Record<string, unknown>;
 	status: ProjectStatus;
+	sort_order: number;
 	created_at: string;
 	updated_at: string;
 }
@@ -1238,6 +1330,7 @@ export interface UpdateProjectRequest {
 	description?: string;
 	icon?: string;
 	tags?: string[];
+	logo_path?: string | null;
 	settings?: Record<string, unknown>;
 	status?: ProjectStatus;
 }
@@ -1758,8 +1851,11 @@ export const api = {
 	},
 
 	togglePlatform: async (platform: string, enabled: boolean, adapter?: string) => {
-		const body: Record<string, unknown> = { platform, enabled };
-		if (adapter) body.adapter = adapter;
+		const body: Types.TogglePlatformRequest = {
+			platform,
+			enabled,
+			adapter: adapter ?? null,
+		};
 		const response = await fetch(`${getApiBase()}/messaging/toggle`, {
 			method: "POST",
 			headers: { "Content-Type": "application/json" },
@@ -1772,8 +1868,10 @@ export const api = {
 	},
 
 	disconnectPlatform: async (platform: string, adapter?: string) => {
-		const body: Record<string, unknown> = { platform };
-		if (adapter) body.adapter = adapter;
+		const body: Types.DisconnectPlatformRequest = {
+			platform,
+			adapter: adapter ?? null,
+		};
 		const response = await fetch(`${getApiBase()}/messaging/disconnect`, {
 			method: "POST",
 			headers: { "Content-Type": "application/json" },
@@ -1939,7 +2037,7 @@ export const api = {
 		if (!response.ok) {
 			throw new Error(`API error: ${response.status}`);
 		}
-		return response.json();
+		return response.json() as Promise<{ link: AgentLinkResponse }>;
 	},
 	updateLink: async (from: string, to: string, request: UpdateLinkRequest): Promise<{ link: AgentLinkResponse }> => {
 		const response = await fetch(
@@ -1953,7 +2051,7 @@ export const api = {
 		if (!response.ok) {
 			throw new Error(`API error: ${response.status}`);
 		}
-		return response.json();
+		return response.json() as Promise<{ link: AgentLinkResponse }>;
 	},
 	deleteLink: async (from: string, to: string): Promise<void> => {
 		const response = await fetch(
@@ -1976,7 +2074,7 @@ export const api = {
 		if (!response.ok) {
 			throw new Error(`API error: ${response.status}`);
 		}
-		return response.json();
+		return response.json() as Promise<{ group: TopologyGroup }>;
 	},
 	updateGroup: async (name: string, request: UpdateGroupRequest): Promise<{ group: TopologyGroup }> => {
 		const response = await fetch(
@@ -1990,7 +2088,7 @@ export const api = {
 		if (!response.ok) {
 			throw new Error(`API error: ${response.status}`);
 		}
-		return response.json();
+		return response.json() as Promise<{ group: TopologyGroup }>;
 	},
 	deleteGroup: async (name: string): Promise<void> => {
 		const response = await fetch(
@@ -2013,7 +2111,7 @@ export const api = {
 		if (!response.ok) {
 			throw new Error(`API error: ${response.status}`);
 		}
-		return response.json();
+		return response.json() as Promise<{ human: TopologyHuman }>;
 	},
 	updateHuman: async (id: string, request: UpdateHumanRequest): Promise<{ human: TopologyHuman }> => {
 		const response = await fetch(
@@ -2027,7 +2125,7 @@ export const api = {
 		if (!response.ok) {
 			throw new Error(`API error: ${response.status}`);
 		}
-		return response.json();
+		return response.json() as Promise<{ human: TopologyHuman }>;
 	},
 	deleteHuman: async (id: string): Promise<void> => {
 		const response = await fetch(
@@ -2039,8 +2137,35 @@ export const api = {
 		}
 	},
 
+	// Attachment API
+	uploadAttachment: (agentId: string, channelId: string, file: File) => {
+		const form = new FormData();
+		form.append("file", file, file.name);
+		return fetch(
+			`${getApiBase()}/agents/${encodeURIComponent(agentId)}/channels/${encodeURIComponent(channelId)}/attachments/upload`,
+			{ method: "POST", body: form },
+		);
+	},
+
+	attachmentUrl: (agentId: string, attachmentId: string, opts?: { thumbnail?: boolean; download?: boolean }) => {
+		const params = new URLSearchParams();
+		if (opts?.thumbnail) params.set("thumbnail", "true");
+		if (opts?.download) params.set("download", "true");
+		const qs = params.toString();
+		return `${getApiBase()}/agents/${encodeURIComponent(agentId)}/attachments/${encodeURIComponent(attachmentId)}${qs ? `?${qs}` : ""}`;
+	},
+
+	listAttachments: (agentId: string, channelId: string, params?: { message_id?: string; limit?: number }) => {
+		const search = new URLSearchParams();
+		if (params?.message_id) search.set("message_id", params.message_id);
+		if (params?.limit) search.set("limit", String(params.limit));
+		return fetchJson<{ attachments: Array<{ id: string; original_filename: string; mime_type: string; size_bytes: number; created_at: string }> }>(
+			`/agents/${encodeURIComponent(agentId)}/channels/${encodeURIComponent(channelId)}/attachments${search.toString() ? `?${search}` : ""}`,
+		);
+	},
+
 	// Portal API (renamed from webchat)
-	portalSend: (agentId: string, sessionId: string, message: string, senderName?: string) =>
+	portalSend: (agentId: string, sessionId: string, message: string, senderName?: string, attachmentIds?: string[]) =>
 		fetch(`${getApiBase()}/portal/send`, {
 			method: "POST",
 			headers: { "Content-Type": "application/json" },
@@ -2049,33 +2174,66 @@ export const api = {
 				session_id: sessionId,
 				sender_name: senderName ?? "user",
 				message,
+				...(attachmentIds?.length ? { attachment_ids: attachmentIds } : {}),
 			}),
 		}),
 
 	portalHistory: (agentId: string, sessionId: string, limit = 100) =>
 		fetch(`${getApiBase()}/portal/history?agent_id=${encodeURIComponent(agentId)}&session_id=${encodeURIComponent(sessionId)}&limit=${limit}`),
 
-	listPortalConversations: (agentId: string, includeArchived = false, limit = 100) =>
-		fetch(`${getApiBase()}/portal/conversations?agent_id=${encodeURIComponent(agentId)}&include_archived=${includeArchived}&limit=${limit}`),
+	listPortalConversations: (
+		agentId: string,
+		includeArchived = false,
+		limit = 100,
+	): Promise<Types.PortalConversationsResponse> =>
+		fetchJson<Types.PortalConversationsResponse>(
+			`/portal/conversations?agent_id=${encodeURIComponent(agentId)}&include_archived=${includeArchived}&limit=${limit}`,
+		),
 
-	createPortalConversation: (agentId: string, title?: string, settings?: import("./types").ConversationSettings) =>
-		fetch(`${getApiBase()}/portal/conversations`, {
+	createPortalConversation: async (
+		agentId: string,
+		title?: string,
+		settings?: Types.ConversationSettings,
+	): Promise<Types.PortalConversationResponse> => {
+		const response = await fetch(`${getApiBase()}/portal/conversations`, {
 			method: "POST",
 			headers: { "Content-Type": "application/json" },
 			body: JSON.stringify({ agent_id: agentId, title, settings }),
-		}),
+		});
+		if (!response.ok) throw new Error(`API error: ${response.status}`);
+		return response.json() as Promise<Types.PortalConversationResponse>;
+	},
 
-	updatePortalConversation: (agentId: string, sessionId: string, title?: string, archived?: boolean, settings?: import("./types").ConversationSettings) =>
-		fetch(`${getApiBase()}/portal/conversations/${encodeURIComponent(sessionId)}`, {
-			method: "PUT",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ agent_id: agentId, title, archived, settings }),
-		}),
+	updatePortalConversation: async (
+		agentId: string,
+		sessionId: string,
+		title?: string,
+		archived?: boolean,
+		settings?: Types.ConversationSettings,
+	): Promise<Types.PortalConversationResponse> => {
+		const response = await fetch(
+			`${getApiBase()}/portal/conversations/${encodeURIComponent(sessionId)}`,
+			{
+				method: "PUT",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ agent_id: agentId, title, archived, settings }),
+			},
+		);
+		if (!response.ok) throw new Error(`API error: ${response.status}`);
+		return response.json() as Promise<Types.PortalConversationResponse>;
+	},
 
-	deletePortalConversation: (agentId: string, sessionId: string) =>
-		fetch(`${getApiBase()}/portal/conversations/${encodeURIComponent(sessionId)}?agent_id=${encodeURIComponent(agentId)}`, {
-			method: "DELETE",
-		}),
+	deletePortalConversation: async (
+		agentId: string,
+		sessionId: string,
+	): Promise<{ success: boolean }> => {
+		const response = await fetch(
+			`${getApiBase()}/portal/conversations/${encodeURIComponent(sessionId)}?agent_id=${encodeURIComponent(agentId)}`,
+			{ method: "DELETE" },
+		);
+		if (!response.ok) throw new Error(`API error: ${response.status}`);
+		return { success: true };
+	},
 
 	getConversationDefaults: (agentId: string) =>
 		fetchJson<Types.ConversationDefaultsResponse>(`/conversation-defaults?agent_id=${encodeURIComponent(agentId)}`),
@@ -2212,7 +2370,7 @@ export const api = {
 			const body = await response.json().catch(() => ({}));
 			throw new Error(body.error || `API error: ${response.status}`);
 		}
-		return response.json();
+		return response.json() as Promise<{ state: string; message: string }>;
 	},
 	rotateKey: async (): Promise<{ master_key: string; message: string }> => {
 		const response = await fetch(`${getApiBase()}/secrets/rotate`, { method: "POST" });
@@ -2220,7 +2378,7 @@ export const api = {
 			const body = await response.json().catch(() => ({}));
 			throw new Error(body.error || `API error: ${response.status}`);
 		}
-		return response.json();
+		return response.json() as Promise<{ master_key: string; message: string }>;
 	},
 	migrateSecrets: async (): Promise<MigrateResponse> => {
 		const response = await fetch(`${getApiBase()}/secrets/migrate`, { method: "POST" });
@@ -2232,92 +2390,102 @@ export const api = {
 	},
 
 	// Projects API
-	listProjects: (agentId: string, status?: ProjectStatus) => {
-		const search = new URLSearchParams({ agent_id: agentId });
+	listProjects: (status?: ProjectStatus) => {
+		const search = new URLSearchParams();
 		if (status) search.set("status", status);
-		return fetchJson<ProjectListResponse>(`/agents/projects?${search}`);
+		const qs = search.toString();
+		return fetchJson<ProjectListResponse>(`/agents/projects${qs ? `?${qs}` : ""}`);
 	},
 
-	getProject: (agentId: string, projectId: string) =>
+	getProject: (projectId: string) =>
 		fetchJson<ProjectWithRelations>(
-			`/agents/projects/${encodeURIComponent(projectId)}?agent_id=${encodeURIComponent(agentId)}`,
+			`/agents/projects/${encodeURIComponent(projectId)}`,
 		),
 
-	createProject: async (agentId: string, request: CreateProjectRequest): Promise<ProjectWithRelations> => {
+	createProject: async (request: CreateProjectRequest): Promise<ProjectWithRelations> => {
 		const response = await fetch(`${getApiBase()}/agents/projects`, {
 			method: "POST",
 			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ ...request, agent_id: agentId }),
+			body: JSON.stringify(request),
 		});
 		if (!response.ok) throw new Error(`API error: ${response.status}`);
 		return response.json() as Promise<ProjectWithRelations>;
 	},
 
-	updateProject: async (agentId: string, projectId: string, request: UpdateProjectRequest): Promise<ProjectWithRelations> => {
+	updateProject: async (projectId: string, request: UpdateProjectRequest): Promise<ProjectWithRelations> => {
 		const response = await fetch(`${getApiBase()}/agents/projects/${encodeURIComponent(projectId)}`, {
 			method: "PUT",
 			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ ...request, agent_id: agentId }),
+			body: JSON.stringify(request),
 		});
 		if (!response.ok) throw new Error(`API error: ${response.status}`);
 		return response.json() as Promise<ProjectWithRelations>;
 	},
 
-	deleteProject: async (agentId: string, projectId: string): Promise<ProjectActionResponse> => {
+	deleteProject: async (projectId: string): Promise<ProjectActionResponse> => {
 		const response = await fetch(
-			`${getApiBase()}/agents/projects/${encodeURIComponent(projectId)}?agent_id=${encodeURIComponent(agentId)}`,
+			`${getApiBase()}/agents/projects/${encodeURIComponent(projectId)}`,
 			{ method: "DELETE" },
 		);
 		if (!response.ok) throw new Error(`API error: ${response.status}`);
 		return response.json() as Promise<ProjectActionResponse>;
 	},
 
-	scanProject: async (agentId: string, projectId: string): Promise<ProjectWithRelations> => {
+	scanProject: async (projectId: string): Promise<ProjectWithRelations> => {
 		const response = await fetch(
-			`${getApiBase()}/agents/projects/${encodeURIComponent(projectId)}/scan?agent_id=${encodeURIComponent(agentId)}`,
+			`${getApiBase()}/agents/projects/${encodeURIComponent(projectId)}/scan`,
 			{ method: "POST" },
 		);
 		if (!response.ok) throw new Error(`API error: ${response.status}`);
 		return response.json() as Promise<ProjectWithRelations>;
 	},
 
-	projectDiskUsage: (agentId: string, projectId: string) =>
+	reorderProjects: async (ids: string[]): Promise<void> => {
+		const response = await fetch(`${getApiBase()}/agents/projects/reorder`, {
+			method: "PUT",
+			headers: {"Content-Type": "application/json"},
+			body: JSON.stringify({ids}),
+		});
+		if (!response.ok) throw new Error(`API error: ${response.status}`);
+	},
+
+	projectDiskUsage: (projectId: string) =>
 		fetchJson<DiskUsageResponse>(
-			`/agents/projects/${encodeURIComponent(projectId)}/disk-usage?agent_id=${encodeURIComponent(agentId)}`,
+			`/agents/projects/${encodeURIComponent(projectId)}/disk-usage`,
 		),
 
-	createProjectRepo: async (agentId: string, projectId: string, request: CreateRepoRequest): Promise<{ repo: ProjectRepo }> => {
+	createProjectRepo: async (projectId: string, request: CreateRepoRequest): Promise<{ repo: ProjectRepo }> => {
 		const response = await fetch(`${getApiBase()}/agents/projects/${encodeURIComponent(projectId)}/repos`, {
 			method: "POST",
 			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ ...request, agent_id: agentId }),
+			body: JSON.stringify(request),
 		});
 		if (!response.ok) throw new Error(`API error: ${response.status}`);
 		return response.json() as Promise<{ repo: ProjectRepo }>;
 	},
 
-	deleteProjectRepo: async (agentId: string, projectId: string, repoId: string): Promise<ProjectActionResponse> => {
+	deleteProjectRepo: async (projectId: string, repoId: string): Promise<ProjectActionResponse> => {
 		const response = await fetch(
-			`${getApiBase()}/agents/projects/${encodeURIComponent(projectId)}/repos/${encodeURIComponent(repoId)}?agent_id=${encodeURIComponent(agentId)}`,
+			`${getApiBase()}/agents/projects/${encodeURIComponent(projectId)}/repos/${encodeURIComponent(repoId)}`,
 			{ method: "DELETE" },
 		);
 		if (!response.ok) throw new Error(`API error: ${response.status}`);
 		return response.json() as Promise<ProjectActionResponse>;
 	},
 
-	createProjectWorktree: async (agentId: string, projectId: string, request: CreateWorktreeRequest): Promise<{ worktree: ProjectWorktree }> => {
+	createProjectWorktree: async (projectId: string, request: CreateWorktreeRequest): Promise<{ worktree: ProjectWorktree }> => {
 		const response = await fetch(`${getApiBase()}/agents/projects/${encodeURIComponent(projectId)}/worktrees`, {
 			method: "POST",
 			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ ...request, agent_id: agentId }),
+			body: JSON.stringify(request),
 		});
 		if (!response.ok) throw new Error(`API error: ${response.status}`);
 		return response.json() as Promise<{ worktree: ProjectWorktree }>;
 	},
 
-	deleteProjectWorktree: async (agentId: string, projectId: string, worktreeId: string): Promise<ProjectActionResponse> => {
+	deleteProjectWorktree: async (projectId: string, worktreeId: string): Promise<ProjectActionResponse> => {
 		const response = await fetch(
-			`${getApiBase()}/agents/projects/${encodeURIComponent(projectId)}/worktrees/${encodeURIComponent(worktreeId)}?agent_id=${encodeURIComponent(agentId)}`,
+			`${getApiBase()}/agents/projects/${encodeURIComponent(projectId)}/worktrees/${encodeURIComponent(worktreeId)}`,
 			{ method: "DELETE" },
 		);
 		if (!response.ok) throw new Error(`API error: ${response.status}`);
@@ -2336,5 +2504,278 @@ export const api = {
 		return new Response(null, { status: 501 });
 	},
 
+	// -- Notifications --
+
+	listNotifications: async (params?: {
+		filter?: "unread" | "all";
+		agent_id?: string;
+		kind?: NotificationKind;
+		limit?: number;
+		offset?: number;
+	}): Promise<NotificationsResponse> => {
+		const query = new URLSearchParams();
+		if (params?.filter) query.set("filter", params.filter);
+		if (params?.agent_id) query.set("agent_id", params.agent_id);
+		if (params?.kind) query.set("kind", params.kind);
+		if (params?.limit !== undefined) query.set("limit", String(params.limit));
+		if (params?.offset !== undefined) query.set("offset", String(params.offset));
+		const qs = query.toString();
+		const response = await fetch(`${getApiBase()}/notifications${qs ? `?${qs}` : ""}`);
+		if (!response.ok) throw new Error(`API error: ${response.status}`);
+		return response.json() as Promise<NotificationsResponse>;
+	},
+
+	getUnreadCount: async (): Promise<UnreadCountResponse> => {
+		const response = await fetch(`${getApiBase()}/notifications/unread_count`);
+		if (!response.ok) throw new Error(`API error: ${response.status}`);
+		return response.json() as Promise<UnreadCountResponse>;
+	},
+
+	markNotificationRead: async (id: string): Promise<void> => {
+		const response = await fetch(`${getApiBase()}/notifications/${encodeURIComponent(id)}/read`, {
+			method: "POST",
+		});
+		if (!response.ok && response.status !== 404) throw new Error(`API error: ${response.status}`);
+	},
+
+	dismissNotification: async (id: string): Promise<void> => {
+		const response = await fetch(`${getApiBase()}/notifications/${encodeURIComponent(id)}/dismiss`, {
+			method: "POST",
+		});
+		if (!response.ok && response.status !== 404) throw new Error(`API error: ${response.status}`);
+	},
+
+	markAllNotificationsRead: async (): Promise<void> => {
+		const response = await fetch(`${getApiBase()}/notifications/read_all`, { method: "POST" });
+		if (!response.ok) throw new Error(`API error: ${response.status}`);
+	},
+
+	dismissReadNotifications: async (): Promise<void> => {
+		const response = await fetch(`${getApiBase()}/notifications/dismiss_read`, { method: "POST" });
+		if (!response.ok) throw new Error(`API error: ${response.status}`);
+	},
+
 	getEventsUrl: () => `${getApiBase()}/events`,
+
+	// Wiki API
+	listWikiPages: (params?: { page_type?: string }) => {
+		const qs = new URLSearchParams();
+		if (params?.page_type) qs.set("page_type", params.page_type);
+		const query = qs.toString();
+		return fetchJson<WikiListResponse>(`/wiki${query ? `?${query}` : ""}`);
+	},
+
+	searchWikiPages: (params: { query: string; page_type?: string }) => {
+		const qs = new URLSearchParams({ query: params.query });
+		if (params.page_type) qs.set("page_type", params.page_type);
+		return fetchJson<WikiListResponse>(`/wiki/search?${qs}`);
+	},
+
+	getWikiPage: (slug: string, version?: number) => {
+		const qs = version !== undefined ? `?version=${version}` : "";
+		return fetchJson<WikiPageResponse>(`/wiki/${encodeURIComponent(slug)}${qs}`);
+	},
+
+	createWikiPage: async (request: CreateWikiPageRequest): Promise<WikiPageResponse> => {
+		const response = await fetch(`${getApiBase()}/wiki`, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify(request),
+		});
+		if (!response.ok) throw new Error(`API error: ${response.status}`);
+		return response.json() as Promise<WikiPageResponse>;
+	},
+
+	editWikiPage: async (slug: string, request: EditWikiPageRequest): Promise<WikiPageResponse> => {
+		const response = await fetch(`${getApiBase()}/wiki/${encodeURIComponent(slug)}/edit`, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify(request),
+		});
+		if (!response.ok) throw new Error(`API error: ${response.status}`);
+		return response.json() as Promise<WikiPageResponse>;
+	},
+
+	getWikiHistory: (slug: string, limit = 20) =>
+		fetchJson<WikiHistoryResponse>(`/wiki/${encodeURIComponent(slug)}/history?limit=${limit}`),
+
+	restoreWikiVersion: async (slug: string, version: number): Promise<WikiPageResponse> => {
+		const response = await fetch(`${getApiBase()}/wiki/${encodeURIComponent(slug)}/restore`, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ version }),
+		});
+		if (!response.ok) throw new Error(`API error: ${response.status}`);
+		return response.json() as Promise<WikiPageResponse>;
+	},
+
+	archiveWikiPage: async (slug: string): Promise<{ success: boolean; message: string }> => {
+		const response = await fetch(`${getApiBase()}/wiki/${encodeURIComponent(slug)}`, {
+			method: "DELETE",
+		});
+		if (!response.ok) throw new Error(`API error: ${response.status}`);
+		return response.json();
+	},
+
+	usage: (params?: { agent_id?: string; since?: string; until?: string; group_by?: string }) => {
+		const qs = new URLSearchParams();
+		if (params?.agent_id) qs.set("agent_id", params.agent_id);
+		if (params?.since) qs.set("since", params.since);
+		if (params?.until) qs.set("until", params.until);
+		if (params?.group_by) qs.set("group_by", params.group_by);
+		const query = qs.toString();
+		return fetchJson<UsageResponse>(`/usage${query ? `?${query}` : ""}`);
+	},
+
+	activity: (params?: { since?: string; until?: string }) => {
+		const qs = new URLSearchParams();
+		if (params?.since) qs.set("since", params.since);
+		if (params?.until) qs.set("until", params.until);
+		const query = qs.toString();
+		return fetchJson<ActivityResponse>(`/activity${query ? `?${query}` : ""}`);
+	},
+}
+
+export interface UsageTotals {
+	input_tokens: number;
+	output_tokens: number;
+	cache_read_tokens: number;
+	cache_write_tokens: number;
+	reasoning_tokens: number;
+	request_count: number;
+	estimated_cost_usd: number | null;
+	cost_status: string;
+}
+
+export interface UsageByModel {
+	model: string;
+	input_tokens: number;
+	output_tokens: number;
+	cache_read_tokens: number;
+	cache_write_tokens: number;
+	reasoning_tokens: number;
+	request_count: number;
+	estimated_cost_usd: number | null;
+}
+
+export interface UsageResponse {
+	total: UsageTotals;
+	by_model?: UsageByModel[];
+	by_day?: Array<{ date: string } & UsageTotals>;
+	by_agent?: Array<{ agent_id: string } & UsageTotals>;
 };
+
+// Activity types
+export interface ProcessTokens {
+	input: number;
+	output: number;
+	cache_read: number;
+	reasoning: number;
+	cost_usd: number;
+}
+
+export interface TokenSummary {
+	input: number;
+	output: number;
+	cache_read: number;
+	reasoning: number;
+	cost_usd: number;
+	by_process: Record<string, ProcessTokens>;
+}
+
+export interface ActivityDay {
+	date: string;
+	messages: number;
+	branches: number;
+	workers: number;
+	cortex: number;
+	cron: number;
+	active_channels: number;
+	tokens: TokenSummary;
+}
+
+export interface ActivityTotals {
+	messages: number;
+	branches: number;
+	workers: number;
+	cortex: number;
+	cron: number;
+	active_channels: number;
+	tokens: TokenSummary;
+}
+
+export interface ActivityResponse {
+	daily: ActivityDay[];
+	totals: ActivityTotals;
+}
+
+// Wiki types
+export type WikiPageType = "entity" | "concept" | "decision" | "project" | "reference";
+
+export interface WikiPageSummary {
+	id: string;
+	slug: string;
+	title: string;
+	page_type: string;
+	version: number;
+	updated_at: string;
+	updated_by: string;
+}
+
+export interface WikiPage {
+	id: string;
+	slug: string;
+	title: string;
+	page_type: string;
+	content: string;
+	related: string[];
+	created_by: string;
+	updated_by: string;
+	version: number;
+	archived: boolean;
+	created_at: string;
+	updated_at: string;
+}
+
+export interface WikiPageVersion {
+	id: string;
+	page_id: string;
+	version: number;
+	content: string;
+	edit_summary: string | null;
+	author_type: string;
+	author_id: string;
+	created_at: string;
+}
+
+export interface WikiListResponse {
+	pages: WikiPageSummary[];
+	total: number;
+}
+
+export interface WikiPageResponse {
+	page: WikiPage;
+}
+
+export interface WikiHistoryResponse {
+	versions: WikiPageVersion[];
+}
+
+export interface CreateWikiPageRequest {
+	title: string;
+	page_type: WikiPageType;
+	content: string;
+	related?: string[];
+	edit_summary?: string;
+	author_id?: string;
+	author_type?: string;
+}
+
+export interface EditWikiPageRequest {
+	old_string: string;
+	new_string: string;
+	replace_all?: boolean;
+	edit_summary?: string;
+	author_id?: string;
+	author_type?: string;
+}
diff --git a/interface/src/api/schema.d.ts b/interface/src/api/schema.d.ts
index 25289950b..01ec025cd 100644
--- a/interface/src/api/schema.d.ts
+++ b/interface/src/api/schema.d.ts
@@ -4,6 +4,23 @@
  */
 
 export interface paths {
+    "/activity": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Instance-wide activity aggregation across all agents. */
+        get: operations["get_activity"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/agents": {
         parameters: {
             query?: never;
@@ -340,7 +357,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        /** GET /agents/projects — list projects for an agent. */
+        /** GET /agents/projects — list projects. */
         get: operations["list_projects"];
         put?: never;
         /** POST /agents/projects — create a new project. */
@@ -351,6 +368,23 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/agents/projects/reorder": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        /** PUT /agents/projects/reorder — update the sort order of all projects. */
+        put: operations["reorder_projects"];
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/agents/projects/{id}": {
         parameters: {
             query?: never;
@@ -387,6 +421,23 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/agents/projects/{id}/logo": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** GET /agents/projects/{id}/logo — serve the detected project logo. */
+        get: operations["serve_logo"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/agents/projects/{id}/repos": {
         parameters: {
             query?: never;
@@ -625,6 +676,66 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/agents/{agent_id}/attachments/{attachment_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Serve a saved attachment file.
+         * @description Streams the file from disk with the correct Content-Type.
+         *     Use `?download=true` to force a download prompt.
+         *     Use `?thumbnail=true` to request a thumbnail (currently serves full file).
+         */
+        get: operations["serve_attachment"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/agents/{agent_id}/channels/{channel_id}/attachments": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** List saved attachments for a channel. */
+        get: operations["list_attachments"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/agents/{agent_id}/channels/{channel_id}/attachments/upload": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Upload a file attachment for a portal conversation.
+         * @description The file is persisted to `workspace/saved/` and tracked in `saved_attachments`.
+         *     Returns an attachment ID to include in the subsequent message send request.
+         */
+        post: operations["upload_attachment"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/bindings": {
         parameters: {
             query?: never;
@@ -824,6 +935,42 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/channels/{channel_id}/settings": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["get_channel_settings"];
+        put: operations["update_channel_settings"];
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/conversation-defaults": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get conversation defaults for an agent.
+         *     Returns the resolved default settings and available options for new conversations.
+         */
+        get: operations["conversation_defaults"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/cortex-chat/messages": {
         parameters: {
             query?: never;
@@ -1322,23 +1469,24 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
-    "/providers": {
+    "/notifications": {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        get: operations["get_providers"];
+        /** `GET /notifications` — list notifications with optional filters. */
+        get: operations["list_notifications"];
         put?: never;
-        post: operations["update_provider"];
+        post?: never;
         delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/providers/openai/browser-oauth/start": {
+    "/notifications/dismiss_read": {
         parameters: {
             query?: never;
             header?: never;
@@ -1347,46 +1495,49 @@ export interface paths {
         };
         get?: never;
         put?: never;
-        post: operations["start_openai_browser_oauth"];
+        /** `POST /notifications/dismiss_read` — dismiss all already-read notifications. */
+        post: operations["dismiss_read"];
         delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/providers/openai/browser-oauth/status": {
+    "/notifications/read_all": {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        get: operations["openai_browser_oauth_status"];
+        get?: never;
         put?: never;
-        post?: never;
+        /** `POST /notifications/read_all` — mark all undismissed notifications as read. */
+        post: operations["mark_all_read"];
         delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/providers/test-model": {
+    "/notifications/unread_count": {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        get?: never;
+        /** `GET /notifications/unread_count` — count unread, undismissed notifications. */
+        get: operations["unread_count"];
         put?: never;
-        post: operations["test_provider_model"];
+        post?: never;
         delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/providers/{provider}": {
+    "/notifications/{id}/dismiss": {
         parameters: {
             query?: never;
             header?: never;
@@ -1395,48 +1546,48 @@ export interface paths {
         };
         get?: never;
         put?: never;
-        post?: never;
-        delete: operations["delete_provider"];
+        /** `POST /notifications/{id}/dismiss` — dismiss a single notification. */
+        post: operations["dismiss_notification"];
+        delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/secrets": {
+    "/notifications/{id}/read": {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        /** `GET /api/secrets` — List all secrets (name + category, no values). */
-        get: operations["list_secrets"];
+        get?: never;
         put?: never;
-        post?: never;
+        /** `POST /notifications/{id}/read` — mark a single notification as read. */
+        post: operations["mark_read"];
         delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/secrets/encrypt": {
+    "/portal/conversations": {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        get?: never;
+        get: operations["list_portal_conversations"];
         put?: never;
-        /** `POST /api/secrets/encrypt` — Enable encryption. Returns the master key (hex). */
-        post: operations["enable_encryption"];
+        post: operations["create_portal_conversation"];
         delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/secrets/export": {
+    "/portal/conversations/{session_id}": {
         parameters: {
             query?: never;
             header?: never;
@@ -1444,33 +1595,31 @@ export interface paths {
             cookie?: never;
         };
         get?: never;
-        put?: never;
-        /** `POST /api/secrets/export` — Export all secrets as a JSON backup. */
-        post: operations["export_secrets"];
-        delete?: never;
+        put: operations["update_portal_conversation"];
+        post?: never;
+        delete: operations["delete_portal_conversation"];
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/secrets/import": {
+    "/portal/history": {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        get?: never;
+        get: operations["portal_history"];
         put?: never;
-        /** `POST /api/secrets/import` — Import secrets from a backup. */
-        post: operations["import_secrets"];
+        post?: never;
         delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/secrets/lock": {
+    "/portal/send": {
         parameters: {
             query?: never;
             header?: never;
@@ -1479,38 +1628,34 @@ export interface paths {
         };
         get?: never;
         put?: never;
-        /** `POST /api/secrets/lock` — Lock encrypted store (clear key from memory). */
-        post: operations["lock_secrets"];
+        /**
+         * Fire-and-forget message injection. The response arrives via the global SSE
+         *     event bus (`/api/events`), same as every other channel.
+         */
+        post: operations["portal_send"];
         delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/secrets/migrate": {
+    "/providers": {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        get?: never;
+        get: operations["get_providers"];
         put?: never;
-        /**
-         * `POST /api/secrets/migrate` — Auto-migrate literal keys from config.toml
-         *     to the secret store.
-         * @description Scans the resolved config for plaintext credential values (not `env:` or
-         *     `secret:` prefixed) and moves them to the secret store, replacing the
-         *     config.toml entries with `secret:NAME` references.
-         */
-        post: operations["migrate_secrets"];
+        post: operations["update_provider"];
         delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/secrets/rotate": {
+    "/providers/openai/browser-oauth/start": {
         parameters: {
             query?: never;
             header?: never;
@@ -1519,23 +1664,21 @@ export interface paths {
         };
         get?: never;
         put?: never;
-        /** `POST /api/secrets/rotate` — Rotate master key. */
-        post: operations["rotate_key"];
+        post: operations["start_openai_browser_oauth"];
         delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/secrets/status": {
+    "/providers/openai/browser-oauth/status": {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        /** `GET /api/secrets/status` — Store state, counts, encryption status. */
-        get: operations["secrets_status"];
+        get: operations["openai_browser_oauth_status"];
         put?: never;
         post?: never;
         delete?: never;
@@ -1544,7 +1687,7 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
-    "/secrets/unlock": {
+    "/providers/test-model": {
         parameters: {
             query?: never;
             header?: never;
@@ -1553,15 +1696,14 @@ export interface paths {
         };
         get?: never;
         put?: never;
-        /** `POST /api/secrets/unlock` — Unlock encrypted store with master key (hex). */
-        post: operations["unlock_secrets"];
+        post: operations["test_provider_model"];
         delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/secrets/{name}": {
+    "/providers/{provider}": {
         parameters: {
             query?: never;
             header?: never;
@@ -1569,25 +1711,22 @@ export interface paths {
             cookie?: never;
         };
         get?: never;
-        /** `PUT /api/secrets/:name` — Add or update a secret. */
-        put: operations["put_secret"];
+        put?: never;
         post?: never;
-        /** `DELETE /api/secrets/:name` — Delete a secret. */
-        delete: operations["delete_secret"];
+        delete: operations["delete_provider"];
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/secrets/{name}/info": {
+    "/providers/{provider}/config": {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        /** `GET /api/secrets/:name/info` — Secret metadata (no value). */
-        get: operations["secret_info"];
+        get: operations["get_provider_config"];
         put?: never;
         post?: never;
         delete?: never;
@@ -1596,15 +1735,16 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
-    "/settings": {
+    "/secrets": {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        get: operations["get_global_settings"];
-        put: operations["update_global_settings"];
+        /** `GET /api/secrets` — List all secrets (name + category, no values). */
+        get: operations["list_secrets"];
+        put?: never;
         post?: never;
         delete?: never;
         options?: never;
@@ -1612,74 +1752,75 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
-    "/settings/raw": {
+    "/secrets/encrypt": {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        get: operations["get_raw_config"];
-        put: operations["update_raw_config"];
-        post?: never;
+        get?: never;
+        put?: never;
+        /** `POST /api/secrets/encrypt` — Enable encryption. Returns the master key (hex). */
+        post: operations["enable_encryption"];
         delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/skills/registry/browse": {
+    "/secrets/export": {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        /** Proxy browse requests to skills.sh leaderboard API. */
-        get: operations["registry_browse"];
+        get?: never;
         put?: never;
-        post?: never;
+        /** `POST /api/secrets/export` — Export all secrets as a JSON backup. */
+        post: operations["export_secrets"];
         delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/skills/registry/content": {
+    "/secrets/import": {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        /** Fetch the full SKILL.md content for a registry skill from GitHub. */
-        get: operations["registry_skill_content"];
+        get?: never;
         put?: never;
-        post?: never;
+        /** `POST /api/secrets/import` — Import secrets from a backup. */
+        post: operations["import_secrets"];
         delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/skills/registry/search": {
+    "/secrets/lock": {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        /** Proxy search requests to skills.sh search API. */
-        get: operations["registry_search"];
+        get?: never;
         put?: never;
-        post?: never;
+        /** `POST /api/secrets/lock` — Lock encrypted store (clear key from memory). */
+        post: operations["lock_secrets"];
         delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/ssh/authorized-key": {
+    "/secrets/migrate": {
         parameters: {
             query?: never;
             header?: never;
@@ -1687,16 +1828,208 @@ export interface paths {
             cookie?: never;
         };
         get?: never;
-        /** PUT /api/ssh/authorized-key — write the public key for SSH access. */
-        put: operations["set_authorized_key"];
-        post?: never;
+        put?: never;
+        /**
+         * `POST /api/secrets/migrate` — Auto-migrate literal keys from config.toml
+         *     to the secret store.
+         * @description Scans the resolved config for plaintext credential values (not `env:` or
+         *     `secret:` prefixed) and moves them to the secret store, replacing the
+         *     config.toml entries with `secret:NAME` references.
+         */
+        post: operations["migrate_secrets"];
         delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/ssh/status": {
+    "/secrets/rotate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** `POST /api/secrets/rotate` — Rotate master key. */
+        post: operations["rotate_key"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/secrets/status": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** `GET /api/secrets/status` — Store state, counts, encryption status. */
+        get: operations["secrets_status"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/secrets/unlock": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** `POST /api/secrets/unlock` — Unlock encrypted store with master key (hex). */
+        post: operations["unlock_secrets"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/secrets/{name}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        /** `PUT /api/secrets/:name` — Add or update a secret. */
+        put: operations["put_secret"];
+        post?: never;
+        /** `DELETE /api/secrets/:name` — Delete a secret. */
+        delete: operations["delete_secret"];
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/secrets/{name}/info": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** `GET /api/secrets/:name/info` — Secret metadata (no value). */
+        get: operations["secret_info"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/settings": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["get_global_settings"];
+        put: operations["update_global_settings"];
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/settings/raw": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["get_raw_config"];
+        put: operations["update_raw_config"];
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/skills/registry/browse": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Proxy browse requests to skills.sh leaderboard API. */
+        get: operations["registry_browse"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/skills/registry/content": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Fetch the full SKILL.md content for a registry skill from GitHub. */
+        get: operations["registry_skill_content"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/skills/registry/search": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Proxy search requests to skills.sh search API. */
+        get: operations["registry_search"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/ssh/authorized-key": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        /** PUT /api/ssh/authorized-key — write the public key for SSH access. */
+        put: operations["set_authorized_key"];
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/ssh/status": {
         parameters: {
             query?: never;
             header?: never;
@@ -1937,46 +2270,119 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
-    "/webchat/conversations": {
+    "/usage": {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        get: operations["list_webchat_conversations"];
+        /** Aggregated token usage for the instance. */
+        get: operations["get_usage"];
         put?: never;
-        post: operations["create_webchat_conversation"];
+        post?: never;
         delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/webchat/conversations/{session_id}": {
+    "/usage/conversation/{conversation_id}": {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        get?: never;
-        put: operations["update_webchat_conversation"];
+        /** Aggregated token usage for a single conversation. */
+        get: operations["get_conversation_usage"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/wiki": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** GET /wiki — list all wiki pages */
+        get: operations["list_pages"];
+        put?: never;
+        /** POST /wiki — create a new wiki page */
+        post: operations["create_page"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/wiki/search": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** GET /wiki/search — search wiki pages */
+        get: operations["search_pages"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/wiki/{slug}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** GET /wiki/:slug — read a wiki page */
+        get: operations["get_page"];
+        put?: never;
         post?: never;
-        delete: operations["delete_webchat_conversation"];
+        /** DELETE /wiki/:slug — archive a page */
+        delete: operations["archive_page"];
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/wiki/{slug}/edit": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** POST /wiki/:slug/edit — apply a partial edit */
+        post: operations["edit_page"];
+        delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
-    "/webchat/history": {
+    "/wiki/{slug}/history": {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        get: operations["webchat_history"];
+        /** GET /wiki/:slug/history — list version history */
+        get: operations["get_history"];
         put?: never;
         post?: never;
         delete?: never;
@@ -1985,7 +2391,7 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
-    "/webchat/send": {
+    "/wiki/{slug}/restore": {
         parameters: {
             query?: never;
             header?: never;
@@ -1994,11 +2400,8 @@ export interface paths {
         };
         get?: never;
         put?: never;
-        /**
-         * Fire-and-forget message injection. The response arrives via the global SSE
-         *     event bus (`/api/events`), same as every other channel.
-         */
-        post: operations["webchat_send"];
+        /** POST /wiki/:slug/restore — restore to a historical version */
+        post: operations["restore_version"];
         delete?: never;
         options?: never;
         head?: never;
@@ -2025,15 +2428,50 @@ export interface components {
             message: string;
             success: boolean;
         };
-        ActivityDayCount: {
+        ActivityDay: {
+            /** Format: int64 */
+            active_channels: number;
             /** Format: int64 */
             branches: number;
+            /** Format: int64 */
+            cortex: number;
+            /** Format: int64 */
+            cron: number;
             date: string;
             /** Format: int64 */
+            messages: number;
+            tokens: components["schemas"]["TokenSummary"];
+            /** Format: int64 */
             workers: number;
         };
-        AdapterInstanceStatus: {
-            binding_count: number;
+        ActivityDayCount: {
+            /** Format: int64 */
+            branches: number;
+            date: string;
+            /** Format: int64 */
+            workers: number;
+        };
+        ActivityResponse: {
+            daily: components["schemas"]["ActivityDay"][];
+            totals: components["schemas"]["ActivityTotals"];
+        };
+        ActivityTotals: {
+            /** Format: int64 */
+            active_channels: number;
+            /** Format: int64 */
+            branches: number;
+            /** Format: int64 */
+            cortex: number;
+            /** Format: int64 */
+            cron: number;
+            /** Format: int64 */
+            messages: number;
+            tokens: components["schemas"]["TokenSummary"];
+            /** Format: int64 */
+            workers: number;
+        };
+        AdapterInstanceStatus: {
+            binding_count: number;
             configured: boolean;
             enabled: boolean;
             /** @description `None` means the default instance for the platform. */
@@ -2145,6 +2583,24 @@ export interface components {
             /** Format: float */
             weight: number;
         };
+        AttachmentInfo: {
+            created_at: string;
+            id: string;
+            mime_type: string;
+            original_filename: string;
+            /** Format: int64 */
+            size_bytes: number;
+        };
+        AttachmentListResponse: {
+            attachments: components["schemas"]["AttachmentInfo"][];
+        };
+        AttachmentUploadResponse: {
+            id: string;
+            mime_type: string;
+            original_filename: string;
+            /** Format: int64 */
+            size_bytes: number;
+        };
         AuthorizedKeyRequest: {
             public_key: string;
         };
@@ -2203,11 +2659,17 @@ export interface components {
             id: string;
             is_active: boolean;
             last_activity_at: string;
+            model?: string | null;
             platform: string;
+            response_mode?: string | null;
         };
         ChannelSection: {
             listen_only_mode: boolean;
         };
+        ChannelSettingsResponse: {
+            conversation_id: string;
+            settings: components["schemas"]["ConversationSettings"];
+        };
         ChannelUpdate: {
             listen_only_mode?: boolean | null;
         };
@@ -2253,6 +2715,47 @@ export interface components {
             /** Format: float */
             emergency_threshold?: number | null;
         };
+        /** @description Response payload for conversation defaults endpoint. */
+        ConversationDefaultsResponse: {
+            /** @description All available models. */
+            available_models: components["schemas"]["ModelOption"][];
+            /** @description Current default delegation mode. */
+            delegation: components["schemas"]["DelegationMode"];
+            /** @description Available delegation modes. */
+            delegation_modes: string[];
+            /** @description Current default memory mode. */
+            memory: components["schemas"]["MemoryMode"];
+            /** @description Available memory modes. */
+            memory_modes: string[];
+            /** @description Current default model name (from agent config). */
+            model: string;
+            /** @description Current default worker context settings. */
+            worker_context: components["schemas"]["WorkerContextMode"];
+            /** @description Available worker history modes. */
+            worker_history_modes: string[];
+            /** @description Available worker memory modes. */
+            worker_memory_modes: string[];
+        };
+        /** @description Per-conversation settings that control behavior. */
+        ConversationSettings: {
+            /** @description How tools work in this conversation. */
+            delegation?: components["schemas"]["DelegationMode"];
+            /** @description How memory is used in this conversation. */
+            memory?: components["schemas"]["MemoryMode"];
+            /**
+             * @description Blanket model override — applies to all processes unless a per-process
+             *     override is set in `model_overrides`.
+             */
+            model?: string | null;
+            /** @description Per-process model overrides. Takes priority over `model`. */
+            model_overrides?: components["schemas"]["ModelOverrides"];
+            /** @description How the channel handles incoming messages. */
+            response_mode?: components["schemas"]["ResponseMode"];
+            /** @description Whether file attachments are saved to workspace. */
+            save_attachments?: boolean | null;
+            /** @description What context workers spawned from this conversation receive. */
+            worker_context?: components["schemas"]["WorkerContextMode"];
+        };
         CortexChatDeleteThreadRequest: {
             agent_id: string;
             thread_id: string;
@@ -2448,8 +2951,22 @@ export interface components {
             name?: string | null;
             platform: string;
         };
-        CreateProjectRequest: {
+        CreatePageRequest: {
+            /** @description Who is creating this page: agent_id or user identifier. */
+            author_id?: string;
+            author_type?: string;
+            content?: string;
+            edit_summary?: string | null;
+            page_type: string;
+            related?: string[];
+            title: string;
+        };
+        CreatePortalConversationRequest: {
             agent_id: string;
+            settings?: null | components["schemas"]["ConversationSettings"];
+            title?: string | null;
+        };
+        CreateProjectRequest: {
             /** @description When true, scan root_path for git repos and register them automatically. */
             auto_discover?: boolean;
             description?: string | null;
@@ -2460,7 +2977,6 @@ export interface components {
             tags?: string[];
         };
         CreateRepoRequest: {
-            agent_id: string;
             default_branch?: string | null;
             description?: string | null;
             name: string;
@@ -2477,16 +2993,10 @@ export interface components {
             owner_agent_id: string;
             priority?: string | null;
             source_memory_id?: string | null;
-            status?: string | null;
             subtasks?: components["schemas"]["TaskSubtask"][];
             title: string;
         };
-        CreateWebChatConversationRequest: {
-            agent_id: string;
-            title?: string | null;
-        };
         CreateWorktreeRequest: {
-            agent_id: string;
             branch: string;
             repo_id: string;
             start_point?: string | null;
@@ -2534,13 +3044,13 @@ export interface components {
                 number
             ] | null;
             cron_expr?: string | null;
-            delivery_target: string;
             /** Format: int64 */
             delivery_failure_count: number;
             /** Format: int64 */
             delivery_skipped_count: number;
             /** Format: int64 */
             delivery_success_count: number;
+            delivery_target: string;
             enabled: boolean;
             /** Format: int64 */
             execution_failure_count: number;
@@ -2564,6 +3074,11 @@ export interface components {
             count: number;
             date: string;
         };
+        /**
+         * @description Delegation mode controls how the conversation handles tools.
+         * @enum {string}
+         */
+        DelegationMode: "standard" | "direct";
         DeleteBindingRequest: {
             adapter?: string | null;
             agent_id: string;
@@ -2612,6 +3127,14 @@ export interface components {
             /** Format: int64 */
             total_bytes: number;
         };
+        EditPageRequest: {
+            author_id?: string;
+            author_type?: string;
+            edit_summary?: string | null;
+            new_string: string;
+            old_string: string;
+            replace_all?: boolean;
+        };
         EncryptResponse: {
             master_key: string;
             message: string;
@@ -2647,6 +3170,7 @@ export interface components {
             /** Format: int32 */
             api_port: number;
             brave_search_key?: string | null;
+            company_name: string;
             opencode: components["schemas"]["OpenCodeSettingsResponse"];
             ssh_enabled: boolean;
             worker_log_mode: string;
@@ -2657,6 +3181,7 @@ export interface components {
             /** Format: int32 */
             api_port?: number | null;
             brave_search_key?: string | null;
+            company_name?: string | null;
             opencode?: null | components["schemas"]["OpenCodeSettingsUpdate"];
             ssh_enabled?: boolean | null;
             worker_log_mode?: string | null;
@@ -2824,6 +3349,11 @@ export interface components {
             nodes: components["schemas"]["Memory"][];
             total: number;
         };
+        /**
+         * @description Memory mode controls how memory is used in a conversation.
+         * @enum {string}
+         */
+        MemoryMode: "full" | "ambient" | "off";
         MemoryPersistenceSection: {
             enabled: boolean;
             message_interval: number;
@@ -2892,6 +3422,31 @@ export interface components {
             /** @description Whether this model supports tool/function calling */
             tool_call: boolean;
         };
+        /** @description Model option for the defaults response. */
+        ModelOption: {
+            /** @description Context window size. */
+            context_window: number;
+            /** @description Model ID (e.g. "anthropic/claude-sonnet-4"). */
+            id: string;
+            /** @description Display name (e.g. "Claude Sonnet 4"). */
+            name: string;
+            /** @description Provider name (e.g. "anthropic"). */
+            provider: string;
+            /** @description Whether the model supports thinking/claude-style extended thinking. */
+            supports_thinking: boolean;
+            /** @description Whether the model supports tools. */
+            supports_tools: boolean;
+        };
+        /**
+         * @description Per-process model overrides. Each field, when set, overrides the
+         *     routing config for that specific process type within this conversation.
+         */
+        ModelOverrides: {
+            branch?: string | null;
+            channel?: string | null;
+            compactor?: string | null;
+            worker?: string | null;
+        };
         ModelsResponse: {
             models: components["schemas"]["ModelInfo"][];
         };
@@ -2899,6 +3454,25 @@ export interface components {
             message: string;
             success: boolean;
         };
+        /** @description A persisted notification row. */
+        Notification: {
+            action_url?: string | null;
+            agent_id?: string | null;
+            body?: string | null;
+            created_at: string;
+            dismissed_at?: string | null;
+            id: string;
+            kind: string;
+            metadata?: string | null;
+            read_at?: string | null;
+            related_entity_id?: string | null;
+            related_entity_type?: string | null;
+            severity: string;
+            title: string;
+        };
+        NotificationsResponse: {
+            notifications: components["schemas"]["Notification"][];
+        };
         OpenAiOAuthBrowserStartRequest: {
             model: string;
         };
@@ -2972,6 +3546,58 @@ export interface components {
             configured: boolean;
             enabled: boolean;
         };
+        PortalConversation: {
+            agent_id: string;
+            archived: boolean;
+            /** Format: date-time */
+            created_at: string;
+            id: string;
+            settings?: null | components["schemas"]["ConversationSettings"];
+            title: string;
+            title_source: string;
+            /** Format: date-time */
+            updated_at: string;
+        };
+        PortalConversationResponse: {
+            conversation: components["schemas"]["PortalConversation"];
+        };
+        PortalConversationSummary: {
+            agent_id: string;
+            archived: boolean;
+            /** Format: date-time */
+            created_at: string;
+            id: string;
+            /** Format: date-time */
+            last_message_at?: string | null;
+            last_message_preview?: string | null;
+            last_message_role?: string | null;
+            /** Format: int64 */
+            message_count: number;
+            settings?: null | components["schemas"]["ConversationSettings"];
+            title: string;
+            title_source: string;
+            /** Format: date-time */
+            updated_at: string;
+        };
+        PortalConversationsResponse: {
+            conversations: components["schemas"]["PortalConversationSummary"][];
+        };
+        PortalHistoryMessage: {
+            content: string;
+            id: string;
+            role: string;
+        };
+        PortalSendRequest: {
+            agent_id: string;
+            /** @description IDs of pre-uploaded attachments to include with this message. */
+            attachment_ids?: string[];
+            message: string;
+            sender_name?: string;
+            session_id: string;
+        };
+        PortalSendResponse: {
+            ok: boolean;
+        };
         /** @description A fully loaded preset with all identity file content. */
         Preset: {
             identity: string;
@@ -3001,15 +3627,29 @@ export interface components {
             name: string;
             tags?: string[];
         };
+        ProcessTokens: {
+            /** Format: int64 */
+            cache_read: number;
+            /** Format: double */
+            cost_usd: number;
+            /** Format: int64 */
+            input: number;
+            /** Format: int64 */
+            output: number;
+            /** Format: int64 */
+            reasoning: number;
+        };
         Project: {
-            agent_id: string;
             created_at: string;
             description: string;
             icon: string;
             id: string;
+            logo_path?: string | null;
             name: string;
             root_path: string;
             settings: unknown;
+            /** Format: int64 */
+            sort_order: number;
             status: components["schemas"]["ProjectStatus"];
             tags: string[];
             updated_at: string;
@@ -3079,8 +3719,18 @@ export interface components {
             channel_id: string;
             enabled: boolean;
         };
+        ProviderConfigResponse: {
+            api_version?: string | null;
+            base_url?: string | null;
+            deployment?: string | null;
+            message: string;
+            success: boolean;
+        };
         ProviderModelTestRequest: {
             api_key: string;
+            api_version?: string | null;
+            base_url?: string | null;
+            deployment?: string | null;
             model: string;
             provider: string;
         };
@@ -3093,6 +3743,7 @@ export interface components {
         };
         ProviderStatus: {
             anthropic: boolean;
+            azure: boolean;
             deepseek: boolean;
             fireworks: boolean;
             gemini: boolean;
@@ -3117,6 +3768,9 @@ export interface components {
         };
         ProviderUpdateRequest: {
             api_key: string;
+            api_version?: string | null;
+            base_url?: string | null;
+            deployment?: string | null;
             model: string;
             provider: string;
         };
@@ -3190,9 +3844,24 @@ export interface components {
             path?: string | null;
             success: boolean;
         };
+        ReorderProjectsRequest: {
+            /** @description Project IDs in the desired display order (first = sort_order 0). */
+            ids: string[];
+        };
         RepoResponse: {
             repo: components["schemas"]["ProjectRepo"];
         };
+        /**
+         * @description Response mode controls how the channel handles incoming messages.
+         * @enum {string}
+         */
+        ResponseMode: "active" | "observe" | "mention_only";
+        RestoreVersionRequest: {
+            author_id?: string;
+            author_type?: string;
+            /** Format: int64 */
+            version: number;
+        };
         RoutingSection: {
             branch: string;
             channel: string;
@@ -3223,6 +3892,15 @@ export interface components {
             passthrough_env?: string[] | null;
             writable_paths?: string[] | null;
         };
+        /** @description Metadata for a saved attachment, returned after persisting to disk and DB. */
+        SavedAttachmentMeta: {
+            filename: string;
+            id: string;
+            mime_type: string;
+            saved_filename: string;
+            /** Format: int64 */
+            size_bytes: number;
+        };
         /**
          * @description Secret category determines subprocess exposure.
          *
@@ -3339,6 +4017,7 @@ export interface components {
         };
         /** @description A unified timeline item combining messages, branch runs, and worker runs. */
         TimelineItem: {
+            attachments?: components["schemas"]["SavedAttachmentMeta"][];
             content: string;
             created_at: string;
             id: string;
@@ -3364,6 +4043,16 @@ export interface components {
             task: string;
             /** @enum {string} */
             type: "worker_run";
+        } | {
+            args: string;
+            completed_at?: string | null;
+            id: string;
+            result?: string | null;
+            started_at: string;
+            status: string;
+            tool_name: string;
+            /** @enum {string} */
+            type: "tool_call_run";
         };
         ToggleCronRequest: {
             agent_id: string;
@@ -3375,6 +4064,21 @@ export interface components {
             enabled: boolean;
             platform: string;
         };
+        TokenSummary: {
+            by_process: {
+                [key: string]: components["schemas"]["ProcessTokens"];
+            };
+            /** Format: int64 */
+            cache_read: number;
+            /** Format: double */
+            cost_usd: number;
+            /** Format: int64 */
+            input: number;
+            /** Format: int64 */
+            output: number;
+            /** Format: int64 */
+            reasoning: number;
+        };
         ToolsResponse: {
             binaries: components["schemas"]["BinaryEntry"][];
             tools_bin: string;
@@ -3457,6 +4161,10 @@ export interface components {
         UnlockBody: {
             master_key: string;
         };
+        UnreadCountResponse: {
+            /** Format: int64 */
+            count: number;
+        };
         UpdateAgentRequest: {
             agent_id: string;
             display_name?: string | null;
@@ -3487,6 +4195,10 @@ export interface components {
             message: string;
             success: boolean;
         };
+        UpdateChannelSettingsRequest: {
+            agent_id: string;
+            settings: components["schemas"]["ConversationSettings"];
+        };
         UpdateGroupRequest: {
             agent_ids?: string[] | null;
             color?: string | null;
@@ -3506,10 +4218,16 @@ export interface components {
             direction?: string | null;
             kind?: string | null;
         };
-        UpdateProjectRequest: {
+        UpdatePortalConversationRequest: {
             agent_id: string;
+            archived?: boolean | null;
+            settings?: null | components["schemas"]["ConversationSettings"];
+            title?: string | null;
+        };
+        UpdateProjectRequest: {
             description?: string | null;
             icon?: string | null;
+            logo_path?: string | null;
             name?: string | null;
             settings?: unknown;
             status?: string | null;
@@ -3545,14 +4263,83 @@ export interface components {
             title?: string | null;
             worker_id?: string | null;
         };
-        UpdateWebChatConversationRequest: {
-            agent_id: string;
-            archived?: boolean | null;
-            title?: string | null;
-        };
         UploadSkillResponse: {
             installed: string[];
         };
+        UsageByAgent: {
+            agent_id: string;
+            /** Format: int64 */
+            cache_read_tokens: number;
+            /** Format: int64 */
+            cache_write_tokens: number;
+            /** Format: double */
+            estimated_cost_usd?: number | null;
+            /** Format: int64 */
+            input_tokens: number;
+            /** Format: int64 */
+            output_tokens: number;
+            /** Format: int64 */
+            reasoning_tokens: number;
+            /** Format: int64 */
+            request_count: number;
+        };
+        UsageByDay: {
+            /** Format: int64 */
+            cache_read_tokens: number;
+            /** Format: int64 */
+            cache_write_tokens: number;
+            date: string;
+            /** Format: double */
+            estimated_cost_usd?: number | null;
+            /** Format: int64 */
+            input_tokens: number;
+            /** Format: int64 */
+            output_tokens: number;
+            /** Format: int64 */
+            reasoning_tokens: number;
+            /** Format: int64 */
+            request_count: number;
+        };
+        UsageByModel: {
+            /** Format: int64 */
+            cache_read_tokens: number;
+            /** Format: int64 */
+            cache_write_tokens: number;
+            /** Format: double */
+            estimated_cost_usd?: number | null;
+            /** Format: int64 */
+            input_tokens: number;
+            model: string;
+            /** Format: int64 */
+            output_tokens: number;
+            /** Format: int64 */
+            reasoning_tokens: number;
+            /** Format: int64 */
+            request_count: number;
+        };
+        UsageResponse: {
+            by_agent?: components["schemas"]["UsageByAgent"][];
+            by_day?: components["schemas"]["UsageByDay"][];
+            by_model?: components["schemas"]["UsageByModel"][];
+            total: components["schemas"]["UsageTotals"];
+        };
+        UsageTotals: {
+            /** Format: int64 */
+            cache_read_tokens: number;
+            /** Format: int64 */
+            cache_write_tokens: number;
+            cost_status: string;
+            /** Format: double */
+            estimated_cost_usd?: number | null;
+            /** Format: int64 */
+            input_tokens: number;
+            /** Format: int64 */
+            output_tokens: number;
+            /** Format: int64 */
+            reasoning_tokens: number;
+            /** Format: int64 */
+            request_count: number;
+        };
         WarmupSection: {
             eager_embedding_load: boolean;
             enabled: boolean;
@@ -3600,53 +4387,67 @@ export interface components {
             /** Format: int64 */
             startup_delay_secs?: number | null;
         };
-        WebChatConversation: {
-            agent_id: string;
+        WikiActionResponse: {
+            message: string;
+            success: boolean;
+        };
+        WikiHistoryResponse: {
+            versions: components["schemas"]["WikiPageVersion"][];
+        };
+        WikiListResponse: {
+            pages: components["schemas"]["WikiPageSummary"][];
+            total: number;
+        };
+        WikiPage: {
             archived: boolean;
-            /** Format: date-time */
+            content: string;
             created_at: string;
+            created_by: string;
             id: string;
+            page_type: string;
+            related: string[];
+            slug: string;
             title: string;
-            title_source: string;
-            /** Format: date-time */
             updated_at: string;
+            updated_by: string;
+            /** Format: int64 */
+            version: number;
         };
-        WebChatConversationResponse: {
-            conversation: components["schemas"]["WebChatConversation"];
+        WikiPageResponse: {
+            page: components["schemas"]["WikiPage"];
         };
-        WebChatConversationSummary: {
-            agent_id: string;
-            archived: boolean;
-            /** Format: date-time */
-            created_at: string;
+        WikiPageSummary: {
             id: string;
-            /** Format: date-time */
-            last_message_at?: string | null;
-            last_message_preview?: string | null;
-            last_message_role?: string | null;
-            /** Format: int64 */
-            message_count: number;
+            page_type: string;
+            slug: string;
             title: string;
-            title_source: string;
-            /** Format: date-time */
             updated_at: string;
+            updated_by: string;
+            /** Format: int64 */
+            version: number;
         };
-        WebChatConversationsResponse: {
-            conversations: components["schemas"]["WebChatConversationSummary"][];
-        };
-        WebChatHistoryMessage: {
+        WikiPageVersion: {
+            author_id: string;
+            author_type: string;
             content: string;
+            created_at: string;
+            edit_summary?: string | null;
             id: string;
-            role: string;
-        };
-        WebChatSendRequest: {
-            agent_id: string;
-            message: string;
-            sender_name?: string;
-            session_id: string;
+            page_id: string;
+            /** Format: int64 */
+            version: number;
         };
-        WebChatSendResponse: {
-            ok: boolean;
+        /** @description Worker context settings control what context workers receive when spawned. */
+        WorkerContextMode: {
+            /** @description What conversation context the worker sees. */
+            history: components["schemas"]["WorkerHistoryMode"];
+            /** @description What memory context the worker gets. */
+            memory: components["schemas"]["WorkerMemoryMode"];
+            /**
+             * @description Whether the worker gets wiki tools (wiki_create, wiki_edit, wiki_read, wiki_list,
+             *     wiki_search, wiki_history). Defaults to true so all workers can access the wiki.
+             */
+            wiki_write?: boolean;
         };
         WorkerDetailResponse: {
             channel_id?: string | null;
@@ -3673,6 +4474,14 @@ export interface components {
             transcript?: components["schemas"]["TranscriptStep"][] | null;
             worker_type: string;
         };
+        /** @description How much conversation history a worker receives. */
+        WorkerHistoryMode: "none" | "summary" | {
+            /**
+             * Format: int32
+             * @description Last N messages from the parent conversation.
+             */
+            recent: number;
+        } | "full";
         WorkerListItem: {
             channel_id?: string | null;
             channel_name?: string | null;
@@ -3711,6 +4520,11 @@ export interface components {
             total: number;
             workers: components["schemas"]["WorkerListItem"][];
         };
+        /**
+         * @description How much memory context a worker receives.
+         * @enum {string}
+         */
+        WorkerMemoryMode: "none" | "ambient" | "tools" | "full";
         WorktreeResponse: {
             worktree: components["schemas"]["ProjectWorktree"];
         };
@@ -3723,9 +4537,14 @@ export interface components {
 }
 export type $defs = Record<string, never>;
 export interface operations {
-    list_agents: {
+    get_activity: {
         parameters: {
-            query?: never;
+            query?: {
+                /** @description ISO 8601 lower bound (default: 30 days ago). */
+                since?: string | null;
+                /** @description ISO 8601 upper bound. */
+                until?: string | null;
+            };
             header?: never;
             path?: never;
             cookie?: never;
@@ -3737,21 +4556,47 @@ export interface operations {
                     [name: string]: unknown;
                 };
                 content: {
-                    "application/json": components["schemas"]["AgentsResponse"];
+                    "application/json": components["schemas"]["ActivityResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
                 };
+                content?: never;
             };
         };
     };
-    update_agent: {
+    list_agents: {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["UpdateAgentRequest"];
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["AgentsResponse"];
+                };
+            };
+        };
+    };
+    update_agent: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["UpdateAgentRequest"];
             };
         };
         responses: {
@@ -4779,8 +5624,7 @@ export interface operations {
     };
     list_projects: {
         parameters: {
-            query: {
-                agent_id: string;
+            query?: {
                 status?: string | null;
             };
             header?: never;
@@ -4797,7 +5641,7 @@ export interface operations {
                     "application/json": components["schemas"]["ProjectListResponse"];
                 };
             };
-            /** @description Agent not found */
+            /** @description No project store available */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -4827,7 +5671,7 @@ export interface operations {
                     "application/json": components["schemas"]["ProjectResponse"];
                 };
             };
-            /** @description Agent not found */
+            /** @description No project store available */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -4836,11 +5680,38 @@ export interface operations {
             };
         };
     };
-    get_project: {
+    reorder_projects: {
         parameters: {
-            query: {
-                agent_id: string;
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ReorderProjectsRequest"];
+            };
+        };
+        responses: {
+            /** @description Sort order updated */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description No project store available */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
             };
+        };
+    };
+    get_project: {
+        parameters: {
+            query?: never;
             header?: never;
             path: {
                 /** @description Project ID */
@@ -4858,7 +5729,7 @@ export interface operations {
                     "application/json": components["schemas"]["ProjectResponse"];
                 };
             };
-            /** @description Agent or project not found */
+            /** @description Project not found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -4891,7 +5762,7 @@ export interface operations {
                     "application/json": components["schemas"]["ProjectResponse"];
                 };
             };
-            /** @description Agent or project not found */
+            /** @description Project not found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -4902,9 +5773,7 @@ export interface operations {
     };
     delete_project: {
         parameters: {
-            query: {
-                agent_id: string;
-            };
+            query?: never;
             header?: never;
             path: {
                 /** @description Project ID */
@@ -4922,7 +5791,7 @@ export interface operations {
                     "application/json": components["schemas"]["ActionResponse"];
                 };
             };
-            /** @description Agent or project not found */
+            /** @description Project not found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -4933,9 +5802,7 @@ export interface operations {
     };
     disk_usage: {
         parameters: {
-            query: {
-                agent_id: string;
-            };
+            query?: never;
             header?: never;
             path: {
                 /** @description Project ID */
@@ -4953,7 +5820,35 @@ export interface operations {
                     "application/json": components["schemas"]["DiskUsageResponse"];
                 };
             };
-            /** @description Agent or project not found */
+            /** @description Project not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    serve_logo: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Project ID */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Logo image */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description No logo found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -4986,7 +5881,7 @@ export interface operations {
                     "application/json": components["schemas"]["RepoResponse"];
                 };
             };
-            /** @description Agent or project not found */
+            /** @description Project not found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -4997,9 +5892,7 @@ export interface operations {
     };
     scan_project: {
         parameters: {
-            query: {
-                agent_id: string;
-            };
+            query?: never;
             header?: never;
             path: {
                 /** @description Project ID */
@@ -5017,7 +5910,7 @@ export interface operations {
                     "application/json": components["schemas"]["ProjectResponse"];
                 };
             };
-            /** @description Agent or project not found */
+            /** @description Project not found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -5050,7 +5943,7 @@ export interface operations {
                     "application/json": components["schemas"]["WorktreeResponse"];
                 };
             };
-            /** @description Agent, project, or repo not found */
+            /** @description Project or repo not found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -5061,9 +5954,7 @@ export interface operations {
     };
     delete_repo: {
         parameters: {
-            query: {
-                agent_id: string;
-            };
+            query?: never;
             header?: never;
             path: {
                 /** @description Project ID */
@@ -5083,7 +5974,7 @@ export interface operations {
                     "application/json": components["schemas"]["ActionResponse"];
                 };
             };
-            /** @description Agent, project, or repo not found */
+            /** @description Project or repo not found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -5094,9 +5985,7 @@ export interface operations {
     };
     delete_worktree: {
         parameters: {
-            query: {
-                agent_id: string;
-            };
+            query?: never;
             header?: never;
             path: {
                 /** @description Project ID */
@@ -5116,7 +6005,7 @@ export interface operations {
                     "application/json": components["schemas"]["ActionResponse"];
                 };
             };
-            /** @description Agent, project, or worktree not found */
+            /** @description Project or worktree not found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -5455,6 +6344,145 @@ export interface operations {
             };
         };
     };
+    serve_attachment: {
+        parameters: {
+            query?: {
+                /** @description When true, force Content-Disposition: attachment (download). */
+                download?: boolean;
+                /**
+                 * @description When true, serve a thumbnail-sized version (for display in the UI).
+                 *     Currently serves the full file — thumbnail generation is a future enhancement.
+                 */
+                thumbnail?: boolean;
+            };
+            header?: never;
+            path: {
+                /** @description Agent ID */
+                agent_id: string;
+                /** @description Attachment ID */
+                attachment_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description File content */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Attachment not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    list_attachments: {
+        parameters: {
+            query?: {
+                /** @description Filter to attachments from a specific message. */
+                message_id?: string | null;
+                limit?: number | null;
+            };
+            header?: never;
+            path: {
+                /** @description Agent ID */
+                agent_id: string;
+                /** @description Channel ID */
+                channel_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["AttachmentListResponse"];
+                };
+            };
+            /** @description Agent not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    upload_attachment: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Agent ID */
+                agent_id: string;
+                /** @description Channel / conversation ID */
+                channel_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["AttachmentUploadResponse"];
+                };
+            };
+            /** @description Invalid or empty file */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Agent not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description File too large (max 50 MB) */
+            413: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
     list_bindings: {
         parameters: {
             query?: {
@@ -5967,18 +6995,16 @@ export interface operations {
             };
         };
     };
-    cortex_chat_messages: {
+    get_channel_settings: {
         parameters: {
             query: {
-                /** @description Agent ID */
                 agent_id: string;
-                /** @description Thread ID (omit for latest) */
-                thread_id?: string;
-                /** @description Maximum messages to return (default: 50, max: 200) */
-                limit: number;
             };
             header?: never;
-            path?: never;
+            path: {
+                /** @description Channel conversation ID */
+                channel_id: string;
+            };
             cookie?: never;
         };
         requestBody?: never;
@@ -5988,15 +7014,8 @@ export interface operations {
                     [name: string]: unknown;
                 };
                 content: {
-                    "application/json": components["schemas"]["CortexChatMessagesResponse"];
-                };
-            };
-            /** @description Agent not found */
-            404: {
-                headers: {
-                    [name: string]: unknown;
+                    "application/json": components["schemas"]["ChannelSettingsResponse"];
                 };
-                content?: never;
             };
             /** @description Internal server error */
             500: {
@@ -6007,41 +7026,150 @@ export interface operations {
             };
         };
     };
-    cortex_chat_send: {
+    update_channel_settings: {
         parameters: {
             query?: never;
             header?: never;
-            path?: never;
+            path: {
+                /** @description Channel conversation ID */
+                channel_id: string;
+            };
             cookie?: never;
         };
         requestBody: {
             content: {
-                "application/json": components["schemas"]["CortexChatSendRequest"];
+                "application/json": components["schemas"]["UpdateChannelSettingsRequest"];
             };
         };
         responses: {
-            /** @description SSE stream of chat events */
             200: {
                 headers: {
                     [name: string]: unknown;
                 };
-                content?: never;
-            };
-            /** @description Agent not found */
-            404: {
-                headers: {
-                    [name: string]: unknown;
+                content: {
+                    "application/json": components["schemas"]["ChannelSettingsResponse"];
                 };
-                content?: never;
             };
-            /** @description Cortex chat session busy */
-            409: {
+            /** @description Internal server error */
+            500: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            /** @description Internal server error */
+        };
+    };
+    conversation_defaults: {
+        parameters: {
+            query: {
+                /** @description Agent ID */
+                agent_id: string;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ConversationDefaultsResponse"];
+                };
+            };
+            /** @description Agent not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    cortex_chat_messages: {
+        parameters: {
+            query: {
+                /** @description Agent ID */
+                agent_id: string;
+                /** @description Thread ID (omit for latest) */
+                thread_id?: string;
+                /** @description Maximum messages to return (default: 50, max: 200) */
+                limit: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["CortexChatMessagesResponse"];
+                };
+            };
+            /** @description Agent not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    cortex_chat_send: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CortexChatSendRequest"];
+            };
+        };
+        responses: {
+            /** @description SSE stream of chat events */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Agent not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Cortex chat session busy */
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
             500: {
                 headers: {
                     [name: string]: unknown;
@@ -6968,9 +8096,403 @@ export interface operations {
                 headers: {
                     [name: string]: unknown;
                 };
-                content: {
-                    "application/json": unknown;
-                };
+                content: {
+                    "application/json": unknown;
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    get_models: {
+        parameters: {
+            query?: {
+                /** @description Filter by provider ID */
+                provider?: string;
+                /** @description Filter by capability (input_audio, voice_transcription) */
+                capability?: string;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ModelsResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    refresh_models: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ModelsResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    list_notifications: {
+        parameters: {
+            query?: {
+                /** @description "unread" returns only unread notifications; anything else returns all. */
+                filter?: string | null;
+                /** @description Filter by agent id. */
+                agent_id?: string | null;
+                /** @description Filter by kind: "task_approval", "worker_failed", "cortex_observation". */
+                kind?: string | null;
+                limit?: number;
+                offset?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["NotificationsResponse"];
+                };
+            };
+            /** @description Notification store not initialized */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    dismiss_read: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Read notifications dismissed */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Notification store not initialized */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    mark_all_read: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description All marked as read */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Notification store not initialized */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    unread_count: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["UnreadCountResponse"];
+                };
+            };
+            /** @description Notification store not initialized */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    dismiss_notification: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Notification id */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Dismissed */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Not found or already dismissed */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Notification store not initialized */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    mark_read: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Notification id */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Marked as read */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Not found or already read */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Notification store not initialized */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    list_portal_conversations: {
+        parameters: {
+            query: {
+                /** @description Agent ID */
+                agent_id: string;
+                /** @description Include archived conversations */
+                include_archived: boolean;
+                /** @description Maximum number of conversations to return (default: 100, max: 500) */
+                limit: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PortalConversationsResponse"];
+                };
+            };
+            /** @description Agent not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    create_portal_conversation: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CreatePortalConversationRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PortalConversationResponse"];
+                };
+            };
+            /** @description Agent not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    update_portal_conversation: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Conversation session ID */
+                session_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["UpdatePortalConversationRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PortalConversationResponse"];
+                };
+            };
+            /** @description Conversation not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    delete_portal_conversation: {
+        parameters: {
+            query: {
+                /** @description Agent ID */
+                agent_id: string;
+            };
+            header?: never;
+            path: {
+                /** @description Conversation session ID */
+                session_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PortalSendResponse"];
+                };
+            };
+            /** @description Conversation not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
             };
             /** @description Internal server error */
             500: {
@@ -6981,13 +8503,15 @@ export interface operations {
             };
         };
     };
-    get_models: {
+    portal_history: {
         parameters: {
-            query?: {
-                /** @description Filter by provider ID */
-                provider?: string;
-                /** @description Filter by capability (input_audio, voice_transcription) */
-                capability?: string;
+            query: {
+                /** @description Agent ID */
+                agent_id: string;
+                /** @description Session ID */
+                session_id: string;
+                /** @description Maximum number of messages to return (default: 100, max: 200) */
+                limit: number;
             };
             header?: never;
             path?: never;
@@ -7000,8 +8524,15 @@ export interface operations {
                     [name: string]: unknown;
                 };
                 content: {
-                    "application/json": components["schemas"]["ModelsResponse"];
+                    "application/json": components["schemas"]["PortalHistoryMessage"][];
+                };
+            };
+            /** @description Agent not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
                 };
+                content?: never;
             };
             /** @description Internal server error */
             500: {
@@ -7012,25 +8543,43 @@ export interface operations {
             };
         };
     };
-    refresh_models: {
+    portal_send: {
         parameters: {
             query?: never;
             header?: never;
             path?: never;
             cookie?: never;
         };
-        requestBody?: never;
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["PortalSendRequest"];
+            };
+        };
         responses: {
             200: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content: {
-                    "application/json": components["schemas"]["ModelsResponse"];
+                    "application/json": components["schemas"]["PortalSendResponse"];
                 };
             };
-            /** @description Internal server error */
-            500: {
+            /** @description Invalid request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Agent not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Messaging manager not available */
+            503: {
                 headers: {
                     [name: string]: unknown;
                 };
@@ -7219,6 +8768,35 @@ export interface operations {
             };
         };
     };
+    get_provider_config: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Provider ID */
+                provider: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ProviderConfigResponse"];
+                };
+            };
+            /** @description Provider not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
     list_secrets: {
         parameters: {
             query?: never;
@@ -8455,15 +10033,17 @@ export interface operations {
             };
         };
     };
-    list_webchat_conversations: {
+    get_usage: {
         parameters: {
-            query: {
-                /** @description Agent ID */
-                agent_id: string;
-                /** @description Include archived conversations */
-                include_archived: boolean;
-                /** @description Maximum number of conversations to return (default: 100, max: 500) */
-                limit: number;
+            query?: {
+                /** @description Filter to one agent. */
+                agent_id?: string | null;
+                /** @description ISO 8601 lower bound (default: 30 days ago). */
+                since?: string | null;
+                /** @description ISO 8601 upper bound. */
+                until?: string | null;
+                /** @description Group by: day, agent, model (comma-separated for multiple). */
+                group_by?: string | null;
             };
             header?: never;
             path?: never;
@@ -8476,16 +10056,41 @@ export interface operations {
                     [name: string]: unknown;
                 };
                 content: {
-                    "application/json": components["schemas"]["WebChatConversationsResponse"];
+                    "application/json": components["schemas"]["UsageResponse"];
                 };
             };
-            /** @description Agent not found */
-            404: {
+            /** @description Internal server error */
+            500: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
+        };
+    };
+    get_conversation_usage: {
+        parameters: {
+            query?: {
+                /** @description Filter to one agent. */
+                agent_id?: string | null;
+            };
+            header?: never;
+            path: {
+                /** @description Conversation ID */
+                conversation_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["UsageTotals"];
+                };
+            };
             /** @description Internal server error */
             500: {
                 headers: {
@@ -8495,7 +10100,35 @@ export interface operations {
             };
         };
     };
-    create_webchat_conversation: {
+    list_pages: {
+        parameters: {
+            query?: {
+                page_type?: string | null;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["WikiListResponse"];
+                };
+            };
+            /** @description Wiki store not initialized */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    create_page: {
         parameters: {
             query?: never;
             header?: never;
@@ -8504,7 +10137,7 @@ export interface operations {
         };
         requestBody: {
             content: {
-                "application/json": components["schemas"]["CreateWebChatConversationRequest"];
+                "application/json": components["schemas"]["CreatePageRequest"];
             };
         };
         responses: {
@@ -8513,18 +10146,18 @@ export interface operations {
                     [name: string]: unknown;
                 };
                 content: {
-                    "application/json": components["schemas"]["WebChatConversationResponse"];
+                    "application/json": components["schemas"]["WikiPageResponse"];
                 };
             };
-            /** @description Agent not found */
-            404: {
+            /** @description Invalid page_type */
+            400: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            /** @description Internal server error */
-            500: {
+            /** @description Wiki store not initialized */
+            503: {
                 headers: {
                     [name: string]: unknown;
                 };
@@ -8532,39 +10165,66 @@ export interface operations {
             };
         };
     };
-    update_webchat_conversation: {
+    search_pages: {
         parameters: {
-            query?: never;
-            header?: never;
-            path: {
-                /** @description Conversation session ID */
-                session_id: string;
+            query: {
+                query: string;
+                page_type?: string | null;
             };
+            header?: never;
+            path?: never;
             cookie?: never;
         };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["UpdateWebChatConversationRequest"];
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["WikiListResponse"];
+                };
+            };
+            /** @description Wiki store not initialized */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    get_page: {
+        parameters: {
+            query?: {
+                version?: number | null;
+            };
+            header?: never;
+            path: {
+                /** @description Page slug */
+                slug: string;
             };
+            cookie?: never;
         };
+        requestBody?: never;
         responses: {
             200: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content: {
-                    "application/json": components["schemas"]["WebChatConversationResponse"];
+                    "application/json": components["schemas"]["WikiPageResponse"];
                 };
             };
-            /** @description Conversation not found */
+            /** @description Page not found */
             404: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            /** @description Internal server error */
-            500: {
+            /** @description Wiki store not initialized */
+            503: {
                 headers: {
                     [name: string]: unknown;
                 };
@@ -8572,16 +10232,13 @@ export interface operations {
             };
         };
     };
-    delete_webchat_conversation: {
+    archive_page: {
         parameters: {
-            query: {
-                /** @description Agent ID */
-                agent_id: string;
-            };
+            query?: never;
             header?: never;
             path: {
-                /** @description Conversation session ID */
-                session_id: string;
+                /** @description Page slug */
+                slug: string;
             };
             cookie?: never;
         };
@@ -8592,18 +10249,58 @@ export interface operations {
                     [name: string]: unknown;
                 };
                 content: {
-                    "application/json": components["schemas"]["WebChatSendResponse"];
+                    "application/json": components["schemas"]["WikiActionResponse"];
                 };
             };
-            /** @description Conversation not found */
+            /** @description Wiki store not initialized */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    edit_page: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Page slug */
+                slug: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["EditPageRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["WikiPageResponse"];
+                };
+            };
+            /** @description Edit match failed */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Page not found */
             404: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            /** @description Internal server error */
-            500: {
+            /** @description Wiki store not initialized */
+            503: {
                 headers: {
                     [name: string]: unknown;
                 };
@@ -8611,18 +10308,16 @@ export interface operations {
             };
         };
     };
-    webchat_history: {
+    get_history: {
         parameters: {
-            query: {
-                /** @description Agent ID */
-                agent_id: string;
-                /** @description Session ID */
-                session_id: string;
-                /** @description Maximum number of messages to return (default: 100, max: 200) */
-                limit: number;
+            query?: {
+                limit?: number;
             };
             header?: never;
-            path?: never;
+            path: {
+                /** @description Page slug */
+                slug: string;
+            };
             cookie?: never;
         };
         requestBody?: never;
@@ -8632,18 +10327,11 @@ export interface operations {
                     [name: string]: unknown;
                 };
                 content: {
-                    "application/json": components["schemas"]["WebChatHistoryMessage"][];
-                };
-            };
-            /** @description Agent not found */
-            404: {
-                headers: {
-                    [name: string]: unknown;
+                    "application/json": components["schemas"]["WikiHistoryResponse"];
                 };
-                content?: never;
             };
-            /** @description Internal server error */
-            500: {
+            /** @description Wiki store not initialized */
+            503: {
                 headers: {
                     [name: string]: unknown;
                 };
@@ -8651,16 +10339,19 @@ export interface operations {
             };
         };
     };
-    webchat_send: {
+    restore_version: {
         parameters: {
             query?: never;
             header?: never;
-            path?: never;
+            path: {
+                /** @description Page slug */
+                slug: string;
+            };
             cookie?: never;
         };
         requestBody: {
             content: {
-                "application/json": components["schemas"]["WebChatSendRequest"];
+                "application/json": components["schemas"]["RestoreVersionRequest"];
             };
         };
         responses: {
@@ -8669,24 +10360,17 @@ export interface operations {
                     [name: string]: unknown;
                 };
                 content: {
-                    "application/json": components["schemas"]["WebChatSendResponse"];
-                };
-            };
-            /** @description Invalid request */
-            400: {
-                headers: {
-                    [name: string]: unknown;
+                    "application/json": components["schemas"]["WikiPageResponse"];
                 };
-                content?: never;
             };
-            /** @description Agent not found */
+            /** @description Page or version not found */
             404: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            /** @description Messaging manager not available */
+            /** @description Wiki store not initialized */
             503: {
                 headers: {
                     [name: string]: unknown;
diff --git a/interface/src/api/types.ts b/interface/src/api/types.ts
index 261334d0e..e41fe27bf 100644
--- a/interface/src/api/types.ts
+++ b/interface/src/api/types.ts
@@ -106,21 +106,6 @@ export type WarmupTriggerRequest =
 export type WarmupTriggerResponse =
   components["schemas"]["WarmupTriggerResponse"];
 
-// Webchat conversations
-export type WebChatConversation = components["schemas"]["WebChatConversation"];
-export type WebChatConversationSummary =
-	components["schemas"]["WebChatConversationSummary"];
-export type WebChatConversationsResponse =
-	components["schemas"]["WebChatConversationsResponse"];
-export type WebChatConversationResponse =
-	components["schemas"]["WebChatConversationResponse"];
-export type CreateWebChatConversationRequest =
-	components["schemas"]["CreateWebChatConversationRequest"];
-export type UpdateWebChatConversationRequest =
-	components["schemas"]["UpdateWebChatConversationRequest"];
-export type WebChatHistoryMessage =
-	components["schemas"]["WebChatHistoryMessage"];
-
 // Conversation Settings
 export type ModelOverrides = {
 	channel?: string | null;
@@ -164,25 +149,21 @@ export type ConversationDefaultsResponse = {
 	worker_memory_modes: string[];
 };
 
-// Portal conversations (renamed from webchat)
-export type PortalConversation = components["schemas"]["WebChatConversation"];
-export type PortalConversationSummary = components["schemas"]["WebChatConversationSummary"];
-export type PortalConversationsResponse = components["schemas"]["WebChatConversationsResponse"];
-export type PortalConversationResponse = components["schemas"]["WebChatConversationResponse"];
-export type CreatePortalConversationRequest = {
-	agent_id: string;
-	title?: string | null;
-	settings?: ConversationSettings | null;
-};
-export type UpdatePortalConversationRequest = {
-	agent_id: string;
-	title?: string | null;
-	archived?: boolean | null;
-	settings?: ConversationSettings | null;
-};
-export type PortalHistoryMessage = components["schemas"]["WebChatHistoryMessage"];
-export type PortalSendRequest = components["schemas"]["WebChatSendRequest"];
-export type PortalSendResponse = components["schemas"]["WebChatSendResponse"];
+// Portal conversations
+export type PortalConversation = components["schemas"]["PortalConversation"];
+export type PortalConversationSummary =
+	components["schemas"]["PortalConversationSummary"];
+export type PortalConversationsResponse =
+	components["schemas"]["PortalConversationsResponse"];
+export type PortalConversationResponse =
+	components["schemas"]["PortalConversationResponse"];
+export type CreatePortalConversationRequest =
+	components["schemas"]["CreatePortalConversationRequest"];
+export type UpdatePortalConversationRequest =
+	components["schemas"]["UpdatePortalConversationRequest"];
+export type PortalHistoryMessage = components["schemas"]["PortalHistoryMessage"];
+export type PortalSendRequest = components["schemas"]["PortalSendRequest"];
+export type PortalSendResponse = components["schemas"]["PortalSendResponse"];
 
 // Activity
 export type ActivityDayCount = components["schemas"]["ActivityDayCount"];
@@ -439,10 +420,6 @@ export type TogglePlatformRequest =
 export type DisconnectPlatformRequest =
   components["schemas"]["DisconnectPlatformRequest"];
 
-// Web chat
-export type WebChatSendRequest = components["schemas"]["WebChatSendRequest"];
-export type WebChatSendResponse = components["schemas"]["WebChatSendResponse"];
-
 // =============================================================================
 // Links Types
 // =============================================================================
diff --git a/interface/src/components/AgentTabs.tsx b/interface/src/components/AgentTabs.tsx
deleted file mode 100644
index 7ea211d29..000000000
--- a/interface/src/components/AgentTabs.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Link, useMatchRoute } from "@tanstack/react-router";
-import { motion } from "framer-motion";
-
-const tabs = [
-	{ label: "Overview", to: "/agents/$agentId" as const, exact: true },
-	{ label: "Chat", to: "/agents/$agentId/chat" as const, exact: false },
-	{ label: "Channels", to: "/agents/$agentId/channels" as const, exact: false },
-	{ label: "Memories", to: "/agents/$agentId/memories" as const, exact: false },
-	{ label: "Ingest", to: "/agents/$agentId/ingest" as const, exact: false },
-	{ label: "Workers", to: "/agents/$agentId/workers" as const, exact: false },
-	{ label: "Projects", to: "/agents/$agentId/projects" as const, exact: false },
-	{ label: "Tasks", to: "/agents/$agentId/tasks" as const, exact: false },
-	{ label: "Cortex", to: "/agents/$agentId/cortex" as const, exact: false },
-	{ label: "Skills", to: "/agents/$agentId/skills" as const, exact: false },
-	{ label: "Cron", to: "/agents/$agentId/cron" as const, exact: false },
-	{ label: "Config", to: "/agents/$agentId/config" as const, exact: false },
-];
-
-export function AgentTabs({ agentId }: { agentId: string }) {
-	const matchRoute = useMatchRoute();
-
-	return (
-		<div className="relative flex h-12 items-stretch border-b border-app-line bg-app-darkBox/30 px-6">
-			{tabs.map((tab) => {
-				const isActive = matchRoute({
-					to: tab.to,
-					params: { agentId },
-					fuzzy: !tab.exact,
-				});
-
-				return (
-					<Link
-						key={tab.to}
-						to={tab.to}
-						params={{ agentId }}
-						className={`relative flex items-center px-3 text-sm transition-colors ${
-							isActive
-								? "text-ink"
-								: "text-ink-faint hover:text-ink-dull"
-						}`}
-					>
-						{tab.label}
-						{isActive && (
-							<motion.div
-								layoutId={`agent-tab-indicator-${agentId}`}
-								className="absolute bottom-0 left-0 right-0 h-px bg-accent"
-								transition={{ type: "spring", stiffness: 500, damping: 35 }}
-							/>
-						)}
-					</Link>
-				);
-			})}
-		</div>
-	);
-}
diff --git a/interface/src/components/ApprovalModal.tsx b/interface/src/components/ApprovalModal.tsx
new file mode 100644
index 000000000..c17c594b5
--- /dev/null
+++ b/interface/src/components/ApprovalModal.tsx
@@ -0,0 +1,162 @@
+import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
+import {
+	DialogRoot,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogFooter,
+	Badge,
+	Button,
+} from "@spacedrive/primitives";
+import {TaskDetail} from "@spacedrive/ai";
+import {CheckCircle, XCircle, WarningCircle} from "@phosphor-icons/react";
+import {api, type NotificationItem, type NotificationKind} from "@/api/client";
+import {NOTIFICATIONS_QUERY_KEY} from "@/hooks/useNotifications";
+
+interface ApprovalModalProps {
+	notification: NotificationItem | null;
+	onClose: () => void;
+}
+
+const KIND_CONFIG: Record<NotificationKind, {icon: React.ElementType; iconClass: string; label: string}> = {
+	task_approval: {icon: CheckCircle, iconClass: "text-status-warning", label: "Approval"},
+	worker_failed: {icon: XCircle, iconClass: "text-status-error", label: "Failed"},
+	cortex_observation: {icon: WarningCircle, iconClass: "text-status-warning", label: "Alert"},
+};
+
+function timeAgo(isoString: string): string {
+	const diff = Date.now() - new Date(isoString).getTime();
+	const mins = Math.floor(diff / 60_000);
+	if (mins < 1) return "just now";
+	if (mins < 60) return `${mins}m ago`;
+	const hours = Math.floor(mins / 60);
+	if (hours < 24) return `${hours}h ago`;
+	return `${Math.floor(hours / 24)}d ago`;
+}
+
+export function ApprovalModal({notification, onClose}: ApprovalModalProps) {
+	const queryClient = useQueryClient();
+	const open = notification !== null;
+
+	const kind = notification
+		? (notification.kind in KIND_CONFIG ? notification.kind : "cortex_observation") as NotificationKind
+		: "cortex_observation";
+	const config = KIND_CONFIG[kind];
+	const Icon = config.icon;
+
+	const taskNumber = notification?.related_entity_type === "task" && notification.related_entity_id
+		? Number(notification.related_entity_id)
+		: null;
+
+	const {data: taskData, isLoading: isTaskLoading} = useQuery({
+		queryKey: ["task", taskNumber],
+		queryFn: () => api.getTask(taskNumber!),
+		enabled: open && taskNumber !== null,
+	});
+
+	const removeNotificationFromCache = (id: string) => {
+		queryClient.setQueriesData(
+			{queryKey: NOTIFICATIONS_QUERY_KEY},
+			(old: unknown) => {
+				const data = old as {notifications?: NotificationItem[]} | undefined;
+				if (!data?.notifications) return old;
+				return {...data, notifications: data.notifications.filter((n) => n.id !== id)};
+			},
+		);
+	};
+
+	const approveMutation = useMutation({
+		mutationFn: () => api.approveTask(taskNumber!, "human"),
+		onSuccess: () => {
+			if (notification) removeNotificationFromCache(notification.id);
+			queryClient.invalidateQueries({queryKey: NOTIFICATIONS_QUERY_KEY});
+			queryClient.invalidateQueries({queryKey: ["tasks"]});
+			queryClient.invalidateQueries({queryKey: ["task", taskNumber]});
+			onClose();
+		},
+	});
+
+	const dismissMutation = useMutation({
+		mutationFn: () => api.dismissNotification(notification!.id),
+		onSuccess: () => {
+			if (notification) removeNotificationFromCache(notification.id);
+			queryClient.invalidateQueries({queryKey: NOTIFICATIONS_QUERY_KEY});
+			onClose();
+		},
+	});
+
+	const isTaskApproval = kind === "task_approval" && taskNumber !== null;
+
+	return (
+		<DialogRoot open={open} onOpenChange={(v) => {if (!v) onClose();}}>
+			<DialogContent className="!flex max-h-[80vh] w-full max-w-xl !flex-col !gap-0 overflow-hidden !p-0">
+				{/* Header */}
+				<DialogHeader className="flex-shrink-0 border-b border-app-line/50 px-5 pt-5 pb-4">
+					<div className="flex items-center gap-2.5">
+						<Icon className={`size-5 shrink-0 ${config.iconClass}`} weight="fill" />
+						<div className="min-w-0 flex-1">
+							<DialogTitle className="truncate text-sm font-semibold text-ink">
+								{notification?.title ?? "Notification"}
+							</DialogTitle>
+							<div className="mt-0.5 flex items-center gap-2 text-xs text-ink-faint">
+								<Badge variant="default" size="sm">{config.label}</Badge>
+								{notification?.agent_id && <span>{notification.agent_id}</span>}
+								{notification && <span>·</span>}
+								{notification && <span>{timeAgo(notification.created_at)}</span>}
+							</div>
+						</div>
+					</div>
+				</DialogHeader>
+
+				{/* Body */}
+				<div className="flex-1 overflow-y-auto">
+					{isTaskApproval ? (
+						isTaskLoading ? (
+							<div className="flex items-center justify-center py-12">
+								<span className="text-xs text-ink-dull">Loading task…</span>
+							</div>
+						) : taskData?.task ? (
+							<TaskDetail task={taskData.task as any} />
+						) : (
+							<div className="flex items-center justify-center py-12">
+								<span className="text-xs text-ink-dull">Task not found</span>
+							</div>
+						)
+					) : (
+						<div className="px-5 py-4">
+							{notification?.body ? (
+								<p className="whitespace-pre-wrap text-sm text-ink">{notification.body}</p>
+							) : (
+								<p className="text-sm italic text-ink-faint">No additional details</p>
+							)}
+						</div>
+					)}
+				</div>
+
+				{/* Footer */}
+				<DialogFooter className="flex-shrink-0 border-t border-app-line/50 px-5 py-3">
+					<div className="flex w-full items-center justify-end gap-2">
+						<Button
+							variant="subtle"
+							size="sm"
+							onClick={() => dismissMutation.mutate()}
+							disabled={dismissMutation.isPending || approveMutation.isPending}
+						>
+							Dismiss
+						</Button>
+						{isTaskApproval && (
+							<Button
+								variant="accent"
+								size="sm"
+								onClick={() => approveMutation.mutate()}
+								disabled={approveMutation.isPending || !taskData?.task}
+							>
+								{approveMutation.isPending ? "Approving…" : "Approve"}
+							</Button>
+						)}
+					</div>
+				</DialogFooter>
+			</DialogContent>
+		</DialogRoot>
+	);
+}
diff --git a/interface/src/components/ChannelCard.tsx b/interface/src/components/ChannelCard.tsx
index 99d01e531..37c95ecd7 100644
--- a/interface/src/components/ChannelCard.tsx
+++ b/interface/src/components/ChannelCard.tsx
@@ -1,79 +1,27 @@
-import { useEffect, useState } from "react";
-import { Link } from "@tanstack/react-router";
-import { AnimatePresence, motion } from "framer-motion";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { api } from "@/api/client";
-import type { ChannelInfo } from "@/api/client";
-import type { ConversationSettings, ConversationDefaultsResponse } from "@/api/types";
-import { isOpenCodeWorker, type ActiveBranch, type ActiveWorker, type ChannelLiveState } from "@/hooks/useChannelLiveState";
-import { LiveDuration } from "@/components/LiveDuration";
-import { ConversationSettingsPanel } from "@/components/ConversationSettingsPanel";
-import { Popover, PopoverTrigger, PopoverContent } from "@/ui/Popover";
-import { formatTimeAgo, formatTimestamp, platformIcon, platformColor } from "@/lib/format";
+import {useEffect, useState} from "react";
+import {Link} from "@tanstack/react-router";
+import {AnimatePresence, motion} from "framer-motion";
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
+import {GearSix, X} from "@phosphor-icons/react";
+import {api} from "@/api/client";
+import type {ChannelInfo} from "@/api/client";
+import type {
+	ConversationSettings,
+	ConversationDefaultsResponse,
+} from "@/api/types";
+import {isOpenCodeWorker, type ChannelLiveState} from "@/hooks/useChannelLiveState";
+import {ConversationSettingsPanel} from "@/components/ConversationSettingsPanel";
+import {
+	CircleButton,
+	PopoverRoot,
+	PopoverTrigger,
+	PopoverContent,
+} from "@spacedrive/primitives";
+import {formatTimeAgo, formatTimestamp} from "@/lib/format";
+import {PlatformIcon} from "@/lib/platformIcons";
+import {OpenCodeZenIcon} from "@/lib/providerIcons";
 
-const VISIBLE_MESSAGES = 6;
-
-function WorkerBadge({ worker }: { worker: ActiveWorker }) {
-	const oc = isOpenCodeWorker(worker);
-	return (
-		<div className={`flex items-center gap-2 rounded-md px-2.5 py-1.5 text-tiny ${
-			oc ? "bg-zinc-500/10" : "bg-amber-500/10"
-		}`}>
-			<div className={`h-1.5 w-1.5 animate-pulse rounded-full ${oc ? "bg-zinc-400" : "bg-amber-400"}`} />
-			<div className="min-w-0 flex-1">
-				<div className="flex items-center gap-1.5">
-					<span className={`font-medium ${oc ? "text-zinc-300" : "text-amber-300"}`}>Worker</span>
-					<span className="truncate text-ink-dull">{worker.task}</span>
-				</div>
-				<div className="mt-0.5 flex items-center gap-2 text-ink-faint">
-					<span>{worker.status}</span>
-					{worker.currentTool && (
-						<>
-							<span className="text-ink-faint/50">·</span>
-							<span className={oc ? "text-zinc-400/70" : "text-amber-400/70"}>{worker.currentTool}</span>
-						</>
-					)}
-					{worker.toolCalls > 0 && (
-						<>
-							<span className="text-ink-faint/50">·</span>
-							<span>{worker.toolCalls} tools</span>
-						</>
-					)}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function BranchBadge({ branch }: { branch: ActiveBranch }) {
-	const displayTool = branch.currentTool ?? branch.lastTool;
-	return (
-		<div className="flex items-center gap-2 rounded-md bg-violet-500/10 px-2.5 py-1.5 text-tiny">
-			<div className="h-1.5 w-1.5 animate-pulse rounded-full bg-violet-400" />
-			<div className="min-w-0 flex-1">
-				<div className="flex items-center gap-1.5">
-					<span className="font-medium text-violet-300">Branch</span>
-					<span className="truncate text-ink-dull">{branch.description}</span>
-				</div>
-				<div className="mt-0.5 flex items-center gap-2 text-ink-faint">
-					<LiveDuration startMs={branch.startedAt} />
-					{displayTool && (
-						<>
-							<span className="text-ink-faint/50">·</span>
-							<span className={branch.currentTool ? "text-violet-400/70" : "text-violet-400/40"}>{displayTool}</span>
-						</>
-					)}
-					{branch.toolCalls > 0 && (
-						<>
-							<span className="text-ink-faint/50">·</span>
-							<span>{branch.toolCalls} tools</span>
-						</>
-					)}
-				</div>
-			</div>
-		</div>
-	);
-}
+const VISIBLE_MESSAGES = 9;
 
 export function ChannelCard({
 	channel,
@@ -86,21 +34,22 @@ export function ChannelCard({
 	const isTyping = liveState?.isTyping ?? false;
 	const timeline = liveState?.timeline ?? [];
 	const messages = timeline.filter((item) => item.type === "message");
-	const workers = Object.values(liveState?.workers ?? {});
+	const allWorkers = Object.values(liveState?.workers ?? {});
+	const workers = allWorkers.filter((w) => !isOpenCodeWorker(w));
+	const ocWorkers = allWorkers.filter((w) => isOpenCodeWorker(w));
 	const branches = Object.values(liveState?.branches ?? {});
 	const visible = messages.slice(-VISIBLE_MESSAGES);
-	const hasActivity = workers.length > 0 || branches.length > 0;
-
+	const botName = [...messages].reverse().find((m) => m.type === "message" && m.role !== "user")?.sender_name ?? "bot";
 	const [showSettings, setShowSettings] = useState(false);
 	const [settings, setSettings] = useState<ConversationSettings>({});
 
-	const { data: defaults } = useQuery<ConversationDefaultsResponse>({
+	const {data: defaults} = useQuery<ConversationDefaultsResponse>({
 		queryKey: ["conversation-defaults", channel.agent_id],
 		queryFn: () => api.getConversationDefaults(channel.agent_id),
 		enabled: showSettings,
 	});
 
-	const { data: channelSettingsData } = useQuery({
+	const {data: channelSettingsData} = useQuery({
 		queryKey: ["channel-settings", channel.id, channel.agent_id],
 		queryFn: () => api.getChannelSettings(channel.id, channel.agent_id),
 		enabled: showSettings,
@@ -114,17 +63,23 @@ export function ChannelCard({
 
 	const deleteChannel = useMutation({
 		mutationFn: () => api.deleteChannel(channel.agent_id, channel.id),
-		onSuccess: () => queryClient.invalidateQueries({ queryKey: ["channels"] }),
+		onSuccess: () => queryClient.invalidateQueries({queryKey: ["channels"]}),
 	});
 
 	const saveSettingsMutation = useMutation({
 		mutationFn: async () => {
-			const response = await api.updateChannelSettings(channel.id, channel.agent_id, settings);
+			const response = await api.updateChannelSettings(
+				channel.id,
+				channel.agent_id,
+				settings,
+			);
 			if (!response.ok) throw new Error(`HTTP ${response.status}`);
 		},
 		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["channel-settings", channel.id] });
-			queryClient.invalidateQueries({ queryKey: ["channels"] });
+			queryClient.invalidateQueries({
+				queryKey: ["channel-settings", channel.id],
+			});
+			queryClient.invalidateQueries({queryKey: ["channels"]});
 			setShowSettings(false);
 		},
 	});
@@ -132,36 +87,32 @@ export function ChannelCard({
 	return (
 		<Link
 			to="/agents/$agentId/channels/$channelId"
-			params={{ agentId: channel.agent_id, channelId: channel.id }}
-			className="group/card flex flex-col rounded-lg border border-app-line bg-app-darkBox transition-colors hover:border-app-line/80 hover:bg-app-darkBox/80"
+			params={{agentId: channel.agent_id, channelId: channel.id}}
+			className="group/card flex aspect-square flex-col overflow-hidden rounded-xl border border-app-line bg-app-dark-box transition-colors hover:border-app-line/80 hover:bg-app-box/60"
 		>
 			{/* Header */}
-			<div className="flex items-start justify-between p-4 pb-2">
+			<div className="flex items-start justify-between p-3 pb-2">
 				<div className="min-w-0 flex-1">
 					<div className="flex items-center gap-2">
-					<h3 className="truncate font-medium text-ink">
-						{channel.display_name ?? channel.id}
+						<PlatformIcon
+							platform={channel.platform}
+							className="shrink-0 text-ink-faint"
+						/>
+						<h3 className="truncate font-medium text-ink text-sm">
+							{channel.display_name ?? channel.id}
+						</h3>
+					</div>
+					<div className="mt-1 flex items-center gap-1.5 flex-wrap">
 						{channel.display_name && (
-							<span className="ml-2 font-normal text-ink-faint text-tiny">{channel.id}</span>
-						)}
-					</h3>
-						{isTyping && (
-							<div className="flex items-center gap-1">
-								<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-accent" />
-								<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-accent [animation-delay:0.2s]" />
-								<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-accent [animation-delay:0.4s]" />
-							</div>
+							<span className="text-tiny text-ink-faint truncate max-w-[120px]">
+								{channel.id}
+							</span>
 						)}
-					</div>
-					<div className="mt-1 flex items-center gap-2">
-						<span className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-tiny font-medium ${platformColor(channel.platform)}`}>
-							{platformIcon(channel.platform)}
-						</span>
 						<span className="text-tiny text-ink-faint">
 							{formatTimeAgo(channel.last_activity_at)}
 						</span>
 						{channel.response_mode === "observe" && (
-							<span className="inline-flex items-center rounded-md bg-amber-500/10 px-1.5 py-0.5 text-tiny font-medium text-amber-400">
+							<span className="inline-flex items-center rounded-md bg-status-warning/10 px-1.5 py-0.5 text-tiny font-medium text-status-warning">
 								Observe
 							</span>
 						)}
@@ -170,34 +121,30 @@ export function ChannelCard({
 								Mention Only
 							</span>
 						)}
-						{hasActivity && (
-							<span className="text-tiny text-ink-faint">
-								{workers.length > 0 && `${workers.length}w`}
-								{workers.length > 0 && branches.length > 0 && " "}
-								{branches.length > 0 && `${branches.length}b`}
-							</span>
-						)}
 					</div>
 				</div>
-				<div className="ml-2 flex shrink-0 items-center gap-2">
-					<Popover open={showSettings} onOpenChange={setShowSettings}>
+				<div className="ml-2 flex shrink-0 items-center gap-1">
+					<PopoverRoot open={showSettings} onOpenChange={setShowSettings}>
 						<PopoverTrigger asChild>
-							<button
+							<CircleButton
+								icon={GearSix}
+								size="sm"
 								onClick={(e) => {
 									e.preventDefault();
 									e.stopPropagation();
 									setShowSettings((v) => !v);
 								}}
-								className="rounded p-1 text-ink-faint opacity-0 transition-opacity hover:bg-ink/10 hover:text-ink group-hover/card:opacity-100"
+								className="opacity-0 transition-opacity group-hover/card:opacity-100"
 								title="Channel settings"
-							>
-								<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-									<circle cx="12" cy="12" r="3" />
-									<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.32 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
-								</svg>
-							</button>
+							/>
 						</PopoverTrigger>
-						<PopoverContent align="end" sideOffset={4} collisionPadding={16} className="max-h-[80vh] w-96 overflow-y-auto p-3" onClick={(e) => e.preventDefault()}>
+						<PopoverContent
+							align="end"
+							sideOffset={4}
+							collisionPadding={16}
+							className="max-h-[80vh] w-96 overflow-y-auto p-3"
+							onClick={(e) => e.preventDefault()}
+						>
 							{defaults && channelSettingsData ? (
 								<ConversationSettingsPanel
 									defaults={defaults}
@@ -208,76 +155,103 @@ export function ChannelCard({
 									saving={saveSettingsMutation.isPending}
 								/>
 							) : (
-								<div className="py-4 text-center text-xs text-ink-faint">Loading...</div>
+								<div className="py-4 text-center text-xs text-ink-faint">
+									Loading...
+								</div>
 							)}
 						</PopoverContent>
-					</Popover>
-					<button
+					</PopoverRoot>
+					<CircleButton
+						icon={X}
+						size="sm"
 						onClick={(e) => {
 							e.preventDefault();
 							e.stopPropagation();
 							deleteChannel.mutate();
 						}}
-						className="rounded p-1 text-ink-faint opacity-0 transition-opacity hover:bg-ink/10 hover:text-ink group-hover/card:opacity-100"
+						className="opacity-0 transition-opacity group-hover/card:opacity-100"
 						title="Delete channel"
-					>
-						<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-							<path d="M4 4l8 8M12 4l-8 8" />
-						</svg>
-					</button>
-					<div className={`h-2 w-2 rounded-full ${
-						hasActivity ? "bg-amber-400 animate-pulse" :
-						isTyping ? "bg-accent animate-pulse" :
-						"bg-green-500/60"
-					}`} />
+					/>
 				</div>
 			</div>
 
-			{/* Active workers and branches */}
-			{hasActivity && (
-				<div className="flex flex-col gap-1.5 px-4 pb-2">
-					{workers.map((worker) => (
-						<WorkerBadge key={worker.id} worker={worker} />
-					))}
-					{branches.map((branch) => (
-						<BranchBadge key={branch.id} branch={branch} />
-					))}
-				</div>
-			)}
+			{/* Activity pills — always allocated */}
+			<div className="flex items-start gap-1.5 px-3 pb-2">
+				{workers.length > 0 && (
+					<span className="inline-flex items-center gap-1 rounded-xl border border-app-line/50 bg-app-button px-1.5 py-0.5 text-xs text-ink-faint">
+						<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-status-warning" />
+						{workers.length} worker{workers.length !== 1 ? "s" : ""}
+					</span>
+				)}
+				{ocWorkers.length > 0 && (
+					<span className="inline-flex items-center gap-1 rounded-xl border border-app-line/50 bg-app-button px-1.5 py-0.5 text-xs text-ink-faint">
+						<OpenCodeZenIcon size={10} className="shrink-0" />
+						{ocWorkers.length} OpenCode
+					</span>
+				)}
+				{branches.length > 0 && (
+					<span className="inline-flex items-center gap-1 rounded-xl border border-app-line/50 bg-app-button px-1.5 py-0.5 text-xs text-ink-faint">
+						<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-accent" />
+						{branches.length} branch{branches.length !== 1 ? "es" : ""}
+					</span>
+				)}
+			</div>
 
 			{/* Message stream */}
-			{visible.length > 0 && (
-				<div className="flex flex-col border-t border-app-line/50 p-3">
+			{(visible.length > 0 || isTyping) && (
+				<div className="flex flex-1 flex-col overflow-hidden border-t border-app-line/50 p-3">
 					{messages.length > VISIBLE_MESSAGES && (
-						<span className="mb-1 text-tiny text-ink-faint">
+						<span className="mb-1 shrink-0 text-tiny text-ink-faint">
 							{messages.length - VISIBLE_MESSAGES} earlier messages
 						</span>
 					)}
-					<AnimatePresence initial={false}>
-						{visible.map((message) => {
-							if (message.type !== "message") return null;
-							return (
-								<motion.div
-									key={message.id}
-									initial={{ opacity: 0, height: 0, marginTop: 0 }}
-									animate={{ opacity: 1, height: "auto", marginTop: 4 }}
-									exit={{ opacity: 0, height: 0, marginTop: 0 }}
-									transition={{ type: "spring", stiffness: 500, damping: 35 }}
-									className="flex gap-2 overflow-hidden text-sm first:!mt-0"
-								>
-									<span className="flex-shrink-0 text-tiny text-ink-faint">
-										{formatTimestamp(new Date(message.created_at).getTime())}
-									</span>
-									<span className={`flex-shrink-0 text-tiny font-medium ${
-										message.role === "user" ? "text-accent-faint" : "text-green-400"
-									}`}>
-										{message.role === "user" ? (message.sender_name ?? "user") : (message.sender_name ?? "bot")}
-									</span>
-									<p className="line-clamp-1 text-sm text-ink-faint">{message.content}</p>
-								</motion.div>
-							);
-						})}
-					</AnimatePresence>
+					<div className="flex flex-1 flex-col justify-end overflow-hidden [mask-image:linear-gradient(to_bottom,transparent,black_32%)]">
+						<AnimatePresence initial={false}>
+							{visible.map((message) => {
+								if (message.type !== "message") return null;
+								return (
+									<motion.div
+										key={message.id}
+										initial={{opacity: 0}}
+										animate={{opacity: 1}}
+										exit={{opacity: 0}}
+										transition={{duration: 0.15}}
+										className="flex h-5 shrink-0 gap-2 overflow-hidden"
+									>
+										<span className="shrink-0 text-tiny text-ink-faint">
+											{formatTimestamp(new Date(message.created_at).getTime())}
+										</span>
+										<span
+											className={`shrink-0 text-tiny font-medium ${
+												message.role === "user"
+													? "text-accent-faint"
+													: "text-ink"
+											}`}
+										>
+											{message.role === "user"
+												? (message.sender_name ?? "user")
+												: (message.sender_name ?? "bot")}
+										</span>
+										<span className="line-clamp-1 text-sm text-ink-faint">
+											{message.content}
+										</span>
+									</motion.div>
+								);
+							})}
+						</AnimatePresence>
+						{isTyping && (
+							<div className="flex h-5 shrink-0 items-center gap-2 text-xs">
+								<span className="shrink-0 text-tiny text-ink-faint">now</span>
+								<span className="shrink-0 text-tiny font-medium text-ink">{botName}</span>
+								<span className="flex items-center gap-0.5 text-ink-faint">
+									<span className="inline-block h-1 w-1 animate-pulse rounded-full bg-accent" />
+									<span className="inline-block h-1 w-1 animate-pulse rounded-full bg-accent [animation-delay:0.2s]" />
+									<span className="inline-block h-1 w-1 animate-pulse rounded-full bg-accent [animation-delay:0.4s]" />
+								</span>
+								<span className="text-ink-faint">is typing...</span>
+							</div>
+						)}
+					</div>
 				</div>
 			)}
 		</Link>
diff --git a/interface/src/components/ChannelEditModal.tsx b/interface/src/components/ChannelEditModal.tsx
index ee01f00a3..7c10b6936 100644
--- a/interface/src/components/ChannelEditModal.tsx
+++ b/interface/src/components/ChannelEditModal.tsx
@@ -1,25 +1,37 @@
 import {useState} from "react";
 import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
 import {api, type PlatformStatus, type BindingInfo} from "@/api/client";
-import {isValidE164, E164_ERROR_TEXT, validateSignalDmAllowedUsers} from "@/lib/format";
+import {
+	isValidE164,
+	E164_ERROR_TEXT,
+	validateSignalDmAllowedUsers,
+} from "@/lib/format";
 import {
 	Button,
 	Input,
-	Dialog,
+	DialogRoot,
 	DialogContent,
 	DialogHeader,
 	DialogTitle,
 	DialogDescription,
-	Select,
+	SelectRoot,
 	SelectTrigger,
 	SelectValue,
 	SelectContent,
 	SelectItem,
-} from "@/ui";
+} from "@spacedrive/primitives";
 import {PlatformIcon} from "@/lib/platformIcons";
 import {TagInput} from "@/components/TagInput";
 
-type Platform = "discord" | "slack" | "telegram" | "twitch" | "email" | "webhook" | "mattermost" | "signal";
+type Platform =
+	| "discord"
+	| "slack"
+	| "telegram"
+	| "twitch"
+	| "email"
+	| "webhook"
+	| "mattermost"
+	| "signal";
 
 interface ChannelEditModalProps {
 	platform: Platform;
@@ -29,14 +41,27 @@ interface ChannelEditModalProps {
 	onOpenChange: (open: boolean) => void;
 }
 
-export function ChannelEditModal({platform, name, status, open, onOpenChange}: ChannelEditModalProps) {
+export function ChannelEditModal({
+	platform,
+	name,
+	status,
+	open,
+	onOpenChange,
+}: ChannelEditModalProps) {
 	const queryClient = useQueryClient();
 	const configured = status?.configured ?? false;
 
-	const [credentialInputs, setCredentialInputs] = useState<Record<string, string>>({});
-	const [message, setMessage] = useState<{text: string; type: "success" | "error"} | null>(null);
+	const [credentialInputs, setCredentialInputs] = useState<
+		Record<string, string>
+	>({});
+	const [message, setMessage] = useState<{
+		text: string;
+		type: "success" | "error";
+	} | null>(null);
 	const [confirmDisconnect, setConfirmDisconnect] = useState(false);
-	const [editingBinding, setEditingBinding] = useState<BindingInfo | null>(null);
+	const [editingBinding, setEditingBinding] = useState<BindingInfo | null>(
+		null,
+	);
 	const [addingBinding, setAddingBinding] = useState(false);
 	const [bindingForm, setBindingForm] = useState({
 		agent_id: "main",
@@ -60,7 +85,8 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 		staleTime: 10_000,
 	});
 
-	const platformBindings = bindingsData?.bindings?.filter((b) => b.channel === platform) ?? [];
+	const platformBindings =
+		bindingsData?.bindings?.filter((b) => b.channel === platform) ?? [];
 
 	// Mutations
 	const saveCreds = useMutation({
@@ -75,7 +101,8 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 				setMessage({text: result.message, type: "error"});
 			}
 		},
-		onError: (error) => setMessage({text: `Failed: ${error.message}`, type: "error"}),
+		onError: (error) =>
+			setMessage({text: `Failed: ${error.message}`, type: "error"}),
 	});
 
 	const addBinding = useMutation({
@@ -90,7 +117,8 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 				setMessage({text: result.message, type: "error"});
 			}
 		},
-		onError: (error) => setMessage({text: `Failed: ${error.message}`, type: "error"}),
+		onError: (error) =>
+			setMessage({text: `Failed: ${error.message}`, type: "error"}),
 	});
 
 	const updateBinding = useMutation({
@@ -105,7 +133,8 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 				setMessage({text: result.message, type: "error"});
 			}
 		},
-		onError: (error) => setMessage({text: `Failed: ${error.message}`, type: "error"}),
+		onError: (error) =>
+			setMessage({text: `Failed: ${error.message}`, type: "error"}),
 	});
 
 	const deleteBinding = useMutation({
@@ -118,7 +147,8 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 				setMessage({text: result.message, type: "error"});
 			}
 		},
-		onError: (error) => setMessage({text: `Failed: ${error.message}`, type: "error"}),
+		onError: (error) =>
+			setMessage({text: `Failed: ${error.message}`, type: "error"}),
 	});
 
 	const disconnect = useMutation({
@@ -129,11 +159,20 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 			queryClient.invalidateQueries({queryKey: ["bindings"]});
 			onOpenChange(false);
 		},
-		onError: (error) => setMessage({text: `Failed: ${error.message}`, type: "error"}),
+		onError: (error) =>
+			setMessage({text: `Failed: ${error.message}`, type: "error"}),
 	});
 
 	function resetBindingForm() {
-		setBindingForm({agent_id: agentsData?.agents?.[0]?.id ?? "main", guild_id: "", workspace_id: "", chat_id: "", channel_ids: [], require_mention: false, dm_allowed_users: []});
+		setBindingForm({
+			agent_id: agentsData?.agents?.[0]?.id ?? "main",
+			guild_id: "",
+			workspace_id: "",
+			chat_id: "",
+			channel_ids: [],
+			require_mention: false,
+			dm_allowed_users: [],
+		});
 	}
 
 	function handleClose() {
@@ -150,18 +189,30 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 		const request: any = {agent_id: "main", channel: platform};
 		if (platform === "discord") {
 			if (!credentialInputs.discord_token?.trim()) return;
-			request.platform_credentials = {discord_token: credentialInputs.discord_token.trim()};
+			request.platform_credentials = {
+				discord_token: credentialInputs.discord_token.trim(),
+			};
 		} else if (platform === "slack") {
-			if (!credentialInputs.slack_bot_token?.trim() || !credentialInputs.slack_app_token?.trim()) return;
+			if (
+				!credentialInputs.slack_bot_token?.trim() ||
+				!credentialInputs.slack_app_token?.trim()
+			)
+				return;
 			request.platform_credentials = {
 				slack_bot_token: credentialInputs.slack_bot_token.trim(),
 				slack_app_token: credentialInputs.slack_app_token.trim(),
 			};
 		} else if (platform === "telegram") {
 			if (!credentialInputs.telegram_token?.trim()) return;
-			request.platform_credentials = {telegram_token: credentialInputs.telegram_token.trim()};
+			request.platform_credentials = {
+				telegram_token: credentialInputs.telegram_token.trim(),
+			};
 		} else if (platform === "twitch") {
-			if (!credentialInputs.twitch_username?.trim() || !credentialInputs.twitch_oauth_token?.trim()) return;
+			if (
+				!credentialInputs.twitch_username?.trim() ||
+				!credentialInputs.twitch_oauth_token?.trim()
+			)
+				return;
 			request.platform_credentials = {
 				twitch_username: credentialInputs.twitch_username.trim(),
 				twitch_oauth_token: credentialInputs.twitch_oauth_token.trim(),
@@ -209,12 +260,18 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 
 	function handleAddBinding() {
 		const request: any = {agent_id: bindingForm.agent_id, channel: platform};
-		if (platform === "discord" && bindingForm.guild_id.trim()) request.guild_id = bindingForm.guild_id.trim();
-		if (platform === "slack" && bindingForm.workspace_id.trim()) request.workspace_id = bindingForm.workspace_id.trim();
-		if (platform === "telegram" && bindingForm.chat_id.trim()) request.chat_id = bindingForm.chat_id.trim();
-		if (bindingForm.channel_ids.length > 0) request.channel_ids = bindingForm.channel_ids;
-		if (platform === "discord" && bindingForm.require_mention) request.require_mention = true;
-		if (bindingForm.dm_allowed_users.length > 0) request.dm_allowed_users = bindingForm.dm_allowed_users;
+		if (platform === "discord" && bindingForm.guild_id.trim())
+			request.guild_id = bindingForm.guild_id.trim();
+		if (platform === "slack" && bindingForm.workspace_id.trim())
+			request.workspace_id = bindingForm.workspace_id.trim();
+		if (platform === "telegram" && bindingForm.chat_id.trim())
+			request.chat_id = bindingForm.chat_id.trim();
+		if (bindingForm.channel_ids.length > 0)
+			request.channel_ids = bindingForm.channel_ids;
+		if (platform === "discord" && bindingForm.require_mention)
+			request.require_mention = true;
+		if (bindingForm.dm_allowed_users.length > 0)
+			request.dm_allowed_users = bindingForm.dm_allowed_users;
 		addBinding.mutate(request);
 	}
 
@@ -229,11 +286,15 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 			agent_id: bindingForm.agent_id,
 			channel: platform,
 		};
-		if (platform === "discord" && bindingForm.guild_id.trim()) request.guild_id = bindingForm.guild_id.trim();
-		if (platform === "slack" && bindingForm.workspace_id.trim()) request.workspace_id = bindingForm.workspace_id.trim();
-		if (platform === "telegram" && bindingForm.chat_id.trim()) request.chat_id = bindingForm.chat_id.trim();
+		if (platform === "discord" && bindingForm.guild_id.trim())
+			request.guild_id = bindingForm.guild_id.trim();
+		if (platform === "slack" && bindingForm.workspace_id.trim())
+			request.workspace_id = bindingForm.workspace_id.trim();
+		if (platform === "telegram" && bindingForm.chat_id.trim())
+			request.chat_id = bindingForm.chat_id.trim();
 		request.channel_ids = bindingForm.channel_ids;
-		request.require_mention = platform === "discord" ? bindingForm.require_mention : false;
+		request.require_mention =
+			platform === "discord" ? bindingForm.require_mention : false;
 		request.dm_allowed_users = bindingForm.dm_allowed_users;
 		updateBinding.mutate(request);
 	}
@@ -263,15 +324,26 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 	const isEditingOrAdding = editingBinding !== null || addingBinding;
 
 	return (
-		<Dialog open={open} onOpenChange={(v) => { if (!v) handleClose(); }}>
+		<DialogRoot
+			open={open}
+			onOpenChange={(v) => {
+				if (!v) handleClose();
+			}}
+		>
 			<DialogContent className="max-w-md max-h-[80vh] overflow-y-auto">
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
-						<PlatformIcon platform={platform} size="1x" className="text-ink-faint" />
+						<PlatformIcon
+							platform={platform}
+							size="1x"
+							className="text-ink-faint"
+						/>
 						{name}
 					</DialogTitle>
 					<DialogDescription>
-						{configured ? `Manage ${name} connection and bindings.` : `Connect ${name} to Spacebot.`}
+						{configured
+							? `Manage ${name} connection and bindings.`
+							: `Connect ${name} to Spacebot.`}
 					</DialogDescription>
 				</DialogHeader>
 
@@ -283,13 +355,26 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 
 					{platform === "discord" && (
 						<div>
-							<label className="mb-1.5 block text-sm font-medium text-ink-dull">Bot Token</label>
+							<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+								Bot Token
+							</label>
 							<Input
 								type="password"
 								value={credentialInputs.discord_token ?? ""}
-								onChange={(e) => setCredentialInputs({...credentialInputs, discord_token: e.target.value})}
-								placeholder={configured ? "Enter new token to update" : "MTk4NjIyNDgzNDcxOTI1MjQ4.D..."}
-								onKeyDown={(e) => { if (e.key === "Enter") handleSaveCredentials(); }}
+								onChange={(e) =>
+									setCredentialInputs({
+										...credentialInputs,
+										discord_token: e.target.value,
+									})
+								}
+								placeholder={
+									configured
+										? "Enter new token to update"
+										: "MTk4NjIyNDgzNDcxOTI1MjQ4.D..."
+								}
+								onKeyDown={(e) => {
+									if (e.key === "Enter") handleSaveCredentials();
+								}}
 							/>
 						</div>
 					)}
@@ -297,22 +382,42 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 					{platform === "slack" && (
 						<>
 							<div>
-								<label className="mb-1.5 block text-sm font-medium text-ink-dull">Bot Token</label>
+								<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+									Bot Token
+								</label>
 								<Input
 									type="password"
 									value={credentialInputs.slack_bot_token ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, slack_bot_token: e.target.value})}
-									placeholder={configured ? "Enter new token to update" : "xoxb-..."}
+									onChange={(e) =>
+										setCredentialInputs({
+											...credentialInputs,
+											slack_bot_token: e.target.value,
+										})
+									}
+									placeholder={
+										configured ? "Enter new token to update" : "xoxb-..."
+									}
 								/>
 							</div>
 							<div>
-								<label className="mb-1.5 block text-sm font-medium text-ink-dull">App Token</label>
+								<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+									App Token
+								</label>
 								<Input
 									type="password"
 									value={credentialInputs.slack_app_token ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, slack_app_token: e.target.value})}
-									placeholder={configured ? "Enter new token to update" : "xapp-..."}
-									onKeyDown={(e) => { if (e.key === "Enter") handleSaveCredentials(); }}
+									onChange={(e) =>
+										setCredentialInputs({
+											...credentialInputs,
+											slack_app_token: e.target.value,
+										})
+									}
+									placeholder={
+										configured ? "Enter new token to update" : "xapp-..."
+									}
+									onKeyDown={(e) => {
+										if (e.key === "Enter") handleSaveCredentials();
+									}}
 								/>
 							</div>
 						</>
@@ -320,13 +425,26 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 
 					{platform === "telegram" && (
 						<div>
-							<label className="mb-1.5 block text-sm font-medium text-ink-dull">Bot Token</label>
+							<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+								Bot Token
+							</label>
 							<Input
 								type="password"
 								value={credentialInputs.telegram_token ?? ""}
-								onChange={(e) => setCredentialInputs({...credentialInputs, telegram_token: e.target.value})}
-								placeholder={configured ? "Enter new token to update" : "123456789:ABCdefGHI..."}
-								onKeyDown={(e) => { if (e.key === "Enter") handleSaveCredentials(); }}
+								onChange={(e) =>
+									setCredentialInputs({
+										...credentialInputs,
+										telegram_token: e.target.value,
+									})
+								}
+								placeholder={
+									configured
+										? "Enter new token to update"
+										: "123456789:ABCdefGHI..."
+								}
+								onKeyDown={(e) => {
+									if (e.key === "Enter") handleSaveCredentials();
+								}}
 							/>
 						</div>
 					)}
@@ -334,59 +452,119 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 					{platform === "twitch" && (
 						<>
 							<div>
-								<label className="mb-1.5 block text-sm font-medium text-ink-dull">Bot Username</label>
+								<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+									Bot Username
+								</label>
 								<Input
 									value={credentialInputs.twitch_username ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, twitch_username: e.target.value})}
-									placeholder={configured ? "Enter new username to update" : "my_bot"}
+									onChange={(e) =>
+										setCredentialInputs({
+											...credentialInputs,
+											twitch_username: e.target.value,
+										})
+									}
+									placeholder={
+										configured ? "Enter new username to update" : "my_bot"
+									}
 								/>
 							</div>
 							<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
 								<div>
-									<label className="mb-1.5 block text-sm font-medium text-ink-dull">Client ID</label>
+									<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+										Client ID
+									</label>
 									<Input
 										value={credentialInputs.twitch_client_id ?? ""}
-										onChange={(e) => setCredentialInputs({...credentialInputs, twitch_client_id: e.target.value})}
-										placeholder={configured ? "Enter new client id to update" : "your-app-client-id"}
+										onChange={(e) =>
+											setCredentialInputs({
+												...credentialInputs,
+												twitch_client_id: e.target.value,
+											})
+										}
+										placeholder={
+											configured
+												? "Enter new client id to update"
+												: "your-app-client-id"
+										}
 									/>
 								</div>
 								<div>
-									<label className="mb-1.5 block text-sm font-medium text-ink-dull">Client Secret</label>
+									<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+										Client Secret
+									</label>
 									<Input
 										type="password"
 										value={credentialInputs.twitch_client_secret ?? ""}
-										onChange={(e) => setCredentialInputs({...credentialInputs, twitch_client_secret: e.target.value})}
-										placeholder={configured ? "Enter new client secret to update" : "your-app-client-secret"}
+										onChange={(e) =>
+											setCredentialInputs({
+												...credentialInputs,
+												twitch_client_secret: e.target.value,
+											})
+										}
+										placeholder={
+											configured
+												? "Enter new client secret to update"
+												: "your-app-client-secret"
+										}
 									/>
 								</div>
 							</div>
 							<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
 								<div>
-									<label className="mb-1.5 block text-sm font-medium text-ink-dull">OAuth Access Token</label>
+									<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+										OAuth Access Token
+									</label>
 									<Input
 										type="password"
 										value={credentialInputs.twitch_oauth_token ?? ""}
-										onChange={(e) => setCredentialInputs({...credentialInputs, twitch_oauth_token: e.target.value})}
-										placeholder={configured ? "Enter new token to update" : "abcd1234..."}
-										onKeyDown={(e) => { if (e.key === "Enter") handleSaveCredentials(); }}
+										onChange={(e) =>
+											setCredentialInputs({
+												...credentialInputs,
+												twitch_oauth_token: e.target.value,
+											})
+										}
+										placeholder={
+											configured ? "Enter new token to update" : "abcd1234..."
+										}
+										onKeyDown={(e) => {
+											if (e.key === "Enter") handleSaveCredentials();
+										}}
 									/>
 								</div>
 								<div>
-									<label className="mb-1.5 block text-sm font-medium text-ink-dull">OAuth Refresh Token</label>
+									<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+										OAuth Refresh Token
+									</label>
 									<Input
 										type="password"
 										value={credentialInputs.twitch_refresh_token ?? ""}
-										onChange={(e) => setCredentialInputs({...credentialInputs, twitch_refresh_token: e.target.value})}
-										placeholder={configured ? "Enter new refresh token to update" : "refresh-token-from-twitch"}
+										onChange={(e) =>
+											setCredentialInputs({
+												...credentialInputs,
+												twitch_refresh_token: e.target.value,
+											})
+										}
+										placeholder={
+											configured
+												? "Enter new refresh token to update"
+												: "refresh-token-from-twitch"
+										}
 									/>
 								</div>
 							</div>
 							<p className="mt-1.5 text-xs text-ink-faint">
-								Use tokens from your Twitch application with chat:read and chat:write scopes enabled. Tokens are stored in your Spacebot instance and refreshed automatically while running.
+								Use tokens from your Twitch application with chat:read and
+								chat:write scopes enabled. Tokens are stored in your Spacebot
+								instance and refreshed automatically while running.
 							</p>
 							<p className="mt-1.5 text-xs text-ink-faint">
 								Need help?{" "}
-								<a href="https://docs.spacebot.sh/twitch-setup" target="_blank" rel="noopener noreferrer" className="text-accent hover:underline">
+								<a
+									href="https://docs.spacebot.sh/twitch-setup"
+									target="_blank"
+									rel="noopener noreferrer"
+									className="text-accent hover:underline"
+								>
 									Read the Twitch setup docs &rarr;
 								</a>
 							</p>
@@ -397,42 +575,77 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 						<>
 							<div className="space-y-3">
 								<div>
-									<label className="mb-1.5 block text-sm font-medium text-ink-dull">HTTP URL</label>
-								<Input
-									value={credentialInputs.signal_http_url ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, signal_http_url: e.target.value})}
-									placeholder="http://127.0.0.1:8686"
-									onKeyDown={(e) => { if (e.key === "Enter") handleSaveCredentials(); }}
-								/>
+									<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+										HTTP URL
+									</label>
+									<Input
+										value={credentialInputs.signal_http_url ?? ""}
+										onChange={(e) =>
+											setCredentialInputs({
+												...credentialInputs,
+												signal_http_url: e.target.value,
+											})
+										}
+										placeholder="http://127.0.0.1:8686"
+										onKeyDown={(e) => {
+											if (e.key === "Enter") handleSaveCredentials();
+										}}
+									/>
 								</div>
 								<div>
-									<label className="mb-1.5 block text-sm font-medium text-ink-dull">Account Phone Number</label>
-								<Input
-									value={credentialInputs.signal_account ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, signal_account: e.target.value})}
-									placeholder="+1234567890"
-									onKeyDown={(e) => { if (e.key === "Enter") handleSaveCredentials(); }}
-								/>
+									<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+										Account Phone Number
+									</label>
+									<Input
+										value={credentialInputs.signal_account ?? ""}
+										onChange={(e) =>
+											setCredentialInputs({
+												...credentialInputs,
+												signal_account: e.target.value,
+											})
+										}
+										placeholder="+1234567890"
+										onKeyDown={(e) => {
+											if (e.key === "Enter") handleSaveCredentials();
+										}}
+									/>
 									<p className="mt-1 text-xs text-ink-faint">
-										Your Signal phone number in E.164 format (+ followed by 6-15 digits, first digit 1-9)
+										Your Signal phone number in E.164 format (+ followed by 6-15
+										digits, first digit 1-9)
 									</p>
 								</div>
 								<div>
-									<label className="mb-1.5 block text-sm font-medium text-ink-dull">DM Allowed Users (Optional)</label>
-								<Input
-									value={credentialInputs.signal_dm_allowed_users ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, signal_dm_allowed_users: e.target.value})}
-									placeholder="+1234567890, +1987654321"
-									onKeyDown={(e) => { if (e.key === "Enter") handleSaveCredentials(); }}
-								/>
+									<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+										DM Allowed Users (Optional)
+									</label>
+									<Input
+										value={credentialInputs.signal_dm_allowed_users ?? ""}
+										onChange={(e) =>
+											setCredentialInputs({
+												...credentialInputs,
+												signal_dm_allowed_users: e.target.value,
+											})
+										}
+										placeholder="+1234567890, +1987654321"
+										onKeyDown={(e) => {
+											if (e.key === "Enter") handleSaveCredentials();
+										}}
+									/>
 									<p className="mt-1 text-xs text-ink-faint">
-										Allowed DM senders: E.164 phone numbers (+1234567890) or uuid:xxx identifiers. Comma-separated. If empty, DMs are blocked.
+										Allowed DM senders: E.164 phone numbers (+1234567890) or
+										uuid:xxx identifiers. Comma-separated. If empty, DMs are
+										blocked.
 									</p>
 								</div>
 							</div>
 							<p className="mt-3 text-xs text-ink-faint">
 								Need help?{" "}
-								<a href="https://docs.spacebot.sh/signal-setup" target="_blank" rel="noopener noreferrer" className="text-accent hover:underline">
+								<a
+									href="https://docs.spacebot.sh/signal-setup"
+									target="_blank"
+									rel="noopener noreferrer"
+									className="text-accent hover:underline"
+								>
 									Read the Signal setup docs &rarr;
 								</a>
 							</p>
@@ -445,11 +658,17 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 						</p>
 					)}
 
-					{platform !== "webhook" && (Object.values(credentialInputs).some((v) => v?.trim()) || credentialInputs.signal_dm_allowed_users === "") && (
-						<Button onClick={handleSaveCredentials} loading={saveCreds.isPending} size="sm">
-							{configured ? "Update Credentials" : "Connect"}
-						</Button>
-					)}
+					{platform !== "webhook" &&
+						(Object.values(credentialInputs).some((v) => v?.trim()) ||
+							credentialInputs.signal_dm_allowed_users === "") && (
+							<Button
+								onClick={handleSaveCredentials}
+								loading={saveCreds.isPending}
+								size="sm"
+							>
+								{configured ? "Update Credentials" : "Connect"}
+							</Button>
+						)}
 				</div>
 
 				{/* -- Bindings -- */}
@@ -477,25 +696,58 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 						{!isEditingOrAdding && platformBindings.length > 0 && (
 							<div className="rounded-md border border-app-line">
 								{platformBindings.map((binding, idx) => (
-									<div key={idx} className="flex items-center gap-2 border-b border-app-line/50 px-3 py-2 last:border-b-0">
+									<div
+										key={idx}
+										className="flex items-center gap-2 border-b border-app-line/50 px-3 py-2 last:border-b-0"
+									>
 										<div className="flex-1 min-w-0">
-											<span className="text-sm text-ink">{binding.agent_id}</span>
+											<span className="text-sm text-ink">
+												{binding.agent_id}
+											</span>
 											<div className="flex flex-wrap gap-1.5 mt-0.5 text-tiny text-ink-faint">
-												{binding.guild_id && <span>Guild: {binding.guild_id}</span>}
-												{binding.workspace_id && <span>Workspace: {binding.workspace_id}</span>}
-												{binding.chat_id && <span>Chat: {binding.chat_id}</span>}
-												{binding.channel_ids.length > 0 && <span>{binding.channel_ids.length} channel{binding.channel_ids.length > 1 ? "s" : ""}</span>}
+												{binding.guild_id && (
+													<span>Guild: {binding.guild_id}</span>
+												)}
+												{binding.workspace_id && (
+													<span>Workspace: {binding.workspace_id}</span>
+												)}
+												{binding.chat_id && (
+													<span>Chat: {binding.chat_id}</span>
+												)}
+												{binding.channel_ids.length > 0 && (
+													<span>
+														{binding.channel_ids.length} channel
+														{binding.channel_ids.length > 1 ? "s" : ""}
+													</span>
+												)}
 												{binding.require_mention && <span>Mention only</span>}
-												{binding.dm_allowed_users.length > 0 && <span>{binding.dm_allowed_users.length} DM user{binding.dm_allowed_users.length > 1 ? "s" : ""}</span>}
-												{!binding.guild_id && !binding.workspace_id && !binding.chat_id && binding.channel_ids.length === 0 && (
-													<span>All conversations</span>
+												{binding.dm_allowed_users.length > 0 && (
+													<span>
+														{binding.dm_allowed_users.length} DM user
+														{binding.dm_allowed_users.length > 1 ? "s" : ""}
+													</span>
 												)}
+												{!binding.guild_id &&
+													!binding.workspace_id &&
+													!binding.chat_id &&
+													binding.channel_ids.length === 0 && (
+														<span>All conversations</span>
+													)}
 											</div>
 										</div>
-										<Button size="sm" variant="ghost" onClick={() => startEditBinding(binding)}>
+										<Button
+											size="sm"
+											variant="bare"
+											onClick={() => startEditBinding(binding)}
+										>
 											Edit
 										</Button>
-										<Button size="sm" variant="ghost" onClick={() => handleDeleteBinding(binding)} loading={deleteBinding.isPending}>
+										<Button
+											size="sm"
+											variant="bare"
+											onClick={() => handleDeleteBinding(binding)}
+											loading={deleteBinding.isPending}
+										>
 											Remove
 										</Button>
 									</div>
@@ -511,25 +763,43 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 
 						{/* Add/Edit binding form */}
 						{isEditingOrAdding && (
-							<div className="flex flex-col gap-3 rounded-md border border-app-line bg-app-darkBox/30 p-3">
+							<div className="flex flex-col gap-3 rounded-md border border-app-line bg-app-dark-box/30 p-3">
 								<div>
-									<label className="mb-1 block text-sm font-medium text-ink-dull">Agent</label>
-									<Select value={bindingForm.agent_id} onValueChange={(v) => setBindingForm({...bindingForm, agent_id: v})}>
-										<SelectTrigger><SelectValue /></SelectTrigger>
+									<label className="mb-1 block text-sm font-medium text-ink-dull">
+										Agent
+									</label>
+									<SelectRoot
+										value={bindingForm.agent_id}
+										onValueChange={(v) =>
+											setBindingForm({...bindingForm, agent_id: v})
+										}
+									>
+										<SelectTrigger>
+											<SelectValue />
+										</SelectTrigger>
 										<SelectContent>
 											{agentsData?.agents?.map((a) => (
-												<SelectItem key={a.id} value={a.id}>{a.id}</SelectItem>
+												<SelectItem key={a.id} value={a.id}>
+													{a.id}
+												</SelectItem>
 											)) ?? <SelectItem value="main">main</SelectItem>}
 										</SelectContent>
-									</Select>
+									</SelectRoot>
 								</div>
 
 								{platform === "discord" && (
 									<div>
-										<label className="mb-1 block text-sm font-medium text-ink-dull">Guild ID</label>
+										<label className="mb-1 block text-sm font-medium text-ink-dull">
+											Guild ID
+										</label>
 										<Input
 											value={bindingForm.guild_id}
-											onChange={(e) => setBindingForm({...bindingForm, guild_id: e.target.value})}
+											onChange={(e) =>
+												setBindingForm({
+													...bindingForm,
+													guild_id: e.target.value,
+												})
+											}
 											placeholder="Optional — leave empty for all servers"
 										/>
 									</div>
@@ -537,10 +807,17 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 
 								{platform === "slack" && (
 									<div>
-										<label className="mb-1 block text-sm font-medium text-ink-dull">Workspace ID</label>
+										<label className="mb-1 block text-sm font-medium text-ink-dull">
+											Workspace ID
+										</label>
 										<Input
 											value={bindingForm.workspace_id}
-											onChange={(e) => setBindingForm({...bindingForm, workspace_id: e.target.value})}
+											onChange={(e) =>
+												setBindingForm({
+													...bindingForm,
+													workspace_id: e.target.value,
+												})
+											}
 											placeholder="Optional — leave empty for all workspaces"
 										/>
 									</div>
@@ -548,10 +825,17 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 
 								{platform === "telegram" && (
 									<div>
-										<label className="mb-1 block text-sm font-medium text-ink-dull">Chat ID</label>
+										<label className="mb-1 block text-sm font-medium text-ink-dull">
+											Chat ID
+										</label>
 										<Input
 											value={bindingForm.chat_id}
-											onChange={(e) => setBindingForm({...bindingForm, chat_id: e.target.value})}
+											onChange={(e) =>
+												setBindingForm({
+													...bindingForm,
+													chat_id: e.target.value,
+												})
+											}
 											placeholder="Optional — leave empty for all chats"
 										/>
 									</div>
@@ -559,10 +843,14 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 
 								{(platform === "discord" || platform === "slack") && (
 									<div>
-										<label className="mb-1 block text-sm font-medium text-ink-dull">Channel IDs</label>
+										<label className="mb-1 block text-sm font-medium text-ink-dull">
+											Channel IDs
+										</label>
 										<TagInput
 											value={bindingForm.channel_ids}
-											onChange={(ids) => setBindingForm({...bindingForm, channel_ids: ids})}
+											onChange={(ids) =>
+												setBindingForm({...bindingForm, channel_ids: ids})
+											}
 											placeholder="Add channel ID..."
 										/>
 									</div>
@@ -574,31 +862,49 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 											<input
 												type="checkbox"
 												checked={bindingForm.require_mention}
-												onChange={(e) => setBindingForm({...bindingForm, require_mention: e.target.checked})}
+												onChange={(e) =>
+													setBindingForm({
+														...bindingForm,
+														require_mention: e.target.checked,
+													})
+												}
 												className="h-4 w-4 rounded border-app-line bg-app-box"
 											/>
 											Require @mention or reply to bot
 										</label>
-										<p className="mt-1.5 text-xs text-ink-faint">Blocks messages entirely — the agent won't see them at all. To let the agent read all messages but only respond to commands, mentions, or replies, use Mention Only mode in Channels settings (cog icon).</p>
+										<p className="mt-1.5 text-xs text-ink-faint">
+											Blocks messages entirely — the agent won't see them at
+											all. To let the agent read all messages but only respond
+											to commands, mentions, or replies, use Mention Only mode
+											in Channels settings (cog icon).
+										</p>
 									</div>
 								)}
 
 								{platform === "twitch" && (
 									<div>
-										<label className="mb-1 block text-sm font-medium text-ink-dull">Channels</label>
+										<label className="mb-1 block text-sm font-medium text-ink-dull">
+											Channels
+										</label>
 										<TagInput
 											value={bindingForm.channel_ids}
-											onChange={(ids) => setBindingForm({...bindingForm, channel_ids: ids})}
+											onChange={(ids) =>
+												setBindingForm({...bindingForm, channel_ids: ids})
+											}
 											placeholder="Add channel name..."
 										/>
 									</div>
 								)}
 
 								<div>
-									<label className="mb-1 block text-sm font-medium text-ink-dull">DM Allowed Users</label>
+									<label className="mb-1 block text-sm font-medium text-ink-dull">
+										DM Allowed Users
+									</label>
 									<TagInput
 										value={bindingForm.dm_allowed_users}
-										onChange={(users) => setBindingForm({...bindingForm, dm_allowed_users: users})}
+										onChange={(users) =>
+											setBindingForm({...bindingForm, dm_allowed_users: users})
+										}
 										placeholder="Add user ID..."
 									/>
 								</div>
@@ -606,15 +912,25 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 								<div className="flex gap-2 justify-end">
 									<Button
 										size="sm"
-										variant="ghost"
-										onClick={() => { setEditingBinding(null); setAddingBinding(false); setMessage(null); }}
+										variant="bare"
+										onClick={() => {
+											setEditingBinding(null);
+											setAddingBinding(false);
+											setMessage(null);
+										}}
 									>
 										Cancel
 									</Button>
 									<Button
 										size="sm"
-										onClick={editingBinding ? handleUpdateBinding : handleAddBinding}
-										loading={editingBinding ? updateBinding.isPending : addBinding.isPending}
+										onClick={
+											editingBinding ? handleUpdateBinding : handleAddBinding
+										}
+										loading={
+											editingBinding
+												? updateBinding.isPending
+												: addBinding.isPending
+										}
 									>
 										{editingBinding ? "Update" : "Add Binding"}
 									</Button>
@@ -626,11 +942,13 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 
 				{/* -- Status message -- */}
 				{message && (
-					<div className={`rounded-md border px-3 py-2 text-sm ${
-						message.type === "success"
-							? "border-green-500/20 bg-green-500/10 text-green-400"
-							: "border-red-500/20 bg-red-500/10 text-red-400"
-					}`}>
+					<div
+						className={`rounded-md border px-3 py-2 text-sm ${
+							message.type === "success"
+								? "border-green-500/20 bg-green-500/10 text-green-400"
+								: "border-red-500/20 bg-red-500/10 text-red-400"
+						}`}
+					>
 						{message.text}
 					</div>
 				)}
@@ -639,19 +957,34 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 				{configured && platform !== "webhook" && (
 					<div className="border-t border-app-line pt-4">
 						{!confirmDisconnect ? (
-							<Button variant="ghost" size="sm" onClick={() => setConfirmDisconnect(true)} className="text-red-400 hover:text-red-300">
+							<Button
+								variant="bare"
+								size="sm"
+								onClick={() => setConfirmDisconnect(true)}
+								className="text-red-400 hover:text-red-300"
+							>
 								Disconnect {name}
 							</Button>
 						) : (
 							<div className="flex flex-col gap-2">
 								<p className="text-sm text-red-400">
-									This will remove all credentials and bindings for {name}. The bot will stop responding immediately.
+									This will remove all credentials and bindings for {name}. The
+									bot will stop responding immediately.
 								</p>
 								<div className="flex gap-2">
-									<Button variant="ghost" size="sm" onClick={() => setConfirmDisconnect(false)}>
+									<Button
+										variant="bare"
+										size="sm"
+										onClick={() => setConfirmDisconnect(false)}
+									>
 										Cancel
 									</Button>
-									<Button size="sm" onClick={() => disconnect.mutate()} loading={disconnect.isPending} className="bg-red-500/20 text-red-400 hover:bg-red-500/30">
+									<Button
+										size="sm"
+										onClick={() => disconnect.mutate()}
+										loading={disconnect.isPending}
+										className="bg-red-500/20 text-red-400 hover:bg-red-500/30"
+									>
 										Confirm Disconnect
 									</Button>
 								</div>
@@ -660,6 +993,6 @@ export function ChannelEditModal({platform, name, status, open, onOpenChange}: C
 					</div>
 				)}
 			</DialogContent>
-		</Dialog>
+		</DialogRoot>
 	);
 }
diff --git a/interface/src/components/ChannelSettingCard.tsx b/interface/src/components/ChannelSettingCard.tsx
index aefe82cb9..3f45baacd 100644
--- a/interface/src/components/ChannelSettingCard.tsx
+++ b/interface/src/components/ChannelSettingCard.tsx
@@ -10,25 +10,37 @@ import {
 import {
 	Button,
 	Input,
-	Select,
+	SelectRoot,
 	SelectTrigger,
 	SelectValue,
 	SelectContent,
 	SelectItem,
-	Dialog,
+	DialogRoot,
 	DialogContent,
 	DialogHeader,
 	DialogTitle,
 	DialogFooter,
-	Toggle,
-} from "@/ui";
+} from "@spacedrive/primitives";
+import {Switch} from "@spacedrive/primitives";
 import {PlatformIcon} from "@/lib/platformIcons";
-import {isValidE164, E164_ERROR_TEXT, validateSignalDmAllowedUsers} from "@/lib/format";
+import {
+	isValidE164,
+	E164_ERROR_TEXT,
+	validateSignalDmAllowedUsers,
+} from "@/lib/format";
 import {TagInput} from "@/components/TagInput";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faChevronDown, faPlus} from "@fortawesome/free-solid-svg-icons";
 
-type Platform = "discord" | "slack" | "telegram" | "twitch" | "email" | "webhook" | "mattermost" | "signal";
+type Platform =
+	| "discord"
+	| "slack"
+	| "telegram"
+	| "twitch"
+	| "email"
+	| "webhook"
+	| "mattermost"
+	| "signal";
 
 const PLATFORM_LABELS: Record<Platform, string> = {
 	discord: "Discord",
@@ -89,8 +101,14 @@ export function PlatformCatalog({onAddInstance}: PlatformCatalogProps) {
 					onClick={() => onAddInstance(platform)}
 					className="flex items-center gap-2.5 rounded-md px-3 py-2 text-left hover:bg-app-hover transition-colors group"
 				>
-					<PlatformIcon platform={platform} size="sm" className="text-ink-faint" />
-					<span className="flex-1 text-sm text-ink">{PLATFORM_LABELS[platform]}</span>
+					<PlatformIcon
+						platform={platform}
+						size="sm"
+						className="text-ink-faint"
+					/>
+					<span className="flex-1 text-sm text-ink">
+						{PLATFORM_LABELS[platform]}
+					</span>
 					<FontAwesomeIcon
 						icon={faPlus}
 						className="text-ink-faint opacity-0 group-hover:opacity-100 transition-opacity text-xs"
@@ -106,7 +124,11 @@ export function PlatformCatalog({onAddInstance}: PlatformCatalogProps) {
 					key={platform}
 					className="flex items-center gap-2.5 rounded-md px-3 py-2 opacity-40"
 				>
-					<PlatformIcon platform={platform} size="sm" className="text-ink-faint/50" />
+					<PlatformIcon
+						platform={platform}
+						size="sm"
+						className="text-ink-faint/50"
+					/>
 					<span className="flex-1 text-sm text-ink-dull">{name}</span>
 				</div>
 			))}
@@ -122,11 +144,20 @@ interface InstanceCardProps {
 	onToggleExpand: () => void;
 }
 
-export function InstanceCard({instance, expanded, onToggleExpand}: InstanceCardProps) {
+export function InstanceCard({
+	instance,
+	expanded,
+	onToggleExpand,
+}: InstanceCardProps) {
 	const queryClient = useQueryClient();
-	const [message, setMessage] = useState<{text: string; type: "success" | "error"} | null>(null);
+	const [message, setMessage] = useState<{
+		text: string;
+		type: "success" | "error";
+	} | null>(null);
 	const [confirmRemove, setConfirmRemove] = useState(false);
-	const [editingBinding, setEditingBinding] = useState<BindingInfo | null>(null);
+	const [editingBinding, setEditingBinding] = useState<BindingInfo | null>(
+		null,
+	);
 	const [addingBinding, setAddingBinding] = useState(false);
 	const [bindingForm, setBindingForm] = useState({
 		agent_id: "main",
@@ -170,7 +201,8 @@ export function InstanceCard({instance, expanded, onToggleExpand}: InstanceCardP
 		onSuccess: () => {
 			queryClient.invalidateQueries({queryKey: ["messaging-status"]});
 		},
-		onError: (error) => setMessage({text: `Failed: ${error.message}`, type: "error"}),
+		onError: (error) =>
+			setMessage({text: `Failed: ${error.message}`, type: "error"}),
 	});
 
 	const deleteInstance = useMutation({
@@ -185,7 +217,8 @@ export function InstanceCard({instance, expanded, onToggleExpand}: InstanceCardP
 				setMessage({text: result.message, type: "error"});
 			}
 		},
-		onError: (error) => setMessage({text: `Failed: ${error.message}`, type: "error"}),
+		onError: (error) =>
+			setMessage({text: `Failed: ${error.message}`, type: "error"}),
 	});
 
 	const addBindingMutation = useMutation({
@@ -201,7 +234,8 @@ export function InstanceCard({instance, expanded, onToggleExpand}: InstanceCardP
 				setMessage({text: result.message, type: "error"});
 			}
 		},
-		onError: (error) => setMessage({text: `Failed: ${error.message}`, type: "error"}),
+		onError: (error) =>
+			setMessage({text: `Failed: ${error.message}`, type: "error"}),
 	});
 
 	const updateBindingMutation = useMutation({
@@ -217,7 +251,8 @@ export function InstanceCard({instance, expanded, onToggleExpand}: InstanceCardP
 				setMessage({text: result.message, type: "error"});
 			}
 		},
-		onError: (error) => setMessage({text: `Failed: ${error.message}`, type: "error"}),
+		onError: (error) =>
+			setMessage({text: `Failed: ${error.message}`, type: "error"}),
 	});
 
 	const deleteBindingMutation = useMutation({
@@ -231,7 +266,8 @@ export function InstanceCard({instance, expanded, onToggleExpand}: InstanceCardP
 				setMessage({text: result.message, type: "error"});
 			}
 		},
-		onError: (error) => setMessage({text: `Failed: ${error.message}`, type: "error"}),
+		onError: (error) =>
+			setMessage({text: `Failed: ${error.message}`, type: "error"}),
 	});
 
 	function resetBindingForm() {
@@ -292,7 +328,8 @@ export function InstanceCard({instance, expanded, onToggleExpand}: InstanceCardP
 		if (platform === "telegram" && bindingForm.chat_id.trim())
 			request.chat_id = bindingForm.chat_id.trim();
 		request.channel_ids = bindingForm.channel_ids;
-		request.require_mention = platform === "discord" ? bindingForm.require_mention : false;
+		request.require_mention =
+			platform === "discord" ? bindingForm.require_mention : false;
 		request.dm_allowed_users = bindingForm.dm_allowed_users;
 		updateBindingMutation.mutate(request as any);
 	}
@@ -334,7 +371,11 @@ export function InstanceCard({instance, expanded, onToggleExpand}: InstanceCardP
 				aria-expanded={expanded}
 				className="flex w-full items-center gap-3 p-3 text-left cursor-pointer"
 			>
-				<PlatformIcon platform={platform} size="sm" className="text-ink-faint" />
+				<PlatformIcon
+					platform={platform}
+					size="sm"
+					className="text-ink-faint"
+				/>
 				<div className="flex-1 min-w-0">
 					<div className="flex items-center gap-2">
 						<span className="text-sm font-medium text-ink">
@@ -343,12 +384,15 @@ export function InstanceCard({instance, expanded, onToggleExpand}: InstanceCardP
 						<span className="rounded bg-app-selected/60 px-1.5 py-0.5 text-[10px] font-medium uppercase leading-none text-ink-faint">
 							{instance.name || "default"}
 						</span>
-						<span className={`text-tiny ${instance.enabled ? "text-green-400" : "text-ink-faint"}`}>
+						<span
+							className={`text-tiny ${instance.enabled ? "text-green-400" : "text-ink-faint"}`}
+						>
 							{instance.enabled ? "● Active" : "○ Disabled"}
 						</span>
 					</div>
 					<p className="text-tiny text-ink-faint mt-0.5">
-						{instance.binding_count} binding{instance.binding_count !== 1 ? "s" : ""}
+						{instance.binding_count} binding
+						{instance.binding_count !== 1 ? "s" : ""}
 					</p>
 				</div>
 				<motion.div
@@ -370,7 +414,7 @@ export function InstanceCard({instance, expanded, onToggleExpand}: InstanceCardP
 						transition={{duration: 0.25, ease: [0.4, 0, 0.2, 1]}}
 						className="overflow-hidden"
 					>
-						<div className="border-t border-app-line/50 bg-app-darkBox px-4 pb-4 pt-3 flex flex-col gap-4">
+						<div className="border-t border-app-line/50 bg-app-dark-box px-4 pb-4 pt-3 flex flex-col gap-4">
 							{/* Enable/Disable toggle */}
 							<div className="flex items-center justify-between">
 								<div>
@@ -379,7 +423,7 @@ export function InstanceCard({instance, expanded, onToggleExpand}: InstanceCardP
 										{instance.enabled ? "Receiving messages" : "Adapter paused"}
 									</p>
 								</div>
-								<Toggle
+								<Switch
 									checked={instance.enabled}
 									onCheckedChange={(checked) => toggleEnabled.mutate(checked)}
 									disabled={toggleEnabled.isPending}
@@ -412,22 +456,34 @@ export function InstanceCard({instance, expanded, onToggleExpand}: InstanceCardP
 												className="flex items-center gap-2 border-b border-app-line/50 px-3 py-2 last:border-b-0"
 											>
 												<div className="flex-1 min-w-0">
-													<span className="text-sm text-ink">{binding.agent_id}</span>
+													<span className="text-sm text-ink">
+														{binding.agent_id}
+													</span>
 													<div className="flex flex-wrap gap-1.5 mt-0.5 text-tiny text-ink-faint">
-														{binding.guild_id && <span>Guild: {binding.guild_id}</span>}
-														{binding.workspace_id && <span>Workspace: {binding.workspace_id}</span>}
-														{binding.chat_id && <span>Chat: {binding.chat_id}</span>}
+														{binding.guild_id && (
+															<span>Guild: {binding.guild_id}</span>
+														)}
+														{binding.workspace_id && (
+															<span>Workspace: {binding.workspace_id}</span>
+														)}
+														{binding.chat_id && (
+															<span>Chat: {binding.chat_id}</span>
+														)}
 														{binding.channel_ids.length > 0 && (
 															<span>
-																{binding.channel_ids.length} channel{binding.channel_ids.length > 1 ? "s" : ""}
+																{binding.channel_ids.length} channel
+																{binding.channel_ids.length > 1 ? "s" : ""}
 															</span>
 														)}
 														{binding.dm_allowed_users.length > 0 && (
 															<span>
-																{binding.dm_allowed_users.length} DM user{binding.dm_allowed_users.length > 1 ? "s" : ""}
+																{binding.dm_allowed_users.length} DM user
+																{binding.dm_allowed_users.length > 1 ? "s" : ""}
 															</span>
 														)}
-														{binding.require_mention && <span>Mention only</span>}
+														{binding.require_mention && (
+															<span>Mention only</span>
+														)}
 														{!binding.guild_id &&
 															!binding.workspace_id &&
 															!binding.chat_id &&
@@ -436,7 +492,11 @@ export function InstanceCard({instance, expanded, onToggleExpand}: InstanceCardP
 															)}
 													</div>
 												</div>
-												<Button size="sm" variant="outline" onClick={() => startEditBinding(binding)}>
+												<Button
+													size="sm"
+													variant="outline"
+													onClick={() => startEditBinding(binding)}
+												>
 													Edit
 												</Button>
 												<Button
@@ -457,7 +517,7 @@ export function InstanceCard({instance, expanded, onToggleExpand}: InstanceCardP
 								)}
 
 								{/* Add/Edit binding modal */}
-								<Dialog
+								<DialogRoot
 									open={isEditingOrAdding}
 									onOpenChange={(open) => {
 										if (!open) {
@@ -479,16 +539,22 @@ export function InstanceCard({instance, expanded, onToggleExpand}: InstanceCardP
 											bindingForm={bindingForm}
 											setBindingForm={setBindingForm}
 											editing={!!editingBinding}
-											onSave={editingBinding ? handleUpdateBinding : handleAddBinding}
+											onSave={
+												editingBinding ? handleUpdateBinding : handleAddBinding
+											}
 											onCancel={() => {
 												setEditingBinding(null);
 												setAddingBinding(false);
 												setMessage(null);
 											}}
-											saving={editingBinding ? updateBindingMutation.isPending : addBindingMutation.isPending}
+											saving={
+												editingBinding
+													? updateBindingMutation.isPending
+													: addBindingMutation.isPending
+											}
 										/>
 									</DialogContent>
-								</Dialog>
+								</DialogRoot>
 							</div>
 
 							{/* Status message */}
@@ -506,36 +572,40 @@ export function InstanceCard({instance, expanded, onToggleExpand}: InstanceCardP
 
 							{/* Remove instance */}
 							<div className="border-t border-app-line/50 pt-3">
-									{!confirmRemove ? (
-										<Button
-											variant="outline"
-											size="sm"
-											onClick={() => setConfirmRemove(true)}
-										>
-											Remove {instanceLabel}
-										</Button>
-									) : (
-										<div className="flex flex-col gap-2">
-											<p className="text-sm text-red-400">
-												This will remove credentials and bindings for {instanceLabel}.
-												The adapter will stop immediately.
-											</p>
-											<div className="flex gap-2">
-												<Button variant="ghost" size="sm" onClick={() => setConfirmRemove(false)}>
-													Cancel
-												</Button>
-												<Button
-													size="sm"
-													onClick={() => deleteInstance.mutate()}
-													loading={deleteInstance.isPending}
-													className="bg-red-500/20 text-red-400 hover:bg-red-500/30"
-												>
-													Confirm Remove
-												</Button>
-											</div>
+								{!confirmRemove ? (
+									<Button
+										variant="outline"
+										size="sm"
+										onClick={() => setConfirmRemove(true)}
+									>
+										Remove {instanceLabel}
+									</Button>
+								) : (
+									<div className="flex flex-col gap-2">
+										<p className="text-sm text-red-400">
+											This will remove credentials and bindings for{" "}
+											{instanceLabel}. The adapter will stop immediately.
+										</p>
+										<div className="flex gap-2">
+											<Button
+												variant="bare"
+												size="sm"
+												onClick={() => setConfirmRemove(false)}
+											>
+												Cancel
+											</Button>
+											<Button
+												size="sm"
+												onClick={() => deleteInstance.mutate()}
+												loading={deleteInstance.isPending}
+												className="bg-red-500/20 text-red-400 hover:bg-red-500/30"
+											>
+												Confirm Remove
+											</Button>
 										</div>
-									)}
-								</div>
+									</div>
+								)}
+							</div>
 						</div>
 					</motion.div>
 				)}
@@ -553,11 +623,21 @@ interface AddInstanceCardProps {
 	onCreated: () => void;
 }
 
-export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddInstanceCardProps) {
+export function AddInstanceCard({
+	platform,
+	isDefault,
+	onCancel,
+	onCreated,
+}: AddInstanceCardProps) {
 	const queryClient = useQueryClient();
 	const [instanceName, setInstanceName] = useState("");
-	const [credentialInputs, setCredentialInputs] = useState<Record<string, string>>({});
-	const [message, setMessage] = useState<{text: string; type: "success" | "error"} | null>(null);
+	const [credentialInputs, setCredentialInputs] = useState<
+		Record<string, string>
+	>({});
+	const [message, setMessage] = useState<{
+		text: string;
+		type: "success" | "error";
+	} | null>(null);
 
 	const createInstance = useMutation({
 		mutationFn: api.createMessagingInstance,
@@ -570,7 +650,8 @@ export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddI
 				setMessage({text: result.message, type: "error"});
 			}
 		},
-		onError: (error) => setMessage({text: `Failed: ${error.message}`, type: "error"}),
+		onError: (error) =>
+			setMessage({text: `Failed: ${error.message}`, type: "error"}),
 	});
 
 	function handleSave() {
@@ -583,8 +664,14 @@ export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddI
 			}
 			credentials.discord_token = credentialInputs.discord_token.trim();
 		} else if (platform === "slack") {
-			if (!credentialInputs.slack_bot_token?.trim() || !credentialInputs.slack_app_token?.trim()) {
-				setMessage({text: "Both bot token and app token are required", type: "error"});
+			if (
+				!credentialInputs.slack_bot_token?.trim() ||
+				!credentialInputs.slack_app_token?.trim()
+			) {
+				setMessage({
+					text: "Both bot token and app token are required",
+					type: "error",
+				});
 				return;
 			}
 			credentials.slack_bot_token = credentialInputs.slack_bot_token.trim();
@@ -596,29 +683,56 @@ export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddI
 			}
 			credentials.telegram_token = credentialInputs.telegram_token.trim();
 		} else if (platform === "twitch") {
-			if (!credentialInputs.twitch_username?.trim() || !credentialInputs.twitch_oauth_token?.trim()) {
-				setMessage({text: "Username and OAuth token are required", type: "error"});
+			if (
+				!credentialInputs.twitch_username?.trim() ||
+				!credentialInputs.twitch_oauth_token?.trim()
+			) {
+				setMessage({
+					text: "Username and OAuth token are required",
+					type: "error",
+				});
 				return;
 			}
 			credentials.twitch_username = credentialInputs.twitch_username.trim();
-			credentials.twitch_oauth_token = credentialInputs.twitch_oauth_token.trim();
+			credentials.twitch_oauth_token =
+				credentialInputs.twitch_oauth_token.trim();
 			if (credentialInputs.twitch_client_id?.trim())
 				credentials.twitch_client_id = credentialInputs.twitch_client_id.trim();
 			if (credentialInputs.twitch_client_secret?.trim())
-				credentials.twitch_client_secret = credentialInputs.twitch_client_secret.trim();
+				credentials.twitch_client_secret =
+					credentialInputs.twitch_client_secret.trim();
 			if (credentialInputs.twitch_refresh_token?.trim())
-				credentials.twitch_refresh_token = credentialInputs.twitch_refresh_token.trim();
+				credentials.twitch_refresh_token =
+					credentialInputs.twitch_refresh_token.trim();
 		} else if (platform === "email") {
-			if (!credentialInputs.email_imap_host?.trim() || !credentialInputs.email_smtp_host?.trim()) {
-				setMessage({text: "IMAP host and SMTP host are required", type: "error"});
+			if (
+				!credentialInputs.email_imap_host?.trim() ||
+				!credentialInputs.email_smtp_host?.trim()
+			) {
+				setMessage({
+					text: "IMAP host and SMTP host are required",
+					type: "error",
+				});
 				return;
 			}
-			if (!credentialInputs.email_imap_username?.trim() || !credentialInputs.email_imap_password?.trim()) {
-				setMessage({text: "IMAP username and password are required", type: "error"});
+			if (
+				!credentialInputs.email_imap_username?.trim() ||
+				!credentialInputs.email_imap_password?.trim()
+			) {
+				setMessage({
+					text: "IMAP username and password are required",
+					type: "error",
+				});
 				return;
 			}
-			if (!credentialInputs.email_smtp_username?.trim() || !credentialInputs.email_smtp_password?.trim()) {
-				setMessage({text: "SMTP username and password are required", type: "error"});
+			if (
+				!credentialInputs.email_smtp_username?.trim() ||
+				!credentialInputs.email_smtp_password?.trim()
+			) {
+				setMessage({
+					text: "SMTP username and password are required",
+					type: "error",
+				});
 				return;
 			}
 			if (!credentialInputs.email_from_address?.trim()) {
@@ -626,23 +740,32 @@ export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddI
 				return;
 			}
 			credentials.email_imap_host = credentialInputs.email_imap_host.trim();
-			credentials.email_imap_username = credentialInputs.email_imap_username.trim();
-			credentials.email_imap_password = credentialInputs.email_imap_password.trim();
+			credentials.email_imap_username =
+				credentialInputs.email_imap_username.trim();
+			credentials.email_imap_password =
+				credentialInputs.email_imap_password.trim();
 			credentials.email_smtp_host = credentialInputs.email_smtp_host.trim();
-			credentials.email_smtp_username = credentialInputs.email_smtp_username.trim();
-			credentials.email_smtp_password = credentialInputs.email_smtp_password.trim();
-			credentials.email_from_address = credentialInputs.email_from_address.trim();
+			credentials.email_smtp_username =
+				credentialInputs.email_smtp_username.trim();
+			credentials.email_smtp_password =
+				credentialInputs.email_smtp_password.trim();
+			credentials.email_from_address =
+				credentialInputs.email_from_address.trim();
 			if (credentialInputs.email_imap_port?.trim())
-				credentials.email_imap_port = parseInt(credentialInputs.email_imap_port.trim(), 10) || undefined;
+				credentials.email_imap_port =
+					parseInt(credentialInputs.email_imap_port.trim(), 10) || undefined;
 			if (credentialInputs.email_smtp_port?.trim())
-				credentials.email_smtp_port = parseInt(credentialInputs.email_smtp_port.trim(), 10) || undefined;
+				credentials.email_smtp_port =
+					parseInt(credentialInputs.email_smtp_port.trim(), 10) || undefined;
 		} else if (platform === "webhook") {
 			if (credentialInputs.webhook_port?.trim())
-				credentials.webhook_port = parseInt(credentialInputs.webhook_port.trim(), 10) || undefined;
+				credentials.webhook_port =
+					parseInt(credentialInputs.webhook_port.trim(), 10) || undefined;
 			if (credentialInputs.webhook_bind?.trim())
 				credentials.webhook_bind = credentialInputs.webhook_bind.trim();
 			if (credentialInputs.webhook_auth_token?.trim())
-				credentials.webhook_auth_token = credentialInputs.webhook_auth_token.trim();
+				credentials.webhook_auth_token =
+					credentialInputs.webhook_auth_token.trim();
 		} else if (platform === "mattermost") {
 			if (!credentialInputs.mattermost_base_url?.trim()) {
 				setMessage({text: "Server URL is required", type: "error"});
@@ -652,7 +775,8 @@ export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddI
 				setMessage({text: "Access token is required", type: "error"});
 				return;
 			}
-			credentials.mattermost_base_url = credentialInputs.mattermost_base_url.trim();
+			credentials.mattermost_base_url =
+				credentialInputs.mattermost_base_url.trim();
 			credentials.mattermost_token = credentialInputs.mattermost_token.trim();
 		} else if (platform === "signal") {
 			if (!credentialInputs.signal_http_url?.trim()) {
@@ -668,7 +792,7 @@ export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddI
 			if (!isValidE164(account)) {
 				setMessage({
 					text: E164_ERROR_TEXT,
-					type: "error"
+					type: "error",
 				});
 				return;
 			}
@@ -676,13 +800,15 @@ export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddI
 			credentials.signal_account = account;
 			// Normalize: always omit when blank (empty or undefined) for consistent empty-state behavior
 			if (credentialInputs.signal_dm_allowed_users?.trim()) {
-				const result = validateSignalDmAllowedUsers(credentialInputs.signal_dm_allowed_users);
+				const result = validateSignalDmAllowedUsers(
+					credentialInputs.signal_dm_allowed_users,
+				);
 				if (!result.valid) {
 					setMessage({text: result.error, type: "error"});
 					return;
 				}
 				if (result.entries.length > 0) {
-					credentials.signal_dm_allowed_users = result.entries.join(',');
+					credentials.signal_dm_allowed_users = result.entries.join(",");
 				}
 			}
 		}
@@ -705,7 +831,11 @@ export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddI
 		<div className="rounded-lg border border-accent/30 bg-app-box">
 			<div className="p-4 flex flex-col gap-3">
 				<div className="flex items-center gap-2">
-					<PlatformIcon platform={platform} size="sm" className="text-ink-faint" />
+					<PlatformIcon
+						platform={platform}
+						size="sm"
+						className="text-ink-faint"
+					/>
 					<span className="text-sm font-medium text-ink">
 						{isDefault
 							? `Add ${PLATFORM_LABELS[platform]}`
@@ -731,14 +861,23 @@ export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddI
 				{/* Platform-specific credential fields */}
 				{platform === "discord" && (
 					<div>
-						<label className="mb-1.5 block text-sm font-medium text-ink-dull">Bot Token</label>
+						<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+							Bot Token
+						</label>
 						<Input
 							type="password"
 							size="lg"
 							value={credentialInputs.discord_token ?? ""}
-							onChange={(e) => setCredentialInputs({...credentialInputs, discord_token: e.target.value})}
+							onChange={(e) =>
+								setCredentialInputs({
+									...credentialInputs,
+									discord_token: e.target.value,
+								})
+							}
 							placeholder="MTk4NjIyNDgzNDcxOTI1MjQ4.D..."
-							onKeyDown={(e) => { if (e.key === "Enter") handleSave(); }}
+							onKeyDown={(e) => {
+								if (e.key === "Enter") handleSave();
+							}}
 						/>
 					</div>
 				)}
@@ -746,24 +885,40 @@ export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddI
 				{platform === "slack" && (
 					<>
 						<div>
-							<label className="mb-1.5 block text-sm font-medium text-ink-dull">Bot Token</label>
+							<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+								Bot Token
+							</label>
 							<Input
 								type="password"
 								size="lg"
 								value={credentialInputs.slack_bot_token ?? ""}
-								onChange={(e) => setCredentialInputs({...credentialInputs, slack_bot_token: e.target.value})}
+								onChange={(e) =>
+									setCredentialInputs({
+										...credentialInputs,
+										slack_bot_token: e.target.value,
+									})
+								}
 								placeholder="xoxb-..."
 							/>
 						</div>
 						<div>
-							<label className="mb-1.5 block text-sm font-medium text-ink-dull">App Token</label>
+							<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+								App Token
+							</label>
 							<Input
 								type="password"
 								size="lg"
 								value={credentialInputs.slack_app_token ?? ""}
-								onChange={(e) => setCredentialInputs({...credentialInputs, slack_app_token: e.target.value})}
+								onChange={(e) =>
+									setCredentialInputs({
+										...credentialInputs,
+										slack_app_token: e.target.value,
+									})
+								}
 								placeholder="xapp-..."
-								onKeyDown={(e) => { if (e.key === "Enter") handleSave(); }}
+								onKeyDown={(e) => {
+									if (e.key === "Enter") handleSave();
+								}}
 							/>
 						</div>
 					</>
@@ -771,14 +926,23 @@ export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddI
 
 				{platform === "telegram" && (
 					<div>
-						<label className="mb-1.5 block text-sm font-medium text-ink-dull">Bot Token</label>
+						<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+							Bot Token
+						</label>
 						<Input
 							type="password"
 							size="lg"
 							value={credentialInputs.telegram_token ?? ""}
-							onChange={(e) => setCredentialInputs({...credentialInputs, telegram_token: e.target.value})}
+							onChange={(e) =>
+								setCredentialInputs({
+									...credentialInputs,
+									telegram_token: e.target.value,
+								})
+							}
 							placeholder="123456789:ABCdefGHI..."
-							onKeyDown={(e) => { if (e.key === "Enter") handleSave(); }}
+							onKeyDown={(e) => {
+								if (e.key === "Enter") handleSave();
+							}}
 						/>
 					</div>
 				)}
@@ -786,54 +950,91 @@ export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddI
 				{platform === "twitch" && (
 					<>
 						<div>
-							<label className="mb-1.5 block text-sm font-medium text-ink-dull">Bot Username</label>
+							<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+								Bot Username
+							</label>
 							<Input
 								size="lg"
 								value={credentialInputs.twitch_username ?? ""}
-								onChange={(e) => setCredentialInputs({...credentialInputs, twitch_username: e.target.value})}
+								onChange={(e) =>
+									setCredentialInputs({
+										...credentialInputs,
+										twitch_username: e.target.value,
+									})
+								}
 								placeholder="my_bot"
 							/>
 						</div>
 						<div className="grid grid-cols-2 gap-3">
 							<div>
-								<label className="mb-1.5 block text-sm font-medium text-ink-dull">Client ID</label>
+								<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+									Client ID
+								</label>
 								<Input
 									size="lg"
 									value={credentialInputs.twitch_client_id ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, twitch_client_id: e.target.value})}
+									onChange={(e) =>
+										setCredentialInputs({
+											...credentialInputs,
+											twitch_client_id: e.target.value,
+										})
+									}
 									placeholder="your-client-id"
 								/>
 							</div>
 							<div>
-								<label className="mb-1.5 block text-sm font-medium text-ink-dull">Client Secret</label>
+								<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+									Client Secret
+								</label>
 								<Input
 									type="password"
 									size="lg"
 									value={credentialInputs.twitch_client_secret ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, twitch_client_secret: e.target.value})}
+									onChange={(e) =>
+										setCredentialInputs({
+											...credentialInputs,
+											twitch_client_secret: e.target.value,
+										})
+									}
 									placeholder="your-client-secret"
 								/>
 							</div>
 						</div>
 						<div className="grid grid-cols-2 gap-3">
 							<div>
-								<label className="mb-1.5 block text-sm font-medium text-ink-dull">OAuth Token</label>
+								<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+									OAuth Token
+								</label>
 								<Input
 									type="password"
 									size="lg"
 									value={credentialInputs.twitch_oauth_token ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, twitch_oauth_token: e.target.value})}
+									onChange={(e) =>
+										setCredentialInputs({
+											...credentialInputs,
+											twitch_oauth_token: e.target.value,
+										})
+									}
 									placeholder="abcd1234..."
-									onKeyDown={(e) => { if (e.key === "Enter") handleSave(); }}
+									onKeyDown={(e) => {
+										if (e.key === "Enter") handleSave();
+									}}
 								/>
 							</div>
 							<div>
-								<label className="mb-1.5 block text-sm font-medium text-ink-dull">Refresh Token</label>
+								<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+									Refresh Token
+								</label>
 								<Input
 									type="password"
 									size="lg"
 									value={credentialInputs.twitch_refresh_token ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, twitch_refresh_token: e.target.value})}
+									onChange={(e) =>
+										setCredentialInputs({
+											...credentialInputs,
+											twitch_refresh_token: e.target.value,
+										})
+									}
 									placeholder="refresh-token"
 								/>
 							</div>
@@ -845,94 +1046,159 @@ export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddI
 					<>
 						<div className="grid grid-cols-2 gap-3">
 							<div>
-								<label className="mb-1.5 block text-sm font-medium text-ink-dull">IMAP Host</label>
+								<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+									IMAP Host
+								</label>
 								<Input
 									size="lg"
 									value={credentialInputs.email_imap_host ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, email_imap_host: e.target.value})}
+									onChange={(e) =>
+										setCredentialInputs({
+											...credentialInputs,
+											email_imap_host: e.target.value,
+										})
+									}
 									placeholder="imap.gmail.com"
 								/>
 							</div>
 							<div>
-								<label className="mb-1.5 block text-sm font-medium text-ink-dull">IMAP Port</label>
+								<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+									IMAP Port
+								</label>
 								<Input
 									size="lg"
 									value={credentialInputs.email_imap_port ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, email_imap_port: e.target.value})}
+									onChange={(e) =>
+										setCredentialInputs({
+											...credentialInputs,
+											email_imap_port: e.target.value,
+										})
+									}
 									placeholder="993"
 								/>
 							</div>
 						</div>
 						<div className="grid grid-cols-2 gap-3">
 							<div>
-								<label className="mb-1.5 block text-sm font-medium text-ink-dull">IMAP Username</label>
+								<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+									IMAP Username
+								</label>
 								<Input
 									size="lg"
 									value={credentialInputs.email_imap_username ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, email_imap_username: e.target.value})}
+									onChange={(e) =>
+										setCredentialInputs({
+											...credentialInputs,
+											email_imap_username: e.target.value,
+										})
+									}
 									placeholder="user@example.com"
 								/>
 							</div>
 							<div>
-								<label className="mb-1.5 block text-sm font-medium text-ink-dull">IMAP Password</label>
+								<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+									IMAP Password
+								</label>
 								<Input
 									type="password"
 									size="lg"
 									value={credentialInputs.email_imap_password ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, email_imap_password: e.target.value})}
+									onChange={(e) =>
+										setCredentialInputs({
+											...credentialInputs,
+											email_imap_password: e.target.value,
+										})
+									}
 									placeholder="App password"
 								/>
 							</div>
 						</div>
 						<div className="grid grid-cols-2 gap-3">
 							<div>
-								<label className="mb-1.5 block text-sm font-medium text-ink-dull">SMTP Host</label>
+								<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+									SMTP Host
+								</label>
 								<Input
 									size="lg"
 									value={credentialInputs.email_smtp_host ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, email_smtp_host: e.target.value})}
+									onChange={(e) =>
+										setCredentialInputs({
+											...credentialInputs,
+											email_smtp_host: e.target.value,
+										})
+									}
 									placeholder="smtp.gmail.com"
 								/>
 							</div>
 							<div>
-								<label className="mb-1.5 block text-sm font-medium text-ink-dull">SMTP Port</label>
+								<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+									SMTP Port
+								</label>
 								<Input
 									size="lg"
 									value={credentialInputs.email_smtp_port ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, email_smtp_port: e.target.value})}
+									onChange={(e) =>
+										setCredentialInputs({
+											...credentialInputs,
+											email_smtp_port: e.target.value,
+										})
+									}
 									placeholder="587"
 								/>
 							</div>
 						</div>
 						<div className="grid grid-cols-2 gap-3">
 							<div>
-								<label className="mb-1.5 block text-sm font-medium text-ink-dull">SMTP Username</label>
+								<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+									SMTP Username
+								</label>
 								<Input
 									size="lg"
 									value={credentialInputs.email_smtp_username ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, email_smtp_username: e.target.value})}
+									onChange={(e) =>
+										setCredentialInputs({
+											...credentialInputs,
+											email_smtp_username: e.target.value,
+										})
+									}
 									placeholder="user@example.com"
 								/>
 							</div>
 							<div>
-								<label className="mb-1.5 block text-sm font-medium text-ink-dull">SMTP Password</label>
+								<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+									SMTP Password
+								</label>
 								<Input
 									type="password"
 									size="lg"
 									value={credentialInputs.email_smtp_password ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, email_smtp_password: e.target.value})}
+									onChange={(e) =>
+										setCredentialInputs({
+											...credentialInputs,
+											email_smtp_password: e.target.value,
+										})
+									}
 									placeholder="App password"
 								/>
 							</div>
 						</div>
 						<div>
-							<label className="mb-1.5 block text-sm font-medium text-ink-dull">From Address</label>
+							<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+								From Address
+							</label>
 							<Input
 								size="lg"
 								value={credentialInputs.email_from_address ?? ""}
-								onChange={(e) => setCredentialInputs({...credentialInputs, email_from_address: e.target.value})}
+								onChange={(e) =>
+									setCredentialInputs({
+										...credentialInputs,
+										email_from_address: e.target.value,
+									})
+								}
 								placeholder="bot@example.com"
-								onKeyDown={(e) => { if (e.key === "Enter") handleSave(); }}
+								onKeyDown={(e) => {
+									if (e.key === "Enter") handleSave();
+								}}
 							/>
 						</div>
 					</>
@@ -942,33 +1208,56 @@ export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddI
 					<>
 						<div className="grid grid-cols-2 gap-3">
 							<div>
-								<label className="mb-1.5 block text-sm font-medium text-ink-dull">Port</label>
+								<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+									Port
+								</label>
 								<Input
 									size="lg"
 									value={credentialInputs.webhook_port ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, webhook_port: e.target.value})}
+									onChange={(e) =>
+										setCredentialInputs({
+											...credentialInputs,
+											webhook_port: e.target.value,
+										})
+									}
 									placeholder="18789"
 								/>
 							</div>
 							<div>
-								<label className="mb-1.5 block text-sm font-medium text-ink-dull">Bind Address</label>
+								<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+									Bind Address
+								</label>
 								<Input
 									size="lg"
 									value={credentialInputs.webhook_bind ?? ""}
-									onChange={(e) => setCredentialInputs({...credentialInputs, webhook_bind: e.target.value})}
+									onChange={(e) =>
+										setCredentialInputs({
+											...credentialInputs,
+											webhook_bind: e.target.value,
+										})
+									}
 									placeholder="127.0.0.1"
 								/>
 							</div>
 						</div>
 						<div>
-							<label className="mb-1.5 block text-sm font-medium text-ink-dull">Auth Token</label>
+							<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+								Auth Token
+							</label>
 							<Input
 								type="password"
 								size="lg"
 								value={credentialInputs.webhook_auth_token ?? ""}
-								onChange={(e) => setCredentialInputs({...credentialInputs, webhook_auth_token: e.target.value})}
+								onChange={(e) =>
+									setCredentialInputs({
+										...credentialInputs,
+										webhook_auth_token: e.target.value,
+									})
+								}
 								placeholder="Optional — leave empty for no auth"
-								onKeyDown={(e) => { if (e.key === "Enter") handleSave(); }}
+								onKeyDown={(e) => {
+									if (e.key === "Enter") handleSave();
+								}}
 							/>
 						</div>
 					</>
@@ -977,23 +1266,39 @@ export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddI
 				{platform === "mattermost" && (
 					<>
 						<div>
-							<label className="mb-1.5 block text-sm font-medium text-ink-dull">Server URL</label>
+							<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+								Server URL
+							</label>
 							<Input
 								size="lg"
 								value={credentialInputs.mattermost_base_url ?? ""}
-								onChange={(e) => setCredentialInputs({...credentialInputs, mattermost_base_url: e.target.value})}
+								onChange={(e) =>
+									setCredentialInputs({
+										...credentialInputs,
+										mattermost_base_url: e.target.value,
+									})
+								}
 								placeholder="https://mattermost.example.com"
 							/>
 						</div>
 						<div>
-							<label className="mb-1.5 block text-sm font-medium text-ink-dull">Access Token</label>
+							<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+								Access Token
+							</label>
 							<Input
 								type="password"
 								size="lg"
 								value={credentialInputs.mattermost_token ?? ""}
-								onChange={(e) => setCredentialInputs({...credentialInputs, mattermost_token: e.target.value})}
+								onChange={(e) =>
+									setCredentialInputs({
+										...credentialInputs,
+										mattermost_token: e.target.value,
+									})
+								}
 								placeholder="Personal access token from Mattermost account settings"
-								onKeyDown={(e) => { if (e.key === "Enter") handleSave(); }}
+								onKeyDown={(e) => {
+									if (e.key === "Enter") handleSave();
+								}}
 							/>
 						</div>
 					</>
@@ -1002,42 +1307,72 @@ export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddI
 				{platform === "signal" && (
 					<>
 						<div>
-							<label className="mb-1.5 block text-sm font-medium text-ink-dull">HTTP URL</label>
+							<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+								HTTP URL
+							</label>
 							<Input
 								size="lg"
 								value={credentialInputs.signal_http_url ?? ""}
-								onChange={(e) => setCredentialInputs({...credentialInputs, signal_http_url: e.target.value})}
+								onChange={(e) =>
+									setCredentialInputs({
+										...credentialInputs,
+										signal_http_url: e.target.value,
+									})
+								}
 								placeholder="http://127.0.0.1:8686"
-								onKeyDown={(e) => { if (e.key === "Enter") handleSave(); }}
+								onKeyDown={(e) => {
+									if (e.key === "Enter") handleSave();
+								}}
 							/>
 							<p className="mt-1 text-xs text-ink-faint">
 								URL of your signal-cli daemon (e.g., http://127.0.0.1:8686)
 							</p>
 						</div>
 						<div>
-							<label className="mb-1.5 block text-sm font-medium text-ink-dull">Account Phone Number</label>
+							<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+								Account Phone Number
+							</label>
 							<Input
 								size="lg"
 								value={credentialInputs.signal_account ?? ""}
-								onChange={(e) => setCredentialInputs({...credentialInputs, signal_account: e.target.value})}
+								onChange={(e) =>
+									setCredentialInputs({
+										...credentialInputs,
+										signal_account: e.target.value,
+									})
+								}
 								placeholder="+1234567890"
-								onKeyDown={(e) => { if (e.key === "Enter") handleSave(); }}
+								onKeyDown={(e) => {
+									if (e.key === "Enter") handleSave();
+								}}
 							/>
 							<p className="mt-1 text-xs text-ink-faint">
-								Your Signal phone number in E.164 format (+ followed by 6-15 digits, first digit 1-9)
+								Your Signal phone number in E.164 format (+ followed by 6-15
+								digits, first digit 1-9)
 							</p>
 						</div>
 						<div>
-							<label className="mb-1.5 block text-sm font-medium text-ink-dull">DM Allowed Users (Optional)</label>
+							<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+								DM Allowed Users (Optional)
+							</label>
 							<Input
 								size="lg"
 								value={credentialInputs.signal_dm_allowed_users ?? ""}
-								onChange={(e) => setCredentialInputs({...credentialInputs, signal_dm_allowed_users: e.target.value})}
+								onChange={(e) =>
+									setCredentialInputs({
+										...credentialInputs,
+										signal_dm_allowed_users: e.target.value,
+									})
+								}
 								placeholder="+1234567890, +1987654321"
-								onKeyDown={(e) => { if (e.key === "Enter") handleSave(); }}
+								onKeyDown={(e) => {
+									if (e.key === "Enter") handleSave();
+								}}
 							/>
 							<p className="mt-1 text-xs text-ink-faint">
-								Allowed DM senders: E.164 phone numbers (+1234567890) or uuid:xxx identifiers. Comma-separated. If empty, DMs are blocked.
+								Allowed DM senders: E.164 phone numbers (+1234567890) or
+								uuid:xxx identifiers. Comma-separated. If empty, DMs are
+								blocked.
 							</p>
 						</div>
 					</>
@@ -1046,7 +1381,12 @@ export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddI
 				{docLink && (
 					<p className="text-xs text-ink-faint">
 						Need help?{" "}
-						<a href={docLink} target="_blank" rel="noopener noreferrer" className="text-accent hover:underline">
+						<a
+							href={docLink}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="text-accent hover:underline"
+						>
 							Read the {PLATFORM_LABELS[platform]} setup docs &rarr;
 						</a>
 					</p>
@@ -1065,10 +1405,14 @@ export function AddInstanceCard({platform, isDefault, onCancel, onCreated}: AddI
 				)}
 
 				<div className="flex gap-2 justify-end">
-					<Button size="sm" variant="ghost" onClick={onCancel}>
+					<Button size="sm" variant="bare" onClick={onCancel}>
 						Cancel
 					</Button>
-					<Button size="sm" onClick={handleSave} loading={createInstance.isPending}>
+					<Button
+						size="sm"
+						onClick={handleSave}
+						loading={createInstance.isPending}
+					>
 						{isDefault ? "Connect" : "Create Instance"}
 					</Button>
 				</div>
@@ -1109,27 +1453,37 @@ function BindingForm({
 	return (
 		<div className="flex flex-col gap-3">
 			<div>
-				<label className="mb-1 block text-sm font-medium text-ink-dull">Agent</label>
-				<Select
+				<label className="mb-1 block text-sm font-medium text-ink-dull">
+					Agent
+				</label>
+				<SelectRoot
 					value={bindingForm.agent_id}
 					onValueChange={(v) => setBindingForm({...bindingForm, agent_id: v})}
 				>
-					<SelectTrigger><SelectValue /></SelectTrigger>
+					<SelectTrigger>
+						<SelectValue />
+					</SelectTrigger>
 					<SelectContent>
 						{agents.map((a) => (
-							<SelectItem key={a.id} value={a.id}>{a.id}</SelectItem>
+							<SelectItem key={a.id} value={a.id}>
+								{a.id}
+							</SelectItem>
 						)) ?? <SelectItem value="main">main</SelectItem>}
 					</SelectContent>
-				</Select>
+				</SelectRoot>
 			</div>
 
 			{platform === "discord" && (
 				<div>
-					<label className="mb-1 block text-sm font-medium text-ink-dull">Guild ID</label>
+					<label className="mb-1 block text-sm font-medium text-ink-dull">
+						Guild ID
+					</label>
 					<Input
 						size="lg"
 						value={bindingForm.guild_id}
-						onChange={(e) => setBindingForm({...bindingForm, guild_id: e.target.value})}
+						onChange={(e) =>
+							setBindingForm({...bindingForm, guild_id: e.target.value})
+						}
 						placeholder="Optional -- leave empty for all servers"
 					/>
 				</div>
@@ -1137,11 +1491,15 @@ function BindingForm({
 
 			{platform === "slack" && (
 				<div>
-					<label className="mb-1 block text-sm font-medium text-ink-dull">Workspace ID</label>
+					<label className="mb-1 block text-sm font-medium text-ink-dull">
+						Workspace ID
+					</label>
 					<Input
 						size="lg"
 						value={bindingForm.workspace_id}
-						onChange={(e) => setBindingForm({...bindingForm, workspace_id: e.target.value})}
+						onChange={(e) =>
+							setBindingForm({...bindingForm, workspace_id: e.target.value})
+						}
 						placeholder="Optional -- leave empty for all workspaces"
 					/>
 				</div>
@@ -1149,11 +1507,15 @@ function BindingForm({
 
 			{platform === "telegram" && (
 				<div>
-					<label className="mb-1 block text-sm font-medium text-ink-dull">Chat ID</label>
+					<label className="mb-1 block text-sm font-medium text-ink-dull">
+						Chat ID
+					</label>
 					<Input
 						size="lg"
 						value={bindingForm.chat_id}
-						onChange={(e) => setBindingForm({...bindingForm, chat_id: e.target.value})}
+						onChange={(e) =>
+							setBindingForm({...bindingForm, chat_id: e.target.value})
+						}
 						placeholder="Optional -- leave empty for all chats"
 					/>
 				</div>
@@ -1161,10 +1523,14 @@ function BindingForm({
 
 			{(platform === "discord" || platform === "slack") && (
 				<div>
-					<label className="mb-1 block text-sm font-medium text-ink-dull">Channel IDs</label>
+					<label className="mb-1 block text-sm font-medium text-ink-dull">
+						Channel IDs
+					</label>
 					<TagInput
 						value={bindingForm.channel_ids}
-						onChange={(ids) => setBindingForm({...bindingForm, channel_ids: ids})}
+						onChange={(ids) =>
+							setBindingForm({...bindingForm, channel_ids: ids})
+						}
 						placeholder="Add channel ID..."
 					/>
 				</div>
@@ -1176,37 +1542,56 @@ function BindingForm({
 						<input
 							type="checkbox"
 							checked={bindingForm.require_mention}
-							onChange={(e) => setBindingForm({...bindingForm, require_mention: e.target.checked})}
+							onChange={(e) =>
+								setBindingForm({
+									...bindingForm,
+									require_mention: e.target.checked,
+								})
+							}
 							className="h-4 w-4 rounded border-app-line bg-app-box"
 						/>
 						Require @mention or reply to bot
 					</label>
-					<p className="mt-1.5 text-xs text-ink-faint">Blocks messages entirely — the agent won't see them at all. To let the agent read all messages but only respond to commands, mentions, or replies, use Mention Only mode in Channels settings (cog icon).</p>
+					<p className="mt-1.5 text-xs text-ink-faint">
+						Blocks messages entirely — the agent won't see them at all. To let
+						the agent read all messages but only respond to commands, mentions,
+						or replies, use Mention Only mode in Channels settings (cog icon).
+					</p>
 				</div>
 			)}
 
 			{platform === "twitch" && (
 				<div>
-					<label className="mb-1 block text-sm font-medium text-ink-dull">Channels</label>
+					<label className="mb-1 block text-sm font-medium text-ink-dull">
+						Channels
+					</label>
 					<TagInput
 						value={bindingForm.channel_ids}
-						onChange={(ids) => setBindingForm({...bindingForm, channel_ids: ids})}
+						onChange={(ids) =>
+							setBindingForm({...bindingForm, channel_ids: ids})
+						}
 						placeholder="Add channel name..."
 					/>
 				</div>
 			)}
 
 			<div>
-				<label className="mb-1 block text-sm font-medium text-ink-dull">DM Allowed Users</label>
+				<label className="mb-1 block text-sm font-medium text-ink-dull">
+					DM Allowed Users
+				</label>
 				<TagInput
 					value={bindingForm.dm_allowed_users}
-					onChange={(users) => setBindingForm({...bindingForm, dm_allowed_users: users})}
+					onChange={(users) =>
+						setBindingForm({...bindingForm, dm_allowed_users: users})
+					}
 					placeholder="Add user ID..."
 				/>
 			</div>
 
 			<DialogFooter>
-				<Button size="sm" variant="ghost" onClick={onCancel}>Cancel</Button>
+				<Button size="sm" variant="bare" onClick={onCancel}>
+					Cancel
+				</Button>
 				<Button size="sm" onClick={onSave} loading={saving}>
 					{editing ? "Update" : "Add Binding"}
 				</Button>
@@ -1229,7 +1614,11 @@ export function DisabledChannelCard({
 	return (
 		<div className="rounded-lg border border-app-line bg-app-box p-4 opacity-40">
 			<div className="flex items-center gap-3">
-				<PlatformIcon platform={platform} size="lg" className="text-ink-faint/50" />
+				<PlatformIcon
+					platform={platform}
+					size="lg"
+					className="text-ink-faint/50"
+				/>
 				<div className="flex-1">
 					<span className="text-sm font-medium text-ink">{name}</span>
 					<p className="mt-0.5 text-sm text-ink-dull">{description}</p>
diff --git a/interface/src/components/ConnectionBanner.tsx b/interface/src/components/ConnectionBanner.tsx
index cc3763b8f..b0b0e4756 100644
--- a/interface/src/components/ConnectionBanner.tsx
+++ b/interface/src/components/ConnectionBanner.tsx
@@ -1,22 +1,34 @@
-import { Banner } from "@/ui";
-import type { ConnectionState } from "@/hooks/useEventSource";
+import {Banner} from "@spacedrive/primitives";
+import type {ConnectionState} from "@/hooks/useEventSource";
 
-const stateConfig: Record<Exclude<ConnectionState, "connected">, { label: string; variant: "info" | "warning" | "error" }> = {
-	connecting: { label: "Connecting...", variant: "info" },
-	reconnecting: { label: "Reconnecting... Dashboard may show stale data.", variant: "warning" },
-	disconnected: { label: "Disconnected from server.", variant: "error" },
+const stateConfig: Record<
+	Exclude<ConnectionState, "connected">,
+	{label: string; variant: "info" | "warning" | "error"}
+> = {
+	connecting: {label: "Connecting...", variant: "info"},
+	reconnecting: {
+		label: "Reconnecting... Dashboard may show stale data.",
+		variant: "warning",
+	},
+	disconnected: {label: "Disconnected from server.", variant: "error"},
 };
 
-export function ConnectionBanner({ state, hasData }: { state: ConnectionState; hasData: boolean }) {
+export function ConnectionBanner({
+	state,
+	hasData,
+}: {
+	state: ConnectionState;
+	hasData: boolean;
+}) {
 	// Don't show "Connecting..." if we already have data loaded
 	if (state === "connecting" && hasData) return null;
-	
+
 	if (state === "connected") return null;
 
-	const { label, variant } = stateConfig[state];
+	const {label, variant} = stateConfig[state];
 
 	return (
-		<Banner variant={variant} dot="pulse">
+		<Banner className="m-2 mb-0" variant={variant}>
 			{label}
 		</Banner>
 	);
diff --git a/interface/src/components/ConnectionScreen.tsx b/interface/src/components/ConnectionScreen.tsx
index 783316e27..d5f90864e 100644
--- a/interface/src/components/ConnectionScreen.tsx
+++ b/interface/src/components/ConnectionScreen.tsx
@@ -1,8 +1,11 @@
 import { useState, useCallback, useEffect, lazy, Suspense } from "react";
-import { Button } from "@/ui/Button";
-import { Input } from "@/ui/Input";
+import { Button, Input } from "@spacedrive/primitives";
 import { useServer } from "@/hooks/useServer";
-import { IS_TAURI } from "@/platform";
+import {
+	dragRegionAttributes,
+	IS_DESKTOP,
+	spawnBundledProcess,
+} from "@/platform";
 
 const Orb = lazy(() => import("@/components/Orb"));
 
@@ -11,10 +14,10 @@ type SidecarState = "idle" | "starting" | "running" | "error";
 /**
  * Full-screen connection screen shown when the app cannot reach
  * the spacebot server. Allows changing the server URL and, in
- * Tauri builds with a bundled sidecar, starting a local instance.
+ * desktop hosts with a bundled binary, starting a local instance.
  */
 export function ConnectionScreen() {
-	const { serverUrl, setServerUrl, state, hasSidecar } = useServer();
+	const { serverUrl, setServerUrl, state, hasBundledServer } = useServer();
 	const [draft, setDraft] = useState(serverUrl);
 	const [sidecarState, setSidecarState] = useState<SidecarState>("idle");
 	const [sidecarError, setSidecarError] = useState<string | null>(null);
@@ -36,47 +39,48 @@ export function ConnectionScreen() {
 	);
 
 	const handleStartLocal = useCallback(async () => {
-		if (!IS_TAURI) return;
+		if (!IS_DESKTOP) return;
 		setSidecarState("starting");
 		setSidecarError(null);
 		try {
-			// Dynamic import: this module only exists in Tauri builds
-			const { Command } = await import("@tauri-apps/plugin-shell");
-			const command = Command.sidecar("binaries/spacebot", [
+			let sawReady = false;
+			const spawned = await spawnBundledProcess("binaries/spacebot", [
 				"start",
 				"--foreground",
-			]);
-			let sawReady = false;
-
-			command.on("error", (error: string) => {
-				setSidecarState("error");
-				setSidecarError(error);
-			});
-
-			command.on("close", (data: { code: number | null }) => {
-				if (!sawReady || data.code === null || data.code !== 0) {
+			], {
+				onError: (error) => {
 					setSidecarState("error");
-					setSidecarError(
-						data.code === null
-							? "Process exited before the HTTP server became ready"
-							: `Process exited with code ${data.code}`,
-					);
-					return;
-				}
-				setSidecarState("idle");
+					setSidecarError(error);
+				},
+				onClose: (data) => {
+					if (!sawReady || data.code === null || data.code !== 0) {
+						setSidecarState("error");
+						setSidecarError(
+							data.code === null
+								? "Process exited before the HTTP server became ready"
+								: `Process exited with code ${data.code}`,
+						);
+						return;
+					}
+					setSidecarState("idle");
+				},
+				onStdout: (line) => {
+					// Look for the "HTTP server listening" log line
+					if (line.includes("HTTP server listening")) {
+						sawReady = true;
+						setSidecarState("running");
+						// Point the app at localhost
+						setServerUrl("http://localhost:19898");
+					}
+				},
 			});
 
-			command.stdout.on("data", (line: string) => {
-				// Look for the "HTTP server listening" log line
-				if (line.includes("HTTP server listening")) {
-					sawReady = true;
-					setSidecarState("running");
-					// Point the app at localhost
-					setServerUrl("http://localhost:19898");
-				}
-			});
+			if (!spawned) {
+				setSidecarState("error");
+				setSidecarError("Bundled server is unavailable in this host.");
+				return;
+			}
 
-			await command.spawn();
 			setSidecarState("starting");
 		} catch (error) {
 			setSidecarState("error");
@@ -90,10 +94,10 @@ export function ConnectionScreen() {
 
 	return (
 		<div className="flex h-screen w-full flex-col items-center justify-center bg-app overflow-hidden">
-			{/* Draggable titlebar region for Tauri */}
-			{IS_TAURI && (
+			{/* Draggable titlebar region for the desktop host */}
+			{IS_DESKTOP && (
 				<div
-					data-tauri-drag-region
+					{...dragRegionAttributes()}
 					className="fixed inset-x-0 top-0 h-8"
 				/>
 			)}
@@ -146,8 +150,8 @@ export function ConnectionScreen() {
 						<Button
 							onClick={handleConnect}
 							disabled={isChecking || !draft.trim()}
-							size="default"
-							variant="ghost"
+							size="md"
+							variant="accent"
 							className="bg-[hsl(282,70%,57%)] text-white shadow hover:bg-[hsl(282,70%,50%)] hover:text-white"
 						>
 							Connect
@@ -167,7 +171,7 @@ export function ConnectionScreen() {
 				</div>
 
 				{/* Divider */}
-				{hasSidecar && (
+				{hasBundledServer && (
 					<>
 						<div className="flex w-full items-center gap-3">
 							<div className="h-px flex-1 bg-app-line" />
@@ -177,12 +181,11 @@ export function ConnectionScreen() {
 
 						{/* Start Local Server */}
 						<div className="flex w-full flex-col gap-3">
-							<Button
-								onClick={handleStartLocal}
-								variant="outline"
-								loading={sidecarState === "starting"}
-								disabled={
-									sidecarState === "starting" ||
+						<Button
+							onClick={handleStartLocal}
+							variant="outline"
+							disabled={
+								sidecarState === "starting" ||
 									sidecarState === "running"
 								}
 								className="w-full"
@@ -213,7 +216,7 @@ export function ConnectionScreen() {
 				{/* Footer hint */}
 				<p className="text-center text-xs text-ink-faint">
 					Spacebot runs on port 19898 by default.
-					{!hasSidecar && (
+					{!hasBundledServer && (
 						<>
 							{" "}
 							Install via{" "}
diff --git a/interface/src/components/ConversationSettingsPanel.tsx b/interface/src/components/ConversationSettingsPanel.tsx
index 31536b2b4..a33e77856 100644
--- a/interface/src/components/ConversationSettingsPanel.tsx
+++ b/interface/src/components/ConversationSettingsPanel.tsx
@@ -1,15 +1,15 @@
-import { useState } from "react";
-import { Button } from "@/ui/Button";
+import {useState} from "react";
 import {
-	Select,
-	SelectTrigger,
-	SelectValue,
-	SelectContent,
-	SelectItem,
-	SelectGroup,
-	SelectLabel,
-} from "@/ui/Select";
-import type { ConversationSettings, ConversationDefaultsResponse } from "@/api/types";
+	Button,
+	Popover,
+	SelectPill,
+	OptionList,
+	OptionListItem,
+} from "@spacedrive/primitives";
+import type {
+	ConversationSettings,
+	ConversationDefaultsResponse,
+} from "@/api/types";
 
 interface ConversationSettingsPanelProps {
 	defaults: ConversationDefaultsResponse;
@@ -33,7 +33,7 @@ const PRESETS: Array<{
 		settings: {
 			memory: "full",
 			delegation: "standard",
-			worker_context: { history: "none", memory: "none" },
+			worker_context: {history: "none", memory: "none"},
 		},
 	},
 	{
@@ -43,17 +43,18 @@ const PRESETS: Array<{
 		settings: {
 			memory: "ambient",
 			delegation: "standard",
-			worker_context: { history: "none", memory: "none" },
+			worker_context: {history: "none", memory: "none"},
 		},
 	},
 	{
 		id: "hands-on",
 		name: "Hands-on",
-		description: "Agent has direct tool access, workers get conversation context",
+		description:
+			"Agent has direct tool access, workers get conversation context",
 		settings: {
 			memory: "off",
 			delegation: "direct",
-			worker_context: { history: "recent", memory: "tools" },
+			worker_context: {history: "recent", memory: "tools"},
 		},
 	},
 	{
@@ -63,15 +64,15 @@ const PRESETS: Array<{
 		settings: {
 			memory: "off",
 			delegation: "standard",
-			worker_context: { history: "none", memory: "none" },
+			worker_context: {history: "none", memory: "none"},
 		},
 	},
 ];
 
 const MEMORY_OPTIONS = [
-	{ value: "full", label: "On" },
-	{ value: "ambient", label: "Context Only" },
-	{ value: "off", label: "Off" },
+	{value: "full", label: "On"},
+	{value: "ambient", label: "Context Only"},
+	{value: "off", label: "Off"},
 ] as const;
 
 const MEMORY_DESCRIPTIONS: Record<string, string> = {
@@ -82,8 +83,8 @@ const MEMORY_DESCRIPTIONS: Record<string, string> = {
 };
 
 const DELEGATION_OPTIONS = [
-	{ value: "standard", label: "Standard" },
-	{ value: "direct", label: "Direct" },
+	{value: "standard", label: "Standard"},
+	{value: "direct", label: "Direct"},
 ] as const;
 
 const DELEGATION_DESCRIPTIONS: Record<string, string> = {
@@ -94,9 +95,9 @@ const DELEGATION_DESCRIPTIONS: Record<string, string> = {
 };
 
 const RESPONSE_MODE_OPTIONS = [
-	{ value: "active", label: "Active" },
-	{ value: "observe", label: "Observe" },
-	{ value: "mention_only", label: "Mention Only" },
+	{value: "active", label: "Active"},
+	{value: "observe", label: "Observe"},
+	{value: "mention_only", label: "Mention Only"},
 ] as const;
 
 const RESPONSE_MODE_DESCRIPTIONS: Record<string, string> = {
@@ -108,17 +109,17 @@ const RESPONSE_MODE_DESCRIPTIONS: Record<string, string> = {
 };
 
 const WORKER_HISTORY_OPTIONS = [
-	{ value: "none", label: "None" },
-	{ value: "summary", label: "Summary" },
-	{ value: "recent", label: "Recent (20)" },
-	{ value: "full", label: "Full" },
+	{value: "none", label: "None"},
+	{value: "summary", label: "Summary"},
+	{value: "recent", label: "Recent (20)"},
+	{value: "full", label: "Full"},
 ] as const;
 
 const WORKER_MEMORY_OPTIONS = [
-	{ value: "none", label: "None" },
-	{ value: "ambient", label: "Read-only" },
-	{ value: "tools", label: "Can search" },
-	{ value: "full", label: "Full access" },
+	{value: "none", label: "None"},
+	{value: "ambient", label: "Read-only"},
+	{value: "tools", label: "Can search"},
+	{value: "full", label: "Full access"},
 ] as const;
 
 /** Group models by provider for the select dropdown. */
@@ -147,7 +148,7 @@ function SettingField({
 		<div className="flex flex-col gap-1">
 			<div className="flex items-center justify-between gap-3">
 				<label className="shrink-0 text-xs text-ink-dull">{label}</label>
-				<div className="w-40">{children}</div>
+				<div className="flex w-40 justify-end">{children}</div>
 			</div>
 			{description && (
 				<p className="text-[11px] leading-snug text-ink-faint">{description}</p>
@@ -166,11 +167,124 @@ function SettingRow({
 	return (
 		<div className="flex items-center justify-between gap-3">
 			<label className="shrink-0 text-xs text-ink-dull">{label}</label>
-			<div className="w-40">{children}</div>
+			<div className="flex w-40 justify-end">{children}</div>
 		</div>
 	);
 }
 
+/** Popover + SelectPill + OptionList wrapper for simple option lists. */
+function SettingSelect<T extends string>({
+	value,
+	options,
+	onChange,
+}: {
+	value: T;
+	options: ReadonlyArray<{value: T; label: string}>;
+	onChange: (value: T) => void;
+}) {
+	const [open, setOpen] = useState(false);
+	const selectedLabel = options.find((o) => o.value === value)?.label ?? value;
+
+	return (
+		<Popover.Root open={open} onOpenChange={setOpen}>
+			<Popover.Trigger asChild>
+				<SelectPill size="sm">{selectedLabel}</SelectPill>
+			</Popover.Trigger>
+			<Popover.Content
+				align="end"
+				sideOffset={4}
+				className="min-w-[160px] p-1.5"
+			>
+				<OptionList>
+					{options.map((opt) => (
+						<OptionListItem
+							key={opt.value}
+							selected={opt.value === value}
+							size="sm"
+							onClick={() => {
+								onChange(opt.value);
+								setOpen(false);
+							}}
+						>
+							{opt.label}
+						</OptionListItem>
+					))}
+				</OptionList>
+			</Popover.Content>
+		</Popover.Root>
+	);
+}
+
+/** Model picker with provider groups. */
+function ModelSelect({
+	value,
+	modelGroups,
+	onChange,
+	inheritOption,
+}: {
+	value: string;
+	modelGroups: Record<string, ConversationDefaultsResponse["available_models"]>;
+	onChange: (value: string) => void;
+	inheritOption?: boolean;
+}) {
+	const [open, setOpen] = useState(false);
+
+	const allModels = Object.values(modelGroups).flat();
+	const selectedLabel =
+		value === "__inherit__"
+			? "Inherit"
+			: (allModels.find((m) => m.id === value)?.name ?? value);
+
+	return (
+		<Popover.Root open={open} onOpenChange={setOpen}>
+			<Popover.Trigger asChild>
+				<SelectPill size="sm">{selectedLabel}</SelectPill>
+			</Popover.Trigger>
+			<Popover.Content
+				align="end"
+				sideOffset={4}
+				className="max-h-60 min-w-[200px] overflow-y-auto p-1.5"
+			>
+				<OptionList>
+					{inheritOption && (
+						<OptionListItem
+							selected={value === "__inherit__"}
+							size="sm"
+							className="italic"
+							onClick={() => {
+								onChange("__inherit__");
+								setOpen(false);
+							}}
+						>
+							Inherit
+						</OptionListItem>
+					)}
+					{Object.entries(modelGroups).map(([provider, models]) => (
+						<div key={provider}>
+							<div className="px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-ink-faint">
+								{provider}
+							</div>
+							{models.map((m) => (
+								<OptionListItem
+									key={m.id}
+									selected={m.id === value}
+									size="sm"
+									onClick={() => {
+										onChange(m.id);
+										setOpen(false);
+									}}
+								>
+									{m.name}
+								</OptionListItem>
+							))}
+						</div>
+					))}
+				</OptionList>
+			</Popover.Content>
+		</Popover.Root>
+	);
+}
+
 export function ConversationSettingsPanel({
 	defaults,
 	currentSettings,
@@ -193,11 +307,9 @@ export function ConversationSettingsPanel({
 				{PRESETS.map((preset) => (
 					<button
 						key={preset.id}
-						onClick={() =>
-							onChange({ ...currentSettings, ...preset.settings })
-						}
+						onClick={() => onChange({...currentSettings, ...preset.settings})}
 						title={preset.description}
-						className="rounded-md border border-app-line bg-app-darkBox px-2.5 py-1 text-xs text-ink-dull transition-colors hover:border-accent/40 hover:text-ink"
+						className="rounded-md border border-app-line bg-app-dark-box px-2.5 py-1 text-xs text-ink-dull transition-colors hover:border-accent/40 hover:text-ink"
 					>
 						{preset.name}
 					</button>
@@ -206,127 +318,63 @@ export function ConversationSettingsPanel({
 
 			{/* Core settings */}
 			<div className="flex flex-col gap-3">
-				<SettingField label="Model" description="Which LLM powers this conversation. Inherited by workers and branches unless overridden below.">
-					<Select
+				<SettingField
+					label="Model"
+					description="Which LLM powers this conversation. Inherited by workers and branches unless overridden below."
+				>
+					<ModelSelect
 						value={currentSettings.model || defaults.model}
-						onValueChange={(value) =>
-							onChange({ ...currentSettings, model: value })
-						}
-					>
-						<SelectTrigger className="h-7 text-xs">
-							<SelectValue />
-						</SelectTrigger>
-						<SelectContent>
-							{Object.entries(modelGroups).map(
-								([provider, models]) => (
-									<SelectGroup key={provider}>
-										<SelectLabel>{provider}</SelectLabel>
-										{models.map((m) => (
-											<SelectItem
-												key={m.id}
-												value={m.id}
-												className="text-xs"
-											>
-												{m.name}
-											</SelectItem>
-										))}
-									</SelectGroup>
-								),
-							)}
-						</SelectContent>
-					</Select>
+						modelGroups={modelGroups}
+						onChange={(value) => onChange({...currentSettings, model: value})}
+					/>
 				</SettingField>
 
 				<SettingField
 					label="Memory"
 					description={MEMORY_DESCRIPTIONS[currentMemory]}
 				>
-					<Select
+					<SettingSelect
 						value={currentMemory}
-						onValueChange={(value) =>
+						options={MEMORY_OPTIONS}
+						onChange={(value) =>
 							onChange({
 								...currentSettings,
 								memory: value as ConversationSettings["memory"],
 							})
 						}
-					>
-						<SelectTrigger className="h-7 text-xs">
-							<SelectValue />
-						</SelectTrigger>
-						<SelectContent>
-							{MEMORY_OPTIONS.map((opt) => (
-								<SelectItem
-									key={opt.value}
-									value={opt.value}
-									className="text-xs"
-								>
-									{opt.label}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
+					/>
 				</SettingField>
 
 				<SettingField
 					label="Mode"
 					description={DELEGATION_DESCRIPTIONS[currentDelegation]}
 				>
-					<Select
+					<SettingSelect
 						value={currentDelegation}
-						onValueChange={(value) =>
+						options={DELEGATION_OPTIONS}
+						onChange={(value) =>
 							onChange({
 								...currentSettings,
-								delegation:
-									value as ConversationSettings["delegation"],
+								delegation: value as ConversationSettings["delegation"],
 							})
 						}
-					>
-						<SelectTrigger className="h-7 text-xs">
-							<SelectValue />
-						</SelectTrigger>
-						<SelectContent>
-							{DELEGATION_OPTIONS.map((opt) => (
-								<SelectItem
-									key={opt.value}
-									value={opt.value}
-									className="text-xs"
-								>
-									{opt.label}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
+					/>
 				</SettingField>
 
 				<SettingField
 					label="Response"
 					description={RESPONSE_MODE_DESCRIPTIONS[currentResponseMode]}
 				>
-					<Select
+					<SettingSelect
 						value={currentResponseMode}
-						onValueChange={(value) =>
+						options={RESPONSE_MODE_OPTIONS}
+						onChange={(value) =>
 							onChange({
 								...currentSettings,
-								response_mode:
-									value as ConversationSettings["response_mode"],
+								response_mode: value as ConversationSettings["response_mode"],
 							})
 						}
-					>
-						<SelectTrigger className="h-7 text-xs">
-							<SelectValue />
-						</SelectTrigger>
-						<SelectContent>
-							{RESPONSE_MODE_OPTIONS.map((opt) => (
-								<SelectItem
-									key={opt.value}
-									value={opt.value}
-									className="text-xs"
-								>
-									{opt.label}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
+					/>
 				</SettingField>
 			</div>
 
@@ -347,69 +395,34 @@ export function ConversationSettingsPanel({
 					>
 						<div />
 					</SettingField>
-					{(["channel", "branch", "worker"] as const).map(
-						(process) => (
-							<SettingRow
-								key={process}
-								label={
-									process.charAt(0).toUpperCase() +
-									process.slice(1)
+					{(["channel", "branch", "worker"] as const).map((process) => (
+						<SettingRow
+							key={process}
+							label={process.charAt(0).toUpperCase() + process.slice(1)}
+						>
+							<ModelSelect
+								value={
+									currentSettings.model_overrides?.[process] || "__inherit__"
 								}
-							>
-								<Select
-									value={
-										currentSettings.model_overrides?.[
-											process
-										] || "__inherit__"
+								modelGroups={modelGroups}
+								inheritOption
+								onChange={(value) => {
+									const overrides = {
+										...currentSettings.model_overrides,
+									};
+									if (value === "__inherit__") {
+										delete overrides[process];
+									} else {
+										overrides[process] = value;
 									}
-									onValueChange={(value) => {
-										const overrides = {
-											...currentSettings.model_overrides,
-										};
-										if (value === "__inherit__") {
-											delete overrides[process];
-										} else {
-											overrides[process] = value;
-										}
-										onChange({
-											...currentSettings,
-											model_overrides: overrides,
-										});
-									}}
-								>
-									<SelectTrigger className="h-7 text-xs">
-										<SelectValue />
-									</SelectTrigger>
-									<SelectContent>
-										<SelectItem
-											value="__inherit__"
-											className="text-xs italic"
-										>
-											Inherit
-										</SelectItem>
-										{Object.entries(modelGroups).map(
-											([provider, models]) => (
-												<SelectGroup key={provider}>
-													<SelectLabel>
-														{provider}
-													</SelectLabel>
-													{models.map((m) => (
-														<SelectItem
-															key={m.id}
-															value={m.id}
-															className="text-xs"
-														>
-															{m.name}
-														</SelectItem>
-													))}
-												</SelectGroup>
-											),
-										)}
-									</SelectContent>
-								</Select>
-							</SettingRow>
-						),
-					)}
+									onChange({
+										...currentSettings,
+										model_overrides: overrides,
+									});
+								}}
+							/>
+						</SettingRow>
+					))}
 
 					<SettingField
 						label="Worker context"
@@ -418,12 +431,13 @@ export function ConversationSettingsPanel({
 						<div />
 					</SettingField>
 					<SettingRow label="History">
-						<Select
+						<SettingSelect
 							value={
 								currentSettings.worker_context?.history ||
 								defaults.worker_context.history
 							}
-							onValueChange={(value) =>
+							options={WORKER_HISTORY_OPTIONS}
+							onChange={(value) =>
 								onChange({
 									...currentSettings,
 									worker_context: {
@@ -432,31 +446,17 @@ export function ConversationSettingsPanel({
 									},
 								})
 							}
-						>
-							<SelectTrigger className="h-7 text-xs">
-								<SelectValue />
-							</SelectTrigger>
-							<SelectContent>
-								{WORKER_HISTORY_OPTIONS.map((opt) => (
-									<SelectItem
-										key={opt.value}
-										value={opt.value}
-										className="text-xs"
-									>
-										{opt.label}
-									</SelectItem>
-								))}
-							</SelectContent>
-						</Select>
+						/>
 					</SettingRow>
 
 					<SettingRow label="Memory">
-						<Select
+						<SettingSelect
 							value={
 								currentSettings.worker_context?.memory ||
 								defaults.worker_context.memory
 							}
-							onValueChange={(value) =>
+							options={WORKER_MEMORY_OPTIONS}
+							onChange={(value) =>
 								onChange({
 									...currentSettings,
 									worker_context: {
@@ -465,22 +465,7 @@ export function ConversationSettingsPanel({
 									},
 								})
 							}
-						>
-							<SelectTrigger className="h-7 text-xs">
-								<SelectValue />
-							</SelectTrigger>
-							<SelectContent>
-								{WORKER_MEMORY_OPTIONS.map((opt) => (
-									<SelectItem
-										key={opt.value}
-										value={opt.value}
-										className="text-xs"
-									>
-										{opt.label}
-									</SelectItem>
-								))}
-							</SelectContent>
-						</Select>
+						/>
 					</SettingRow>
 				</div>
 			)}
@@ -488,21 +473,11 @@ export function ConversationSettingsPanel({
 			{/* Actions */}
 			<div className="flex items-center justify-end gap-2 pt-1">
 				{onCancel && (
-					<Button
-						variant="ghost"
-						size="sm"
-						onClick={onCancel}
-						className="h-7 text-xs"
-					>
+					<Button variant="gray" onClick={onCancel}>
 						Cancel
 					</Button>
 				)}
-				<Button
-					size="sm"
-					onClick={onSave}
-					disabled={saving}
-					className="h-7 text-xs"
-				>
+				<Button variant="accent" onClick={onSave} disabled={saving}>
 					{saving ? "Saving..." : "Apply"}
 				</Button>
 			</div>
diff --git a/interface/src/components/ConversationsSidebar.tsx b/interface/src/components/ConversationsSidebar.tsx
index 7a0ff651b..790551a68 100644
--- a/interface/src/components/ConversationsSidebar.tsx
+++ b/interface/src/components/ConversationsSidebar.tsx
@@ -1,13 +1,5 @@
 import {useState} from "react";
-import {Button} from "@/ui/Button";
-import {
-	Dialog,
-	DialogContent,
-	DialogHeader,
-	DialogTitle,
-	DialogFooter,
-} from "@/ui/Dialog";
-import {Input} from "@/ui/Input";
+import {Button, Input, DialogRoot, DialogContent, DialogHeader, DialogTitle, DialogFooter} from "@spacedrive/primitives";
 import type {PortalConversationSummary} from "@/api/types";
 
 interface ConversationsSidebarProps {
@@ -237,7 +229,7 @@ export function ConversationsSidebar({
 			</div>
 
 			{/* Rename Dialog */}
-			<Dialog open={renameDialogOpen} onOpenChange={setRenameDialogOpen}>
+			<DialogRoot open={renameDialogOpen} onOpenChange={setRenameDialogOpen}>
 				<DialogContent>
 					<DialogHeader>
 						<DialogTitle>Rename Conversation</DialogTitle>
@@ -260,10 +252,10 @@ export function ConversationsSidebar({
 						<Button onClick={confirmRename}>Rename</Button>
 					</DialogFooter>
 				</DialogContent>
-			</Dialog>
+			</DialogRoot>
 
 			{/* Delete Dialog */}
-			<Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+			<DialogRoot open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
 				<DialogContent>
 					<DialogHeader>
 						<DialogTitle>Delete Conversation</DialogTitle>
@@ -279,12 +271,12 @@ export function ConversationsSidebar({
 						>
 							Cancel
 						</Button>
-						<Button variant="destructive" onClick={confirmDelete}>
+						<Button variant="accent" onClick={confirmDelete}>
 							Delete
 						</Button>
 					</DialogFooter>
 				</DialogContent>
-			</Dialog>
+			</DialogRoot>
 		</div>
 	);
 }
diff --git a/interface/src/components/CortexChatPanel.tsx b/interface/src/components/CortexChatPanel.tsx
index 5ec03b031..49b6bf56d 100644
--- a/interface/src/components/CortexChatPanel.tsx
+++ b/interface/src/components/CortexChatPanel.tsx
@@ -2,11 +2,19 @@ import {useCallback, useEffect, useRef, useState} from "react";
 import {useCortexChat, type ToolActivity} from "@/hooks/useCortexChat";
 import {Markdown} from "@/components/Markdown";
 import {ToolCall, type ToolCallPair} from "@/components/ToolCall";
-import {api, type CortexChatToolCall, type CortexChatThread} from "@/api/client";
-import {Button} from "@/ui";
-import {Popover, PopoverContent, PopoverTrigger} from "@/ui/Popover";
-import {PlusSignIcon, Cancel01Icon, Clock01Icon, Delete02Icon} from "@hugeicons/core-free-icons";
-import {HugeiconsIcon} from "@hugeicons/react";
+import {
+	api,
+	type CortexChatToolCall,
+	type CortexChatThread,
+} from "@/api/client";
+import {
+	CircleButton,
+	CircleButtonGroup,
+	PopoverRoot,
+	PopoverContent,
+	PopoverTrigger,
+} from "@spacedrive/primitives";
+import {Plus, X, Clock, Trash} from "@phosphor-icons/react";
 
 interface CortexChatPanelProps {
 	agentId: string;
@@ -114,7 +122,7 @@ function EmptyCortexState({
 
 	return (
 		<div className="mx-auto w-full max-w-md">
-			<div className="rounded-2xl border border-app-line/40 bg-app-darkBox/15 p-5">
+			<div className="rounded-2xl border border-app-line/40 bg-app-dark-box/15 p-5">
 				<h3 className="font-plex text-base font-medium text-ink">
 					Cortex chat
 				</h3>
@@ -274,7 +282,8 @@ function ThreadList({
 	const [loading, setLoading] = useState(true);
 
 	useEffect(() => {
-		api.cortexChatThreads(agentId)
+		api
+			.cortexChatThreads(agentId)
 			.then((data) => setThreads(data.threads))
 			.catch((error) => console.warn("Failed to load threads:", error))
 			.finally(() => setLoading(false));
@@ -344,7 +353,7 @@ function ThreadList({
 								className="mt-0.5 shrink-0 rounded p-0.5 text-ink-faint opacity-0 transition-all hover:bg-red-500/10 hover:text-red-400 group-hover:opacity-100"
 								title="Delete thread"
 							>
-								<HugeiconsIcon icon={Delete02Icon} className="h-3 w-3" />
+								<Trash className="h-3 w-3" />
 							</button>
 						)}
 					</button>
@@ -421,26 +430,32 @@ export function CortexChatPanel({
 							</span>
 						)}
 					</div>
-				<div className="flex items-center gap-0.5">
-					<Popover open={threadListOpen} onOpenChange={setThreadListOpen}>
+					<CircleButtonGroup>
+						<CircleButton
+							icon={Clock}
+							disabled={isStreaming}
+							onClick={() => setThreadListOpen(!threadListOpen)}
+							title="Thread history"
+						/>
+						<CircleButton
+							icon={Plus}
+							onClick={newThread}
+							disabled={isStreaming}
+							title="New thread"
+						/>
+						{onClose && (
+							<CircleButton icon={X} onClick={onClose} title="Close" />
+						)}
+					</CircleButtonGroup>
+					<PopoverRoot open={threadListOpen} onOpenChange={setThreadListOpen}>
 						<PopoverTrigger asChild>
-							<Button
-								variant="ghost"
-								size="icon"
-								disabled={isStreaming}
-								className="h-7 w-7"
-								title="Thread history"
-							>
-								<HugeiconsIcon icon={Clock01Icon} className="h-3.5 w-3.5" />
-							</Button>
+							<span />
 						</PopoverTrigger>
-						<PopoverContent
-							align="end"
-							sideOffset={4}
-							className="w-72 p-0"
-						>
+						<PopoverContent align="end" sideOffset={4} className="w-72 p-0">
 							<div className="flex items-center justify-between border-b border-app-line/40 px-3 py-2">
-								<span className="text-xs font-medium text-ink-dull">Threads</span>
+								<span className="text-xs font-medium text-ink-dull">
+									Threads
+								</span>
 							</div>
 							<ThreadList
 								agentId={agentId}
@@ -449,61 +464,39 @@ export function CortexChatPanel({
 								onClose={() => setThreadListOpen(false)}
 							/>
 						</PopoverContent>
-					</Popover>
-					<Button
-						onClick={newThread}
-						variant="ghost"
-						size="icon"
-						disabled={isStreaming}
-						className="h-7 w-7"
-						title="New thread"
-					>
-						<HugeiconsIcon icon={PlusSignIcon} className="h-3.5 w-3.5" />
-					</Button>
-					{onClose && (
-						<Button
-							onClick={onClose}
-							variant="ghost"
-							size="icon"
-							className="h-7 w-7"
-							title="Close"
-						>
-							<HugeiconsIcon icon={Cancel01Icon} className="h-3.5 w-3.5" />
-						</Button>
-					)}
-				</div>
+					</PopoverRoot>
 				</div>
 			)}
 
 			{/* Messages */}
 			<div className="min-h-0 flex-1 overflow-y-auto">
 				<div className="flex flex-col gap-5 p-3 pb-4">
-				{messages.map((message) => (
-					<div key={message.id}>
-						{message.role === "user" ? (
-							<div className="flex justify-end">
-								<div className="max-w-[85%] rounded-2xl rounded-br-md bg-app-hover/30 px-3 py-2">
-									<p className="text-sm text-ink">{message.content}</p>
-								</div>
-							</div>
-						) : (
-							<div className="flex flex-col gap-2">
-								{message.tool_calls && message.tool_calls.length > 0 && (
-									<div className="flex flex-col gap-1.5">
-										{message.tool_calls.map((call) => (
-											<ToolCall key={call.id} pair={toToolCallPair(call)} />
-										))}
+					{messages.map((message) => (
+						<div key={message.id}>
+							{message.role === "user" ? (
+								<div className="flex justify-end">
+									<div className="max-w-[85%] rounded-2xl rounded-br-md bg-app-hover/30 px-3 py-2">
+										<p className="text-sm text-ink">{message.content}</p>
 									</div>
-								)}
-								{message.content && (
-									<div className="text-sm text-ink-dull">
-										<Markdown>{message.content}</Markdown>
-									</div>
-								)}
-							</div>
-						)}
-					</div>
-				))}
+								</div>
+							) : (
+								<div className="flex flex-col gap-2">
+									{message.tool_calls && message.tool_calls.length > 0 && (
+										<div className="flex flex-col gap-1.5">
+											{message.tool_calls.map((call) => (
+												<ToolCall key={call.id} pair={toToolCallPair(call)} />
+											))}
+										</div>
+									)}
+									{message.content && (
+										<div className="text-sm text-ink-dull">
+											<Markdown>{message.content}</Markdown>
+										</div>
+									)}
+								</div>
+							)}
+						</div>
+					))}
 
 					{/* Streaming state */}
 					{isStreaming && (
diff --git a/interface/src/components/CreateAgentDialog.tsx b/interface/src/components/CreateAgentDialog.tsx
index 4a4c9aa89..80630f25f 100644
--- a/interface/src/components/CreateAgentDialog.tsx
+++ b/interface/src/components/CreateAgentDialog.tsx
@@ -1,9 +1,9 @@
-import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { api, type PresetMeta } from "@/api/client";
-import { Dialog, DialogContent } from "@/ui";
-import { CortexChatPanel } from "@/components/CortexChatPanel";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {useState} from "react";
+import {useQuery} from "@tanstack/react-query";
+import {api, type PresetMeta} from "@/api/client";
+import {DialogRoot, DialogContent} from "@spacedrive/primitives";
+import {CortexChatPanel} from "@/components/CortexChatPanel";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {
 	faRobot,
 	faCode,
@@ -16,7 +16,7 @@ import {
 	faTableColumns,
 	faPlus,
 } from "@fortawesome/free-solid-svg-icons";
-import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import type {IconDefinition} from "@fortawesome/fontawesome-svg-core";
 
 interface CreateAgentDialogProps {
 	open: boolean;
@@ -50,7 +50,7 @@ function PresetCard({
 		<button
 			type="button"
 			onClick={onClick}
-			className="group flex items-start gap-3 rounded-lg border border-app-line/40 bg-app-darkBox/30 p-3 text-left transition-all hover:border-accent/50 hover:bg-accent/5"
+			className="group flex items-start gap-3 rounded-lg border border-app-line/40 bg-app-dark-box/30 p-3 text-left transition-all hover:border-accent/50 hover:bg-accent/5"
 		>
 			<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-app-box/60 text-ink-faint transition-colors group-hover:bg-accent/15 group-hover:text-accent">
 				<FontAwesomeIcon icon={icon} className="h-3.5 w-3.5" />
@@ -65,7 +65,7 @@ function PresetCard({
 	);
 }
 
-function ScratchCard({ onClick }: { onClick: () => void }) {
+function ScratchCard({onClick}: {onClick: () => void}) {
 	return (
 		<button
 			type="button"
@@ -85,11 +85,15 @@ function ScratchCard({ onClick }: { onClick: () => void }) {
 	);
 }
 
-export function CreateAgentDialog({ open, onOpenChange, agentId }: CreateAgentDialogProps) {
+export function CreateAgentDialog({
+	open,
+	onOpenChange,
+	agentId,
+}: CreateAgentDialogProps) {
 	const [selectedPreset, setSelectedPreset] = useState<string | null>(null);
 	const [chatPrompt, setChatPrompt] = useState<string | null>(null);
 
-	const { data } = useQuery({
+	const {data} = useQuery({
 		queryKey: ["factory-presets"],
 		queryFn: api.factoryPresets,
 		enabled: open,
@@ -101,7 +105,7 @@ export function CreateAgentDialog({ open, onOpenChange, agentId }: CreateAgentDi
 		setSelectedPreset(preset.id);
 		setChatPrompt(
 			`I would like to create a new agent using the "${preset.name}" preset (${preset.id}). ` +
-			`Load the preset, walk me through customizing it for my needs, and create the agent when ready.`
+				`Load the preset, walk me through customizing it for my needs, and create the agent when ready.`,
 		);
 	}
 
@@ -109,7 +113,7 @@ export function CreateAgentDialog({ open, onOpenChange, agentId }: CreateAgentDi
 		setSelectedPreset("scratch");
 		setChatPrompt(
 			"I would like to create a new agent from scratch. " +
-			"Ask me what I need, recommend a preset if one fits, and walk me through the creation process."
+				"Ask me what I need, recommend a preset if one fits, and walk me through the creation process.",
 		);
 	}
 
@@ -119,7 +123,7 @@ export function CreateAgentDialog({ open, onOpenChange, agentId }: CreateAgentDi
 	}
 
 	return (
-		<Dialog
+		<DialogRoot
 			open={open}
 			onOpenChange={(v) => {
 				if (!v) handleClose();
@@ -169,7 +173,8 @@ export function CreateAgentDialog({ open, onOpenChange, agentId }: CreateAgentDi
 								<span className="text-sm font-medium text-ink">
 									{selectedPreset === "scratch"
 										? "New Agent"
-										: presets.find((p) => p.id === selectedPreset)?.name ?? "New Agent"}
+										: (presets.find((p) => p.id === selectedPreset)?.name ??
+											"New Agent")}
 								</span>
 							</div>
 						</div>
@@ -183,6 +188,6 @@ export function CreateAgentDialog({ open, onOpenChange, agentId }: CreateAgentDi
 					</div>
 				)}
 			</DialogContent>
-		</Dialog>
+		</DialogRoot>
 	);
 }
diff --git a/interface/src/components/DeleteAgentDialog.tsx b/interface/src/components/DeleteAgentDialog.tsx
index cc34ed4d7..715f62249 100644
--- a/interface/src/components/DeleteAgentDialog.tsx
+++ b/interface/src/components/DeleteAgentDialog.tsx
@@ -2,7 +2,7 @@ import {useState} from "react";
 import {useMutation, useQueryClient} from "@tanstack/react-query";
 import {useNavigate} from "@tanstack/react-router";
 import {api} from "@/api/client";
-import {Button, Input, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter} from "@/ui";
+import {Button, Input, DialogRoot, DialogContent, DialogHeader, DialogTitle, DialogFooter} from "@spacedrive/primitives";
 
 interface DeleteAgentDialogProps {
 	open: boolean;
@@ -42,7 +42,7 @@ export function DeleteAgentDialog({open, onOpenChange, agentId}: DeleteAgentDial
 	}
 
 	return (
-		<Dialog open={open} onOpenChange={(v) => { if (!v) { setError(null); setConfirmation(""); } onOpenChange(v); }}>
+		<DialogRoot open={open} onOpenChange={(v) => { if (!v) { setError(null); setConfirmation(""); } onOpenChange(v); }}>
 			<DialogContent className="max-w-sm">
 				<DialogHeader>
 					<DialogTitle>Delete Agent</DialogTitle>
@@ -72,12 +72,12 @@ export function DeleteAgentDialog({open, onOpenChange, agentId}: DeleteAgentDial
 					)}
 				</div>
 				<DialogFooter>
-					<Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
+					<Button variant="bare" size="sm" onClick={() => onOpenChange(false)}>
 						Cancel
 					</Button>
 					<Button
 						size="sm"
-						variant="destructive"
+						variant="accent"
 						onClick={handleSubmit}
 						loading={deleteMutation.isPending}
 						disabled={!confirmed}
@@ -86,6 +86,6 @@ export function DeleteAgentDialog({open, onOpenChange, agentId}: DeleteAgentDial
 					</Button>
 				</DialogFooter>
 			</DialogContent>
-		</Dialog>
+		</DialogRoot>
 	);
 }
diff --git a/interface/src/components/ErrorBoundary.tsx b/interface/src/components/ErrorBoundary.tsx
index 368c15b0e..e9c9883f4 100644
--- a/interface/src/components/ErrorBoundary.tsx
+++ b/interface/src/components/ErrorBoundary.tsx
@@ -1,4 +1,4 @@
-import { Component, type ErrorInfo, type ReactNode } from "react";
+import {Component, type ErrorInfo, type ReactNode} from "react";
 
 interface Props {
 	children: ReactNode;
@@ -12,11 +12,11 @@ interface State {
 export class ErrorBoundary extends Component<Props, State> {
 	constructor(props: Props) {
 		super(props);
-		this.state = { hasError: false, error: null };
+		this.state = {hasError: false, error: null};
 	}
 
 	static getDerivedStateFromError(error: Error): State {
-		return { hasError: true, error };
+		return {hasError: true, error};
 	}
 
 	componentDidCatch(error: Error, info: ErrorInfo) {
@@ -39,7 +39,7 @@ export class ErrorBoundary extends Component<Props, State> {
 						rendering error.
 					</p>
 					{this.state.error && (
-						<pre className="overflow-auto rounded bg-app-darkBox p-3 text-xs text-ink-dull">
+						<pre className="overflow-auto rounded bg-app-dark-box p-3 text-xs text-ink-dull">
 							{this.state.error.message}
 						</pre>
 					)}
diff --git a/interface/src/components/MemoryGraph.tsx b/interface/src/components/MemoryGraph.tsx
index 14082d5f8..73aab6887 100644
--- a/interface/src/components/MemoryGraph.tsx
+++ b/interface/src/components/MemoryGraph.tsx
@@ -1,9 +1,9 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {useCallback, useEffect, useMemo, useRef, useState} from "react";
 import Graph from "graphology";
 import Sigma from "sigma";
-import { EdgeArrowProgram } from "sigma/rendering";
+import {EdgeArrowProgram} from "sigma/rendering";
 import FA2Layout from "graphology-layout-forceatlas2/worker";
-import { AnimatePresence, motion } from "framer-motion";
+import {AnimatePresence, motion} from "framer-motion";
 import {
 	api,
 	type AssociationItem,
@@ -12,10 +12,15 @@ import {
 	type MemoryType,
 	type RelationType,
 } from "@/api/client";
-import { formatTimeAgo } from "@/lib/format";
-import { Button } from "@/ui";
-import { Target02Icon, PlusSignIcon, MinusSignIcon, RefreshIcon, Cancel01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
+import {formatTimeAgo} from "@/lib/format";
+import {Button, CircleButton} from "@spacedrive/primitives";
+import {
+	Crosshair,
+	Plus,
+	Minus,
+	ArrowsClockwise,
+	X,
+} from "@phosphor-icons/react";
 
 // -- Constants --
 
@@ -53,7 +58,7 @@ interface NodeDetail {
 	y: number;
 }
 
-export function MemoryGraph({ agentId, sort, typeFilter }: MemoryGraphProps) {
+export function MemoryGraph({agentId, sort, typeFilter}: MemoryGraphProps) {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const sigmaRef = useRef<Sigma | null>(null);
 	const graphRef = useRef<Graph | null>(null);
@@ -115,7 +120,7 @@ export function MemoryGraph({ agentId, sort, typeFilter }: MemoryGraphProps) {
 					return;
 				}
 
-				const graph = new Graph({ multi: false, type: "directed" });
+				const graph = new Graph({multi: false, type: "directed"});
 				graphRef.current = graph;
 
 				// Add nodes
@@ -147,7 +152,7 @@ export function MemoryGraph({ agentId, sort, typeFilter }: MemoryGraphProps) {
 					renderLabels: true,
 					labelRenderedSizeThreshold: 12,
 					labelSize: 10,
-					labelColor: { color: "#999999" },
+					labelColor: {color: "#999999"},
 					defaultEdgeType: "arrow",
 					defaultEdgeColor: "#444444",
 					edgeLabelSize: 10,
@@ -155,10 +160,14 @@ export function MemoryGraph({ agentId, sort, typeFilter }: MemoryGraphProps) {
 						arrow: EdgeArrowProgram,
 					},
 					nodeReducer: (node, data) => {
-						const res = { ...data };
+						const res = {...data};
 						if (hoveredNode && hoveredNode !== node) {
 							const graph = graphRef.current;
-							if (graph && !graph.hasEdge(hoveredNode, node) && !graph.hasEdge(node, hoveredNode)) {
+							if (
+								graph &&
+								!graph.hasEdge(hoveredNode, node) &&
+								!graph.hasEdge(node, hoveredNode)
+							) {
 								res.color = FADED_NODE_COLOR;
 								res.label = "";
 							}
@@ -166,7 +175,7 @@ export function MemoryGraph({ agentId, sort, typeFilter }: MemoryGraphProps) {
 						return res;
 					},
 					edgeReducer: (_edge, data) => {
-						return { ...data };
+						return {...data};
 					},
 				});
 
@@ -215,7 +224,7 @@ export function MemoryGraph({ agentId, sort, typeFilter }: MemoryGraphProps) {
 		const sigma = sigmaRef.current;
 		if (!sigma) return;
 
-		function handleClickNode({ node }: { node: string }) {
+		function handleClickNode({node}: {node: string}) {
 			const graph = graphRef.current;
 			const s = sigmaRef.current;
 			if (!graph || !s) return;
@@ -225,7 +234,7 @@ export function MemoryGraph({ agentId, sort, typeFilter }: MemoryGraphProps) {
 			if (!memory) return;
 
 			// Get screen coordinates for the detail panel
-			const position = s.graphToViewport({ x: attrs.x, y: attrs.y });
+			const position = s.graphToViewport({x: attrs.x, y: attrs.y});
 			setSelectedNode({
 				memory,
 				x: position.x,
@@ -233,12 +242,18 @@ export function MemoryGraph({ agentId, sort, typeFilter }: MemoryGraphProps) {
 			});
 		}
 
-		function handleDoubleClickNode({ node, event }: { node: string; event: { preventSigmaDefault: () => void } }) {
+		function handleDoubleClickNode({
+			node,
+			event,
+		}: {
+			node: string;
+			event: {preventSigmaDefault: () => void};
+		}) {
 			event.preventSigmaDefault();
 			expandNeighbors(node);
 		}
 
-		function handleEnterNode({ node }: { node: string }) {
+		function handleEnterNode({node}: {node: string}) {
 			setHoveredNode(node);
 			if (sigmaRef.current) {
 				sigmaRef.current.getContainer().style.cursor = "pointer";
@@ -333,7 +348,7 @@ export function MemoryGraph({ agentId, sort, typeFilter }: MemoryGraphProps) {
 	return (
 		<div className="relative h-full w-full">
 			{/* Stats bar */}
-			<div className="absolute left-4 top-4 z-10 flex items-center gap-3 rounded-md bg-app-darkBox/80 px-3 py-1.5 text-tiny text-ink-faint backdrop-blur-sm">
+			<div className="absolute left-4 top-4 z-10 flex items-center gap-3 rounded-md bg-app-dark-box/80 px-3 py-1.5 text-tiny text-ink-faint backdrop-blur-sm">
 				<span>{nodeCount} nodes</span>
 				<span className="text-app-line">|</span>
 				<span>{edgeCount} edges</span>
@@ -349,34 +364,44 @@ export function MemoryGraph({ agentId, sort, typeFilter }: MemoryGraphProps) {
 			</div>
 
 			{/* Legend */}
-			<div className="absolute bottom-4 left-4 z-10 rounded-md bg-app-darkBox/80 p-3 backdrop-blur-sm">
-				<div className="mb-2 text-tiny font-medium text-ink-faint">Node Types</div>
-				<div className="grid grid-cols-2 gap-x-4 gap-y-1">
-					{(Object.entries(NODE_COLORS) as [MemoryType, string][]).map(([type, color]) => (
-						<div key={type} className="flex items-center gap-1.5">
-							<span
-								className="inline-block h-2 w-2 rounded-full"
-								style={{ backgroundColor: color }}
-							/>
-							<span className="text-tiny text-ink-faint">{type}</span>
-						</div>
-					))}
+			<div className="absolute bottom-4 left-4 z-10 rounded-md bg-app-dark-box/80 p-3 backdrop-blur-sm">
+				<div className="mb-2 text-tiny font-medium text-ink-faint">
+					Node Types
 				</div>
-				<div className="mt-2 border-t border-app-line/30 pt-2">
-					<div className="mb-1 text-tiny font-medium text-ink-faint">Edge Types</div>
-					<div className="grid grid-cols-2 gap-x-4 gap-y-1">
-						{(Object.entries(EDGE_COLORS) as [RelationType, string][]).map(([type, color]) => (
+				<div className="grid grid-cols-2 gap-x-4 gap-y-1">
+					{(Object.entries(NODE_COLORS) as [MemoryType, string][]).map(
+						([type, color]) => (
 							<div key={type} className="flex items-center gap-1.5">
 								<span
-									className="inline-block h-0.5 w-3"
-									style={{
-										backgroundColor: color,
-										borderStyle: type === "contradicts" ? "dashed" : "solid",
-									}}
+									className="inline-block h-2 w-2 rounded-full"
+									style={{backgroundColor: color}}
 								/>
-								<span className="text-tiny text-ink-faint">{type.replace("_", " ")}</span>
+								<span className="text-tiny text-ink-faint">{type}</span>
 							</div>
-						))}
+						),
+					)}
+				</div>
+				<div className="mt-2 border-t border-app-line/30 pt-2">
+					<div className="mb-1 text-tiny font-medium text-ink-faint">
+						Edge Types
+					</div>
+					<div className="grid grid-cols-2 gap-x-4 gap-y-1">
+						{(Object.entries(EDGE_COLORS) as [RelationType, string][]).map(
+							([type, color]) => (
+								<div key={type} className="flex items-center gap-1.5">
+									<span
+										className="inline-block h-0.5 w-3"
+										style={{
+											backgroundColor: color,
+											borderStyle: type === "contradicts" ? "dashed" : "solid",
+										}}
+									/>
+									<span className="text-tiny text-ink-faint">
+										{type.replace("_", " ")}
+									</span>
+								</div>
+							),
+						)}
 					</div>
 				</div>
 				<div className="mt-2 border-t border-app-line/30 pt-2 text-tiny text-ink-faint">
@@ -386,69 +411,55 @@ export function MemoryGraph({ agentId, sort, typeFilter }: MemoryGraphProps) {
 
 			{/* Controls */}
 			<div className="absolute right-4 top-4 z-10 flex flex-col gap-1.5">
-			<Button
-				onClick={() => sigmaRef.current?.getCamera().animatedReset()}
-				variant="ghost"
-				size="icon"
-				className="h-8 w-8 bg-app-darkBox/80 backdrop-blur-sm"
-				title="Reset zoom"
-			>
-				<HugeiconsIcon icon={Target02Icon} className="h-4 w-4" />
-			</Button>
-			<Button
-				onClick={() => {
-					const camera = sigmaRef.current?.getCamera();
-					if (camera) camera.animatedZoom({ duration: 200 });
-				}}
-				variant="ghost"
-				size="icon"
-				className="h-8 w-8 bg-app-darkBox/80 backdrop-blur-sm"
-				title="Zoom in"
-			>
-				<HugeiconsIcon icon={PlusSignIcon} className="h-4 w-4" />
-			</Button>
-			<Button
-				onClick={() => {
-					const camera = sigmaRef.current?.getCamera();
-					if (camera) camera.animatedUnzoom({ duration: 200 });
-				}}
-				variant="ghost"
-				size="icon"
-				className="h-8 w-8 bg-app-darkBox/80 backdrop-blur-sm"
-				title="Zoom out"
-			>
-				<HugeiconsIcon icon={MinusSignIcon} className="h-4 w-4" />
-			</Button>
-			<Button
-				onClick={() => {
-					const layout = layoutRef.current;
-					if (layout) {
-						if (layout.isRunning()) {
-							layout.stop();
-						} else {
-							layout.start();
-							setTimeout(() => { if (layout.isRunning()) layout.stop(); }, 3000);
+				<CircleButton
+					icon={Crosshair}
+					onClick={() => sigmaRef.current?.getCamera().animatedReset()}
+					title="Reset zoom"
+				/>
+				<CircleButton
+					icon={Plus}
+					onClick={() => {
+						const camera = sigmaRef.current?.getCamera();
+						if (camera) camera.animatedZoom({duration: 200});
+					}}
+					title="Zoom in"
+				/>
+				<CircleButton
+					icon={Minus}
+					onClick={() => {
+						const camera = sigmaRef.current?.getCamera();
+						if (camera) camera.animatedUnzoom({duration: 200});
+					}}
+					title="Zoom out"
+				/>
+				<CircleButton
+					icon={ArrowsClockwise}
+					onClick={() => {
+						const layout = layoutRef.current;
+						if (layout) {
+							if (layout.isRunning()) {
+								layout.stop();
+							} else {
+								layout.start();
+								setTimeout(() => {
+									if (layout.isRunning()) layout.stop();
+								}, 3000);
+							}
 						}
-					}
-				}}
-				variant="ghost"
-				size="icon"
-				className="h-8 w-8 bg-app-darkBox/80 backdrop-blur-sm"
-				title="Re-run layout"
-			>
-				<HugeiconsIcon icon={RefreshIcon} className="h-4 w-4" />
-			</Button>
+					}}
+					title="Re-run layout"
+				/>
 			</div>
 
 			{/* Node detail panel */}
 			<AnimatePresence>
 				{selectedNode && (
 					<motion.div
-						initial={{ opacity: 0, y: 8 }}
-						animate={{ opacity: 1, y: 0 }}
-						exit={{ opacity: 0, y: 8 }}
-						transition={{ duration: 0.15 }}
-						className="absolute right-4 bottom-4 z-20 w-80 rounded-lg border border-app-line/50 bg-app-darkBox/95 p-4 shadow-xl backdrop-blur-sm"
+						initial={{opacity: 0, y: 8}}
+						animate={{opacity: 1, y: 0}}
+						exit={{opacity: 0, y: 8}}
+						transition={{duration: 0.15}}
+						className="absolute right-4 bottom-4 z-20 w-80 rounded-lg border border-app-line/50 bg-app-dark-box/95 p-4 shadow-xl backdrop-blur-sm"
 					>
 						<div className="mb-2 flex items-center justify-between">
 							<span
@@ -460,22 +471,26 @@ export function MemoryGraph({ agentId, sort, typeFilter }: MemoryGraphProps) {
 							>
 								{selectedNode.memory.memory_type}
 							</span>
-						<Button
-							onClick={() => setSelectedNode(null)}
-							variant="ghost"
-							size="icon"
-							className="h-7 w-7"
-						>
-							<HugeiconsIcon icon={Cancel01Icon} className="h-3.5 w-3.5" />
-						</Button>
+							<Button
+								onClick={() => setSelectedNode(null)}
+								variant="bare"
+								size="icon"
+								className="h-7 w-7"
+							>
+								<X className="h-3.5 w-3.5" />
+							</Button>
 						</div>
 						<p className="mb-3 max-h-32 overflow-y-auto whitespace-pre-wrap text-sm leading-relaxed text-ink-dull">
 							{selectedNode.memory.content}
 						</p>
 						<div className="flex flex-wrap gap-x-4 gap-y-1 text-tiny text-ink-faint">
-							<span>Importance: {selectedNode.memory.importance.toFixed(2)}</span>
+							<span>
+								Importance: {selectedNode.memory.importance.toFixed(2)}
+							</span>
 							<span>Accessed: {selectedNode.memory.access_count}x</span>
-							<span>Created: {formatTimeAgo(selectedNode.memory.created_at)}</span>
+							<span>
+								Created: {formatTimeAgo(selectedNode.memory.created_at)}
+							</span>
 							{selectedNode.memory.source && (
 								<span>Source: {selectedNode.memory.source}</span>
 							)}
@@ -496,7 +511,7 @@ export function MemoryGraph({ agentId, sort, typeFilter }: MemoryGraphProps) {
 			<div
 				ref={containerRef}
 				className="h-full w-full"
-				style={{ background: "transparent" }}
+				style={{background: "transparent"}}
 			/>
 
 			{/* Loading / error / empty states */}
diff --git a/interface/src/components/ModelSelect.tsx b/interface/src/components/ModelSelect.tsx
index c44b5173c..660d191f8 100644
--- a/interface/src/components/ModelSelect.tsx
+++ b/interface/src/components/ModelSelect.tsx
@@ -1,235 +1,235 @@
-import { api, type ModelInfo } from "@/api/client";
-import { Input } from "@/ui";
-import { useQuery } from "@tanstack/react-query";
-import { useEffect, useMemo, useRef, useState } from "react";
+import {api, type ModelInfo} from "@/api/client";
+import {Input} from "@spacedrive/primitives";
+import {useQuery} from "@tanstack/react-query";
+import {useEffect, useMemo, useRef, useState} from "react";
 
 interface ModelSelectProps {
-  label: string;
-  description: string;
-  value: string;
-  onChange: (value: string) => void;
-  provider?: string;
-  capability?: "input_audio" | "voice_transcription";
+	label: string;
+	description: string;
+	value: string;
+	onChange: (value: string) => void;
+	provider?: string;
+	capability?: "input_audio" | "voice_transcription";
 }
 
 const PROVIDER_LABELS: Record<string, string> = {
-  anthropic: "Anthropic",
-  openrouter: "OpenRouter",
-  kilo: "Kilo Gateway",
-  openai: "OpenAI",
-  "openai-chatgpt": "ChatGPT Plus (OAuth)",
-  deepseek: "DeepSeek",
-  xai: "xAI",
-  mistral: "Mistral",
-  gemini: "Google Gemini",
-  groq: "Groq",
-  together: "Together AI",
-  fireworks: "Fireworks AI",
-  zhipu: "Z.ai (GLM)",
-  ollama: "Ollama",
-  "opencode-zen": "OpenCode Zen",
-  "opencode-go": "OpenCode Go",
-  minimax: "MiniMax",
-  "minimax-cn": "MiniMax CN",
-  "github-copilot": "GitHub Copilot",
+	anthropic: "Anthropic",
+	openrouter: "OpenRouter",
+	kilo: "Kilo Gateway",
+	openai: "OpenAI",
+	"openai-chatgpt": "ChatGPT Plus (OAuth)",
+	deepseek: "DeepSeek",
+	xai: "xAI",
+	mistral: "Mistral",
+	gemini: "Google Gemini",
+	groq: "Groq",
+	together: "Together AI",
+	fireworks: "Fireworks AI",
+	zhipu: "Z.ai (GLM)",
+	ollama: "Ollama",
+	"opencode-zen": "OpenCode Zen",
+	"opencode-go": "OpenCode Go",
+	minimax: "MiniMax",
+	"minimax-cn": "MiniMax CN",
+	"github-copilot": "GitHub Copilot",
 };
 
 function formatContextWindow(tokens: number | null): string {
-  if (!tokens) return "";
-  if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(1)}M`;
-  return `${Math.round(tokens / 1000)}K`;
+	if (!tokens) return "";
+	if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(1)}M`;
+	return `${Math.round(tokens / 1000)}K`;
 }
 
 export function ModelSelect({
-  label,
-  description,
-  value,
-  onChange,
-  provider,
-  capability,
+	label,
+	description,
+	value,
+	onChange,
+	provider,
+	capability,
 }: ModelSelectProps) {
-  const [open, setOpen] = useState(false);
-  const [filter, setFilter] = useState("");
-  const containerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
+	const [open, setOpen] = useState(false);
+	const [filter, setFilter] = useState("");
+	const containerRef = useRef<HTMLDivElement>(null);
+	const inputRef = useRef<HTMLInputElement>(null);
 
-  const { data } = useQuery({
-    queryKey: ["models", provider ?? "configured", capability ?? "all"],
-    queryFn: () => api.models(provider, capability),
-    staleTime: 60_000,
-  });
+	const {data} = useQuery({
+		queryKey: ["models", provider ?? "configured", capability ?? "all"],
+		queryFn: () => api.models(provider, capability),
+		staleTime: 60_000,
+	});
 
-  const models = data?.models ?? [];
+	const models = data?.models ?? [];
 
-  // Filter and group models
-  const filtered = useMemo(() => {
-    const query = filter.toLowerCase();
-    if (!query) return models;
-    return models.filter(
-      (m) =>
-        m.id.toLowerCase().includes(query) ||
-        m.name.toLowerCase().includes(query) ||
-        m.provider.toLowerCase().includes(query),
-    );
-  }, [models, filter]);
+	// Filter and group models
+	const filtered = useMemo(() => {
+		const query = filter.toLowerCase();
+		if (!query) return models;
+		return models.filter(
+			(m) =>
+				m.id.toLowerCase().includes(query) ||
+				m.name.toLowerCase().includes(query) ||
+				m.provider.toLowerCase().includes(query),
+		);
+	}, [models, filter]);
 
-  const grouped = useMemo(() => {
-    const groups: Record<string, ModelInfo[]> = {};
-    for (const model of filtered) {
-      const key = model.provider;
-      if (!groups[key]) groups[key] = [];
-      groups[key].push(model);
-    }
-    for (const key of Object.keys(groups)) {
-      groups[key].sort((a, b) => a.name.localeCompare(b.name));
-    }
-    return groups;
-  }, [filtered]);
+	const grouped = useMemo(() => {
+		const groups: Record<string, ModelInfo[]> = {};
+		for (const model of filtered) {
+			const key = model.provider;
+			if (!groups[key]) groups[key] = [];
+			groups[key].push(model);
+		}
+		for (const key of Object.keys(groups)) {
+			groups[key].sort((a, b) => a.name.localeCompare(b.name));
+		}
+		return groups;
+	}, [filtered]);
 
-  // Close on outside click
-  useEffect(() => {
-    const handler = (e: MouseEvent) => {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(e.target as Node)
-      ) {
-        setOpen(false);
-        setFilter("");
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, []);
+	// Close on outside click
+	useEffect(() => {
+		const handler = (e: MouseEvent) => {
+			if (
+				containerRef.current &&
+				!containerRef.current.contains(e.target as Node)
+			) {
+				setOpen(false);
+				setFilter("");
+			}
+		};
+		document.addEventListener("mousedown", handler);
+		return () => document.removeEventListener("mousedown", handler);
+	}, []);
 
-  const handleSelect = (modelId: string) => {
-    onChange(modelId);
-    setOpen(false);
-    setFilter("");
-  };
+	const handleSelect = (modelId: string) => {
+		onChange(modelId);
+		setOpen(false);
+		setFilter("");
+	};
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value;
-    setFilter(val);
-    if (!open) setOpen(true);
-    // Allow free-form input for custom model IDs
-    onChange(val);
-  };
+	const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const val = e.target.value;
+		setFilter(val);
+		if (!open) setOpen(true);
+		// Allow free-form input for custom model IDs
+		onChange(val);
+	};
 
-  const handleFocus = () => {
-    setOpen(true);
-    // Start filtering from current value
-    setFilter(value);
-  };
+	const handleFocus = () => {
+		setOpen(true);
+		// Start filtering from current value
+		setFilter(value);
+	};
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Escape") {
-      setOpen(false);
-      setFilter("");
-      inputRef.current?.blur();
-    }
-  };
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === "Escape") {
+			setOpen(false);
+			setFilter("");
+			inputRef.current?.blur();
+		}
+	};
 
-  const providerOrder = [
-    "openrouter",
-    "kilo",
-    "anthropic",
-    "openai",
-    "openai-chatgpt",
-    "github-copilot",
-    "ollama",
-    "deepseek",
-    "xai",
-    "mistral",
-    "gemini",
-    "groq",
-    "together",
-    "fireworks",
-    "zhipu",
-    "opencode-zen",
-    "opencode-go",
-    "minimax",
-    "minimax-cn",
-  ];
-  const providerRank = (provider: string) => {
-    const index = providerOrder.indexOf(provider);
-    return index === -1 ? Number.MAX_SAFE_INTEGER : index;
-  };
-  const sortedProviders = Object.keys(grouped).sort(
-    (a, b) => providerRank(a) - providerRank(b),
-  );
+	const providerOrder = [
+		"openrouter",
+		"kilo",
+		"anthropic",
+		"openai",
+		"openai-chatgpt",
+		"github-copilot",
+		"ollama",
+		"deepseek",
+		"xai",
+		"mistral",
+		"gemini",
+		"groq",
+		"together",
+		"fireworks",
+		"zhipu",
+		"opencode-zen",
+		"opencode-go",
+		"minimax",
+		"minimax-cn",
+	];
+	const providerRank = (provider: string) => {
+		const index = providerOrder.indexOf(provider);
+		return index === -1 ? Number.MAX_SAFE_INTEGER : index;
+	};
+	const sortedProviders = Object.keys(grouped).sort(
+		(a, b) => providerRank(a) - providerRank(b),
+	);
 
-  return (
-    <div className="flex flex-col gap-1.5" ref={containerRef}>
-      <label className="text-sm font-medium text-ink">{label}</label>
-      <p className="text-tiny text-ink-faint">{description}</p>
-      <div className="relative mt-1">
-        <Input
-          ref={inputRef}
-          type="text"
-          value={open ? filter : value}
-          onChange={handleInputChange}
-          onFocus={handleFocus}
-          onKeyDown={handleKeyDown}
-          placeholder="Type to search models..."
-          className="border-app-line/50 bg-app-darkBox/30"
-        />
-        {open && filtered.length > 0 && (
-          <div className="absolute z-50 mt-1 w-full max-h-72 overflow-y-auto rounded-md border border-app-line bg-app-box shadow-lg">
-            {sortedProviders.map((provider) => (
-              <div key={provider}>
-                <div className="sticky top-0 bg-app-box/95 backdrop-blur-sm px-3 py-1.5 text-xs font-semibold text-ink-dull border-b border-app-line/30">
-                  {PROVIDER_LABELS[provider] ?? provider}
-                </div>
-                {grouped[provider].map((model) => (
-                  <button
-                    key={model.id}
-                    type="button"
-                    className={`w-full text-left px-3 py-1.5 text-sm hover:bg-app-selected transition-colors flex items-center justify-between gap-2 ${
-                      model.id === value
-                        ? "bg-app-selected/50 text-ink"
-                        : "text-ink"
-                    }`}
-                    onMouseDown={(e) => {
-                      e.preventDefault();
-                      handleSelect(model.id);
-                    }}
-                  >
-                    <div className="flex flex-col min-w-0">
-                      <span className="truncate font-medium">{model.name}</span>
-                      <span className="text-xs text-ink-faint truncate">
-                        {model.id}
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-1.5 shrink-0">
-                      {model.context_window && (
-                        <span className="text-xs text-ink-faint">
-                          {formatContextWindow(model.context_window)}
-                        </span>
-                      )}
-                      {model.tool_call && (
-                        <span
-                          className="text-[10px] px-1 py-0.5 rounded bg-accent/15 text-accent font-medium"
-                          title="Tool calling"
-                        >
-                          tools
-                        </span>
-                      )}
-                      {model.reasoning && (
-                        <span
-                          className="text-[10px] px-1 py-0.5 rounded bg-purple-500/15 text-purple-400 font-medium"
-                          title="Reasoning"
-                        >
-                          think
-                        </span>
-                      )}
-                    </div>
-                  </button>
-                ))}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
+	return (
+		<div className="flex flex-col gap-1.5" ref={containerRef}>
+			<label className="text-sm font-medium text-ink">{label}</label>
+			<p className="text-tiny text-ink-faint">{description}</p>
+			<div className="relative mt-1">
+				<Input
+					ref={inputRef}
+					type="text"
+					value={open ? filter : value}
+					onChange={handleInputChange}
+					onFocus={handleFocus}
+					onKeyDown={handleKeyDown}
+					placeholder="Type to search models..."
+					className="border-app-line/50 bg-app-dark-box/30"
+				/>
+				{open && filtered.length > 0 && (
+					<div className="absolute z-50 mt-1 w-full max-h-72 overflow-y-auto rounded-md border border-app-line bg-app-box shadow-lg">
+						{sortedProviders.map((provider) => (
+							<div key={provider}>
+								<div className="sticky top-0 bg-app-box/95 backdrop-blur-sm px-3 py-1.5 text-xs font-semibold text-ink-dull border-b border-app-line/30">
+									{PROVIDER_LABELS[provider] ?? provider}
+								</div>
+								{grouped[provider].map((model) => (
+									<button
+										key={model.id}
+										type="button"
+										className={`w-full text-left px-3 py-1.5 text-sm hover:bg-app-selected transition-colors flex items-center justify-between gap-2 ${
+											model.id === value
+												? "bg-app-selected/50 text-ink"
+												: "text-ink"
+										}`}
+										onMouseDown={(e) => {
+											e.preventDefault();
+											handleSelect(model.id);
+										}}
+									>
+										<div className="flex flex-col min-w-0">
+											<span className="truncate font-medium">{model.name}</span>
+											<span className="text-xs text-ink-faint truncate">
+												{model.id}
+											</span>
+										</div>
+										<div className="flex items-center gap-1.5 shrink-0">
+											{model.context_window && (
+												<span className="text-xs text-ink-faint">
+													{formatContextWindow(model.context_window)}
+												</span>
+											)}
+											{model.tool_call && (
+												<span
+													className="text-[10px] px-1 py-0.5 rounded bg-accent/15 text-accent font-medium"
+													title="Tool calling"
+												>
+													tools
+												</span>
+											)}
+											{model.reasoning && (
+												<span
+													className="text-[10px] px-1 py-0.5 rounded bg-purple-500/15 text-purple-400 font-medium"
+													title="Reasoning"
+												>
+													think
+												</span>
+											)}
+										</div>
+									</button>
+								))}
+							</div>
+						))}
+					</div>
+				)}
+			</div>
+		</div>
+	);
 }
diff --git a/interface/src/components/OpenCodeEmbed.tsx b/interface/src/components/OpenCodeEmbed.tsx
index 63fbae999..7af73e692 100644
--- a/interface/src/components/OpenCodeEmbed.tsx
+++ b/interface/src/components/OpenCodeEmbed.tsx
@@ -12,7 +12,10 @@ export function base64UrlEncode(value: string): string {
  * text are reused across mounts so we don't re-fetch on every tab switch.
  */
 let embedAssetsPromise: Promise<{
-	mountOpenCode: (el: HTMLElement, config: { serverUrl: string; initialRoute?: string }) => {
+	mountOpenCode: (
+		el: HTMLElement,
+		config: {serverUrl: string; initialRoute?: string},
+	) => {
 		dispose: () => void;
 		navigate: (route: string) => void;
 	};
@@ -40,8 +43,9 @@ function loadEmbedAssets() {
 	embedAssetsPromise = (async () => {
 		// Load the manifest to find hashed asset filenames
 		const manifestRes = await fetch("/opencode-embed/manifest.json");
-		if (!manifestRes.ok) throw new Error("Failed to load opencode-embed manifest");
-		const manifest: { js: string; css: string } = await manifestRes.json();
+		if (!manifestRes.ok)
+			throw new Error("Failed to load opencode-embed manifest");
+		const manifest: {js: string; css: string} = await manifestRes.json();
 
 		// Guard against path traversal or unexpected values from the manifest
 		const validAssetPath = (p: unknown): p is string =>
@@ -66,10 +70,12 @@ function loadEmbedAssets() {
 			throw new Error("OpenCode embed module did not export mountOpenCode");
 		}
 
-		return { mountOpenCode: embedApi.mountOpenCode, cssText };
+		return {mountOpenCode: embedApi.mountOpenCode, cssText};
 	})();
 	// If loading fails, clear the cache so the next attempt retries
-	embedAssetsPromise.catch(() => { embedAssetsPromise = null; });
+	embedAssetsPromise.catch(() => {
+		embedAssetsPromise = null;
+	});
 	return embedAssetsPromise;
 }
 
@@ -92,7 +98,10 @@ export function OpenCodeEmbed({
 	const [state, setState] = useState<"loading" | "ready" | "error">("loading");
 	const [errorMessage, setErrorMessage] = useState<string | null>(null);
 	const hostRef = useRef<HTMLDivElement>(null);
-	const handleRef = useRef<{ dispose: () => void; navigate: (route: string) => void } | null>(null);
+	const handleRef = useRef<{
+		dispose: () => void;
+		navigate: (route: string) => void;
+	} | null>(null);
 
 	// Route through the Spacebot proxy so it works for hosted/Tailscale
 	// users, not just local dev. The proxy handles forwarding to the
@@ -126,17 +135,19 @@ export function OpenCodeEmbed({
 				controller.signal.addEventListener("abort", onUnmount);
 
 				const sseRes = await fetch(`${serverUrl}/global/event`, {
-					headers: { Accept: "text/event-stream" },
+					headers: {Accept: "text/event-stream"},
 					signal: probeController.signal,
 				});
 				if (!sseRes.ok || !sseRes.body) throw new Error("SSE probe failed");
 
-				const reader = sseRes.body.pipeThrough(new TextDecoderStream()).getReader();
+				const reader = sseRes.body
+					.pipeThrough(new TextDecoderStream())
+					.getReader();
 				const timeout = setTimeout(() => probeController.abort(), 8000);
 				let buffer = "";
 
 				while (!probeController.signal.aborted) {
-					const { done, value } = await reader.read();
+					const {done, value} = await reader.read();
 					if (done) break;
 					buffer += value;
 
@@ -153,7 +164,9 @@ export function OpenCodeEmbed({
 								reader.cancel();
 								return;
 							}
-						} catch { /* not JSON, skip */ }
+						} catch {
+							/* not JSON, skip */
+						}
 					}
 				}
 				clearTimeout(timeout);
@@ -169,7 +182,9 @@ export function OpenCodeEmbed({
 							const session = await res.json();
 							if (session?.directory) setEventDirectory(session.directory);
 						}
-					} catch { /* ignore */ }
+					} catch {
+						/* ignore */
+					}
 				}
 			}
 		})();
@@ -205,17 +220,25 @@ export function OpenCodeEmbed({
 				// chat-only view (sidebar, terminal, file tree, review all closed).
 				const layoutKey = "opencode.global.dat:layout";
 				if (!localStorage.getItem(layoutKey)) {
-					localStorage.setItem(layoutKey, JSON.stringify({
-						sidebar: { opened: false, width: 344, workspaces: {}, workspacesDefault: false },
-						terminal: { height: 280, opened: false },
-						review: { diffStyle: "split", panelOpened: false },
-						fileTree: { opened: false, width: 344, tab: "changes" },
-						session: { width: 600 },
-						mobileSidebar: { opened: false },
-						sessionTabs: {},
-						sessionView: {},
-						handoff: {},
-					}));
+					localStorage.setItem(
+						layoutKey,
+						JSON.stringify({
+							sidebar: {
+								opened: false,
+								width: 344,
+								workspaces: {},
+								workspacesDefault: false,
+							},
+							terminal: {height: 280, opened: false},
+							review: {diffStyle: "split", panelOpened: false},
+							fileTree: {opened: false, width: 344, tab: "changes"},
+							session: {width: 600},
+							mobileSidebar: {opened: false},
+							sessionTabs: {},
+							sessionView: {},
+							handoff: {},
+						}),
+					);
 				}
 
 				// First check if the OpenCode server is reachable
@@ -223,12 +246,12 @@ export function OpenCodeEmbed({
 				if (!healthRes.ok) throw new Error("OpenCode server not reachable");
 
 				// Load the embed assets (cached after first load)
-				const { mountOpenCode, cssText } = await loadEmbedAssets();
+				const {mountOpenCode, cssText} = await loadEmbedAssets();
 
 				if (disposed) return;
 
 				// Create Shadow DOM for CSS isolation
-				const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+				const shadow = host.shadowRoot ?? host.attachShadow({mode: "open"});
 
 				// Clear any previous content
 				shadow.innerHTML = "";
@@ -247,6 +270,14 @@ export function OpenCodeEmbed({
 					header:has(#opencode-titlebar-center),
 					[data-session-title] { display: none !important; }
 					main { border: none !important; border-radius: 0 !important; }
+					/* Give the prompt input a background matching SpaceUI's ChatComposer
+					   (bg-app-box/70 + rounded). OpenCode doesn't style it by default,
+					   so it renders transparent against the app background. */
+					[data-component="prompt-input"] {
+						background: color-mix(in srgb, var(--color-app-box) 70%, transparent) !important;
+						border: 1px solid var(--color-app-line) !important;
+						border-radius: 12px !important;
+					}
 				`;
 				shadow.appendChild(overrides);
 
@@ -260,7 +291,8 @@ export function OpenCodeEmbed({
 				host.style.fontSize = "16px";
 				const mountDiv = document.createElement("div");
 				mountDiv.id = "opencode-root";
-				mountDiv.style.cssText = "display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden;font-size:13px;line-height:150%;-webkit-font-smoothing:antialiased;";
+				mountDiv.style.cssText =
+					"display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden;font-size:13px;line-height:150%;-webkit-font-smoothing:antialiased;";
 				shadow.appendChild(mountDiv);
 
 				// Inject a copy of OpenCode's CSS into the document <head>
@@ -294,7 +326,9 @@ export function OpenCodeEmbed({
 			} catch (error) {
 				if (!disposed) {
 					setState("error");
-					setErrorMessage(error instanceof Error ? error.message : "Unknown error");
+					setErrorMessage(
+						error instanceof Error ? error.message : "Unknown error",
+					);
 				}
 			}
 		})();
@@ -337,10 +371,10 @@ export function OpenCodeEmbed({
 			<div
 				ref={hostRef}
 				className="absolute inset-0"
-				style={{ contain: "strict" }}
+				style={{contain: "strict"}}
 			/>
 			{state === "loading" && (
-				<div className="absolute inset-0 flex items-center justify-center bg-app-darkBox/80">
+				<div className="absolute inset-0 flex items-center justify-center bg-app-dark-box/80">
 					<div className="flex items-center gap-2 text-xs text-ink-faint">
 						<span className="h-2 w-2 animate-pulse rounded-full bg-accent" />
 						Loading OpenCode...
@@ -348,10 +382,11 @@ export function OpenCodeEmbed({
 				</div>
 			)}
 			{state === "error" && (
-				<div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-app-darkBox/80 text-ink-faint">
+				<div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-app-dark-box/80 text-ink-faint">
 					<p className="text-xs">Failed to load OpenCode</p>
 					<p className="text-tiny">
-						{errorMessage || "The server may have been stopped. Try the Transcript tab for available data."}
+						{errorMessage ||
+							"The server may have been stopped. Try the Transcript tab for available data."}
 					</p>
 				</div>
 			)}
diff --git a/interface/src/components/PromptInspectModal.tsx b/interface/src/components/PromptInspectModal.tsx
index 891df20a7..94717a87f 100644
--- a/interface/src/components/PromptInspectModal.tsx
+++ b/interface/src/components/PromptInspectModal.tsx
@@ -1,11 +1,20 @@
-import { useState, useCallback } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {useState, useCallback} from "react";
+import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
 import {
 	api,
 	type PromptInspectResponse,
 	type PromptSnapshotSummary,
+	type PromptHistoryBlock,
+	type PromptHistoryMessage,
 } from "@/api/client";
-import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Toggle } from "@/ui";
+import {
+	Button,
+	DialogRoot,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+} from "@spacedrive/primitives";
+import {Switch} from "@spacedrive/primitives";
 
 interface PromptInspectModalProps {
 	open: boolean;
@@ -15,26 +24,30 @@ interface PromptInspectModalProps {
 
 type View = "current" | "history";
 
-export function PromptInspectModal({ open, onOpenChange, channelId }: PromptInspectModalProps) {
+export function PromptInspectModal({
+	open,
+	onOpenChange,
+	channelId,
+}: PromptInspectModalProps) {
 	const [view, setView] = useState<View>("current");
 	const [selectedSnapshot, setSelectedSnapshot] = useState<number | null>(null);
 	const queryClient = useQueryClient();
 
-	const { data, isLoading, error } = useQuery<PromptInspectResponse>({
+	const {data, isLoading, error} = useQuery<PromptInspectResponse>({
 		queryKey: ["inspectPrompt", channelId],
 		queryFn: () => api.inspectPrompt(channelId),
 		enabled: open,
 		staleTime: 0,
 	});
 
-	const { data: snapshotList } = useQuery({
+	const {data: snapshotList} = useQuery({
 		queryKey: ["promptSnapshots", channelId],
 		queryFn: () => api.listPromptSnapshots(channelId),
 		enabled: open && view === "history",
 		staleTime: 0,
 	});
 
-	const { data: snapshotDetail, isLoading: snapshotLoading } = useQuery({
+	const {data: snapshotDetail, isLoading: snapshotLoading} = useQuery({
 		queryKey: ["promptSnapshot", channelId, selectedSnapshot],
 		queryFn: () => api.getPromptSnapshot(channelId, selectedSnapshot!),
 		enabled: open && selectedSnapshot !== null,
@@ -44,8 +57,8 @@ export function PromptInspectModal({ open, onOpenChange, channelId }: PromptInsp
 	const captureMutation = useMutation({
 		mutationFn: (enabled: boolean) => api.setPromptCapture(channelId, enabled),
 		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["inspectPrompt", channelId] });
-			queryClient.invalidateQueries({ queryKey: ["promptSnapshots", channelId] });
+			queryClient.invalidateQueries({queryKey: ["inspectPrompt", channelId]});
+			queryClient.invalidateQueries({queryKey: ["promptSnapshots", channelId]});
 		},
 	});
 
@@ -56,16 +69,23 @@ export function PromptInspectModal({ open, onOpenChange, channelId }: PromptInsp
 	}, [captureMutation, captureEnabled]);
 
 	// Determine what to display
-	const systemPrompt = view === "current" ? data?.system_prompt : snapshotDetail?.system_prompt;
+	const systemPrompt =
+		view === "current" ? data?.system_prompt : snapshotDetail?.system_prompt;
 	const history = view === "current" ? data?.history : snapshotDetail?.history;
-	const totalChars = view === "current" ? (data?.total_chars ?? 0) : (snapshotDetail?.system_prompt_chars ?? 0);
-	const historyLength = view === "current" ? (data?.history_length ?? 0) : (snapshotDetail?.history_length ?? 0);
+	const totalChars =
+		view === "current"
+			? (data?.total_chars ?? 0)
+			: (snapshotDetail?.system_prompt_chars ?? 0);
+	const historyLength =
+		view === "current"
+			? (data?.history_length ?? 0)
+			: (snapshotDetail?.history_length ?? 0);
 	const showContent = view === "current" || selectedSnapshot !== null;
 	const contentLoading = view === "current" ? isLoading : snapshotLoading;
 
 	return (
-		<Dialog open={open} onOpenChange={onOpenChange}>
-			<DialogContent className="!flex h-[85vh] w-[80vw] max-w-[80vw] !flex-col !gap-0 overflow-hidden !p-0">
+		<DialogRoot open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="!flex h-[85vh] w-[80vw] !max-w-[80vw] !flex-col !gap-0 overflow-hidden !p-0">
 				<DialogHeader className="flex-shrink-0 border-b border-app-line/50 px-6 pt-6 pb-4">
 					<DialogTitle>Prompt Inspector</DialogTitle>
 					{showContent && !contentLoading && systemPrompt != null && (
@@ -73,7 +93,9 @@ export function PromptInspectModal({ open, onOpenChange, channelId }: PromptInsp
 							<span>{totalChars.toLocaleString()} chars</span>
 							<span>{historyLength} history messages</span>
 							{view === "history" && snapshotDetail && (
-								<span>{new Date(snapshotDetail.timestamp_ms).toLocaleString()}</span>
+								<span>
+									{new Date(snapshotDetail.timestamp_ms).toLocaleString()}
+								</span>
 							)}
 						</div>
 					)}
@@ -81,17 +103,23 @@ export function PromptInspectModal({ open, onOpenChange, channelId }: PromptInsp
 
 				<div className="flex min-h-0 flex-1">
 					{/* Sidebar */}
-					<div className="flex w-48 flex-shrink-0 flex-col border-r border-app-line/50 bg-app-darkBox/30">
+					<div className="flex w-48 flex-shrink-0 flex-col border-r border-app-line/50 bg-app-dark-box/30">
 						<div className="flex flex-col gap-0.5 p-2">
 							<SidebarButton
 								active={view === "current"}
-								onClick={() => { setView("current"); setSelectedSnapshot(null); }}
+								onClick={() => {
+									setView("current");
+									setSelectedSnapshot(null);
+								}}
 							>
 								Current
 							</SidebarButton>
 							<SidebarButton
 								active={view === "history"}
-								onClick={() => { setView("history"); setSelectedSnapshot(null); }}
+								onClick={() => {
+									setView("history");
+									setSelectedSnapshot(null);
+								}}
 							>
 								History
 							</SidebarButton>
@@ -101,7 +129,7 @@ export function PromptInspectModal({ open, onOpenChange, channelId }: PromptInsp
 
 						<div className="flex items-center justify-between px-3 py-3">
 							<span className="text-tiny text-ink-faint">Capture</span>
-							<Toggle
+							<Switch
 								size="sm"
 								checked={captureEnabled}
 								onCheckedChange={handleToggleCapture}
@@ -142,7 +170,8 @@ export function PromptInspectModal({ open, onOpenChange, channelId }: PromptInsp
 						)}
 						{error && (
 							<div className="m-6 rounded-md border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-400">
-								Failed to load prompt: {error instanceof Error ? error.message : "Unknown error"}
+								Failed to load prompt:{" "}
+								{error instanceof Error ? error.message : "Unknown error"}
 							</div>
 						)}
 						{data?.error && (
@@ -150,22 +179,28 @@ export function PromptInspectModal({ open, onOpenChange, channelId }: PromptInsp
 								{data.message}
 							</div>
 						)}
-						{view === "history" && selectedSnapshot === null && !snapshotLoading && (
-							<div className="flex items-center justify-center py-12">
-								<span className="text-sm text-ink-faint">
-									{captureEnabled
-										? "Select a snapshot from the sidebar"
-										: "Enable capture to start recording prompt snapshots"}
-								</span>
-							</div>
-						)}
+						{view === "history" &&
+							selectedSnapshot === null &&
+							!snapshotLoading && (
+								<div className="flex items-center justify-center py-12">
+									<span className="text-sm text-ink-faint">
+										{captureEnabled
+											? "Select a snapshot from the sidebar"
+											: "Enable capture to start recording prompt snapshots"}
+									</span>
+								</div>
+							)}
 						{showContent && !contentLoading && systemPrompt != null && (
 							<pre className="whitespace-pre-wrap break-words p-6 font-mono text-xs text-ink-dull leading-relaxed">
-								<span className="text-ink-faint">{"--- SYSTEM PROMPT ---\n\n"}</span>
+								<span className="text-ink-faint">
+									{"--- SYSTEM PROMPT ---\n\n"}
+								</span>
 								{systemPrompt}
 								{history != null && (
 									<>
-										<span className="text-ink-faint">{"\n\n--- MESSAGES ---\n"}</span>
+										<span className="text-ink-faint">
+											{"\n\n--- MESSAGES ---\n"}
+										</span>
 										{renderRawHistory(history)}
 									</>
 								)}
@@ -175,18 +210,18 @@ export function PromptInspectModal({ open, onOpenChange, channelId }: PromptInsp
 				</div>
 
 				<div className="flex flex-shrink-0 items-center justify-end border-t border-app-line/50 px-6 py-3">
-					<Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
+					<Button variant="bare" size="sm" onClick={() => onOpenChange(false)}>
 						Close
 					</Button>
 				</div>
 			</DialogContent>
-		</Dialog>
+		</DialogRoot>
 	);
 }
 
 /** Render the message history as raw text, exactly as the model sees it. */
-function renderRawHistory(history: unknown): string {
-	const messages = Array.isArray(history) ? history : [];
+function renderRawHistory(history: PromptHistoryMessage[] | undefined): string {
+	const messages = history ?? [];
 	if (messages.length === 0) return "\n(empty)";
 
 	const lines: string[] = [];
@@ -212,7 +247,7 @@ function renderRawHistory(history: unknown): string {
  * - AssistantContent with `#[serde(untagged)]` -> `{text: "..."}` (no type field),
  *   tool calls are `{id, function: {name, arguments}}`
  */
-function extractTextParts(message: any): string[] {
+function extractTextParts(message: PromptHistoryMessage): string[] {
 	const parts: string[] = [];
 	const content = message.content;
 
@@ -220,44 +255,53 @@ function extractTextParts(message: any): string[] {
 		parts.push(content);
 	} else if (Array.isArray(content)) {
 		for (const block of content) {
-			if (block.type === "text" && typeof block.text === "string") {
-				parts.push(block.text);
-			} else if (!block.type && typeof block.text === "string") {
-				parts.push(block.text);
-			} else if (block.type === "toolresult") {
-				const resultText = formatToolResultText(block.content);
-				parts.push(`[tool_result id=${block.id}] ${resultText}`);
-			} else if (block.function && typeof block.function === "object") {
-				const args = typeof block.function.arguments === "string"
-					? block.function.arguments
-					: JSON.stringify(block.function.arguments);
-				parts.push(`[tool_use ${block.function.name}] ${args}`);
-			} else if (Array.isArray(block.reasoning)) {
-				parts.push(`[thinking] ${block.reasoning.join("\n")}`);
-			}
+			appendBlockText(block, parts);
 		}
 	} else if (content && typeof content === "object") {
-		if (typeof content.text === "string") {
-			parts.push(content.text);
-		} else if (content.function) {
-			const args = typeof content.function.arguments === "string"
-				? content.function.arguments
-				: JSON.stringify(content.function.arguments);
-			parts.push(`[tool_use ${content.function.name}] ${args}`);
-		} else if (content.type === "toolresult") {
-			const resultText = formatToolResultText(content.content);
-			parts.push(`[tool_result id=${content.id}] ${resultText}`);
-		}
+		appendBlockText(content, parts);
 	}
 
 	return parts;
 }
 
-function formatToolResultText(content: any): string {
+function appendBlockText(block: PromptHistoryBlock, parts: string[]): void {
+	if (block.type === "text" && typeof block.text === "string") {
+		parts.push(block.text);
+		return;
+	}
+	if (!block.type && typeof block.text === "string") {
+		parts.push(block.text);
+		return;
+	}
+	if (block.type === "toolresult") {
+		const resultText = formatToolResultText(block.content);
+		parts.push(`[tool_result id=${block.id ?? ""}] ${resultText}`);
+		return;
+	}
+	if (block.function) {
+		const args =
+			typeof block.function.arguments === "string"
+				? block.function.arguments
+				: JSON.stringify(block.function.arguments);
+		parts.push(`[tool_use ${block.function.name}] ${args}`);
+		return;
+	}
+	if (Array.isArray(block.reasoning)) {
+		parts.push(`[thinking] ${block.reasoning.join("\n")}`);
+	}
+}
+
+function formatToolResultText(content: unknown): string {
 	if (typeof content === "string") return content;
 	if (Array.isArray(content)) {
 		return content
-			.map((c: any) => (typeof c.text === "string" ? c.text : JSON.stringify(c)))
+			.map((c) => {
+				if (c && typeof c === "object" && "text" in c) {
+					const text = (c as {text: unknown}).text;
+					if (typeof text === "string") return text;
+				}
+				return JSON.stringify(c);
+			})
 			.join(" ");
 	}
 	return JSON.stringify(content);
@@ -297,11 +341,16 @@ function SnapshotListItem({
 	onClick: () => void;
 }) {
 	const time = new Date(snapshot.timestamp_ms);
-	const timeStr = time.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
-	const dateStr = time.toLocaleDateString([], { month: "short", day: "numeric" });
-	const preview = snapshot.user_message.length > 60
-		? snapshot.user_message.slice(0, 60) + "..."
-		: snapshot.user_message;
+	const timeStr = time.toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit",
+	});
+	const dateStr = time.toLocaleDateString([], {month: "short", day: "numeric"});
+	const preview =
+		snapshot.user_message.length > 60
+			? snapshot.user_message.slice(0, 60) + "..."
+			: snapshot.user_message;
 
 	return (
 		<button
@@ -317,7 +366,9 @@ function SnapshotListItem({
 				<span>{dateStr}</span>
 				<span>{timeStr}</span>
 			</div>
-			<p className="mt-0.5 text-tiny text-ink-dull leading-snug truncate">{preview || "(empty)"}</p>
+			<p className="mt-0.5 text-tiny text-ink-dull leading-snug truncate">
+				{preview || "(empty)"}
+			</p>
 			<div className="mt-0.5 flex gap-2 text-tiny text-ink-faint/60">
 				<span>{snapshot.system_prompt_chars.toLocaleString()} ch</span>
 				<span>{snapshot.history_length} msgs</span>
diff --git a/interface/src/components/SetupBanner.tsx b/interface/src/components/SetupBanner.tsx
index 62b79da81..0d214a206 100644
--- a/interface/src/components/SetupBanner.tsx
+++ b/interface/src/components/SetupBanner.tsx
@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 import { api } from "@/api/client";
-import { Banner } from "@/ui";
+import { Banner } from "@spacedrive/primitives";
 
 export function SetupBanner() {
 	const { data } = useQuery({
@@ -13,7 +13,7 @@ export function SetupBanner() {
 	if (!data || data.has_any) return null;
 
 	return (
-		<Banner variant="warning" dot="static">
+		<Banner variant="warning">
 			No LLM provider configured.{" "}
 			<Link to="/settings" className="underline hover:text-amber-300">
 				Add an API key in Settings
diff --git a/interface/src/components/Sidebar.tsx b/interface/src/components/Sidebar.tsx
index 9c76ae9ca..0f84a4712 100644
--- a/interface/src/components/Sidebar.tsx
+++ b/interface/src/components/Sidebar.tsx
@@ -1,6 +1,11 @@
-import { useMemo, useState } from "react";
-import { Link, useMatchRoute } from "@tanstack/react-router";
-import { useQuery } from "@tanstack/react-query";
+import {useMemo, useState} from "react";
+import {
+	Link,
+	useMatchRoute,
+	useNavigate,
+	useLocation,
+} from "@tanstack/react-router";
+import {useQuery} from "@tanstack/react-query";
 import {
 	DndContext,
 	closestCenter,
@@ -17,84 +22,209 @@ import {
 	useSortable,
 	verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { api } from "@/api/client";
-import type { ChannelLiveState } from "@/hooks/useChannelLiveState";
-import { useAgentOrder } from "@/hooks/useAgentOrder";
-import { DashboardSquare01Icon, Settings01Icon, LeftToRightListBulletIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-import { CreateAgentDialog } from "@/components/CreateAgentDialog";
-import { ProfileAvatar } from "@/components/ProfileAvatar";
+import {CSS} from "@dnd-kit/utilities";
+import {api, getApiBase} from "@/api/client";
+import type {ChannelLiveState} from "@/hooks/useChannelLiveState";
+import {useAgentOrder} from "@/hooks/useAgentOrder";
+import {
+	House,
+	TreeStructure,
+	Wrench,
+	CheckSquare,
+	GearSix,
+	DotsThree,
+	ChatCircleDots,
+	Broadcast,
+	Brain,
+	Lightning,
+	CalendarDots,
+	SlidersHorizontal,
+	BookBookmark,
+} from "@phosphor-icons/react";
+import {
+	CircleButton,
+	SelectPill,
+	Popover,
+	OptionList,
+	OptionListItem,
+	DialogRoot,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogDescription,
+	DialogFooter,
+	Button,
+} from "@spacedrive/primitives";
+import {CreateAgentDialog} from "@/components/CreateAgentDialog";
+import {ProfileAvatar} from "@/components/ProfileAvatar";
+import {WorkersPanelButton} from "@/components/WorkersPanel";
+import {IS_DESKTOP, IS_MACOS} from "@/platform";
 
 interface SidebarProps {
 	liveStates: Record<string, ChannelLiveState>;
 }
 
+const agentSubItems = [
+	{path: "chat", icon: ChatCircleDots, label: "Chat"},
+	{path: "channels", icon: Broadcast, label: "Channels"},
+	{path: "memories", icon: Brain, label: "Memory"},
+	{path: "skills", icon: Lightning, label: "Skills"},
+	{path: "cron", icon: CalendarDots, label: "Schedule"},
+	{path: "config", icon: SlidersHorizontal, label: "Config"},
+] as const;
+
 interface SortableAgentItemProps {
 	agentId: string;
 	displayName?: string | null | undefined;
 	gradientStart?: string | null | undefined;
 	gradientEnd?: string | null | undefined;
 	isActive: boolean;
+	isExpanded: boolean;
+	onToggle: () => void;
 }
 
-function SortableAgentItem({ agentId, displayName, gradientStart, gradientEnd, isActive }: SortableAgentItemProps) {
-	const {
-		attributes,
-		listeners,
-		setNodeRef,
-		transform,
-		transition,
-		isDragging,
-	} = useSortable({ id: agentId });
+function SortableAgentItem({
+	agentId,
+	displayName,
+	gradientStart,
+	gradientEnd,
+	isActive,
+	isExpanded,
+	onToggle,
+}: SortableAgentItemProps) {
+	const {attributes, listeners, setNodeRef, transform, transition, isDragging} =
+		useSortable({id: agentId});
+
+	const matchRoute = useMatchRoute();
+	const isAgentRoot = !!matchRoute({to: "/agents/$agentId", params: {agentId}});
 
 	const style = {
 		transform: CSS.Transform.toString(transform),
 		transition,
 		opacity: isDragging ? 0.5 : 1,
-		cursor: isDragging ? 'grabbing' : 'grab',
+		cursor: isDragging ? "grabbing" : "grab",
 	};
 
+	const name = displayName ?? agentId;
+
 	return (
-		<div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+		<div ref={setNodeRef} style={style}>
 			<Link
 				to="/agents/$agentId"
-				params={{ agentId }}
-				className="flex h-8 w-8 items-center justify-center"
-				style={{ pointerEvents: isDragging ? 'none' : 'auto' }}
-				title={displayName ?? agentId}
+				params={{agentId}}
+				onClick={() => {
+					onToggle();
+				}}
+				className={`flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left transition-colors ${
+					isAgentRoot
+						? "bg-sidebar-selected/40 text-sidebar-ink"
+						: isActive
+							? "text-sidebar-ink"
+							: "text-sidebar-inkDull hover:bg-sidebar-selected/20 hover:text-sidebar-ink"
+				}`}
+				style={{pointerEvents: isDragging ? "none" : "auto"}}
+				{...attributes}
+				{...listeners}
 			>
 				<ProfileAvatar
 					seed={agentId}
-					name={displayName ?? agentId}
-					size={28}
-					className={`rounded-full ${isActive ? "ring-2 ring-sidebar-line" : "opacity-70 hover:opacity-100"}`}
+					name={name}
+					size={22}
+					className="shrink-0 rounded-full"
 					gradientStart={gradientStart}
 					gradientEnd={gradientEnd}
 				/>
+				<span className="truncate text-sm font-medium">{name}</span>
 			</Link>
+			{isExpanded && (
+				<div className="mt-0.5 mb-1 space-y-0.5 pl-4">
+					{agentSubItems.map((item) => {
+						const subActive = !!matchRoute({
+							to: `/agents/$agentId/${item.path}`,
+							params: {agentId},
+							fuzzy: true,
+						});
+						const Icon = item.icon;
+						return (
+							<Link
+								key={item.path}
+								to={`/agents/$agentId/${item.path}`}
+								params={{agentId}}
+								className={`flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm font-medium tracking-wide transition-colors ${
+									subActive
+										? "bg-sidebar-selected/40 text-sidebar-ink"
+										: "text-sidebar-inkDull hover:bg-sidebar-selected/20 hover:text-sidebar-ink"
+								}`}
+							>
+								<div className="flex size-[22px] shrink-0 items-center justify-center">
+									<Icon className="size-4" weight="bold" />
+								</div>
+								<span>{item.label}</span>
+							</Link>
+						);
+					})}
+				</div>
+			)}
 		</div>
 	);
 }
 
-export function Sidebar({ liveStates: _liveStates }: SidebarProps) {
+const navItems = [
+	{to: "/dashboard", icon: House, label: "Dashboard", exact: true},
+	{to: "/", icon: TreeStructure, label: "Org Chart", exact: true},
+	{to: "/workbench", icon: Wrench, label: "Workbench", exact: true},
+	{to: "/tasks", icon: CheckSquare, label: "Tasks", exact: true},
+	{to: "/wiki", icon: BookBookmark, label: "Wiki", exact: true},
+] as const;
+
+// Narrows the loosely-typed search params from `useLocation` to the `/projects`
+// route shape and extracts the selected project id, if any.
+function readProjectId(search: unknown): string | null {
+	if (typeof search !== "object" || search === null) return null;
+	const id = (search as {id?: unknown}).id;
+	return typeof id === "string" ? id : null;
+}
+
+export function Sidebar({liveStates: _liveStates}: SidebarProps) {
+	const navigate = useNavigate();
 	const [createOpen, setCreateOpen] = useState(false);
+	const [userExpandedAgent, setUserExpandedAgent] = useState<string | null>(
+		null,
+	);
+	const [switcherOpen, setSwitcherOpen] = useState(false);
+	const [comingSoonOpen, setComingSoonOpen] = useState(false);
+	const [scrollTop, setScrollTop] = useState(0);
 
-	const { data: agentsData } = useQuery({
+	const {data: globalSettings} = useQuery({
+		queryKey: ["global-settings"],
+		queryFn: api.globalSettings,
+		staleTime: 10_000,
+	});
+
+	const companyName = globalSettings?.company_name ?? "My Company";
+
+	const {data: agentsData} = useQuery({
 		queryKey: ["agents"],
 		queryFn: api.agents,
 		refetchInterval: 30_000,
 	});
 
-	const { data: providersData } = useQuery({
+	const {data: providersData} = useQuery({
 		queryKey: ["providers"],
 		queryFn: api.providers,
 		staleTime: 10_000,
 	});
 
+	const {data: projectsData} = useQuery({
+		queryKey: ["projects"],
+		queryFn: () => api.listProjects("active"),
+		staleTime: 30_000,
+	});
+
 	const hasProvider = providersData?.has_any ?? false;
 
 	const agents = agentsData?.agents ?? [];
+	const projects = projectsData?.projects ?? [];
 
 	const agentIds = useMemo(() => agents.map((a) => a.id), [agents]);
 	const agentDisplayNames = useMemo(() => {
@@ -103,17 +233,23 @@ export function Sidebar({ liveStates: _liveStates }: SidebarProps) {
 		return map;
 	}, [agents]);
 	const agentGradients = useMemo(() => {
-		const map: Record<string, { start?: string | null | undefined; end?: string | null | undefined }> = {};
-		for (const a of agents) map[a.id] = { start: a.gradient_start, end: a.gradient_end };
+		const map: Record<
+			string,
+			{start?: string | null | undefined; end?: string | null | undefined}
+		> = {};
+		for (const a of agents)
+			map[a.id] = {start: a.gradient_start, end: a.gradient_end};
 		return map;
 	}, [agents]);
 	const [agentOrder, setAgentOrder] = useAgentOrder(agentIds);
 
+	// Default-expand the first agent until the user explicitly picks another.
+	const expandedAgent = userExpandedAgent ?? agentOrder[0] ?? null;
+
 	const matchRoute = useMatchRoute();
-	const isOverview = matchRoute({ to: "/" });
-	const isTasks = matchRoute({ to: "/tasks" });
-	const isSettings = matchRoute({ to: "/settings" });
-	const isOrchestrate = matchRoute({ to: "/orchestrate" });
+	const location = useLocation();
+	const activeProjectId =
+		location.pathname === "/projects" ? readProjectId(location.search) : null;
 
 	const sensors = useSensors(
 		useSensor(PointerSensor, {
@@ -124,11 +260,11 @@ export function Sidebar({ liveStates: _liveStates }: SidebarProps) {
 		}),
 		useSensor(KeyboardSensor, {
 			coordinateGetter: sortableKeyboardCoordinates,
-		})
+		}),
 	);
 
 	const handleDragEnd = (event: DragEndEvent) => {
-		const { active, over } = event;
+		const {active, over} = event;
 		if (over && active.id !== over.id) {
 			const oldIndex = agentOrder.indexOf(active.id as string);
 			const newIndex = agentOrder.indexOf(over.id as string);
@@ -137,84 +273,234 @@ export function Sidebar({ liveStates: _liveStates }: SidebarProps) {
 	};
 
 	return (
-		<nav className="flex w-14 shrink-0 flex-col items-center overflow-hidden border-r border-sidebar-line bg-sidebar">
-			{/* Icon nav */}
-			<div className="flex flex-col items-center gap-1 pt-2">
-				<Link
-					to="/"
-					className={`flex h-8 w-8 items-center justify-center rounded-md ${
-						isOverview ? "bg-sidebar-selected text-sidebar-ink" : "text-sidebar-inkDull hover:bg-sidebar-selected/50"
-					}`}
-					title="Dashboard"
-				>
-					<HugeiconsIcon icon={DashboardSquare01Icon} className="h-4 w-4" />
-				</Link>
-				<Link
-					to="/orchestrate"
-					className={`flex h-8 w-8 items-center justify-center rounded-md ${
-						isOrchestrate ? "bg-sidebar-selected text-sidebar-ink" : "text-sidebar-inkDull hover:bg-sidebar-selected/50"
-					}`}
-					title="Orchestrate"
-				>
-					<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-						<rect x="1" y="2" width="4" height="12" rx="1" />
-						<rect x="6" y="2" width="4" height="12" rx="1" />
-						<rect x="11" y="2" width="4" height="12" rx="1" />
-					</svg>
-				</Link>
-				<Link
-					to="/tasks"
-					className={`flex h-8 w-8 items-center justify-center rounded-md ${
-						isTasks ? "bg-sidebar-selected text-sidebar-ink" : "text-sidebar-inkDull hover:bg-sidebar-selected/50"
-					}`}
-					title="Tasks"
-				>
-					<HugeiconsIcon icon={LeftToRightListBulletIcon} className="h-4 w-4" />
-				</Link>
-				<Link
-					to="/settings"
-					className={`flex h-8 w-8 items-center justify-center rounded-md ${
-						isSettings ? "bg-sidebar-selected text-sidebar-ink" : "text-sidebar-inkDull hover:bg-sidebar-selected/50"
-					}`}
-					title="Settings"
-				>
-					<HugeiconsIcon icon={Settings01Icon} className="h-4 w-4" />
-				</Link>
-				<div className="my-1 h-px w-5 bg-sidebar-line" />
-				<DndContext
-					sensors={sensors}
-					collisionDetection={closestCenter}
-					onDragEnd={handleDragEnd}
-				>
-					<SortableContext items={agentOrder} strategy={verticalListSortingStrategy}>
-						{agentOrder.map((agentId) => {
-							const isActive = !!matchRoute({ to: "/agents/$agentId", params: { agentId }, fuzzy: true });
-							return (
-								<SortableAgentItem
-									key={agentId}
-									agentId={agentId}
-									displayName={agentDisplayNames[agentId]}
-									gradientStart={agentGradients[agentId]?.start}
-									gradientEnd={agentGradients[agentId]?.end}
-									isActive={isActive}
-								/>
-							);
-						})}
-					</SortableContext>
-				</DndContext>
-				{hasProvider && (
-					<button
-						onClick={() => setCreateOpen(true)}
-						className="flex h-8 w-8 items-center justify-center rounded-md text-sidebar-inkFaint hover:bg-sidebar-selected/50 hover:text-sidebar-inkDull"
-						title="New Agent"
+		<aside className="flex w-[220px] shrink-0 flex-col bg-sidebar">
+			{/* Company switcher */}
+			<div className={`px-3 ${IS_DESKTOP && IS_MACOS ? "pt-[50px]" : "pt-3"}`}>
+				<Popover.Root open={switcherOpen} onOpenChange={setSwitcherOpen}>
+					<Popover.Trigger asChild>
+						<SelectPill variant="sidebar" size="md" className="w-full">
+							<span className="font-semibold">{companyName}</span>
+						</SelectPill>
+					</Popover.Trigger>
+					<Popover.Content
+						align="start"
+						sideOffset={8}
+						className="min-w-[200px] p-2"
 					>
-						+
-					</button>
+						<OptionList>
+							<OptionListItem selected>{companyName}</OptionListItem>
+						</OptionList>
+						<div className="my-2 h-px bg-app-line" />
+						<OptionList>
+							<OptionListItem
+								onClick={() => {
+									setSwitcherOpen(false);
+									setComingSoonOpen(true);
+								}}
+							>
+								<span>Add Instance</span>
+							</OptionListItem>
+							<OptionListItem
+								onClick={() => {
+									setSwitcherOpen(false);
+									navigate({to: "/settings", search: {tab: "instance"}});
+								}}
+							>
+								<span>Edit</span>
+							</OptionListItem>
+						</OptionList>
+					</Popover.Content>
+				</Popover.Root>
+			</div>
+
+			{/* Scrollable area: primary nav + sections */}
+			<div className="relative flex-1 overflow-hidden">
+				<div className={`pointer-events-none absolute inset-x-0 top-0 z-10 h-6 bg-gradient-to-b from-sidebar to-transparent transition-opacity duration-150 ${scrollTop > 0 ? "opacity-100" : "opacity-0"}`} />
+			<div className="h-full overflow-y-auto px-3 pb-4" onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}>
+			{/* Primary nav */}
+			<nav className="space-y-0.5 py-3">
+				{navItems.map((item) => {
+					const Icon = item.icon;
+					const isActive = item.exact
+						? !!matchRoute({to: item.to})
+						: !!matchRoute({to: item.to, fuzzy: true});
+					return (
+						<Link
+							key={item.label}
+							to={item.to}
+							className={`flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm font-medium tracking-wide outline-none ring-inset ring-transparent transition-colors focus:ring-1 focus:ring-accent ${
+								isActive
+									? "bg-sidebar-selected/40 text-sidebar-ink"
+									: "text-sidebar-inkDull hover:bg-sidebar-selected/20 hover:text-sidebar-ink"
+							}`}
+						>
+							<div className="flex size-[22px] shrink-0 items-center justify-center">
+								<Icon className="size-4" weight="bold" />
+							</div>
+							<span className="truncate">{item.label}</span>
+						</Link>
+					);
+				})}
+			</nav>
+				{/* Projects section */}
+				{projects.length > 0 && (
+					<section className="mb-4">
+						<div className="mb-2 flex items-center justify-between px-2">
+							<div className="text-sidebar-inkDull text-[11px] font-semibold uppercase tracking-[0.16em]">
+								Projects
+							</div>
+							<Link to="/projects">
+								<CircleButton icon={DotsThree} size="sm" title="All Projects" />
+							</Link>
+						</div>
+						<div className="space-y-0.5">
+							{projects.slice(0, 5).map((project) => {
+								const logoUrl = project.logo_path
+									? `${getApiBase()}/agents/projects/${encodeURIComponent(project.id)}/logo`
+									: null;
+								const fallback =
+									project.icon || project.name.slice(0, 1).toUpperCase();
+								return (
+									<Link
+										key={project.id}
+										to="/projects"
+										search={{id: project.id}}
+										className={`flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left transition-colors ${
+											activeProjectId === project.id
+												? "bg-sidebar-selected/40 text-sidebar-ink"
+												: "text-sidebar-inkDull hover:bg-sidebar-selected/20 hover:text-sidebar-ink"
+										}`}
+									>
+										{logoUrl ? (
+											<img
+												src={logoUrl}
+												alt=""
+												className="size-[22px] shrink-0 rounded-md object-contain"
+												draggable={false}
+											/>
+										) : (
+											<div className="flex size-[22px] shrink-0 items-center justify-center rounded-md bg-sidebar-selected/40 text-[10px] font-semibold text-sidebar-ink">
+												{fallback}
+											</div>
+										)}
+										<div className="min-w-0">
+											<div className="text-sidebar-ink truncate text-sm font-medium">
+												{project.name}
+											</div>
+											{project.description && (
+												<div className="text-ink-faint truncate text-[11px]">
+													{project.description}
+												</div>
+											)}
+										</div>
+									</Link>
+								);
+							})}
+							{projects.length > 5 && (
+								<Link
+									to="/projects"
+									className="flex w-full items-center px-2 py-1"
+								>
+									<span className="text-[11px] text-ink-faint">
+										{projects.length - 5} more project{projects.length - 5 !== 1 ? "s" : ""}
+									</span>
+								</Link>
+							)}
+						</div>
+					</section>
 				)}
+
+				{/* Agents section */}
+				<section>
+					<div className="mb-2 flex items-center justify-between px-2">
+						<div className="text-sidebar-inkDull text-[11px] font-semibold uppercase tracking-[0.16em]">
+							Agents
+						</div>
+						{hasProvider && (
+							<CircleButton
+								icon={DotsThree}
+								size="sm"
+								onClick={() => setCreateOpen(true)}
+								title="New Agent"
+							/>
+						)}
+					</div>
+					<div className="space-y-0.5">
+						<DndContext
+							sensors={sensors}
+							collisionDetection={closestCenter}
+							onDragEnd={handleDragEnd}
+						>
+							<SortableContext
+								items={agentOrder}
+								strategy={verticalListSortingStrategy}
+							>
+								{agentOrder.map((agentId) => {
+									const isActive = !!matchRoute({
+										to: "/agents/$agentId",
+										params: {agentId},
+										fuzzy: true,
+									});
+									return (
+										<SortableAgentItem
+											key={agentId}
+											agentId={agentId}
+											displayName={agentDisplayNames[agentId]}
+											gradientStart={agentGradients[agentId]?.start}
+											gradientEnd={agentGradients[agentId]?.end}
+											isActive={isActive}
+											isExpanded={expandedAgent === agentId}
+											onToggle={() => setUserExpandedAgent(agentId)}
+										/>
+									);
+								})}
+							</SortableContext>
+						</DndContext>
+					</div>
+				</section>
+			</div>
+			</div>
+
+			{/* Footer */}
+			<div className="flex shrink-0 items-center justify-between border-t border-app-line/30 px-3 py-2">
+				<WorkersPanelButton />
+				<Link to="/settings">
+					<CircleButton
+						icon={GearSix}
+						title="Settings"
+						variant={
+							!!matchRoute({to: "/settings", fuzzy: true})
+								? "active"
+								: "default"
+						}
+					/>
+				</Link>
 			</div>
+
 			{agents[0] && (
-				<CreateAgentDialog open={createOpen} onOpenChange={setCreateOpen} agentId={agents[0].id} />
+				<CreateAgentDialog
+					open={createOpen}
+					onOpenChange={setCreateOpen}
+					agentId={agents[0].id}
+				/>
 			)}
-		</nav>
+
+			<DialogRoot open={comingSoonOpen} onOpenChange={setComingSoonOpen}>
+				<DialogContent className="max-w-sm">
+					<DialogHeader>
+						<DialogTitle>Add Instance</DialogTitle>
+						<DialogDescription>
+							Multi-instance support is coming soon. You'll be able to connect
+							to additional Spacebot instances from here.
+						</DialogDescription>
+					</DialogHeader>
+					<DialogFooter>
+						<Button onClick={() => setComingSoonOpen(false)} size="md">
+							Close
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</DialogRoot>
+		</aside>
 	);
 }
diff --git a/interface/src/components/TagInput.tsx b/interface/src/components/TagInput.tsx
index 1a9aad507..9fbc147b3 100644
--- a/interface/src/components/TagInput.tsx
+++ b/interface/src/components/TagInput.tsx
@@ -8,7 +8,12 @@ interface TagInputProps {
 	className?: string;
 }
 
-export function TagInput({value, onChange, placeholder, className}: TagInputProps) {
+export function TagInput({
+	value,
+	onChange,
+	placeholder,
+	className,
+}: TagInputProps) {
 	const [inputValue, setInputValue] = useState("");
 	const inputRef = useRef<HTMLInputElement>(null);
 
@@ -41,7 +46,7 @@ export function TagInput({value, onChange, placeholder, className}: TagInputProp
 
 	return (
 		<div className={className}>
-			<div className="flex flex-wrap gap-2 p-2 border border-app-line/50 rounded-md bg-app-darkBox/30 min-h-[42px] focus-within:border-accent/50">
+			<div className="flex flex-wrap gap-2 p-2 border border-app-line/50 rounded-md bg-app-dark-box/30 min-h-[42px] focus-within:border-accent/50">
 				{value.map((tag) => (
 					<div
 						key={tag}
diff --git a/interface/src/components/TaskBoard.tsx b/interface/src/components/TaskBoard.tsx
deleted file mode 100644
index b98acf34a..000000000
--- a/interface/src/components/TaskBoard.tsx
+++ /dev/null
@@ -1,876 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCodeBranch, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
-import {
-  api,
-  type TaskItem,
-  type TaskStatus,
-  type TaskPriority,
-  type CreateTaskRequest,
-} from "@/api/client";
-import { useLiveContext } from "@/hooks/useLiveContext";
-import { Badge } from "@/ui/Badge";
-import { Button } from "@/ui/Button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/ui/Dialog";
-import { Markdown } from "@/components/Markdown";
-import { formatTimeAgo } from "@/lib/format";
-import { AnimatePresence, motion } from "framer-motion";
-
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-
-const COLUMNS: { status: TaskStatus; label: string }[] = [
-  { status: "pending_approval", label: "Pending Approval" },
-  { status: "backlog", label: "Backlog" },
-  { status: "ready", label: "Ready" },
-  { status: "in_progress", label: "In Progress" },
-  { status: "done", label: "Done" },
-];
-
-const STATUS_COLORS: Record<
-  TaskStatus,
-  "default" | "amber" | "accent" | "violet" | "green"
-> = {
-  pending_approval: "amber",
-  backlog: "default",
-  ready: "accent",
-  in_progress: "violet",
-  done: "green",
-};
-
-const PRIORITY_LABELS: Record<TaskPriority, string> = {
-  critical: "Critical",
-  high: "High",
-  medium: "Medium",
-  low: "Low",
-};
-
-const PRIORITY_COLORS: Record<
-  TaskPriority,
-  "red" | "amber" | "default" | "outline"
-> = {
-  critical: "red",
-  high: "amber",
-  medium: "default",
-  low: "outline",
-};
-
-// ---------------------------------------------------------------------------
-// GitHub metadata helpers
-// ---------------------------------------------------------------------------
-
-interface GithubReference {
-  kind: "issue" | "pr";
-  label: string;
-  url: string | null;
-}
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-
-function toSafeExternalUrl(value: unknown): string | null {
-  if (typeof value !== "string") return null;
-  try {
-    const parsed = new URL(value);
-    if (parsed.protocol === "https:" || parsed.protocol === "http:") {
-      return parsed.toString();
-    }
-    return null;
-  } catch {
-    return null;
-  }
-}
-
-function readGithubReference(
-  value: unknown,
-  kind: GithubReference["kind"],
-): GithubReference | null {
-  if (!isRecord(value)) {
-    return null;
-  }
-
-  const number = typeof value.number === "number" ? value.number : null;
-  const repo = typeof value.repo === "string" ? value.repo : null;
-  const url = toSafeExternalUrl(value.url);
-
-  if (number === null && url === null && repo === null) {
-    return null;
-  }
-
-  const noun = kind === "issue" ? "Issue" : "PR";
-  const label = number !== null ? `${noun} #${number}` : repo ? `${noun} ${repo}` : noun;
-
-  return { kind, label, url };
-}
-
-function getGithubReferences(metadata: Record<string, unknown>): GithubReference[] {
-  const references = [
-    readGithubReference(metadata.github_issue, "issue"),
-    readGithubReference(metadata.github_pr, "pr"),
-  ].filter((reference): reference is GithubReference => reference !== null);
-
-  return references;
-}
-
-function GithubMetadataBadges({
-  metadata,
-  references: precomputed,
-  compact = false,
-}: {
-  metadata?: Record<string, unknown>;
-  references?: GithubReference[];
-  compact?: boolean;
-}) {
-  const references = precomputed ?? (metadata ? getGithubReferences(metadata) : []);
-  if (references.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="flex flex-wrap items-center gap-1.5">
-      {references.map((reference) => {
-        const content = (
-          <>
-            <FontAwesomeIcon icon={faCodeBranch} className="text-[10px]" />
-            <span>{reference.label}</span>
-            {reference.url && (
-              <FontAwesomeIcon icon={faExternalLinkAlt} className="text-[9px]" />
-            )}
-          </>
-        );
-
-        const className = compact
-          ? "cursor-pointer hover:border-blue-400/50 hover:text-blue-300"
-          : "cursor-pointer hover:border-blue-400/50 hover:bg-blue-500/20 hover:text-blue-300";
-
-        if (reference.url) {
-          return (
-            <a
-              key={`${reference.kind}-${reference.label}`}
-              href={reference.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex"
-              onClick={(event) => event.stopPropagation()}
-            >
-              <Badge variant="blue" size="sm" className={className}>
-                {content}
-              </Badge>
-            </a>
-          );
-        }
-
-        return (
-          <Badge
-            key={`${reference.kind}-${reference.label}`}
-            variant="blue"
-            size="sm"
-          >
-            {content}
-          </Badge>
-        );
-      })}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// TaskBoard — the main shared component
-// ---------------------------------------------------------------------------
-
-export interface TaskBoardProps {
-  /** When set, filters tasks by assigned_agent_id. Omit for all-agents view. */
-  agentId?: string;
-  /** Agent ID used as owner when creating tasks. Required for create to work. */
-  ownerAgentId?: string;
-  /** Optional agent name resolver for showing agent badges on cards. */
-  agentNames?: Record<string, string | null | undefined>;
-  /** Whether to show agent badges on task cards (useful in global view). */
-  showAgentBadge?: boolean;
-}
-
-export function TaskBoard({
-  agentId,
-  ownerAgentId,
-  agentNames,
-  showAgentBadge = false,
-}: TaskBoardProps) {
-  const queryClient = useQueryClient();
-  const { taskEventVersion } = useLiveContext();
-
-  // Query key includes agentId so agent-scoped and global views have separate caches.
-  const queryKey = agentId ? ["tasks", agentId] : ["tasks"];
-
-  // Invalidate on SSE task events
-  const prevVersion = useRef(taskEventVersion);
-  useEffect(() => {
-    if (taskEventVersion !== prevVersion.current) {
-      prevVersion.current = taskEventVersion;
-      queryClient.invalidateQueries({ queryKey });
-    }
-  }, [taskEventVersion, queryKey, queryClient]);
-
-  const { data, isLoading } = useQuery({
-    queryKey,
-    queryFn: () =>
-      api.listTasks({
-        agent_id: agentId,
-        limit: TASK_LIMIT,
-      }),
-    refetchInterval: 15_000,
-  });
-
-  const TASK_LIMIT = 200;
-  const tasks = data?.tasks ?? [];
-  const truncated = tasks.length >= TASK_LIMIT;
-
-  // Group tasks by status
-  const tasksByStatus: Record<TaskStatus, TaskItem[]> = {
-    pending_approval: [],
-    backlog: [],
-    ready: [],
-    in_progress: [],
-    done: [],
-  };
-  for (const task of tasks) {
-    tasksByStatus[task.status]?.push(task);
-  }
-
-  // Create task dialog
-  const [createOpen, setCreateOpen] = useState(false);
-  // Detail dialog — store task number and derive from live list to stay current.
-  const [selectedTaskNumber, setSelectedTaskNumber] = useState<number | null>(
-    null,
-  );
-  const selectedTask =
-    selectedTaskNumber !== null
-      ? (tasks.find((t) => t.task_number === selectedTaskNumber) ?? null)
-      : null;
-
-  const createMutation = useMutation({
-    mutationFn: (request: CreateTaskRequest) => api.createTask(request),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey });
-      setCreateOpen(false);
-    },
-  });
-
-  const updateMutation = useMutation({
-    mutationFn: ({
-      taskNumber,
-      ...request
-    }: {
-      taskNumber: number;
-      status?: TaskStatus;
-      priority?: TaskPriority;
-      assigned_agent_id?: string;
-    }) => api.updateTask(taskNumber, request),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey });
-    },
-  });
-
-  const approveMutation = useMutation({
-    mutationFn: (taskNumber: number) => api.approveTask(taskNumber, "human"),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey });
-    },
-  });
-
-  const executeMutation = useMutation({
-    mutationFn: (taskNumber: number) => api.executeTask(taskNumber),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey });
-    },
-  });
-
-  const deleteMutation = useMutation({
-    mutationFn: (taskNumber: number) => api.deleteTask(taskNumber),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey });
-      setSelectedTaskNumber(null);
-    },
-  });
-
-  // Determine the owner for new tasks: explicit prop > agentId filter > undefined (dialog handles it)
-  const effectiveOwner = ownerAgentId ?? agentId;
-
-  if (isLoading) {
-    return (
-      <div className="flex h-full items-center justify-center text-ink-faint">
-        Loading tasks...
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex h-full flex-col">
-      {/* Toolbar */}
-      <div className="flex items-center justify-between border-b border-app-line px-4 py-2">
-        <div className="flex items-center gap-3">
-          <span className="text-sm text-ink-dull">
-            {tasks.length} task{tasks.length !== 1 ? "s" : ""}
-          </span>
-          {tasksByStatus.pending_approval.length > 0 && (
-            <Badge variant="amber" size="sm">
-              {tasksByStatus.pending_approval.length} pending approval
-            </Badge>
-          )}
-          {tasksByStatus.in_progress.length > 0 && (
-            <Badge variant="violet" size="sm">
-              {tasksByStatus.in_progress.length} in progress
-            </Badge>
-          )}
-          {truncated && (
-            <span className="text-tiny text-amber-400">
-              Showing first {TASK_LIMIT} tasks
-            </span>
-          )}
-        </div>
-        {effectiveOwner && (
-          <Button size="sm" onClick={() => setCreateOpen(true)}>
-            Create Task
-          </Button>
-        )}
-      </div>
-
-      {/* Kanban Board */}
-      <div className="flex flex-1 flex-wrap content-start gap-3 overflow-y-auto p-4">
-        {COLUMNS.map(({ status, label }) => (
-          <KanbanColumn
-            key={status}
-            status={status}
-            label={label}
-            tasks={tasksByStatus[status]}
-            showAgentBadge={showAgentBadge}
-            agentNames={agentNames}
-            onSelect={(task) => setSelectedTaskNumber(task.task_number)}
-            onApprove={(task) => approveMutation.mutate(task.task_number)}
-            onExecute={(task) => executeMutation.mutate(task.task_number)}
-            onStatusChange={(task, newStatus) =>
-              updateMutation.mutate({
-                taskNumber: task.task_number,
-                status: newStatus,
-              })
-            }
-          />
-        ))}
-      </div>
-
-      {/* Create Dialog */}
-      {effectiveOwner && (
-        <CreateTaskDialog
-          open={createOpen}
-          onClose={() => setCreateOpen(false)}
-          onCreate={(request) => createMutation.mutate(request)}
-          isPending={createMutation.isPending}
-          ownerAgentId={effectiveOwner}
-        />
-      )}
-
-      {/* Detail Dialog */}
-      {selectedTask && (
-        <TaskDetailDialog
-          task={selectedTask}
-          agentNames={agentNames}
-          showAgentBadge={showAgentBadge}
-          onClose={() => setSelectedTaskNumber(null)}
-          onApprove={() => approveMutation.mutate(selectedTask.task_number)}
-          onExecute={() => executeMutation.mutate(selectedTask.task_number)}
-          onDelete={() => deleteMutation.mutate(selectedTask.task_number)}
-          onStatusChange={(status) =>
-            updateMutation.mutate({
-              taskNumber: selectedTask.task_number,
-              status,
-            })
-          }
-        />
-      )}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Kanban Column
-// ---------------------------------------------------------------------------
-
-function KanbanColumn({
-  status,
-  label,
-  tasks,
-  showAgentBadge,
-  agentNames,
-  onSelect,
-  onApprove,
-  onExecute,
-  onStatusChange,
-}: {
-  status: TaskStatus;
-  label: string;
-  tasks: TaskItem[];
-  showAgentBadge?: boolean;
-  agentNames?: Record<string, string | null | undefined>;
-  onSelect: (task: TaskItem) => void;
-  onApprove: (task: TaskItem) => void;
-  onExecute: (task: TaskItem) => void;
-  onStatusChange: (task: TaskItem, status: TaskStatus) => void;
-}) {
-  return (
-    <div className="flex min-h-0 min-w-[14rem] flex-1 basis-[14rem] flex-col rounded-lg border border-app-line/50 bg-app-darkBox/20">
-      {/* Column Header */}
-      <div className="flex items-center gap-2 border-b border-app-line/30 px-3 py-2">
-        <Badge variant={STATUS_COLORS[status]} size="sm">
-          {label}
-        </Badge>
-        <span className="text-tiny text-ink-faint">{tasks.length}</span>
-      </div>
-
-      {/* Cards */}
-      <div className="flex-1 space-y-2 overflow-y-auto p-2">
-        <AnimatePresence mode="popLayout">
-          {tasks.map((task) => (
-            <TaskCard
-              key={task.id}
-              task={task}
-              showAgentBadge={showAgentBadge}
-              agentNames={agentNames}
-              onSelect={() => onSelect(task)}
-              onApprove={() => onApprove(task)}
-              onExecute={() => onExecute(task)}
-              onStatusChange={(newStatus) => onStatusChange(task, newStatus)}
-            />
-          ))}
-        </AnimatePresence>
-        {tasks.length === 0 && (
-          <div className="py-4 text-center text-tiny text-ink-faint">
-            No tasks
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Task Card
-// ---------------------------------------------------------------------------
-
-function TaskCard({
-  task,
-  showAgentBadge,
-  agentNames,
-  onSelect,
-  onApprove,
-  onExecute,
-  onStatusChange,
-}: {
-  task: TaskItem;
-  showAgentBadge?: boolean;
-  agentNames?: Record<string, string | null | undefined>;
-  onSelect: () => void;
-  onApprove: () => void;
-  onExecute: () => void;
-  onStatusChange: (status: TaskStatus) => void;
-}) {
-  const subtasksDone = task.subtasks.filter((s) => s.completed).length;
-  const subtasksTotal = task.subtasks.length;
-
-  return (
-    <motion.div
-      layout
-      initial={{ opacity: 0, scale: 0.95 }}
-      animate={{ opacity: 1, scale: 1 }}
-      exit={{ opacity: 0, scale: 0.95 }}
-      transition={{ duration: 0.15 }}
-      className="cursor-pointer rounded-md border border-app-line/30 bg-app p-3 transition-colors hover:border-app-line"
-      onClick={onSelect}
-    >
-      {/* Title row */}
-      <div className="flex items-start justify-between gap-2">
-        <span className="text-sm font-medium text-ink leading-tight">
-          #{task.task_number} {task.title}
-        </span>
-      </div>
-
-      {/* Meta row */}
-      <div className="mt-2 flex flex-wrap items-center gap-1.5">
-        <Badge variant={PRIORITY_COLORS[task.priority]} size="sm">
-          {PRIORITY_LABELS[task.priority]}
-        </Badge>
-        {showAgentBadge && (
-          <Badge variant="default" size="sm">
-            {agentNames?.[task.assigned_agent_id] ?? task.assigned_agent_id}
-          </Badge>
-        )}
-        {subtasksTotal > 0 && (
-          <span className="text-tiny text-ink-faint">
-            {subtasksDone}/{subtasksTotal}
-          </span>
-        )}
-        {task.worker_id && (
-          <Badge variant="violet" size="sm">
-            Worker
-          </Badge>
-        )}
-        <GithubMetadataBadges metadata={task.metadata} compact />
-      </div>
-
-      {/* Subtask progress bar */}
-      {subtasksTotal > 0 && (
-        <div className="mt-2 h-1 overflow-hidden rounded-full bg-app-line/30">
-          <div
-            className="h-full rounded-full bg-accent transition-all"
-            style={{ width: `${(subtasksDone / subtasksTotal) * 100}%` }}
-          />
-        </div>
-      )}
-
-      {/* Quick actions */}
-      <div className="mt-2 flex gap-1" onClick={(e) => e.stopPropagation()}>
-        {task.status === "pending_approval" && (
-          <button
-            className="rounded px-1.5 py-0.5 text-tiny text-accent hover:bg-accent/10"
-            onClick={onApprove}
-          >
-            Approve
-          </button>
-        )}
-        {(task.status === "backlog" || task.status === "pending_approval") && (
-          <button
-            className="rounded px-1.5 py-0.5 text-tiny text-violet-400 hover:bg-violet-400/10"
-            onClick={onExecute}
-          >
-            Execute
-          </button>
-        )}
-        {task.status === "in_progress" && (
-          <button
-            className="rounded px-1.5 py-0.5 text-tiny text-emerald-400 hover:bg-emerald-400/10"
-            onClick={() => onStatusChange("done")}
-          >
-            Mark Done
-          </button>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="mt-1.5 text-tiny text-ink-faint">
-        {formatTimeAgo(task.created_at)} by {task.created_by}
-      </div>
-    </motion.div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Create Task Dialog
-// ---------------------------------------------------------------------------
-
-function CreateTaskDialog({
-  open,
-  onClose,
-  onCreate,
-  isPending,
-  ownerAgentId,
-}: {
-  open: boolean;
-  onClose: () => void;
-  onCreate: (request: CreateTaskRequest) => void;
-  isPending: boolean;
-  ownerAgentId: string;
-}) {
-  const [title, setTitle] = useState("");
-  const [description, setDescription] = useState("");
-  const [priority, setPriority] = useState<TaskPriority>("medium");
-  const [status, setStatus] = useState<TaskStatus>("backlog");
-
-  const handleSubmit = useCallback(() => {
-    if (!title.trim() || isPending) return;
-    onCreate({
-      owner_agent_id: ownerAgentId,
-      title: title.trim(),
-      description: description.trim() || undefined,
-      priority,
-      status,
-    });
-    setTitle("");
-    setDescription("");
-    setPriority("medium");
-    setStatus("backlog");
-  }, [title, description, priority, status, ownerAgentId, isPending, onCreate]);
-
-  return (
-    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Create Task</DialogTitle>
-        </DialogHeader>
-        <div className="flex flex-col gap-3 py-2">
-          <div>
-            <label className="mb-1 block text-xs text-ink-dull">Title</label>
-            <input
-              className="w-full rounded-md border border-app-line bg-app-darkBox px-3 py-2 text-sm text-ink placeholder:text-ink-faint focus:border-accent focus:outline-none"
-              placeholder="Task title..."
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
-              autoFocus
-            />
-          </div>
-          <div>
-            <label className="mb-1 block text-xs text-ink-dull">
-              Description
-            </label>
-            <textarea
-              className="w-full rounded-md border border-app-line bg-app-darkBox px-3 py-2 text-sm text-ink placeholder:text-ink-faint focus:border-accent focus:outline-none"
-              placeholder="Optional description..."
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              rows={3}
-            />
-          </div>
-          <div className="flex gap-4">
-            <div className="flex-1">
-              <label className="mb-1 block text-xs text-ink-dull">
-                Priority
-              </label>
-              <select
-                className="w-full rounded-md border border-app-line bg-app-darkBox px-3 py-2 text-sm text-ink focus:border-accent focus:outline-none"
-                value={priority}
-                onChange={(e) => setPriority(e.target.value as TaskPriority)}
-              >
-                <option value="critical">Critical</option>
-                <option value="high">High</option>
-                <option value="medium">Medium</option>
-                <option value="low">Low</option>
-              </select>
-            </div>
-            <div className="flex-1">
-              <label className="mb-1 block text-xs text-ink-dull">
-                Initial Status
-              </label>
-              <select
-                className="w-full rounded-md border border-app-line bg-app-darkBox px-3 py-2 text-sm text-ink focus:border-accent focus:outline-none"
-                value={status}
-                onChange={(e) => setStatus(e.target.value as TaskStatus)}
-              >
-                <option value="pending_approval">Pending Approval</option>
-                <option value="backlog">Backlog</option>
-                <option value="ready">Ready</option>
-              </select>
-            </div>
-          </div>
-        </div>
-        <DialogFooter>
-          <Button variant="outline" size="sm" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button
-            size="sm"
-            onClick={handleSubmit}
-            disabled={!title.trim() || isPending}
-          >
-            {isPending ? "Creating..." : "Create"}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Task Detail Dialog
-// ---------------------------------------------------------------------------
-
-function TaskDetailDialog({
-  task,
-  agentNames,
-  showAgentBadge,
-  onClose,
-  onApprove,
-  onExecute,
-  onDelete,
-  onStatusChange,
-}: {
-  task: TaskItem;
-  agentNames?: Record<string, string | null | undefined>;
-  showAgentBadge?: boolean;
-  onClose: () => void;
-  onApprove: () => void;
-  onExecute: () => void;
-  onDelete: () => void;
-  onStatusChange: (status: TaskStatus) => void;
-}) {
-  return (
-    <Dialog open={true} onOpenChange={(v) => !v && onClose()}>
-      <DialogContent className="!flex max-h-[85vh] max-w-lg !flex-col overflow-hidden">
-        <DialogHeader className="shrink-0">
-          <DialogTitle>
-            #{task.task_number} {task.title}
-          </DialogTitle>
-        </DialogHeader>
-        <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto py-2 pr-1">
-          {/* Status + Priority */}
-          <div className="flex items-center gap-2">
-            <Badge variant={STATUS_COLORS[task.status]} size="md">
-              {task.status.replace("_", " ")}
-            </Badge>
-            <Badge variant={PRIORITY_COLORS[task.priority]} size="md">
-              {PRIORITY_LABELS[task.priority]}
-            </Badge>
-            {task.worker_id && (
-              <Badge variant="violet" size="md">
-                Worker: {task.worker_id.slice(0, 8)}
-              </Badge>
-            )}
-          </div>
-
-          {/* Agent assignment */}
-          {showAgentBadge && (
-            <div className="flex items-center gap-2 text-xs text-ink-dull">
-              <span>Assigned to:</span>
-              <Badge variant="default" size="sm">
-                {agentNames?.[task.assigned_agent_id] ?? task.assigned_agent_id}
-              </Badge>
-              {task.owner_agent_id !== task.assigned_agent_id && (
-                <>
-                  <span>Owner:</span>
-                  <Badge variant="default" size="sm">
-                    {agentNames?.[task.owner_agent_id] ?? task.owner_agent_id}
-                  </Badge>
-                </>
-              )}
-            </div>
-          )}
-
-          {/* Description */}
-          {task.description && (
-            <div>
-              <label className="mb-1 block text-xs text-ink-dull">
-                Description
-              </label>
-              <Markdown className="break-words text-sm text-ink">
-                {task.description}
-              </Markdown>
-            </div>
-          )}
-
-          {/* Subtasks */}
-          {task.subtasks.length > 0 && (
-            <div>
-              <label className="mb-1 block text-xs text-ink-dull">
-                Subtasks ({task.subtasks.filter((s) => s.completed).length}/
-                {task.subtasks.length})
-              </label>
-              <ul className="space-y-1">
-                {task.subtasks.map((subtask, index) => (
-                  <li key={index} className="flex items-center gap-2 text-sm">
-                    <span
-                      className={
-                        subtask.completed
-                          ? "text-emerald-400"
-                          : "text-ink-faint"
-                      }
-                    >
-                      {subtask.completed ? "[x]" : "[ ]"}
-                    </span>
-                    <span
-                      className={
-                        subtask.completed
-                          ? "text-ink-dull line-through"
-                          : "text-ink"
-                      }
-                    >
-                      {subtask.title}
-                    </span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-
-          {(() => {
-            const githubRefs = getGithubReferences(task.metadata);
-            if (githubRefs.length === 0) return null;
-            return (
-              <div>
-                <label className="mb-1 block text-xs text-ink-dull">
-                  GitHub Links
-                </label>
-                <GithubMetadataBadges references={githubRefs} />
-              </div>
-            );
-          })()}
-
-          {/* Metadata */}
-          <div className="grid grid-cols-1 gap-2 text-xs text-ink-dull sm:grid-cols-2">
-            <div>Created: {formatTimeAgo(task.created_at)}</div>
-            <div>By: {task.created_by}</div>
-            {task.approved_at && (
-              <div>Approved: {formatTimeAgo(task.approved_at)}</div>
-            )}
-            {task.approved_by && <div>By: {task.approved_by}</div>}
-            {task.completed_at && (
-              <div>Completed: {formatTimeAgo(task.completed_at)}</div>
-            )}
-            <div>Updated: {formatTimeAgo(task.updated_at)}</div>
-          </div>
-        </div>
-
-        <DialogFooter className="shrink-0">
-          <div className="flex w-full flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-            <button
-              className="text-xs text-red-400 hover:text-red-300"
-              onClick={onDelete}
-            >
-              Delete
-            </button>
-            <div className="flex flex-wrap gap-2 sm:justify-end">
-              {task.status === "pending_approval" && (
-                <Button size="sm" onClick={onApprove}>
-                  Approve
-                </Button>
-              )}
-              {(task.status === "backlog" ||
-                task.status === "pending_approval") && (
-                <Button size="sm" onClick={onExecute}>
-                  Execute
-                </Button>
-              )}
-              {task.status === "ready" && (
-                <Badge variant="accent" size="md">
-                  Waiting for cortex pickup
-                </Badge>
-              )}
-              {task.status === "in_progress" && (
-                <Button size="sm" onClick={() => onStatusChange("done")}>
-                  Mark Done
-                </Button>
-              )}
-              {task.status === "done" && (
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => onStatusChange("backlog")}
-                >
-                  Reopen
-                </Button>
-              )}
-              <Button size="sm" variant="outline" onClick={onClose}>
-                Close
-              </Button>
-            </div>
-          </div>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/interface/src/components/TaskUtils.tsx b/interface/src/components/TaskUtils.tsx
new file mode 100644
index 000000000..0bb1487ef
--- /dev/null
+++ b/interface/src/components/TaskUtils.tsx
@@ -0,0 +1,164 @@
+import { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCodeBranch, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
+import { Badge, Popover, SelectPill, OptionList, OptionListItem } from "@spacedrive/primitives";
+
+// ---------------------------------------------------------------------------
+// GitHub metadata helpers
+// ---------------------------------------------------------------------------
+
+interface GithubReference {
+  kind: "issue" | "pr";
+  label: string;
+  url: string | null;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function toSafeExternalUrl(value: unknown): string | null {
+  if (typeof value !== "string") return null;
+  try {
+    const parsed = new URL(value);
+    if (parsed.protocol === "https:" || parsed.protocol === "http:") {
+      return parsed.toString();
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+function readGithubReference(
+  value: unknown,
+  kind: GithubReference["kind"],
+): GithubReference | null {
+  if (!isRecord(value)) {
+    return null;
+  }
+
+  const number = typeof value.number === "number" ? value.number : null;
+  const repo = typeof value.repo === "string" ? value.repo : null;
+  const url = toSafeExternalUrl(value.url);
+
+  if (number === null && url === null && repo === null) {
+    return null;
+  }
+
+  const noun = kind === "issue" ? "Issue" : "PR";
+  const label = number !== null ? `${noun} #${number}` : repo ? `${noun} ${repo}` : noun;
+
+  return { kind, label, url };
+}
+
+export function getGithubReferences(metadata: Record<string, unknown>): GithubReference[] {
+  return [
+    readGithubReference(metadata.github_issue, "issue"),
+    readGithubReference(metadata.github_pr, "pr"),
+  ].filter((reference): reference is GithubReference => reference !== null);
+}
+
+export function GithubMetadataBadges({
+  metadata,
+  references: precomputed,
+  compact = false,
+}: {
+  metadata?: Record<string, unknown>;
+  references?: GithubReference[];
+  compact?: boolean;
+}) {
+  const references = precomputed ?? (metadata ? getGithubReferences(metadata) : []);
+  if (references.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-1.5">
+      {references.map((reference) => {
+        const content = (
+          <>
+            <FontAwesomeIcon icon={faCodeBranch} className="text-[10px]" />
+            <span>{reference.label}</span>
+            {reference.url && (
+              <FontAwesomeIcon icon={faExternalLinkAlt} className="text-[9px]" />
+            )}
+          </>
+        );
+
+        const className = compact
+          ? "cursor-pointer hover:border-blue-400/50 hover:text-blue-300"
+          : "cursor-pointer hover:border-blue-400/50 hover:bg-blue-500/20 hover:text-blue-300";
+
+        if (reference.url) {
+          return (
+            <a
+              key={`${reference.kind}-${reference.label}`}
+              href={reference.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex"
+              onClick={(event) => event.stopPropagation()}
+            >
+              <Badge variant="info" size="sm" className={className}>
+                {content}
+              </Badge>
+            </a>
+          );
+        }
+
+        return (
+          <Badge
+            key={`${reference.kind}-${reference.label}`}
+            variant="info"
+            size="sm"
+          >
+            {content}
+          </Badge>
+        );
+      })}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// InlineSelect — generic popover select pill
+// ---------------------------------------------------------------------------
+
+export function InlineSelect({
+  value,
+  options,
+  onChange,
+}: {
+  value: string;
+  options: { value: string; label: string }[];
+  onChange: (value: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const selectedLabel = options.find((o) => o.value === value)?.label ?? value;
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <SelectPill size="sm" className="w-full">{selectedLabel}</SelectPill>
+      </Popover.Trigger>
+      <Popover.Content align="start" sideOffset={4} className="min-w-[160px] p-1.5">
+        <OptionList>
+          {options.map((opt) => (
+            <OptionListItem
+              key={opt.value}
+              selected={opt.value === value}
+              size="sm"
+              onClick={() => {
+                onChange(opt.value);
+                setOpen(false);
+              }}
+            >
+              {opt.label}
+            </OptionListItem>
+          ))}
+        </OptionList>
+      </Popover.Content>
+    </Popover.Root>
+  );
+}
diff --git a/interface/src/components/ToolCall.tsx b/interface/src/components/ToolCall.tsx
index 82f6c791e..531f01296 100644
--- a/interface/src/components/ToolCall.tsx
+++ b/interface/src/components/ToolCall.tsx
@@ -1,6 +1,6 @@
-import { useState } from "react";
-import { cx } from "@/ui/utils";
-import type { TranscriptStep, OpenCodePart } from "@/api/client";
+import {useState} from "react";
+import {cx} from "class-variance-authority";
+import type {TranscriptStep, OpenCodePart} from "@/api/client";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -37,17 +37,17 @@ export interface ToolCallPair {
  * list of renderable items: text blocks and paired tool calls.
  */
 export type TranscriptItem =
-	| { kind: "text"; text: string }
-	| { kind: "tool"; pair: ToolCallPair };
+	| {kind: "text"; text: string}
+	| {kind: "tool"; pair: ToolCallPair};
 
 export function pairTranscriptSteps(steps: TranscriptStep[]): TranscriptItem[] {
 	const items: TranscriptItem[] = [];
-	const resultsById = new Map<string, { name: string; text: string }>();
+	const resultsById = new Map<string, {name: string; text: string}>();
 
 	// First pass: index all tool_result steps by call_id
 	for (const step of steps) {
 		if (step.type === "tool_result") {
-			resultsById.set(step.call_id, { name: step.name, text: step.text });
+			resultsById.set(step.call_id, {name: step.name, text: step.text});
 		}
 	}
 
@@ -56,7 +56,7 @@ export function pairTranscriptSteps(steps: TranscriptStep[]): TranscriptItem[] {
 		if (step.type === "action") {
 			for (const content of step.content) {
 				if (content.type === "text") {
-					items.push({ kind: "text", text: content.text });
+					items.push({kind: "text", text: content.text});
 				} else if (content.type === "tool_call") {
 					const result = resultsById.get(content.id);
 					const parsedArgs = tryParseJson(content.args);
@@ -76,11 +76,7 @@ export function pairTranscriptSteps(steps: TranscriptStep[]): TranscriptItem[] {
 							args: parsedArgs,
 							resultRaw: result?.text ?? null,
 							result: parsedResult,
-							status: result
-								? isError
-									? "error"
-									: "completed"
-								: "running",
+							status: result ? (isError ? "error" : "completed") : "running",
 						},
 					});
 				}
@@ -97,16 +93,14 @@ export function pairTranscriptSteps(steps: TranscriptStep[]): TranscriptItem[] {
  * rendered by the unified ToolCall component.
  */
 export function openCodePartToPair(
-	part: Extract<OpenCodePart, { type: "tool" }>,
+	part: Extract<OpenCodePart, {type: "tool"}>,
 ): ToolCallPair {
 	const input =
 		part.status === "running" || part.status === "completed"
 			? (part as any).input
 			: undefined;
-	const output =
-		part.status === "completed" ? (part as any).output : undefined;
-	const error =
-		part.status === "error" ? (part as any).error : undefined;
+	const output = part.status === "completed" ? (part as any).output : undefined;
+	const error = part.status === "error" ? (part as any).error : undefined;
 	const title =
 		part.status === "running" || part.status === "completed"
 			? (part as any).title
@@ -133,11 +127,15 @@ export function openCodePartToPair(
 	};
 }
 
-function tryParseJson(text: string): Record<string, unknown> | null {
+export function tryParseJson(text: string): Record<string, unknown> | null {
 	if (!text || text.trim().length === 0) return null;
 	try {
 		const parsed = JSON.parse(text);
-		if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
+		if (
+			typeof parsed === "object" &&
+			parsed !== null &&
+			!Array.isArray(parsed)
+		) {
 			return parsed as Record<string, unknown>;
 		}
 		return null;
@@ -146,7 +144,7 @@ function tryParseJson(text: string): Record<string, unknown> | null {
 	}
 }
 
-function isErrorResult(
+export function isErrorResult(
 	text: string,
 	parsed: Record<string, unknown> | null,
 ): boolean {
@@ -154,7 +152,8 @@ function isErrorResult(
 	if (parsed?.status === "error") return true;
 	// Shell structured results: { success: false } or non-zero exit code
 	if (parsed?.success === false) return true;
-	if (typeof parsed?.exit_code === "number" && parsed.exit_code !== 0) return true;
+	if (typeof parsed?.exit_code === "number" && parsed.exit_code !== 0)
+		return true;
 	const lower = text.toLowerCase();
 	return (
 		lower.startsWith("error:") ||
@@ -288,8 +287,7 @@ const toolRenderers: Record<string, ToolRenderer> = {
 			if (!pair.resultRaw) return null;
 			// Screenshot results may contain base64 image data or a path
 			if (pair.result?.base64) {
-				const mimeType =
-					(pair.result.mime_type as string) ?? "image/png";
+				const mimeType = (pair.result.mime_type as string) ?? "image/png";
 				return (
 					<div className="px-3 py-2">
 						<img
@@ -307,9 +305,7 @@ const toolRenderers: Record<string, ToolRenderer> = {
 	browser_evaluate: {
 		summary(pair) {
 			const expression = pair.args?.expression;
-			return expression
-				? truncate(String(expression), 50)
-				: "Evaluate JS";
+			return expression ? truncate(String(expression), 50) : "Evaluate JS";
 		},
 		argsView(pair) {
 			const expression = pair.args?.expression;
@@ -343,9 +339,7 @@ const toolRenderers: Record<string, ToolRenderer> = {
 	browser_tab_close: {
 		summary(pair) {
 			const tabId = pair.args?.tab_id;
-			return tabId !== undefined
-				? `Close tab ${tabId}`
-				: "Close tab";
+			return tabId !== undefined ? `Close tab ${tabId}` : "Close tab";
 		},
 	},
 
@@ -465,9 +459,7 @@ const toolRenderers: Record<string, ToolRenderer> = {
 					</p>
 					{!!oldStr && (
 						<div className="mt-1">
-							<p className="text-tiny font-medium text-red-400/70">
-								Old
-							</p>
+							<p className="text-tiny font-medium text-red-400/70">Old</p>
 							<pre className="max-h-20 overflow-auto font-mono text-tiny text-red-300/60">
 								{truncate(String(oldStr), 500)}
 							</pre>
@@ -475,9 +467,7 @@ const toolRenderers: Record<string, ToolRenderer> = {
 					)}
 					{!!newStr && (
 						<div className="mt-1">
-							<p className="text-tiny font-medium text-emerald-400/70">
-								New
-							</p>
+							<p className="text-tiny font-medium text-emerald-400/70">New</p>
 							<pre className="max-h-20 overflow-auto font-mono text-tiny text-emerald-300/60">
 								{truncate(String(newStr), 500)}
 							</pre>
@@ -645,9 +635,7 @@ const toolRenderers: Record<string, ToolRenderer> = {
 					</p>
 					{!!oldStr && (
 						<div className="mt-1">
-							<p className="text-tiny font-medium text-red-400/70">
-								Old
-							</p>
+							<p className="text-tiny font-medium text-red-400/70">Old</p>
 							<pre className="max-h-20 overflow-auto font-mono text-tiny text-red-300/60">
 								{truncate(String(oldStr), 500)}
 							</pre>
@@ -655,9 +643,7 @@ const toolRenderers: Record<string, ToolRenderer> = {
 					)}
 					{!!newStr && (
 						<div className="mt-1">
-							<p className="text-tiny font-medium text-emerald-400/70">
-								New
-							</p>
+							<p className="text-tiny font-medium text-emerald-400/70">New</p>
 							<pre className="max-h-20 overflow-auto font-mono text-tiny text-emerald-300/60">
 								{truncate(String(newStr), 500)}
 							</pre>
@@ -758,7 +744,11 @@ const toolRenderers: Record<string, ToolRenderer> = {
 		summary(pair) {
 			if (pair.title) return pair.title;
 			const query = pair.args?.query;
-			const resultCount = pair.result?.result_count ?? (Array.isArray(pair.result?.results) ? (pair.result!.results as unknown[]).length : null);
+			const resultCount =
+				pair.result?.result_count ??
+				(Array.isArray(pair.result?.results)
+					? (pair.result!.results as unknown[]).length
+					: null);
 			const queryStr = query ? truncate(String(query), 50) : null;
 			if (queryStr && resultCount != null) {
 				return `${queryStr} (${resultCount} result${resultCount !== 1 ? "s" : ""})`;
@@ -810,9 +800,7 @@ const toolRenderers: Record<string, ToolRenderer> = {
 			return (
 				<div className="border-b border-app-line/20 px-3 py-2">
 					{!!docId && (
-						<p className="font-mono text-tiny text-ink-dull">
-							{String(docId)}
-						</p>
+						<p className="font-mono text-tiny text-ink-dull">{String(docId)}</p>
 					)}
 					{!!query && (
 						<p className="mt-0.5 text-tiny text-ink-faint">
@@ -867,13 +855,11 @@ function getRenderer(name: string): ToolRenderer {
 // Shared sub-components
 // ---------------------------------------------------------------------------
 
-function ResultLine({ text }: { text: string }) {
-	return (
-		<p className="px-3 py-2 text-tiny text-ink-dull">{text}</p>
-	);
+function ResultLine({text}: {text: string}) {
+	return <p className="px-3 py-2 text-tiny text-ink-dull">{text}</p>;
 }
 
-function ResultText({ text }: { text: string | null }) {
+function ResultText({text}: {text: string | null}) {
 	if (!text) return null;
 	return (
 		<pre className="max-h-60 overflow-auto whitespace-pre-wrap px-3 py-2 font-mono text-tiny text-ink-dull">
@@ -907,9 +893,7 @@ function CollapsiblePre({
 					onClick={() => setExpanded(!expanded)}
 					className="w-full border-t border-app-line/20 px-3 py-1 text-center text-tiny text-ink-faint hover:text-ink-dull"
 				>
-					{expanded
-						? "Show less"
-						: `Show all ${lines.length} lines`}
+					{expanded ? "Show less" : `Show all ${lines.length} lines`}
 				</button>
 			)}
 		</div>
@@ -920,7 +904,7 @@ function CollapsiblePre({
 // Shell result rendering
 // ---------------------------------------------------------------------------
 
-function ShellResultView({ pair }: { pair: ToolCallPair }) {
+function ShellResultView({pair}: {pair: ToolCallPair}) {
 	const r = pair.result;
 
 	// If we can't parse structured output, fall back to raw text
@@ -962,17 +946,21 @@ function ShellResultView({ pair }: { pair: ToolCallPair }) {
 			{hasStderr && (
 				<div>
 					<div className="flex items-center gap-1.5 border-b border-app-line/10 px-3 pt-1.5 pb-1">
-						<span className={cx(
-							"text-tiny font-medium",
-							isError ? "text-red-400/70" : "text-yellow-500/70",
-						)}>
+						<span
+							className={cx(
+								"text-tiny font-medium",
+								isError ? "text-red-400/70" : "text-yellow-500/70",
+							)}
+						>
 							stderr
 						</span>
 					</div>
-					<pre className={cx(
-						"max-h-40 overflow-auto whitespace-pre-wrap px-3 py-2 font-mono text-tiny",
-						isError ? "text-red-300/60" : "text-yellow-300/50",
-					)}>
+					<pre
+						className={cx(
+							"max-h-40 overflow-auto whitespace-pre-wrap px-3 py-2 font-mono text-tiny",
+							isError ? "text-red-300/60" : "text-yellow-300/50",
+						)}
+					>
 						{stderr.replace(/\n$/, "")}
 					</pre>
 				</div>
@@ -986,15 +974,15 @@ function ShellResultView({ pair }: { pair: ToolCallPair }) {
 // ---------------------------------------------------------------------------
 
 const STATUS_ICONS: Record<ToolCallStatus, string> = {
-	running: "\u25B6",   // ▶
+	running: "\u25B6", // ▶
 	completed: "\u2713", // ✓
-	error: "\u2717",     // ✗
+	error: "\u2717", // ✗
 };
 
 const STATUS_COLORS: Record<ToolCallStatus, string> = {
 	running: "text-accent",
-	completed: "text-emerald-500",
-	error: "text-red-400",
+	completed: "text-status-success",
+	error: "text-status-error",
 };
 
 /** Human-readable tool name: browser_navigate → Navigate */
@@ -1032,7 +1020,7 @@ function toolCategory(name: string): string | null {
 // Main component
 // ---------------------------------------------------------------------------
 
-export function ToolCall({ pair }: { pair: ToolCallPair }) {
+export function ToolCall({pair}: {pair: ToolCallPair}) {
 	const [expanded, setExpanded] = useState(false);
 	const renderer = getRenderer(pair.name);
 	const summary = renderer.summary(pair);
@@ -1042,10 +1030,8 @@ export function ToolCall({ pair }: { pair: ToolCallPair }) {
 	return (
 		<div
 			className={cx(
-				"rounded-md border bg-app-darkBox/30",
-				pair.status === "error"
-					? "border-red-500/30"
-					: "border-app-line/50",
+				"rounded-md border bg-app-dark-box/30",
+				pair.status === "error" ? "border-status-error/30" : "border-app-line/50",
 			)}
 		>
 			{/* Header — always visible */}
@@ -1062,17 +1048,11 @@ export function ToolCall({ pair }: { pair: ToolCallPair }) {
 					{STATUS_ICONS[pair.status]}
 				</span>
 				{category && (
-					<span className="text-tiny text-ink-faint">
-						{category}
-					</span>
+					<span className="text-tiny text-ink-faint">{category}</span>
 				)}
-				<span className="font-medium text-ink-dull">
-					{displayName}
-				</span>
+				<span className="font-medium text-ink-dull">{displayName}</span>
 				{summary && !expanded && (
-					<span className="flex-1 truncate text-ink-faint">
-						{summary}
-					</span>
+					<span className="flex-1 truncate text-ink-faint">{summary}</span>
 				)}
 				{pair.status === "running" && (
 					<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-accent" />
@@ -1092,7 +1072,10 @@ export function ToolCall({ pair }: { pair: ToolCallPair }) {
 	);
 }
 
-function renderArgs(pair: ToolCallPair, renderer: ToolRenderer): React.ReactNode {
+function renderArgs(
+	pair: ToolCallPair,
+	renderer: ToolRenderer,
+): React.ReactNode {
 	// Try custom args view first
 	if (renderer.argsView) {
 		const custom = renderer.argsView(pair);
@@ -1130,7 +1113,10 @@ function renderArgs(pair: ToolCallPair, renderer: ToolRenderer): React.ReactNode
 	return null;
 }
 
-function renderResult(pair: ToolCallPair, renderer: ToolRenderer): React.ReactNode {
+function renderResult(
+	pair: ToolCallPair,
+	renderer: ToolRenderer,
+): React.ReactNode {
 	if (pair.status === "running") {
 		return (
 			<div className="flex items-center gap-2 px-3 py-2 text-tiny text-ink-faint">
diff --git a/interface/src/components/TopBar.tsx b/interface/src/components/TopBar.tsx
index f1ecd4b59..a933ec641 100644
--- a/interface/src/components/TopBar.tsx
+++ b/interface/src/components/TopBar.tsx
@@ -1,7 +1,16 @@
-import { createContext, useContext, useRef, useCallback, useSyncExternalStore, type ReactNode, type MouseEvent } from "react";
-import { Link } from "@tanstack/react-router";
-import { BASE_PATH } from "@/api/client";
-import { IS_TAURI, startDragging } from "@/platform";
+import {
+	createContext,
+	useContext,
+	useRef,
+	useCallback,
+	useSyncExternalStore,
+	type ReactNode,
+	type MouseEvent,
+} from "react";
+import {useQuery} from "@tanstack/react-query";
+import {SelectPill} from "@spacedrive/primitives";
+import {api} from "@/api/client";
+import {IS_DESKTOP, IS_MACOS, startDragging} from "@/platform";
 
 // ── Context ──────────────────────────────────────────────────────────────
 
@@ -36,7 +45,7 @@ function createTopBarStore(): TopBarStore {
 
 const TopBarContext = createContext<TopBarStore | null>(null);
 
-export function TopBarProvider({ children }: { children: ReactNode }) {
+export function TopBarProvider({children}: {children: ReactNode}) {
 	const storeRef = useRef<TopBarStore>(null);
 	if (!storeRef.current) {
 		storeRef.current = createTopBarStore();
@@ -57,7 +66,8 @@ export function TopBarProvider({ children }: { children: ReactNode }) {
  */
 export function useSetTopBar(node: ReactNode) {
 	const store = useContext(TopBarContext);
-	if (!store) throw new Error("useSetTopBar must be used within TopBarProvider");
+	if (!store)
+		throw new Error("useSetTopBar must be used within TopBarProvider");
 
 	// Update content synchronously during render (like useSyncExternalStore pattern).
 	// This avoids the useEffect loop entirely.
@@ -70,6 +80,14 @@ export function TopBar() {
 	const store = useContext(TopBarContext);
 	if (!store) throw new Error("TopBar must be used within TopBarProvider");
 
+	const { data: globalSettings } = useQuery({
+		queryKey: ["global-settings"],
+		queryFn: api.globalSettings,
+		staleTime: 10_000,
+	});
+
+	const companyName = globalSettings?.company_name ?? "My Company";
+
 	const content = useSyncExternalStore(
 		store.subscribe,
 		store.getSnapshot,
@@ -77,43 +95,36 @@ export function TopBar() {
 	);
 
 	const handleMouseDown = useCallback((e: MouseEvent) => {
-		if (!IS_TAURI) return;
+		if (!IS_DESKTOP) return;
 		// Only drag on primary button, and not when clicking interactive elements
 		if (e.buttons !== 1) return;
 		const target = e.target as HTMLElement;
-		if (target.closest("a, button, input, select, textarea, [role=button]")) return;
+		if (target.closest("a, button, input, select, textarea, [role=button]"))
+			return;
 		e.preventDefault();
 		startDragging();
 	}, []);
 
 	return (
 		<div
-			className={`flex h-12 w-full shrink-0 border-b border-app-line bg-app-darkBox/50${IS_TAURI ? " select-none" : ""}`}
+			className={`flex h-12 w-full shrink-0 bg-app-dark-box/50${IS_DESKTOP ? " select-none" : ""}`}
 			onMouseDown={handleMouseDown}
 		>
 			{/* Left corner block */}
-			{IS_TAURI ? (
-				/* Tauri: padding for macOS traffic lights */
+			{IS_DESKTOP && IS_MACOS ? (
+				/* Padding for native traffic lights */
 				<div className="w-[72px] shrink-0" />
 			) : (
-				/* Web: ball icon block matching sidebar width + border */
-				<Link
-					to="/"
-					className="flex w-14 shrink-0 items-center justify-center border-r border-sidebar-line bg-sidebar"
-				>
-					<img
-						src={`${BASE_PATH}/ball.png`}
-						alt=""
-						className="h-6 w-6 transition-transform duration-150 ease-out hover:scale-110 active:scale-95"
-						draggable={false}
-					/>
-				</Link>
+				/* Browser/non-mac desktop: ball icon block matching sidebar width + border */
+				<div className="flex w-[220px] shrink-0 items-center border-r border-app-line bg-sidebar px-3">
+					<SelectPill variant="sidebar" size="md" className="w-full">
+						<span className="font-semibold">{companyName}</span>
+					</SelectPill>
+				</div>
 			)}
 
 			{/* Route-controlled content area */}
-			<div className="flex min-w-0 flex-1 items-center">
-				{content}
-			</div>
+			<div className="flex min-w-0 flex-1 items-center">{content}</div>
 		</div>
 	);
 }
diff --git a/interface/src/components/TopologyGraph.tsx b/interface/src/components/TopologyGraph.tsx
deleted file mode 100644
index c04e0f5e8..000000000
--- a/interface/src/components/TopologyGraph.tsx
+++ /dev/null
@@ -1,1890 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from "react";
-import {
-	ReactFlow,
-	Background,
-	Controls,
-	type Node,
-	type Edge,
-	type Connection,
-	type NodeTypes,
-	type EdgeTypes,
-	type NodeProps,
-	type EdgeProps,
-	type NodeChange,
-	type EdgeChange,
-	useNodesState,
-	useEdgesState,
-	useReactFlow,
-	MarkerType,
-	Handle,
-	Position,
-	BaseEdge,
-	getSmoothStepPath,
-	ReactFlowProvider,
-} from "@xyflow/react";
-import "@xyflow/react/dist/style.css";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { AnimatePresence, motion } from "framer-motion";
-import {
-	api,
-	type AgentSummary,
-	type TopologyResponse,
-	type TopologyGroup,
-	type TopologyAgent,
-	type TopologyHuman,
-	type LinkDirection,
-	type LinkKind,
-} from "@/api/client";
-import { Button, Input, TextArea, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, cx } from "@/ui";
-import { Markdown } from "@/components/Markdown";
-import { Link } from "@tanstack/react-router";
-
-// -- Colors --
-
-const EDGE_COLOR = "hsla(230, 10%, 35%, 0.6)";
-const EDGE_COLOR_ACTIVE = "hsla(230, 10%, 55%, 0.9)";
-
-const GROUP_COLORS = [
-	"#6366f1",
-	"#8b5cf6",
-	"#ec4899",
-	"#f59e0b",
-	"#22c55e",
-	"#06b6d4",
-	"#f97316",
-	"#14b8a6",
-];
-
-// -- Position persistence --
-
-const POSITIONS_KEY = "spacebot:topology:positions";
-
-type SavedPositions = Record<string, { x: number; y: number }>;
-
-function loadPositions(): SavedPositions {
-	try {
-		const raw = localStorage.getItem(POSITIONS_KEY);
-		if (raw) return JSON.parse(raw);
-	} catch {
-		// ignore
-	}
-	return {};
-}
-
-function savePositions(nodes: Node[]) {
-	const positions: SavedPositions = {};
-	for (const node of nodes) {
-		positions[node.id] = node.position;
-	}
-	try {
-		localStorage.setItem(POSITIONS_KEY, JSON.stringify(positions));
-	} catch {
-		// ignore
-	}
-}
-
-// -- Handle persistence --
-
-const HANDLES_KEY = "spacebot:topology:handles";
-
-type SavedHandles = Record<string, { sourceHandle: string; targetHandle: string }>;
-
-function loadHandles(): SavedHandles {
-	try {
-		const raw = localStorage.getItem(HANDLES_KEY);
-		if (raw) return JSON.parse(raw);
-	} catch {
-		// ignore
-	}
-	return {};
-}
-
-/** Deterministic gradient from a seed string. */
-// Re-export from shared module so existing references (e.g. banner gradient) still work.
-import { seedGradient, ProfileAvatar } from "@/components/ProfileAvatar";
-
-// -- Custom Node: Group --
-
-const GROUP_PADDING = 30;
-const GROUP_HEADER = 36;
-
-function GroupNode({ data, selected }: NodeProps) {
-	const color = (data.color as string) ?? "#6366f1";
-	const name = data.label as string;
-
-	return (
-		<div
-			className={`rounded-2xl border transition-all ${
-				selected ? "border-opacity-60" : "border-opacity-30"
-			}`}
-			style={{
-				width: data.width as number,
-				height: data.height as number,
-				borderColor: color,
-				backgroundColor: `${color}08`,
-			}}
-		>
-			<div
-				className="flex items-center gap-2 rounded-t-2xl px-4"
-				style={{
-					height: GROUP_HEADER,
-					background: `linear-gradient(135deg, ${color}18, ${color}08)`,
-				}}
-			>
-				<span
-					className="h-2 w-2 rounded-full"
-					style={{ backgroundColor: color }}
-				/>
-				<span
-					className="text-[11px] font-semibold uppercase tracking-wider"
-					style={{ color }}
-				>
-					{name}
-				</span>
-			</div>
-		</div>
-	);
-}
-
-// -- Shared Profile Node (used for both agent and human) --
-
-const NODE_WIDTH = 240;
-
-function ProfileNode({ data, selected }: NodeProps) {
-	const nodeId = (data.nodeId as string) ?? "";
-	const avatarSeed = (data.avatarSeed as string) ?? nodeId;
-	const [defaultC1, defaultC2] = seedGradient(avatarSeed);
-	const configDisplayName = data.configDisplayName as string | null;
-	const configRole = data.configRole as string | null;
-	const chosenName = data.chosenName as string | null;
-	const bio = data.bio as string | null;
-	const gradientStart = data.gradientStart as string | null;
-	const gradientEnd = data.gradientEnd as string | null;
-	const nodeAvatarUrl = data.avatarUrl as string | null;
-	const c1 = gradientStart || defaultC1;
-	const c2 = gradientEnd || defaultC2;
-	const isOnline = data.isOnline as boolean;
-	const channelCount = (data.channelCount as number) ?? 0;
-	const memoryCount = (data.memoryCount as number) ?? 0;
-	const connected = (data.connectedHandles as Record<string, boolean>) ?? {};
-	const nodeKind = (data.nodeKind as string) ?? "agent";
-	const isAgent = nodeKind === "agent";
-	const primaryName = configDisplayName ?? nodeId;
-	const onEdit = data.onEdit as (() => void) | undefined;
-
-	return (
-		<div
-			className={`group/node relative rounded-xl border bg-app-darkBox transition-all ${
-				selected
-					? "border-accent shadow-lg shadow-accent/20"
-					: "border-app-line hover:border-app-line/80"
-			}`}
-			style={{ width: NODE_WIDTH }}
-		>
-			{/* Edit button (visible on hover) */}
-			{onEdit && (
-				<button
-					onClick={(e) => {
-						e.stopPropagation();
-						onEdit();
-					}}
-					className="absolute top-2 right-2 z-10 rounded p-1 text-ink-faint opacity-0 transition-opacity hover:bg-ink/10 hover:text-ink group-hover/node:opacity-100"
-				>
-					<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-						<path d="M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z" />
-					</svg>
-				</button>
-			)}
-
-			{/* Gradient banner */}
-			<div className="relative h-12 overflow-hidden rounded-t-xl">
-				<svg
-					className="absolute inset-0 h-full w-full"
-					preserveAspectRatio="none"
-					viewBox="0 0 240 48"
-				>
-					<defs>
-						<linearGradient
-							id={`node-grad-${nodeId}`}
-							x1="0%"
-							y1="0%"
-							x2="100%"
-							y2="100%"
-						>
-							<stop offset="0%" stopColor={c1} stopOpacity={0.35} />
-							<stop offset="100%" stopColor={c2} stopOpacity={0.2} />
-						</linearGradient>
-					</defs>
-					<rect width="240" height="48" fill={`url(#node-grad-${nodeId})`} />
-				</svg>
-			</div>
-
-			{/* Avatar + badge row */}
-			<div className="relative -mt-6 px-4 pt-3 flex items-end justify-between">
-				<div className="relative inline-block">
-					<ProfileAvatar
-						seed={avatarSeed}
-						name={primaryName}
-						size={48}
-						className="rounded-full border-[3px] border-app-darkBox"
-						gradientStart={gradientStart ?? undefined}
-						gradientEnd={gradientEnd ?? undefined}
-						avatarUrl={isAgent && nodeAvatarUrl ? nodeAvatarUrl : undefined}
-					/>
-					{isAgent && (
-						<div
-							className={`absolute bottom-0 right-0 h-3.5 w-3.5 rounded-full border-[2px] border-app-darkBox ${
-								isOnline ? "bg-green-500" : "bg-gray-500"
-							}`}
-						/>
-					)}
-				</div>
-				{/* Badge */}
-				<span
-					className={`mb-1 rounded px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider ${
-						isAgent
-							? "bg-accent/20 text-accent"
-							: "bg-ink-faint/10 text-ink-faint"
-					}`}
-				>
-					{nodeKind}
-				</span>
-			</div>
-
-			{/* Profile content */}
-			<div className="px-4 pt-1.5 pb-3">
-				{/* Primary name + self-chosen name inline */}
-				{isAgent ? (
-					<Link
-						to="/agents/$agentId"
-						params={{ agentId: nodeId }}
-						className="flex items-baseline gap-1.5 truncate"
-						onClick={(e) => e.stopPropagation()}
-					>
-						<span className="font-plex text-sm font-semibold text-ink hover:text-accent transition-colors truncate">
-							{primaryName}
-						</span>
-						{chosenName && chosenName !== primaryName && chosenName !== nodeId && (
-							<span className="text-[11px] text-ink-faint truncate">
-								"{chosenName}"
-							</span>
-						)}
-					</Link>
-				) : (
-					<div className="flex items-baseline gap-1.5 truncate">
-						<span className="font-plex text-sm font-semibold text-ink truncate">
-							{primaryName}
-						</span>
-					</div>
-				)}
-
-				{/* Role */}
-				{configRole && (
-					<p className="mt-0.5 text-[11px] text-ink-dull truncate">
-						{configRole}
-					</p>
-				)}
-
-			{/* Bio */}
-			{bio ? (
-					<p className="mt-2 text-[11px] leading-relaxed text-ink-faint line-clamp-3">
-						{bio}
-					</p>
-				) : !isAgent && !data.description && (
-					<p className="mt-2 text-[11px] leading-relaxed text-ink-faint/60 italic">
-						This is you, add your details.
-					</p>
-				)}
-
-				{/* Stats (agents only) */}
-				{isAgent && (
-					<div className="mt-2 flex items-center gap-3 border-t border-app-line/40 pt-2 text-[10px] text-ink-faint">
-						<span>
-							<span className="font-medium text-ink-dull">{channelCount}</span> channels
-						</span>
-						<span>
-							<span className="font-medium text-ink-dull">
-								{memoryCount >= 1000 ? `${(memoryCount / 1000).toFixed(1)}k` : memoryCount}
-							</span> memories
-						</span>
-					</div>
-				)}
-			</div>
-
-			{/* Handles on all four sides */}
-			{(["top", "bottom", "left", "right"] as const).map((side) => (
-				<Handle key={`src-${side}`} type="source" id={side}
-					position={side === "top" ? Position.Top : side === "bottom" ? Position.Bottom : side === "left" ? Position.Left : Position.Right}
-					className={`!h-2.5 !w-2.5 !border-2 !border-app-darkBox ${connected[side] ? "!bg-accent" : "!bg-app-line"}`} />
-			))}
-			{(["top", "bottom", "left", "right"] as const).map((side) => (
-				<Handle key={`tgt-${side}`} type="target" id={side}
-					position={side === "top" ? Position.Top : side === "bottom" ? Position.Bottom : side === "left" ? Position.Left : Position.Right}
-					className={`!h-2.5 !w-2.5 !border-2 !border-app-darkBox ${connected[side] ? "!bg-accent" : "!bg-app-line"}`} />
-			))}
-		</div>
-	);
-}
-
-// -- Custom Edge --
-
-function LinkEdge({
-	id,
-	sourceX,
-	sourceY,
-	targetX,
-	targetY,
-	sourcePosition,
-	targetPosition,
-	data,
-	selected,
-}: EdgeProps) {
-	const [edgePath] = getSmoothStepPath({
-		sourceX,
-		sourceY,
-		sourcePosition,
-		targetX,
-		targetY,
-		targetPosition,
-		borderRadius: 16,
-	});
-
-	const isActive = data?.active as boolean;
-	const color = isActive ? EDGE_COLOR_ACTIVE : EDGE_COLOR;
-
-	return (
-		<>
-			<BaseEdge
-				id={id}
-				path={edgePath}
-				style={{
-					stroke: selected ? "hsl(var(--color-accent))" : color,
-					strokeWidth: selected ? 2.5 : isActive ? 2 : 1.5,
-					opacity: selected ? 1 : isActive ? 0.9 : 0.4,
-				}}
-			/>
-			{/* Animated dot traveling along the edge during active message traffic */}
-			{isActive && (
-				<circle r="3" fill={EDGE_COLOR_ACTIVE}>
-					<animateMotion dur="2s" repeatCount="indefinite" path={edgePath} />
-				</circle>
-			)}
-		</>
-	);
-}
-
-/** Pick source/target handle IDs based on link kind and node positions. */
-function getHandlesForKind(
-	kind: string,
-	sourcePos?: { x: number; y: number },
-	targetPos?: { x: number; y: number },
-	savedHandles?: { sourceHandle: string; targetHandle: string },
-): {
-	sourceHandle: string;
-	targetHandle: string;
-} {
-	// Use saved handles if available (user's explicit choice)
-	if (savedHandles) {
-		return savedHandles;
-	}
-	
-	if (kind === "hierarchical") {
-		// from is above to: connect bottom of superior to top of subordinate
-		return { sourceHandle: "bottom", targetHandle: "top" };
-	}
-	// Peer: always use left/right handles (horizontal connections)
-	if (sourcePos && targetPos) {
-		const dx = targetPos.x - sourcePos.x;
-		return dx > 0
-			? { sourceHandle: "right", targetHandle: "left" }
-			: { sourceHandle: "left", targetHandle: "right" };
-	}
-	return { sourceHandle: "right", targetHandle: "left" };
-}
-
-/** Infer link kind from the handle the user dragged from. */
-function inferKindFromHandle(sourceHandle: string | null): LinkKind {
-	switch (sourceHandle) {
-		case "top":
-		case "bottom":
-			return "hierarchical";
-		default:
-			return "peer";
-	}
-}
-
-const nodeTypes: NodeTypes = {
-	agent: ProfileNode,
-	human: ProfileNode,
-	group: GroupNode,
-};
-
-const edgeTypes: EdgeTypes = {
-	link: LinkEdge,
-};
-
-// -- Edge Config Panel --
-
-interface EdgeConfigPanelProps {
-	edge: Edge;
-	onUpdate: (direction: LinkDirection, kind: LinkKind) => void;
-	onDelete: () => void;
-	onClose: () => void;
-}
-
-function EdgeConfigPanel({
-	edge,
-	onUpdate,
-	onDelete,
-	onClose,
-}: EdgeConfigPanelProps) {
-	const [direction, setDirection] = useState<LinkDirection>(
-		(edge.data?.direction as LinkDirection) ?? "two_way",
-	);
-	const [kind, setKind] = useState<LinkKind>(
-		(edge.data?.kind as LinkKind) ?? "peer",
-	);
-
-	return (
-		<motion.div
-			initial={{ opacity: 0, y: 8 }}
-			animate={{ opacity: 1, y: 0 }}
-			exit={{ opacity: 0, y: 8 }}
-			transition={{ duration: 0.15 }}
-			className="absolute right-4 top-4 z-20 w-64 rounded-lg border border-app-line/50 bg-app-darkBox/95 p-4 shadow-xl backdrop-blur-sm"
-		>
-			<div className="mb-3 flex items-center justify-between">
-				<span className="text-sm font-medium text-ink">Link Settings</span>
-				<button
-					onClick={onClose}
-					className="text-ink-faint hover:text-ink transition-colors text-sm"
-				>
-					Close
-				</button>
-			</div>
-
-			<div className="mb-2 text-tiny text-ink-faint">
-				{edge.source} → {edge.target}
-			</div>
-
-			{/* Kind */}
-			<div className="mb-3">
-				<label className="mb-1 block text-tiny font-medium text-ink-dull">Kind</label>
-				<div className="flex gap-1.5">
-					{(["hierarchical", "peer"] as const).map((k) => (
-						<button
-							key={k}
-							onClick={() => setKind(k)}
-							className={`flex-1 rounded px-2 py-1.5 text-tiny transition-colors capitalize ${
-								kind === k
-									? "bg-ink/10 text-ink"
-									: "bg-app-box/50 text-ink-faint hover:text-ink-dull"
-							}`}
-						>
-							{k}
-						</button>
-					))}
-				</div>
-			</div>
-
-			{/* Direction */}
-			<div className="mb-4">
-				<label className="mb-1 block text-tiny font-medium text-ink-dull">Direction</label>
-				<div className="flex gap-1.5">
-					{(["one_way", "two_way"] as const).map((d) => (
-						<button
-							key={d}
-							onClick={() => setDirection(d)}
-							className={`flex-1 rounded px-2 py-1.5 text-tiny transition-colors ${
-								direction === d
-									? "bg-ink/10 text-ink"
-									: "bg-app-box/50 text-ink-faint hover:text-ink-dull"
-							}`}
-						>
-							{d === "one_way" ? "One Way" : "Two Way"}
-						</button>
-					))}
-				</div>
-			</div>
-
-			<div className="flex gap-2">
-				<Button
-					onClick={() => onUpdate(direction, kind)}
-					size="sm"
-					className="flex-1"
-				>
-					Save
-				</Button>
-				<Button
-					onClick={onDelete}
-					size="sm"
-					variant="outline"
-					className="text-tiny text-ink-faint"
-				>
-					Delete
-				</Button>
-			</div>
-		</motion.div>
-	);
-}
-
-// -- Human Edit Dialog --
-
-interface HumanEditDialogProps {
-	human: TopologyHuman | null;
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
-	onUpdate: (fields: {
-		displayName: string;
-		role: string;
-		bio: string;
-		description: string;
-		discordId: string;
-		telegramId: string;
-		slackId: string;
-		email: string;
-	}) => void;
-	onDelete: () => void;
-}
-
-function HumanEditDialog({
-	human,
-	open,
-	onOpenChange,
-	onUpdate,
-	onDelete,
-}: HumanEditDialogProps) {
-	const [displayName, setDisplayName] = useState("");
-	const [role, setRole] = useState("");
-	const [bio, setBio] = useState("");
-	const [description, setDescription] = useState("");
-	const [discordId, setDiscordId] = useState("");
-	const [telegramId, setTelegramId] = useState("");
-	const [slackId, setSlackId] = useState("");
-	const [email, setEmail] = useState("");
-	const [descriptionMode, setDescriptionMode] = useState<"edit" | "preview">("edit");
-
-	const { data: messagingStatus } = useQuery({
-		queryKey: ["messagingStatus"],
-		queryFn: api.messagingStatus,
-	});
-
-	// Sync state when a different human is selected
-	const prevId = useRef<string | null>(null);
-	if (human && human.id !== prevId.current) {
-		prevId.current = human.id;
-		setDisplayName(human.display_name ?? "");
-		setRole(human.role ?? "");
-		setBio(human.bio ?? "");
-		setDescription(human.description ?? "");
-		setDiscordId(human.discord_id ?? "");
-		setTelegramId(human.telegram_id ?? "");
-		setSlackId(human.slack_id ?? "");
-		setEmail(human.email ?? "");
-		setDescriptionMode("edit");
-	}
-
-	if (!human) return null;
-
-	return (
-		<Dialog open={open} onOpenChange={onOpenChange}>
-			<DialogContent className="!max-w-5xl !w-[90vw] !h-[85vh] !flex !flex-col !gap-0 !p-0 overflow-hidden">
-				<div className="flex items-center justify-between border-b border-app-line/50 px-5 py-4 shrink-0">
-					<div className="flex items-baseline gap-2">
-						<DialogTitle className="text-sm font-semibold">Edit Human</DialogTitle>
-						<span className="text-tiny text-ink-faint">{human.id}</span>
-					</div>
-				</div>
-				<div className="flex flex-1 min-h-0">
-					{/* Left column — metadata fields */}
-					<div className="w-72 shrink-0 border-r border-app-line/50 p-5 flex flex-col gap-4 overflow-y-auto">
-						<div>
-							<label className="mb-1.5 block text-sm font-medium text-ink-dull">Display Name</label>
-							<Input
-								size="lg"
-								value={displayName}
-								onChange={(e) => setDisplayName(e.target.value)}
-								placeholder={human.id}
-							/>
-						</div>
-						<div>
-							<label className="mb-1.5 block text-sm font-medium text-ink-dull">Role</label>
-							<Input
-								size="lg"
-								value={role}
-								onChange={(e) => setRole(e.target.value)}
-								placeholder="e.g. CEO, Lead Developer"
-							/>
-						</div>
-						<div>
-							<label className="mb-1.5 block text-sm font-medium text-ink-dull">Bio</label>
-							<textarea
-								value={bio}
-								onChange={(e) => setBio(e.target.value)}
-								placeholder="A short one-liner..."
-								rows={2}
-								className="w-full rounded-md bg-app-input px-3 py-2 text-sm text-ink outline-none border border-app-line/50 focus:border-accent/50 resize-none"
-							/>
-						</div>
-						{/* Platform identity fields — only shown for configured platforms */}
-						{messagingStatus && (messagingStatus.discord.configured || messagingStatus.telegram.configured || messagingStatus.slack.configured || messagingStatus.email.configured) && (
-							<div className="border-t border-app-line/50 pt-3 flex flex-col gap-3">
-								<label className="block text-xs font-medium text-ink-faint uppercase tracking-wide">Platform IDs</label>
-								{messagingStatus.discord.configured && (
-									<div>
-										<label className="mb-1 block text-sm font-medium text-ink-dull">Discord</label>
-										<Input
-											size="lg"
-											value={discordId}
-											onChange={(e) => setDiscordId(e.target.value)}
-											placeholder="Discord user ID"
-										/>
-									</div>
-								)}
-								{messagingStatus.telegram.configured && (
-									<div>
-										<label className="mb-1 block text-sm font-medium text-ink-dull">Telegram</label>
-										<Input
-											size="lg"
-											value={telegramId}
-											onChange={(e) => setTelegramId(e.target.value)}
-											placeholder="Telegram user ID"
-										/>
-									</div>
-								)}
-								{messagingStatus.slack.configured && (
-									<div>
-										<label className="mb-1 block text-sm font-medium text-ink-dull">Slack</label>
-										<Input
-											size="lg"
-											value={slackId}
-											onChange={(e) => setSlackId(e.target.value)}
-											placeholder="Slack member ID"
-										/>
-									</div>
-								)}
-								{messagingStatus.email.configured && (
-									<div>
-										<label className="mb-1 block text-sm font-medium text-ink-dull">Email</label>
-										<Input
-											size="lg"
-											value={email}
-											onChange={(e) => setEmail(e.target.value)}
-											placeholder="email@example.com"
-										/>
-									</div>
-								)}
-							</div>
-						)}
-						<div className="flex-1" />
-						<div className="flex items-center gap-2 pt-2 border-t border-app-line/50">
-							<Button variant="destructive" size="sm" onClick={onDelete}>
-								Delete
-							</Button>
-							<div className="flex-1" />
-							<Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
-								Cancel
-							</Button>
-							<Button size="sm" onClick={() => onUpdate({ displayName, role, bio, description, discordId, telegramId, slackId, email })}>
-								Save
-							</Button>
-						</div>
-					</div>
-					{/* Right column — description markdown editor */}
-					<div className="flex-1 flex flex-col min-w-0">
-						<div className="flex items-center justify-between border-b border-app-line/50 bg-app-darkBox/20 px-5 py-2.5 shrink-0">
-							<div className="flex items-center gap-3">
-								<h3 className="text-sm font-medium text-ink">Description</h3>
-								<span className="rounded bg-app-darkBox px-1.5 py-0.5 font-mono text-tiny text-ink-faint">Markdown</span>
-							</div>
-							<div className="flex items-center gap-3">
-								<div className="flex items-center rounded border border-app-line/50 text-tiny">
-									<button
-										onClick={() => setDescriptionMode("edit")}
-										className={cx(
-											"px-2 py-0.5 rounded-l transition-colors",
-											descriptionMode === "edit" ? "bg-app-darkBox text-ink" : "text-ink-faint hover:text-ink",
-										)}
-									>
-										Edit
-									</button>
-									<button
-										onClick={() => setDescriptionMode("preview")}
-										className={cx(
-											"px-2 py-0.5 rounded-r transition-colors",
-											descriptionMode === "preview" ? "bg-app-darkBox text-ink" : "text-ink-faint hover:text-ink",
-										)}
-									>
-										Preview
-									</button>
-								</div>
-							</div>
-						</div>
-						<div className="flex-1 overflow-y-auto p-4">
-							{descriptionMode === "edit" ? (
-								<TextArea
-									value={description}
-									onChange={(e) => setDescription(e.target.value)}
-									placeholder={"Write a full description of this person...\n\nBackground, preferences, communication style, timezone, working hours, areas of expertise — anything that helps agents interact with them effectively."}
-									className="h-full w-full resize-none border-transparent bg-app-darkBox/30 px-4 py-3 font-mono leading-relaxed placeholder:text-ink-faint/40"
-									spellCheck={false}
-								/>
-							) : (
-								<div className="prose-sm px-4 py-3">
-									{description.trim() ? (
-										<Markdown>{description}</Markdown>
-									) : (
-										<span className="text-ink-faint/40 text-sm">Nothing to preview.</span>
-									)}
-								</div>
-							)}
-						</div>
-					</div>
-				</div>
-			</DialogContent>
-		</Dialog>
-	);
-}
-
-// -- Agent Edit Dialog --
-
-interface AgentEditDialogProps {
-	agent: TopologyAgent | null;
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
-	onUpdate: (displayName: string, role: string) => void;
-}
-
-function AgentEditDialog({
-	agent,
-	open,
-	onOpenChange,
-	onUpdate,
-}: AgentEditDialogProps) {
-	const [displayName, setDisplayName] = useState("");
-	const [role, setRole] = useState("");
-
-	const prevId = useRef<string | null>(null);
-	if (agent && agent.id !== prevId.current) {
-		prevId.current = agent.id;
-		setDisplayName(agent.display_name ?? "");
-		setRole(agent.role ?? "");
-	}
-
-	if (!agent) return null;
-
-	return (
-		<Dialog open={open} onOpenChange={onOpenChange}>
-			<DialogContent className="max-w-sm">
-				<DialogHeader>
-					<DialogTitle>Edit Agent</DialogTitle>
-				</DialogHeader>
-				<div className="flex flex-col gap-3">
-					<div className="text-tiny text-ink-faint">{agent.id}</div>
-					<div>
-						<label className="mb-1.5 block text-sm font-medium text-ink-dull">Display Name</label>
-						<Input
-							size="lg"
-							value={displayName}
-							onChange={(e) => setDisplayName(e.target.value)}
-							placeholder={agent.id}
-						/>
-					</div>
-					<div>
-						<label className="mb-1.5 block text-sm font-medium text-ink-dull">Role</label>
-						<Input
-							size="lg"
-							value={role}
-							onChange={(e) => setRole(e.target.value)}
-							placeholder="e.g. Research Assistant, Code Reviewer"
-						/>
-					</div>
-				</div>
-				<DialogFooter>
-					<div className="flex-1" />
-					<Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
-						Cancel
-					</Button>
-					<Button size="sm" onClick={() => onUpdate(displayName, role)}>
-						Save
-					</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
-	);
-}
-
-// -- Group Config Panel --
-
-interface GroupConfigPanelProps {
-	group: TopologyGroup;
-	allAgents: string[];
-	onUpdate: (agentIds: string[], name: string) => void;
-	onDelete: () => void;
-	onClose: () => void;
-}
-
-function GroupConfigPanel({
-	group,
-	allAgents,
-	onUpdate,
-	onDelete,
-	onClose,
-}: GroupConfigPanelProps) {
-	const [name, setName] = useState(group.name);
-	const [agentIds, setAgentIds] = useState<Set<string>>(new Set(group.agent_ids));
-
-	const toggleAgent = (id: string) => {
-		setAgentIds((prev) => {
-			const next = new Set(prev);
-			if (next.has(id)) next.delete(id);
-			else next.add(id);
-			return next;
-		});
-	};
-
-	return (
-		<motion.div
-			initial={{ opacity: 0, y: 8 }}
-			animate={{ opacity: 1, y: 0 }}
-			exit={{ opacity: 0, y: 8 }}
-			transition={{ duration: 0.15 }}
-			className="absolute right-4 top-4 z-20 w-64 rounded-lg border border-app-line/50 bg-app-darkBox/95 p-4 shadow-xl backdrop-blur-sm"
-		>
-			<div className="mb-3 flex items-center justify-between">
-				<span className="text-sm font-medium text-ink">Group Settings</span>
-				<button
-					onClick={onClose}
-					className="text-ink-faint hover:text-ink transition-colors text-sm"
-				>
-					Close
-				</button>
-			</div>
-
-			{/* Name */}
-			<div className="mb-3">
-				<label className="mb-1 block text-tiny font-medium text-ink-dull">Name</label>
-				<input
-					value={name}
-					onChange={(e) => setName(e.target.value)}
-					className="w-full rounded bg-app-input px-2.5 py-1.5 text-sm text-ink outline-none border border-app-line/50 focus:border-accent/50"
-				/>
-			</div>
-
-			{/* Agent membership */}
-			<div className="mb-4">
-				<label className="mb-1 block text-tiny font-medium text-ink-dull">Agents</label>
-				<div className="flex flex-col gap-1 max-h-40 overflow-y-auto">
-					{allAgents.map((id) => (
-						<button
-							key={id}
-							onClick={() => toggleAgent(id)}
-							className={`flex items-center gap-2 rounded px-2 py-1.5 text-tiny transition-colors text-left ${
-								agentIds.has(id)
-									? "bg-accent/15 text-accent"
-									: "bg-app-box text-ink-faint hover:text-ink-dull"
-							}`}
-						>
-							<span
-								className={`h-2 w-2 rounded-full flex-shrink-0 ${
-									agentIds.has(id) ? "bg-accent" : "bg-app-line"
-								}`}
-							/>
-							{id}
-						</button>
-					))}
-				</div>
-			</div>
-
-			<div className="flex gap-2">
-				<Button
-					onClick={() => onUpdate([...agentIds], name)}
-					size="sm"
-					className="flex-1 bg-accent/15 text-tiny text-accent hover:bg-accent/25"
-				>
-					Save
-				</Button>
-				<Button
-					onClick={onDelete}
-					size="sm"
-					variant="destructive"
-					className="text-tiny"
-				>
-					Delete
-				</Button>
-			</div>
-		</motion.div>
-	);
-}
-
-// -- Main Component (inner, needs ReactFlowProvider) --
-
-interface TopologyGraphInnerProps {
-	activeEdges: Set<string>;
-	agents: AgentSummary[];
-}
-
-function TopologyGraphInner({ activeEdges, agents }: TopologyGraphInnerProps) {
-	const queryClient = useQueryClient();
-	const [selectedEdge, setSelectedEdge] = useState<Edge | null>(null);
-	const [selectedGroup, setSelectedGroup] = useState<TopologyGroup | null>(null);
-	const [selectedHuman, setSelectedHuman] = useState<TopologyHuman | null>(null);
-	const [humanDialogOpen, setHumanDialogOpen] = useState(false);
-	const [selectedAgent, setSelectedAgent] = useState<TopologyAgent | null>(null);
-	const [agentDialogOpen, setAgentDialogOpen] = useState(false);
-
-	const { data, isLoading, error } = useQuery({
-		queryKey: ["topology"],
-		queryFn: api.topology,
-		refetchInterval: 10_000,
-	});
-
-	// Stable refs for opening edit dialogs from node callbacks
-	const openHumanEditRef = useRef<(humanId: string) => void>(() => {});
-	const openAgentEditRef = useRef<(agentId: string) => void>(() => {});
-
-	// Fetch agent info for gradient/appearance data
-	const { data: agentInfoData } = useQuery({
-		queryKey: ["agents"],
-		queryFn: api.agents,
-		refetchInterval: 30_000,
-	});
-
-	// Build agent profile lookup
-	const agentProfiles = useMemo(() => {
-		const map = new Map<string, AgentSummary>();
-		for (const agent of agents) {
-			map.set(agent.id, agent);
-		}
-		return map;
-	}, [agents]);
-
-	// Build agent info lookup (for gradient colors)
-	const agentInfoMap = useMemo(() => {
-		const map = new Map<string, { gradient_start?: string | null | undefined; gradient_end?: string | null | undefined }>();
-		for (const info of agentInfoData?.agents ?? []) {
-			map.set(info.id, { gradient_start: info.gradient_start, gradient_end: info.gradient_end });
-		}
-		return map;
-	}, [agentInfoData]);
-
-	/** Inject onEdit callbacks into profile nodes */
-	const patchEditCallbacks = useCallback((nodes: Node[]): Node[] =>
-		nodes.map((n) => {
-			if (n.type === "human") {
-				return { ...n, data: { ...n.data, onEdit: () => openHumanEditRef.current(n.id) } };
-			}
-			if (n.type === "agent") {
-				return { ...n, data: { ...n.data, onEdit: () => openAgentEditRef.current(n.id) } };
-			}
-			return n;
-		}),
-	[]);
-
-	// Build nodes and edges from topology data
-	const { initialNodes, initialEdges } = useMemo(() => {
-		if (!data) return { initialNodes: [], initialEdges: [] };
-		const graph = buildGraph(data, activeEdges, agentProfiles, agentInfoMap);
-		return { initialNodes: patchEditCallbacks(graph.initialNodes), initialEdges: graph.initialEdges };
-	}, [data, activeEdges, agentProfiles, agentInfoMap, patchEditCallbacks]);
-
-	const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-	const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-
-	// Sync when topology data or agent profiles change
-	const prevDataRef = useRef(data);
-	const prevProfilesRef = useRef(agentProfiles);
-	if (data !== prevDataRef.current || agentProfiles !== prevProfilesRef.current) {
-		prevDataRef.current = data;
-		prevProfilesRef.current = agentProfiles;
-		if (data) {
-			const { initialNodes: newNodes, initialEdges: newEdges } = buildGraph(
-				data,
-				activeEdges,
-				agentProfiles,
-				agentInfoMap,
-			);
-
-			// Preserve existing node positions
-			const positionMap = new Map(
-				nodes.map((n) => [n.id, n.position]),
-			);
-			const mergedNodes = patchEditCallbacks(newNodes.map((n) => ({
-				...n,
-				position: positionMap.get(n.id) ?? n.position,
-			})));
-
-			setNodes(mergedNodes);
-			setEdges(newEdges);
-		}
-	}
-
-	// Update edge activity state when activeEdges changes
-	const prevActiveRef = useRef(activeEdges);
-	if (activeEdges !== prevActiveRef.current) {
-		prevActiveRef.current = activeEdges;
-		setEdges((eds) =>
-			eds.map((e) => ({
-				...e,
-				data: { ...e.data, active: activeEdges.has(e.id) },
-			})),
-		);
-	}
-
-	// -- Mutations --
-
-	const createLink = useMutation({
-		mutationFn: (params: {
-			from: string;
-			to: string;
-			direction: LinkDirection;
-			kind: LinkKind;
-		}) =>
-			api.createLink({
-				from: params.from,
-				to: params.to,
-				direction: params.direction,
-				kind: params.kind,
-			}),
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["topology"] });
-		},
-	});
-
-	const updateLink = useMutation({
-		mutationFn: (params: {
-			from: string;
-			to: string;
-			direction: LinkDirection;
-			kind: LinkKind;
-		}) =>
-			api.updateLink(params.from, params.to, {
-				direction: params.direction,
-				kind: params.kind,
-			}),
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["topology"] });
-			setSelectedEdge(null);
-		},
-	});
-
-	const deleteLink = useMutation({
-		mutationFn: (params: { from: string; to: string }) =>
-			api.deleteLink(params.from, params.to),
-		onSuccess: (_, params) => {
-			// Clean up saved handles
-			const edgeId = `${params.from}->${params.to}`;
-			const currentHandles = loadHandles();
-			delete currentHandles[edgeId];
-			try {
-				localStorage.setItem(HANDLES_KEY, JSON.stringify(currentHandles));
-			} catch {
-				// ignore
-			}
-			queryClient.invalidateQueries({ queryKey: ["topology"] });
-			setSelectedEdge(null);
-		},
-	});
-
-	const createGroup = useMutation({
-		mutationFn: (name: string) =>
-			api.createGroup({ name, agent_ids: [] }),
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["topology"] });
-		},
-	});
-
-	const updateGroup = useMutation({
-		mutationFn: (params: { originalName: string; agentIds: string[]; name: string }) =>
-			api.updateGroup(params.originalName, {
-				name: params.name,
-				agent_ids: params.agentIds,
-			}),
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["topology"] });
-			setSelectedGroup(null);
-		},
-	});
-
-	const deleteGroup = useMutation({
-		mutationFn: (name: string) => api.deleteGroup(name),
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["topology"] });
-			setSelectedGroup(null);
-		},
-	});
-
-	const createHuman = useMutation({
-		mutationFn: (id: string) => api.createHuman({ id }),
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["topology"] });
-		},
-	});
-
-	const updateHuman = useMutation({
-		mutationFn: (params: {
-			id: string;
-			displayName?: string;
-			role?: string;
-			bio?: string;
-			description?: string;
-			discordId?: string;
-			telegramId?: string;
-			slackId?: string;
-			email?: string;
-		}) =>
-			api.updateHuman(params.id, {
-				display_name: params.displayName,
-				role: params.role,
-				bio: params.bio,
-				description: params.description,
-				discord_id: params.discordId,
-				telegram_id: params.telegramId,
-				slack_id: params.slackId,
-				email: params.email,
-			}),
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["topology"] });
-			setSelectedHuman(null);
-		},
-	});
-
-	const deleteHuman = useMutation({
-		mutationFn: (id: string) => api.deleteHuman(id),
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["topology"] });
-			setSelectedHuman(null);
-		},
-	});
-
-	const updateAgentMutation = useMutation({
-		mutationFn: (params: { id: string; displayName?: string; role?: string }) =>
-			api.updateAgent(params.id, {
-				display_name: params.displayName,
-				role: params.role,
-			}),
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["topology"] });
-			queryClient.invalidateQueries({ queryKey: ["agents"] });
-			setSelectedAgent(null);
-			setAgentDialogOpen(false);
-		},
-	});
-
-	// Handle new connection (drag from handle to handle)
-	const onConnect = useCallback(
-		(connection: Connection) => {
-			if (!connection.source || !connection.target) return;
-			if (connection.source === connection.target) return;
-
-			const exists = edges.some(
-				(e) =>
-					e.source === connection.source && e.target === connection.target,
-			);
-			if (exists) return;
-
-			const kind = inferKindFromHandle(connection.sourceHandle ?? null);
-
-			// For hierarchical links from bottom handle, from=source (superior), to=target
-			// For hierarchical links from top handle, from=target (superior), to=source
-			const isFromTop = connection.sourceHandle === "top";
-			const from = (kind === "hierarchical" && isFromTop) ? connection.target : connection.source;
-			const to = (kind === "hierarchical" && isFromTop) ? connection.source : connection.target;
-
-			// Save handle information to localStorage
-			// Handles need to be stored relative to the final from/to, not the connection source/target
-			const edgeId = `${from}->${to}`;
-			if (connection.sourceHandle && connection.targetHandle) {
-				const currentHandles = loadHandles();
-				currentHandles[edgeId] = {
-					sourceHandle: (kind === "hierarchical" && isFromTop) 
-						? connection.targetHandle 
-						: connection.sourceHandle,
-					targetHandle: (kind === "hierarchical" && isFromTop) 
-						? connection.sourceHandle 
-						: connection.targetHandle,
-				};
-				try {
-					localStorage.setItem(HANDLES_KEY, JSON.stringify(currentHandles));
-				} catch {
-					// ignore
-				}
-			}
-
-			createLink.mutate({
-				from,
-				to,
-				direction: "two_way",
-				kind,
-			});
-		},
-		[edges, createLink],
-	);
-
-	const handleEdgesChange = useCallback(
-		(changes: EdgeChange[]) => {
-			// Intercept edge removal (Delete/Backspace key)
-			for (const change of changes) {
-				if (change.type === "remove") {
-					const edge = edges.find((e) => e.id === change.id);
-					if (edge) {
-						// Parse edge ID format: "from->to"
-						const [from, to] = edge.id.split("->");
-						if (from && to) {
-							deleteLink.mutate({ from, to });
-						}
-					}
-				}
-			}
-			// Apply the changes to local state
-			onEdgesChange(changes);
-		},
-		[edges, deleteLink, onEdgesChange],
-	);
-
-	const onEdgeClick = useCallback(
-		(_: React.MouseEvent, edge: Edge) => {
-			setSelectedEdge(edge);
-			setSelectedGroup(null);
-		},
-		[],
-	);
-
-	const groups = data?.groups ?? [];
-	const { fitView } = useReactFlow();
-
-	const openHumanEdit = useCallback(
-		(humanId: string) => {
-			const humans = data?.humans ?? [];
-			const human = humans.find((h) => h.id === humanId);
-			if (human) {
-				setSelectedHuman(human);
-				setHumanDialogOpen(true);
-				setSelectedEdge(null);
-				setSelectedGroup(null);
-			}
-		},
-		[data],
-	);
-	openHumanEditRef.current = openHumanEdit;
-
-	const openAgentEdit = useCallback(
-		(agentId: string) => {
-			const topoAgent = data?.agents.find((a) => a.id === agentId);
-			if (topoAgent) {
-				setSelectedAgent(topoAgent);
-				setAgentDialogOpen(true);
-				setSelectedEdge(null);
-				setSelectedGroup(null);
-				setSelectedHuman(null);
-			}
-		},
-		[data],
-	);
-	openAgentEditRef.current = openAgentEdit;
-
-	const onNodeClick = useCallback(
-		(_: React.MouseEvent, node: Node) => {
-			if (node.type === "group" && groups.length > 0) {
-				const group = groups.find((g) => `group:${g.name}` === node.id);
-				if (group) {
-					setSelectedGroup(group);
-					setSelectedEdge(null);
-					setSelectedHuman(null);
-				}
-			} else {
-				setSelectedGroup(null);
-				setSelectedHuman(null);
-			}
-
-			// Zoom the selected node into view
-			if (node.type === "agent" || node.type === "human") {
-				fitView({
-					nodes: [{ id: node.id }],
-					duration: 400,
-					padding: 0.5,
-					maxZoom: 1.5,
-				});
-			}
-		},
-		[groups, fitView],
-	);
-
-	const onPaneClick = useCallback(() => {
-		setSelectedEdge(null);
-		setSelectedGroup(null);
-		setSelectedHuman(null);
-	}, []);
-
-	// Handle node drops into/out of groups via position change
-	const handleNodesChange = useCallback(
-		(changes: NodeChange[]) => {
-			onNodesChange(changes);
-
-			// Persist positions when any drag ends
-			const hasDragEnd = changes.some(
-				(c) => c.type === "position" && !c.dragging,
-			);
-			if (hasDragEnd) {
-				// Read latest nodes after the change is applied
-				setNodes((current) => {
-					savePositions(current);
-					return current;
-				});
-			}
-
-			// After a drag ends, check if an agent node was dropped onto a group
-			for (const change of changes) {
-				if (change.type === "position" && !change.dragging && groups.length > 0) {
-					const draggedNode = nodes.find((n) => n.id === change.id);
-					if (!draggedNode || draggedNode.type !== "agent") continue;
-
-					const agentId = draggedNode.id;
-					const currentGroup = groups.find((g) =>
-						g.agent_ids.includes(agentId),
-					);
-
-					// Find if the agent was dropped onto a group node
-					const groupNodes = nodes.filter((n) => n.type === "group");
-					let targetGroup: TopologyGroup | null = null;
-
-					for (const gNode of groupNodes) {
-						const gw = (gNode.data.width as number) ?? 0;
-						const gh = (gNode.data.height as number) ?? 0;
-						const pos = draggedNode.position;
-						if (
-							pos.x > gNode.position.x &&
-							pos.x < gNode.position.x + gw &&
-							pos.y > gNode.position.y &&
-							pos.y < gNode.position.y + gh
-						) {
-							const group = groups.find(
-								(g) => `group:${g.name}` === gNode.id,
-							);
-							if (group) {
-								targetGroup = group;
-								break;
-							}
-						}
-					}
-
-					if (targetGroup && !targetGroup.agent_ids.includes(agentId)) {
-						// Add to target group
-						const newIds = [...targetGroup.agent_ids, agentId];
-						// Remove from current group if any
-						if (currentGroup && currentGroup.name !== targetGroup.name) {
-							api.updateGroup(currentGroup.name, {
-								agent_ids: currentGroup.agent_ids.filter(
-									(id) => id !== agentId,
-								),
-							}).then(() => queryClient.invalidateQueries({ queryKey: ["topology"] }));
-						}
-						api.updateGroup(targetGroup.name, {
-							agent_ids: newIds,
-						}).then(() => queryClient.invalidateQueries({ queryKey: ["topology"] }));
-					} else if (
-						!targetGroup &&
-						currentGroup
-					) {
-						// Dragged out of a group
-						api.updateGroup(currentGroup.name, {
-							agent_ids: currentGroup.agent_ids.filter(
-								(id) => id !== agentId,
-							),
-						}).then(() => queryClient.invalidateQueries({ queryKey: ["topology"] }));
-					}
-				}
-			}
-		},
-		[onNodesChange, nodes, groups, queryClient],
-	);
-
-	const handleCreateGroup = useCallback(() => {
-		const name = `Group ${groups.length + 1}`;
-		createGroup.mutate(name);
-	}, [data, createGroup]);
-
-	if (isLoading) {
-		return (
-			<div className="flex h-full items-center justify-center">
-				<div className="flex items-center gap-2 text-ink-dull">
-					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
-					Loading topology...
-				</div>
-			</div>
-		);
-	}
-
-	if (error) {
-		return (
-			<div className="flex h-full items-center justify-center">
-				<p className="text-sm text-red-400">
-					Failed to load topology
-				</p>
-			</div>
-		);
-	}
-
-	if (!data || data.agents.length === 0) {
-		return (
-			<div className="flex h-full items-center justify-center">
-				<p className="text-sm text-ink-faint">
-					No agents configured
-				</p>
-			</div>
-		);
-	}
-
-	const allAgentIds = data.agents.map((a) => a.id);
-
-	return (
-		<div className="relative h-full w-full select-none">
-			<ReactFlow
-				nodes={nodes}
-				edges={edges}
-				onNodesChange={handleNodesChange}
-				onEdgesChange={handleEdgesChange}
-				onConnect={onConnect}
-				onEdgeClick={onEdgeClick}
-				onNodeClick={onNodeClick}
-				onPaneClick={onPaneClick}
-				nodeTypes={nodeTypes}
-				edgeTypes={edgeTypes}
-				defaultEdgeOptions={{
-					type: "link",
-					markerEnd: {
-						type: MarkerType.ArrowClosed,
-						width: 16,
-						height: 16,
-					},
-				}}
-				fitView
-				fitViewOptions={{ padding: 0.3 }}
-				proOptions={{ hideAttribution: true }}
-				className="topology-graph"
-			>
-				<Background
-					color="hsla(230, 8%, 14%, 0.5)"
-					gap={20}
-					size={1}
-				/>
-				<Controls
-					showInteractive={false}
-					className="!bg-app-darkBox/80 !border-app-line !backdrop-blur-sm [&>button]:!bg-transparent [&>button]:!border-app-line [&>button]:!text-ink-dull [&>button:hover]:!bg-app-hover"
-				/>
-			</ReactFlow>
-
-			{/* Legend + controls */}
-			<div className="absolute bottom-4 left-4 z-10 rounded-md bg-app-darkBox/80 p-3 backdrop-blur-sm">
-				<div className="mb-2 text-tiny text-ink-faint">
-					Drag between handles to link
-				</div>
-				<div className="flex flex-col gap-1 text-tiny text-ink-faint">
-					<span>Top/Bottom → Hierarchical</span>
-					<span>Left/Right → Peer</span>
-				</div>
-				<div className="mt-2 flex flex-col gap-1">
-					<button
-						onClick={handleCreateGroup}
-						className="w-full rounded bg-app-box px-2 py-1.5 text-tiny text-ink-faint hover:text-ink transition-colors text-left"
-					>
-						+ New Group
-					</button>
-					<button
-						onClick={() => {
-							const id = `human-${(data?.humans?.length ?? 0) + 1}`;
-							createHuman.mutate(id);
-						}}
-						className="w-full rounded bg-app-box px-2 py-1.5 text-tiny text-ink-faint hover:text-ink transition-colors text-left"
-					>
-						+ New Human
-					</button>
-				</div>
-			</div>
-
-			{/* Edge config panel */}
-			<AnimatePresence>
-				{selectedEdge && (
-					<EdgeConfigPanel
-						key={selectedEdge.id}
-						edge={selectedEdge}
-						onUpdate={(direction, kind) =>
-							updateLink.mutate({
-								from: selectedEdge.source,
-								to: selectedEdge.target,
-								direction,
-								kind,
-							})
-						}
-						onDelete={() =>
-							deleteLink.mutate({
-								from: selectedEdge.source,
-								to: selectedEdge.target,
-							})
-						}
-						onClose={() => setSelectedEdge(null)}
-					/>
-				)}
-			</AnimatePresence>
-
-			{/* Group config panel */}
-			<AnimatePresence>
-				{selectedGroup && (
-					<GroupConfigPanel
-						key={selectedGroup.name}
-						group={selectedGroup}
-						allAgents={allAgentIds}
-						onUpdate={(agentIds, name) =>
-							updateGroup.mutate({
-								originalName: selectedGroup.name,
-								agentIds,
-								name,
-							})
-						}
-						onDelete={() => deleteGroup.mutate(selectedGroup.name)}
-						onClose={() => setSelectedGroup(null)}
-					/>
-				)}
-			</AnimatePresence>
-
-			{/* Human edit dialog */}
-			<HumanEditDialog
-				human={selectedHuman}
-				open={humanDialogOpen}
-				onOpenChange={(open) => {
-					setHumanDialogOpen(open);
-					if (!open) setSelectedHuman(null);
-				}}
-				onUpdate={(fields) => {
-					if (selectedHuman) {
-						updateHuman.mutate({
-							id: selectedHuman.id,
-							displayName: fields.displayName || undefined,
-							role: fields.role || undefined,
-							bio: fields.bio || undefined,
-							description: fields.description || undefined,
-							discordId: fields.discordId || undefined,
-							telegramId: fields.telegramId || undefined,
-							slackId: fields.slackId || undefined,
-							email: fields.email || undefined,
-						});
-						setHumanDialogOpen(false);
-					}
-				}}
-				onDelete={() => {
-					if (selectedHuman) {
-						deleteHuman.mutate(selectedHuman.id);
-						setHumanDialogOpen(false);
-					}
-				}}
-			/>
-
-			{/* Agent edit dialog */}
-			<AgentEditDialog
-				agent={selectedAgent}
-				open={agentDialogOpen}
-				onOpenChange={(open) => {
-					setAgentDialogOpen(open);
-					if (!open) setSelectedAgent(null);
-				}}
-				onUpdate={(displayName, role) => {
-					if (selectedAgent) {
-						updateAgentMutation.mutate({
-							id: selectedAgent.id,
-							displayName: displayName || undefined,
-							role: role || undefined,
-						});
-					}
-				}}
-			/>
-		</div>
-	);
-}
-
-// -- Graph Builder --
-
-/** Estimate the rendered height of an agent node based on profile data. */
-function estimateNodeHeight(summary: AgentSummary | undefined): number {
-	let h = 48 + 24 + 8 + 16 + 24; // banner + avatar + name row + stats + padding
-	if (summary?.profile?.status) h += 16;
-	if (summary?.profile?.bio) h += 40;
-	return h;
-}
-
-function buildGraph(
-	data: TopologyResponse,
-	activeEdges: Set<string>,
-	agentProfiles: Map<string, AgentSummary>,
-	agentInfoMap: Map<string, { gradient_start?: string | null | undefined; gradient_end?: string | null | undefined }>,
-): { initialNodes: Node[]; initialEdges: Edge[] } {
-	const saved = loadPositions();
-	const savedHandles = loadHandles();
-	const allNodes: Node[] = [];
-
-	// Topology agent lookup for display_name / role
-	const topologyAgentMap = new Map(data.agents.map((a) => [a.id, a]));
-
-	const links = data.links ?? [];
-	// connectedHandles is computed after nodes are positioned (needs position map for peers)
-
-	// Build group membership lookup
-	const groups = data.groups ?? [];
-	const agentToGroup = new Map<string, TopologyGroup>();
-	for (const group of groups) {
-		for (const agentId of group.agent_ids) {
-			agentToGroup.set(agentId, group);
-		}
-	}
-
-	// Agents not in any group
-	const ungroupedAgents = data.agents.filter((a) => !agentToGroup.has(a.id));
-
-	// Create group nodes
-	const groupPositions = new Map<string, { x: number; y: number }>();
-	let groupX = 0;
-
-	for (let gi = 0; gi < groups.length; gi++) {
-		const group = groups[gi];
-		const memberCount = group.agent_ids.length;
-		const cols = Math.max(1, Math.min(memberCount, 2));
-		const rows = Math.ceil(memberCount / cols);
-		const groupWidth =
-			cols * (NODE_WIDTH + GROUP_PADDING) + GROUP_PADDING;
-		const maxMemberHeight = group.agent_ids.reduce((max, id) => {
-			return Math.max(max, estimateNodeHeight(agentProfiles.get(id)));
-		}, 170);
-		const groupHeight =
-			GROUP_HEADER + rows * (maxMemberHeight + GROUP_PADDING) + GROUP_PADDING;
-
-		const color = group.color ?? GROUP_COLORS[gi % GROUP_COLORS.length];
-		const pos = { x: groupX, y: 0 };
-		groupPositions.set(group.name, pos);
-
-		allNodes.push({
-			id: `group:${group.name}`,
-			type: "group",
-			position: pos,
-			data: {
-				label: group.name,
-				color,
-				width: groupWidth,
-				height: groupHeight,
-			},
-			style: { width: groupWidth, height: groupHeight },
-			draggable: true,
-			selectable: true,
-			zIndex: -1,
-		});
-
-		// Position member agents inside the group
-		group.agent_ids.forEach((agentId, idx) => {
-			const col = idx % cols;
-			const row = Math.floor(idx / cols);
-			const summary = agentProfiles.get(agentId);
-			const profile = summary?.profile;
-			const isOnline =
-				summary?.last_activity_at != null &&
-				new Date(summary.last_activity_at).getTime() >
-					Date.now() - 5 * 60 * 1000;
-
-			const topoAgent = topologyAgentMap.get(agentId);
-			allNodes.push({
-				id: agentId,
-				type: "agent",
-				position: {
-					x: GROUP_PADDING + col * (NODE_WIDTH + GROUP_PADDING),
-					y: GROUP_HEADER + GROUP_PADDING + row * (maxMemberHeight + GROUP_PADDING),
-				},
-				parentId: `group:${group.name}`,
-				extent: "parent" as const,
-				data: {
-					nodeId: agentId,
-					nodeKind: "agent",
-					configDisplayName: topoAgent?.display_name ?? null,
-					configRole: topoAgent?.role ?? null,
-					chosenName: profile?.display_name ?? null,
-					avatarSeed: profile?.avatar_seed ?? agentId,
-					bio: profile?.bio ?? null,
-					gradientStart: agentInfoMap.get(agentId)?.gradient_start ?? null,
-					gradientEnd: agentInfoMap.get(agentId)?.gradient_end ?? null,
-					avatarUrl: api.agentAvatarUrl(agentId),
-					isOnline,
-					channelCount: summary?.channel_count ?? 0,
-					memoryCount: summary?.memory_total ?? 0,
-					connectedHandles: { top: false, bottom: false, left: false, right: false },
-				},
-			});
-		});
-
-		groupX += groupWidth + 80;
-	}
-
-	// Position ungrouped agents
-	const ungroupedStartX = groupX;
-	const radius = Math.max(200, ungroupedAgents.length * 80);
-	const centerX = ungroupedStartX + radius + NODE_WIDTH / 2;
-	const centerY = 300;
-
-	ungroupedAgents.forEach((agent, index) => {
-		const count = ungroupedAgents.length;
-		const angle = (2 * Math.PI * index) / count - Math.PI / 2;
-		const summary = agentProfiles.get(agent.id);
-		const profile = summary?.profile;
-		const isOnline =
-			summary?.last_activity_at != null &&
-			new Date(summary.last_activity_at).getTime() >
-				Date.now() - 5 * 60 * 1000;
-
-		allNodes.push({
-			id: agent.id,
-			type: "agent",
-			position:
-				count === 1
-					? { x: ungroupedStartX, y: 100 }
-					: {
-							x: centerX + radius * Math.cos(angle),
-							y: centerY + radius * Math.sin(angle),
-						},
-			data: {
-				nodeId: agent.id,
-				nodeKind: "agent",
-				configDisplayName: agent.display_name ?? null,
-				configRole: agent.role ?? null,
-				chosenName: profile?.display_name ?? null,
-				avatarSeed: profile?.avatar_seed ?? agent.id,
-				bio: profile?.bio ?? null,
-				gradientStart: agentInfoMap.get(agent.id)?.gradient_start ?? null,
-				gradientEnd: agentInfoMap.get(agent.id)?.gradient_end ?? null,
-				avatarUrl: api.agentAvatarUrl(agent.id),
-				isOnline,
-				channelCount: summary?.channel_count ?? 0,
-				memoryCount: summary?.memory_total ?? 0,
-				connectedHandles: { top: false, bottom: false, left: false, right: false },
-			},
-		});
-	});
-
-	// Add human nodes
-	const humans = data.humans ?? [];
-	const humanStartX = ungroupedAgents.length > 0
-		? centerX + radius + NODE_WIDTH + 80
-		: ungroupedStartX;
-
-	humans.forEach((human, index) => {
-		allNodes.push({
-			id: human.id,
-			type: "human",
-			position: { x: humanStartX, y: index * 220 },
-			data: {
-				nodeId: human.id,
-				nodeKind: "human",
-				configDisplayName: human.display_name ?? null,
-				configRole: human.role ?? null,
-				bio: human.bio ?? null,
-				description: human.description ?? null,
-				avatarSeed: human.id,
-				connectedHandles: { top: false, bottom: false, left: false, right: false },
-			},
-		});
-	});
-
-	// Build absolute position lookup for handle routing
-	const nodePositionMap = new Map<string, { x: number; y: number }>();
-	for (const node of allNodes) {
-		if (node.parentId) {
-			// Child nodes have positions relative to parent — compute absolute
-			const parent = allNodes.find((n) => n.id === node.parentId);
-			if (parent) {
-				nodePositionMap.set(node.id, {
-					x: parent.position.x + node.position.x,
-					y: parent.position.y + node.position.y,
-				});
-				continue;
-			}
-		}
-		nodePositionMap.set(node.id, node.position);
-	}
-
-	// Compute connected handles using actual positions
-	const connectedHandles = new Set<string>();
-	for (const link of links) {
-		const edgeId = `${link.from}->${link.to}`;
-		const { sourceHandle, targetHandle } = getHandlesForKind(
-			link.kind,
-			nodePositionMap.get(link.from),
-			nodePositionMap.get(link.to),
-			savedHandles[edgeId],
-		);
-		connectedHandles.add(`${link.from}:${sourceHandle}`);
-		connectedHandles.add(`${link.to}:${targetHandle}`);
-	}
-
-	// Patch connectedHandles onto nodes
-	for (const node of allNodes) {
-		if (node.type === "agent" || node.type === "human") {
-			const nid = node.id;
-			node.data = {
-				...node.data,
-				connectedHandles: {
-					top: connectedHandles.has(`${nid}:top`),
-					bottom: connectedHandles.has(`${nid}:bottom`),
-					left: connectedHandles.has(`${nid}:left`),
-					right: connectedHandles.has(`${nid}:right`),
-				},
-			};
-		}
-	}
-
-	const initialEdges: Edge[] = data.links.map((link) => {
-		const edgeId = `${link.from}->${link.to}`;
-		const { sourceHandle, targetHandle } = getHandlesForKind(
-			link.kind,
-			nodePositionMap.get(link.from),
-			nodePositionMap.get(link.to),
-			savedHandles[edgeId],
-		);
-		return {
-			id: edgeId,
-			source: link.from,
-			target: link.to,
-			sourceHandle,
-			targetHandle,
-			type: "link",
-			data: {
-				direction: link.direction,
-				kind: link.kind,
-				active: activeEdges.has(edgeId),
-			},
-			style: {
-				stroke: EDGE_COLOR,
-			},
-		};
-	});
-
-	// Apply saved positions (override computed layout)
-	for (const node of allNodes) {
-		const savedPos = saved[node.id];
-		if (savedPos) {
-			node.position = savedPos;
-		}
-	}
-
-	return { initialNodes: allNodes, initialEdges };
-}
-
-// -- Exported component with provider wrapper --
-
-export interface TopologyGraphProps {
-	activeEdges?: Set<string>;
-	agents?: AgentSummary[];
-}
-
-export function TopologyGraph({ activeEdges, agents }: TopologyGraphProps) {
-	const edges = activeEdges ?? new Set<string>();
-	const agentList = agents ?? [];
-	return (
-		<ReactFlowProvider>
-			<TopologyGraphInner activeEdges={edges} agents={agentList} />
-		</ReactFlowProvider>
-	);
-}
diff --git a/interface/src/components/WebChatPanel.tsx b/interface/src/components/WebChatPanel.tsx
deleted file mode 100644
index 15ce094b8..000000000
--- a/interface/src/components/WebChatPanel.tsx
+++ /dev/null
@@ -1,437 +0,0 @@
-import {useEffect, useRef, useState} from "react";
-import {Link} from "@tanstack/react-router";
-import {usePortal, getPortalSessionId} from "@/hooks/usePortal";
-import {isOpenCodeWorker, type ActiveWorker} from "@/hooks/useChannelLiveState";
-import {useLiveContext} from "@/hooks/useLiveContext";
-import {Markdown} from "@/components/Markdown";
-import {ConversationSettingsPanel} from "@/components/ConversationSettingsPanel";
-import {ConversationsSidebar} from "@/components/ConversationsSidebar";
-import {Button} from "@/ui/Button";
-import {Popover, PopoverTrigger, PopoverContent} from "@/ui/Popover";
-import {api, type ConversationDefaultsResponse, type ConversationSettings} from "@/api/client";
-import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
-import {Settings02Icon} from "@hugeicons/core-free-icons";
-import {HugeiconsIcon} from "@hugeicons/react";
-
-interface WebChatPanelProps {
-	agentId: string;
-}
-
-function ActiveWorkersPanel({
-	workers,
-	agentId,
-}: {
-	workers: ActiveWorker[];
-	agentId: string;
-}) {
-	if (workers.length === 0) return null;
-
-	// Use neutral chrome when all workers are opencode, amber when all builtin, mixed stays amber
-	const allOpenCode = workers.every(isOpenCodeWorker);
-	const borderColor = allOpenCode
-		? "border-zinc-500/25 bg-zinc-500/5"
-		: "border-amber-500/25 bg-amber-500/5";
-	const headerColor = allOpenCode ? "text-zinc-200" : "text-amber-200";
-	const dotColor = allOpenCode ? "bg-zinc-400" : "bg-amber-400";
-
-	return (
-		<div className={`rounded-lg border px-3 py-2 ${borderColor}`}>
-			<div
-				className={`mb-2 flex items-center gap-1.5 text-tiny ${headerColor}`}
-			>
-				<div className={`h-1.5 w-1.5 animate-pulse rounded-full ${dotColor}`} />
-				<span>
-					{workers.length} active worker{workers.length !== 1 ? "s" : ""}
-				</span>
-			</div>
-			<div className="flex flex-col gap-1.5">
-				{workers.map((worker) => {
-					const oc = isOpenCodeWorker(worker);
-					return (
-						<Link
-							key={worker.id}
-							to="/agents/$agentId/workers"
-							params={{agentId}}
-							search={{worker: worker.id}}
-							className={`flex min-w-0 items-center gap-2 rounded-md px-2.5 py-1.5 text-tiny transition-colors ${
-								oc
-									? "bg-zinc-500/10 hover:bg-zinc-500/20"
-									: "bg-amber-500/10 hover:bg-amber-500/20"
-							}`}
-						>
-							<div
-								className={`h-1.5 w-1.5 animate-pulse rounded-full ${oc ? "bg-zinc-400" : "bg-amber-400"}`}
-							/>
-							<span
-								className={`font-medium ${oc ? "text-zinc-300" : "text-amber-300"}`}
-							>
-								Worker
-							</span>
-							<span className="min-w-0 flex-1 truncate text-ink-dull">
-								{worker.task}
-							</span>
-							<span className="shrink-0 text-ink-faint">{worker.status}</span>
-							{worker.currentTool && (
-								<span
-									className={`max-w-40 shrink-0 truncate ${oc ? "text-zinc-400/80" : "text-amber-400/80"}`}
-								>
-									{worker.currentTool}
-								</span>
-							)}
-						</Link>
-					);
-				})}
-			</div>
-		</div>
-	);
-}
-
-function ThinkingIndicator() {
-	return (
-		<div className="flex items-center gap-1.5 py-1">
-			<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-ink-faint" />
-			<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-ink-faint [animation-delay:0.2s]" />
-			<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-ink-faint [animation-delay:0.4s]" />
-		</div>
-	);
-}
-
-function FloatingChatInput({
-	value,
-	onChange,
-	onSubmit,
-	disabled,
-	agentId,
-}: {
-	value: string;
-	onChange: (value: string) => void;
-	onSubmit: () => void;
-	disabled: boolean;
-	agentId: string;
-}) {
-	const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-	useEffect(() => {
-		textareaRef.current?.focus({preventScroll: true});
-	}, []);
-
-	useEffect(() => {
-		const textarea = textareaRef.current;
-		if (!textarea) return;
-
-		const adjustHeight = () => {
-			textarea.style.height = "auto";
-			const scrollHeight = textarea.scrollHeight;
-			const maxHeight = 200;
-			textarea.style.height = `${Math.min(scrollHeight, maxHeight)}px`;
-			textarea.style.overflowY = scrollHeight > maxHeight ? "auto" : "hidden";
-		};
-
-		adjustHeight();
-		textarea.addEventListener("input", adjustHeight);
-		return () => textarea.removeEventListener("input", adjustHeight);
-	}, [value]);
-
-	const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-		if (event.key === "Enter" && !event.shiftKey) {
-			event.preventDefault();
-			onSubmit();
-		}
-	};
-
-	return (
-		<div className="absolute inset-x-0 bottom-0 flex justify-center px-4 pb-4 pt-8 bg-gradient-to-t from-app via-app/80 to-transparent pointer-events-none">
-			<div className="w-full max-w-2xl pointer-events-auto">
-				<div className="rounded-2xl border border-app-line/50 bg-app-box/40 backdrop-blur-xl shadow-xl transition-colors duration-200 hover:border-app-line/70">
-					<div className="flex items-end gap-2 p-3">
-						<textarea
-							ref={textareaRef}
-							value={value}
-							onChange={(event) => onChange(event.target.value)}
-							onKeyDown={handleKeyDown}
-							placeholder={
-								disabled ? "Waiting for response..." : `Message ${agentId}...`
-							}
-							disabled={disabled}
-							rows={1}
-							className="flex-1 resize-none bg-transparent px-1 py-1.5 text-sm text-ink placeholder:text-ink-faint/60 focus:outline-none disabled:opacity-40"
-							style={{maxHeight: "200px"}}
-						/>
-						<button
-							type="button"
-							onClick={onSubmit}
-							disabled={disabled || !value.trim()}
-							className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent text-white transition-all duration-150 hover:bg-accent-deep disabled:opacity-30 disabled:hover:bg-accent"
-						>
-							<svg
-								width="16"
-								height="16"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								strokeWidth="2"
-								strokeLinecap="round"
-								strokeLinejoin="round"
-							>
-								<path d="M12 19V5M5 12l7-7 7 7" />
-							</svg>
-						</button>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export function WebChatPanel({agentId}: WebChatPanelProps) {
-	const queryClient = useQueryClient();
-	const [activeConversationId, setActiveConversationId] = useState<string>(getPortalSessionId(agentId));
-	const {isSending, error, sendMessage} = usePortal(agentId, activeConversationId);
-	const {liveStates} = useLiveContext();
-	const [input, setInput] = useState("");
-	const scrollRef = useRef<HTMLDivElement>(null);
-	const [showSettings, setShowSettings] = useState(false);
-	const [settings, setSettings] = useState<ConversationSettings>({});
-
-	// Fetch conversations list
-	const { data: conversationsData, isLoading: conversationsLoading } = useQuery({
-		queryKey: ["portal-conversations", agentId],
-		queryFn: async () => {
-			const response = await api.listPortalConversations(agentId);
-			if (!response.ok) throw new Error(`HTTP ${response.status}`);
-			return response.json();
-		},
-	});
-
-	const conversations = conversationsData?.conversations ?? [];
-
-	// Reset settings when switching conversations, hydrating from cached data if available
-	useEffect(() => {
-		const activeConv = conversations.find(
-			(c: any) => c.id === activeConversationId
-		);
-		setSettings(activeConv?.settings ?? {});
-		setShowSettings(false);
-	}, [activeConversationId, agentId, conversationsData]);
-
-	// Fetch conversation defaults
-	const {data: defaults, isLoading: defaultsLoading, error: defaultsError} = useQuery<ConversationDefaultsResponse>({
-		queryKey: ["conversation-defaults", agentId],
-		queryFn: () => api.getConversationDefaults(agentId),
-	});
-
-	const agentsQuery = useQuery({
-		queryKey: ["agents"],
-		queryFn: () => api.agents(),
-		staleTime: 10_000,
-	});
-	const agentDisplayName = agentsQuery.data?.agents.find((a) => a.id === agentId)?.display_name;
-
-	const liveState = liveStates[activeConversationId];
-	const timeline = liveState?.timeline ?? [];
-	const isTyping = liveState?.isTyping ?? false;
-	const activeWorkers = Object.values(liveState?.workers ?? {});
-	const hasActiveWorkers = activeWorkers.length > 0;
-
-	// Mutations
-	const createConversationMutation = useMutation({
-		mutationFn: async () => {
-			const response = await api.createPortalConversation(agentId);
-			if (!response.ok) throw new Error(`HTTP ${response.status}`);
-			return response.json();
-		},
-		onSuccess: (data) => {
-			setActiveConversationId(data.conversation.id);
-			queryClient.invalidateQueries({ queryKey: ["portal-conversations", agentId] });
-		},
-	});
-
-	const deleteConversationMutation = useMutation({
-		mutationFn: async (id: string) => {
-			const response = await api.deletePortalConversation(agentId, id);
-			if (!response.ok) throw new Error(`HTTP ${response.status}`);
-			return response.json();
-		},
-		onSuccess: (_, deletedId) => {
-			if (activeConversationId === deletedId) {
-				setActiveConversationId(getPortalSessionId(agentId));
-			}
-			queryClient.invalidateQueries({ queryKey: ["portal-conversations", agentId] });
-		},
-	});
-
-	const renameConversationMutation = useMutation({
-		mutationFn: async ({ id, title }: { id: string; title: string }) => {
-			const response = await api.updatePortalConversation(agentId, id, title);
-			if (!response.ok) throw new Error(`HTTP ${response.status}`);
-			return response.json();
-		},
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["portal-conversations", agentId] });
-		},
-	});
-
-	const archiveConversationMutation = useMutation({
-		mutationFn: async ({ id, archived }: { id: string; archived: boolean }) => {
-			const response = await api.updatePortalConversation(agentId, id, undefined, archived);
-			if (!response.ok) throw new Error(`HTTP ${response.status}`);
-			return response.json();
-		},
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["portal-conversations", agentId] });
-		},
-	});
-
-	// Auto-scroll on new messages or typing state changes.
-	useEffect(() => {
-		const el = scrollRef.current;
-		if (el) {
-			el.scrollTo({top: el.scrollHeight, behavior: "smooth"});
-		}
-	}, [timeline.length, isTyping, activeWorkers.length]);
-
-	const handleSubmit = () => {
-		const trimmed = input.trim();
-		if (!trimmed || isSending) return;
-		setInput("");
-		sendMessage(trimmed);
-	};
-
-	const saveSettingsMutation = useMutation({
-		mutationFn: async () => {
-			if (!activeConversationId) return;
-			const response = await api.updatePortalConversation(agentId, activeConversationId, undefined, undefined, settings);
-			if (!response.ok) throw new Error(`HTTP ${response.status}`);
-			return response.json();
-		},
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["portal-conversations", agentId] });
-			setShowSettings(false);
-		},
-	});
-
-	return (
-		<div className="flex h-full w-full">
-			{/* Sidebar */}
-			<ConversationsSidebar
-				conversations={conversations}
-				activeConversationId={activeConversationId}
-				onSelectConversation={setActiveConversationId}
-				onCreateConversation={() => createConversationMutation.mutate()}
-				onDeleteConversation={(id) => deleteConversationMutation.mutate(id)}
-				onRenameConversation={(id, title) => renameConversationMutation.mutate({ id, title })}
-				onArchiveConversation={(id, archived) => archiveConversationMutation.mutate({ id, archived })}
-				isLoading={conversationsLoading}
-			/>
-
-			{/* Main Chat Area */}
-			<div className="relative flex flex-1 flex-col">
-				{/* Header */}
-				<div className="flex items-center justify-between border-b border-app-line px-4 py-2">
-					<div className="flex items-center gap-2">
-						<h2 className="text-sm font-medium">{agentDisplayName || agentId}</h2>
-						{defaults && (
-							<span className="text-xs text-ink-faint">
-								{defaults.available_models.find((m) => m.id === (settings.model || defaults.model))?.name
-									?? settings.model ?? defaults.model}
-							</span>
-						)}
-						{settings.response_mode === "observe" && (
-							<span className="rounded-md bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-400">
-								Observe
-							</span>
-						)}
-						{settings.response_mode === "mention_only" && (
-							<span className="rounded-md bg-red-500/10 px-1.5 py-0.5 text-[10px] font-medium text-red-400">
-								Mention Only
-							</span>
-						)}
-					</div>
-					<Popover open={showSettings} onOpenChange={setShowSettings}>
-						<PopoverTrigger asChild>
-							<Button variant="ghost" size="icon" className="h-7 w-7">
-								<HugeiconsIcon icon={Settings02Icon} className="h-3.5 w-3.5" />
-							</Button>
-						</PopoverTrigger>
-						<PopoverContent align="end" sideOffset={4} collisionPadding={16} className="max-h-[80vh] w-96 overflow-y-auto p-3">
-							{defaultsLoading ? (
-								<div className="py-4 text-center text-xs text-ink-faint">Loading...</div>
-							) : defaults ? (
-								<ConversationSettingsPanel
-									defaults={defaults}
-									currentSettings={settings}
-									onChange={setSettings}
-									onSave={() => saveSettingsMutation.mutate()}
-									onCancel={() => setShowSettings(false)}
-									saving={saveSettingsMutation.isPending}
-								/>
-							) : (
-								<div className="py-4 text-center text-xs text-red-400">
-									{defaultsError instanceof Error ? defaultsError.message : "Failed to load settings"}
-								</div>
-							)}
-						</PopoverContent>
-					</Popover>
-				</div>
-
-				{/* Messages */}
-				<div ref={scrollRef} className="flex-1 overflow-x-hidden overflow-y-auto">
-					<div className="mx-auto flex max-w-2xl flex-col gap-6 px-4 py-6 pb-32">
-						{hasActiveWorkers && (
-							<div className="sticky top-0 z-10 bg-app/90 pb-2 pt-2 backdrop-blur-sm">
-								<ActiveWorkersPanel workers={activeWorkers} agentId={agentId} />
-							</div>
-						)}
-
-						{timeline.length === 0 && !isTyping && (
-							<div className="flex flex-col items-center justify-center py-24">
-								<p className="text-sm text-ink-faint">
-									Start a conversation with {agentDisplayName || agentId}
-								</p>
-							</div>
-						)}
-
-						{timeline.map((item) => {
-							if (item.type !== "message") return null;
-							return (
-								<div key={item.id}>
-									{item.role === "user" ? (
-										<div className="flex justify-end">
-											<div className="max-w-[85%] min-w-0 overflow-hidden rounded-2xl rounded-br-md bg-app-hover/30 px-4 py-2.5">
-												<p className="text-sm text-ink break-all whitespace-pre-wrap">
-													{item.content}
-												</p>
-											</div>
-										</div>
-									) : (
-										<div className="text-sm text-ink-dull">
-											<Markdown>{item.content}</Markdown>
-										</div>
-									)}
-								</div>
-							);
-						})}
-
-						{/* Typing indicator */}
-						{isTyping && <ThinkingIndicator />}
-
-						{error && (
-							<div className="rounded-lg border border-red-500/20 bg-red-500/5 px-4 py-3 text-sm text-red-400">
-								{error}
-							</div>
-						)}
-					</div>
-				</div>
-
-				{/* Floating input */}
-				<FloatingChatInput
-					value={input}
-					onChange={setInput}
-					onSubmit={handleSubmit}
-					disabled={isSending || isTyping}
-					agentId={agentId}
-				/>
-			</div>
-		</div>
-	);
-}
diff --git a/interface/src/components/WorkersPanel.tsx b/interface/src/components/WorkersPanel.tsx
new file mode 100644
index 000000000..522742f9f
--- /dev/null
+++ b/interface/src/components/WorkersPanel.tsx
@@ -0,0 +1,480 @@
+import {useState, useMemo, useCallback} from "react";
+import {useQuery} from "@tanstack/react-query";
+import {useQueries} from "@tanstack/react-query";
+import {Queue, MagnifyingGlass, CaretLeft, Copy, Check, XCircle} from "@phosphor-icons/react";
+import {
+	CircleButton,
+	PopoverRoot,
+	PopoverTrigger,
+	PopoverContent,
+} from "@spacedrive/primitives";
+import {
+	api,
+	type WorkerDetailResponse,
+	type TranscriptStep,
+	type OpenCodePart,
+} from "@/api/client";
+import {useLiveContext} from "@/hooks/useLiveContext";
+import {formatTimeAgo} from "@/lib/format";
+import {LiveDuration} from "@/components/LiveDuration";
+import {WorkerDetail, type LiveWorker} from "@/routes/AgentWorkers";
+import {cx} from "class-variance-authority";
+
+type Tab = "interactive" | "history";
+
+// ─── Public button (used in Sidebar and portal header) ─────────────────────
+
+export function WorkersPanelButton() {
+	const [open, setOpen] = useState(false);
+	const {activeWorkers} = useLiveContext();
+	const activeCount = Object.keys(activeWorkers).length;
+
+	return (
+		<PopoverRoot open={open} onOpenChange={setOpen}>
+			<PopoverTrigger asChild>
+				<CircleButton
+					icon={Queue}
+					title="Workers"
+					variant={activeCount > 0 ? "active" : "default"}
+				/>
+			</PopoverTrigger>
+			<PopoverContent
+				align="start"
+				side="right"
+				sideOffset={8}
+				collisionPadding={16}
+				className="w-[420px] p-0"
+			>
+				<WorkersPanelContent />
+			</PopoverContent>
+		</PopoverRoot>
+	);
+}
+
+// ─── Panel content ──────────────────────────────────────────────────────────
+
+export function WorkersPanelContent() {
+	const [tab, setTab] = useState<Tab>("history");
+	const [search, setSearch] = useState("");
+	const [selectedWorker, setSelectedWorker] = useState<{
+		workerId: string;
+		agentId: string;
+		channelId?: string;
+	} | null>(null);
+
+	const {activeWorkers, liveTranscripts, liveOpenCodeParts} = useLiveContext();
+
+	// Agent list for name lookups + per-agent worker history queries
+	const {data: agentsData} = useQuery({
+		queryKey: ["agents"],
+		queryFn: api.agents,
+		staleTime: 30_000,
+	});
+	const agents = agentsData?.agents ?? [];
+
+	const agentNameMap = useMemo(() => {
+		const map: Record<string, string> = {};
+		for (const a of agents) map[a.id] = a.display_name ?? a.id;
+		return map;
+	}, [agents]);
+
+	// Per-agent worker queries for history tab
+	const workerQueries = useQueries({
+		queries: agents.map((agent) => ({
+			queryKey: ["workers-panel", agent.id],
+			queryFn: () => api.workersList(agent.id, {limit: 100}),
+			staleTime: 15_000,
+			refetchInterval: 15_000,
+		})),
+	});
+
+	// History: all DB workers merged and sorted newest-first
+	const historyWorkers = useMemo(() => {
+		type Row = {
+			id: string;
+			task: string;
+			status: string;
+			worker_type: string;
+			started_at: string;
+			completed_at: string | null;
+			channel_id?: string | null;
+			tool_calls: number;
+			agentId: string;
+			agentName: string;
+		};
+		const merged: Row[] = [];
+		for (let i = 0; i < agents.length; i++) {
+			const data = workerQueries[i]?.data;
+			if (!data) continue;
+			for (const w of data.workers) {
+				merged.push({
+					id: w.id,
+					task: w.task,
+					status: w.status,
+					worker_type: w.worker_type,
+					started_at: w.started_at,
+					completed_at: w.completed_at ?? null,
+					channel_id: w.channel_id,
+					tool_calls: w.tool_calls,
+					agentId: agents[i].id,
+					agentName: agentNameMap[agents[i].id] ?? agents[i].id,
+				});
+			}
+		}
+		return merged.sort(
+			(a, b) =>
+				new Date(b.started_at).getTime() - new Date(a.started_at).getTime(),
+		);
+	}, [workerQueries, agents, agentNameMap]);
+
+	// Interactive: live SSE workers (running or idle)
+	const interactiveWorkers = useMemo(
+		() =>
+			Object.values(activeWorkers).sort((a, b) => b.startedAt - a.startedAt),
+		[activeWorkers],
+	);
+
+	const term = search.trim().toLowerCase();
+
+	const filteredInteractive = useMemo(
+		() =>
+			term
+				? interactiveWorkers.filter((w) => w.task.toLowerCase().includes(term))
+				: interactiveWorkers,
+		[interactiveWorkers, term],
+	);
+
+	const filteredHistory = useMemo(
+		() =>
+			term
+				? historyWorkers.filter((w) => w.task.toLowerCase().includes(term))
+				: historyWorkers,
+		[historyWorkers, term],
+	);
+
+	return (
+		<div className="relative overflow-hidden" style={{height: 500}}>
+			{/* List view */}
+			<div
+				className="absolute inset-0 flex flex-col transition-transform duration-250 ease-in-out"
+				style={{transform: selectedWorker ? "translateX(-100%)" : "translateX(0)"}}
+			>
+				{/* Search */}
+				<div className="flex items-center gap-2 border-b border-app-line px-3 py-2.5">
+					<MagnifyingGlass className="h-3.5 w-3.5 shrink-0 text-ink-faint" />
+					<input
+						type="text"
+						placeholder="Search workers..."
+						value={search}
+						onChange={(e) => setSearch(e.target.value)}
+						className="flex-1 bg-transparent text-sm text-ink placeholder:text-ink-faint outline-none"
+						autoFocus
+					/>
+				</div>
+
+				{/* Tabs */}
+				<div className="flex border-b border-app-line">
+					<button
+						onClick={() => setTab("history")}
+						className={cx(
+							"flex-1 py-2 text-xs font-medium transition-colors",
+							tab === "history"
+								? "bg-app-hover/40 text-ink"
+								: "text-ink-faint hover:text-ink-dull",
+						)}
+					>
+						History
+					</button>
+					<button
+						onClick={() => setTab("interactive")}
+						className={cx(
+							"flex-1 py-2 text-xs font-medium transition-colors",
+							tab === "interactive"
+								? "bg-app-hover/40 text-ink"
+								: "text-ink-faint hover:text-ink-dull",
+						)}
+					>
+						Interactive{interactiveWorkers.length > 0 ? ` · ${interactiveWorkers.length}` : ""}
+					</button>
+				</div>
+
+				{/* List */}
+				<div className="flex-1 overflow-y-auto">
+					{tab === "interactive" ? (
+						filteredInteractive.length === 0 ? (
+							<div className="py-10 text-center text-sm text-ink-faint">
+								No active workers
+							</div>
+						) : (
+							filteredInteractive.map((w) => (
+								<WorkerPanelRow
+									key={w.id}
+									task={w.task}
+									agentName={agentNameMap[w.agentId] ?? w.agentId}
+									status={w.isIdle ? "idle" : "running"}
+									workerType={w.workerType}
+									startedAt={new Date(w.startedAt).toISOString()}
+									completedAt={null}
+									isLive
+									toolCalls={w.toolCalls}
+									onClick={() =>
+										setSelectedWorker({workerId: w.id, agentId: w.agentId, channelId: w.channelId})
+									}
+								/>
+							))
+						)
+					) : filteredHistory.length === 0 ? (
+						<div className="py-10 text-center text-sm text-ink-faint">
+							No worker history
+						</div>
+					) : (
+						filteredHistory.map((w) => (
+							<WorkerPanelRow
+								key={w.id}
+								task={w.task}
+								agentName={w.agentName}
+								status={w.status}
+								workerType={w.worker_type}
+								startedAt={w.started_at}
+								completedAt={w.completed_at}
+								isLive={w.id in activeWorkers}
+								toolCalls={w.tool_calls}
+								onClick={() =>
+									setSelectedWorker({workerId: w.id, agentId: w.agentId, channelId: activeWorkers[w.id]?.channelId ?? w.channel_id ?? undefined})
+								}
+							/>
+						))
+					)}
+				</div>
+			</div>
+
+			{/* Detail view — slides in from the right */}
+			<div
+				className="absolute inset-0 flex flex-col transition-transform duration-250 ease-in-out"
+				style={{transform: selectedWorker ? "translateX(0)" : "translateX(100%)"}}
+			>
+				{selectedWorker && (
+					<WorkerDetailInline
+						workerId={selectedWorker.workerId}
+						agentId={selectedWorker.agentId}
+						channelId={selectedWorker.channelId}
+						liveWorker={activeWorkers[selectedWorker.workerId] as LiveWorker | undefined}
+						liveTranscript={liveTranscripts[selectedWorker.workerId]}
+						liveOpenCodeParts={liveOpenCodeParts[selectedWorker.workerId]}
+						onBack={() => setSelectedWorker(null)}
+					/>
+				)}
+			</div>
+		</div>
+	);
+}
+
+// ─── Compact worker row ─────────────────────────────────────────────────────
+
+function WorkerPanelRow({
+	task,
+	agentName,
+	status,
+	workerType,
+	startedAt,
+	isLive,
+	toolCalls,
+	onClick,
+}: {
+	task: string;
+	agentName: string;
+	status: string;
+	workerType: string;
+	startedAt: string;
+	completedAt: string | null;
+	isLive: boolean;
+	toolCalls: number;
+	onClick: () => void;
+}) {
+	const isRunning = isLive && status === "running";
+	const isIdle = status === "idle";
+
+	return (
+		<button
+			onClick={onClick}
+			className="flex w-full flex-col gap-1 border-b border-app-line/30 px-4 py-3 text-left transition-colors hover:bg-app-hover/20"
+		>
+			<div className="flex items-start gap-2">
+				{isRunning && (
+					<span className="mt-1.5 h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-accent" />
+				)}
+				{isIdle && (
+					<span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-blue-400" />
+				)}
+				{!isRunning && !isIdle && (
+					<span
+						className={cx(
+							"mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full",
+							status === "done" ? "bg-status-success" : "bg-status-error",
+						)}
+					/>
+				)}
+				<p className="min-w-0 flex-1 truncate text-sm text-ink-dull">
+					{task.replace(/^\[opencode\]\s*/, "")}
+				</p>
+			</div>
+			<div className="flex items-center gap-2 pl-3.5 text-tiny text-ink-faint">
+				<span className="font-medium text-ink-faint">{agentName}</span>
+				<span>·</span>
+				<span>{workerType === "opencode" ? "OpenCode" : workerType}</span>
+				<span>·</span>
+				{isRunning ? (
+					<LiveDuration startMs={new Date(startedAt).getTime()} />
+				) : (
+					<span>{formatTimeAgo(startedAt)}</span>
+				)}
+				{toolCalls > 0 && (
+					<>
+						<span>·</span>
+						<span>{toolCalls} tools</span>
+					</>
+				)}
+			</div>
+		</button>
+	);
+}
+
+// ─── Inline detail view (slides in within the popover) ────────────────────
+
+function WorkerDetailInline({
+	workerId,
+	agentId,
+	channelId,
+	liveWorker,
+	liveTranscript,
+	liveOpenCodeParts,
+	onBack,
+}: {
+	workerId: string;
+	agentId: string;
+	channelId?: string;
+	liveWorker?: LiveWorker;
+	liveTranscript?: TranscriptStep[];
+	liveOpenCodeParts?: Map<string, OpenCodePart>;
+	onBack: () => void;
+}) {
+	const {data: detailData} = useQuery({
+		queryKey: ["worker-detail", agentId, workerId],
+		queryFn: () => api.workerDetail(agentId, workerId).catch(() => null),
+	});
+
+	const detail: WorkerDetailResponse | null = useMemo(() => {
+		if (detailData) {
+			if (!liveWorker) return detailData;
+			return {...detailData, status: liveWorker.isIdle ? "idle" : "running"};
+		}
+		if (!liveWorker) return null;
+		return {
+			id: liveWorker.id,
+			task: liveWorker.task,
+			result: null,
+			status: liveWorker.isIdle ? "idle" : "running",
+			worker_type: liveWorker.workerType ?? "builtin",
+			channel_id: null,
+			channel_name: null,
+			started_at: new Date(liveWorker.startedAt).toISOString(),
+			completed_at: null,
+			transcript: null,
+			tool_calls: liveWorker.toolCalls,
+			opencode_session_id: null,
+			opencode_port: null,
+			interactive: liveWorker.interactive,
+			directory: null,
+		};
+	}, [detailData, liveWorker]);
+
+	const [copied, setCopied] = useState(false);
+	const [cancelling, setCancelling] = useState(false);
+
+	const isActive = !!liveWorker;
+	const resolvedChannelId = channelId ?? detail?.channel_id ?? undefined;
+	const canCancel = isActive && !!resolvedChannelId;
+
+	const handleCancel = useCallback(async () => {
+		if (!resolvedChannelId || cancelling) return;
+		setCancelling(true);
+		try {
+			await api.cancelProcess(resolvedChannelId, "worker", workerId);
+		} catch (e) {
+			console.error("Failed to cancel worker:", e);
+		} finally {
+			setCancelling(false);
+		}
+	}, [resolvedChannelId, workerId, cancelling]);
+
+	const copyTranscript = useCallback(() => {
+		const steps = liveTranscript ?? detail?.transcript;
+		if (!steps || steps.length === 0) return;
+
+		const lines: string[] = [];
+		if (detail?.task) lines.push(`# ${detail.task}\n`);
+		for (const step of steps) {
+			if (step.type === "user_text" || step.type === "system_text") {
+				lines.push(step.text);
+			} else if (step.type === "tool_result") {
+				lines.push(`[${step.name}] ${step.text}`);
+			} else if (step.type === "action") {
+				for (const c of step.content) {
+					if (c.type === "text") lines.push(c.text);
+					else if (c.type === "tool_call") lines.push(`> ${c.name}(${c.args})`);
+				}
+			}
+		}
+		if (detail?.result) lines.push(`\n---\nResult: ${detail.result}`);
+
+		navigator.clipboard.writeText(lines.join("\n")).then(() => {
+			setCopied(true);
+			setTimeout(() => setCopied(false), 2000);
+		});
+	}, [detail, liveTranscript]);
+
+	return (
+		<>
+			{/* Back bar */}
+			<div className="flex items-center gap-1 border-b border-app-line px-2 py-1.5">
+				<CircleButton
+					icon={CaretLeft}
+					title="Back to workers"
+					onClick={onBack}
+					variant="default"
+				/>
+				<div className="flex-1" />
+				{canCancel && (
+					<CircleButton
+						icon={XCircle}
+						title="Cancel worker"
+						onClick={handleCancel}
+						variant="default"
+						disabled={cancelling}
+					/>
+				)}
+				<CircleButton
+					icon={copied ? Check : Copy}
+					title="Copy transcript"
+					onClick={copyTranscript}
+					variant="default"
+				/>
+			</div>
+
+			{!detail ? (
+				<div className="flex flex-1 items-center justify-center">
+					<p className="text-sm text-ink-faint">Loading...</p>
+				</div>
+			) : (
+				<div className="flex-1 overflow-hidden">
+					<WorkerDetail
+						detail={detail}
+						liveWorker={liveWorker}
+						liveTranscript={liveTranscript}
+						liveOpenCodeParts={liveOpenCodeParts}
+					/>
+				</div>
+			)}
+		</>
+	);
+}
diff --git a/interface/src/components/agent-config/ConfigSectionEditor.tsx b/interface/src/components/agent-config/ConfigSectionEditor.tsx
new file mode 100644
index 000000000..0441877e8
--- /dev/null
+++ b/interface/src/components/agent-config/ConfigSectionEditor.tsx
@@ -0,0 +1,679 @@
+import {useCallback, useEffect, useState} from "react";
+import {
+	Input,
+	NumberStepper,
+	SelectRoot,
+	SelectTrigger,
+	SelectValue,
+	SelectContent,
+	SelectItem,
+	Switch,
+} from "@spacedrive/primitives";
+import {ModelSelect} from "@/components/ModelSelect";
+import {TagInput} from "@/components/TagInput";
+import {supportsAdaptiveThinking} from "./utils";
+import {SANDBOX_DEFAULTS} from "./constants";
+import type {ConfigSectionEditorProps} from "./types";
+import type {
+	BrowserUpdate,
+	CoalesceUpdate,
+	CompactionUpdate,
+	CortexUpdate,
+	MemoryPersistenceUpdate,
+	ProjectsUpdate,
+	RoutingUpdate,
+	SandboxUpdate,
+	TuningUpdate,
+} from "@/api/client";
+
+// Union of every section's update type. Each instance of the editor renders
+// exactly one section, so the active section decides which fields are present.
+type ConfigValues = RoutingUpdate &
+	TuningUpdate &
+	CompactionUpdate &
+	CortexUpdate &
+	CoalesceUpdate &
+	MemoryPersistenceUpdate &
+	BrowserUpdate &
+	SandboxUpdate &
+	ProjectsUpdate;
+
+export function ConfigSectionEditor({
+	sectionId,
+	label,
+	description,
+	detail,
+	config,
+	onDirtyChange,
+	saveHandlerRef,
+	onSave,
+}: ConfigSectionEditorProps) {
+	const sandbox = config.sandbox ?? SANDBOX_DEFAULTS;
+
+	const [localValues, setLocalValues] = useState<ConfigValues>(() => {
+		switch (sectionId) {
+			case "routing":
+				return {...config.routing} as ConfigValues;
+			case "tuning":
+				return {...config.tuning} as ConfigValues;
+			case "compaction":
+				return {...config.compaction} as ConfigValues;
+			case "cortex":
+				return {...config.cortex} as ConfigValues;
+			case "coalesce":
+				return {...config.coalesce} as ConfigValues;
+			case "memory":
+				return {...config.memory_persistence} as ConfigValues;
+			case "browser":
+				return {...config.browser} as ConfigValues;
+			case "sandbox":
+				return {
+					mode: sandbox.mode,
+					writable_paths: sandbox.writable_paths,
+				} as ConfigValues;
+			case "projects":
+				return {...config.projects} as ConfigValues;
+			default:
+				return {};
+		}
+	});
+
+	const [localDirty, setLocalDirty] = useState(false);
+
+	useEffect(() => {
+		onDirtyChange(localDirty);
+	}, [localDirty, onDirtyChange]);
+
+	useEffect(() => {
+		if (!localDirty) {
+			switch (sectionId) {
+				case "routing":
+					setLocalValues({...config.routing});
+					break;
+				case "tuning":
+					setLocalValues({...config.tuning});
+					break;
+				case "compaction":
+					setLocalValues({...config.compaction});
+					break;
+				case "cortex":
+					setLocalValues({...config.cortex});
+					break;
+				case "coalesce":
+					setLocalValues({...config.coalesce});
+					break;
+				case "memory":
+					setLocalValues({...config.memory_persistence});
+					break;
+				case "browser":
+					setLocalValues({...config.browser});
+					break;
+				case "sandbox":
+					setLocalValues({
+						mode: sandbox.mode,
+						writable_paths: sandbox.writable_paths,
+					});
+					break;
+				case "projects":
+					setLocalValues({...config.projects});
+					break;
+			}
+		}
+	}, [config, sectionId, localDirty]);
+
+	const handleChange = useCallback(
+		(field: string, value: string | number | boolean | string[]) => {
+			setLocalValues((prev) => ({...prev, [field]: value}));
+			setLocalDirty(true);
+		},
+		[],
+	);
+
+	const handleSave = useCallback(() => {
+		onSave({[sectionId]: localValues});
+		setLocalDirty(false);
+	}, [onSave, sectionId, localValues]);
+
+	const handleRevert = useCallback(() => {
+		switch (sectionId) {
+			case "routing":
+				setLocalValues({...config.routing});
+				break;
+			case "tuning":
+				setLocalValues({...config.tuning});
+				break;
+			case "compaction":
+				setLocalValues({...config.compaction});
+				break;
+			case "cortex":
+				setLocalValues({...config.cortex});
+				break;
+			case "coalesce":
+				setLocalValues({...config.coalesce});
+				break;
+			case "memory":
+				setLocalValues({...config.memory_persistence});
+				break;
+			case "browser":
+				setLocalValues({...config.browser});
+				break;
+			case "sandbox":
+				setLocalValues({
+					mode: sandbox.mode,
+					writable_paths: sandbox.writable_paths,
+				});
+				break;
+			case "projects":
+				setLocalValues({...config.projects});
+				break;
+		}
+		setLocalDirty(false);
+	}, [config, sectionId]);
+
+	useEffect(() => {
+		saveHandlerRef.current.save = handleSave;
+		saveHandlerRef.current.revert = handleRevert;
+		return () => {
+			saveHandlerRef.current.save = undefined;
+			saveHandlerRef.current.revert = undefined;
+		};
+	}, [handleSave, handleRevert]);
+
+	const renderFields = () => {
+		switch (sectionId) {
+			case "routing": {
+				const modelSlots: Array<{
+					key: "channel" | "branch" | "worker" | "compactor" | "cortex" | "voice";
+					label: string;
+					description: string;
+				}> = [
+					{
+						key: "channel",
+						label: "Channel Model",
+						description: "Model for user-facing channels",
+					},
+					{
+						key: "branch",
+						label: "Branch Model",
+						description: "Model for thinking branches",
+					},
+					{
+						key: "worker",
+						label: "Worker Model",
+						description: "Model for task workers",
+					},
+					{
+						key: "compactor",
+						label: "Compactor Model",
+						description: "Model for summarization",
+					},
+					{
+						key: "cortex",
+						label: "Cortex Model",
+						description: "Model for system observation",
+					},
+					{
+						key: "voice",
+						label: "Voice Model",
+						description: "Model for transcribing audio attachments",
+					},
+				];
+				return (
+					<div className="grid gap-4">
+						{modelSlots.map(({key, label, description}) => {
+							const modelValue = localValues[key] ?? "";
+							const thinkingKey =
+								key === "voice" ? null : (`${key}_thinking_effort` as const);
+							return (
+								<div key={key} className="flex flex-col gap-2">
+									<ModelSelect
+										label={label}
+										description={description}
+										value={modelValue}
+										onChange={(v) => handleChange(key, v)}
+										capability={
+											key === "voice" ? "voice_transcription" : undefined
+										}
+									/>
+									{thinkingKey && supportsAdaptiveThinking(modelValue) && (
+										<div className="ml-4 flex flex-col gap-1">
+											<label className="text-xs font-medium text-ink-dull">
+												Thinking Effort
+											</label>
+											<SelectRoot
+												value={localValues[thinkingKey] ?? "auto"}
+												onValueChange={(value) =>
+													handleChange(thinkingKey, value)
+												}
+											>
+												<SelectTrigger className="border-app-line/50 bg-app-dark-box/30">
+													<SelectValue />
+												</SelectTrigger>
+												<SelectContent>
+													<SelectItem value="auto">Auto</SelectItem>
+													<SelectItem value="max">Max</SelectItem>
+													<SelectItem value="high">High</SelectItem>
+													<SelectItem value="medium">Medium</SelectItem>
+													<SelectItem value="low">Low</SelectItem>
+												</SelectContent>
+											</SelectRoot>
+										</div>
+									)}
+								</div>
+							);
+						})}
+						<NumberStepper
+							label="Rate Limit Cooldown"
+							description="Seconds to deprioritize rate-limited models"
+							value={localValues.rate_limit_cooldown_secs ?? 0}
+							onChange={(v) => handleChange("rate_limit_cooldown_secs", v)}
+							min={0}
+							suffix="s"
+						/>
+					</div>
+				);
+			}
+			case "tuning":
+				return (
+					<div className="grid gap-4">
+						<NumberStepper
+							label="Max Concurrent Branches"
+							description="Maximum branches per channel"
+							value={localValues.max_concurrent_branches as number}
+							onChange={(v) => handleChange("max_concurrent_branches", v)}
+							min={1}
+							max={20}
+						/>
+						<NumberStepper
+							label="Max Concurrent Workers"
+							description="Maximum workers per channel"
+							value={localValues.max_concurrent_workers as number}
+							onChange={(v) => handleChange("max_concurrent_workers", v)}
+							min={1}
+							max={20}
+						/>
+						<NumberStepper
+							label="Max Turns"
+							description="Max LLM turns per channel message"
+							value={localValues.max_turns as number}
+							onChange={(v) => handleChange("max_turns", v)}
+							min={1}
+							max={50}
+						/>
+						<NumberStepper
+							label="Branch Max Turns"
+							description="Max turns for thinking branches"
+							value={localValues.branch_max_turns as number}
+							onChange={(v) => handleChange("branch_max_turns", v)}
+							min={1}
+							max={100}
+						/>
+						<NumberStepper
+							label="Context Window"
+							description="Context window size in tokens"
+							value={localValues.context_window as number}
+							onChange={(v) => handleChange("context_window", v)}
+							min={1000}
+							step={1000}
+							suffix=" tokens"
+						/>
+						<NumberStepper
+							label="History Backfill"
+							description="Messages to fetch on new channel"
+							value={localValues.history_backfill_count as number}
+							onChange={(v) => handleChange("history_backfill_count", v)}
+							min={0}
+							max={500}
+							suffix=" messages"
+						/>
+					</div>
+				);
+			case "compaction":
+				return (
+					<div className="grid gap-4">
+						<NumberStepper
+							label="Background Threshold"
+							description="Start background summarization (fraction of context window)"
+							value={localValues.background_threshold as number}
+							onChange={(v) => handleChange("background_threshold", v)}
+							min={0}
+							max={1}
+							step={0.01}
+						/>
+						<NumberStepper
+							label="Aggressive Threshold"
+							description="Start aggressive summarization"
+							value={localValues.aggressive_threshold as number}
+							onChange={(v) => handleChange("aggressive_threshold", v)}
+							min={0}
+							max={1}
+							step={0.01}
+						/>
+						<NumberStepper
+							label="Emergency Threshold"
+							description="Emergency truncation (no LLM, drop oldest 50%)"
+							value={localValues.emergency_threshold as number}
+							onChange={(v) => handleChange("emergency_threshold", v)}
+							min={0}
+							max={1}
+							step={0.01}
+						/>
+					</div>
+				);
+			case "cortex":
+				return (
+					<div className="grid gap-4">
+						<NumberStepper
+							label="Tick Interval"
+							description="How often the cortex checks system state"
+							value={localValues.tick_interval_secs as number}
+							onChange={(v) => handleChange("tick_interval_secs", v)}
+							min={1}
+							suffix="s"
+						/>
+						<NumberStepper
+							label="Worker Timeout"
+							description="Worker timeout before cancellation"
+							value={localValues.worker_timeout_secs as number}
+							onChange={(v) => handleChange("worker_timeout_secs", v)}
+							min={10}
+							suffix="s"
+						/>
+						<NumberStepper
+							label="Branch Timeout"
+							description="Branch timeout before cancellation"
+							value={localValues.branch_timeout_secs as number}
+							onChange={(v) => handleChange("branch_timeout_secs", v)}
+							min={5}
+							suffix="s"
+						/>
+						<NumberStepper
+							label="Circuit Breaker"
+							description="Consecutive failures before auto-disable"
+							value={localValues.circuit_breaker_threshold as number}
+							onChange={(v) => handleChange("circuit_breaker_threshold", v)}
+							min={1}
+							max={10}
+						/>
+						<NumberStepper
+							label="Bulletin Interval"
+							description="Seconds between memory bulletin refreshes"
+							value={localValues.bulletin_interval_secs as number}
+							onChange={(v) => handleChange("bulletin_interval_secs", v)}
+							min={60}
+							suffix="s"
+						/>
+						<NumberStepper
+							label="Bulletin Max Words"
+							description="Target word count for memory bulletin"
+							value={localValues.bulletin_max_words as number}
+							onChange={(v) => handleChange("bulletin_max_words", v)}
+							min={100}
+							max={5000}
+							suffix=" words"
+						/>
+						<NumberStepper
+							label="Bulletin Max Turns"
+							description="Max LLM turns for bulletin generation"
+							value={localValues.bulletin_max_turns as number}
+							onChange={(v) => handleChange("bulletin_max_turns", v)}
+							min={5}
+							max={50}
+						/>
+					</div>
+				);
+			case "coalesce":
+				return (
+					<div className="grid gap-4">
+						<ConfigToggleField
+							label="Enabled"
+							description="Enable message coalescing for multi-user channels"
+							value={localValues.enabled as boolean}
+							onChange={(v) => handleChange("enabled", v)}
+						/>
+						<NumberStepper
+							label="Debounce"
+							description="Initial debounce window after first message"
+							value={localValues.debounce_ms as number}
+							onChange={(v) => handleChange("debounce_ms", v)}
+							min={100}
+							max={10000}
+							suffix="ms"
+						/>
+						<NumberStepper
+							label="Max Wait"
+							description="Maximum time to wait before flushing"
+							value={localValues.max_wait_ms as number}
+							onChange={(v) => handleChange("max_wait_ms", v)}
+							min={500}
+							max={30000}
+							suffix="ms"
+						/>
+						<NumberStepper
+							label="Min Messages"
+							description="Min messages to trigger coalesce mode"
+							value={localValues.min_messages as number}
+							onChange={(v) => handleChange("min_messages", v)}
+							min={1}
+							max={10}
+						/>
+						<ConfigToggleField
+							label="Multi-User Only"
+							description="Apply only to multi-user conversations (skip for DMs)"
+							value={localValues.multi_user_only as boolean}
+							onChange={(v) => handleChange("multi_user_only", v)}
+						/>
+					</div>
+				);
+			case "memory":
+				return (
+					<div className="grid gap-4">
+						<ConfigToggleField
+							label="Enabled"
+							description="Enable automatic memory persistence branches"
+							value={localValues.enabled as boolean}
+							onChange={(v) => handleChange("enabled", v)}
+						/>
+						<NumberStepper
+							label="Message Interval"
+							description="Number of user messages between automatic saves"
+							value={localValues.message_interval as number}
+							onChange={(v) => handleChange("message_interval", v)}
+							min={1}
+							max={200}
+							suffix=" messages"
+						/>
+					</div>
+				);
+			case "browser":
+				return (
+					<div className="grid gap-4">
+						<ConfigToggleField
+							label="Enabled"
+							description="Enable browser automation tools for workers"
+							value={localValues.enabled as boolean}
+							onChange={(v) => handleChange("enabled", v)}
+						/>
+						<ConfigToggleField
+							label="Headless"
+							description="Run Chrome in headless mode"
+							value={localValues.headless as boolean}
+							onChange={(v) => handleChange("headless", v)}
+						/>
+						<ConfigToggleField
+							label="JavaScript Evaluation"
+							description="Allow JavaScript evaluation via browser tool"
+							value={localValues.evaluate_enabled as boolean}
+							onChange={(v) => handleChange("evaluate_enabled", v)}
+						/>
+						<ConfigToggleField
+							label="Persist Session"
+							description="Keep the browser alive across worker lifetimes. Cookies, tabs, and login sessions survive between tasks. Requires agent restart to take effect."
+							value={localValues.persist_session as boolean}
+							onChange={(v) => handleChange("persist_session", v)}
+						/>
+						<div className="flex flex-col gap-1.5">
+							<label className="text-sm font-medium text-ink">Close Policy</label>
+							<p className="text-tiny text-ink-faint">
+								What happens when a worker calls &quot;close&quot; or finishes.
+							</p>
+							<SelectRoot
+								value={localValues.close_policy as string}
+								onValueChange={(v) => handleChange("close_policy", v)}
+							>
+								<SelectTrigger className="border-app-line/50 bg-app-dark-box/30">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value="close_browser">Close Browser</SelectItem>
+									<SelectItem value="close_tabs">Close Tabs</SelectItem>
+									<SelectItem value="detach">Detach</SelectItem>
+								</SelectContent>
+							</SelectRoot>
+						</div>
+					</div>
+				);
+			case "sandbox":
+				return (
+					<div className="grid gap-4">
+						<div className="flex flex-col gap-1.5">
+							<label className="text-sm font-medium text-ink">Mode</label>
+							<p className="text-tiny text-ink-faint">
+								Kernel-enforced filesystem containment for shell subprocesses.
+							</p>
+							<SelectRoot
+								value={localValues.mode as string}
+								onValueChange={(v) => handleChange("mode", v)}
+							>
+								<SelectTrigger className="border-app-line/50 bg-app-dark-box/30">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value="enabled">Enabled</SelectItem>
+									<SelectItem value="disabled">Disabled</SelectItem>
+								</SelectContent>
+							</SelectRoot>
+						</div>
+						<div className="flex flex-col gap-1.5">
+							<label className="text-sm font-medium text-ink">
+								Extra Allowed Paths
+							</label>
+							<p className="text-tiny text-ink-faint">
+								Additional directories workers can read and write beyond the
+								workspace. The workspace is always accessible. Press Enter to
+								add a path.
+							</p>
+							<TagInput
+								value={(localValues.writable_paths as string[]) ?? []}
+								onChange={(paths) => handleChange("writable_paths", paths)}
+								placeholder="/home/user/projects/myapp"
+							/>
+						</div>
+					</div>
+				);
+			case "projects":
+				return (
+					<div className="grid gap-4">
+						<ConfigToggleField
+							label="Use Worktrees"
+							description="Enable git worktree support for parallel feature branches within projects."
+							value={localValues.use_worktrees as boolean}
+							onChange={(v) => handleChange("use_worktrees", v)}
+						/>
+						<div className="flex flex-col gap-1.5">
+							<label className="text-sm font-medium text-ink">
+								Worktree Name Template
+							</label>
+							<p className="text-tiny text-ink-faint">
+								Template for naming new worktrees. Use{" "}
+								<code className="text-ink-dull">{"{branch}"}</code> for the
+								branch name.
+							</p>
+							<Input
+								value={localValues.worktree_name_template as string}
+								onChange={(e) =>
+									handleChange("worktree_name_template", e.target.value)
+								}
+								placeholder="{branch}"
+								className="border-app-line/50 bg-app-dark-box/30"
+							/>
+						</div>
+						<ConfigToggleField
+							label="Auto-Create Worktrees"
+							description="Automatically create a worktree when spawning a worker on a new branch."
+							value={localValues.auto_create_worktrees as boolean}
+							onChange={(v) => handleChange("auto_create_worktrees", v)}
+						/>
+						<ConfigToggleField
+							label="Auto-Discover Repos"
+							description="Scan the project root for git repositories when a project is created."
+							value={localValues.auto_discover_repos as boolean}
+							onChange={(v) => handleChange("auto_discover_repos", v)}
+						/>
+						<ConfigToggleField
+							label="Auto-Discover Worktrees"
+							description="Scan discovered repos for existing git worktrees on project creation."
+							value={localValues.auto_discover_worktrees as boolean}
+							onChange={(v) => handleChange("auto_discover_worktrees", v)}
+						/>
+						<NumberStepper
+							label="Disk Usage Warning"
+							description={`Warn when total project disk usage exceeds this threshold (${Math.round((localValues.disk_usage_warning_threshold as number) / 1073741824)} GB)`}
+							value={localValues.disk_usage_warning_threshold as number}
+							onChange={(v) => handleChange("disk_usage_warning_threshold", v)}
+							min={0}
+							step={1073741824}
+						/>
+					</div>
+				);
+			default:
+				return null;
+		}
+	};
+
+	return (
+		<>
+			<div className="flex items-center justify-between border-b border-app-line/50 bg-app-dark-box/20 px-5 py-2.5">
+				<div className="flex items-center gap-3">
+					<h3 className="text-sm font-medium text-ink">{label}</h3>
+					<span className="text-tiny text-ink-faint">{description}</span>
+				</div>
+				{localDirty ? (
+					<span className="text-tiny text-amber-400">Unsaved changes</span>
+				) : (
+					<span className="text-tiny text-ink-faint/50">
+						Changes saved to config.toml
+					</span>
+				)}
+			</div>
+			<div className="flex-1 overflow-y-auto px-8 py-8">
+				<div className="mb-6 rounded-lg border border-app-line/30 bg-app-dark-box/20 px-5 py-4">
+					<p className="text-sm leading-relaxed text-ink-dull">{detail}</p>
+				</div>
+				{renderFields()}
+			</div>
+		</>
+	);
+}
+
+function ConfigToggleField({
+	label,
+	description,
+	value,
+	onChange,
+}: {
+	label: string;
+	description: string;
+	value: boolean;
+	onChange: (value: boolean) => void;
+}) {
+	return (
+		<div className="flex items-center justify-between py-2">
+			<div className="flex flex-col gap-0.5">
+				<label className="text-sm font-medium text-ink">{label}</label>
+				<p className="text-tiny text-ink-faint">{description}</p>
+			</div>
+			<Switch checked={value} onCheckedChange={onChange} size="lg" />
+		</div>
+	);
+}
diff --git a/interface/src/components/agent-config/ConfigSidebar.tsx b/interface/src/components/agent-config/ConfigSidebar.tsx
new file mode 100644
index 000000000..6eebdf316
--- /dev/null
+++ b/interface/src/components/agent-config/ConfigSidebar.tsx
@@ -0,0 +1,95 @@
+import {SettingSidebarButton} from "@/ui/SettingSidebarButton";
+import {SECTIONS} from "./constants";
+import {getIdentityField} from "./utils";
+import type {SectionId} from "./types";
+
+interface ConfigSidebarProps {
+	activeSection: SectionId;
+	onSectionChange: (section: SectionId) => void;
+	identityData: {soul: string | null; identity: string | null; role: string | null};
+}
+
+export function ConfigSidebar({
+	activeSection,
+	onSectionChange,
+	identityData,
+}: ConfigSidebarProps) {
+	return (
+		<div className="flex w-52 flex-shrink-0 flex-col border-r border-app-line/50 bg-app-dark-box/20 overflow-y-auto">
+			{/* General Group */}
+			<div className="flex flex-col gap-0.5 px-2 pt-3">
+				{SECTIONS.filter((s) => s.group === "general").map((section) => (
+					<SettingSidebarButton
+						key={section.id}
+						onClick={() => onSectionChange(section.id)}
+						active={activeSection === section.id}
+					>
+						<span className="flex-1">{section.label}</span>
+					</SettingSidebarButton>
+				))}
+			</div>
+
+			{/* Identity Group */}
+			<div className="px-3 pb-1 pt-4">
+				<span className="text-tiny font-medium uppercase tracking-wider text-ink-faint">
+					Identity
+				</span>
+			</div>
+			<div className="flex flex-col gap-0.5 px-2">
+				{SECTIONS.filter((s) => s.group === "identity").map((section) => {
+					const hasContent = !!getIdentityField(identityData, section.id)?.trim();
+					return (
+						<SettingSidebarButton
+							key={section.id}
+							onClick={() => onSectionChange(section.id)}
+							active={activeSection === section.id}
+						>
+							<span className="flex-1">{section.label}</span>
+							{!hasContent && (
+								<span className="rounded bg-amber-500/10 px-1 py-0.5 text-tiny text-amber-400/70">
+									empty
+								</span>
+							)}
+						</SettingSidebarButton>
+					);
+				})}
+			</div>
+
+			{/* Config Group */}
+			<div className="px-3 pb-1 pt-4 mt-2">
+				<span className="text-tiny font-medium uppercase tracking-wider text-ink-faint">
+					Configuration
+				</span>
+			</div>
+			<div className="flex flex-col gap-0.5 px-2">
+				{SECTIONS.filter((s) => s.group === "config").map((section) => (
+					<SettingSidebarButton
+						key={section.id}
+						onClick={() => onSectionChange(section.id)}
+						active={activeSection === section.id}
+					>
+						<span className="flex-1">{section.label}</span>
+					</SettingSidebarButton>
+				))}
+			</div>
+
+			{/* Data Group */}
+			<div className="px-3 pb-1 pt-4 mt-2">
+				<span className="text-tiny font-medium uppercase tracking-wider text-ink-faint">
+					Data
+				</span>
+			</div>
+			<div className="flex flex-col gap-0.5 px-2 pb-3">
+				{SECTIONS.filter((s) => s.group === "data").map((section) => (
+					<SettingSidebarButton
+						key={section.id}
+						onClick={() => onSectionChange(section.id)}
+						active={activeSection === section.id}
+					>
+						<span className="flex-1">{section.label}</span>
+					</SettingSidebarButton>
+				))}
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/components/agent-config/GeneralEditor.tsx b/interface/src/components/agent-config/GeneralEditor.tsx
new file mode 100644
index 000000000..fd22904ab
--- /dev/null
+++ b/interface/src/components/agent-config/GeneralEditor.tsx
@@ -0,0 +1,299 @@
+import {useCallback, useEffect, useState, useRef} from "react";
+import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
+import {cx} from "class-variance-authority";
+import {Button, Input} from "@spacedrive/primitives";
+import {api} from "@/api/client";
+import {ProfileAvatar, seedGradient} from "@/components/ProfileAvatar";
+import {GRADIENT_PRESETS} from "./constants";
+import type {GeneralEditorProps} from "./types";
+
+export function GeneralEditor({
+	agentId,
+	displayName,
+	role,
+	gradientStart,
+	gradientEnd,
+	detail,
+	onDirtyChange,
+	saveHandlerRef,
+	onSave,
+}: GeneralEditorProps) {
+	const queryClient = useQueryClient();
+	const [localDisplayName, setLocalDisplayName] = useState(displayName);
+	const [localRole, setLocalRole] = useState(role);
+	const [localGradientStart, setLocalGradientStart] = useState(gradientStart);
+	const [localGradientEnd, setLocalGradientEnd] = useState(gradientEnd);
+	const [localDirty, setLocalDirty] = useState(false);
+	const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
+	const fileInputRef = useRef<HTMLInputElement>(null);
+
+	const avatarUrl = api.agentAvatarUrl(agentId);
+	const {data: avatarExists} = useQuery({
+		queryKey: ["agentAvatar", agentId],
+		queryFn: async () => {
+			try {
+				const response = await fetch(avatarUrl, {method: "HEAD"});
+				return response.ok;
+			} catch {
+				return false;
+			}
+		},
+	});
+
+	const uploadAvatarMutation = useMutation({
+		mutationFn: (file: File) => api.uploadAvatar(agentId, file),
+		onSuccess: () => {
+			queryClient.invalidateQueries({queryKey: ["agentAvatar", agentId]});
+			queryClient.invalidateQueries({queryKey: ["agents"]});
+			queryClient.invalidateQueries({queryKey: ["topology"]});
+			setAvatarPreview(null);
+		},
+	});
+
+	const deleteAvatarMutation = useMutation({
+		mutationFn: () => api.deleteAvatar(agentId),
+		onSuccess: () => {
+			queryClient.invalidateQueries({queryKey: ["agentAvatar", agentId]});
+			queryClient.invalidateQueries({queryKey: ["agents"]});
+			queryClient.invalidateQueries({queryKey: ["topology"]});
+			setAvatarPreview(null);
+		},
+	});
+
+	useEffect(() => {
+		if (!localDirty) {
+			setLocalDisplayName(displayName);
+			setLocalRole(role);
+			setLocalGradientStart(gradientStart);
+			setLocalGradientEnd(gradientEnd);
+		}
+	}, [displayName, role, gradientStart, gradientEnd, localDirty]);
+
+	useEffect(() => {
+		onDirtyChange(localDirty);
+	}, [localDirty, onDirtyChange]);
+
+	const handleSave = useCallback(() => {
+		onSave({
+			display_name: localDisplayName,
+			role: localRole,
+			gradient_start: localGradientStart || undefined,
+			gradient_end: localGradientEnd || undefined,
+		});
+		setLocalDirty(false);
+	}, [onSave, localDisplayName, localRole, localGradientStart, localGradientEnd]);
+
+	const handleRevert = useCallback(() => {
+		setLocalDisplayName(displayName);
+		setLocalRole(role);
+		setLocalGradientStart(gradientStart);
+		setLocalGradientEnd(gradientEnd);
+		setLocalDirty(false);
+	}, [displayName, role, gradientStart, gradientEnd]);
+
+	useEffect(() => {
+		saveHandlerRef.current.save = handleSave;
+		saveHandlerRef.current.revert = handleRevert;
+		return () => {
+			saveHandlerRef.current.save = undefined;
+			saveHandlerRef.current.revert = undefined;
+		};
+	}, [handleSave, handleRevert]);
+
+	const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const file = event.target.files?.[0];
+		if (!file) return;
+		const reader = new FileReader();
+		reader.onload = () => setAvatarPreview(reader.result as string);
+		reader.readAsDataURL(file);
+		uploadAvatarMutation.mutate(file);
+	};
+
+	const [seedC1, seedC2] = seedGradient(agentId);
+	const previewC1 = localGradientStart || seedC1;
+	const previewC2 = localGradientEnd || seedC2;
+
+	return (
+		<>
+			<div className="flex items-center justify-between border-b border-app-line/50 bg-app-dark-box/20 px-5 py-2.5">
+				<div className="flex items-center gap-3">
+					<h3 className="text-sm font-medium text-ink">General</h3>
+					<span className="text-tiny text-ink-faint">Agent metadata</span>
+				</div>
+				{localDirty ? (
+					<span className="text-tiny text-amber-400">Unsaved changes</span>
+				) : (
+					<span className="text-tiny text-ink-faint/50">
+						Changes saved to config.toml
+					</span>
+				)}
+			</div>
+			<div className="flex-1 overflow-y-auto px-8 py-8">
+				<div className="mb-6 rounded-lg border border-app-line/30 bg-app-dark-box/20 px-5 py-4">
+					<p className="text-sm leading-relaxed text-ink-dull">{detail}</p>
+				</div>
+				<div className="grid gap-4">
+					<div className="flex flex-col gap-1.5">
+						<label className="text-sm font-medium text-ink">Agent ID</label>
+						<p className="text-tiny text-ink-faint">
+							The config key identifier. This cannot be changed.
+						</p>
+						<Input
+							value={agentId}
+							disabled
+							className="border-app-line/50 bg-app-dark-box/30 text-ink-faint"
+						/>
+					</div>
+					<div className="flex flex-col gap-1.5">
+						<label className="text-sm font-medium text-ink">Display Name</label>
+						<p className="text-tiny text-ink-faint">
+							Human-friendly name shown in the UI and messaging platforms.
+						</p>
+						<Input
+							value={localDisplayName}
+							onChange={(e) => {
+								setLocalDisplayName(e.target.value);
+								setLocalDirty(true);
+							}}
+							placeholder={agentId}
+						/>
+					</div>
+					<div className="flex flex-col gap-1.5">
+						<label className="text-sm font-medium text-ink">Role</label>
+						<p className="text-tiny text-ink-faint">
+							Describes the agent's purpose. Shown in the topology view and
+							agent listings.
+						</p>
+						<Input
+							value={localRole}
+							onChange={(e) => {
+								setLocalRole(e.target.value);
+								setLocalDirty(true);
+							}}
+							placeholder="e.g. Research Assistant, Code Reviewer"
+						/>
+					</div>
+
+					{/* Avatar */}
+					<div className="flex flex-col gap-1.5">
+						<label className="text-sm font-medium text-ink">Avatar</label>
+						<p className="text-tiny text-ink-faint">
+							Upload a custom image, or use the generated gradient avatar.
+						</p>
+						<div className="flex items-center gap-4">
+							<ProfileAvatar
+								seed={agentId}
+								name={localDisplayName || agentId}
+								size={64}
+								className="rounded-full shrink-0"
+								gradientStart={localGradientStart || undefined}
+								gradientEnd={localGradientEnd || undefined}
+								avatarUrl={
+									avatarPreview ??
+									(avatarExists ? `${avatarUrl}&t=${Date.now()}` : undefined)
+								}
+							/>
+							<div className="flex flex-col gap-2">
+								<div className="flex items-center gap-2">
+									<Button
+										variant="outline"
+										size="sm"
+										onClick={() => fileInputRef.current?.click()}
+									>
+										{avatarExists ? "Change Image" : "Upload Image"}
+									</Button>
+									{avatarExists && (
+										<Button
+											variant="bare"
+											size="sm"
+											onClick={() => deleteAvatarMutation.mutate()}
+											className="text-ink-faint hover:text-red-400"
+										>
+											Remove
+										</Button>
+									)}
+								</div>
+								<p className="text-tiny text-ink-faint/60">
+									PNG, JPEG, WebP, GIF, or SVG. Max 5 MB.
+								</p>
+							</div>
+							<input
+								ref={fileInputRef}
+								type="file"
+								accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml"
+								onChange={handleFileChange}
+								className="hidden"
+							/>
+						</div>
+					</div>
+
+					{/* Gradient Color */}
+					<div className="flex flex-col gap-1.5">
+						<label className="text-sm font-medium text-ink">Gradient</label>
+						<p className="text-tiny text-ink-faint">
+							Choose a gradient for the avatar and banner. Only used when no
+							image is uploaded.
+						</p>
+						<div className="flex flex-wrap gap-2">
+							<button
+								onClick={() => {
+									setLocalGradientStart("");
+									setLocalGradientEnd("");
+									setLocalDirty(true);
+								}}
+								className={cx(
+									"flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors",
+									!localGradientStart
+										? "border-accent bg-accent/10 text-ink"
+										: "border-app-line/50 text-ink-faint hover:border-app-line",
+								)}
+							>
+								<span
+									className="h-5 w-5 rounded-full shrink-0"
+									style={{
+										background: `linear-gradient(135deg, ${seedC1}, ${seedC2})`,
+									}}
+								/>
+								Auto
+							</button>
+							{GRADIENT_PRESETS.map((preset) => (
+								<button
+									key={preset.label}
+									onClick={() => {
+										setLocalGradientStart(preset.start);
+										setLocalGradientEnd(preset.end);
+										setLocalDirty(true);
+									}}
+									className={cx(
+										"flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors",
+										localGradientStart === preset.start &&
+											localGradientEnd === preset.end
+											? "border-accent bg-accent/10 text-ink"
+											: "border-app-line/50 text-ink-faint hover:border-app-line",
+									)}
+								>
+									<span
+										className="h-5 w-5 rounded-full shrink-0"
+										style={{
+											background: `linear-gradient(135deg, ${preset.start}, ${preset.end})`,
+										}}
+									/>
+									{preset.label}
+								</button>
+							))}
+						</div>
+						<div className="mt-2 flex items-center gap-3">
+							<span className="text-tiny text-ink-faint">Preview:</span>
+							<span
+								className="h-6 w-20 rounded"
+								style={{
+									background: `linear-gradient(135deg, ${previewC1}, ${previewC2})`,
+								}}
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		</>
+	);
+}
diff --git a/interface/src/components/agent-config/IdentityEditor.tsx b/interface/src/components/agent-config/IdentityEditor.tsx
new file mode 100644
index 000000000..e111aa979
--- /dev/null
+++ b/interface/src/components/agent-config/IdentityEditor.tsx
@@ -0,0 +1,131 @@
+import {useCallback, useEffect, useState} from "react";
+import {cx} from "class-variance-authority";
+import {TextArea} from "@spacedrive/primitives";
+import {Markdown} from "@/components/Markdown";
+import type {IdentityEditorProps} from "./types";
+
+export function IdentityEditor({
+	label,
+	description,
+	content,
+	onDirtyChange,
+	saveHandlerRef,
+	onSave,
+}: IdentityEditorProps) {
+	const [value, setValue] = useState(content ?? "");
+	const [localDirty, setLocalDirty] = useState(false);
+	const [mode, setMode] = useState<"edit" | "preview">("edit");
+
+	useEffect(() => {
+		if (!localDirty) {
+			setValue(content ?? "");
+		}
+	}, [content, localDirty]);
+
+	useEffect(() => {
+		onDirtyChange(localDirty);
+	}, [localDirty, onDirtyChange]);
+
+	const handleChange = useCallback(
+		(event: React.ChangeEvent<HTMLTextAreaElement>) => {
+			setValue(event.target.value);
+			setLocalDirty(true);
+		},
+		[],
+	);
+
+	const handleSave = useCallback(() => {
+		onSave(value);
+		setLocalDirty(false);
+	}, [onSave, value]);
+
+	const handleRevert = useCallback(() => {
+		setValue(content ?? "");
+		setLocalDirty(false);
+	}, [content]);
+
+	const handleKeyDown = useCallback(
+		(event: React.KeyboardEvent) => {
+			if ((event.metaKey || event.ctrlKey) && event.key === "s") {
+				event.preventDefault();
+				if (localDirty) handleSave();
+			}
+		},
+		[localDirty, handleSave],
+	);
+
+	useEffect(() => {
+		saveHandlerRef.current.save = handleSave;
+		saveHandlerRef.current.revert = handleRevert;
+		return () => {
+			saveHandlerRef.current.save = undefined;
+			saveHandlerRef.current.revert = undefined;
+		};
+	}, [handleSave, handleRevert]);
+
+	return (
+		<>
+			<div className="flex items-center justify-between border-b border-app-line/50 bg-app-dark-box/20 px-5 py-2.5">
+				<div className="flex items-center gap-3">
+					<h3 className="text-sm font-medium text-ink">{label}</h3>
+					<span className="rounded bg-app-dark-box px-1.5 py-0.5 font-mono text-tiny text-ink-faint">
+						{description}
+					</span>
+				</div>
+				<div className="flex items-center gap-3">
+					<div className="flex items-center rounded border border-app-line/50 text-tiny">
+						<button
+							onClick={() => setMode("edit")}
+							className={cx(
+								"px-2 py-0.5 rounded-l transition-colors",
+								mode === "edit"
+									? "bg-app-dark-box text-ink"
+									: "text-ink-faint hover:text-ink",
+							)}
+						>
+							Edit
+						</button>
+						<button
+							onClick={() => setMode("preview")}
+							className={cx(
+								"px-2 py-0.5 rounded-r transition-colors",
+								mode === "preview"
+									? "bg-app-dark-box text-ink"
+									: "text-ink-faint hover:text-ink",
+							)}
+						>
+							Preview
+						</button>
+					</div>
+					{localDirty ? (
+						<span className="text-tiny text-amber-400">Unsaved changes</span>
+					) : (
+						<span className="text-tiny text-ink-faint/50">Cmd+S to save</span>
+					)}
+				</div>
+			</div>
+			<div className="flex-1 overflow-y-auto p-4">
+				{mode === "edit" ? (
+					<TextArea
+						value={value}
+						onChange={handleChange}
+						onKeyDown={handleKeyDown}
+						placeholder={`Write ${label.toLowerCase()} content here...`}
+						className="h-full w-full resize-none border-transparent bg-app-dark-box/30 px-4 py-3 font-mono leading-relaxed placeholder:text-ink-faint/40"
+						spellCheck={false}
+					/>
+				) : (
+					<div className="prose-sm px-4 py-3">
+						{value ? (
+							<Markdown>{value}</Markdown>
+						) : (
+							<span className="text-ink-faint/40 text-sm">
+								Nothing to preview.
+							</span>
+						)}
+					</div>
+				)}
+			</div>
+		</>
+	);
+}
diff --git a/interface/src/components/agent-config/SaveBar.tsx b/interface/src/components/agent-config/SaveBar.tsx
new file mode 100644
index 000000000..8f65715b3
--- /dev/null
+++ b/interface/src/components/agent-config/SaveBar.tsx
@@ -0,0 +1,42 @@
+import {motion, AnimatePresence} from "framer-motion";
+import {Button} from "@spacedrive/primitives";
+
+interface SaveBarProps {
+	dirty: boolean;
+	saving: boolean;
+	onSave: () => void;
+	onRevert: () => void;
+}
+
+export function SaveBar({dirty, saving, onSave, onRevert}: SaveBarProps) {
+	return (
+		<AnimatePresence>
+			{dirty && (
+				<motion.div
+					initial={{y: 100}}
+					animate={{y: 0}}
+					exit={{y: 100}}
+					transition={{type: "spring", damping: 25, stiffness: 300}}
+					className="absolute bottom-4 right-4 flex items-center gap-4 rounded-lg border border-app-line/50 bg-app-dark-box px-4 py-3 shadow-lg"
+				>
+					<span className="text-sm text-ink-dull">
+						You have unsaved changes
+					</span>
+					<div className="flex items-center gap-2">
+						<Button onClick={onRevert} variant="gray" size="sm">
+							Revert
+						</Button>
+						<Button
+							onClick={onSave}
+							variant="accent"
+							size="sm"
+							disabled={saving}
+						>
+							Save Changes
+						</Button>
+					</div>
+				</motion.div>
+			)}
+		</AnimatePresence>
+	);
+}
diff --git a/interface/src/components/agent-config/constants.ts b/interface/src/components/agent-config/constants.ts
new file mode 100644
index 000000000..b72495c8c
--- /dev/null
+++ b/interface/src/components/agent-config/constants.ts
@@ -0,0 +1,134 @@
+import type {AgentConfigSection} from "./types";
+
+export const SECTIONS: AgentConfigSection[] = [
+	{
+		id: "general",
+		label: "General",
+		group: "general",
+		description: "Agent metadata",
+		detail:
+			"The agent's display name and role. The display name is shown in the UI and messaging platforms. The role describes the agent's purpose (e.g. Research Assistant, Code Reviewer).",
+	},
+	{
+		id: "soul",
+		label: "Soul",
+		group: "identity",
+		description: "SOUL.md",
+		detail:
+			"Defines the agent's personality, values, communication style, and behavioral boundaries. This is the core of who the agent is.",
+	},
+	{
+		id: "identity",
+		label: "Identity",
+		group: "identity",
+		description: "IDENTITY.md",
+		detail:
+			"The agent's name, nature, and purpose. How it introduces itself and what it understands its role to be.",
+	},
+	{
+		id: "role",
+		label: "Role",
+		group: "identity",
+		description: "ROLE.md",
+		detail:
+			"The agent's responsibilities, scope, expected outcomes, and escalation rules. Defines what the agent does and doesn't do.",
+	},
+	{
+		id: "routing",
+		label: "Model Routing",
+		group: "config",
+		description: "Which models each process uses",
+		detail:
+			"Controls which LLM model is used for each process type. Channels handle user-facing conversation, branches do thinking, workers execute tasks, the compactor summarizes context, cortex observes system state, and voice transcribes audio attachments before the channel turn.",
+	},
+	{
+		id: "tuning",
+		label: "Tuning",
+		group: "config",
+		description: "Turn limits, context window, branches",
+		detail:
+			"Core limits that control how much work the agent does per message. Max turns caps LLM iterations per channel message. Context window sets the token budget. Branch limits control parallel thinking.",
+	},
+	{
+		id: "compaction",
+		label: "Compaction",
+		group: "config",
+		description: "Context compaction thresholds",
+		detail:
+			"Thresholds that trigger context summarization as the conversation grows. Background kicks in early, aggressive compresses harder, and emergency truncates without LLM involvement. All values are fractions of the context window.",
+	},
+	{
+		id: "cortex",
+		label: "Cortex",
+		group: "config",
+		description: "System observer settings",
+		detail:
+			"The cortex monitors active processes and generates memory bulletins. Tick interval controls observation frequency. Timeouts determine when stuck workers or branches get cancelled. The circuit breaker auto-disables after consecutive failures.",
+	},
+	{
+		id: "coalesce",
+		label: "Coalesce",
+		group: "config",
+		description: "Message batching",
+		detail:
+			"When multiple messages arrive in quick succession, coalescing batches them into a single LLM turn. This prevents the agent from responding to each message individually in fast-moving conversations.",
+	},
+	{
+		id: "memory",
+		label: "Memory Persistence",
+		group: "config",
+		description: "Auto-save interval",
+		detail:
+			"Spawns a silent background branch at regular intervals to recall existing memories and save new ones from the recent conversation. Runs without blocking the channel.",
+	},
+	{
+		id: "browser",
+		label: "Browser",
+		group: "config",
+		description: "Chrome automation",
+		detail:
+			"Controls browser automation tools available to workers. When enabled, workers can navigate web pages, take screenshots, and interact with sites. JavaScript evaluation is a separate permission.",
+	},
+	{
+		id: "sandbox",
+		label: "Sandbox",
+		group: "config",
+		description: "Process containment",
+		detail:
+			"OS-level filesystem containment for shell tool subprocesses. When enabled, worker processes run inside a kernel-enforced sandbox (bubblewrap on Linux, sandbox-exec on macOS) with an allowlist-only filesystem — only system paths, the workspace, and explicitly configured extra paths are accessible.",
+	},
+	{
+		id: "projects",
+		label: "Projects",
+		group: "config",
+		description: "Workspace management",
+		detail:
+			"Controls how the agent manages project workspaces, git repos, and worktrees. Use worktrees for parallel feature branches, auto-discover to scan for repos on project creation, and set a disk usage warning threshold.",
+	},
+	{
+		id: "ingest",
+		label: "Ingest",
+		group: "data",
+		description: "File upload & processing",
+		detail:
+			"Upload documents to be chunked and processed into structured memories. Supported formats include PDF, text, markdown, JSON, CSV, YAML, TOML, HTML, and more.",
+	},
+];
+
+export const GRADIENT_PRESETS: {label: string; start: string; end: string}[] = [
+	{label: "Purple", start: "hsl(270, 70%, 55%)", end: "hsl(310, 60%, 45%)"},
+	{label: "Blue", start: "hsl(220, 70%, 55%)", end: "hsl(260, 60%, 45%)"},
+	{label: "Teal", start: "hsl(170, 70%, 45%)", end: "hsl(200, 60%, 40%)"},
+	{label: "Green", start: "hsl(140, 60%, 45%)", end: "hsl(170, 50%, 40%)"},
+	{label: "Orange", start: "hsl(25, 80%, 55%)", end: "hsl(45, 70%, 45%)"},
+	{label: "Red", start: "hsl(0, 70%, 55%)", end: "hsl(20, 60%, 45%)"},
+	{label: "Pink", start: "hsl(330, 70%, 55%)", end: "hsl(350, 60%, 45%)"},
+	{label: "Gold", start: "hsl(45, 80%, 55%)", end: "hsl(30, 70%, 40%)"},
+	{label: "Indigo", start: "hsl(240, 60%, 55%)", end: "hsl(280, 50%, 45%)"},
+	{label: "Slate", start: "hsl(220, 15%, 50%)", end: "hsl(220, 10%, 35%)"},
+];
+
+export const SANDBOX_DEFAULTS = {
+	mode: "enabled" as const,
+	writable_paths: [] as string[],
+};
diff --git a/interface/src/components/agent-config/index.ts b/interface/src/components/agent-config/index.ts
new file mode 100644
index 000000000..1ddf14c8b
--- /dev/null
+++ b/interface/src/components/agent-config/index.ts
@@ -0,0 +1,15 @@
+export {ConfigSidebar} from "./ConfigSidebar";
+export {GeneralEditor} from "./GeneralEditor";
+export {IdentityEditor} from "./IdentityEditor";
+export {ConfigSectionEditor} from "./ConfigSectionEditor";
+export {SaveBar} from "./SaveBar";
+export {SECTIONS} from "./constants";
+export {isIdentityField, getIdentityField} from "./utils";
+export type {
+	SectionId,
+	AgentConfigSection,
+	SaveHandlerRef,
+	GeneralEditorProps,
+	IdentityEditorProps,
+	ConfigSectionEditorProps,
+} from "./types";
diff --git a/interface/src/components/agent-config/types.ts b/interface/src/components/agent-config/types.ts
new file mode 100644
index 000000000..45aa01ce5
--- /dev/null
+++ b/interface/src/components/agent-config/types.ts
@@ -0,0 +1,67 @@
+import type {AgentConfigResponse, AgentConfigUpdateRequest} from "@/api/client";
+
+export type SectionId =
+	| "general"
+	| "soul"
+	| "identity"
+	| "role"
+	| "routing"
+	| "tuning"
+	| "compaction"
+	| "cortex"
+	| "coalesce"
+	| "memory"
+	| "browser"
+	| "sandbox"
+	| "projects"
+	| "ingest";
+
+export interface AgentConfigSection {
+	id: SectionId;
+	label: string;
+	group: "general" | "identity" | "config" | "data";
+	description: string;
+	detail: string;
+}
+
+export interface SaveHandlerRef {
+	save?: () => void;
+	revert?: () => void;
+}
+
+export interface GeneralEditorProps {
+	agentId: string;
+	displayName: string;
+	role: string;
+	gradientStart: string;
+	gradientEnd: string;
+	detail: string;
+	onDirtyChange: (dirty: boolean) => void;
+	saveHandlerRef: React.MutableRefObject<SaveHandlerRef>;
+	onSave: (update: {
+		display_name?: string;
+		role?: string;
+		gradient_start?: string;
+		gradient_end?: string;
+	}) => void;
+}
+
+export interface IdentityEditorProps {
+	label: string;
+	description: string;
+	content: string | null;
+	onDirtyChange: (dirty: boolean) => void;
+	saveHandlerRef: React.MutableRefObject<SaveHandlerRef>;
+	onSave: (value: string) => void;
+}
+
+export interface ConfigSectionEditorProps {
+	sectionId: SectionId;
+	label: string;
+	description: string;
+	detail: string;
+	config: AgentConfigResponse;
+	onDirtyChange: (dirty: boolean) => void;
+	saveHandlerRef: React.MutableRefObject<SaveHandlerRef>;
+	onSave: (update: Partial<AgentConfigUpdateRequest>) => void;
+}
diff --git a/interface/src/components/agent-config/utils.ts b/interface/src/components/agent-config/utils.ts
new file mode 100644
index 000000000..44e34360e
--- /dev/null
+++ b/interface/src/components/agent-config/utils.ts
@@ -0,0 +1,27 @@
+import type {SectionId} from "./types";
+
+export function supportsAdaptiveThinking(modelId: string): boolean {
+	const id = modelId.toLowerCase();
+	return (
+		id.includes("opus-4-6") ||
+		id.includes("opus-4.6") ||
+		id.includes("sonnet-4-6") ||
+		id.includes("sonnet-4.6")
+	);
+}
+
+export const isIdentityField = (
+	id: SectionId,
+): id is "soul" | "identity" | "role" => {
+	return id === "soul" || id === "identity" || id === "role";
+};
+
+export const getIdentityField = (
+	data: {soul: string | null; identity: string | null; role: string | null},
+	field: SectionId,
+): string | null => {
+	if (isIdentityField(field)) {
+		return data[field];
+	}
+	return null;
+};
diff --git a/interface/src/components/dashboard/ActionItemsCard.tsx b/interface/src/components/dashboard/ActionItemsCard.tsx
new file mode 100644
index 000000000..ae31cb1a7
--- /dev/null
+++ b/interface/src/components/dashboard/ActionItemsCard.tsx
@@ -0,0 +1,155 @@
+import {useState} from "react";
+import {
+	CheckCircle,
+	Clock,
+	WarningCircle,
+	XCircle,
+} from "@phosphor-icons/react";
+import {
+	Card,
+	CardHeader,
+	CardContent,
+	Badge,
+	Button,
+} from "@spacedrive/primitives";
+import {useNotifications} from "@/hooks/useNotifications";
+import type {NotificationItem, NotificationKind} from "@/api/client";
+import {ApprovalModal} from "@/components/ApprovalModal";
+
+const TYPE_CONFIG: Record<
+	NotificationKind,
+	{
+		icon: React.ElementType;
+		iconClass: string;
+		badgeVariant: "warning" | "destructive" | "secondary";
+		label: string;
+		action: string;
+	}
+> = {
+	task_approval: {
+		icon: Clock,
+		iconClass: "text-ink-faint",
+		badgeVariant: "warning",
+		label: "Review",
+		action: "Review",
+	},
+	worker_failed: {
+		icon: XCircle,
+		iconClass: "text-status-error",
+		badgeVariant: "destructive",
+		label: "Failed",
+		action: "View",
+	},
+	cortex_observation: {
+		icon: WarningCircle,
+		iconClass: "text-status-warning",
+		badgeVariant: "secondary",
+		label: "Alert",
+		action: "Review",
+	},
+};
+
+function timeAgo(isoString: string): string {
+	const diff = Date.now() - new Date(isoString).getTime();
+	const mins = Math.floor(diff / 60_000);
+	if (mins < 1) return "just now";
+	if (mins < 60) return `${mins}m ago`;
+	const hours = Math.floor(mins / 60);
+	if (hours < 24) return `${hours}h ago`;
+	return `${Math.floor(hours / 24)}d ago`;
+}
+
+export function ActionItemsCard() {
+	const {notifications} = useNotifications("unread");
+	const [activeNotification, setActiveNotification] =
+		useState<NotificationItem | null>(null);
+	const [atBottom, setAtBottom] = useState(false);
+
+	const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+		const el = e.currentTarget;
+		setAtBottom(el.scrollHeight - el.scrollTop - el.clientHeight < 4);
+	};
+
+	return (
+		<Card variant="dark" className="flex h-full min-h-0 flex-col">
+			<CardHeader className="flex-row items-center justify-between p-4 pb-3">
+				<div className="flex items-center gap-2">
+					<h2 className="font-plex text-sm font-medium text-ink-dull">Inbox</h2>
+					{notifications.length > 0 && (
+						<Badge variant="default" size="sm">
+							{notifications.length}
+						</Badge>
+					)}
+				</div>
+			</CardHeader>
+
+			<div className="relative min-h-0 flex-1">
+				<div
+					className={`pointer-events-none absolute inset-x-0 bottom-0 z-10 h-8 rounded-b-2xl bg-gradient-to-t from-app-dark-box to-transparent transition-opacity duration-150 ${atBottom || notifications.length === 0 ? "opacity-0" : "opacity-100"}`}
+				/>
+				<CardContent
+					className="flex h-full flex-col gap-2 overflow-y-auto px-6 pb-4 pt-0"
+					onScroll={handleScroll}
+				>
+					{notifications.length === 0 ? (
+						<div className="flex flex-1 items-center justify-center">
+							<div className="text-center">
+								<CheckCircle className="mx-auto mb-2 h-8 w-8 text-ink-faint" />
+								<p className="text-sm text-ink-faint">All caught up</p>
+							</div>
+						</div>
+					) : (
+						notifications.map((item) => {
+							const kind = (
+								item.kind in TYPE_CONFIG ? item.kind : "cortex_observation"
+							) as NotificationKind;
+							const config = TYPE_CONFIG[kind];
+							const Icon = config.icon;
+							return (
+								<div
+									key={item.id}
+									className="flex items-start gap-3 rounded-lg border border-app-line/50 bg-app-hover/20 px-3 py-2.5 transition-colors hover:bg-app-hover/40"
+								>
+									<Icon
+										weight="fill"
+										className={`mt-0.5 h-4 w-4 shrink-0 ${config.iconClass}`}
+									/>
+									<div className="min-w-0 flex-1">
+										<p className="truncate text-sm text-ink">{item.title}</p>
+										<div className="mt-1 flex items-center gap-2">
+											<Badge size="sm">{config.label}</Badge>
+											{item.agent_id && (
+												<span className="text-tiny text-ink-faint">
+													{item.agent_id}
+												</span>
+											)}
+											{item.agent_id && (
+												<span className="text-tiny text-ink-faint/50">·</span>
+											)}
+											<span className="text-tiny text-ink-faint">
+												{timeAgo(item.created_at)}
+											</span>
+										</div>
+									</div>
+									<Button
+										size="xs"
+										variant="subtle"
+										className="shrink-0"
+										onClick={() => setActiveNotification(item)}
+									>
+										{config.action}
+									</Button>
+								</div>
+							);
+						})
+					)}
+				</CardContent>
+			</div>
+
+			<ApprovalModal
+				notification={activeNotification}
+				onClose={() => setActiveNotification(null)}
+			/>
+		</Card>
+	);
+}
diff --git a/interface/src/components/dashboard/ActivityCard.tsx b/interface/src/components/dashboard/ActivityCard.tsx
new file mode 100644
index 000000000..64955a246
--- /dev/null
+++ b/interface/src/components/dashboard/ActivityCard.tsx
@@ -0,0 +1,237 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Card, CardHeader, CardContent, Button } from "@spacedrive/primitives";
+import { api, type ActivityDay } from "@/api/client";
+import {
+	ResponsiveContainer,
+	AreaChart,
+	Area,
+	XAxis,
+	YAxis,
+	CartesianGrid,
+	Tooltip,
+} from "recharts";
+
+const CHART_COLORS = {
+	grid: "#2a2a3a",
+	axis: "#4a4a5a",
+	tick: "#8a8a9a",
+	tooltip: {
+		bg: "#1a1a2e",
+		border: "#2a2a3a",
+		text: "#e0e0e0",
+	},
+};
+
+const SERIES = [
+	{ key: "messages", label: "Messages", color: "#3b82f6" },
+	{ key: "branches", label: "Branches", color: "#8b5cf6" },
+	{ key: "workers", label: "Workers", color: "#f59e0b" },
+	{ key: "cron", label: "Cron", color: "#10b981" },
+] as const;
+
+type Period = "7d" | "30d" | "90d";
+
+const PERIOD_DAYS: Record<Period, number> = {
+	"7d": 7,
+	"30d": 30,
+	"90d": 90,
+};
+
+function sinceDate(period: Period): string {
+	const d = new Date();
+	d.setDate(d.getDate() - PERIOD_DAYS[period]);
+	return d.toISOString();
+}
+
+function formatCost(usd: number): string {
+	if (usd >= 1) return `$${usd.toFixed(2)}`;
+	if (usd >= 0.01) return `$${usd.toFixed(3)}`;
+	return `$${usd.toFixed(4)}`;
+}
+
+function formatNumber(n: number): string {
+	if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+	if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+	return String(n);
+}
+
+export function ActivityCard() {
+	const [period, setPeriod] = useState<Period>("30d");
+
+	const { data, isLoading } = useQuery({
+		queryKey: ["activity", period],
+		queryFn: () => api.activity({ since: sinceDate(period) }),
+		staleTime: 60_000,
+	});
+
+	const chartData = (data?.daily ?? []).map((d: ActivityDay) => ({
+		date: new Date(d.date).toLocaleDateString("en-US", {
+			month: "short",
+			day: "numeric",
+		}),
+		messages: d.messages,
+		branches: d.branches,
+		workers: d.workers,
+		cron: d.cron,
+	}));
+
+	const totals = data?.totals;
+	const hasData = totals && (totals.messages + totals.branches + totals.workers + totals.cron) > 0;
+
+	return (
+		<Card variant="dark" className="flex flex-col">
+			<CardHeader className="flex-row items-center justify-between p-4 pb-3">
+				<h2 className="font-plex text-sm font-medium text-ink-dull">
+					Instance Activity
+				</h2>
+				<div className="flex items-center gap-0.5">
+					{(["7d", "30d", "90d"] as Period[]).map((p) => (
+						<Button
+							key={p}
+							size="xs"
+							variant={period === p ? "gray" : "subtle"}
+							onClick={() => setPeriod(p)}
+						>
+							{p}
+						</Button>
+					))}
+				</div>
+			</CardHeader>
+
+			<CardContent className="flex flex-1 flex-col px-4 pb-4 pt-0">
+				{isLoading || !totals ? (
+					<div className="flex h-48 items-center justify-center">
+						<span className="text-sm text-ink-faint">Loading...</span>
+					</div>
+				) : !hasData ? (
+					<div className="flex h-48 items-center justify-center">
+						<p className="text-sm text-ink-faint">
+							No activity recorded in this period.
+						</p>
+					</div>
+				) : (
+					<>
+						{/* Chart */}
+						<div className="h-48 min-h-[192px]">
+							<ResponsiveContainer
+								width="100%"
+								height="100%"
+								minWidth={100}
+								minHeight={100}
+							>
+								<AreaChart
+									data={chartData}
+									margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+								>
+									<defs>
+										{SERIES.map((s) => (
+											<linearGradient
+												key={s.key}
+												id={`activity-${s.key}`}
+												x1="0"
+												y1="0"
+												x2="0"
+												y2="1"
+											>
+												<stop
+													offset="5%"
+													stopColor={s.color}
+													stopOpacity={0.3}
+												/>
+												<stop
+													offset="95%"
+													stopColor={s.color}
+													stopOpacity={0.02}
+												/>
+											</linearGradient>
+										))}
+									</defs>
+									<CartesianGrid
+										stroke={CHART_COLORS.grid}
+										strokeDasharray="3 3"
+										vertical={false}
+									/>
+									<XAxis
+										dataKey="date"
+										stroke={CHART_COLORS.axis}
+										tick={{ fill: CHART_COLORS.tick, fontSize: 11 }}
+										tickLine={false}
+										axisLine={{ stroke: CHART_COLORS.grid }}
+										minTickGap={30}
+									/>
+									<YAxis
+										stroke={CHART_COLORS.axis}
+										tick={{ fill: CHART_COLORS.tick, fontSize: 11 }}
+										tickLine={false}
+										axisLine={false}
+									/>
+									<Tooltip
+										contentStyle={{
+											backgroundColor: CHART_COLORS.tooltip.bg,
+											border: `1px solid ${CHART_COLORS.tooltip.border}`,
+											borderRadius: "6px",
+											fontSize: "12px",
+										}}
+										labelStyle={{ color: CHART_COLORS.tick }}
+										itemStyle={{ color: CHART_COLORS.tooltip.text }}
+										cursor={{ stroke: CHART_COLORS.axis }}
+									/>
+									{SERIES.map((s) => (
+										<Area
+											key={s.key}
+											type="monotone"
+											dataKey={s.key}
+											name={s.label}
+											stroke={s.color}
+											strokeWidth={2}
+											fill={`url(#activity-${s.key})`}
+											fillOpacity={1}
+											stackId="1"
+										/>
+									))}
+								</AreaChart>
+							</ResponsiveContainer>
+						</div>
+
+						{/* Summary row */}
+						<div className="mt-3 flex items-center gap-4 text-tiny">
+							{SERIES.map((s) => {
+								const val = totals[s.key as keyof typeof totals] as number;
+								if (val === 0) return null;
+								return (
+									<div key={s.key} className="flex items-center gap-1.5">
+										<span
+											className="inline-block h-2 w-2 rounded-full"
+											style={{ backgroundColor: s.color }}
+										/>
+										<span className="text-ink-faint">{s.label}</span>
+										<span className="tabular-nums text-ink-dull">
+											{formatNumber(val)}
+										</span>
+									</div>
+								);
+							})}
+							{totals.active_channels > 0 && (
+								<div className="flex items-center gap-1.5">
+									<span className="text-ink-faint">Channels</span>
+									<span className="tabular-nums text-ink-dull">
+										{totals.active_channels}
+									</span>
+								</div>
+							)}
+							{totals.tokens.cost_usd > 0 && (
+								<div className="ml-auto flex items-center gap-1.5">
+									<span className="text-ink-faint">Cost</span>
+									<span className="tabular-nums text-ink-dull">
+										{formatCost(totals.tokens.cost_usd)}
+									</span>
+								</div>
+							)}
+						</div>
+					</>
+				)}
+			</CardContent>
+		</Card>
+	);
+}
diff --git a/interface/src/components/dashboard/RecentActivityCard.tsx b/interface/src/components/dashboard/RecentActivityCard.tsx
new file mode 100644
index 000000000..c2cc9f05b
--- /dev/null
+++ b/interface/src/components/dashboard/RecentActivityCard.tsx
@@ -0,0 +1,195 @@
+import {useMemo, useState} from "react";
+import {useQuery} from "@tanstack/react-query";
+import {CheckSquare, Brain, Robot, Circle} from "@phosphor-icons/react";
+import {
+	Card,
+	CardHeader,
+	CardContent,
+	FilterButton,
+} from "@spacedrive/primitives";
+import {api, type TaskItem} from "@/api/client";
+
+type FilterType = "all" | "tasks" | "cortex" | "workers";
+
+interface ActivityItem {
+	id: string;
+	type: "task_created" | "task_completed" | "cortex" | "worker_done";
+	title: string;
+	agent?: string;
+	timestamp: number;
+}
+
+const TYPE_CONFIG: Record<
+	ActivityItem["type"],
+	{icon: React.ElementType; iconClass: string}
+> = {
+	task_created: {icon: Circle, iconClass: "text-blue-400"},
+	task_completed: {icon: CheckSquare, iconClass: "text-status-success"},
+	cortex: {icon: Brain, iconClass: "text-violet-400"},
+	worker_done: {icon: Robot, iconClass: "text-amber-400"},
+};
+
+const FILTERS: {key: FilterType; label: string}[] = [
+	{key: "all", label: "All"},
+	{key: "tasks", label: "Tasks"},
+	{key: "cortex", label: "Cortex"},
+	{key: "workers", label: "Workers"},
+];
+
+export function RecentActivityCard() {
+	const [filter, setFilter] = useState<FilterType>("all");
+
+	const {data: agentsData} = useQuery({
+		queryKey: ["agents"],
+		queryFn: () => api.agents(),
+		staleTime: 60_000,
+	});
+
+	const agentIds = useMemo(
+		() => (agentsData?.agents ?? []).map((a) => a.id),
+		[agentsData],
+	);
+
+	const {data: tasksData} = useQuery({
+		queryKey: ["tasks"],
+		queryFn: () => api.listTasks({limit: 20}),
+		staleTime: 30_000,
+	});
+
+	const {data: workersData} = useQuery({
+		queryKey: ["dashboard-workers", agentIds],
+		queryFn: async () => {
+			const results = await Promise.all(
+				agentIds.map(async (id) => {
+					const r = await api.workersList(id, {limit: 10}).catch(() => null);
+					return (r?.workers ?? []).map((w) => ({...w, _agent_id: id}));
+				}),
+			);
+			return results.flat();
+		},
+		enabled: agentIds.length > 0,
+		staleTime: 30_000,
+	});
+
+	const {data: cortexData} = useQuery({
+		queryKey: ["dashboard-cortex", agentIds],
+		queryFn: async () => {
+			const results = await Promise.all(
+				agentIds.map(async (id) => {
+					const r = await api.cortexEvents(id, {limit: 10}).catch(() => null);
+					return (r?.events ?? []).map((e) => ({...e, _agent_id: id}));
+				}),
+			);
+			return results.flat();
+		},
+		enabled: agentIds.length > 0,
+		staleTime: 30_000,
+	});
+
+	const taskItems: ActivityItem[] = (tasksData?.tasks ?? ([] as TaskItem[]))
+		.slice(0, 10)
+		.map((t) => ({
+			id: `t-${t.id}`,
+			type:
+				t.status === "done"
+					? ("task_completed" as const)
+					: ("task_created" as const),
+			title: t.title,
+			agent: t.owner_agent_id,
+			timestamp: new Date(t.created_at).getTime(),
+		}));
+
+	const workerItems: ActivityItem[] = (workersData ?? [])
+		.filter((w) => w.status === "completed" || w.status === "failed")
+		.map((w) => ({
+			id: `w-${w.id}`,
+			type: "worker_done" as const,
+			title: `${w.status === "completed" ? "Completed" : "Failed"}: ${w.task}`,
+			agent: w._agent_id,
+			timestamp: new Date(w.completed_at ?? w.started_at).getTime(),
+		}));
+
+	const cortexItems: ActivityItem[] = (cortexData ?? []).map((e) => ({
+		id: `c-${e.id}`,
+		type: "cortex" as const,
+		title: e.summary,
+		agent: e._agent_id,
+		timestamp: new Date(e.created_at).getTime(),
+	}));
+
+	const allItems = [...taskItems, ...workerItems, ...cortexItems].sort(
+		(a, b) => b.timestamp - a.timestamp,
+	);
+
+	const filtered = allItems
+		.filter((item) => {
+			if (filter === "all") return true;
+			if (filter === "tasks")
+				return item.type === "task_created" || item.type === "task_completed";
+			if (filter === "cortex") return item.type === "cortex";
+			if (filter === "workers") return item.type === "worker_done";
+			return true;
+		})
+		.slice(0, 15);
+
+	return (
+		<Card variant="dark">
+			<CardHeader className="flex-row items-center justify-between p-4 pb-3">
+				<h2 className="font-plex text-sm font-medium text-ink-dull">
+					Recent Activity
+				</h2>
+				<div className="flex items-center gap-1">
+					{FILTERS.map(({key, label}) => (
+						<FilterButton
+							key={key}
+							label={label}
+							active={filter === key}
+							onClick={() => setFilter(key)}
+						/>
+					))}
+				</div>
+			</CardHeader>
+
+			<CardContent className="px-6 pb-4 pt-0">
+				{filtered.length === 0 ? (
+					<div className="py-6 text-center">
+						<p className="text-sm text-ink-faint">No activity yet</p>
+					</div>
+				) : (
+					<div className="flex flex-col divide-y divide-app-line/40">
+						{filtered.map((item) => {
+							const {icon: Icon, iconClass} = TYPE_CONFIG[item.type];
+							return (
+								<div
+									key={item.id}
+									className="flex items-center gap-3 py-2.5 first:pt-0 last:pb-0"
+								>
+									<Icon className={`h-4 w-4 shrink-0 ${iconClass}`} />
+									<div className="min-w-0 flex-1">
+										<p className="truncate text-sm text-ink-dull">
+											{item.title}
+										</p>
+										{item.agent && (
+											<p className="text-tiny text-ink-faint">{item.agent}</p>
+										)}
+									</div>
+									<span className="shrink-0 text-tiny tabular-nums text-ink-faint">
+										{formatTimeAgo(item.timestamp)}
+									</span>
+								</div>
+							);
+						})}
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+}
+
+function formatTimeAgo(ts: number): string {
+	const seconds = Math.floor((Date.now() - ts) / 1000);
+	if (seconds < 60) return "just now";
+	if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+	if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+	return `${Math.floor(seconds / 86400)}d ago`;
+}
diff --git a/interface/src/components/dashboard/TokenUsageCard.tsx b/interface/src/components/dashboard/TokenUsageCard.tsx
new file mode 100644
index 000000000..47c3333f6
--- /dev/null
+++ b/interface/src/components/dashboard/TokenUsageCard.tsx
@@ -0,0 +1,210 @@
+import {useState} from "react";
+import {useQuery} from "@tanstack/react-query";
+import {Card, CardHeader, CardContent, Button} from "@spacedrive/primitives";
+import {api, type UsageByModel} from "@/api/client";
+
+function formatTokens(n: number): string {
+	if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+	if (n >= 1_000) return `${(n / 1_000).toFixed(0)}K`;
+	return String(n);
+}
+
+function formatCost(usd: number): string {
+	if (usd >= 1) return `$${usd.toFixed(2)}`;
+	if (usd >= 0.01) return `$${usd.toFixed(3)}`;
+	return `$${usd.toFixed(4)}`;
+}
+
+const MODEL_COLORS: Record<string, string> = {
+	"claude-opus": "#e11d48",
+	"claude-sonnet": "#f59e0b",
+	"claude-haiku": "#8b5cf6",
+	"gpt-4o": "#3b82f6",
+	"gpt-4o-mini": "#06b6d4",
+	o3: "#10b981",
+	gemini: "#f97316",
+	deepseek: "#64748b",
+};
+
+function colorForModel(model: string): string {
+	for (const [key, color] of Object.entries(MODEL_COLORS)) {
+		if (model.includes(key)) return color;
+	}
+	return "#94a3b8";
+}
+
+type Period = "7d" | "30d" | "90d";
+
+const PERIOD_DAYS: Record<Period, number> = {
+	"7d": 7,
+	"30d": 30,
+	"90d": 90,
+};
+
+function sinceDate(period: Period): string {
+	const d = new Date();
+	d.setDate(d.getDate() - PERIOD_DAYS[period]);
+	return d.toISOString();
+}
+
+export function TokenUsageCard() {
+	const [period, setPeriod] = useState<Period>("7d");
+
+	const {data, isLoading} = useQuery({
+		queryKey: ["usage", period],
+		queryFn: () => api.usage({since: sinceDate(period), group_by: "model"}),
+		staleTime: 60_000,
+	});
+
+	const total = data?.total;
+	const models = (data?.by_model ?? []).slice(0, 3);
+	const totalTokens = total
+		? total.input_tokens +
+			total.output_tokens +
+			total.cache_read_tokens +
+			total.cache_write_tokens
+		: 0;
+
+	return (
+		<Card variant="dark" className="flex h-full flex-col">
+			<CardHeader className="flex-row items-center justify-between p-4 pb-3">
+				<h2 className="font-plex text-sm font-medium text-ink-dull">
+					Token Usage
+				</h2>
+				<div className="flex items-center gap-0.5">
+					{(["7d", "30d", "90d"] as Period[]).map((p) => (
+						<Button
+							key={p}
+							size="xs"
+							variant={period === p ? "gray" : "subtle"}
+							onClick={() => setPeriod(p)}
+						>
+							{p}
+						</Button>
+					))}
+				</div>
+			</CardHeader>
+
+			<CardContent className="flex flex-1 flex-col px-6 pb-4 pt-0">
+				{isLoading || !total ? (
+					<div className="flex flex-1 items-center justify-center">
+						<span className="text-sm text-ink-faint">Loading...</span>
+					</div>
+				) : total.request_count === 0 ? (
+					<div className="flex flex-1 items-center justify-center">
+						<p className="text-sm text-ink-faint">
+							No usage recorded in this period.
+						</p>
+					</div>
+				) : (
+					<>
+						{/* Cost + total tokens */}
+						<div className="mb-3 flex items-baseline gap-3">
+							{total.estimated_cost_usd != null && (
+								<div>
+									<span className="font-plex text-2xl font-semibold tabular-nums text-ink">
+										{formatCost(total.estimated_cost_usd)}
+									</span>
+									<span
+										className="ml-1 cursor-help text-tiny text-ink-faint"
+										title="Estimated from published model pricing. May differ from your actual bill."
+									>
+										est.
+									</span>
+								</div>
+							)}
+							<div>
+								<span className="font-plex text-lg font-medium tabular-nums text-ink-dull">
+									{formatTokens(totalTokens)}
+								</span>
+								<span className="ml-1 text-tiny text-ink-faint">tokens</span>
+							</div>
+						</div>
+
+						{/* Token breakdown */}
+						<div className="mb-3 grid grid-cols-2 gap-x-4 gap-y-1 text-tiny">
+							<TokenRow label="Input" value={total.input_tokens} />
+							<TokenRow label="Output" value={total.output_tokens} />
+							<TokenRow label="Cache read" value={total.cache_read_tokens} />
+							<TokenRow label="Cache write" value={total.cache_write_tokens} />
+							{total.reasoning_tokens > 0 && (
+								<TokenRow label="Reasoning" value={total.reasoning_tokens} />
+							)}
+						</div>
+
+						{/* Model breakdown — always shown, top 3 */}
+						{models.length > 0 && (
+							<div className="mt-auto flex flex-col gap-2.5">
+								{models.map((m) => (
+									<ModelBar key={m.model} model={m} totalTokens={totalTokens} />
+								))}
+							</div>
+						)}
+
+						{/* Unknown pricing note */}
+						{total.cost_status === "unknown" && (
+							<p className="mt-2 text-tiny text-ink-faint">
+								Some usage has unknown pricing and is excluded from the cost
+								total.
+							</p>
+						)}
+					</>
+				)}
+			</CardContent>
+		</Card>
+	);
+}
+
+function TokenRow({label, value}: {label: string; value: number}) {
+	if (value === 0) return null;
+	return (
+		<>
+			<span className="text-ink-faint">{label}</span>
+			<span className="tabular-nums text-ink-dull text-right">
+				{formatTokens(value)}
+			</span>
+		</>
+	);
+}
+
+function ModelBar({
+	model,
+	totalTokens,
+}: {
+	model: UsageByModel;
+	totalTokens: number;
+}) {
+	const modelTokens =
+		model.input_tokens +
+		model.output_tokens +
+		model.cache_read_tokens +
+		model.cache_write_tokens;
+	const pct = totalTokens > 0 ? (modelTokens / totalTokens) * 100 : 0;
+	const color = colorForModel(model.model);
+
+	const displayName = model.model.includes("/")
+		? model.model.split("/").pop()!
+		: model.model;
+
+	return (
+		<div>
+			<div className="mb-1 flex items-center justify-between">
+				<span className="text-tiny text-ink-dull">{displayName}</span>
+				<span className="tabular-nums text-tiny text-ink-faint">
+					{formatTokens(modelTokens)}
+					{model.estimated_cost_usd != null && (
+						<span className="ml-1.5">
+							{formatCost(model.estimated_cost_usd)}
+						</span>
+					)}
+				</span>
+			</div>
+			<div className="h-1.5 w-full overflow-hidden rounded-full bg-app-selected/40">
+				<div
+					className="h-full rounded-full transition-all duration-500"
+					style={{width: `${pct}%`, backgroundColor: color}}
+				/>
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/components/org/AgentEditDialog.tsx b/interface/src/components/org/AgentEditDialog.tsx
new file mode 100644
index 000000000..3caf47f32
--- /dev/null
+++ b/interface/src/components/org/AgentEditDialog.tsx
@@ -0,0 +1,81 @@
+import {useRef, useState} from "react";
+import {
+	Button,
+	Input,
+	DialogRoot,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogFooter,
+} from "@spacedrive/primitives";
+import type {TopologyAgent} from "@/api/client";
+
+interface AgentEditDialogProps {
+	agent: TopologyAgent | null;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	onUpdate: (displayName: string, role: string) => void;
+}
+
+export function AgentEditDialog({
+	agent,
+	open,
+	onOpenChange,
+	onUpdate,
+}: AgentEditDialogProps) {
+	const [displayName, setDisplayName] = useState("");
+	const [role, setRole] = useState("");
+
+	const prevId = useRef<string | null>(null);
+	if (agent && agent.id !== prevId.current) {
+		prevId.current = agent.id;
+		setDisplayName(agent.display_name ?? "");
+		setRole(agent.role ?? "");
+	}
+
+	if (!agent) return null;
+
+	return (
+		<DialogRoot open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="max-w-sm">
+				<DialogHeader>
+					<DialogTitle>Edit Agent</DialogTitle>
+				</DialogHeader>
+				<div className="flex flex-col gap-3">
+					<div className="text-tiny text-ink-faint">{agent.id}</div>
+					<div>
+						<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+							Display Name
+						</label>
+						<Input
+							size="lg"
+							value={displayName}
+							onChange={(e) => setDisplayName(e.target.value)}
+							placeholder={agent.id}
+						/>
+					</div>
+					<div>
+						<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+							Role
+						</label>
+						<Input
+							size="lg"
+							value={role}
+							onChange={(e) => setRole(e.target.value)}
+							placeholder="e.g. Research Assistant, Code Reviewer"
+						/>
+					</div>
+				</div>
+				<DialogFooter>
+					<div className="flex-1" />
+					<Button variant="bare" size="sm" onClick={() => onOpenChange(false)}>
+						Cancel
+					</Button>
+					<Button size="sm" onClick={() => onUpdate(displayName, role)}>
+						Save
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</DialogRoot>
+	);
+}
diff --git a/interface/src/components/org/EdgeConfigPanel.tsx b/interface/src/components/org/EdgeConfigPanel.tsx
new file mode 100644
index 000000000..1c3f1c73c
--- /dev/null
+++ b/interface/src/components/org/EdgeConfigPanel.tsx
@@ -0,0 +1,112 @@
+import {useState} from "react";
+import {motion} from "framer-motion";
+import type {Edge} from "@xyflow/react";
+import {Button} from "@spacedrive/primitives";
+import type {LinkDirection, LinkKind} from "@/api/client";
+
+interface EdgeConfigPanelProps {
+	edge: Edge;
+	onUpdate: (direction: LinkDirection, kind: LinkKind) => void;
+	onDelete: () => void;
+	onClose: () => void;
+}
+
+export function EdgeConfigPanel({
+	edge,
+	onUpdate,
+	onDelete,
+	onClose,
+}: EdgeConfigPanelProps) {
+	const [direction, setDirection] = useState<LinkDirection>(
+		(edge.data?.direction as LinkDirection) ?? "two_way",
+	);
+	const [kind, setKind] = useState<LinkKind>(
+		(edge.data?.kind as LinkKind) ?? "peer",
+	);
+
+	return (
+		<motion.div
+			initial={{opacity: 0, y: 8}}
+			animate={{opacity: 1, y: 0}}
+			exit={{opacity: 0, y: 8}}
+			transition={{duration: 0.15}}
+			className="absolute right-4 top-4 z-20 w-64 rounded-lg border border-app-line/50 bg-app-dark-box/95 p-4 shadow-xl backdrop-blur-sm"
+		>
+			<div className="mb-3 flex items-center justify-between">
+				<span className="text-sm font-medium text-ink">Link Settings</span>
+				<button
+					onClick={onClose}
+					className="text-ink-faint hover:text-ink transition-colors text-sm"
+				>
+					Close
+				</button>
+			</div>
+
+			<div className="mb-2 text-tiny text-ink-faint">
+				{edge.source} → {edge.target}
+			</div>
+
+			{/* Kind */}
+			<div className="mb-3">
+				<label className="mb-1 block text-tiny font-medium text-ink-dull">
+					Kind
+				</label>
+				<div className="flex gap-1.5">
+					{(["hierarchical", "peer"] as const).map((k) => (
+						<button
+							key={k}
+							onClick={() => setKind(k)}
+							className={`flex-1 rounded px-2 py-1.5 text-tiny transition-colors capitalize ${
+								kind === k
+									? "bg-ink/10 text-ink"
+									: "bg-app-box/50 text-ink-faint hover:text-ink-dull"
+							}`}
+						>
+							{k}
+						</button>
+					))}
+				</div>
+			</div>
+
+			{/* Direction */}
+			<div className="mb-4">
+				<label className="mb-1 block text-tiny font-medium text-ink-dull">
+					Direction
+				</label>
+				<div className="flex gap-1.5">
+					{(["one_way", "two_way"] as const).map((d) => (
+						<button
+							key={d}
+							onClick={() => setDirection(d)}
+							className={`flex-1 rounded px-2 py-1.5 text-tiny transition-colors ${
+								direction === d
+									? "bg-ink/10 text-ink"
+									: "bg-app-box/50 text-ink-faint hover:text-ink-dull"
+							}`}
+						>
+							{d === "one_way" ? "One Way" : "Two Way"}
+						</button>
+					))}
+				</div>
+			</div>
+
+			<div className="flex gap-2">
+				<Button
+					onClick={() => onUpdate(direction, kind)}
+					size="sm"
+					className="flex-1"
+				>
+					Save
+				</Button>
+				<Button
+					onClick={onDelete}
+					size="sm"
+					variant="outline"
+					className="text-tiny text-ink-faint"
+				>
+					Delete
+				</Button>
+			</div>
+		</motion.div>
+	);
+}
diff --git a/interface/src/components/org/GroupConfigPanel.tsx b/interface/src/components/org/GroupConfigPanel.tsx
new file mode 100644
index 000000000..398dd7c99
--- /dev/null
+++ b/interface/src/components/org/GroupConfigPanel.tsx
@@ -0,0 +1,111 @@
+import {useState} from "react";
+import {motion} from "framer-motion";
+import {Button} from "@spacedrive/primitives";
+import type {TopologyGroup} from "@/api/client";
+
+interface GroupConfigPanelProps {
+	group: TopologyGroup;
+	allAgents: string[];
+	onUpdate: (agentIds: string[], name: string) => void;
+	onDelete: () => void;
+	onClose: () => void;
+}
+
+export function GroupConfigPanel({
+	group,
+	allAgents,
+	onUpdate,
+	onDelete,
+	onClose,
+}: GroupConfigPanelProps) {
+	const [name, setName] = useState(group.name);
+	const [agentIds, setAgentIds] = useState<Set<string>>(
+		new Set(group.agent_ids),
+	);
+
+	const toggleAgent = (id: string) => {
+		setAgentIds((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	};
+
+	return (
+		<motion.div
+			initial={{opacity: 0, y: 8}}
+			animate={{opacity: 1, y: 0}}
+			exit={{opacity: 0, y: 8}}
+			transition={{duration: 0.15}}
+			className="absolute right-4 top-4 z-20 w-64 rounded-lg border border-app-line/50 bg-app-dark-box/95 p-4 shadow-xl backdrop-blur-sm"
+		>
+			<div className="mb-3 flex items-center justify-between">
+				<span className="text-sm font-medium text-ink">Group Settings</span>
+				<button
+					onClick={onClose}
+					className="text-ink-faint hover:text-ink transition-colors text-sm"
+				>
+					Close
+				</button>
+			</div>
+
+			{/* Name */}
+			<div className="mb-3">
+				<label className="mb-1 block text-tiny font-medium text-ink-dull">
+					Name
+				</label>
+				<input
+					value={name}
+					onChange={(e) => setName(e.target.value)}
+					className="w-full rounded bg-app-input px-2.5 py-1.5 text-sm text-ink outline-none border border-app-line/50 focus:border-accent/50"
+				/>
+			</div>
+
+			{/* Agent membership */}
+			<div className="mb-4">
+				<label className="mb-1 block text-tiny font-medium text-ink-dull">
+					Agents
+				</label>
+				<div className="flex flex-col gap-1 max-h-40 overflow-y-auto">
+					{allAgents.map((id) => (
+						<button
+							key={id}
+							onClick={() => toggleAgent(id)}
+							className={`flex items-center gap-2 rounded px-2 py-1.5 text-tiny transition-colors text-left ${
+								agentIds.has(id)
+									? "bg-accent/15 text-accent"
+									: "bg-app-box text-ink-faint hover:text-ink-dull"
+							}`}
+						>
+							<span
+								className={`h-2 w-2 rounded-full flex-shrink-0 ${
+									agentIds.has(id) ? "bg-accent" : "bg-app-line"
+								}`}
+							/>
+							{id}
+						</button>
+					))}
+				</div>
+			</div>
+
+			<div className="flex gap-2">
+				<Button
+					onClick={() => onUpdate([...agentIds], name)}
+					size="sm"
+					className="flex-1 bg-accent/15 text-tiny text-accent hover:bg-accent/25"
+				>
+					Save
+				</Button>
+				<Button
+					onClick={onDelete}
+					size="sm"
+					variant="accent"
+					className="text-tiny"
+				>
+					Delete
+				</Button>
+			</div>
+		</motion.div>
+	);
+}
diff --git a/interface/src/components/org/GroupNode.tsx b/interface/src/components/org/GroupNode.tsx
new file mode 100644
index 000000000..34be6a212
--- /dev/null
+++ b/interface/src/components/org/GroupNode.tsx
@@ -0,0 +1,40 @@
+import type {NodeProps} from "@xyflow/react";
+import {GROUP_HEADER} from "./constants";
+
+export function GroupNode({data, selected}: NodeProps) {
+	const color = (data.color as string) ?? "#6366f1";
+	const name = data.label as string;
+
+	return (
+		<div
+			className={`rounded-2xl border transition-all ${
+				selected ? "border-opacity-60" : "border-opacity-30"
+			}`}
+			style={{
+				width: data.width as number,
+				height: data.height as number,
+				borderColor: color,
+				backgroundColor: `${color}08`,
+			}}
+		>
+			<div
+				className="flex items-center gap-2 rounded-t-2xl px-4"
+				style={{
+					height: GROUP_HEADER,
+					background: `linear-gradient(135deg, ${color}18, ${color}08)`,
+				}}
+			>
+				<span
+					className="h-2 w-2 rounded-full"
+					style={{backgroundColor: color}}
+				/>
+				<span
+					className="text-[11px] font-semibold uppercase tracking-wider"
+					style={{color}}
+				>
+					{name}
+				</span>
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/components/org/HumanEditDialog.tsx b/interface/src/components/org/HumanEditDialog.tsx
new file mode 100644
index 000000000..0cdaf1eaa
--- /dev/null
+++ b/interface/src/components/org/HumanEditDialog.tsx
@@ -0,0 +1,281 @@
+import {useRef, useState} from "react";
+import {useQuery} from "@tanstack/react-query";
+import {cx} from "class-variance-authority";
+import {
+	Button,
+	Input,
+	TextArea,
+	DialogRoot,
+	DialogContent,
+	DialogTitle,
+} from "@spacedrive/primitives";
+import {api, type TopologyHuman} from "@/api/client";
+import {Markdown} from "@/components/Markdown";
+
+interface HumanEditDialogProps {
+	human: TopologyHuman | null;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	onUpdate: (fields: {
+		displayName: string;
+		role: string;
+		bio: string;
+		description: string;
+		discordId: string;
+		telegramId: string;
+		slackId: string;
+		email: string;
+	}) => void;
+	onDelete: () => void;
+}
+
+export function HumanEditDialog({
+	human,
+	open,
+	onOpenChange,
+	onUpdate,
+	onDelete,
+}: HumanEditDialogProps) {
+	const [displayName, setDisplayName] = useState("");
+	const [role, setRole] = useState("");
+	const [bio, setBio] = useState("");
+	const [description, setDescription] = useState("");
+	const [discordId, setDiscordId] = useState("");
+	const [telegramId, setTelegramId] = useState("");
+	const [slackId, setSlackId] = useState("");
+	const [email, setEmail] = useState("");
+	const [descriptionMode, setDescriptionMode] = useState<"edit" | "preview">(
+		"edit",
+	);
+
+	const {data: messagingStatus} = useQuery({
+		queryKey: ["messagingStatus"],
+		queryFn: api.messagingStatus,
+	});
+
+	// Sync state when a different human is selected
+	const prevId = useRef<string | null>(null);
+	if (human && human.id !== prevId.current) {
+		prevId.current = human.id;
+		setDisplayName(human.display_name ?? "");
+		setRole(human.role ?? "");
+		setBio(human.bio ?? "");
+		setDescription(human.description ?? "");
+		setDiscordId(human.discord_id ?? "");
+		setTelegramId(human.telegram_id ?? "");
+		setSlackId(human.slack_id ?? "");
+		setEmail(human.email ?? "");
+		setDescriptionMode("edit");
+	}
+
+	if (!human) return null;
+
+	return (
+		<DialogRoot open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="!max-w-5xl !w-[90vw] !h-[85vh] !flex !flex-col !gap-0 !p-0 overflow-hidden">
+				<div className="flex items-center justify-between border-b border-app-line/50 px-5 py-4 shrink-0">
+					<div className="flex items-baseline gap-2">
+						<DialogTitle className="text-sm font-semibold">
+							Edit Human
+						</DialogTitle>
+						<span className="text-tiny text-ink-faint">{human.id}</span>
+					</div>
+				</div>
+				<div className="flex flex-1 min-h-0">
+					{/* Left column — metadata fields */}
+					<div className="w-72 shrink-0 border-r border-app-line/50 p-5 flex flex-col gap-4 overflow-y-auto">
+						<div>
+							<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+								Display Name
+							</label>
+							<Input
+								size="lg"
+								value={displayName}
+								onChange={(e) => setDisplayName(e.target.value)}
+								placeholder={human.id}
+							/>
+						</div>
+						<div>
+							<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+								Role
+							</label>
+							<Input
+								size="lg"
+								value={role}
+								onChange={(e) => setRole(e.target.value)}
+								placeholder="e.g. CEO, Lead Developer"
+							/>
+						</div>
+						<div>
+							<label className="mb-1.5 block text-sm font-medium text-ink-dull">
+								Bio
+							</label>
+							<textarea
+								value={bio}
+								onChange={(e) => setBio(e.target.value)}
+								placeholder="A short one-liner..."
+								rows={2}
+								className="w-full rounded-md bg-app-input px-3 py-2 text-sm text-ink outline-none border border-app-line/50 focus:border-accent/50 resize-none"
+							/>
+						</div>
+						{/* Platform identity fields — only shown for configured platforms */}
+						{messagingStatus &&
+							(messagingStatus.discord.configured ||
+								messagingStatus.telegram.configured ||
+								messagingStatus.slack.configured ||
+								messagingStatus.email.configured) && (
+								<div className="border-t border-app-line/50 pt-3 flex flex-col gap-3">
+									<label className="block text-xs font-medium text-ink-faint uppercase tracking-wide">
+										Platform IDs
+									</label>
+									{messagingStatus.discord.configured && (
+										<div>
+											<label className="mb-1 block text-sm font-medium text-ink-dull">
+												Discord
+											</label>
+											<Input
+												size="lg"
+												value={discordId}
+												onChange={(e) => setDiscordId(e.target.value)}
+												placeholder="Discord user ID"
+											/>
+										</div>
+									)}
+									{messagingStatus.telegram.configured && (
+										<div>
+											<label className="mb-1 block text-sm font-medium text-ink-dull">
+												Telegram
+											</label>
+											<Input
+												size="lg"
+												value={telegramId}
+												onChange={(e) => setTelegramId(e.target.value)}
+												placeholder="Telegram user ID"
+											/>
+										</div>
+									)}
+									{messagingStatus.slack.configured && (
+										<div>
+											<label className="mb-1 block text-sm font-medium text-ink-dull">
+												Slack
+											</label>
+											<Input
+												size="lg"
+												value={slackId}
+												onChange={(e) => setSlackId(e.target.value)}
+												placeholder="Slack member ID"
+											/>
+										</div>
+									)}
+									{messagingStatus.email.configured && (
+										<div>
+											<label className="mb-1 block text-sm font-medium text-ink-dull">
+												Email
+											</label>
+											<Input
+												size="lg"
+												value={email}
+												onChange={(e) => setEmail(e.target.value)}
+												placeholder="email@example.com"
+											/>
+										</div>
+									)}
+								</div>
+							)}
+						<div className="flex-1" />
+						<div className="flex items-center gap-2 pt-2 border-t border-app-line/50">
+							<Button variant="accent" size="sm" onClick={onDelete}>
+								Delete
+							</Button>
+							<div className="flex-1" />
+							<Button
+								variant="bare"
+								size="sm"
+								onClick={() => onOpenChange(false)}
+							>
+								Cancel
+							</Button>
+							<Button
+								size="sm"
+								onClick={() =>
+									onUpdate({
+										displayName,
+										role,
+										bio,
+										description,
+										discordId,
+										telegramId,
+										slackId,
+										email,
+									})
+								}
+							>
+								Save
+							</Button>
+						</div>
+					</div>
+					{/* Right column — description markdown editor */}
+					<div className="flex-1 flex flex-col min-w-0">
+						<div className="flex items-center justify-between border-b border-app-line/50 bg-app-dark-box/20 px-5 py-2.5 shrink-0">
+							<div className="flex items-center gap-3">
+								<h3 className="text-sm font-medium text-ink">Description</h3>
+								<span className="rounded bg-app-dark-box px-1.5 py-0.5 font-mono text-tiny text-ink-faint">
+									Markdown
+								</span>
+							</div>
+							<div className="flex items-center gap-3">
+								<div className="flex items-center rounded border border-app-line/50 text-tiny">
+									<button
+										onClick={() => setDescriptionMode("edit")}
+										className={cx(
+											"px-2 py-0.5 rounded-l transition-colors",
+											descriptionMode === "edit"
+												? "bg-app-dark-box text-ink"
+												: "text-ink-faint hover:text-ink",
+										)}
+									>
+										Edit
+									</button>
+									<button
+										onClick={() => setDescriptionMode("preview")}
+										className={cx(
+											"px-2 py-0.5 rounded-r transition-colors",
+											descriptionMode === "preview"
+												? "bg-app-dark-box text-ink"
+												: "text-ink-faint hover:text-ink",
+										)}
+									>
+										Preview
+									</button>
+								</div>
+							</div>
+						</div>
+						<div className="flex-1 overflow-y-auto p-4">
+							{descriptionMode === "edit" ? (
+								<TextArea
+									value={description}
+									onChange={(e) => setDescription(e.target.value)}
+									placeholder={
+										"Write a full description of this person...\n\nBackground, preferences, communication style, timezone, working hours, areas of expertise — anything that helps agents interact with them effectively."
+									}
+									className="h-full w-full resize-none border-transparent bg-app-dark-box/30 px-4 py-3 font-mono leading-relaxed placeholder:text-ink-faint/40"
+									spellCheck={false}
+								/>
+							) : (
+								<div className="prose-sm px-4 py-3">
+									{description.trim() ? (
+										<Markdown>{description}</Markdown>
+									) : (
+										<span className="text-ink-faint/40 text-sm">
+											Nothing to preview.
+										</span>
+									)}
+								</div>
+							)}
+						</div>
+					</div>
+				</div>
+			</DialogContent>
+		</DialogRoot>
+	);
+}
diff --git a/interface/src/components/org/LinkEdge.tsx b/interface/src/components/org/LinkEdge.tsx
new file mode 100644
index 000000000..383f9c36d
--- /dev/null
+++ b/interface/src/components/org/LinkEdge.tsx
@@ -0,0 +1,47 @@
+import {BaseEdge, getSmoothStepPath, type EdgeProps} from "@xyflow/react";
+import {EDGE_COLOR, EDGE_COLOR_ACTIVE} from "./constants";
+
+export function LinkEdge({
+	id,
+	sourceX,
+	sourceY,
+	targetX,
+	targetY,
+	sourcePosition,
+	targetPosition,
+	data,
+	selected,
+}: EdgeProps) {
+	const [edgePath] = getSmoothStepPath({
+		sourceX,
+		sourceY,
+		sourcePosition,
+		targetX,
+		targetY,
+		targetPosition,
+		borderRadius: 16,
+	});
+
+	const isActive = data?.active as boolean;
+	const color = isActive ? EDGE_COLOR_ACTIVE : EDGE_COLOR;
+
+	return (
+		<>
+			<BaseEdge
+				id={id}
+				path={edgePath}
+				style={{
+					stroke: selected ? "hsl(var(--color-accent))" : color,
+					strokeWidth: selected ? 2.5 : isActive ? 2 : 1.5,
+					opacity: selected ? 1 : isActive ? 0.9 : 0.4,
+				}}
+			/>
+			{/* Animated dot traveling along the edge during active message traffic */}
+			{isActive && (
+				<circle r="3" fill={EDGE_COLOR_ACTIVE}>
+					<animateMotion dur="2s" repeatCount="indefinite" path={edgePath} />
+				</circle>
+			)}
+		</>
+	);
+}
diff --git a/interface/src/components/org/OrgGraph.tsx b/interface/src/components/org/OrgGraph.tsx
new file mode 100644
index 000000000..ca25ac074
--- /dev/null
+++ b/interface/src/components/org/OrgGraph.tsx
@@ -0,0 +1,19 @@
+import {ReactFlowProvider} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import type {AgentSummary} from "@/api/client";
+import {OrgGraphInner} from "./OrgGraphInner";
+
+export interface OrgGraphProps {
+	activeEdges?: Set<string>;
+	agents?: AgentSummary[];
+}
+
+export function OrgGraph({activeEdges, agents}: OrgGraphProps) {
+	const edges = activeEdges ?? new Set<string>();
+	const agentList = agents ?? [];
+	return (
+		<ReactFlowProvider>
+			<OrgGraphInner activeEdges={edges} agents={agentList} />
+		</ReactFlowProvider>
+	);
+}
diff --git a/interface/src/components/org/OrgGraphInner.tsx b/interface/src/components/org/OrgGraphInner.tsx
new file mode 100644
index 000000000..f838c1041
--- /dev/null
+++ b/interface/src/components/org/OrgGraphInner.tsx
@@ -0,0 +1,742 @@
+import {useCallback, useEffect, useMemo, useRef, useState} from "react";
+import {MagnifyingGlassMinus, MagnifyingGlassPlus, CornersOut} from "@phosphor-icons/react";
+import {CircleButton} from "@spacedrive/primitives";
+import {
+	ReactFlow,
+	Background,
+	type Node,
+	type Edge,
+	type Connection,
+	type NodeTypes,
+	type EdgeTypes,
+	type NodeChange,
+	type EdgeChange,
+	useNodesState,
+	useEdgesState,
+	useReactFlow,
+	MarkerType,
+} from "@xyflow/react";
+import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
+import {AnimatePresence} from "framer-motion";
+import {
+	api,
+	type AgentSummary,
+	type TopologyGroup,
+	type TopologyAgent,
+	type TopologyHuman,
+	type LinkDirection,
+	type LinkKind,
+} from "@/api/client";
+import {GroupNode} from "./GroupNode";
+import {ProfileNode} from "./ProfileNode";
+import {LinkEdge} from "./LinkEdge";
+import {EdgeConfigPanel} from "./EdgeConfigPanel";
+import {GroupConfigPanel} from "./GroupConfigPanel";
+import {HumanEditDialog} from "./HumanEditDialog";
+import {AgentEditDialog} from "./AgentEditDialog";
+import {buildGraph} from "./buildGraph";
+import {inferKindFromHandle} from "./handles";
+import {HANDLES_KEY, loadHandles, savePositions} from "./storage";
+
+const nodeTypes: NodeTypes = {
+	agent: ProfileNode,
+	human: ProfileNode,
+	group: GroupNode,
+};
+
+const edgeTypes: EdgeTypes = {
+	link: LinkEdge,
+};
+
+interface OrgGraphInnerProps {
+	activeEdges: Set<string>;
+	agents: AgentSummary[];
+}
+
+export function OrgGraphInner({activeEdges, agents}: OrgGraphInnerProps) {
+	const queryClient = useQueryClient();
+	const [selectedEdge, setSelectedEdge] = useState<Edge | null>(null);
+	const [selectedGroup, setSelectedGroup] = useState<TopologyGroup | null>(
+		null,
+	);
+	const [selectedHuman, setSelectedHuman] = useState<TopologyHuman | null>(
+		null,
+	);
+	const [humanDialogOpen, setHumanDialogOpen] = useState(false);
+	const [selectedAgent, setSelectedAgent] = useState<TopologyAgent | null>(
+		null,
+	);
+	const [agentDialogOpen, setAgentDialogOpen] = useState(false);
+
+	const {data, isLoading, error} = useQuery({
+		queryKey: ["topology"],
+		queryFn: api.topology,
+		refetchInterval: 10_000,
+	});
+
+	// Stable refs for opening edit dialogs from node callbacks
+	const openHumanEditRef = useRef<(humanId: string) => void>(() => {});
+	const openAgentEditRef = useRef<(agentId: string) => void>(() => {});
+
+	// Fetch agent info for gradient/appearance data
+	const {data: agentInfoData} = useQuery({
+		queryKey: ["agents"],
+		queryFn: api.agents,
+		refetchInterval: 30_000,
+	});
+
+	// Build agent profile lookup
+	const agentProfiles = useMemo(() => {
+		const map = new Map<string, AgentSummary>();
+		for (const agent of agents) {
+			map.set(agent.id, agent);
+		}
+		return map;
+	}, [agents]);
+
+	// Build agent info lookup (for gradient colors)
+	const agentInfoMap = useMemo(() => {
+		const map = new Map<
+			string,
+			{
+				gradient_start?: string | null | undefined;
+				gradient_end?: string | null | undefined;
+			}
+		>();
+		for (const info of agentInfoData?.agents ?? []) {
+			map.set(info.id, {
+				gradient_start: info.gradient_start,
+				gradient_end: info.gradient_end,
+			});
+		}
+		return map;
+	}, [agentInfoData]);
+
+	/** Inject onEdit callbacks into profile nodes */
+	const patchEditCallbacks = useCallback(
+		(nodes: Node[]): Node[] =>
+			nodes.map((n) => {
+				if (n.type === "human") {
+					return {
+						...n,
+						data: {...n.data, onEdit: () => openHumanEditRef.current(n.id)},
+					};
+				}
+				if (n.type === "agent") {
+					return {
+						...n,
+						data: {...n.data, onEdit: () => openAgentEditRef.current(n.id)},
+					};
+				}
+				return n;
+			}),
+		[],
+	);
+
+	// Build nodes and edges from topology data
+	const {initialNodes, initialEdges} = useMemo(() => {
+		if (!data) return {initialNodes: [], initialEdges: []};
+		const graph = buildGraph(data, activeEdges, agentProfiles, agentInfoMap);
+		return {
+			initialNodes: patchEditCallbacks(graph.initialNodes),
+			initialEdges: graph.initialEdges,
+		};
+	}, [data, activeEdges, agentProfiles, agentInfoMap, patchEditCallbacks]);
+
+	const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+	const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+	// Holds the latest activeEdges for the topology-sync effect so we do not
+	// have to rebuild the whole graph every time edge activity flickers.
+	const activeEdgesRef = useRef(activeEdges);
+
+	// Sync when topology data or agent profiles change. Uses the functional
+	// updater form of setNodes so the effect does not need `nodes` in its deps,
+	// which would cause an infinite loop.
+	useEffect(() => {
+		if (!data) return;
+		const {initialNodes: newNodes, initialEdges: newEdges} = buildGraph(
+			data,
+			activeEdgesRef.current,
+			agentProfiles,
+			agentInfoMap,
+		);
+		setNodes((prevNodes) => {
+			const positionMap = new Map(prevNodes.map((n) => [n.id, n.position]));
+			return patchEditCallbacks(
+				newNodes.map((n) => ({
+					...n,
+					position: positionMap.get(n.id) ?? n.position,
+				})),
+			);
+		});
+		setEdges(newEdges);
+	}, [data, agentProfiles, agentInfoMap, patchEditCallbacks, setNodes, setEdges]);
+
+	// Update edge activity state when activeEdges changes, without rebuilding
+	// the entire node graph.
+	useEffect(() => {
+		activeEdgesRef.current = activeEdges;
+		setEdges((eds) =>
+			eds.map((e) => ({
+				...e,
+				data: {...e.data, active: activeEdges.has(e.id)},
+			})),
+		);
+	}, [activeEdges, setEdges]);
+
+	// -- Mutations --
+
+	const createLink = useMutation({
+		mutationFn: (params: {
+			from: string;
+			to: string;
+			direction: LinkDirection;
+			kind: LinkKind;
+		}) =>
+			api.createLink({
+				from: params.from,
+				to: params.to,
+				direction: params.direction,
+				kind: params.kind,
+			}),
+		onSuccess: () => {
+			queryClient.invalidateQueries({queryKey: ["topology"]});
+		},
+	});
+
+	const updateLink = useMutation({
+		mutationFn: (params: {
+			from: string;
+			to: string;
+			direction: LinkDirection;
+			kind: LinkKind;
+		}) =>
+			api.updateLink(params.from, params.to, {
+				direction: params.direction,
+				kind: params.kind,
+			}),
+		onSuccess: () => {
+			queryClient.invalidateQueries({queryKey: ["topology"]});
+			setSelectedEdge(null);
+		},
+	});
+
+	const deleteLink = useMutation({
+		mutationFn: (params: {from: string; to: string}) =>
+			api.deleteLink(params.from, params.to),
+		onSuccess: (_, params) => {
+			// Clean up saved handles
+			const edgeId = `${params.from}->${params.to}`;
+			const currentHandles = loadHandles();
+			delete currentHandles[edgeId];
+			try {
+				localStorage.setItem(HANDLES_KEY, JSON.stringify(currentHandles));
+			} catch {
+				// ignore
+			}
+			queryClient.invalidateQueries({queryKey: ["topology"]});
+			setSelectedEdge(null);
+		},
+	});
+
+	const updateGroup = useMutation({
+		mutationFn: (params: {
+			originalName: string;
+			agentIds: string[];
+			name: string;
+		}) =>
+			api.updateGroup(params.originalName, {
+				name: params.name,
+				agent_ids: params.agentIds,
+			}),
+		onSuccess: () => {
+			queryClient.invalidateQueries({queryKey: ["topology"]});
+			setSelectedGroup(null);
+		},
+	});
+
+	const deleteGroup = useMutation({
+		mutationFn: (name: string) => api.deleteGroup(name),
+		onSuccess: () => {
+			queryClient.invalidateQueries({queryKey: ["topology"]});
+			setSelectedGroup(null);
+		},
+	});
+
+	// Updates only the membership of a group, used by the drag-to-group
+	// gesture. Separate from `updateGroup` so it does not clear selection.
+	const assignGroupMembership = useMutation({
+		mutationFn: (params: {groupName: string; agentIds: string[]}) =>
+			api.updateGroup(params.groupName, {agent_ids: params.agentIds}),
+		onSuccess: () => {
+			queryClient.invalidateQueries({queryKey: ["topology"]});
+		},
+		onError: (error) => {
+			console.error("failed to update group membership", error);
+		},
+	});
+
+	const updateHuman = useMutation({
+		mutationFn: (params: {
+			id: string;
+			displayName?: string;
+			role?: string;
+			bio?: string;
+			description?: string;
+			discordId?: string;
+			telegramId?: string;
+			slackId?: string;
+			email?: string;
+		}) =>
+			api.updateHuman(params.id, {
+				display_name: params.displayName,
+				role: params.role,
+				bio: params.bio,
+				description: params.description,
+				discord_id: params.discordId,
+				telegram_id: params.telegramId,
+				slack_id: params.slackId,
+				email: params.email,
+			}),
+		onSuccess: () => {
+			queryClient.invalidateQueries({queryKey: ["topology"]});
+			setSelectedHuman(null);
+		},
+	});
+
+	const deleteHuman = useMutation({
+		mutationFn: (id: string) => api.deleteHuman(id),
+		onSuccess: () => {
+			queryClient.invalidateQueries({queryKey: ["topology"]});
+			setSelectedHuman(null);
+		},
+	});
+
+	const updateAgentMutation = useMutation({
+		mutationFn: (params: {id: string; displayName?: string; role?: string}) =>
+			api.updateAgent(params.id, {
+				display_name: params.displayName,
+				role: params.role,
+			}),
+		onSuccess: () => {
+			queryClient.invalidateQueries({queryKey: ["topology"]});
+			queryClient.invalidateQueries({queryKey: ["agents"]});
+			setSelectedAgent(null);
+			setAgentDialogOpen(false);
+		},
+	});
+
+	// Handle new connection (drag from handle to handle)
+	const onConnect = useCallback(
+		(connection: Connection) => {
+			if (!connection.source || !connection.target) return;
+			if (connection.source === connection.target) return;
+
+			const exists = edges.some(
+				(e) => e.source === connection.source && e.target === connection.target,
+			);
+			if (exists) return;
+
+			const kind = inferKindFromHandle(connection.sourceHandle ?? null);
+
+			// For hierarchical links from bottom handle, from=source (superior), to=target
+			// For hierarchical links from top handle, from=target (superior), to=source
+			const isFromTop = connection.sourceHandle === "top";
+			const from =
+				kind === "hierarchical" && isFromTop
+					? connection.target
+					: connection.source;
+			const to =
+				kind === "hierarchical" && isFromTop
+					? connection.source
+					: connection.target;
+
+			// Save handle information to localStorage
+			// Handles need to be stored relative to the final from/to, not the connection source/target
+			const edgeId = `${from}->${to}`;
+			if (connection.sourceHandle && connection.targetHandle) {
+				const currentHandles = loadHandles();
+				currentHandles[edgeId] = {
+					sourceHandle:
+						kind === "hierarchical" && isFromTop
+							? connection.targetHandle
+							: connection.sourceHandle,
+					targetHandle:
+						kind === "hierarchical" && isFromTop
+							? connection.sourceHandle
+							: connection.targetHandle,
+				};
+				try {
+					localStorage.setItem(HANDLES_KEY, JSON.stringify(currentHandles));
+				} catch {
+					// ignore
+				}
+			}
+
+			createLink.mutate({
+				from,
+				to,
+				direction: "two_way",
+				kind,
+			});
+		},
+		[edges, createLink],
+	);
+
+	const handleEdgesChange = useCallback(
+		(changes: EdgeChange[]) => {
+			// Intercept edge removal (Delete/Backspace key)
+			for (const change of changes) {
+				if (change.type === "remove") {
+					const edge = edges.find((e) => e.id === change.id);
+					if (edge) {
+						// Parse edge ID format: "from->to"
+						const [from, to] = edge.id.split("->");
+						if (from && to) {
+							deleteLink.mutate({from, to});
+						}
+					}
+				}
+			}
+			// Apply the changes to local state
+			onEdgesChange(changes);
+		},
+		[edges, deleteLink, onEdgesChange],
+	);
+
+	const onEdgeClick = useCallback((_: React.MouseEvent, edge: Edge) => {
+		setSelectedEdge(edge);
+		setSelectedGroup(null);
+	}, []);
+
+	const groups = data?.groups ?? [];
+	const {fitView, zoomIn, zoomOut} = useReactFlow();
+
+	const openHumanEdit = useCallback(
+		(humanId: string) => {
+			const humans = data?.humans ?? [];
+			const human = humans.find((h) => h.id === humanId);
+			if (human) {
+				setSelectedHuman(human);
+				setHumanDialogOpen(true);
+				setSelectedEdge(null);
+				setSelectedGroup(null);
+			}
+		},
+		[data],
+	);
+	openHumanEditRef.current = openHumanEdit;
+
+	const openAgentEdit = useCallback(
+		(agentId: string) => {
+			const topoAgent = data?.agents.find((a) => a.id === agentId);
+			if (topoAgent) {
+				setSelectedAgent(topoAgent);
+				setAgentDialogOpen(true);
+				setSelectedEdge(null);
+				setSelectedGroup(null);
+				setSelectedHuman(null);
+			}
+		},
+		[data],
+	);
+	openAgentEditRef.current = openAgentEdit;
+
+	const onNodeClick = useCallback(
+		(_: React.MouseEvent, node: Node) => {
+			if (node.type === "group" && groups.length > 0) {
+				const group = groups.find((g) => `group:${g.name}` === node.id);
+				if (group) {
+					setSelectedGroup(group);
+					setSelectedEdge(null);
+					setSelectedHuman(null);
+				}
+			} else {
+				setSelectedGroup(null);
+				setSelectedHuman(null);
+			}
+
+			// Zoom the selected node into view
+			if (node.type === "agent" || node.type === "human") {
+				fitView({
+					nodes: [{id: node.id}],
+					duration: 400,
+					padding: 0.5,
+					maxZoom: 1.5,
+				});
+			}
+		},
+		[groups, fitView],
+	);
+
+	const onPaneClick = useCallback(() => {
+		setSelectedEdge(null);
+		setSelectedGroup(null);
+		setSelectedHuman(null);
+	}, []);
+
+	// Handle node drops into/out of groups via position change
+	const handleNodesChange = useCallback(
+		(changes: NodeChange[]) => {
+			onNodesChange(changes);
+
+			// Persist positions when any drag ends
+			const hasDragEnd = changes.some(
+				(c) => c.type === "position" && !c.dragging,
+			);
+			if (hasDragEnd) {
+				// Read latest nodes after the change is applied
+				setNodes((current) => {
+					savePositions(current);
+					return current;
+				});
+			}
+
+			// After a drag ends, check if an agent node was dropped onto a group
+			for (const change of changes) {
+				if (
+					change.type === "position" &&
+					!change.dragging &&
+					groups.length > 0
+				) {
+					const draggedNode = nodes.find((n) => n.id === change.id);
+					if (!draggedNode || draggedNode.type !== "agent") continue;
+
+					const agentId = draggedNode.id;
+					const currentGroup = groups.find((g) =>
+						g.agent_ids.includes(agentId),
+					);
+
+					// Find if the agent was dropped onto a group node
+					const groupNodes = nodes.filter((n) => n.type === "group");
+					let targetGroup: TopologyGroup | null = null;
+
+					for (const gNode of groupNodes) {
+						const gw = (gNode.data.width as number) ?? 0;
+						const gh = (gNode.data.height as number) ?? 0;
+						const pos = draggedNode.position;
+						if (
+							pos.x > gNode.position.x &&
+							pos.x < gNode.position.x + gw &&
+							pos.y > gNode.position.y &&
+							pos.y < gNode.position.y + gh
+						) {
+							const group = groups.find((g) => `group:${g.name}` === gNode.id);
+							if (group) {
+								targetGroup = group;
+								break;
+							}
+						}
+					}
+
+					if (targetGroup && !targetGroup.agent_ids.includes(agentId)) {
+						const newIds = [...targetGroup.agent_ids, agentId];
+						if (currentGroup && currentGroup.name !== targetGroup.name) {
+							assignGroupMembership.mutate({
+								groupName: currentGroup.name,
+								agentIds: currentGroup.agent_ids.filter(
+									(id) => id !== agentId,
+								),
+							});
+						}
+						assignGroupMembership.mutate({
+							groupName: targetGroup.name,
+							agentIds: newIds,
+						});
+					} else if (!targetGroup && currentGroup) {
+						assignGroupMembership.mutate({
+							groupName: currentGroup.name,
+							agentIds: currentGroup.agent_ids.filter(
+								(id) => id !== agentId,
+							),
+						});
+					}
+				}
+			}
+		},
+		[onNodesChange, nodes, groups, setNodes, assignGroupMembership],
+	);
+
+	if (isLoading) {
+		return (
+			<div className="flex h-full items-center justify-center">
+				<div className="flex items-center gap-2 text-ink-dull">
+					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
+					Loading topology...
+				</div>
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<div className="flex h-full items-center justify-center">
+				<p className="text-sm text-red-400">Failed to load topology</p>
+			</div>
+		);
+	}
+
+	if (!data || data.agents.length === 0) {
+		return (
+			<div className="flex h-full items-center justify-center">
+				<p className="text-sm text-ink-faint">No agents configured</p>
+			</div>
+		);
+	}
+
+	const allAgentIds = data.agents.map((a) => a.id);
+
+	return (
+		<div className="relative h-full w-full select-none bg-app">
+			<ReactFlow
+				colorMode="dark"
+				style={
+					{
+						backgroundColor: "transparent",
+						"--xy-background-color-default": "transparent",
+						"--xy-background-color": "transparent",
+					} as React.CSSProperties
+				}
+				nodes={nodes}
+				edges={edges}
+				onNodesChange={handleNodesChange}
+				onEdgesChange={handleEdgesChange}
+				onConnect={onConnect}
+				onEdgeClick={onEdgeClick}
+				onNodeClick={onNodeClick}
+				onPaneClick={onPaneClick}
+				nodeTypes={nodeTypes}
+				edgeTypes={edgeTypes}
+				defaultEdgeOptions={{
+					type: "link",
+					markerEnd: {
+						type: MarkerType.ArrowClosed,
+						width: 16,
+						height: 16,
+					},
+				}}
+				fitView
+				fitViewOptions={{padding: 0.3}}
+				proOptions={{hideAttribution: true}}
+				className="topology-graph"
+			>
+				<Background color="hsla(230, 8%, 18%, 1)" gap={20} size={1} />
+			</ReactFlow>
+
+			{/* Zoom controls */}
+			<div className="absolute bottom-4 right-4 z-10 flex flex-col gap-1">
+				<CircleButton icon={MagnifyingGlassPlus} title="Zoom in" onClick={() => zoomIn({duration: 200})} />
+				<CircleButton icon={MagnifyingGlassMinus} title="Zoom out" onClick={() => zoomOut({duration: 200})} />
+				<CircleButton icon={CornersOut} title="Fit view" onClick={() => fitView({padding: 0.3, duration: 400})} />
+			</div>
+
+			{/* Legend + controls */}
+			<div className="absolute bottom-4 left-4 z-10 rounded-md bg-app-dark-box/80 p-3 backdrop-blur-sm">
+				<div className="mb-2 text-tiny text-ink-faint">
+					Drag between handles to link
+				</div>
+				<div className="flex flex-col gap-1 text-tiny text-ink-faint">
+					<span>Top/Bottom → Hierarchical</span>
+					<span>Left/Right → Peer</span>
+				</div>
+			</div>
+
+			{/* Edge config panel */}
+			<AnimatePresence>
+				{selectedEdge && (
+					<EdgeConfigPanel
+						key={selectedEdge.id}
+						edge={selectedEdge}
+						onUpdate={(direction, kind) =>
+							updateLink.mutate({
+								from: selectedEdge.source,
+								to: selectedEdge.target,
+								direction,
+								kind,
+							})
+						}
+						onDelete={() =>
+							deleteLink.mutate({
+								from: selectedEdge.source,
+								to: selectedEdge.target,
+							})
+						}
+						onClose={() => setSelectedEdge(null)}
+					/>
+				)}
+			</AnimatePresence>
+
+			{/* Group config panel */}
+			<AnimatePresence>
+				{selectedGroup && (
+					<GroupConfigPanel
+						key={selectedGroup.name}
+						group={selectedGroup}
+						allAgents={allAgentIds}
+						onUpdate={(agentIds, name) =>
+							updateGroup.mutate({
+								originalName: selectedGroup.name,
+								agentIds,
+								name,
+							})
+						}
+						onDelete={() => deleteGroup.mutate(selectedGroup.name)}
+						onClose={() => setSelectedGroup(null)}
+					/>
+				)}
+			</AnimatePresence>
+
+			{/* Human edit dialog */}
+			<HumanEditDialog
+				human={selectedHuman}
+				open={humanDialogOpen}
+				onOpenChange={(open) => {
+					setHumanDialogOpen(open);
+					if (!open) setSelectedHuman(null);
+				}}
+				onUpdate={(fields) => {
+					if (selectedHuman) {
+						updateHuman.mutate({
+							id: selectedHuman.id,
+							displayName: fields.displayName || undefined,
+							role: fields.role || undefined,
+							bio: fields.bio || undefined,
+							description: fields.description || undefined,
+							discordId: fields.discordId || undefined,
+							telegramId: fields.telegramId || undefined,
+							slackId: fields.slackId || undefined,
+							email: fields.email || undefined,
+						});
+						setHumanDialogOpen(false);
+					}
+				}}
+				onDelete={() => {
+					if (selectedHuman) {
+						deleteHuman.mutate(selectedHuman.id);
+						setHumanDialogOpen(false);
+					}
+				}}
+			/>
+
+			{/* Agent edit dialog */}
+			<AgentEditDialog
+				agent={selectedAgent}
+				open={agentDialogOpen}
+				onOpenChange={(open) => {
+					setAgentDialogOpen(open);
+					if (!open) setSelectedAgent(null);
+				}}
+				onUpdate={(displayName, role) => {
+					if (selectedAgent) {
+						updateAgentMutation.mutate({
+							id: selectedAgent.id,
+							displayName: displayName || undefined,
+							role: role || undefined,
+						});
+					}
+				}}
+			/>
+		</div>
+	);
+}
diff --git a/interface/src/components/org/ProfileNode.tsx b/interface/src/components/org/ProfileNode.tsx
new file mode 100644
index 000000000..7715aeec2
--- /dev/null
+++ b/interface/src/components/org/ProfileNode.tsx
@@ -0,0 +1,222 @@
+import {Handle, Position, type NodeProps} from "@xyflow/react";
+import {Link} from "@tanstack/react-router";
+import {seedGradient, ProfileAvatar} from "@/components/ProfileAvatar";
+import {NODE_WIDTH} from "./constants";
+
+export function ProfileNode({data, selected}: NodeProps) {
+	const nodeId = (data.nodeId as string) ?? "";
+	const avatarSeed = (data.avatarSeed as string) ?? nodeId;
+	const [defaultC1, defaultC2] = seedGradient(avatarSeed);
+	const configDisplayName = data.configDisplayName as string | null;
+	const configRole = data.configRole as string | null;
+	const chosenName = data.chosenName as string | null;
+	const bio = data.bio as string | null;
+	const gradientStart = data.gradientStart as string | null;
+	const gradientEnd = data.gradientEnd as string | null;
+	const nodeAvatarUrl = data.avatarUrl as string | null;
+	const c1 = gradientStart || defaultC1;
+	const c2 = gradientEnd || defaultC2;
+	const isOnline = data.isOnline as boolean;
+	const channelCount = (data.channelCount as number) ?? 0;
+	const memoryCount = (data.memoryCount as number) ?? 0;
+	const connected = (data.connectedHandles as Record<string, boolean>) ?? {};
+	const nodeKind = (data.nodeKind as string) ?? "agent";
+	const isAgent = nodeKind === "agent";
+	const primaryName = configDisplayName ?? nodeId;
+	const onEdit = data.onEdit as (() => void) | undefined;
+
+	return (
+		<div
+			className={`group/node relative rounded-xl border bg-app-dark-box transition-all ${
+				selected
+					? "border-accent shadow-lg shadow-accent/20"
+					: "border-app-line hover:border-app-line/80"
+			}`}
+			style={{width: NODE_WIDTH}}
+		>
+			{/* Edit button (visible on hover) */}
+			{onEdit && (
+				<button
+					onClick={(e) => {
+						e.stopPropagation();
+						onEdit();
+					}}
+					className="absolute top-2 right-2 z-10 rounded p-1 text-ink-faint opacity-0 transition-opacity hover:bg-ink/10 hover:text-ink group-hover/node:opacity-100"
+				>
+					<svg
+						width="14"
+						height="14"
+						viewBox="0 0 16 16"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="1.5"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<path d="M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z" />
+					</svg>
+				</button>
+			)}
+
+			{/* Gradient banner */}
+			<div className="relative h-12 overflow-hidden rounded-t-xl">
+				<svg
+					className="absolute inset-0 h-full w-full"
+					preserveAspectRatio="none"
+					viewBox="0 0 240 48"
+				>
+					<defs>
+						<linearGradient
+							id={`node-grad-${nodeId}`}
+							x1="0%"
+							y1="0%"
+							x2="100%"
+							y2="100%"
+						>
+							<stop offset="0%" stopColor={c1} stopOpacity={0.35} />
+							<stop offset="100%" stopColor={c2} stopOpacity={0.2} />
+						</linearGradient>
+					</defs>
+					<rect width="240" height="48" fill={`url(#node-grad-${nodeId})`} />
+				</svg>
+			</div>
+
+			{/* Avatar + badge row */}
+			<div className="relative -mt-6 px-4 pt-3 flex items-end justify-between">
+				<div className="relative inline-block">
+					<ProfileAvatar
+						seed={avatarSeed}
+						name={primaryName}
+						size={48}
+						className="rounded-full border-[3px] border-app-dark-box"
+						gradientStart={gradientStart ?? undefined}
+						gradientEnd={gradientEnd ?? undefined}
+						avatarUrl={isAgent && nodeAvatarUrl ? nodeAvatarUrl : undefined}
+					/>
+					{isAgent && (
+						<div
+							className={`absolute bottom-0 right-0 h-3.5 w-3.5 rounded-full border-[2px] border-app-dark-box ${
+								isOnline ? "bg-green-500" : "bg-gray-500"
+							}`}
+						/>
+					)}
+				</div>
+				{/* Badge */}
+				<span
+					className={`mb-1 rounded px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider ${
+						isAgent
+							? "bg-accent/20 text-accent"
+							: "bg-ink-faint/10 text-ink-faint"
+					}`}
+				>
+					{nodeKind}
+				</span>
+			</div>
+
+			{/* Profile content */}
+			<div className="px-4 pt-1.5 pb-3">
+				{/* Primary name + self-chosen name inline */}
+				{isAgent ? (
+					<Link
+						to="/agents/$agentId"
+						params={{agentId: nodeId}}
+						className="flex items-baseline gap-1.5 truncate"
+						onClick={(e) => e.stopPropagation()}
+					>
+						<span className="font-plex text-sm font-semibold text-ink hover:text-accent transition-colors truncate">
+							{primaryName}
+						</span>
+						{chosenName &&
+							chosenName !== primaryName &&
+							chosenName !== nodeId && (
+								<span className="text-[11px] text-ink-faint truncate">
+									"{chosenName}"
+								</span>
+							)}
+					</Link>
+				) : (
+					<div className="flex items-baseline gap-1.5 truncate">
+						<span className="font-plex text-sm font-semibold text-ink truncate">
+							{primaryName}
+						</span>
+					</div>
+				)}
+
+				{/* Role */}
+				{configRole && (
+					<p className="mt-0.5 text-[11px] text-ink-dull truncate">
+						{configRole}
+					</p>
+				)}
+
+				{/* Bio */}
+				{bio ? (
+					<p className="mt-2 text-[11px] leading-relaxed text-ink-faint line-clamp-3">
+						{bio}
+					</p>
+				) : (
+					!isAgent &&
+					!data.description && (
+						<p className="mt-2 text-[11px] leading-relaxed text-ink-faint/60 italic">
+							This is you, add your details.
+						</p>
+					)
+				)}
+
+				{/* Stats (agents only) */}
+				{isAgent && (
+					<div className="mt-2 flex items-center gap-3 border-t border-app-line/40 pt-2 text-[10px] text-ink-faint">
+						<span>
+							<span className="font-medium text-ink-dull">{channelCount}</span>{" "}
+							channels
+						</span>
+						<span>
+							<span className="font-medium text-ink-dull">
+								{memoryCount >= 1000
+									? `${(memoryCount / 1000).toFixed(1)}k`
+									: memoryCount}
+							</span>{" "}
+							memories
+						</span>
+					</div>
+				)}
+			</div>
+
+			{/* Handles on all four sides */}
+			{(["top", "bottom", "left", "right"] as const).map((side) => (
+				<Handle
+					key={`src-${side}`}
+					type="source"
+					id={side}
+					position={
+						side === "top"
+							? Position.Top
+							: side === "bottom"
+								? Position.Bottom
+								: side === "left"
+									? Position.Left
+									: Position.Right
+					}
+					className={`!h-2.5 !w-2.5 !border-2 !border-app-dark-box ${connected[side] ? "!bg-accent" : "!bg-app-line"}`}
+				/>
+			))}
+			{(["top", "bottom", "left", "right"] as const).map((side) => (
+				<Handle
+					key={`tgt-${side}`}
+					type="target"
+					id={side}
+					position={
+						side === "top"
+							? Position.Top
+							: side === "bottom"
+								? Position.Bottom
+								: side === "left"
+									? Position.Left
+									: Position.Right
+					}
+					className={`!h-2.5 !w-2.5 !border-2 !border-app-dark-box ${connected[side] ? "!bg-accent" : "!bg-app-line"}`}
+				/>
+			))}
+		</div>
+	);
+}
diff --git a/interface/src/components/org/buildGraph.ts b/interface/src/components/org/buildGraph.ts
new file mode 100644
index 000000000..8b235d51d
--- /dev/null
+++ b/interface/src/components/org/buildGraph.ts
@@ -0,0 +1,308 @@
+import type {Node, Edge} from "@xyflow/react";
+import {
+	api,
+	type AgentSummary,
+	type TopologyResponse,
+	type TopologyGroup,
+} from "@/api/client";
+import {
+	EDGE_COLOR,
+	GROUP_COLORS,
+	GROUP_HEADER,
+	GROUP_PADDING,
+	NODE_WIDTH,
+} from "./constants";
+import {getHandlesForKind} from "./handles";
+import {loadHandles, loadPositions} from "./storage";
+
+/** Estimate the rendered height of an agent node based on profile data. */
+export function estimateNodeHeight(summary: AgentSummary | undefined): number {
+	let h = 48 + 24 + 8 + 16 + 24; // banner + avatar + name row + stats + padding
+	if (summary?.profile?.status) h += 16;
+	if (summary?.profile?.bio) h += 40;
+	return h;
+}
+
+export function buildGraph(
+	data: TopologyResponse,
+	activeEdges: Set<string>,
+	agentProfiles: Map<string, AgentSummary>,
+	agentInfoMap: Map<
+		string,
+		{
+			gradient_start?: string | null | undefined;
+			gradient_end?: string | null | undefined;
+		}
+	>,
+): {initialNodes: Node[]; initialEdges: Edge[]} {
+	const saved = loadPositions();
+	const savedHandles = loadHandles();
+	const allNodes: Node[] = [];
+
+	// Topology agent lookup for display_name / role
+	const topologyAgentMap = new Map(data.agents.map((a) => [a.id, a]));
+
+	const links = data.links ?? [];
+	// connectedHandles is computed after nodes are positioned (needs position map for peers)
+
+	// Build group membership lookup
+	const groups = data.groups ?? [];
+	const agentToGroup = new Map<string, TopologyGroup>();
+	for (const group of groups) {
+		for (const agentId of group.agent_ids) {
+			agentToGroup.set(agentId, group);
+		}
+	}
+
+	// Agents not in any group
+	const ungroupedAgents = data.agents.filter((a) => !agentToGroup.has(a.id));
+
+	// Create group nodes
+	const groupPositions = new Map<string, {x: number; y: number}>();
+	let groupX = 0;
+
+	for (let gi = 0; gi < groups.length; gi++) {
+		const group = groups[gi];
+		const memberCount = group.agent_ids.length;
+		const cols = Math.max(1, Math.min(memberCount, 2));
+		const rows = Math.ceil(memberCount / cols);
+		const groupWidth = cols * (NODE_WIDTH + GROUP_PADDING) + GROUP_PADDING;
+		const maxMemberHeight = group.agent_ids.reduce((max, id) => {
+			return Math.max(max, estimateNodeHeight(agentProfiles.get(id)));
+		}, 170);
+		const groupHeight =
+			GROUP_HEADER + rows * (maxMemberHeight + GROUP_PADDING) + GROUP_PADDING;
+
+		const color = group.color ?? GROUP_COLORS[gi % GROUP_COLORS.length];
+		const pos = {x: groupX, y: 0};
+		groupPositions.set(group.name, pos);
+
+		allNodes.push({
+			id: `group:${group.name}`,
+			type: "group",
+			position: pos,
+			data: {
+				label: group.name,
+				color,
+				width: groupWidth,
+				height: groupHeight,
+			},
+			style: {width: groupWidth, height: groupHeight},
+			draggable: true,
+			selectable: true,
+			zIndex: -1,
+		});
+
+		// Position member agents inside the group
+		group.agent_ids.forEach((agentId, idx) => {
+			const col = idx % cols;
+			const row = Math.floor(idx / cols);
+			const summary = agentProfiles.get(agentId);
+			const profile = summary?.profile;
+			const isOnline =
+				summary?.last_activity_at != null &&
+				new Date(summary.last_activity_at).getTime() >
+					Date.now() - 5 * 60 * 1000;
+
+			const topoAgent = topologyAgentMap.get(agentId);
+			allNodes.push({
+				id: agentId,
+				type: "agent",
+				position: {
+					x: GROUP_PADDING + col * (NODE_WIDTH + GROUP_PADDING),
+					y:
+						GROUP_HEADER +
+						GROUP_PADDING +
+						row * (maxMemberHeight + GROUP_PADDING),
+				},
+				parentId: `group:${group.name}`,
+				extent: "parent" as const,
+				data: {
+					nodeId: agentId,
+					nodeKind: "agent",
+					configDisplayName: topoAgent?.display_name ?? null,
+					configRole: topoAgent?.role ?? null,
+					chosenName: profile?.display_name ?? null,
+					avatarSeed: profile?.avatar_seed ?? agentId,
+					bio: profile?.bio ?? null,
+					gradientStart: agentInfoMap.get(agentId)?.gradient_start ?? null,
+					gradientEnd: agentInfoMap.get(agentId)?.gradient_end ?? null,
+					avatarUrl: api.agentAvatarUrl(agentId),
+					isOnline,
+					channelCount: summary?.channel_count ?? 0,
+					memoryCount: summary?.memory_total ?? 0,
+					connectedHandles: {
+						top: false,
+						bottom: false,
+						left: false,
+						right: false,
+					},
+				},
+			});
+		});
+
+		groupX += groupWidth + 80;
+	}
+
+	// Position ungrouped agents
+	const ungroupedStartX = groupX;
+	const radius = Math.max(200, ungroupedAgents.length * 80);
+	const centerX = ungroupedStartX + radius + NODE_WIDTH / 2;
+	const centerY = 300;
+
+	ungroupedAgents.forEach((agent, index) => {
+		const count = ungroupedAgents.length;
+		const angle = (2 * Math.PI * index) / count - Math.PI / 2;
+		const summary = agentProfiles.get(agent.id);
+		const profile = summary?.profile;
+		const isOnline =
+			summary?.last_activity_at != null &&
+			new Date(summary.last_activity_at).getTime() > Date.now() - 5 * 60 * 1000;
+
+		allNodes.push({
+			id: agent.id,
+			type: "agent",
+			position:
+				count === 1
+					? {x: ungroupedStartX, y: 100}
+					: {
+							x: centerX + radius * Math.cos(angle),
+							y: centerY + radius * Math.sin(angle),
+						},
+			data: {
+				nodeId: agent.id,
+				nodeKind: "agent",
+				configDisplayName: agent.display_name ?? null,
+				configRole: agent.role ?? null,
+				chosenName: profile?.display_name ?? null,
+				avatarSeed: profile?.avatar_seed ?? agent.id,
+				bio: profile?.bio ?? null,
+				gradientStart: agentInfoMap.get(agent.id)?.gradient_start ?? null,
+				gradientEnd: agentInfoMap.get(agent.id)?.gradient_end ?? null,
+				avatarUrl: api.agentAvatarUrl(agent.id),
+				isOnline,
+				channelCount: summary?.channel_count ?? 0,
+				memoryCount: summary?.memory_total ?? 0,
+				connectedHandles: {
+					top: false,
+					bottom: false,
+					left: false,
+					right: false,
+				},
+			},
+		});
+	});
+
+	// Add human nodes
+	const humans = data.humans ?? [];
+	const humanStartX =
+		ungroupedAgents.length > 0
+			? centerX + radius + NODE_WIDTH + 80
+			: ungroupedStartX;
+
+	humans.forEach((human, index) => {
+		allNodes.push({
+			id: human.id,
+			type: "human",
+			position: {x: humanStartX, y: index * 220},
+			data: {
+				nodeId: human.id,
+				nodeKind: "human",
+				configDisplayName: human.display_name ?? null,
+				configRole: human.role ?? null,
+				bio: human.bio ?? null,
+				description: human.description ?? null,
+				avatarSeed: human.id,
+				connectedHandles: {
+					top: false,
+					bottom: false,
+					left: false,
+					right: false,
+				},
+			},
+		});
+	});
+
+	// Build absolute position lookup for handle routing
+	const nodePositionMap = new Map<string, {x: number; y: number}>();
+	for (const node of allNodes) {
+		if (node.parentId) {
+			// Child nodes have positions relative to parent — compute absolute
+			const parent = allNodes.find((n) => n.id === node.parentId);
+			if (parent) {
+				nodePositionMap.set(node.id, {
+					x: parent.position.x + node.position.x,
+					y: parent.position.y + node.position.y,
+				});
+				continue;
+			}
+		}
+		nodePositionMap.set(node.id, node.position);
+	}
+
+	// Compute connected handles using actual positions
+	const connectedHandles = new Set<string>();
+	for (const link of links) {
+		const edgeId = `${link.from}->${link.to}`;
+		const {sourceHandle, targetHandle} = getHandlesForKind(
+			link.kind,
+			nodePositionMap.get(link.from),
+			nodePositionMap.get(link.to),
+			savedHandles[edgeId],
+		);
+		connectedHandles.add(`${link.from}:${sourceHandle}`);
+		connectedHandles.add(`${link.to}:${targetHandle}`);
+	}
+
+	// Patch connectedHandles onto nodes
+	for (const node of allNodes) {
+		if (node.type === "agent" || node.type === "human") {
+			const nid = node.id;
+			node.data = {
+				...node.data,
+				connectedHandles: {
+					top: connectedHandles.has(`${nid}:top`),
+					bottom: connectedHandles.has(`${nid}:bottom`),
+					left: connectedHandles.has(`${nid}:left`),
+					right: connectedHandles.has(`${nid}:right`),
+				},
+			};
+		}
+	}
+
+	const initialEdges: Edge[] = data.links.map((link) => {
+		const edgeId = `${link.from}->${link.to}`;
+		const {sourceHandle, targetHandle} = getHandlesForKind(
+			link.kind,
+			nodePositionMap.get(link.from),
+			nodePositionMap.get(link.to),
+			savedHandles[edgeId],
+		);
+		return {
+			id: edgeId,
+			source: link.from,
+			target: link.to,
+			sourceHandle,
+			targetHandle,
+			type: "link",
+			data: {
+				direction: link.direction,
+				kind: link.kind,
+				active: activeEdges.has(edgeId),
+			},
+			style: {
+				stroke: EDGE_COLOR,
+			},
+		};
+	});
+
+	// Apply saved positions (override computed layout)
+	for (const node of allNodes) {
+		const savedPos = saved[node.id];
+		if (savedPos) {
+			node.position = savedPos;
+		}
+	}
+
+	return {initialNodes: allNodes, initialEdges};
+}
diff --git a/interface/src/components/org/constants.ts b/interface/src/components/org/constants.ts
new file mode 100644
index 000000000..499260a2b
--- /dev/null
+++ b/interface/src/components/org/constants.ts
@@ -0,0 +1,17 @@
+export const EDGE_COLOR = "hsla(230, 10%, 35%, 0.6)";
+export const EDGE_COLOR_ACTIVE = "hsla(230, 10%, 55%, 0.9)";
+
+export const GROUP_COLORS = [
+	"#6366f1",
+	"#8b5cf6",
+	"#ec4899",
+	"#f59e0b",
+	"#22c55e",
+	"#06b6d4",
+	"#f97316",
+	"#14b8a6",
+];
+
+export const NODE_WIDTH = 240;
+export const GROUP_PADDING = 30;
+export const GROUP_HEADER = 36;
diff --git a/interface/src/components/org/handles.ts b/interface/src/components/org/handles.ts
new file mode 100644
index 000000000..5d8747101
--- /dev/null
+++ b/interface/src/components/org/handles.ts
@@ -0,0 +1,41 @@
+import type {LinkKind} from "@/api/client";
+
+/** Pick source/target handle IDs based on link kind and node positions. */
+export function getHandlesForKind(
+	kind: string,
+	sourcePos?: {x: number; y: number},
+	targetPos?: {x: number; y: number},
+	savedHandles?: {sourceHandle: string; targetHandle: string},
+): {
+	sourceHandle: string;
+	targetHandle: string;
+} {
+	// Use saved handles if available (user's explicit choice)
+	if (savedHandles) {
+		return savedHandles;
+	}
+
+	if (kind === "hierarchical") {
+		// from is above to: connect bottom of superior to top of subordinate
+		return {sourceHandle: "bottom", targetHandle: "top"};
+	}
+	// Peer: always use left/right handles (horizontal connections)
+	if (sourcePos && targetPos) {
+		const dx = targetPos.x - sourcePos.x;
+		return dx > 0
+			? {sourceHandle: "right", targetHandle: "left"}
+			: {sourceHandle: "left", targetHandle: "right"};
+	}
+	return {sourceHandle: "right", targetHandle: "left"};
+}
+
+/** Infer link kind from the handle the user dragged from. */
+export function inferKindFromHandle(sourceHandle: string | null): LinkKind {
+	switch (sourceHandle) {
+		case "top":
+		case "bottom":
+			return "hierarchical";
+		default:
+			return "peer";
+	}
+}
diff --git a/interface/src/components/org/index.ts b/interface/src/components/org/index.ts
new file mode 100644
index 000000000..2136d6fdd
--- /dev/null
+++ b/interface/src/components/org/index.ts
@@ -0,0 +1 @@
+export {OrgGraph, type OrgGraphProps} from "./OrgGraph";
diff --git a/interface/src/components/org/storage.ts b/interface/src/components/org/storage.ts
new file mode 100644
index 000000000..5d3d363e0
--- /dev/null
+++ b/interface/src/components/org/storage.ts
@@ -0,0 +1,43 @@
+import type {Node} from "@xyflow/react";
+
+export const POSITIONS_KEY = "spacebot:topology:positions";
+export const HANDLES_KEY = "spacebot:topology:handles";
+
+export type SavedPositions = Record<string, {x: number; y: number}>;
+
+export type SavedHandles = Record<
+	string,
+	{sourceHandle: string; targetHandle: string}
+>;
+
+export function loadPositions(): SavedPositions {
+	try {
+		const raw = localStorage.getItem(POSITIONS_KEY);
+		if (raw) return JSON.parse(raw);
+	} catch {
+		// ignore
+	}
+	return {};
+}
+
+export function savePositions(nodes: Node[]) {
+	const positions: SavedPositions = {};
+	for (const node of nodes) {
+		positions[node.id] = node.position;
+	}
+	try {
+		localStorage.setItem(POSITIONS_KEY, JSON.stringify(positions));
+	} catch {
+		// ignore
+	}
+}
+
+export function loadHandles(): SavedHandles {
+	try {
+		const raw = localStorage.getItem(HANDLES_KEY);
+		if (raw) return JSON.parse(raw);
+	} catch {
+		// ignore
+	}
+	return {};
+}
diff --git a/interface/src/components/portal/PortalActiveWorkers.tsx b/interface/src/components/portal/PortalActiveWorkers.tsx
new file mode 100644
index 000000000..615b7382a
--- /dev/null
+++ b/interface/src/components/portal/PortalActiveWorkers.tsx
@@ -0,0 +1,50 @@
+import { Link } from "@tanstack/react-router";
+import { isOpenCodeWorker, type ActiveWorker } from "@/hooks/useChannelLiveState";
+
+interface PortalActiveWorkersProps {
+	workers: ActiveWorker[];
+	agentId: string;
+}
+
+export function PortalActiveWorkers({ workers, agentId }: PortalActiveWorkersProps) {
+	if (workers.length === 0) return null;
+
+	return (
+		<div className="min-w-0 overflow-hidden rounded-lg border border-app-line/50 bg-app-box/30 px-3 py-2">
+			<div className="mb-2 flex items-center gap-1.5 text-tiny text-ink-dull">
+				<div className="h-1.5 w-1.5 animate-pulse rounded-full bg-accent" />
+				<span>
+					{workers.length} active worker{workers.length !== 1 ? "s" : ""}
+				</span>
+			</div>
+			<div className="flex flex-col gap-1.5">
+				{workers.map((worker) => {
+					const oc = isOpenCodeWorker(worker);
+					return (
+						<Link
+							key={worker.id}
+							to="/agents/$agentId/workers"
+							params={{ agentId }}
+							search={{ worker: worker.id }}
+							className="flex min-w-0 items-center gap-2 rounded-md bg-app-box/50 px-2.5 py-1.5 text-tiny transition-colors hover:bg-app-hover"
+						>
+							<div className="h-1.5 w-1.5 animate-pulse rounded-full bg-accent" />
+							<span className="font-medium text-ink">
+								{oc ? "OpenCode" : "Worker"}
+							</span>
+							<span className="min-w-0 flex-1 truncate text-ink-dull">
+								{worker.task}
+							</span>
+							<span className="shrink-0 text-ink-faint">{worker.status}</span>
+							{worker.currentTool && (
+								<span className="max-w-40 shrink-0 truncate text-ink-faint">
+									{worker.currentTool}
+								</span>
+							)}
+						</Link>
+					);
+				})}
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/components/portal/PortalComposer.tsx b/interface/src/components/portal/PortalComposer.tsx
new file mode 100644
index 000000000..a9396c750
--- /dev/null
+++ b/interface/src/components/portal/PortalComposer.tsx
@@ -0,0 +1,161 @@
+import { useRef, useState } from "react";
+import { ChatComposer, type ModelOption } from "@spacedrive/ai";
+import { usePopover } from "@spacedrive/primitives";
+import { Paperclip, X } from "@phosphor-icons/react";
+
+interface PortalComposerProps {
+	agentName: string;
+	draft: string;
+	onDraftChange: (value: string) => void;
+	onSend: () => void;
+	disabled: boolean;
+	modelOptions: ModelOption[];
+	selectedModel: string;
+	onSelectModel: (model: string) => void;
+	projectOptions: string[];
+	selectedProject: string;
+	onSelectProject: (project: string) => void;
+	pendingFiles: File[];
+	onAddFiles: (files: File[]) => void;
+	onRemoveFile: (index: number) => void;
+}
+
+/**
+ * Portal chat composer — wraps @spacedrive/ai's ChatComposer with spacebot
+ * project + model selectors, a per-agent placeholder, and file attachment support.
+ */
+export function PortalComposer({
+	agentName,
+	draft,
+	onDraftChange,
+	onSend,
+	disabled,
+	modelOptions,
+	selectedModel,
+	onSelectModel,
+	projectOptions,
+	selectedProject,
+	onSelectProject,
+	pendingFiles,
+	onAddFiles,
+	onRemoveFile,
+}: PortalComposerProps) {
+	const projectPopover = usePopover();
+	const fileInputRef = useRef<HTMLInputElement>(null);
+	const [isDragging, setIsDragging] = useState(false);
+	const dragCounter = useRef(0);
+
+	const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const files = Array.from(e.target.files ?? []);
+		if (files.length > 0) onAddFiles(files);
+		// Reset so the same file can be re-selected if removed.
+		e.target.value = "";
+	};
+
+	const handleDragEnter = (e: React.DragEvent) => {
+		e.preventDefault();
+		dragCounter.current++;
+		if (e.dataTransfer.types.includes("Files")) setIsDragging(true);
+	};
+
+	const handleDragOver = (e: React.DragEvent) => {
+		e.preventDefault();
+		e.dataTransfer.dropEffect = "copy";
+	};
+
+	const handleDragLeave = (e: React.DragEvent) => {
+		e.preventDefault();
+		dragCounter.current--;
+		if (dragCounter.current === 0) setIsDragging(false);
+	};
+
+	const handleDrop = (e: React.DragEvent) => {
+		e.preventDefault();
+		dragCounter.current = 0;
+		setIsDragging(false);
+		const files = Array.from(e.dataTransfer.files);
+		if (files.length > 0) onAddFiles(files);
+	};
+
+	const paperclipButton = (
+		<>
+			<input
+				ref={fileInputRef}
+				type="file"
+				multiple
+				className="hidden"
+				onChange={handleFileChange}
+			/>
+			<button
+				type="button"
+				onClick={() => fileInputRef.current?.click()}
+				className="text-ink-faint hover:text-ink flex h-9 w-9 items-center justify-center rounded-full transition-colors"
+				title="Attach files"
+			>
+				<Paperclip size={16} />
+			</button>
+		</>
+	);
+
+	return (
+		<div
+			className="relative flex flex-col gap-2"
+			onDragEnter={handleDragEnter}
+			onDragOver={handleDragOver}
+			onDragLeave={handleDragLeave}
+			onDrop={handleDrop}
+		>
+			{isDragging && (
+				<div className="border-accent bg-accent/10 pointer-events-none absolute inset-0 z-20 flex items-center justify-center rounded-2xl border-2 border-dashed">
+					<p className="text-accent text-sm font-medium">Drop files to attach</p>
+				</div>
+			)}
+			{pendingFiles.length > 0 && (
+				<div className="flex flex-wrap gap-1.5 px-1">
+					{pendingFiles.map((file, i) => (
+						<div
+							key={`${file.name}-${file.size}-${i}`}
+							className="bg-app-box border-app-line flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs"
+						>
+							<span className="text-ink max-w-[160px] truncate">{file.name}</span>
+							<button
+								type="button"
+								onClick={() => onRemoveFile(i)}
+								className="text-ink-faint hover:text-ink ml-0.5 flex-shrink-0 transition-colors"
+							>
+								<X size={12} weight="bold" />
+							</button>
+						</div>
+					))}
+				</div>
+			)}
+			<ChatComposer
+				draft={draft}
+				onDraftChange={onDraftChange}
+				onSend={onSend}
+				placeholder={disabled ? "Waiting for response..." : `Message ${agentName}...`}
+				isSending={disabled}
+				toolbarExtra={paperclipButton}
+				projectSelector={
+					projectOptions.length > 0
+						? {
+								value: selectedProject,
+								options: projectOptions,
+								onChange: onSelectProject,
+								popover: projectPopover,
+							}
+						: undefined
+				}
+				modelSelector={
+					modelOptions.length > 0
+						? {
+								value: selectedModel,
+								options: modelOptions,
+								onChange: onSelectModel,
+							}
+						: undefined
+				}
+			/>
+		</div>
+	);
+}
diff --git a/interface/src/components/portal/PortalEmpty.tsx b/interface/src/components/portal/PortalEmpty.tsx
new file mode 100644
index 000000000..dddcf2bd4
--- /dev/null
+++ b/interface/src/components/portal/PortalEmpty.tsx
@@ -0,0 +1,16 @@
+interface PortalEmptyProps {
+	agentName: string;
+}
+
+export function PortalEmpty({ agentName }: PortalEmptyProps) {
+	return (
+		<div className="mb-6 text-left">
+			<h1 className="text-ink text-[2.65rem] font-semibold tracking-tight">
+				Let&apos;s get to work
+			</h1>
+			<p className="text-ink-dull mt-2 text-sm">
+				Start a conversation with {agentName}.
+			</p>
+		</div>
+	);
+}
diff --git a/interface/src/components/portal/PortalHeader.tsx b/interface/src/components/portal/PortalHeader.tsx
new file mode 100644
index 000000000..2dbf3b557
--- /dev/null
+++ b/interface/src/components/portal/PortalHeader.tsx
@@ -0,0 +1,172 @@
+import {
+	CircleButton,
+	PopoverRoot,
+	PopoverTrigger,
+	PopoverContent,
+	Button,
+} from "@spacedrive/primitives";
+import {GearSix, ClockCounterClockwise} from "@phosphor-icons/react";
+import {useState} from "react";
+import {WorkersPanelContent} from "@/components/WorkersPanel";
+import {ConversationSettingsPanel} from "@/components/ConversationSettingsPanel";
+import {PortalHistoryPopover} from "./PortalHistoryPopover";
+import type {
+	ConversationDefaultsResponse,
+	ConversationSettings,
+} from "@/api/client";
+import type {PortalConversationSummary} from "@/api/types";
+import type {ActiveWorker} from "@/hooks/useChannelLiveState";
+
+interface PortalHeaderProps {
+	title: string;
+	modelLabel?: string;
+	responseMode?: string;
+	activeWorkers?: ActiveWorker[];
+
+	// Settings popover
+	showSettings: boolean;
+	onToggleSettings: (open: boolean) => void;
+	defaults: ConversationDefaultsResponse | undefined;
+	defaultsLoading: boolean;
+	defaultsError: Error | null;
+	settings: ConversationSettings;
+	onSettingsChange: (settings: ConversationSettings) => void;
+	onSaveSettings: () => void;
+	saving: boolean;
+
+	// Conversation actions
+	conversations: PortalConversationSummary[];
+	activeConversationId: string;
+	onNewConversation: () => void;
+	onSelectConversation: (id: string) => void;
+	onDeleteConversation: (id: string) => void;
+	onArchiveConversation: (id: string, archived: boolean) => void;
+	showHistory: boolean;
+	onToggleHistory: (open: boolean) => void;
+}
+
+export function PortalHeader({
+	title,
+	modelLabel,
+	responseMode,
+	activeWorkers = [],
+	showSettings,
+	onToggleSettings,
+	defaults,
+	defaultsLoading,
+	defaultsError,
+	settings,
+	onSettingsChange,
+	onSaveSettings,
+	saving,
+	conversations,
+	activeConversationId,
+	onNewConversation,
+	onSelectConversation,
+	onDeleteConversation,
+	onArchiveConversation,
+	showHistory,
+	onToggleHistory,
+}: PortalHeaderProps) {
+	const [showWorkers, setShowWorkers] = useState(false);
+
+	return (
+		<div className="flex items-center justify-between border-b border-app-line bg-app px-4 py-2">
+			<div className="flex items-center gap-2">
+				<h2 className="text-sm font-medium text-ink">{title}</h2>
+				{modelLabel && (
+					<span className="text-xs text-ink-faint">{modelLabel}</span>
+				)}
+				{responseMode === "observe" && (
+					<span className="rounded-md bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-400">
+						Observe
+					</span>
+				)}
+				{responseMode === "mention_only" && (
+					<span className="rounded-md bg-red-500/10 px-1.5 py-0.5 text-[10px] font-medium text-red-400">
+						Mention Only
+					</span>
+				)}
+				{activeWorkers.length > 0 && (
+					<PopoverRoot open={showWorkers} onOpenChange={setShowWorkers}>
+						<PopoverTrigger asChild>
+							<Button variant="gray" size="md">
+								<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-accent" />
+								{activeWorkers.length} worker
+								{activeWorkers.length !== 1 ? "s" : ""}
+							</Button>
+						</PopoverTrigger>
+						<PopoverContent
+							align="start"
+							sideOffset={8}
+							collisionPadding={16}
+							className="w-[420px] p-0"
+						>
+							<WorkersPanelContent />
+						</PopoverContent>
+					</PopoverRoot>
+				)}
+			</div>
+
+			<div className="flex items-center gap-2">
+				<Button variant="gray" size="md" onClick={onNewConversation}>
+					New conversation
+				</Button>
+
+				<PopoverRoot open={showHistory} onOpenChange={onToggleHistory}>
+					<PopoverTrigger asChild>
+						<CircleButton icon={ClockCounterClockwise} title="History" />
+					</PopoverTrigger>
+					<PopoverContent
+						align="end"
+						sideOffset={4}
+						collisionPadding={16}
+						className="w-80 p-0"
+					>
+						<PortalHistoryPopover
+							conversations={conversations}
+							activeConversationId={activeConversationId}
+							onSelect={(id) => {
+								onSelectConversation(id);
+								onToggleHistory(false);
+							}}
+							onDelete={onDeleteConversation}
+							onArchive={onArchiveConversation}
+						/>
+					</PopoverContent>
+				</PopoverRoot>
+
+				<PopoverRoot open={showSettings} onOpenChange={onToggleSettings}>
+					<PopoverTrigger asChild>
+						<CircleButton icon={GearSix} title="Settings" />
+					</PopoverTrigger>
+					<PopoverContent
+						align="end"
+						sideOffset={4}
+						collisionPadding={16}
+						className="max-h-[80vh] w-96 overflow-y-auto p-3"
+					>
+						{defaultsLoading ? (
+							<div className="py-4 text-center text-xs text-ink-faint">
+								Loading...
+							</div>
+						) : defaults ? (
+							<ConversationSettingsPanel
+								defaults={defaults}
+								currentSettings={settings}
+								onChange={onSettingsChange}
+								onSave={onSaveSettings}
+								onCancel={() => onToggleSettings(false)}
+								saving={saving}
+							/>
+						) : (
+							<div className="py-4 text-center text-xs text-red-400">
+								{defaultsError?.message ?? "Failed to load settings"}
+							</div>
+						)}
+					</PopoverContent>
+				</PopoverRoot>
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/components/portal/PortalHistoryPopover.tsx b/interface/src/components/portal/PortalHistoryPopover.tsx
new file mode 100644
index 000000000..3ac655a06
--- /dev/null
+++ b/interface/src/components/portal/PortalHistoryPopover.tsx
@@ -0,0 +1,166 @@
+import { useState } from "react";
+import { SearchBar } from "@spacedrive/primitives";
+import type { PortalConversationSummary } from "@/api/types";
+
+interface PortalHistoryPopoverProps {
+	conversations: PortalConversationSummary[];
+	activeConversationId: string | null;
+	onSelect: (id: string) => void;
+	onDelete: (id: string) => void;
+	onArchive: (id: string, archived: boolean) => void;
+}
+
+function formatTimestamp(iso: string): string {
+	const date = new Date(iso);
+	const now = new Date();
+	const diff = now.getTime() - date.getTime();
+	const minutes = Math.floor(diff / 60_000);
+	if (minutes < 1) return "just now";
+	if (minutes < 60) return `${minutes}m`;
+	const hours = Math.floor(minutes / 60);
+	if (hours < 24) return `${hours}h`;
+	const days = Math.floor(hours / 24);
+	if (days < 7) return `${days}d`;
+	return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
+
+export function PortalHistoryPopover({
+	conversations,
+	activeConversationId,
+	onSelect,
+	onDelete,
+	onArchive,
+}: PortalHistoryPopoverProps) {
+	const [search, setSearch] = useState("");
+
+	const q = search.trim().toLowerCase();
+	const filtered = conversations.filter((conv) => {
+		if (!q) return true;
+		return (
+			conv.title.toLowerCase().includes(q) ||
+			(conv.last_message_preview?.toLowerCase().includes(q) ?? false)
+		);
+	});
+
+	const active = filtered.filter((c) => !c.archived);
+	const archived = filtered.filter((c) => c.archived);
+
+	return (
+		<div className="flex max-h-[70vh] w-full flex-col">
+			<div className="border-b border-app-line/40 p-2">
+				<SearchBar
+					value={search}
+					onChange={setSearch}
+					placeholder="Search conversations..."
+				/>
+			</div>
+
+			<div className="flex-1 overflow-y-auto p-1">
+				{active.length === 0 && archived.length === 0 && (
+					<div className="px-3 py-6 text-center text-xs text-ink-faint">
+						{q ? "No matching conversations" : "No conversations yet"}
+					</div>
+				)}
+
+				{active.length > 0 && (
+					<div className="space-y-px">
+						{active.map((conv) => (
+							<HistoryRow
+								key={conv.id}
+								conv={conv}
+								isActive={conv.id === activeConversationId}
+								onSelect={() => onSelect(conv.id)}
+								onArchive={() => onArchive(conv.id, true)}
+								onDelete={() => onDelete(conv.id)}
+							/>
+						))}
+					</div>
+				)}
+
+				{archived.length > 0 && (
+					<div className="mt-3">
+						<div className="px-2 pb-1 text-[10px] font-semibold uppercase tracking-wider text-ink-faint">
+							Archived
+						</div>
+						<div className="space-y-px">
+							{archived.map((conv) => (
+								<HistoryRow
+									key={conv.id}
+									conv={conv}
+									isActive={conv.id === activeConversationId}
+									onSelect={() => onSelect(conv.id)}
+									onArchive={() => onArchive(conv.id, false)}
+									onDelete={() => onDelete(conv.id)}
+									archived
+								/>
+							))}
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+function HistoryRow({
+	conv,
+	isActive,
+	onSelect,
+	onArchive,
+	onDelete,
+	archived = false,
+}: {
+	conv: PortalConversationSummary;
+	isActive: boolean;
+	onSelect: () => void;
+	onArchive: () => void;
+	onDelete: () => void;
+	archived?: boolean;
+}) {
+	return (
+		<div
+			className={`group flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-xs transition-colors ${
+				isActive ? "bg-app-hover text-ink" : "text-ink-dull hover:bg-app-hover/50 hover:text-ink"
+			}`}
+			onClick={onSelect}
+		>
+			<div className="min-w-0 flex-1">
+				<div className="truncate font-medium">{conv.title}</div>
+				{conv.last_message_preview && (
+					<div className="mt-0.5 truncate text-[10px] text-ink-faint">
+						{conv.last_message_preview}
+					</div>
+				)}
+			</div>
+			<span className="shrink-0 text-[10px] text-ink-faint group-hover:hidden">
+				{formatTimestamp(conv.updated_at)}
+			</span>
+			<div className="hidden shrink-0 items-center gap-0.5 group-hover:flex">
+				<button
+					onClick={(e) => {
+						e.stopPropagation();
+						onArchive();
+					}}
+					className="rounded p-0.5 text-ink-faint hover:bg-app-hover hover:text-ink"
+					title={archived ? "Unarchive" : "Archive"}
+				>
+					<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+						<path d="M21 8v13H3V8M1 3h22v5H1zM10 12h4" />
+					</svg>
+				</button>
+				<button
+					onClick={(e) => {
+						e.stopPropagation();
+						onDelete();
+					}}
+					className="rounded p-0.5 text-ink-faint hover:bg-red-500/20 hover:text-red-400"
+					title="Delete"
+				>
+					<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+						<path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+					</svg>
+				</button>
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/components/portal/PortalPanel.tsx b/interface/src/components/portal/PortalPanel.tsx
new file mode 100644
index 000000000..8c82c8d4e
--- /dev/null
+++ b/interface/src/components/portal/PortalPanel.tsx
@@ -0,0 +1,308 @@
+import { useEffect, useRef, useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { usePortal, getPortalSessionId } from "@/hooks/usePortal";
+import { useLiveContext } from "@/hooks/useLiveContext";
+import { api, type ConversationDefaultsResponse, type ConversationSettings } from "@/api/client";
+import { PortalHeader } from "./PortalHeader";
+import { PortalTimeline } from "./PortalTimeline";
+import { PortalComposer } from "./PortalComposer";
+import { PortalEmpty } from "./PortalEmpty";
+
+interface PortalPanelProps {
+	agentId: string;
+}
+
+export function PortalPanel({ agentId }: PortalPanelProps) {
+	const queryClient = useQueryClient();
+	const [activeConversationId, setActiveConversationId] = useState<string>(
+		getPortalSessionId(agentId),
+	);
+	const { isSending, error, sendMessage } = usePortal(agentId, activeConversationId);
+	const { liveStates } = useLiveContext();
+	const [input, setInput] = useState("");
+	const [showSettings, setShowSettings] = useState(false);
+	const [showHistory, setShowHistory] = useState(false);
+	const [settings, setSettings] = useState<ConversationSettings>({});
+	const [pendingFiles, setPendingFiles] = useState<File[]>([]);
+	const [sendCount, setSendCount] = useState(0);
+	// Track uploaded attachment IDs keyed by file name+size for deduplication.
+	const uploadedIds = useRef<Map<string, string>>(new Map());
+
+	// Fetch conversations list
+	const { data: conversationsData } = useQuery({
+		queryKey: ["portal-conversations", agentId],
+		queryFn: () => api.listPortalConversations(agentId),
+	});
+
+	const conversations = conversationsData?.conversations ?? [];
+
+	// Auto-select the newest conversation on first load
+	useEffect(() => {
+		if (conversations.length === 0) return;
+		const isPlaceholder = activeConversationId === getPortalSessionId(agentId);
+		if (!isPlaceholder) return;
+		const newest = conversations[0];
+		if (newest) setActiveConversationId(newest.id);
+	}, [conversationsData, agentId]);
+
+	// Hydrate settings from cached data when switching conversations. The ref
+	// prevents background conversation refetches from clobbering edits the user
+	// has made since we last hydrated.
+	const hydratedSettingsFor = useRef<string | null>(null);
+	useEffect(() => {
+		if (hydratedSettingsFor.current === activeConversationId) return;
+		const activeConv = conversations.find((c) => c.id === activeConversationId);
+		if (!activeConv) return;
+		setSettings((activeConv.settings ?? {}) as ConversationSettings);
+		setShowSettings(false);
+		hydratedSettingsFor.current = activeConversationId;
+	}, [activeConversationId, conversations]);
+
+	const {
+		data: defaults,
+		isLoading: defaultsLoading,
+		error: defaultsError,
+	} = useQuery<ConversationDefaultsResponse>({
+		queryKey: ["conversation-defaults", agentId],
+		queryFn: () => api.getConversationDefaults(agentId),
+	});
+
+	const { data: projectsData } = useQuery({
+		queryKey: ["projects"],
+		queryFn: () => api.listProjects("active"),
+		staleTime: 30_000,
+	});
+	const projects = projectsData?.projects ?? [];
+	const projectOptions = projects.map((p) => p.name);
+	const [selectedProject, setSelectedProject] = useState<string>("");
+	useEffect(() => {
+		if (!selectedProject && projectOptions.length > 0) {
+			setSelectedProject(projectOptions[0]);
+		}
+	}, [projectOptions, selectedProject]);
+
+	const agentsQuery = useQuery({
+		queryKey: ["agents"],
+		queryFn: () => api.agents(),
+		staleTime: 10_000,
+	});
+	const agentDisplayName =
+		agentsQuery.data?.agents.find((a) => a.id === agentId)?.display_name ?? agentId;
+
+	const liveState = liveStates[activeConversationId];
+	const timeline = liveState?.timeline ?? [];
+	const isTyping = liveState?.isTyping ?? false;
+	const activeWorkers = Object.values(liveState?.workers ?? {});
+
+	const createConversationMutation = useMutation({
+		mutationFn: () => api.createPortalConversation(agentId),
+		onSuccess: (data) => {
+			setActiveConversationId(data.conversation.id);
+			queryClient.invalidateQueries({ queryKey: ["portal-conversations", agentId] });
+		},
+	});
+
+	const deleteConversationMutation = useMutation({
+		mutationFn: (id: string) => api.deletePortalConversation(agentId, id),
+		onSuccess: (_, deletedId) => {
+			if (activeConversationId === deletedId) {
+				setActiveConversationId(getPortalSessionId(agentId));
+			}
+			queryClient.invalidateQueries({ queryKey: ["portal-conversations", agentId] });
+		},
+	});
+
+	const archiveConversationMutation = useMutation({
+		mutationFn: ({ id, archived }: { id: string; archived: boolean }) =>
+			api.updatePortalConversation(agentId, id, undefined, archived),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["portal-conversations", agentId] });
+		},
+	});
+
+	const saveSettingsMutation = useMutation({
+		mutationFn: () =>
+			api.updatePortalConversation(
+				agentId,
+				activeConversationId,
+				undefined,
+				undefined,
+				settings,
+			),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["portal-conversations", agentId] });
+			setShowSettings(false);
+		},
+	});
+
+	const handleAddFiles = (files: File[]) => {
+		setPendingFiles((prev) => [...prev, ...files]);
+	};
+
+	const handleRemoveFile = (index: number) => {
+		setPendingFiles((prev) => prev.filter((_, i) => i !== index));
+	};
+
+	const handleSubmit = async () => {
+		const trimmed = input.trim();
+		if (!trimmed || isSending) return;
+		setInput("");
+
+		// Upload any pending files and collect their IDs.
+		let attachmentIds: string[] = [];
+		if (pendingFiles.length > 0) {
+			const filesToUpload = pendingFiles;
+			setPendingFiles([]);
+
+			const ids = await Promise.all(
+				filesToUpload.map(async (file) => {
+					const key = `${file.name}:${file.size}`;
+					const cached = uploadedIds.current.get(key);
+					if (cached) return cached;
+
+					try {
+						const response = await api.uploadAttachment(agentId, activeConversationId, file);
+						if (!response.ok) return null;
+						const data: { id: string } = await response.json();
+						uploadedIds.current.set(key, data.id);
+						return data.id;
+					} catch {
+						return null;
+					}
+				}),
+			);
+			attachmentIds = ids.filter((id): id is string => id !== null);
+		}
+
+		setSendCount((n) => n + 1);
+		sendMessage(trimmed, attachmentIds.length > 0 ? attachmentIds : undefined);
+	};
+
+	const modelLabel = defaults
+		? (defaults.available_models.find(
+				(m) => m.id === (settings.model || defaults.model),
+			)?.name ?? settings.model ?? defaults.model)
+		: undefined;
+
+	const isEmpty = timeline.length === 0 && !isTyping;
+
+	return (
+		<div className="relative flex h-full w-full min-w-0 flex-col">
+				{/* Grid background with accent glow — empty state only */}
+				{isEmpty && (
+					<>
+						<div
+							aria-hidden="true"
+							className="pointer-events-none absolute inset-0 z-0 opacity-100"
+							style={{
+								backgroundImage:
+									'linear-gradient(to right, color-mix(in srgb, var(--color-app-line) 45%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--color-app-line) 45%, transparent) 1px, transparent 1px)',
+								backgroundSize: '28px 28px',
+								maskImage:
+									'linear-gradient(to bottom, rgba(0,0,0,0.42), rgba(0,0,0,0.08))',
+								WebkitMaskImage:
+									'linear-gradient(to bottom, rgba(0,0,0,0.42), rgba(0,0,0,0.08))',
+							}}
+						/>
+						<div
+							aria-hidden="true"
+							className="pointer-events-none absolute inset-0 z-0"
+							style={{
+								background:
+									'radial-gradient(circle at top, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 42%)',
+							}}
+						/>
+					</>
+				)}
+
+				<div className="relative z-10 flex min-h-0 flex-1 flex-col">
+				<PortalHeader
+					title={agentDisplayName}
+					modelLabel={modelLabel}
+					responseMode={settings.response_mode}
+					activeWorkers={activeWorkers}
+					showSettings={showSettings}
+					onToggleSettings={setShowSettings}
+					defaults={defaults}
+					defaultsLoading={defaultsLoading}
+					defaultsError={defaultsError as Error | null}
+					settings={settings}
+					onSettingsChange={setSettings}
+					onSaveSettings={() => saveSettingsMutation.mutate()}
+					saving={saveSettingsMutation.isPending}
+					conversations={conversations}
+					activeConversationId={activeConversationId}
+					onNewConversation={() => createConversationMutation.mutate()}
+					onSelectConversation={setActiveConversationId}
+					onDeleteConversation={(id) => deleteConversationMutation.mutate(id)}
+					onArchiveConversation={(id, archived) =>
+						archiveConversationMutation.mutate({ id, archived })
+					}
+					showHistory={showHistory}
+					onToggleHistory={setShowHistory}
+				/>
+
+				{isEmpty ? (
+					<div className="flex flex-1 items-center justify-center py-10">
+						<div className="w-full max-w-2xl px-6">
+							<PortalEmpty agentName={agentDisplayName} />
+							<PortalComposer
+								agentName={agentDisplayName}
+								draft={input}
+								onDraftChange={setInput}
+								onSend={() => void handleSubmit()}
+								disabled={isSending || isTyping}
+								modelOptions={defaults?.available_models ?? []}
+								selectedModel={settings.model || defaults?.model || ""}
+								onSelectModel={(model) => setSettings((s) => ({ ...s, model }))}
+								projectOptions={projectOptions}
+								selectedProject={selectedProject}
+								onSelectProject={setSelectedProject}
+								pendingFiles={pendingFiles}
+								onAddFiles={handleAddFiles}
+								onRemoveFile={handleRemoveFile}
+							/>
+						</div>
+					</div>
+				) : (
+					<>
+						<PortalTimeline
+							agentId={agentId}
+							conversationId={activeConversationId}
+							timeline={timeline}
+							isTyping={isTyping}
+							sendCount={sendCount}
+						/>
+
+						{error && (
+							<div className="mx-4 mb-2 rounded-lg border border-red-500/20 bg-red-500/5 px-4 py-3 text-sm text-red-400">
+								{error}
+							</div>
+						)}
+
+						<div className="absolute inset-x-0 bottom-0 z-10 p-4 bg-gradient-to-t from-app via-app/80 to-transparent pt-8 pointer-events-none">
+							<div className="mx-auto w-full max-w-3xl pointer-events-auto">
+								<PortalComposer
+									agentName={agentDisplayName}
+									draft={input}
+									onDraftChange={setInput}
+									onSend={() => void handleSubmit()}
+									disabled={isSending || isTyping}
+									modelOptions={defaults?.available_models ?? []}
+									selectedModel={settings.model || defaults?.model || ""}
+									onSelectModel={(model) => setSettings((s) => ({ ...s, model }))}
+									projectOptions={projectOptions}
+									selectedProject={selectedProject}
+									onSelectProject={setSelectedProject}
+									pendingFiles={pendingFiles}
+									onAddFiles={handleAddFiles}
+									onRemoveFile={handleRemoveFile}
+								/>
+							</div>
+						</div>
+					</>
+				)}
+				</div>
+		</div>
+	);
+}
diff --git a/interface/src/components/portal/PortalTimeline.tsx b/interface/src/components/portal/PortalTimeline.tsx
new file mode 100644
index 000000000..f0fead486
--- /dev/null
+++ b/interface/src/components/portal/PortalTimeline.tsx
@@ -0,0 +1,329 @@
+import {useEffect, useRef} from "react";
+import {useQuery} from "@tanstack/react-query";
+import {InlineBranchCard, MessageBubble} from "@spacedrive/ai";
+import {File as FileIcon} from "@phosphor-icons/react";
+import {api, type AttachmentMeta, type TimelineBranchRun, type TimelineItem, type WorkerListItem} from "@/api/client";
+import {ToolCall, type ToolCallPair, tryParseJson, isErrorResult} from "@/components/ToolCall";
+import {PortalWorkerCard} from "./PortalWorkerCard";
+import clsx from "clsx";
+
+function formatFileSize(bytes: number): string {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/** User message bubble with attachments rendered inline at the top. */
+function UserMessageWithAttachments({
+	content,
+	attachments,
+	agentId,
+}: {
+	content: string;
+	attachments: AttachmentMeta[];
+	agentId: string;
+}) {
+	const images = attachments.filter((a) => a.mime_type.startsWith("image/"));
+	const files = attachments.filter((a) => !a.mime_type.startsWith("image/"));
+
+	return (
+		<div className="group flex flex-col items-end py-2">
+			<div className="max-w-[80%] overflow-hidden rounded-2xl bg-accent text-sm leading-6 text-white">
+				{images.length > 0 && (
+					<div className={clsx(images.length === 1 ? "" : "grid grid-cols-2 gap-px")}>
+						{images.map((att) => (
+							<a
+								key={att.id}
+								href={api.attachmentUrl(agentId, att.id)}
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<img
+									src={api.attachmentUrl(agentId, att.id)}
+									alt={att.filename}
+									className="max-h-72 w-full object-cover"
+									loading="lazy"
+								/>
+							</a>
+						))}
+					</div>
+				)}
+				{files.length > 0 && (
+					<div className="flex flex-wrap gap-1.5 px-3 pt-2.5">
+						{files.map((att) => (
+							<a
+								key={att.id}
+								href={api.attachmentUrl(agentId, att.id, {download: true})}
+								download={att.filename}
+								className="flex items-center gap-1.5 rounded-md bg-white/20 px-2 py-1 text-xs transition-colors hover:bg-white/30"
+							>
+								<FileIcon size={12} className="flex-shrink-0" />
+								<span className="max-w-[160px] truncate">{att.filename}</span>
+								<span className="opacity-70">{formatFileSize(att.size_bytes)}</span>
+							</a>
+						))}
+					</div>
+				)}
+				{content && (
+					<div
+						className={clsx(
+							"px-4 py-2 whitespace-pre-wrap break-words",
+							(images.length > 0 || files.length > 0) && "pt-1.5",
+						)}
+					>
+						{content}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+/** Attachments shown below an assistant message, inline with the thread. */
+function AssistantAttachments({
+	agentId,
+	attachments,
+}: {
+	agentId: string;
+	attachments: AttachmentMeta[];
+}) {
+	if (attachments.length === 0) return null;
+
+	const images = attachments.filter((a) => a.mime_type.startsWith("image/"));
+	const files = attachments.filter((a) => !a.mime_type.startsWith("image/"));
+
+	return (
+		<div className="mt-2 flex flex-col gap-2">
+			{images.length > 0 && (
+				<div className={clsx("flex flex-wrap gap-2")}>
+					{images.map((att) => (
+						<a
+							key={att.id}
+							href={api.attachmentUrl(agentId, att.id)}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="block overflow-hidden rounded-lg"
+						>
+							<img
+								src={api.attachmentUrl(agentId, att.id)}
+								alt={att.filename}
+								className="max-h-64 max-w-xs rounded-lg object-cover"
+								loading="lazy"
+							/>
+						</a>
+					))}
+				</div>
+			)}
+			{files.length > 0 && (
+				<div className="flex flex-wrap gap-2">
+					{files.map((att) => (
+						<a
+							key={att.id}
+							href={api.attachmentUrl(agentId, att.id, {download: true})}
+							download={att.filename}
+							className="border-app-line bg-app-box hover:bg-app-box/80 flex items-center gap-2 rounded-lg border px-3 py-2 text-sm transition-colors"
+						>
+							<FileIcon size={16} className="text-ink-faint flex-shrink-0" />
+							<div className="min-w-0">
+								<div className="text-ink max-w-[200px] truncate">{att.filename}</div>
+								<div className="text-ink-faint text-xs">{formatFileSize(att.size_bytes)}</div>
+							</div>
+						</a>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}
+
+interface PortalTimelineProps {
+	agentId: string;
+	conversationId: string;
+	timeline: TimelineItem[];
+	isTyping: boolean;
+	sendCount: number;
+}
+
+function ThinkingIndicator() {
+	return (
+		<div className="flex items-center gap-1.5 py-1">
+			<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-ink-faint" />
+			<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-ink-faint [animation-delay:0.2s]" />
+			<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-ink-faint [animation-delay:0.4s]" />
+		</div>
+	);
+}
+
+/** Synthesize a minimal WorkerListItem from a timeline item when the workers
+ * list hasn't caught up yet. */
+function synthesizeWorker(
+	item: Extract<TimelineItem, {type: "worker_run"}>,
+	channelId: string,
+): WorkerListItem {
+	return {
+		id: item.id,
+		task: item.task,
+		status: item.status,
+		started_at: item.started_at,
+		completed_at: item.completed_at ?? null,
+		channel_id: channelId,
+		channel_name: null,
+		has_transcript: true,
+		worker_type: "builtin",
+		tool_calls: 0,
+		live_status: null,
+		interactive: false,
+		directory: null,
+		opencode_port: null,
+		opencode_session_id: null,
+	};
+}
+
+
+export function PortalTimeline({
+	agentId,
+	conversationId,
+	timeline,
+	isTyping,
+	sendCount,
+}: PortalTimelineProps) {
+	const scrollRef = useRef<HTMLDivElement>(null);
+	const previousLengthRef = useRef(0);
+
+	// Fetch workers for this channel to resolve worker_run items.
+	const workersQuery = useQuery({
+		queryKey: ["portal-workers", agentId, conversationId],
+		queryFn: () => api.workersList(agentId, {limit: 20}),
+		enabled: Boolean(conversationId),
+		refetchInterval: 2000,
+	});
+
+	// Filter workers for this conversation.
+	const conversationWorkers = (workersQuery.data?.workers ?? []).filter(
+		(w) => w.channel_id === conversationId,
+	);
+	const workerIds = new Set(conversationWorkers.map((w) => w.id));
+
+	// Filter worker_run items to only those matching workers we've seen.
+	// Messages and other item types always render.
+	const visibleItems = timeline.filter((item) => {
+		if (item.type !== "worker_run") return true;
+		return workerIds.has(item.id);
+	});
+
+	// Smart auto-scroll: only when near bottom
+	useEffect(() => {
+		const element = scrollRef.current;
+		if (!element) return;
+
+		const previousLength = previousLengthRef.current;
+		const currentLength = visibleItems.length;
+		const distanceFromBottom =
+			element.scrollHeight - element.scrollTop - element.clientHeight;
+		const isNearBottom = distanceFromBottom < 160;
+		const shouldAutoScroll =
+			(currentLength > previousLength || isTyping) &&
+			(previousLength === 0 || isNearBottom);
+
+		if (shouldAutoScroll) {
+			requestAnimationFrame(() => {
+				element.scrollTo({top: element.scrollHeight, behavior: "auto"});
+			});
+		}
+
+		previousLengthRef.current = currentLength;
+	}, [visibleItems.length, isTyping]);
+
+	// Always scroll to bottom when the user sends a message.
+	useEffect(() => {
+		if (sendCount === 0) return;
+		const element = scrollRef.current;
+		if (!element) return;
+		requestAnimationFrame(() => {
+			element.scrollTo({top: element.scrollHeight, behavior: "smooth"});
+		});
+	}, [sendCount]);
+
+	const copyMessage = async (content: string) => {
+		await navigator.clipboard.writeText(content);
+	};
+
+	return (
+		<div ref={scrollRef} className="flex-1 overflow-x-hidden overflow-y-auto">
+			<div className="mx-auto flex max-w-3xl flex-col gap-2 px-4 py-6 pb-[180px]">
+				{visibleItems.map((item) => {
+					if (item.type === "message") {
+						const attachments = item.attachments ?? [];
+						if (item.role === "user" && attachments.length > 0) {
+							return (
+								<UserMessageWithAttachments
+									key={item.id}
+									content={item.content}
+									attachments={attachments}
+									agentId={agentId}
+								/>
+							);
+						}
+						return (
+							<div key={item.id}>
+								<MessageBubble
+									content={item.content}
+									isUser={item.role === "user"}
+									onCopy={(content) => void copyMessage(content)}
+								/>
+								{attachments.length > 0 && (
+									<AssistantAttachments agentId={agentId} attachments={attachments} />
+								)}
+							</div>
+						);
+					}
+					if (item.type === "branch_run") {
+						return (
+							<div key={item.id} className="py-1">
+								<InlineBranchCard
+								description={(item as TimelineBranchRun).description}
+								completedAt={(item as TimelineBranchRun).completed_at ?? null}
+								conclusion={(item as TimelineBranchRun).conclusion}
+							/>
+							</div>
+						);
+					}
+					if (item.type === "worker_run") {
+						const worker =
+							conversationWorkers.find((w) => w.id === item.id) ??
+							synthesizeWorker(item, conversationId);
+						return (
+							<div key={item.id} className="py-2">
+								<PortalWorkerCard agentId={agentId} worker={worker} />
+							</div>
+						);
+					}
+					if (item.type === "tool_call_run") {
+						const parsedArgs = tryParseJson(item.args);
+						const parsedResult = item.result ? tryParseJson(item.result) : null;
+						const pair: ToolCallPair = {
+							id: item.id,
+							name: item.tool_name,
+							argsRaw: item.args,
+							args: parsedArgs,
+							resultRaw: item.result ?? null,
+							result: parsedResult,
+							status: item.status === "running"
+								? "running"
+								: item.result && isErrorResult(item.result, parsedResult)
+									? "error"
+									: "completed",
+						};
+						return (
+							<div key={item.id} className="py-1">
+								<ToolCall pair={pair} />
+							</div>
+						);
+					}
+					return null;
+				})}
+				{isTyping && <ThinkingIndicator />}
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/components/portal/PortalWorkerCard.tsx b/interface/src/components/portal/PortalWorkerCard.tsx
new file mode 100644
index 000000000..deb5c37cf
--- /dev/null
+++ b/interface/src/components/portal/PortalWorkerCard.tsx
@@ -0,0 +1,74 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { InlineWorkerCard, type TranscriptStep } from "@spacedrive/ai";
+import { api, type WorkerListItem } from "@/api/client";
+
+interface PortalWorkerCardProps {
+	agentId: string;
+	worker: WorkerListItem;
+}
+
+/**
+ * Adapter that wraps @spacedrive/ai's InlineWorkerCard with data fetching.
+ * Polls the worker detail endpoint for transcript updates while running.
+ */
+export function PortalWorkerCard({ agentId, worker }: PortalWorkerCardProps) {
+	const queryClient = useQueryClient();
+	const detailQuery = useQuery({
+		queryKey: ["worker-detail", agentId, worker.id],
+		queryFn: () => api.workerDetail(agentId, worker.id),
+		refetchInterval: worker.status === "running" ? 1500 : false,
+	});
+
+	const copyLogs = async () => {
+		const detail = detailQuery.data;
+		if (!detail) return;
+
+		const transcriptText = (detail.transcript ?? [])
+			.map((step) => JSON.stringify(step, null, 2))
+			.join("\n\n");
+
+		const payload = [
+			`Worker: ${detail.task}`,
+			`Status: ${detail.status}`,
+			`Started: ${detail.started_at}`,
+			detail.completed_at ? `Completed: ${detail.completed_at}` : null,
+			detail.result ? `Result:\n${detail.result}` : null,
+			transcriptText ? `Transcript:\n${transcriptText}` : null,
+		]
+			.filter(Boolean)
+			.join("\n\n");
+
+		await navigator.clipboard.writeText(payload);
+	};
+
+	const cancelMutation = useMutation({
+		mutationFn: () =>
+			api.cancelProcess(worker.channel_id ?? "", "worker", worker.id),
+		onSuccess: async () => {
+			await Promise.all([
+				queryClient.invalidateQueries({
+					queryKey: ["worker-detail", agentId, worker.id],
+				}),
+				queryClient.invalidateQueries({
+					queryKey: ["portal-workers", agentId, worker.channel_id],
+				}),
+			]);
+		},
+	});
+
+	const isRunning = worker.status === "running";
+	const canCancel = isRunning && !!worker.channel_id && !cancelMutation.isPending;
+
+	return (
+		<InlineWorkerCard
+			title={worker.task}
+			status={worker.status}
+			toolCallCount={worker.tool_calls}
+			liveStatus={worker.live_status}
+			transcript={(detailQuery.data?.transcript ?? []) as TranscriptStep[]}
+			isTranscriptLoading={detailQuery.isLoading}
+			onCopyLogs={detailQuery.data ? () => void copyLogs() : undefined}
+			onCancel={canCancel ? () => void cancelMutation.mutateAsync() : undefined}
+		/>
+	);
+}
diff --git a/interface/src/components/portal/index.ts b/interface/src/components/portal/index.ts
new file mode 100644
index 000000000..4ceeba870
--- /dev/null
+++ b/interface/src/components/portal/index.ts
@@ -0,0 +1,8 @@
+export { PortalPanel } from "./PortalPanel";
+export { PortalHeader } from "./PortalHeader";
+export { PortalTimeline } from "./PortalTimeline";
+export { PortalComposer } from "./PortalComposer";
+export { PortalActiveWorkers } from "./PortalActiveWorkers";
+export { PortalEmpty } from "./PortalEmpty";
+export { PortalHistoryPopover } from "./PortalHistoryPopover";
+export { PortalWorkerCard } from "./PortalWorkerCard";
diff --git a/interface/src/components/settings/ApiKeysSection.tsx b/interface/src/components/settings/ApiKeysSection.tsx
new file mode 100644
index 000000000..e1af1697c
--- /dev/null
+++ b/interface/src/components/settings/ApiKeysSection.tsx
@@ -0,0 +1,174 @@
+import {useState} from "react";
+import {useMutation, useQueryClient} from "@tanstack/react-query";
+import {api} from "@/api/client";
+import {
+	Button,
+	Input,
+	DialogRoot,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogDescription,
+	DialogFooter,
+} from "@spacedrive/primitives";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faSearch} from "@fortawesome/free-solid-svg-icons";
+import type {GlobalSettingsSectionProps} from "./types";
+
+export function ApiKeysSection({settings, isLoading}: GlobalSettingsSectionProps) {
+	const queryClient = useQueryClient();
+	const [editingBraveKey, setEditingBraveKey] = useState(false);
+	const [braveKeyInput, setBraveKeyInput] = useState("");
+	const [message, setMessage] = useState<{
+		text: string;
+		type: "success" | "error";
+	} | null>(null);
+
+	const updateMutation = useMutation({
+		mutationFn: api.updateGlobalSettings,
+		onSuccess: (result) => {
+			if (result.success) {
+				setEditingBraveKey(false);
+				setBraveKeyInput("");
+				setMessage({text: result.message, type: "success"});
+				queryClient.invalidateQueries({queryKey: ["global-settings"]});
+			} else {
+				setMessage({text: result.message, type: "error"});
+			}
+		},
+		onError: (error) => {
+			setMessage({text: `Failed: ${error.message}`, type: "error"});
+		},
+	});
+
+	const handleSaveBraveKey = () => {
+		updateMutation.mutate({brave_search_key: braveKeyInput.trim() || null});
+	};
+
+	const handleRemoveBraveKey = () => {
+		updateMutation.mutate({brave_search_key: null});
+	};
+
+	return (
+		<div className="mx-auto max-w-2xl px-6 py-6">
+			<div className="mb-6">
+				<h2 className="font-plex text-sm font-semibold text-ink">
+					Third-Party API Keys
+				</h2>
+				<p className="mt-1 text-sm text-ink-dull">
+					Configure API keys for third-party services used by workers.
+				</p>
+			</div>
+
+			{isLoading ? (
+				<div className="flex items-center gap-2 text-ink-dull">
+					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
+					Loading settings...
+				</div>
+			) : (
+				<div className="flex flex-col gap-3">
+					<div className="rounded-lg border border-app-line bg-app-box p-4">
+						<div className="flex items-center gap-3">
+							<FontAwesomeIcon icon={faSearch} className="text-ink-faint" />
+							<div className="flex-1">
+								<div className="flex items-center gap-2">
+									<span className="text-sm font-medium text-ink">
+										Brave Search
+									</span>
+									{settings?.brave_search_key && (
+										<span className="text-tiny text-green-400">
+											● Configured
+										</span>
+									)}
+								</div>
+								<p className="mt-0.5 text-sm text-ink-dull">
+									Powers web search capabilities for workers
+								</p>
+							</div>
+							<div className="flex gap-2">
+								<Button
+									onClick={() => {
+										setEditingBraveKey(true);
+										setBraveKeyInput(settings?.brave_search_key || "");
+										setMessage(null);
+									}}
+									variant="outline"
+									size="md"
+								>
+									{settings?.brave_search_key ? "Update" : "Add key"}
+								</Button>
+								{settings?.brave_search_key && (
+									<Button
+										onClick={handleRemoveBraveKey}
+										variant="outline"
+										size="md"
+										loading={updateMutation.isPending}
+									>
+										Remove
+									</Button>
+								)}
+							</div>
+						</div>
+					</div>
+				</div>
+			)}
+
+			{message && (
+				<div
+					className={`mt-4 rounded-md border px-3 py-2 text-sm ${
+						message.type === "success"
+							? "border-green-500/20 bg-green-500/10 text-green-400"
+							: "border-red-500/20 bg-red-500/10 text-red-400"
+					}`}
+				>
+					{message.text}
+				</div>
+			)}
+
+			<DialogRoot
+				open={editingBraveKey}
+				onOpenChange={(open) => {
+					if (!open) setEditingBraveKey(false);
+				}}
+			>
+				<DialogContent className="max-w-md">
+					<DialogHeader>
+						<DialogTitle>
+							{settings?.brave_search_key ? "Update" : "Add"} Brave Search Key
+						</DialogTitle>
+						<DialogDescription>
+							Enter your Brave Search API key. Get one at brave.com/search/api
+						</DialogDescription>
+					</DialogHeader>
+					<Input
+						type="password"
+						value={braveKeyInput}
+						onChange={(e) => setBraveKeyInput(e.target.value)}
+						placeholder="BSA..."
+						autoFocus
+						onKeyDown={(e) => {
+							if (e.key === "Enter") handleSaveBraveKey();
+						}}
+					/>
+					<DialogFooter>
+						<Button
+							onClick={() => setEditingBraveKey(false)}
+							variant="outline"
+							size="md"
+						>
+							Cancel
+						</Button>
+						<Button
+							onClick={handleSaveBraveKey}
+							disabled={!braveKeyInput.trim()}
+							loading={updateMutation.isPending}
+							size="md"
+						>
+							Save
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</DialogRoot>
+		</div>
+	);
+}
diff --git a/interface/src/components/settings/AppearanceSection.tsx b/interface/src/components/settings/AppearanceSection.tsx
new file mode 100644
index 000000000..aef830bf3
--- /dev/null
+++ b/interface/src/components/settings/AppearanceSection.tsx
@@ -0,0 +1,79 @@
+import {useTheme, THEMES, type ThemeId} from "@/hooks/useTheme";
+
+export function AppearanceSection() {
+	const {theme, setTheme} = useTheme();
+
+	return (
+		<div className="mx-auto max-w-2xl px-6 py-6">
+			<div className="mb-6">
+				<h2 className="font-plex text-sm font-semibold text-ink">Theme</h2>
+				<p className="mt-1 text-sm text-ink-dull">
+					Choose a theme for the dashboard interface.
+				</p>
+			</div>
+
+			<div className="grid grid-cols-2 gap-3">
+				{THEMES.map((t) => (
+					<button
+						key={t.id}
+						onClick={() => setTheme(t.id)}
+						className={`group relative flex flex-col items-start rounded-lg border p-4 text-left transition-colors ${
+							theme === t.id
+								? "border-accent bg-accent/10"
+								: "border-app-line bg-app-box hover:border-app-line/80 hover:bg-app-hover"
+						}`}
+					>
+						<div className="flex w-full items-center justify-between">
+							<span className="text-sm font-medium text-ink">{t.name}</span>
+							{theme === t.id && (
+								<span className="h-2 w-2 rounded-full bg-accent" />
+							)}
+						</div>
+						<p className="mt-1 text-sm text-ink-dull">{t.description}</p>
+						<ThemePreview themeId={t.id} />
+					</button>
+				))}
+			</div>
+		</div>
+	);
+}
+
+function ThemePreview({themeId}: {themeId: ThemeId}) {
+	const colors: Record<ThemeId, {bg: string; sidebar: string; accent: string}> =
+		{
+			default: {bg: "#1c1d26", sidebar: "#101118", accent: "#2499ff"},
+			vanilla: {bg: "#ffffff", sidebar: "#f5f5f6", accent: "#2499ff"},
+			midnight: {bg: "#121428", sidebar: "#0a0b14", accent: "#2499ff"},
+			noir: {bg: "#080808", sidebar: "#000000", accent: "#2499ff"},
+			slate: {bg: "#151619", sidebar: "#0e0f12", accent: "#2499ff"},
+			nord: {bg: "#1a1e27", sidebar: "#11141b", accent: "#2499ff"},
+			mocha: {bg: "#1a1614", sidebar: "#110f0d", accent: "#2499ff"},
+		};
+	const c = colors[themeId];
+
+	return (
+		<div
+			className="mt-3 flex h-12 w-full overflow-hidden rounded border border-app-line/50"
+			style={{backgroundColor: c.bg}}
+		>
+			<div
+				className="w-8 border-r"
+				style={{backgroundColor: c.sidebar, borderColor: c.accent + "30"}}
+			/>
+			<div className="flex flex-1 flex-col gap-1 p-1.5">
+				<div
+					className="h-1.5 w-12 rounded-sm"
+					style={{backgroundColor: c.accent}}
+				/>
+				<div
+					className="h-1 w-16 rounded-sm opacity-30"
+					style={{backgroundColor: c.accent}}
+				/>
+				<div
+					className="h-1 w-10 rounded-sm opacity-20"
+					style={{backgroundColor: c.accent}}
+				/>
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/components/settings/ChangelogSection.tsx b/interface/src/components/settings/ChangelogSection.tsx
new file mode 100644
index 000000000..01a69f069
--- /dev/null
+++ b/interface/src/components/settings/ChangelogSection.tsx
@@ -0,0 +1,78 @@
+import {useQuery} from "@tanstack/react-query";
+import {api} from "@/api/client";
+import {Markdown} from "@/components/Markdown";
+import type {ChangelogRelease} from "./types";
+
+function parseChangelog(raw: string): ChangelogRelease[] {
+	const releases: ChangelogRelease[] = [];
+	const versionPattern = /^## (v\d+\.\S+)/;
+	let current: ChangelogRelease | null = null;
+	const lines: string[] = [];
+
+	for (const line of raw.split("\n")) {
+		const match = line.match(versionPattern);
+		if (match) {
+			if (current) {
+				current.body = lines.join("\n").trim();
+				releases.push(current);
+				lines.length = 0;
+			}
+			current = {version: match[1], body: ""};
+			continue;
+		}
+		if (current) lines.push(line);
+	}
+	if (current) {
+		current.body = lines.join("\n").trim();
+		releases.push(current);
+	}
+	return releases;
+}
+
+export function ChangelogSection() {
+	const {data: changelog, isLoading} = useQuery<string>({
+		queryKey: ["changelog"],
+		queryFn: api.changelog,
+		staleTime: 60_000 * 60, // 1 hour — changelog is baked into the binary
+	});
+
+	const releases = changelog ? parseChangelog(changelog) : [];
+
+	return (
+		<div className="mx-auto max-w-2xl px-6 py-6">
+			<div className="mb-6">
+				<h2 className="font-plex text-sm font-semibold text-ink">Changelog</h2>
+				<p className="mt-1 text-sm text-ink-dull">
+					Release history for this Spacebot build.
+				</p>
+			</div>
+
+			{isLoading ? (
+				<div className="flex items-center gap-2 text-ink-dull">
+					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
+					Loading changelog...
+				</div>
+			) : releases.length > 0 ? (
+				<div className="flex flex-col gap-4">
+					{releases.map((release) => (
+						<div
+							key={release.version}
+							className="rounded-lg border border-app-line bg-app-box p-5"
+						>
+							<h3 className="font-plex text-2xl font-bold text-ink mb-3">
+								{release.version}
+							</h3>
+							{release.body && (
+								<Markdown className="text-sm text-ink-dull">
+									{release.body}
+								</Markdown>
+							)}
+						</div>
+					))}
+				</div>
+			) : (
+				<p className="text-sm text-ink-faint">No changelog available.</p>
+			)}
+		</div>
+	);
+}
diff --git a/interface/src/components/settings/ChannelsSection.tsx b/interface/src/components/settings/ChannelsSection.tsx
new file mode 100644
index 000000000..3061be822
--- /dev/null
+++ b/interface/src/components/settings/ChannelsSection.tsx
@@ -0,0 +1,102 @@
+import {useState} from "react";
+import {useQuery} from "@tanstack/react-query";
+import {api} from "@/api/client";
+import {
+	PlatformCatalog,
+	InstanceCard,
+	AddInstanceCard,
+} from "@/components/ChannelSettingCard";
+import type {Platform} from "./types";
+
+export function ChannelsSection() {
+	const [expandedKey, setExpandedKey] = useState<string | null>(null);
+	const [addingPlatform, setAddingPlatform] = useState<Platform | null>(null);
+
+	const {data: messagingStatus, isLoading} = useQuery({
+		queryKey: ["messaging-status"],
+		queryFn: api.messagingStatus,
+		staleTime: 5_000,
+	});
+
+	const instances = messagingStatus?.instances ?? [];
+
+	// Determine whether to show default or named add form
+	function handleAddInstance(platform: Platform) {
+		setAddingPlatform(platform);
+	}
+
+	function isDefaultAdd(): boolean {
+		if (!addingPlatform) return true;
+		return !instances.some(
+			(inst) => inst.platform === addingPlatform && inst.name === null,
+		);
+	}
+
+	return (
+		<div className="mx-auto max-w-3xl px-6 py-6">
+			<div className="mb-6">
+				<h2 className="font-plex text-sm font-semibold text-ink">
+					Messaging Platforms
+				</h2>
+				<p className="mt-1 text-sm text-ink-dull">
+					Connect messaging platforms and configure how conversations route to
+					agents.
+				</p>
+			</div>
+
+			{isLoading ? (
+				<div className="flex items-center gap-2 text-ink-dull">
+					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
+					Loading channels...
+				</div>
+			) : (
+				<div className="grid grid-cols-[200px_1fr] gap-6">
+					{/* Left column: Platform catalog */}
+					<div className="flex-shrink-0">
+						<PlatformCatalog onAddInstance={handleAddInstance} />
+					</div>
+
+					{/* Right column: Configured instances */}
+					<div className="flex flex-col gap-3 min-w-0">
+						{/* Active add-instance card */}
+						{addingPlatform && (
+							<AddInstanceCard
+								platform={addingPlatform}
+								isDefault={isDefaultAdd()}
+								onCancel={() => setAddingPlatform(null)}
+								onCreated={() => setAddingPlatform(null)}
+							/>
+						)}
+
+						{/* Configured instance cards */}
+						{instances.length > 0 ? (
+							instances.map((instance) => (
+								<InstanceCard
+									key={instance.runtime_key}
+									instance={instance}
+									expanded={expandedKey === instance.runtime_key}
+									onToggleExpand={() =>
+										setExpandedKey(
+											expandedKey === instance.runtime_key
+												? null
+												: instance.runtime_key,
+										)
+									}
+								/>
+							))
+						) : !addingPlatform ? (
+							<div className="rounded-lg border border-app-line border-dashed bg-app-box/50 p-8 text-center">
+								<p className="text-sm text-ink-dull">
+									No messaging platforms configured yet.
+								</p>
+								<p className="mt-1 text-sm text-ink-faint">
+									Click a platform on the left to get started.
+								</p>
+							</div>
+						) : null}
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/interface/src/components/settings/ChatGptOAuthDialog.tsx b/interface/src/components/settings/ChatGptOAuthDialog.tsx
new file mode 100644
index 000000000..985e34006
--- /dev/null
+++ b/interface/src/components/settings/ChatGptOAuthDialog.tsx
@@ -0,0 +1,187 @@
+import {
+	Button,
+	DialogRoot,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogDescription,
+	DialogFooter,
+} from "@spacedrive/primitives";
+import {ProviderIcon} from "@/lib/providerIcons";
+import type {ChatGptOAuthDialogProps} from "./types";
+
+export function ChatGptOAuthDialog({
+	open,
+	onOpenChange,
+	isRequesting,
+	isPolling,
+	message,
+	deviceCodeInfo,
+	deviceCodeCopied,
+	onCopyDeviceCode,
+	onOpenDeviceLogin,
+	onRestart,
+}: ChatGptOAuthDialogProps) {
+	return (
+		<DialogRoot open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="max-w-md">
+				<DialogHeader>
+					<DialogTitle className="flex items-center gap-2">
+						<ProviderIcon provider="openai-chatgpt" size={20} />
+						Sign in with ChatGPT Plus
+					</DialogTitle>
+					{!message && (
+						<DialogDescription>
+							Copy the device code below, then sign in to your OpenAI account to
+							authorize access. You must first{" "}
+							<a
+								href="https://chatgpt.com/security-settings"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="underline text-accent hover:text-accent/80"
+							>
+								enable device code login
+							</a>{" "}
+							in your ChatGPT security settings.
+						</DialogDescription>
+					)}
+				</DialogHeader>
+
+				<div className="space-y-4">
+					{message && !deviceCodeInfo ? (
+						/* Completed state — success or error with no active flow */
+						<div
+							className={`rounded-md border px-3 py-2 text-sm ${
+								message.type === "success"
+									? "border-green-500/20 bg-green-500/10 text-green-400"
+									: "border-red-500/20 bg-red-500/10 text-red-400"
+							}`}
+						>
+							{message.text}
+						</div>
+					) : isRequesting && !deviceCodeInfo ? (
+						<div className="flex items-center gap-2 text-sm text-ink-dull">
+							<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
+							Requesting device code...
+						</div>
+					) : deviceCodeInfo ? (
+						<div className="space-y-4">
+							<div className="rounded-md border border-app-line p-3">
+								<div className="flex items-center gap-2">
+									<span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-accent/15 text-[11px] font-semibold text-accent">
+										1
+									</span>
+									<p className="text-sm text-ink-dull">Copy this device code</p>
+								</div>
+								<div className="mt-2.5 flex items-center gap-2 pl-7">
+									<code className="rounded border border-app-line bg-app-darkerBox px-3 py-1.5 font-mono text-base tracking-widest text-ink">
+										{deviceCodeInfo.userCode}
+									</code>
+									<Button
+										onClick={onCopyDeviceCode}
+										size="md"
+										variant={deviceCodeCopied ? "gray" : "outline"}
+									>
+										{deviceCodeCopied ? "Copied" : "Copy"}
+									</Button>
+								</div>
+							</div>
+
+							<div
+								className={`rounded-md border border-app-line p-3 ${!deviceCodeCopied ? "opacity-50" : ""}`}
+							>
+								<div className="flex items-center gap-2">
+									<span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-accent/15 text-[11px] font-semibold text-accent">
+										2
+									</span>
+									<p className="text-sm text-ink-dull">
+										Open OpenAI and paste the code
+									</p>
+								</div>
+								<div className="mt-2.5 pl-7">
+									<Button
+										onClick={onOpenDeviceLogin}
+										disabled={!deviceCodeCopied}
+										size="md"
+										variant="outline"
+									>
+										Open login page
+									</Button>
+								</div>
+							</div>
+
+							{isPolling && !message && (
+								<div className="flex items-center gap-2 text-sm text-ink-faint">
+									<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
+									Waiting for sign-in confirmation...
+								</div>
+							)}
+
+							{message && (
+								<div
+									className={`rounded-md border px-3 py-2 text-sm ${
+										message.type === "success"
+											? "border-green-500/20 bg-green-500/10 text-green-400"
+											: "border-red-500/20 bg-red-500/10 text-red-400"
+									}`}
+								>
+									{message.text}
+								</div>
+							)}
+						</div>
+					) : null}
+				</div>
+
+				<DialogFooter>
+					{message && !deviceCodeInfo ? (
+						/* Completed — show Done (or Retry for errors) */
+						message.type === "success" ? (
+							<Button onClick={() => onOpenChange(false)} size="md">
+								Done
+							</Button>
+						) : (
+							<>
+								<Button
+									onClick={() => onOpenChange(false)}
+									variant="outline"
+									size="md"
+								>
+									Close
+								</Button>
+								<Button
+									onClick={onRestart}
+									disabled={isRequesting}
+									loading={isRequesting}
+									size="md"
+								>
+									Try again
+								</Button>
+							</>
+						)
+					) : (
+						<>
+							<Button
+								onClick={() => onOpenChange(false)}
+								variant="outline"
+								size="md"
+							>
+								Cancel
+							</Button>
+							{deviceCodeInfo && (
+								<Button
+									onClick={onRestart}
+									disabled={isRequesting}
+									loading={isRequesting}
+									variant="outline"
+									size="md"
+								>
+									Get new code
+								</Button>
+							)}
+						</>
+					)}
+				</DialogFooter>
+			</DialogContent>
+		</DialogRoot>
+	);
+}
diff --git a/interface/src/components/settings/ConfigFileSection.tsx b/interface/src/components/settings/ConfigFileSection.tsx
new file mode 100644
index 000000000..3946a5a43
--- /dev/null
+++ b/interface/src/components/settings/ConfigFileSection.tsx
@@ -0,0 +1,222 @@
+import {useState, useEffect, useRef} from "react";
+import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
+import {api} from "@/api/client";
+import {Button} from "@spacedrive/primitives";
+import {parse as parseToml} from "smol-toml";
+
+export function ConfigFileSection() {
+	const queryClient = useQueryClient();
+	const editorRef = useRef<HTMLDivElement>(null);
+	const viewRef = useRef<import("@codemirror/view").EditorView | null>(null);
+	const [originalContent, setOriginalContent] = useState("");
+	const [currentContent, setCurrentContent] = useState("");
+	const [validationError, setValidationError] = useState<string | null>(null);
+	const [message, setMessage] = useState<{
+		text: string;
+		type: "success" | "error";
+	} | null>(null);
+	const [editorLoaded, setEditorLoaded] = useState(false);
+
+	const {data, isLoading} = useQuery({
+		queryKey: ["raw-config"],
+		queryFn: api.rawConfig,
+		staleTime: 5_000,
+	});
+
+	const updateMutation = useMutation({
+		mutationFn: (content: string) => api.updateRawConfig(content),
+		onSuccess: (result) => {
+			if (result.success) {
+				setOriginalContent(currentContent);
+				setMessage({text: result.message, type: "success"});
+				setValidationError(null);
+				// Invalidate all config-related queries so other tabs pick up changes
+				queryClient.invalidateQueries({queryKey: ["providers"]});
+				queryClient.invalidateQueries({queryKey: ["global-settings"]});
+				queryClient.invalidateQueries({queryKey: ["agents"]});
+				queryClient.invalidateQueries({queryKey: ["overview"]});
+			} else {
+				setMessage({text: result.message, type: "error"});
+			}
+		},
+		onError: (error) => {
+			setMessage({text: `Failed: ${error.message}`, type: "error"});
+		},
+	});
+
+	const isDirty = currentContent !== originalContent;
+
+	// Initialize CodeMirror when data loads
+	useEffect(() => {
+		if (!data?.content || !editorRef.current || editorLoaded) return;
+
+		const content = data.content;
+		setOriginalContent(content);
+		setCurrentContent(content);
+
+		// Lazy-load CodeMirror to avoid SSR issues and keep initial bundle small
+		Promise.all([
+			import("@codemirror/view"),
+			import("@codemirror/state"),
+			import("codemirror"),
+			import("@codemirror/theme-one-dark"),
+			import("@codemirror/language"),
+			import("@codemirror/legacy-modes/mode/toml"),
+		]).then(([viewMod, stateMod, cm, themeMod, langMod, tomlMode]) => {
+			if (!editorRef.current) return;
+
+			const tomlLang = langMod.StreamLanguage.define(tomlMode.toml);
+
+			const updateListener = viewMod.EditorView.updateListener.of((update) => {
+				if (update.docChanged) {
+					const newContent = update.state.doc.toString();
+					setCurrentContent(newContent);
+					try {
+						parseToml(newContent);
+						setValidationError(null);
+					} catch (error: any) {
+						setValidationError(error.message || "Invalid TOML");
+					}
+				}
+			});
+
+			const theme = viewMod.EditorView.theme({
+				"&": {
+					height: "100%",
+					fontSize: "13px",
+				},
+				".cm-scroller": {
+					fontFamily: "'IBM Plex Mono', monospace",
+					overflow: "auto",
+				},
+				".cm-gutters": {
+					backgroundColor: "transparent",
+					borderRight: "1px solid hsl(var(--color-app-line) / 0.3)",
+				},
+				".cm-activeLineGutter": {
+					backgroundColor: "transparent",
+				},
+			});
+
+			const state = stateMod.EditorState.create({
+				doc: content,
+				extensions: [
+					cm.basicSetup,
+					tomlLang,
+					themeMod.oneDark,
+					theme,
+					updateListener,
+					viewMod.keymap.of([
+						{
+							key: "Mod-s",
+							run: () => {
+								// Trigger save via DOM event since we can't access React state here
+								editorRef.current?.dispatchEvent(new CustomEvent("cm-save"));
+								return true;
+							},
+						},
+					]),
+				],
+			});
+
+			const view = new viewMod.EditorView({
+				state,
+				parent: editorRef.current,
+			});
+
+			viewRef.current = view;
+			setEditorLoaded(true);
+		});
+
+		return () => {
+			viewRef.current?.destroy();
+			viewRef.current = null;
+		};
+	}, [data?.content]);
+
+	// Handle Cmd+S from CodeMirror
+	useEffect(() => {
+		const element = editorRef.current;
+		if (!element) return;
+
+		const handler = () => {
+			if (isDirty && !validationError) {
+				updateMutation.mutate(currentContent);
+			}
+		};
+
+		element.addEventListener("cm-save", handler);
+		return () => element.removeEventListener("cm-save", handler);
+	}, [isDirty, validationError, currentContent]);
+
+	const handleSave = () => {
+		if (!isDirty || validationError) return;
+		setMessage(null);
+		updateMutation.mutate(currentContent);
+	};
+
+	const handleRevert = () => {
+		if (!viewRef.current) return;
+		const view = viewRef.current;
+		view.dispatch({
+			changes: {from: 0, to: view.state.doc.length, insert: originalContent},
+		});
+		setCurrentContent(originalContent);
+		setValidationError(null);
+		setMessage(null);
+	};
+
+	return (
+		<div className="flex h-full flex-col">
+			{/* Description + actions */}
+			<div className="flex items-center justify-between px-6 py-4 border-b border-app-line/30">
+				<p className="text-sm text-ink-dull">
+					Edit the raw configuration file. Changes are validated as TOML before
+					saving.
+				</p>
+				<div className="flex items-center gap-2 flex-shrink-0 ml-4">
+					{isDirty && (
+						<Button onClick={handleRevert} variant="outline" size="md">
+							Revert
+						</Button>
+					)}
+					<Button
+						onClick={handleSave}
+						disabled={!isDirty || !!validationError}
+						loading={updateMutation.isPending}
+						size="md"
+					>
+						Save
+					</Button>
+				</div>
+			</div>
+
+			{/* Validation / status bar */}
+			{(validationError || message) && (
+				<div
+					className={`border-b px-6 py-2 text-sm ${
+						validationError
+							? "border-red-500/20 bg-red-500/5 text-red-400"
+							: message?.type === "success"
+								? "border-green-500/20 bg-green-500/5 text-green-400"
+								: "border-red-500/20 bg-red-500/5 text-red-400"
+					}`}
+				>
+					{validationError ? `Syntax error: ${validationError}` : message?.text}
+				</div>
+			)}
+
+			{/* Editor */}
+			<div className="flex-1 overflow-hidden">
+				{isLoading ? (
+					<div className="flex items-center gap-2 p-6 text-ink-dull">
+						<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
+						Loading config...
+					</div>
+				) : (
+					<div ref={editorRef} className="h-full" />
+				)}
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/components/settings/InstanceSection.tsx b/interface/src/components/settings/InstanceSection.tsx
new file mode 100644
index 000000000..6e4c366d4
--- /dev/null
+++ b/interface/src/components/settings/InstanceSection.tsx
@@ -0,0 +1,100 @@
+import {useState, useEffect} from "react";
+import {useMutation, useQueryClient} from "@tanstack/react-query";
+import {api} from "@/api/client";
+import {Button, Input} from "@spacedrive/primitives";
+import type {GlobalSettingsSectionProps} from "./types";
+
+export function InstanceSection({settings, isLoading}: GlobalSettingsSectionProps) {
+	const queryClient = useQueryClient();
+	const [companyName, setCompanyName] = useState(
+		settings?.company_name ?? "My Company",
+	);
+	const [message, setMessage] = useState<{
+		text: string;
+		type: "success" | "error";
+	} | null>(null);
+
+	useEffect(() => {
+		if (settings) {
+			setCompanyName(settings.company_name ?? "My Company");
+		}
+	}, [settings]);
+
+	const updateMutation = useMutation({
+		mutationFn: api.updateGlobalSettings,
+		onSuccess: (result) => {
+			if (result.success) {
+				setMessage({text: result.message, type: "success"});
+				queryClient.invalidateQueries({queryKey: ["global-settings"]});
+			} else {
+				setMessage({text: result.message, type: "error"});
+			}
+		},
+		onError: (error) => {
+			setMessage({text: `Failed: ${error.message}`, type: "error"});
+		},
+	});
+
+	const handleSave = () => {
+		updateMutation.mutate({company_name: companyName.trim() || "My Company"});
+	};
+
+	return (
+		<div className="mx-auto max-w-2xl px-6 py-6">
+			<div className="mb-6">
+				<h2 className="font-plex text-sm font-semibold text-ink">
+					Instance Settings
+				</h2>
+				<p className="mt-1 text-sm text-ink-dull">
+					Configure your Spacebot instance identity.
+				</p>
+			</div>
+
+			{isLoading ? (
+				<div className="flex items-center gap-2 text-ink-dull">
+					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
+					Loading settings...
+				</div>
+			) : (
+				<div className="flex flex-col gap-4">
+					<div className="rounded-lg border border-app-line bg-app-box p-4">
+						<label className="block">
+							<span className="text-sm font-medium text-ink">
+								Company Name
+							</span>
+							<p className="mt-0.5 text-sm text-ink-dull">
+								Displayed in the sidebar and top bar as your organization name.
+							</p>
+							<Input
+								type="text"
+								value={companyName}
+								onChange={(e) => setCompanyName(e.target.value)}
+								placeholder="My Company"
+								className="mt-2"
+								onKeyDown={(e) => {
+									if (e.key === "Enter") handleSave();
+								}}
+							/>
+						</label>
+					</div>
+
+					<Button onClick={handleSave} loading={updateMutation.isPending}>
+						Save Changes
+					</Button>
+				</div>
+			)}
+
+			{message && (
+				<div
+					className={`mt-4 rounded-md border px-3 py-2 text-sm ${
+						message.type === "success"
+							? "border-green-500/20 bg-green-500/10 text-green-400"
+							: "border-red-500/20 bg-red-500/10 text-red-400"
+					}`}
+				>
+					{message.text}
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/interface/src/components/settings/OpenCodeSection.tsx b/interface/src/components/settings/OpenCodeSection.tsx
new file mode 100644
index 000000000..e6b394676
--- /dev/null
+++ b/interface/src/components/settings/OpenCodeSection.tsx
@@ -0,0 +1,303 @@
+import {useState, useEffect} from "react";
+import {useMutation, useQueryClient} from "@tanstack/react-query";
+import {api} from "@/api/client";
+import {
+	Button,
+	Input,
+	SelectRoot,
+	SelectTrigger,
+	SelectValue,
+	SelectContent,
+	SelectItem,
+} from "@spacedrive/primitives";
+import type {GlobalSettingsSectionProps} from "./types";
+import {PERMISSION_OPTIONS} from "./constants";
+
+export function OpenCodeSection({settings, isLoading}: GlobalSettingsSectionProps) {
+	const queryClient = useQueryClient();
+	const [enabled, setEnabled] = useState(settings?.opencode?.enabled ?? false);
+	const [path, setPath] = useState(settings?.opencode?.path ?? "opencode");
+	const [maxServers, setMaxServers] = useState(
+		settings?.opencode?.max_servers?.toString() ?? "5",
+	);
+	const [startupTimeout, setStartupTimeout] = useState(
+		settings?.opencode?.server_startup_timeout_secs?.toString() ?? "30",
+	);
+	const [maxRetries, setMaxRetries] = useState(
+		settings?.opencode?.max_restart_retries?.toString() ?? "5",
+	);
+	const [editPerm, setEditPerm] = useState(
+		settings?.opencode?.permissions?.edit ?? "allow",
+	);
+	const [bashPerm, setBashPerm] = useState(
+		settings?.opencode?.permissions?.bash ?? "allow",
+	);
+	const [webfetchPerm, setWebfetchPerm] = useState(
+		settings?.opencode?.permissions?.webfetch ?? "allow",
+	);
+	const [message, setMessage] = useState<{
+		text: string;
+		type: "success" | "error";
+	} | null>(null);
+
+	useEffect(() => {
+		if (settings?.opencode) {
+			setEnabled(settings.opencode.enabled);
+			setPath(settings.opencode.path);
+			setMaxServers(settings.opencode.max_servers.toString());
+			setStartupTimeout(
+				settings.opencode.server_startup_timeout_secs.toString(),
+			);
+			setMaxRetries(settings.opencode.max_restart_retries.toString());
+			setEditPerm(settings.opencode.permissions.edit);
+			setBashPerm(settings.opencode.permissions.bash);
+			setWebfetchPerm(settings.opencode.permissions.webfetch);
+		}
+	}, [settings?.opencode]);
+
+	const updateMutation = useMutation({
+		mutationFn: api.updateGlobalSettings,
+		onSuccess: (result) => {
+			if (result.success) {
+				setMessage({text: result.message, type: "success"});
+				queryClient.invalidateQueries({queryKey: ["global-settings"]});
+			} else {
+				setMessage({text: result.message, type: "error"});
+			}
+		},
+		onError: (error) => {
+			setMessage({text: `Failed: ${error.message}`, type: "error"});
+		},
+	});
+
+	const handleSave = () => {
+		const servers = parseInt(maxServers, 10);
+		if (isNaN(servers) || servers < 1) {
+			setMessage({text: "Max servers must be at least 1", type: "error"});
+			return;
+		}
+		const timeout = parseInt(startupTimeout, 10);
+		if (isNaN(timeout) || timeout < 1) {
+			setMessage({text: "Startup timeout must be at least 1", type: "error"});
+			return;
+		}
+		const retries = parseInt(maxRetries, 10);
+		if (isNaN(retries) || retries < 0) {
+			setMessage({text: "Max retries cannot be negative", type: "error"});
+			return;
+		}
+
+		updateMutation.mutate({
+			opencode: {
+				enabled,
+				path: path.trim() || "opencode",
+				max_servers: servers,
+				server_startup_timeout_secs: timeout,
+				max_restart_retries: retries,
+				permissions: {
+					edit: editPerm,
+					bash: bashPerm,
+					webfetch: webfetchPerm,
+				},
+			},
+		});
+	};
+
+	return (
+		<div className="mx-auto max-w-2xl px-6 py-6">
+			<div className="mb-6">
+				<h2 className="font-plex text-sm font-semibold text-ink">
+					OpenCode Workers
+				</h2>
+				<p className="mt-1 text-sm text-ink-dull">
+					Spawn{" "}
+					<a
+						href="https://opencode.ai"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="text-accent hover:underline"
+					>
+						OpenCode
+					</a>{" "}
+					coding agents as worker subprocesses. Requires the{" "}
+					<code className="rounded bg-app-box px-1 py-0.5 text-tiny text-ink-dull">
+						opencode
+					</code>{" "}
+					binary on PATH or a custom path below.
+				</p>
+			</div>
+
+			{isLoading ? (
+				<div className="flex items-center gap-2 text-ink-dull">
+					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
+					Loading settings...
+				</div>
+			) : (
+				<div className="flex flex-col gap-4">
+					{/* Enable toggle */}
+					<div className="rounded-lg border border-app-line bg-app-box p-4">
+						<label className="flex items-center gap-3">
+							<input
+								type="checkbox"
+								checked={enabled}
+								onChange={(e) => setEnabled(e.target.checked)}
+								className="h-4 w-4"
+							/>
+							<div>
+								<span className="text-sm font-medium text-ink">
+									Enable OpenCode Workers
+								</span>
+								<p className="mt-0.5 text-sm text-ink-dull">
+									Allow agents to spawn OpenCode coding sessions
+								</p>
+							</div>
+						</label>
+					</div>
+
+					{enabled && (
+						<>
+							{/* Binary path */}
+							<div className="rounded-lg border border-app-line bg-app-box p-4">
+								<label className="block">
+									<span className="text-sm font-medium text-ink">
+										Binary Path
+									</span>
+									<p className="mt-0.5 text-sm text-ink-dull">
+										Path to the OpenCode binary, or just the name if it's on
+										PATH
+									</p>
+									<Input
+										type="text"
+										value={path}
+										onChange={(e) => setPath(e.target.value)}
+										placeholder="opencode"
+										className="mt-2"
+									/>
+								</label>
+							</div>
+
+							{/* Pool settings */}
+							<div className="rounded-lg border border-app-line bg-app-box p-4">
+								<span className="text-sm font-medium text-ink">
+									Server Pool
+								</span>
+								<p className="mt-0.5 text-sm text-ink-dull">
+									Controls how many OpenCode server processes can run
+									concurrently
+								</p>
+								<div className="mt-3 grid grid-cols-3 gap-3">
+									<label className="block">
+										<span className="text-tiny font-medium text-ink-dull">
+											Max Servers
+										</span>
+										<Input
+											type="number"
+											value={maxServers}
+											onChange={(e) => setMaxServers(e.target.value)}
+											min="1"
+											max="20"
+											className="mt-1"
+										/>
+									</label>
+									<label className="block">
+										<span className="text-tiny font-medium text-ink-dull">
+											Startup Timeout (s)
+										</span>
+										<Input
+											type="number"
+											value={startupTimeout}
+											onChange={(e) => setStartupTimeout(e.target.value)}
+											min="1"
+											className="mt-1"
+										/>
+									</label>
+									<label className="block">
+										<span className="text-tiny font-medium text-ink-dull">
+											Max Retries
+										</span>
+										<Input
+											type="number"
+											value={maxRetries}
+											onChange={(e) => setMaxRetries(e.target.value)}
+											min="0"
+											className="mt-1"
+										/>
+									</label>
+								</div>
+							</div>
+
+							{/* Permissions */}
+							<div className="rounded-lg border border-app-line bg-app-box p-4">
+								<span className="text-sm font-medium text-ink">
+									Permissions
+								</span>
+								<p className="mt-0.5 text-sm text-ink-dull">
+									Control which tools OpenCode workers can use
+								</p>
+								<div className="mt-3 flex flex-col gap-3">
+									{(
+										[
+											{
+												label: "File Edit",
+												value: editPerm,
+												setter: setEditPerm,
+											},
+											{
+												label: "Shell / Bash",
+												value: bashPerm,
+												setter: setBashPerm,
+											},
+											{
+												label: "Web Fetch",
+												value: webfetchPerm,
+												setter: setWebfetchPerm,
+											},
+										] as const
+									).map(({label, value, setter}) => (
+										<div
+											key={label}
+											className="flex items-center justify-between"
+										>
+											<span className="text-sm text-ink">{label}</span>
+											<SelectRoot
+												value={value}
+												onValueChange={(v) => setter(v)}
+											>
+												<SelectTrigger className="w-28">
+													<SelectValue />
+												</SelectTrigger>
+												<SelectContent>
+													{PERMISSION_OPTIONS.map((opt) => (
+														<SelectItem key={opt.value} value={opt.value}>
+															{opt.label}
+														</SelectItem>
+													))}
+												</SelectContent>
+											</SelectRoot>
+										</div>
+									))}
+								</div>
+							</div>
+						</>
+					)}
+
+					<Button onClick={handleSave} loading={updateMutation.isPending}>
+						Save Changes
+					</Button>
+				</div>
+			)}
+
+			{message && (
+				<div
+					className={`mt-4 rounded-md border px-3 py-2 text-sm ${
+						message.type === "success"
+							? "border-green-500/20 bg-green-500/10 text-green-400"
+							: "border-red-500/20 bg-red-500/10 text-red-400"
+					}`}
+				>
+					{message.text}
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/interface/src/components/settings/ProviderCard.tsx b/interface/src/components/settings/ProviderCard.tsx
new file mode 100644
index 000000000..daac315fe
--- /dev/null
+++ b/interface/src/components/settings/ProviderCard.tsx
@@ -0,0 +1,59 @@
+import {Button} from "@spacedrive/primitives";
+import {ProviderIcon} from "@/lib/providerIcons";
+import type {ProviderCardProps} from "./types";
+
+export function ProviderCard({
+	provider,
+	name,
+	description,
+	configured,
+	defaultModel,
+	onEdit,
+	onRemove,
+	removing,
+	actionLabel,
+	showRemove,
+}: ProviderCardProps) {
+	const primaryLabel = actionLabel ?? (configured ? "Update" : "Add key");
+	const shouldShowRemove = showRemove ?? configured;
+	return (
+		<div className="rounded-lg border border-app-line bg-app-box p-4">
+			<div className="flex items-center gap-3">
+				<ProviderIcon provider={provider} size={32} />
+				<div className="flex-1">
+					<div className="flex items-center gap-2">
+						<span className="text-sm font-medium text-ink">{name}</span>
+						{configured && (
+							<span className="inline-flex items-center">
+								<span
+									className="h-2 w-2 rounded-full bg-green-400"
+									aria-hidden="true"
+								/>
+								<span className="sr-only">Configured</span>
+							</span>
+						)}
+					</div>
+					<p className="mt-0.5 text-sm text-ink-dull">{description}</p>
+					<p className="mt-1 text-tiny text-ink-faint">
+						Default model: <span className="text-ink-dull">{defaultModel}</span>
+					</p>
+				</div>
+				<div className="flex gap-2">
+					<Button onClick={onEdit} variant="outline" size="md">
+						{primaryLabel}
+					</Button>
+					{shouldShowRemove && (
+						<Button
+							onClick={onRemove}
+							variant="outline"
+							size="md"
+							loading={removing}
+						>
+							Remove
+						</Button>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/components/settings/SecretsSection.tsx b/interface/src/components/settings/SecretsSection.tsx
new file mode 100644
index 000000000..a2e17f2b4
--- /dev/null
+++ b/interface/src/components/settings/SecretsSection.tsx
@@ -0,0 +1,784 @@
+import {useState} from "react";
+import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
+import {
+	api,
+	type SecretCategory,
+	type SecretListItem,
+	type StoreState,
+} from "@/api/client";
+import {
+	Badge,
+	Button,
+	Input,
+	DialogRoot,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogDescription,
+	DialogFooter,
+	SelectRoot,
+	SelectTrigger,
+	SelectValue,
+	SelectContent,
+	SelectItem,
+} from "@spacedrive/primitives";
+
+export function SecretsSection() {
+	const queryClient = useQueryClient();
+
+	// Store status.
+	const {data: storeStatus, isLoading: statusLoading} = useQuery({
+		queryKey: ["secrets-status"],
+		queryFn: () => api.secretsStatus(),
+		staleTime: 5_000,
+	});
+
+	// Secret list.
+	const {data: secretsData, isLoading: secretsLoading} = useQuery({
+		queryKey: ["secrets"],
+		queryFn: () => api.listSecrets(),
+		staleTime: 5_000,
+	});
+
+	const secrets = secretsData?.secrets ?? [];
+	const isLoading = statusLoading || secretsLoading;
+	const state: StoreState = storeStatus?.state ?? "unencrypted";
+	const isLocked = state === "locked";
+	const canMutate = !isLocked;
+
+	// ── UI state ─────────────────────────────────────────────────────────
+	const [addDialogOpen, setAddDialogOpen] = useState(false);
+	const [editingSecret, setEditingSecret] = useState<string | null>(null);
+	const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
+	const [nameInput, setNameInput] = useState("");
+	const [valueInput, setValueInput] = useState("");
+	const [categoryInput, setCategoryInput] = useState<SecretCategory>("tool");
+	const [message, setMessage] = useState<{
+		text: string;
+		type: "success" | "error";
+	} | null>(null);
+
+	// Encryption flow state.
+	const [encryptDialogOpen, setEncryptDialogOpen] = useState(false);
+	const [masterKeyDisplay, setMasterKeyDisplay] = useState<string | null>(null);
+	const [masterKeyCopied, setMasterKeyCopied] = useState(false);
+	const [unlockKeyInput, setUnlockKeyInput] = useState("");
+	const [rotateDialogOpen, setRotateDialogOpen] = useState(false);
+
+	const [filterCategory, setFilterCategory] = useState<"all" | SecretCategory>(
+		"all",
+	);
+	const [searchQuery, setSearchQuery] = useState("");
+
+	// ── Mutations ────────────────────────────────────────────────────────
+	const invalidateSecrets = () => {
+		queryClient.invalidateQueries({queryKey: ["secrets"]});
+		queryClient.invalidateQueries({queryKey: ["secrets-status"]});
+	};
+
+	const putMutation = useMutation({
+		mutationFn: ({
+			name,
+			value,
+			category,
+		}: {
+			name: string;
+			value: string;
+			category?: SecretCategory;
+		}) => api.putSecret(name, value, category),
+		onSuccess: (result) => {
+			invalidateSecrets();
+			setAddDialogOpen(false);
+			setEditingSecret(null);
+			setNameInput("");
+			setValueInput("");
+			setMessage({
+				text: result.reload_required
+					? `${result.name} saved (${result.category}). Restart required for system secrets to take effect.`
+					: `${result.name} saved (${result.category}).`,
+				type: "success",
+			});
+		},
+		onError: (error) => {
+			setMessage({text: `Failed: ${error.message}`, type: "error"});
+		},
+	});
+
+	const deleteMutation = useMutation({
+		mutationFn: (name: string) => api.deleteSecret(name),
+		onSuccess: (result) => {
+			invalidateSecrets();
+			setDeleteTarget(null);
+			setMessage({
+				text: result.warning
+					? `Deleted ${result.deleted}. ${result.warning}`
+					: `Deleted ${result.deleted}.`,
+				type: "success",
+			});
+		},
+		onError: (error) => {
+			setMessage({text: `Failed: ${error.message}`, type: "error"});
+		},
+	});
+
+	const encryptMutation = useMutation({
+		mutationFn: () => api.enableEncryption(),
+		onSuccess: (result) => {
+			invalidateSecrets();
+			setMasterKeyDisplay(result.master_key);
+			setMasterKeyCopied(false);
+		},
+		onError: (error) => {
+			setMessage({text: `Failed: ${error.message}`, type: "error"});
+			setEncryptDialogOpen(false);
+		},
+	});
+
+	const unlockMutation = useMutation({
+		mutationFn: (key: string) => api.unlockSecrets(key),
+		onSuccess: () => {
+			invalidateSecrets();
+			setUnlockKeyInput("");
+			setMessage({text: "Secret store unlocked.", type: "success"});
+		},
+		onError: (error) => {
+			setMessage({text: `Unlock failed: ${error.message}`, type: "error"});
+		},
+	});
+
+	const lockMutation = useMutation({
+		mutationFn: () => api.lockSecrets(),
+		onSuccess: () => {
+			invalidateSecrets();
+			setMessage({text: "Secret store locked.", type: "success"});
+		},
+		onError: (error) => {
+			setMessage({text: `Failed: ${error.message}`, type: "error"});
+		},
+	});
+
+	const rotateMutation = useMutation({
+		mutationFn: () => api.rotateKey(),
+		onSuccess: (result) => {
+			invalidateSecrets();
+			setRotateDialogOpen(false);
+			setMasterKeyDisplay(result.master_key);
+			setMasterKeyCopied(false);
+			setEncryptDialogOpen(true);
+		},
+		onError: (error) => {
+			setMessage({text: `Failed: ${error.message}`, type: "error"});
+			setRotateDialogOpen(false);
+		},
+	});
+
+	const migrateMutation = useMutation({
+		mutationFn: () => api.migrateSecrets(),
+		onSuccess: (result) => {
+			invalidateSecrets();
+			setMessage({
+				text:
+					result.migrated.length > 0
+						? `Migrated ${result.migrated.length} secrets from config.toml.`
+						: result.message,
+				type: result.migrated.length > 0 ? "success" : "success",
+			});
+		},
+		onError: (error) => {
+			setMessage({text: `Migration failed: ${error.message}`, type: "error"});
+		},
+	});
+
+	// ── Handlers ─────────────────────────────────────────────────────────
+	const handleOpenAdd = () => {
+		setNameInput("");
+		setValueInput("");
+		setCategoryInput("tool");
+		setMessage(null);
+		setAddDialogOpen(true);
+	};
+
+	const handleOpenEdit = (secret: SecretListItem) => {
+		setEditingSecret(secret.name);
+		setNameInput(secret.name);
+		setValueInput("");
+		setCategoryInput(secret.category);
+		setMessage(null);
+	};
+
+	const handleSave = () => {
+		const name = editingSecret ?? nameInput.trim().toUpperCase();
+		if (!name || !valueInput) return;
+		putMutation.mutate({name, value: valueInput, category: categoryInput});
+	};
+
+	const handleCopyKey = async () => {
+		if (!masterKeyDisplay) return;
+		try {
+			await navigator.clipboard.writeText(masterKeyDisplay);
+			setMasterKeyCopied(true);
+		} catch {
+			// Fallback
+			const textarea = document.createElement("textarea");
+			textarea.value = masterKeyDisplay;
+			textarea.setAttribute("readonly", "");
+			textarea.style.position = "absolute";
+			textarea.style.left = "-9999px";
+			document.body.appendChild(textarea);
+			textarea.select();
+			document.execCommand("copy");
+			document.body.removeChild(textarea);
+			setMasterKeyCopied(true);
+		}
+	};
+
+	const filteredSecrets = secrets.filter((secret) => {
+		if (filterCategory !== "all" && secret.category !== filterCategory)
+			return false;
+		if (
+			searchQuery &&
+			!secret.name.toLowerCase().includes(searchQuery.toLowerCase())
+		)
+			return false;
+		return true;
+	});
+
+	return (
+		<div className="mx-auto max-w-2xl px-6 py-6">
+			{/* Header */}
+			<div className="mb-6">
+				<h2 className="font-plex text-sm font-semibold text-ink">Secrets</h2>
+				<p className="mt-1 text-sm text-ink-dull">
+					Manage credentials for LLM providers (system) and CLI tools used by
+					workers (tool). System secrets are never exposed to worker
+					subprocesses. Tool secrets are injected as environment variables.
+				</p>
+			</div>
+
+			{/* Status bar */}
+			{storeStatus && (
+				<div className="mb-4 flex items-center gap-3 rounded-md border border-app-line bg-app-dark-box/20 px-4 py-3">
+					<div className="flex items-center gap-2">
+						<div
+							className={`h-2 w-2 rounded-full ${
+								state === "unlocked"
+									? "bg-green-500"
+									: state === "locked"
+										? "bg-red-500"
+										: "bg-amber-500"
+							}`}
+						/>
+						<span className="text-sm font-medium text-ink">
+							{state === "unlocked"
+								? "Encrypted & Unlocked"
+								: state === "locked"
+									? "Encrypted & Locked"
+									: "Unencrypted"}
+						</span>
+					</div>
+					<div className="flex-1" />
+					<span className="text-tiny text-ink-faint">
+						{storeStatus.secret_count} secrets ({storeStatus.system_count}{" "}
+						system, {storeStatus.tool_count} tool)
+					</span>
+				</div>
+			)}
+
+			{/* Encryption banner (unencrypted stores) */}
+			{state === "unencrypted" && !storeStatus?.platform_managed && (
+				<div className="mb-4 rounded-md border border-amber-500/20 bg-amber-500/5 px-4 py-3">
+					<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+						<div className="sm:pr-4">
+							<p className="text-sm font-medium text-amber-400">
+								Encryption not enabled
+							</p>
+							<p className="mt-0.5 text-sm text-ink-faint">
+								Secrets are stored without encryption. Enable encryption for
+								protection against volume compromise.
+							</p>
+						</div>
+						<Button
+							onClick={() => {
+								setEncryptDialogOpen(true);
+								setMasterKeyDisplay(null);
+							}}
+							variant="outline"
+							className="w-full shrink-0 whitespace-nowrap sm:w-auto"
+						>
+							Enable Encryption
+						</Button>
+					</div>
+				</div>
+			)}
+
+			{/* Unlock prompt (locked stores) */}
+			{isLocked && (
+				<div className="mb-4 rounded-md border border-red-500/20 bg-red-500/5 px-4 py-3">
+					<p className="text-sm font-medium text-red-400">Secrets are locked</p>
+					<p className="mt-0.5 text-sm text-ink-faint">
+						Enter your master key to unlock encrypted secrets. You can view
+						secret names but cannot add, edit, or read values while locked.
+					</p>
+					<div className="mt-3 flex items-center gap-2">
+						<Input
+							type="password"
+							value={unlockKeyInput}
+							onChange={(e) => setUnlockKeyInput(e.target.value)}
+							placeholder="Paste master key (hex)"
+							className="max-w-sm font-mono text-tiny"
+							onKeyDown={(e) => {
+								if (e.key === "Enter" && unlockKeyInput.trim())
+									unlockMutation.mutate(unlockKeyInput.trim());
+							}}
+						/>
+						<Button
+							onClick={() => unlockMutation.mutate(unlockKeyInput.trim())}
+							disabled={!unlockKeyInput.trim()}
+							loading={unlockMutation.isPending}
+							size="md"
+						>
+							Unlock
+						</Button>
+					</div>
+				</div>
+			)}
+
+			{/* Feedback message */}
+			{message && (
+				<div
+					className={`mb-4 rounded-md border px-3 py-2 text-sm ${
+						message.type === "success"
+							? "border-green-500/20 bg-green-500/10 text-green-400"
+							: "border-red-500/20 bg-red-500/10 text-red-400"
+					}`}
+				>
+					{message.text}
+				</div>
+			)}
+
+			{/* Toolbar */}
+			<div className="mb-3 flex items-center gap-2">
+				<Input
+					value={searchQuery}
+					onChange={(e) => setSearchQuery(e.target.value)}
+					placeholder="Filter secrets..."
+					className="max-w-xs"
+				/>
+				<div className="flex gap-1">
+					{(["all", "system", "tool"] as const).map((cat) => (
+						<button
+							key={cat}
+							onClick={() => setFilterCategory(cat)}
+							className={`rounded-full px-2.5 py-1 text-tiny font-medium transition-colors ${
+								filterCategory === cat
+									? "bg-accent/15 text-accent"
+									: "text-ink-faint hover:text-ink-dull"
+							}`}
+						>
+							{cat === "all"
+								? "All"
+								: cat.charAt(0).toUpperCase() + cat.slice(1)}
+						</button>
+					))}
+				</div>
+				<div className="flex-1" />
+				{canMutate && (
+					<Button onClick={handleOpenAdd} size="md">
+						Add secret
+					</Button>
+				)}
+			</div>
+
+			{/* Secret list */}
+			{isLoading ? (
+				<div className="flex items-center gap-2 text-ink-dull">
+					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
+					Loading secrets...
+				</div>
+			) : filteredSecrets.length === 0 ? (
+				<div className="flex flex-col items-center rounded-lg border border-dashed border-app-line py-12">
+					<p className="text-sm font-medium text-ink-dull">
+						{secrets.length === 0 ? "No secrets yet" : "No matching secrets"}
+					</p>
+					<p className="mt-1 text-sm text-ink-faint">
+						{secrets.length === 0
+							? "Add credentials for LLM providers or CLI tools."
+							: "Try a different filter."}
+					</p>
+					{secrets.length === 0 && canMutate && (
+						<div className="mt-4 flex gap-2">
+							<Button onClick={handleOpenAdd} size="md">
+								Add secret
+							</Button>
+							<Button
+								onClick={() => migrateMutation.mutate()}
+								variant="outline"
+								size="md"
+								loading={migrateMutation.isPending}
+							>
+								Migrate from config
+							</Button>
+						</div>
+					)}
+				</div>
+			) : (
+				<div className="flex flex-col gap-1.5">
+					{filteredSecrets.map((secret) => (
+						<div
+							key={secret.name}
+							className="group flex items-center rounded-lg border border-app-line bg-app-box px-4 py-3"
+						>
+							<div className="flex-1 min-w-0">
+								<div className="flex items-center gap-2">
+									<code className="text-sm font-medium text-ink">
+										{secret.name}
+									</code>
+									<Badge
+										variant="outline"
+										size="md"
+										className="pointer-events-none transition-none"
+									>
+										{secret.category}
+									</Badge>
+								</div>
+								<p className="mt-0.5 text-tiny text-ink-faint">
+									Updated {new Date(secret.updated_at).toLocaleDateString()}
+								</p>
+							</div>
+							{canMutate && (
+								<div className="flex gap-1.5 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto">
+									<Button
+										onClick={() => handleOpenEdit(secret)}
+										variant="outline"
+										size="md"
+									>
+										Update
+									</Button>
+									<Button
+										onClick={() => setDeleteTarget(secret.name)}
+										variant="outline"
+										size="md"
+									>
+										Delete
+									</Button>
+								</div>
+							)}
+						</div>
+					))}
+				</div>
+			)}
+
+			{/* Bottom actions for encrypted stores */}
+			{storeStatus?.encrypted && !storeStatus.platform_managed && canMutate && (
+				<div className="mt-6 flex items-center gap-2 border-t border-app-line pt-4">
+					<Button
+						onClick={() => lockMutation.mutate()}
+						variant="outline"
+						size="md"
+						loading={lockMutation.isPending}
+					>
+						Lock store
+					</Button>
+					<Button
+						onClick={() => setRotateDialogOpen(true)}
+						variant="outline"
+						size="md"
+					>
+						Rotate master key
+					</Button>
+					<div className="flex-1" />
+					<Button
+						onClick={() => migrateMutation.mutate()}
+						variant="outline"
+						size="md"
+						loading={migrateMutation.isPending}
+					>
+						Migrate from config
+					</Button>
+				</div>
+			)}
+
+			{/* Migrate button for unencrypted stores */}
+			{state === "unencrypted" && secrets.length > 0 && (
+				<div className="mt-4 flex justify-end">
+					<Button
+						onClick={() => migrateMutation.mutate()}
+						variant="outline"
+						size="md"
+						loading={migrateMutation.isPending}
+					>
+						Migrate from config
+					</Button>
+				</div>
+			)}
+
+			{/* ── Add / Edit Dialog ─────────────────────────────────────── */}
+			<DialogRoot
+				open={addDialogOpen || !!editingSecret}
+				onOpenChange={(open) => {
+					if (!open) {
+						setAddDialogOpen(false);
+						setEditingSecret(null);
+						setNameInput("");
+						setValueInput("");
+					}
+				}}
+			>
+				<DialogContent className="max-w-md">
+					<DialogHeader>
+						<DialogTitle>
+							{editingSecret ? "Update Secret" : "Add Secret"}
+						</DialogTitle>
+						<DialogDescription>
+							{editingSecret
+								? `Enter a new value for ${editingSecret}. The existing value will be overwritten.`
+								: "Add a new credential. System secrets are internal (LLM keys, messaging tokens). Tool secrets are exposed to worker subprocesses as environment variables."}
+						</DialogDescription>
+					</DialogHeader>
+
+					{!editingSecret && (
+						<div className="space-y-1.5">
+							<label className="text-sm font-medium text-ink">Name</label>
+							<Input
+								value={nameInput}
+								onChange={(e) =>
+									setNameInput(
+										e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, ""),
+									)
+								}
+								placeholder="GH_TOKEN"
+								className="font-mono"
+								autoFocus
+							/>
+							<p className="text-tiny text-ink-faint">
+								UPPER_SNAKE_CASE. This is also the env var name for tool
+								secrets.
+							</p>
+						</div>
+					)}
+
+					<div className="space-y-1.5">
+						<label className="text-sm font-medium text-ink">Value</label>
+						<Input
+							type="password"
+							value={valueInput}
+							onChange={(e) => setValueInput(e.target.value)}
+							placeholder={editingSecret ? "Enter new value" : "Secret value"}
+							autoFocus={!!editingSecret}
+							onKeyDown={(e) => {
+								if (e.key === "Enter") handleSave();
+							}}
+						/>
+					</div>
+
+					<div className="space-y-1.5">
+						<label className="text-sm font-medium text-ink">Category</label>
+						<SelectRoot
+							value={categoryInput}
+							onValueChange={(value) =>
+								setCategoryInput(value as SecretCategory)
+							}
+						>
+							<SelectTrigger>
+								<SelectValue />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="tool">
+									Tool — exposed to workers as env vars
+								</SelectItem>
+								<SelectItem value="system">
+									System — internal only, never exposed
+								</SelectItem>
+							</SelectContent>
+						</SelectRoot>
+						<p className="text-tiny text-ink-faint">
+							{categoryInput === "tool"
+								? "Workers will have access to this credential via environment variable."
+								: "Only the Spacebot process can read this credential. Workers never see it."}
+						</p>
+					</div>
+
+					<DialogFooter>
+						<Button
+							onClick={() => {
+								setAddDialogOpen(false);
+								setEditingSecret(null);
+							}}
+							variant="outline"
+							size="md"
+						>
+							Cancel
+						</Button>
+						<Button
+							onClick={handleSave}
+							disabled={(!editingSecret && !nameInput.trim()) || !valueInput}
+							loading={putMutation.isPending}
+							size="md"
+						>
+							Save
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</DialogRoot>
+
+			{/* ── Delete Confirmation ───────────────────────────────────── */}
+			<DialogRoot
+				open={!!deleteTarget}
+				onOpenChange={(open) => {
+					if (!open) setDeleteTarget(null);
+				}}
+			>
+				<DialogContent className="max-w-sm">
+					<DialogHeader>
+						<DialogTitle>Delete Secret</DialogTitle>
+						<DialogDescription>
+							Are you sure you want to delete{" "}
+							<code className="font-mono text-ink">{deleteTarget}</code>? If
+							this secret is referenced in config.toml, the reference will fail
+							to resolve.
+						</DialogDescription>
+					</DialogHeader>
+					<DialogFooter>
+						<Button
+							onClick={() => setDeleteTarget(null)}
+							variant="outline"
+							size="md"
+						>
+							Cancel
+						</Button>
+						<Button
+							onClick={() => {
+								if (deleteTarget) deleteMutation.mutate(deleteTarget);
+							}}
+							loading={deleteMutation.isPending}
+							variant="accent"
+							size="md"
+						>
+							Delete
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</DialogRoot>
+
+			{/* ── Enable Encryption / Master Key Display Dialog ─────────── */}
+			<DialogRoot
+				open={encryptDialogOpen}
+				onOpenChange={(open) => {
+					if (!open) {
+						setEncryptDialogOpen(false);
+						setMasterKeyDisplay(null);
+						setMasterKeyCopied(false);
+					}
+				}}
+			>
+				<DialogContent className="max-w-md">
+					{!masterKeyDisplay ? (
+						<>
+							<DialogHeader>
+								<DialogTitle>Enable Encryption</DialogTitle>
+								<DialogDescription>
+									This will generate a master key and encrypt all secrets at
+									rest using AES-256-GCM. On Linux, you will need the master key
+									to unlock secrets after a reboot.
+								</DialogDescription>
+							</DialogHeader>
+							<DialogFooter>
+								<Button
+									onClick={() => setEncryptDialogOpen(false)}
+									variant="outline"
+									size="md"
+								>
+									Cancel
+								</Button>
+								<Button
+									onClick={() => encryptMutation.mutate()}
+									loading={encryptMutation.isPending}
+									size="md"
+								>
+									Enable encryption
+								</Button>
+							</DialogFooter>
+						</>
+					) : (
+						<>
+							<DialogHeader>
+								<DialogTitle>Master Key Generated</DialogTitle>
+								<DialogDescription>
+									Save this key somewhere safe. On Linux, you will need it to
+									unlock the secret store after a reboot. This is the only time
+									the key will be shown.
+								</DialogDescription>
+							</DialogHeader>
+							<div className="space-y-3">
+								<div className="flex items-center gap-2">
+									<code className="flex-1 rounded border border-app-line bg-app-darkerBox px-3 py-2 font-mono text-tiny text-ink break-all select-all">
+										{masterKeyDisplay}
+									</code>
+									<Button
+										onClick={handleCopyKey}
+										size="md"
+										variant={masterKeyCopied ? "gray" : "outline"}
+									>
+										{masterKeyCopied ? "Copied" : "Copy"}
+									</Button>
+								</div>
+								<div className="rounded-md border border-amber-500/20 bg-amber-500/5 px-3 py-2 text-sm text-amber-400">
+									If you lose this key and the OS credential store is cleared
+									(e.g. after a Linux reboot), you will not be able to access
+									your encrypted secrets.
+								</div>
+							</div>
+							<DialogFooter>
+								<Button
+									onClick={() => {
+										setEncryptDialogOpen(false);
+										setMasterKeyDisplay(null);
+										setMasterKeyCopied(false);
+									}}
+									size="md"
+								>
+									Done
+								</Button>
+							</DialogFooter>
+						</>
+					)}
+				</DialogContent>
+			</DialogRoot>
+
+			{/* ── Rotate Key Confirmation ───────────────────────────────── */}
+			<DialogRoot
+				open={rotateDialogOpen}
+				onOpenChange={(open) => {
+					if (!open) setRotateDialogOpen(false);
+				}}
+			>
+				<DialogContent className="max-w-sm">
+					<DialogHeader>
+						<DialogTitle>Rotate Master Key</DialogTitle>
+						<DialogDescription>
+							This will generate a new master key and re-encrypt all secrets.
+							Your current master key will be invalidated. You will need to save
+							the new key.
+						</DialogDescription>
+					</DialogHeader>
+					<DialogFooter>
+						<Button
+							onClick={() => setRotateDialogOpen(false)}
+							variant="outline"
+							size="md"
+						>
+							Cancel
+						</Button>
+						<Button
+							onClick={() => rotateMutation.mutate()}
+							loading={rotateMutation.isPending}
+							size="md"
+						>
+							Rotate key
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</DialogRoot>
+		</div>
+	);
+}
diff --git a/interface/src/components/settings/ServerSection.tsx b/interface/src/components/settings/ServerSection.tsx
new file mode 100644
index 000000000..fcd0f617e
--- /dev/null
+++ b/interface/src/components/settings/ServerSection.tsx
@@ -0,0 +1,157 @@
+import {useState, useEffect} from "react";
+import {useMutation, useQueryClient} from "@tanstack/react-query";
+import {api} from "@/api/client";
+import {Button, Input, Switch} from "@spacedrive/primitives";
+import type {GlobalSettingsSectionProps} from "./types";
+
+export function ServerSection({settings, isLoading}: GlobalSettingsSectionProps) {
+	const queryClient = useQueryClient();
+	const [apiEnabled, setApiEnabled] = useState(settings?.api_enabled ?? true);
+	const [apiPort, setApiPort] = useState(
+		settings?.api_port.toString() ?? "19898",
+	);
+	const [apiBind, setApiBind] = useState(settings?.api_bind ?? "127.0.0.1");
+	const [message, setMessage] = useState<{
+		text: string;
+		type: "success" | "error";
+		requiresRestart?: boolean;
+	} | null>(null);
+
+	// Update form state when settings load
+	useEffect(() => {
+		if (settings) {
+			setApiEnabled(settings.api_enabled);
+			setApiPort(settings.api_port.toString());
+			setApiBind(settings.api_bind);
+		}
+	}, [settings]);
+
+	const updateMutation = useMutation({
+		mutationFn: api.updateGlobalSettings,
+		onSuccess: (result) => {
+			if (result.success) {
+				setMessage({
+					text: result.message,
+					type: "success",
+					requiresRestart: result.requires_restart,
+				});
+				queryClient.invalidateQueries({queryKey: ["global-settings"]});
+			} else {
+				setMessage({text: result.message, type: "error"});
+			}
+		},
+		onError: (error) => {
+			setMessage({text: `Failed: ${error.message}`, type: "error"});
+		},
+	});
+
+	const handleSave = () => {
+		const port = parseInt(apiPort, 10);
+		if (isNaN(port) || port < 1024 || port > 65535) {
+			setMessage({text: "Port must be between 1024 and 65535", type: "error"});
+			return;
+		}
+
+		updateMutation.mutate({
+			api_enabled: apiEnabled,
+			api_port: port,
+			api_bind: apiBind.trim(),
+		});
+	};
+
+	return (
+		<div className="mx-auto max-w-2xl px-6 py-6">
+			<div className="mb-6">
+				<h2 className="font-plex text-sm font-semibold text-ink">
+					API Server Configuration
+				</h2>
+				<p className="mt-1 text-sm text-ink-dull">
+					Configure the HTTP API server. Changes require a restart to take
+					effect.
+				</p>
+			</div>
+
+			{isLoading ? (
+				<div className="flex items-center gap-2 text-ink-dull">
+					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
+					Loading settings...
+				</div>
+			) : (
+				<div className="flex flex-col gap-4">
+					<div className="rounded-lg border border-app-line bg-app-box p-4">
+						<div className="flex items-center justify-between">
+							<div>
+								<span className="text-sm font-medium text-ink">
+									Enable API Server
+								</span>
+								<p className="mt-0.5 text-sm text-ink-dull">
+									Disable to prevent the HTTP API from starting
+								</p>
+							</div>
+							<Switch
+								size="md"
+								checked={apiEnabled}
+								onCheckedChange={setApiEnabled}
+							/>
+						</div>
+					</div>
+
+					<div className="rounded-lg border border-app-line bg-app-box p-4">
+						<label className="block">
+							<span className="text-sm font-medium text-ink">Port</span>
+							<p className="mt-0.5 text-sm text-ink-dull">
+								Port number for the API server
+							</p>
+							<Input
+								type="number"
+								value={apiPort}
+								onChange={(e) => setApiPort(e.target.value)}
+								min="1024"
+								max="65535"
+								className="mt-2"
+							/>
+						</label>
+					</div>
+
+					<div className="rounded-lg border border-app-line bg-app-box p-4">
+						<label className="block">
+							<span className="text-sm font-medium text-ink">Bind Address</span>
+							<p className="mt-0.5 text-sm text-ink-dull">
+								IP address to bind to (127.0.0.1 for local, 0.0.0.0 for all
+								interfaces)
+							</p>
+							<Input
+								type="text"
+								value={apiBind}
+								onChange={(e) => setApiBind(e.target.value)}
+								placeholder="127.0.0.1"
+								className="mt-2"
+							/>
+						</label>
+					</div>
+
+					<Button onClick={handleSave} loading={updateMutation.isPending}>
+						Save Changes
+					</Button>
+				</div>
+			)}
+
+			{message && (
+				<div
+					className={`mt-4 rounded-md border px-3 py-2 text-sm ${
+						message.type === "success"
+							? "border-green-500/20 bg-green-500/10 text-green-400"
+							: "border-red-500/20 bg-red-500/10 text-red-400"
+					}`}
+				>
+					{message.text}
+					{message.requiresRestart && (
+						<div className="mt-1 text-yellow-400">
+							⚠️ Restart required for changes to take effect
+						</div>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/interface/src/components/settings/UpdatesSection.tsx b/interface/src/components/settings/UpdatesSection.tsx
new file mode 100644
index 000000000..811316a39
--- /dev/null
+++ b/interface/src/components/settings/UpdatesSection.tsx
@@ -0,0 +1,357 @@
+import {useState} from "react";
+import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
+import {api, type UpdateStatus} from "@/api/client";
+import {Button} from "@spacedrive/primitives";
+
+function formatCheckedAt(checkedAt: string | null): string {
+	if (!checkedAt) return "Never";
+	const timestamp = new Date(checkedAt);
+	if (Number.isNaN(timestamp.getTime())) return checkedAt;
+	return timestamp.toLocaleString();
+}
+
+function pullableDockerImage(image: string | null): string {
+	if (!image) return "ghcr.io/spacedriveapp/spacebot:latest";
+	return image.split("@")[0] ?? image;
+}
+
+export function UpdatesSection() {
+	const queryClient = useQueryClient();
+	const [message, setMessage] = useState<{
+		text: string;
+		type: "success" | "error";
+	} | null>(null);
+	const [copiedBlock, setCopiedBlock] = useState<string | null>(null);
+
+	const {data, isLoading, isFetching} = useQuery<UpdateStatus>({
+		queryKey: ["update-check"],
+		queryFn: api.updateCheck,
+		staleTime: 30_000,
+		refetchInterval: 300_000,
+	});
+
+	const checkNowMutation = useMutation({
+		mutationFn: api.updateCheckNow,
+		onSuccess: (status) => {
+			queryClient.setQueryData(["update-check"], status);
+			if (status.update_available && status.latest_version) {
+				setMessage({
+					text: `Update ${status.latest_version} is available.`,
+					type: "success",
+				});
+			} else {
+				setMessage({text: "No newer release found.", type: "success"});
+			}
+		},
+		onError: (error) => {
+			setMessage({
+				text: `Failed to check updates: ${error.message}`,
+				type: "error",
+			});
+		},
+	});
+
+	const applyMutation = useMutation({
+		mutationFn: api.updateApply,
+		onSuccess: (result) => {
+			if (result.status === "updating") {
+				setMessage({
+					text: "Applying update. This instance will restart in a few seconds.",
+					type: "success",
+				});
+				setTimeout(() => {
+					queryClient.invalidateQueries({queryKey: ["update-check"]});
+				}, 3000);
+				return;
+			}
+
+			setMessage({text: result.error ?? "Update failed", type: "error"});
+		},
+		onError: (error) => {
+			setMessage({
+				text: `Failed to apply update: ${error.message}`,
+				type: "error",
+			});
+		},
+	});
+
+	const handleCopy = async (label: string, content: string) => {
+		try {
+			if (navigator.clipboard?.writeText) {
+				await navigator.clipboard.writeText(content);
+			} else {
+				const textarea = document.createElement("textarea");
+				textarea.value = content;
+				textarea.setAttribute("readonly", "");
+				textarea.style.position = "absolute";
+				textarea.style.left = "-9999px";
+				document.body.appendChild(textarea);
+				textarea.select();
+				document.execCommand("copy");
+				document.body.removeChild(textarea);
+			}
+			setCopiedBlock(label);
+			setTimeout(
+				() => setCopiedBlock((current) => (current === label ? null : current)),
+				1200,
+			);
+		} catch (error: any) {
+			setMessage({
+				text: `Failed to copy commands: ${error.message}`,
+				type: "error",
+			});
+		}
+	};
+
+	const deployment = data?.deployment ?? "native";
+	const deploymentLabel =
+		deployment === "docker"
+			? "Docker"
+			: deployment === "hosted"
+				? "Hosted"
+				: "Native";
+
+	const dockerComposeCommands = [
+		"docker compose pull spacebot",
+		"docker compose up -d --force-recreate spacebot",
+	];
+
+	const dockerRunCommands = [
+		`docker pull ${pullableDockerImage(data?.docker_image ?? null)}`,
+		"docker stop spacebot && docker rm spacebot",
+		"# re-run your docker run command",
+	];
+
+	const nativeCommands = [
+		"git pull",
+		"cargo install --path . --force",
+		"spacebot restart",
+	];
+
+	return (
+		<div className="mx-auto max-w-2xl px-6 py-6">
+			<div className="mb-6">
+				<h2 className="font-plex text-sm font-semibold text-ink">Updates</h2>
+				<p className="mt-1 text-sm text-ink-dull">
+					Check release status, trigger one-click Docker updates, and copy
+					manual update commands.
+				</p>
+			</div>
+
+			{isLoading ? (
+				<div className="flex items-center gap-2 text-ink-dull">
+					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
+					Loading update status...
+				</div>
+			) : (
+				<div className="flex flex-col gap-4">
+					<div className="rounded-lg border border-app-line bg-app-box p-4">
+						<div className="flex items-center justify-between gap-4">
+							<div>
+								<p className="text-sm font-medium text-ink">Release Status</p>
+								<p className="mt-0.5 text-sm text-ink-dull">
+									{data?.update_available
+										? `Update ${data.latest_version ?? ""} is available`
+										: "You're running the latest available release"}
+								</p>
+							</div>
+							<Button
+								onClick={() => {
+									setMessage(null);
+									checkNowMutation.mutate();
+								}}
+								loading={checkNowMutation.isPending || isFetching}
+								size="md"
+								variant="outline"
+							>
+								Check now
+							</Button>
+						</div>
+
+						<div className="mt-4 grid grid-cols-2 gap-3 text-sm">
+							<div>
+								<p className="text-ink-faint">Deployment</p>
+								<p className="text-ink">{deploymentLabel}</p>
+							</div>
+							<div>
+								<p className="text-ink-faint">Current version</p>
+								<p className="text-ink">{data?.current_version ?? "Unknown"}</p>
+							</div>
+							<div>
+								<p className="text-ink-faint">Latest release</p>
+								<p className="text-ink">{data?.latest_version ?? "Unknown"}</p>
+							</div>
+							<div>
+								<p className="text-ink-faint">Last checked</p>
+								<p className="text-ink">
+									{formatCheckedAt(data?.checked_at ?? null)}
+								</p>
+							</div>
+						</div>
+
+						{data?.docker_image && (
+							<div className="mt-3 rounded border border-app-line/70 bg-app-dark-box/30 px-3 py-2">
+								<p className="text-tiny text-ink-faint">Container image</p>
+								<p className="font-mono text-xs text-ink">
+									{data.docker_image}
+								</p>
+							</div>
+						)}
+
+						{data?.release_url && (
+							<a
+								href={data.release_url}
+								target="_blank"
+								rel="noopener noreferrer"
+								className="mt-3 inline-block text-sm text-accent hover:underline"
+							>
+								View release notes
+							</a>
+						)}
+					</div>
+
+					{deployment === "docker" && (
+						<div className="rounded-lg border border-app-line bg-app-box p-4">
+							<div className="flex items-center justify-between gap-3">
+								<div>
+									<p className="text-sm font-medium text-ink">
+										One-Click Docker Update
+									</p>
+									<p className="mt-0.5 text-sm text-ink-dull">
+										Pull and swap to the latest release image from the web UI.
+									</p>
+								</div>
+								<Button
+									onClick={() => {
+										setMessage(null);
+										applyMutation.mutate();
+									}}
+									disabled={!data?.can_apply || !data?.update_available}
+									loading={applyMutation.isPending}
+									size="md"
+								>
+									Update now
+								</Button>
+							</div>
+							{!data?.update_available && (
+								<p className="mt-3 text-xs text-ink-faint">
+									No update available yet.
+								</p>
+							)}
+							{!data?.can_apply && data?.cannot_apply_reason && (
+								<p className="mt-3 text-xs text-yellow-300">
+									{data.cannot_apply_reason}
+								</p>
+							)}
+							{data?.can_apply && (
+								<p className="mt-3 text-xs text-ink-faint">
+									Applying an update restarts this instance. The UI should
+									reconnect in 10-30 seconds.
+								</p>
+							)}
+						</div>
+					)}
+
+					<div className="rounded-lg border border-app-line bg-app-box p-4">
+						<p className="text-sm font-medium text-ink">
+							Manual Update Commands
+						</p>
+						<p className="mt-0.5 text-sm text-ink-dull">
+							Use these when one-click update is unavailable or when you prefer
+							manual rollouts.
+						</p>
+
+						{deployment === "docker" && (
+							<div className="mt-3 flex flex-col gap-3">
+								<div className="rounded border border-app-line/70 bg-app-dark-box/30 p-3">
+									<div className="mb-2 flex items-center justify-between">
+										<p className="text-xs font-medium uppercase tracking-wider text-ink-faint">
+											Docker Compose
+										</p>
+										<Button
+											onClick={() =>
+												handleCopy("compose", dockerComposeCommands.join("\n"))
+											}
+											variant="outline"
+											size="md"
+										>
+											{copiedBlock === "compose" ? "Copied" : "Copy"}
+										</Button>
+									</div>
+									<pre className="overflow-x-auto text-xs text-ink">
+										<code>{dockerComposeCommands.join("\n")}</code>
+									</pre>
+								</div>
+								<div className="rounded border border-app-line/70 bg-app-dark-box/30 p-3">
+									<div className="mb-2 flex items-center justify-between">
+										<p className="text-xs font-medium uppercase tracking-wider text-ink-faint">
+											docker run
+										</p>
+										<Button
+											onClick={() =>
+												handleCopy("docker-run", dockerRunCommands.join("\n"))
+											}
+											variant="outline"
+											size="md"
+										>
+											{copiedBlock === "docker-run" ? "Copied" : "Copy"}
+										</Button>
+									</div>
+									<pre className="overflow-x-auto text-xs text-ink">
+										<code>{dockerRunCommands.join("\n")}</code>
+									</pre>
+								</div>
+							</div>
+						)}
+
+						{deployment === "native" && (
+							<div className="mt-3 rounded border border-app-line/70 bg-app-dark-box/30 p-3">
+								<div className="mb-2 flex items-center justify-between">
+									<p className="text-xs font-medium uppercase tracking-wider text-ink-faint">
+										Source Install
+									</p>
+									<Button
+										onClick={() =>
+											handleCopy("native", nativeCommands.join("\n"))
+										}
+										variant="outline"
+										size="md"
+									>
+										{copiedBlock === "native" ? "Copied" : "Copy"}
+									</Button>
+								</div>
+								<pre className="overflow-x-auto text-xs text-ink">
+									<code>{nativeCommands.join("\n")}</code>
+								</pre>
+							</div>
+						)}
+
+						{deployment === "hosted" && (
+							<p className="mt-3 text-sm text-ink-dull">
+								Hosted instances are updated through platform rollouts.
+							</p>
+						)}
+					</div>
+
+					{data?.error && (
+						<div className="rounded-md border border-red-500/20 bg-red-500/10 px-3 py-2 text-sm text-red-400">
+							Update check error: {data.error}
+						</div>
+					)}
+				</div>
+			)}
+
+			{message && (
+				<div
+					className={`mt-4 rounded-md border px-3 py-2 text-sm ${
+						message.type === "success"
+							? "border-green-500/20 bg-green-500/10 text-green-400"
+							: "border-red-500/20 bg-red-500/10 text-red-400"
+					}`}
+				>
+					{message.text}
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/interface/src/components/settings/WorkerLogsSection.tsx b/interface/src/components/settings/WorkerLogsSection.tsx
new file mode 100644
index 000000000..544bfae4d
--- /dev/null
+++ b/interface/src/components/settings/WorkerLogsSection.tsx
@@ -0,0 +1,130 @@
+import {useState, useEffect} from "react";
+import {useMutation, useQueryClient} from "@tanstack/react-query";
+import {api} from "@/api/client";
+import {Button} from "@spacedrive/primitives";
+import type {GlobalSettingsSectionProps} from "./types";
+
+export function WorkerLogsSection({settings, isLoading}: GlobalSettingsSectionProps) {
+	const queryClient = useQueryClient();
+	const [logMode, setLogMode] = useState(
+		settings?.worker_log_mode ?? "errors_only",
+	);
+	const [message, setMessage] = useState<{
+		text: string;
+		type: "success" | "error";
+	} | null>(null);
+
+	// Update form state when settings load
+	useEffect(() => {
+		if (settings) {
+			setLogMode(settings.worker_log_mode);
+		}
+	}, [settings]);
+
+	const updateMutation = useMutation({
+		mutationFn: api.updateGlobalSettings,
+		onSuccess: (result) => {
+			if (result.success) {
+				setMessage({text: result.message, type: "success"});
+				queryClient.invalidateQueries({queryKey: ["global-settings"]});
+			} else {
+				setMessage({text: result.message, type: "error"});
+			}
+		},
+		onError: (error) => {
+			setMessage({text: `Failed: ${error.message}`, type: "error"});
+		},
+	});
+
+	const handleSave = () => {
+		updateMutation.mutate({worker_log_mode: logMode});
+	};
+
+	const modes = [
+		{
+			value: "errors_only",
+			label: "Errors Only",
+			description: "Only log failed worker runs (saves disk space)",
+		},
+		{
+			value: "all_separate",
+			label: "All (Separate)",
+			description: "Log all runs with separate directories for success/failure",
+		},
+		{
+			value: "all_combined",
+			label: "All (Combined)",
+			description: "Log all runs to the same directory",
+		},
+	];
+
+	return (
+		<div className="mx-auto max-w-2xl px-6 py-6">
+			<div className="mb-6">
+				<h2 className="font-plex text-sm font-semibold text-ink">
+					Worker Execution Logs
+				</h2>
+				<p className="mt-1 text-sm text-ink-dull">
+					Control how worker execution logs are stored in the logs directory.
+				</p>
+			</div>
+
+			{isLoading ? (
+				<div className="flex items-center gap-2 text-ink-dull">
+					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
+					Loading settings...
+				</div>
+			) : (
+				<div className="flex flex-col gap-4">
+					<div className="flex flex-col gap-3">
+						{modes.map((mode) => (
+							<div
+								key={mode.value}
+								className={`rounded-lg border p-4 cursor-pointer transition-colors ${
+									logMode === mode.value
+										? "border-accent bg-accent/5"
+										: "border-app-line bg-app-box hover:border-app-line/80"
+								}`}
+								onClick={() => setLogMode(mode.value)}
+							>
+								<label className="flex items-start gap-3 cursor-pointer">
+									<input
+										type="radio"
+										value={mode.value}
+										checked={logMode === mode.value}
+										onChange={(e) => setLogMode(e.target.value)}
+										className="mt-0.5"
+									/>
+									<div className="flex-1">
+										<span className="text-sm font-medium text-ink">
+											{mode.label}
+										</span>
+										<p className="mt-0.5 text-sm text-ink-dull">
+											{mode.description}
+										</p>
+									</div>
+								</label>
+							</div>
+						))}
+					</div>
+
+					<Button onClick={handleSave} loading={updateMutation.isPending}>
+						Save Changes
+					</Button>
+				</div>
+			)}
+
+			{message && (
+				<div
+					className={`mt-4 rounded-md border px-3 py-2 text-sm ${
+						message.type === "success"
+							? "border-green-500/20 bg-green-500/10 text-green-400"
+							: "border-red-500/20 bg-red-500/10 text-red-400"
+					}`}
+				>
+					{message.text}
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/interface/src/components/settings/constants.ts b/interface/src/components/settings/constants.ts
new file mode 100644
index 000000000..018bce707
--- /dev/null
+++ b/interface/src/components/settings/constants.ts
@@ -0,0 +1,271 @@
+import type {SectionId} from "./types";
+
+export const SECTIONS = [
+	{
+		id: "instance" as const,
+		label: "Instance",
+		group: "general" as const,
+		description: "Instance name and identity",
+	},
+	{
+		id: "providers" as const,
+		label: "Providers",
+		group: "general" as const,
+		description: "LLM provider credentials",
+	},
+	{
+		id: "channels" as const,
+		label: "Channels",
+		group: "messaging" as const,
+		description: "Messaging platforms and bindings",
+	},
+	{
+		id: "api-keys" as const,
+		label: "API Keys",
+		group: "general" as const,
+		description: "Third-party service keys",
+	},
+	{
+		id: "secrets" as const,
+		label: "Secrets",
+		group: "general" as const,
+		description: "Encrypted secret storage",
+	},
+	{
+		id: "server" as const,
+		label: "Server",
+		group: "system" as const,
+		description: "API server configuration",
+	},
+	{
+		id: "opencode" as const,
+		label: "OpenCode",
+		group: "system" as const,
+		description: "OpenCode worker integration",
+	},
+	{
+		id: "worker-logs" as const,
+		label: "Worker Logs",
+		group: "system" as const,
+		description: "Worker execution logging",
+	},
+	{
+		id: "updates" as const,
+		label: "Updates",
+		group: "system" as const,
+		description: "Release checks and update controls",
+	},
+	{
+		id: "appearance" as const,
+		label: "Appearance",
+		group: "general" as const,
+		description: "Theme and display settings",
+	},
+	{
+		id: "config-file" as const,
+		label: "Config File",
+		group: "system" as const,
+		description: "Raw config.toml editor",
+	},
+	{
+		id: "changelog" as const,
+		label: "Changelog",
+		group: "system" as const,
+		description: "Release history",
+	},
+] satisfies {
+	id: SectionId;
+	label: string;
+	group: string;
+	description: string;
+}[];
+
+export const PROVIDERS = [
+	{
+		id: "openrouter",
+		name: "OpenRouter",
+		description: "Multi-provider gateway with unified API",
+		placeholder: "sk-or-...",
+		envVar: "OPENROUTER_API_KEY",
+		defaultModel: "openrouter/anthropic/claude-sonnet-4",
+	},
+	{
+		id: "kilo",
+		name: "Kilo Gateway",
+		description: "OpenAI-compatible multi-provider gateway",
+		placeholder: "sk-...",
+		envVar: "KILO_API_KEY",
+		defaultModel: "kilo/anthropic/claude-sonnet-4.5",
+	},
+	{
+		id: "opencode-zen",
+		name: "OpenCode Zen",
+		description: "Multi-format gateway (Kimi, GLM, MiniMax, Qwen)",
+		placeholder: "...",
+		envVar: "OPENCODE_ZEN_API_KEY",
+		defaultModel: "opencode-zen/kimi-k2.5",
+	},
+	{
+		id: "opencode-go",
+		name: "OpenCode Go",
+		description: "Lite OpenCode model catalog and limits",
+		placeholder: "...",
+		envVar: "OPENCODE_GO_API_KEY",
+		defaultModel: "opencode-go/kimi-k2.5",
+	},
+	{
+		id: "anthropic",
+		name: "Anthropic",
+		description: "Claude models (Sonnet, Opus, Haiku)",
+		placeholder: "sk-ant-...",
+		envVar: "ANTHROPIC_API_KEY",
+		defaultModel: "anthropic/claude-sonnet-4",
+	},
+	{
+		id: "openai",
+		name: "OpenAI",
+		description: "GPT models",
+		placeholder: "sk-...",
+		envVar: "OPENAI_API_KEY",
+		defaultModel: "openai/gpt-4.1",
+	},
+	{
+		id: "zai-coding-plan",
+		name: "Z.AI Coding Plan",
+		description: "GLM coding models (glm-4.7, glm-5, glm-4.5-air)",
+		placeholder: "...",
+		envVar: "ZAI_CODING_PLAN_API_KEY",
+		defaultModel: "zai-coding-plan/glm-5",
+	},
+	{
+		id: "zhipu",
+		name: "Z.ai (GLM)",
+		description: "GLM models (GLM-4, GLM-4-Flash)",
+		placeholder: "...",
+		envVar: "ZHIPU_API_KEY",
+		defaultModel: "zhipu/glm-4-plus",
+	},
+	{
+		id: "groq",
+		name: "Groq",
+		description: "Fast inference for Llama, Mixtral models",
+		placeholder: "gsk_...",
+		envVar: "GROQ_API_KEY",
+		defaultModel: "groq/llama-3.3-70b-versatile",
+	},
+	{
+		id: "together",
+		name: "Together AI",
+		description: "Wide model selection with competitive pricing",
+		placeholder: "...",
+		envVar: "TOGETHER_API_KEY",
+		defaultModel: "together/meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo",
+	},
+	{
+		id: "fireworks",
+		name: "Fireworks AI",
+		description: "Fast inference for popular OSS models",
+		placeholder: "...",
+		envVar: "FIREWORKS_API_KEY",
+		defaultModel: "fireworks/accounts/fireworks/models/llama-v3p3-70b-instruct",
+	},
+	{
+		id: "deepseek",
+		name: "DeepSeek",
+		description: "DeepSeek Chat and Reasoner models",
+		placeholder: "sk-...",
+		envVar: "DEEPSEEK_API_KEY",
+		defaultModel: "deepseek/deepseek-chat",
+	},
+	{
+		id: "xai",
+		name: "xAI",
+		description: "Grok models",
+		placeholder: "xai-...",
+		envVar: "XAI_API_KEY",
+		defaultModel: "xai/grok-2-latest",
+	},
+	{
+		id: "mistral",
+		name: "Mistral AI",
+		description: "Mistral Large, Small, Codestral models",
+		placeholder: "...",
+		envVar: "MISTRAL_API_KEY",
+		defaultModel: "mistral/mistral-large-latest",
+	},
+	{
+		id: "gemini",
+		name: "Google Gemini",
+		description: "Google Gemini experimental and production models",
+		placeholder: "AIza...",
+		envVar: "GEMINI_API_KEY",
+		defaultModel: "gemini/gemini-2.5-flash",
+	},
+	{
+		id: "nvidia",
+		name: "NVIDIA NIM",
+		description: "NVIDIA-hosted models via NIM API",
+		placeholder: "nvapi-...",
+		envVar: "NVIDIA_API_KEY",
+		defaultModel: "nvidia/meta/llama-3.1-405b-instruct",
+	},
+	{
+		id: "minimax",
+		name: "MiniMax",
+		description: "MiniMax (Anthropic message format)",
+		placeholder: "sk-...",
+		envVar: "MINIMAX_API_KEY",
+		defaultModel: "minimax/MiniMax-M2.5",
+	},
+	{
+		id: "minimax-cn",
+		name: "MiniMax CN",
+		description: "MiniMax China (Anthropic message format)",
+		placeholder: "sk-...",
+		envVar: "MINIMAX_CN_API_KEY",
+		defaultModel: "minimax-cn/MiniMax-M2.5",
+	},
+	{
+		id: "moonshot",
+		name: "Moonshot AI",
+		description: "Kimi models (Kimi K2, Kimi K2.5)",
+		placeholder: "sk-...",
+		envVar: "MOONSHOT_API_KEY",
+		defaultModel: "moonshot/kimi-k2.5",
+	},
+	{
+		id: "github-copilot",
+		name: "GitHub Copilot",
+		description: "GitHub Copilot API (uses GitHub PAT for token exchange)",
+		placeholder: "ghp_... or gh auth token",
+		envVar: "GITHUB_COPILOT_API_KEY",
+		defaultModel: "github-copilot/claude-sonnet-4",
+	},
+	{
+		id: "azure",
+		name: "Azure OpenAI",
+		description: "Azure OpenAI Service with custom deployments",
+		placeholder: "Azure API key (alphanumeric string)",
+		envVar: "AZURE_API_KEY",
+		defaultModel: "azure/gpt-4o",
+	},
+	{
+		id: "ollama",
+		name: "Ollama",
+		description: "Local or remote Ollama API endpoint",
+		placeholder: "http://localhost:11434",
+		envVar: "OLLAMA_BASE_URL",
+		defaultModel: "ollama/llama3.2",
+	},
+] as const;
+
+export const CHATGPT_OAUTH_DEFAULT_MODEL = "openai-chatgpt/gpt-5.3-codex";
+
+export const PERMISSION_OPTIONS = [
+	{
+		value: "allow",
+		label: "Allow",
+		description: "Tool can run without restriction",
+	},
+	{value: "deny", label: "Deny", description: "Tool is completely disabled"},
+];
diff --git a/interface/src/components/settings/index.ts b/interface/src/components/settings/index.ts
new file mode 100644
index 000000000..ec98e9a78
--- /dev/null
+++ b/interface/src/components/settings/index.ts
@@ -0,0 +1,22 @@
+export {InstanceSection} from "./InstanceSection";
+export {AppearanceSection} from "./AppearanceSection";
+export {ChannelsSection} from "./ChannelsSection";
+export {SecretsSection} from "./SecretsSection";
+export {ApiKeysSection} from "./ApiKeysSection";
+export {ServerSection} from "./ServerSection";
+export {WorkerLogsSection} from "./WorkerLogsSection";
+export {OpenCodeSection} from "./OpenCodeSection";
+export {UpdatesSection} from "./UpdatesSection";
+export {ChangelogSection} from "./ChangelogSection";
+export {ConfigFileSection} from "./ConfigFileSection";
+export {ProviderCard} from "./ProviderCard";
+export {ChatGptOAuthDialog} from "./ChatGptOAuthDialog";
+export {SECTIONS, PROVIDERS, CHATGPT_OAUTH_DEFAULT_MODEL, PERMISSION_OPTIONS} from "./constants";
+export type {
+	SectionId,
+	Platform,
+	GlobalSettingsSectionProps,
+	ChangelogRelease,
+	ProviderCardProps,
+	ChatGptOAuthDialogProps,
+} from "./types";
diff --git a/interface/src/components/settings/types.ts b/interface/src/components/settings/types.ts
new file mode 100644
index 000000000..0f4d29ba0
--- /dev/null
+++ b/interface/src/components/settings/types.ts
@@ -0,0 +1,61 @@
+import type {GlobalSettingsResponse} from "@/api/client";
+
+export type SectionId =
+	| "instance"
+	| "appearance"
+	| "providers"
+	| "channels"
+	| "api-keys"
+	| "secrets"
+	| "server"
+	| "opencode"
+	| "worker-logs"
+	| "updates"
+	| "config-file"
+	| "changelog";
+
+export type Platform =
+	| "discord"
+	| "slack"
+	| "telegram"
+	| "twitch"
+	| "email"
+	| "webhook"
+	| "mattermost"
+	| "signal";
+
+export interface GlobalSettingsSectionProps {
+	settings: GlobalSettingsResponse | undefined;
+	isLoading: boolean;
+}
+
+export interface ChangelogRelease {
+	version: string;
+	body: string;
+}
+
+export interface ProviderCardProps {
+	provider: string;
+	name: string;
+	description: string;
+	configured: boolean;
+	defaultModel: string;
+	onEdit: () => void;
+	onRemove: () => void;
+	removing: boolean;
+	actionLabel?: string;
+	showRemove?: boolean;
+}
+
+export interface ChatGptOAuthDialogProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	isRequesting: boolean;
+	isPolling: boolean;
+	message: {text: string; type: "success" | "error"} | null;
+	deviceCodeInfo: {userCode: string; verificationUrl: string} | null;
+	deviceCodeCopied: boolean;
+	onCopyDeviceCode: () => void;
+	onOpenDeviceLogin: () => void;
+	onRestart: () => void;
+}
diff --git a/interface/src/components/skills/BundledSkills.tsx b/interface/src/components/skills/BundledSkills.tsx
new file mode 100644
index 000000000..1add01eb6
--- /dev/null
+++ b/interface/src/components/skills/BundledSkills.tsx
@@ -0,0 +1,73 @@
+import {cx} from "class-variance-authority";
+import {Package, Lightning} from "@phosphor-icons/react";
+import type {SelectedSkill} from "./types";
+import type {SkillInfo} from "@/api/client";
+
+interface BundledSkillsProps {
+	installedSkills: SkillInfo[];
+	selectedSkill: SelectedSkill | null;
+	onSelectSkill: (skill: SkillInfo) => void;
+}
+
+export function BundledSkills({installedSkills, selectedSkill, onSelectSkill}: BundledSkillsProps) {
+	const builtinSkills = installedSkills.filter((s) => s.source === "builtin");
+	const selectedName =
+		selectedSkill?.type === "installed" ? selectedSkill.skill.name : null;
+
+	return (
+		<div className="flex h-full flex-col">
+			<div className="border-b border-app-line/50 px-5 py-3">
+				<h2 className="text-sm font-medium text-ink">Built-in Skills</h2>
+				<p className="mt-0.5 text-xs text-ink-faint">
+					Skills compiled into the agent binary. These are always available and
+					cannot be removed.
+				</p>
+			</div>
+
+			<div className="flex-1 overflow-y-auto px-5 py-4">
+				{builtinSkills.length === 0 && (
+					<div className="flex flex-col items-center gap-3 py-12 text-center">
+						<Lightning className="size-8 text-ink-dull/30" weight="duotone" />
+						<div>
+							<p className="text-sm text-ink-dull">No built-in skills yet</p>
+							<p className="mt-1 text-xs text-ink-faint">
+								Built-in skills will appear here as they are added to the binary.
+							</p>
+						</div>
+					</div>
+				)}
+				{builtinSkills.length > 0 && (
+					<div className="space-y-1">
+						{builtinSkills.map((skill) => (
+							<button
+								key={skill.name}
+								onClick={() => onSelectSkill(skill)}
+								className={cx(
+									"flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left transition-colors",
+									selectedName === skill.name
+										? "bg-app-line text-ink"
+										: "hover:bg-app-dark-box/40 text-ink-dull hover:text-ink",
+								)}
+							>
+								<div className="flex size-7 shrink-0 items-center justify-center rounded-md bg-app-dark-box/60">
+									<Package className="size-3.5 text-ink-faint" weight="duotone" />
+								</div>
+								<div className="min-w-0 flex-1">
+									<div className="truncate text-sm font-medium text-ink">
+										{skill.name}
+									</div>
+									<div className="truncate text-xs text-ink-faint">
+										{skill.description}
+									</div>
+								</div>
+								<span className="shrink-0 rounded bg-app-dark-box/80 px-1.5 py-0.5 text-[10px] text-ink-dull">
+									builtin
+								</span>
+							</button>
+						))}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/components/skills/CreateSkill.tsx b/interface/src/components/skills/CreateSkill.tsx
new file mode 100644
index 000000000..8d39a7f71
--- /dev/null
+++ b/interface/src/components/skills/CreateSkill.tsx
@@ -0,0 +1,25 @@
+import {Sparkle} from "@phosphor-icons/react";
+
+export function CreateSkill() {
+	return (
+		<div className="flex h-full flex-col">
+			<div className="border-b border-app-line/50 px-5 py-3">
+				<h2 className="text-sm font-medium text-ink">Create Skill</h2>
+				<p className="mt-0.5 text-xs text-ink-faint">
+					Describe a skill and let the agent generate it for you.
+				</p>
+			</div>
+			<div className="flex flex-1 flex-col items-center justify-center gap-4 p-8 text-center">
+				<div className="flex size-12 items-center justify-center rounded-full bg-app-dark-box/60">
+					<Sparkle className="size-6 text-ink-dull/40" weight="duotone" />
+				</div>
+				<div>
+					<p className="text-sm font-medium text-ink-dull">Coming soon</p>
+					<p className="mt-1 text-xs text-ink-faint">
+						Skill creation via chat will be available in a future update.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/components/skills/InstalledSkillRow.tsx b/interface/src/components/skills/InstalledSkillRow.tsx
new file mode 100644
index 000000000..4d2cbd491
--- /dev/null
+++ b/interface/src/components/skills/InstalledSkillRow.tsx
@@ -0,0 +1,35 @@
+import {cx} from "class-variance-authority";
+import {Badge} from "@spacedrive/primitives";
+import type {SkillInfo} from "@/api/client";
+
+interface InstalledSkillRowProps {
+	skill: SkillInfo;
+	isSelected: boolean;
+	onClick: () => void;
+}
+
+export function InstalledSkillRow({
+	skill,
+	isSelected,
+	onClick,
+}: InstalledSkillRowProps) {
+	return (
+		<button
+			onClick={onClick}
+			className={cx(
+				"flex h-[40px] w-full flex-col justify-center rounded-md px-2.5 text-left transition-colors",
+				isSelected
+					? "bg-app-dark-box text-ink"
+					: "text-ink-dull hover:bg-app-dark-box/50 hover:text-ink",
+			)}
+		>
+			<div className="flex items-center gap-1.5 min-w-0">
+				<span className="truncate text-sm leading-tight font-medium">{skill.name}</span>
+				<Badge size="sm">{skill.source}</Badge>
+			</div>
+			<span className="truncate text-xs leading-tight text-ink-faint">
+				{skill.description || "\u00A0"}
+			</span>
+		</button>
+	);
+}
diff --git a/interface/src/components/skills/RegistrySkillRow.tsx b/interface/src/components/skills/RegistrySkillRow.tsx
new file mode 100644
index 000000000..341bbc8f2
--- /dev/null
+++ b/interface/src/components/skills/RegistrySkillRow.tsx
@@ -0,0 +1,81 @@
+import {cx} from "class-variance-authority";
+import {CheckCircle, DownloadSimple} from "@phosphor-icons/react";
+import type {RegistrySkill} from "@/api/client";
+
+interface RegistrySkillRowProps {
+	skill: RegistrySkill;
+	isInstalled: boolean;
+	isSelected: boolean;
+	isInstalling: boolean;
+	isRemoving: boolean;
+	onClick: () => void;
+	onInstall: () => void;
+	onRemove: () => void;
+}
+
+function formatInstalls(n: number): string {
+	if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+	if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
+	return String(n);
+}
+
+export function RegistrySkillRow({
+	skill,
+	isInstalled,
+	isSelected,
+	isInstalling,
+	isRemoving,
+	onClick,
+	onInstall,
+	onRemove,
+}: RegistrySkillRowProps) {
+	return (
+		<button
+			onClick={onClick}
+			className={cx(
+				"flex h-[56px] w-full items-center gap-3 rounded-md px-3 text-left transition-colors",
+				isSelected
+					? "bg-app-line text-ink"
+					: "hover:bg-app-dark-box/40 text-ink-dull hover:text-ink",
+			)}
+		>
+			<div className="min-w-0 flex-1">
+				<div className="flex items-center gap-2">
+					<span className="truncate text-sm font-medium leading-tight text-ink">{skill.name}</span>
+					{skill.installs > 0 && (
+						<span className="shrink-0 text-[11px] leading-tight text-ink-faint">
+							{formatInstalls(skill.installs)}
+						</span>
+					)}
+				</div>
+				<p className="mt-0.5 truncate text-xs leading-tight text-ink-faint">
+					{skill.description || <span className="font-mono text-ink-dull/60">{skill.source}</span>}
+				</p>
+			</div>
+
+			<button
+				onClick={(e) => {
+					e.stopPropagation();
+					if (isInstalled) onRemove();
+					else onInstall();
+				}}
+				disabled={isInstalling || isRemoving}
+				className={cx(
+					"group shrink-0 rounded-md p-1.5 transition-colors",
+					isInstalled
+						? "text-green-400 hover:text-red-400"
+						: "text-ink-faint hover:text-accent",
+				)}
+				title={isInstalled ? "Remove" : "Install"}
+			>
+				{isInstalling || isRemoving ? (
+					<div className="h-4 w-4 animate-pulse rounded-full bg-current opacity-50" />
+				) : isInstalled ? (
+					<CheckCircle className="size-4" weight="fill" />
+				) : (
+					<DownloadSimple className="size-4" weight="bold" />
+				)}
+			</button>
+		</button>
+	);
+}
diff --git a/interface/src/components/skills/SkillInspector.tsx b/interface/src/components/skills/SkillInspector.tsx
new file mode 100644
index 000000000..0184d49ac
--- /dev/null
+++ b/interface/src/components/skills/SkillInspector.tsx
@@ -0,0 +1,219 @@
+import {X, ArrowSquareOut, Trash} from "@phosphor-icons/react";
+import {useQuery} from "@tanstack/react-query";
+import {Button, Badge} from "@spacedrive/primitives";
+import {api} from "@/api/client";
+import type {SelectedSkill} from "./types";
+
+interface SkillInspectorProps {
+	agentId: string;
+	selected: SelectedSkill;
+	onClose: () => void;
+	onInstall: (spec: string) => void;
+	onRemove: (name: string) => void;
+	installedNames: Set<string>;
+	isInstalling: boolean;
+	isRemoving: boolean;
+	removingName: string | null;
+}
+
+function SkillContentBlock({content}: {content: string}) {
+	return (
+		<div className="rounded-md border border-app-line bg-app-dark-box">
+			<div className="border-b border-app-line px-4 py-2">
+				<span className="font-mono text-xs font-medium text-ink-faint">SKILL.md</span>
+			</div>
+			<pre className="overflow-x-auto whitespace-pre-wrap p-4 font-mono text-xs leading-relaxed text-ink-dull">
+				{content}
+			</pre>
+		</div>
+	);
+}
+
+export function SkillInspector({
+	agentId,
+	selected,
+	onClose,
+	onInstall,
+	onRemove,
+	installedNames,
+	isInstalling,
+	isRemoving,
+	removingName,
+}: SkillInspectorProps) {
+	const isInstalled =
+		selected.type === "installed" ||
+		(selected.type === "registry" &&
+			(installedNames.has(`${selected.skill.source}/${selected.skill.name}`.toLowerCase()) ||
+				installedNames.has(selected.skill.name.toLowerCase())));
+
+	const isBuiltin = selected.type === "installed" && selected.skill.source === "builtin";
+
+	const installedContentQuery = useQuery({
+		queryKey: ["skill-content", agentId, selected.type === "installed" ? selected.skill.name : null],
+		queryFn: () => api.getSkillContent(agentId, (selected as {type: "installed"; skill: {name: string}}).skill.name),
+		enabled: selected.type === "installed",
+	});
+
+	const registryContentQuery = useQuery({
+		queryKey: [
+			"registry-skill-content",
+			selected.type === "registry" ? selected.skill.source : null,
+			selected.type === "registry" ? selected.skill.skillId : null,
+		],
+		queryFn: () =>
+			api.registrySkillContent(
+				(selected as {type: "registry"; skill: {source: string; skillId: string}}).skill.source,
+				(selected as {type: "registry"; skill: {source: string; skillId: string}}).skill.skillId,
+			),
+		enabled: selected.type === "registry",
+	});
+
+	const isContentLoading =
+		(selected.type === "installed" && installedContentQuery.isLoading) ||
+		(selected.type === "registry" && registryContentQuery.isLoading);
+
+	const skillName = selected.skill.name;
+
+	const skillDescription = selected.skill.description;
+
+	const sourceRepo =
+		selected.type === "installed"
+			? selected.skill.source_repo
+			: selected.type === "registry"
+				? selected.skill.source
+				: null;
+
+	const content =
+		selected.type === "installed"
+			? installedContentQuery.data?.content
+			: registryContentQuery.data?.content;
+
+	const basePath =
+		selected.type === "installed" ? installedContentQuery.data?.base_dir : null;
+
+	return (
+		<div className="flex w-80 flex-shrink-0 flex-col border-l border-app-line/50 bg-app-dark-box/10">
+			{/* Header */}
+			<div className="flex items-start justify-between gap-2 border-b border-app-line/50 px-4 py-3">
+				<div className="min-w-0 flex-1">
+					<div className="flex items-center gap-2">
+						<h3 className="truncate text-sm font-semibold text-ink">{skillName}</h3>
+						{selected.type === "installed" && (
+							<Badge
+								variant={isBuiltin ? "secondary" : selected.skill.source === "instance" ? "default" : "success"}
+								size="sm"
+								className="shrink-0"
+							>
+								{selected.skill.source}
+							</Badge>
+						)}
+						{selected.type === "registry" && isInstalled && (
+							<Badge variant="success" size="sm" className="shrink-0">
+								installed
+							</Badge>
+						)}
+					</div>
+					{skillDescription && (
+						<p className="mt-1 text-xs text-ink-faint">{skillDescription}</p>
+					)}
+				</div>
+				<button
+					onClick={onClose}
+					className="shrink-0 rounded p-0.5 text-ink-faint transition-colors hover:text-ink"
+				>
+					<X className="size-4" weight="bold" />
+				</button>
+			</div>
+
+			{/* Meta */}
+			{(sourceRepo || basePath) && (
+				<div className="space-y-1.5 border-b border-app-line/50 px-4 py-3">
+					{sourceRepo && (
+						<div className="flex items-center gap-1.5 text-xs text-ink-dull">
+							<span className="text-ink-faint">Source:</span>
+							<a
+								href={`https://github.com/${sourceRepo}`}
+								target="_blank"
+								rel="noopener noreferrer"
+								className="flex items-center gap-1 font-mono transition-colors hover:text-accent"
+							>
+								{sourceRepo}
+								<ArrowSquareOut className="size-3" weight="bold" />
+							</a>
+						</div>
+					)}
+					{basePath && (
+						<div className="flex items-start gap-1.5 text-xs text-ink-dull">
+							<span className="shrink-0 text-ink-faint">Path:</span>
+							<span className="font-mono break-all">{basePath}</span>
+						</div>
+					)}
+					{selected.type === "registry" && selected.skill.installs > 0 && (
+						<div className="text-xs text-ink-dull">
+							<span className="text-ink-faint">Installs:</span>{" "}
+							{selected.skill.installs.toLocaleString()}
+						</div>
+					)}
+				</div>
+			)}
+
+			{/* Action — hidden for builtin skills */}
+			{!isBuiltin && (
+				<div className="border-b border-app-line/50 px-4 py-3">
+					{selected.type === "installed" ? (
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={() => onRemove(selected.skill.name)}
+							disabled={isRemoving && removingName === selected.skill.name}
+							className="w-full text-red-400 hover:text-red-400"
+						>
+							<Trash className="size-3.5" weight="bold" />
+							{isRemoving && removingName === selected.skill.name
+								? "Removing..."
+								: "Remove Skill"}
+						</Button>
+					) : (
+						<Button
+							variant={isInstalled ? "outline" : "default"}
+							size="sm"
+							onClick={() => {
+								if (isInstalled) {
+									const name =
+										selected.skill.name;
+									onRemove(name);
+								} else {
+									onInstall(`${selected.skill.source}/${selected.skill.skillId}`);
+								}
+							}}
+							disabled={isInstalling || isRemoving}
+							className="w-full"
+						>
+							{isInstalling
+								? "Installing..."
+								: isInstalled
+									? "Remove Skill"
+									: "Install Skill"}
+						</Button>
+					)}
+				</div>
+			)}
+
+			{/* Content */}
+			<div className="flex-1 overflow-y-auto px-4 py-4">
+				{isContentLoading && (
+					<div className="flex items-center gap-2 text-xs text-ink-faint">
+						<div className="h-1.5 w-1.5 animate-pulse rounded-full bg-accent" />
+						Loading skill content...
+					</div>
+				)}
+				{!isContentLoading && content && <SkillContentBlock content={content} />}
+				{!isContentLoading && !content && selected.type === "registry" && (
+					<p className="text-xs text-ink-faint">
+						Could not fetch SKILL.md from GitHub.
+					</p>
+				)}
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/components/skills/SkillsDirectory.tsx b/interface/src/components/skills/SkillsDirectory.tsx
new file mode 100644
index 000000000..36f31ab7d
--- /dev/null
+++ b/interface/src/components/skills/SkillsDirectory.tsx
@@ -0,0 +1,292 @@
+import {useState, useEffect, useRef, useCallback} from "react";
+import {useQuery, useInfiniteQuery, useMutation, useQueryClient} from "@tanstack/react-query";
+import {useVirtualizer} from "@tanstack/react-virtual";
+import {MagnifyingGlass, ArrowSquareOut, DownloadSimple} from "@phosphor-icons/react";
+import {Button} from "@spacedrive/primitives";
+import {api, type RegistrySkill, type RegistryView} from "@/api/client";
+import {RegistrySkillRow} from "./RegistrySkillRow";
+import {REGISTRY_VIEWS} from "./constants";
+import type {SelectedSkill} from "./types";
+
+interface SkillsDirectoryProps {
+	agentId: string;
+	installedKeys: Map<string, string>;
+	selectedSkill: SelectedSkill | null;
+	onSelectSkill: (skill: RegistrySkill) => void;
+	installMutation: {
+		mutate: (spec: string) => void;
+		isPending: boolean;
+		variables: string | undefined;
+	};
+	removeMutation: {
+		mutate: (name: string) => void;
+		isPending: boolean;
+		variables: string | undefined;
+	};
+}
+
+export function SkillsDirectory({
+	agentId,
+	installedKeys,
+	selectedSkill,
+	onSelectSkill,
+	installMutation,
+	removeMutation,
+}: SkillsDirectoryProps) {
+	const queryClient = useQueryClient();
+	const [searchQuery, setSearchQuery] = useState("");
+	const [debouncedSearch, setDebouncedSearch] = useState("");
+	const [registryView, setRegistryView] = useState<RegistryView>("all-time");
+	const scrollRef = useRef<HTMLDivElement>(null);
+
+	// Debounce search
+	useEffect(() => {
+		if (searchQuery.length === 0) {
+			setDebouncedSearch("");
+			return;
+		}
+		if (searchQuery.length < 2) return;
+		const timer = setTimeout(
+			() => setDebouncedSearch(searchQuery),
+			Math.max(150, 350 - 50 * searchQuery.length),
+		);
+		return () => clearTimeout(timer);
+	}, [searchQuery]);
+
+	const {
+		data: browseData,
+		fetchNextPage,
+		hasNextPage,
+		isFetchingNextPage,
+		isLoading: isBrowseLoading,
+	} = useInfiniteQuery({
+		queryKey: ["registry-browse", registryView],
+		queryFn: ({pageParam}) => api.registryBrowse(registryView, pageParam),
+		initialPageParam: 0,
+		getNextPageParam: (lastPage, _allPages, lastPageParam) =>
+			lastPage.has_more ? lastPageParam + 1 : undefined,
+		enabled: !debouncedSearch,
+	});
+
+	const {data: searchData, isLoading: isSearching} = useQuery({
+		queryKey: ["registry-search", debouncedSearch],
+		queryFn: () => api.registrySearch(debouncedSearch),
+		enabled: debouncedSearch.length >= 2,
+	});
+
+	const githubInstallMutation = useMutation({
+		mutationFn: (spec: string) =>
+			api.installSkill({agent_id: agentId, spec, instance: false}),
+		onSuccess: () => {
+			queryClient.invalidateQueries({queryKey: ["skills", agentId]});
+		},
+	});
+
+	const handleScroll = useCallback(() => {
+		const el = scrollRef.current;
+		if (!el || !hasNextPage || isFetchingNextPage || debouncedSearch) return;
+		const {scrollTop, scrollHeight, clientHeight} = el;
+		if (scrollHeight - scrollTop - clientHeight < 400) fetchNextPage();
+	}, [hasNextPage, isFetchingNextPage, fetchNextPage, debouncedSearch]);
+
+	useEffect(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		el.addEventListener("scroll", handleScroll);
+		return () => el.removeEventListener("scroll", handleScroll);
+	}, [handleScroll]);
+
+	const registrySkills: RegistrySkill[] = debouncedSearch
+		? (searchData?.skills ?? [])
+		: (browseData?.pages.flatMap((p) => p.skills) ?? []);
+
+	const isLoading = debouncedSearch ? isSearching : isBrowseLoading;
+	const totalCount = browseData?.pages[0]?.total;
+
+	const virtualizer = useVirtualizer({
+		count: registrySkills.length,
+		getScrollElement: () => scrollRef.current,
+		estimateSize: () => 56,
+		overscan: 5,
+	});
+
+	const selectedRegistryId =
+		selectedSkill?.type === "registry"
+			? `${selectedSkill.skill.source}/${selectedSkill.skill.skillId}`
+			: null;
+
+	return (
+		<div className="flex h-full flex-col">
+			{/* Toolbar */}
+			<div className="flex items-center gap-3 border-b border-app-line/50 px-5 py-3">
+				<div className="relative flex-1">
+					<MagnifyingGlass className="absolute left-3 top-1/2 size-3.5 -translate-y-1/2 text-ink-faint" weight="bold" />
+					<input
+						type="text"
+						value={searchQuery}
+						onChange={(e) => setSearchQuery(e.target.value)}
+						placeholder="Search skills..."
+						className="w-full rounded-md border border-app-line bg-app-dark-box py-1.5 pl-9 pr-3 text-sm text-ink placeholder-ink-faint focus:border-accent focus:outline-none"
+					/>
+				</div>
+				{!debouncedSearch && (
+					<div className="flex items-center gap-1">
+						{REGISTRY_VIEWS.map((v) => (
+							<button
+								key={v.key}
+								onClick={() => setRegistryView(v.key)}
+								className={`rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors ${
+									registryView === v.key
+										? "bg-app-line text-ink"
+										: "text-ink-faint hover:text-ink-dull"
+								}`}
+							>
+								{v.label}
+							</button>
+						))}
+					</div>
+				)}
+				<a
+					href="https://skills.sh"
+					target="_blank"
+					rel="noopener noreferrer"
+					className="flex items-center gap-1.5 text-xs text-ink-faint transition-colors hover:text-accent"
+				>
+					skills.sh
+					<ArrowSquareOut className="size-3" weight="bold" />
+				</a>
+			</div>
+
+			{/* GitHub install form */}
+			<div className="border-b border-app-line/50 px-5 py-3">
+				<form
+					onSubmit={(e) => {
+						e.preventDefault();
+						const data = new FormData(e.currentTarget);
+						const spec = data.get("spec") as string;
+						if (spec) {
+							githubInstallMutation.mutate(spec);
+							e.currentTarget.reset();
+						}
+					}}
+					className="flex gap-2"
+				>
+					<input
+						type="text"
+						name="spec"
+						placeholder="Install from GitHub: owner/repo or owner/repo/skill-name"
+						className="flex-1 rounded-md border border-app-line bg-app-dark-box px-3 py-1.5 text-sm text-ink placeholder-ink-faint focus:border-accent focus:outline-none"
+					/>
+					<Button
+						type="submit"
+						variant="outline"
+						size="sm"
+						disabled={githubInstallMutation.isPending}
+					>
+						<DownloadSimple className="size-3.5" weight="bold" />
+						{githubInstallMutation.isPending ? "Installing..." : "Install"}
+					</Button>
+				</form>
+				{githubInstallMutation.isError && (
+					<p className="mt-1.5 text-xs text-red-400">
+						Failed to install. Check the repository format.
+					</p>
+				)}
+				{githubInstallMutation.isSuccess && (
+					<p className="mt-1.5 text-xs text-green-400">
+						Installed: {githubInstallMutation.data.installed.join(", ")}
+					</p>
+				)}
+			</div>
+
+			{/* Count bar */}
+			<div className="flex items-center justify-between px-5 py-2">
+				<span className="text-xs text-ink-faint">
+					{debouncedSearch
+						? `Results for "${debouncedSearch}"`
+						: `${REGISTRY_VIEWS.find((v) => v.key === registryView)?.label} Skills`}
+				</span>
+				<span className="text-xs text-ink-dull">
+					{debouncedSearch && searchData
+						? `${searchData.count} results`
+						: totalCount != null
+							? `${totalCount} skills`
+							: registrySkills.length > 0
+								? `${registrySkills.length} skills`
+								: ""}
+				</span>
+			</div>
+
+			{/* Virtualized list */}
+			<div ref={scrollRef} className="flex-1 overflow-y-auto px-3 pb-4">
+				{isLoading && registrySkills.length === 0 && (
+					<div className="flex items-center gap-2 px-2 py-6 text-xs text-ink-faint">
+						<div className="h-1.5 w-1.5 animate-pulse rounded-full bg-accent" />
+						Loading from registry...
+					</div>
+				)}
+				{!isLoading && registrySkills.length === 0 && debouncedSearch && (
+					<p className="px-2 py-6 text-xs text-ink-faint">
+						No skills found for "{debouncedSearch}"
+					</p>
+				)}
+				{registrySkills.length > 0 && (
+					<div
+						style={{
+							height: `${virtualizer.getTotalSize()}px`,
+							width: "100%",
+							position: "relative",
+						}}
+					>
+						{virtualizer.getVirtualItems().map((virtualItem) => {
+							const skill = registrySkills[virtualItem.index]!;
+							const spec = `${skill.source}/${skill.skillId}`;
+							const compositeKey = `${skill.source}/${skill.name}`.toLowerCase();
+							const installedName =
+								installedKeys.get(compositeKey) ??
+								installedKeys.get(skill.name.toLowerCase());
+							const isInstalled = Boolean(installedName);
+							return (
+								<div
+									key={virtualItem.key}
+									style={{
+										position: "absolute",
+										top: 0,
+										left: 0,
+										width: "100%",
+										height: `${virtualItem.size}px`,
+										transform: `translateY(${virtualItem.start}px)`,
+									}}
+								>
+									<RegistrySkillRow
+										skill={skill}
+										isInstalled={isInstalled}
+										isSelected={selectedRegistryId === spec}
+										isInstalling={
+											installMutation.isPending && installMutation.variables === spec
+										}
+										isRemoving={
+											removeMutation.isPending &&
+											removeMutation.variables === installedName
+										}
+										onClick={() => onSelectSkill(skill)}
+										onInstall={() => installMutation.mutate(spec)}
+										onRemove={() => {
+											if (installedName) removeMutation.mutate(installedName);
+										}}
+									/>
+								</div>
+							);
+						})}
+					</div>
+				)}
+				{isFetchingNextPage && (
+					<div className="flex items-center gap-2 py-4 text-xs text-ink-faint">
+						<div className="h-1.5 w-1.5 animate-pulse rounded-full bg-accent" />
+						Loading more...
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/components/skills/SkillsSidebar.tsx b/interface/src/components/skills/SkillsSidebar.tsx
new file mode 100644
index 000000000..8a8584fa5
--- /dev/null
+++ b/interface/src/components/skills/SkillsSidebar.tsx
@@ -0,0 +1,115 @@
+import {useRef} from "react";
+import {useVirtualizer} from "@tanstack/react-virtual";
+import {Plus, Package, Books, Lightning} from "@phosphor-icons/react";
+import {SettingSidebarButton} from "@/ui/SettingSidebarButton";
+import {InstalledSkillRow} from "./InstalledSkillRow";
+import type {SkillView, SelectedSkill} from "./types";
+import type {SkillInfo} from "@/api/client";
+
+interface SkillsSidebarProps {
+	activeView: SkillView;
+	onViewChange: (view: SkillView) => void;
+	installedSkills: SkillInfo[];
+	selectedSkill: SelectedSkill | null;
+	onSelectInstalledSkill: (skill: SkillInfo) => void;
+	isLoading: boolean;
+}
+
+const TOP_VIEWS: {view: SkillView; label: string; icon: React.ElementType}[] = [
+	{view: "create", label: "Create Skill", icon: Plus},
+	{view: "bundled", label: "Bundled Skills", icon: Package},
+	{view: "directory", label: "Skills Directory", icon: Books},
+];
+
+export function SkillsSidebar({
+	activeView,
+	onViewChange,
+	installedSkills,
+	selectedSkill,
+	onSelectInstalledSkill,
+	isLoading,
+}: SkillsSidebarProps) {
+	const scrollRef = useRef<HTMLDivElement>(null);
+
+	const virtualizer = useVirtualizer({
+		count: installedSkills.length,
+		getScrollElement: () => scrollRef.current,
+		estimateSize: () => 40,
+		overscan: 5,
+	});
+
+	const selectedInstalledName =
+		selectedSkill?.type === "installed" ? selectedSkill.skill.name : null;
+
+	return (
+		<div className="flex w-52 flex-shrink-0 flex-col border-r border-app-line/50 bg-app-dark-box/20">
+			{/* Top actions */}
+			<div className="flex flex-col gap-0.5 px-2 pt-3">
+				{TOP_VIEWS.map(({view, label, icon: Icon}) => (
+					<SettingSidebarButton
+						key={view}
+						onClick={() => onViewChange(view)}
+						active={activeView === view}
+					>
+						<Icon className="size-3.5 shrink-0" weight="bold" />
+						<span className="flex-1">{label}</span>
+					</SettingSidebarButton>
+				))}
+			</div>
+
+			{/* Installed skills */}
+			<div className="px-3 pb-1 pt-4">
+				<span className="text-tiny font-medium uppercase tracking-wider text-ink-faint">
+					Installed
+					{installedSkills.length > 0 && (
+						<span className="ml-1.5 text-ink-dull">({installedSkills.length})</span>
+					)}
+				</span>
+			</div>
+
+			<div ref={scrollRef} className="flex-1 overflow-y-auto px-2 pb-3">
+				{isLoading && (
+					<div className="px-2 py-3 text-xs text-ink-faint">Loading...</div>
+				)}
+				{!isLoading && installedSkills.length === 0 && (
+					<div className="flex flex-col items-center gap-2 px-2 py-6 text-center">
+						<Lightning className="size-5 text-ink-dull/40" weight="duotone" />
+						<span className="text-xs text-ink-faint">No skills installed</span>
+					</div>
+				)}
+				{installedSkills.length > 0 && (
+					<div
+						style={{
+							height: `${virtualizer.getTotalSize()}px`,
+							width: "100%",
+							position: "relative",
+						}}
+					>
+						{virtualizer.getVirtualItems().map((virtualItem) => {
+							const skill = installedSkills[virtualItem.index]!;
+							return (
+								<div
+									key={virtualItem.key}
+									style={{
+										position: "absolute",
+										top: 0,
+										left: 0,
+										width: "100%",
+										height: `${virtualItem.size}px`,
+										transform: `translateY(${virtualItem.start}px)`,
+									}}
+								>
+									<InstalledSkillRow
+										skill={skill}
+										isSelected={selectedInstalledName === skill.name}
+										onClick={() => onSelectInstalledSkill(skill)}
+									/>
+								</div>
+							);
+						})}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/components/skills/constants.ts b/interface/src/components/skills/constants.ts
new file mode 100644
index 000000000..3136e2d3a
--- /dev/null
+++ b/interface/src/components/skills/constants.ts
@@ -0,0 +1,7 @@
+import type {RegistryView} from "@/api/client";
+
+export const REGISTRY_VIEWS: {key: RegistryView; label: string}[] = [
+	{key: "all-time", label: "All Time"},
+	{key: "trending", label: "Trending"},
+	{key: "hot", label: "Hot"},
+];
diff --git a/interface/src/components/skills/index.ts b/interface/src/components/skills/index.ts
new file mode 100644
index 000000000..c4c433329
--- /dev/null
+++ b/interface/src/components/skills/index.ts
@@ -0,0 +1,6 @@
+export {SkillsSidebar} from "./SkillsSidebar";
+export {SkillInspector} from "./SkillInspector";
+export {SkillsDirectory} from "./SkillsDirectory";
+export {BundledSkills} from "./BundledSkills";
+export {CreateSkill} from "./CreateSkill";
+export type {SkillView, SelectedSkill} from "./types";
diff --git a/interface/src/components/skills/types.ts b/interface/src/components/skills/types.ts
new file mode 100644
index 000000000..296ce943e
--- /dev/null
+++ b/interface/src/components/skills/types.ts
@@ -0,0 +1,7 @@
+import type {SkillInfo, RegistrySkill} from "@/api/client";
+
+export type SkillView = "directory" | "bundled" | "create";
+
+export type SelectedSkill =
+	| {type: "installed"; skill: SkillInfo}
+	| {type: "registry"; skill: RegistrySkill};
diff --git a/interface/src/components/workbench/EmptyState.tsx b/interface/src/components/workbench/EmptyState.tsx
new file mode 100644
index 000000000..c39e6523e
--- /dev/null
+++ b/interface/src/components/workbench/EmptyState.tsx
@@ -0,0 +1,28 @@
+export function EmptyState() {
+	return (
+		<div className="flex h-full w-full flex-1 flex-col items-center justify-center gap-3 text-ink-faint">
+			<div className="flex h-12 w-12 items-center justify-center rounded-full border border-app-line">
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="1.5"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				>
+					<rect x="2" y="3" width="20" height="18" rx="2" />
+					<line x1="9" y1="3" x2="9" y2="21" />
+					<line x1="15" y1="3" x2="15" y2="21" />
+				</svg>
+			</div>
+			<div className="text-center">
+				<p className="text-sm font-medium">No active workers</p>
+				<p className="mt-1 text-xs">
+					OpenCode workers will appear here as columns when they're running.
+				</p>
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/components/workbench/WorkbenchSidebar.tsx b/interface/src/components/workbench/WorkbenchSidebar.tsx
new file mode 100644
index 000000000..5bb54f5ab
--- /dev/null
+++ b/interface/src/components/workbench/WorkbenchSidebar.tsx
@@ -0,0 +1,161 @@
+import {useState} from "react";
+import {cx} from "class-variance-authority";
+import type {OrchestrationWorker, ProjectGroup, WorktreeGroup} from "./types";
+
+export function WorkbenchSidebar({
+	tree,
+	totalCount,
+	onSelectWorker,
+}: {
+	tree: ProjectGroup[];
+	totalCount: number;
+	onSelectWorker: (id: string) => void;
+}) {
+	return (
+		<aside className="flex h-full w-[270px] flex-shrink-0 flex-col overflow-hidden rounded-2xl border border-app-line bg-app">
+			<div className="flex h-[60px] flex-col justify-center gap-0.5 border-b border-app-line px-3 pt-1">
+				<h2 className="text-xs font-medium text-ink">Workbench</h2>
+				<div className="text-tiny text-ink-faint">
+					{totalCount === 1
+						? "1 active worker"
+						: `${totalCount} active workers`}
+				</div>
+			</div>
+			<div className="flex-1 overflow-y-auto py-2">
+				{tree.length === 0 ? (
+					<div className="px-3 py-4 text-tiny text-ink-faint">No workers</div>
+				) : (
+					tree.map((project) => (
+						<ProjectSection
+							key={project.key}
+							project={project}
+							onSelectWorker={onSelectWorker}
+						/>
+					))
+				)}
+			</div>
+		</aside>
+	);
+}
+
+function ProjectSection({
+	project,
+	onSelectWorker,
+}: {
+	project: ProjectGroup;
+	onSelectWorker: (id: string) => void;
+}) {
+	const [expanded, setExpanded] = useState(true);
+	return (
+		<div className="mb-1">
+			<button
+				onClick={() => setExpanded((v) => !v)}
+				className="flex w-full items-center gap-1.5 px-3 py-1 text-left text-tiny font-semibold uppercase tracking-wide text-ink-faint hover:text-ink"
+			>
+				<svg
+					width="10"
+					height="10"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="3"
+					className={cx("shrink-0 transition-transform", expanded ? "rotate-90" : "")}
+				>
+					<polyline points="9 18 15 12 9 6" />
+				</svg>
+				<span className="flex-1 truncate">{project.name}</span>
+				<span className="text-tiny text-ink-faint">{project.count}</span>
+			</button>
+			{expanded && (
+				<div className="ml-[18px] mt-0.5 border-l border-app-line">
+					{project.worktrees.map((worktree) => (
+						<WorktreeSection
+							key={worktree.key}
+							worktree={worktree}
+							onSelectWorker={onSelectWorker}
+						/>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}
+
+function WorktreeSection({
+	worktree,
+	onSelectWorker,
+}: {
+	worktree: WorktreeGroup;
+	onSelectWorker: (id: string) => void;
+}) {
+	return (
+		<div className="mb-0.5">
+			{worktree.name !== "main" && (
+				<div className="flex items-center gap-1.5 px-3 py-0.5 text-tiny text-ink-faint">
+					<svg
+						width="8"
+						height="8"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="1.5"
+						className="shrink-0"
+					>
+						<circle cx="6" cy="6" r="3" />
+						<circle cx="18" cy="18" r="3" />
+						<path d="M6 9v6a3 3 0 0 0 3 3h6" />
+					</svg>
+					<span className="truncate font-medium text-ink-dull" title={worktree.directory ?? ""}>
+						{worktree.name}
+					</span>
+				</div>
+			)}
+			<div className="flex flex-col">
+				{worktree.workers.map((worker) => (
+					<WorkerRow
+						key={worker.id}
+						worker={worker}
+						onSelect={onSelectWorker}
+					/>
+				))}
+			</div>
+		</div>
+	);
+}
+
+function WorkerRow({
+	worker,
+	onSelect,
+}: {
+	worker: OrchestrationWorker;
+	onSelect: (id: string) => void;
+}) {
+	const isRunning = worker.status === "running";
+	const isIdle = worker.status === "idle";
+	const taskText = worker.task.replace(/^\[opencode\]\s*/i, "");
+
+	return (
+		<button
+			onClick={() => onSelect(worker.id)}
+			className="group flex w-full items-center gap-2.5 px-3 py-1.5 text-left hover:bg-app-selected/40"
+			title={taskText}
+		>
+			<span
+				className={cx(
+					"h-2 w-2 flex-shrink-0 rounded-full",
+					isRunning && "animate-pulse bg-green-500",
+					isIdle && "bg-yellow-500",
+					!isRunning && !isIdle && "bg-ink-faint/40",
+				)}
+			/>
+			<span className="min-w-0 flex-1">
+				<span className="block truncate text-xs text-ink">
+					{taskText}
+				</span>
+				<span className="block truncate text-tiny text-ink-faint">
+					{worker.agent_name}
+				</span>
+			</span>
+		</button>
+	);
+}
diff --git a/interface/src/components/workbench/WorkerColumn.tsx b/interface/src/components/workbench/WorkerColumn.tsx
new file mode 100644
index 000000000..78c64def4
--- /dev/null
+++ b/interface/src/components/workbench/WorkerColumn.tsx
@@ -0,0 +1,99 @@
+import {useState} from "react";
+import {cx} from "class-variance-authority";
+import {api} from "@/api/client";
+import {LiveDuration} from "@/components/LiveDuration";
+import {OpenCodeEmbed} from "@/components/OpenCodeEmbed";
+import type {OrchestrationWorker} from "./types";
+
+export function WorkerColumn({worker}: {worker: OrchestrationWorker}) {
+	const isRunning = worker.status === "running";
+	const isIdle = worker.status === "idle";
+	const toolCalls = worker.live_tool_calls ?? worker.tool_calls;
+
+	// Strip the [opencode] prefix from the task text for display
+	const taskText = worker.task.replace(/^\[opencode\]\s*/i, "");
+
+	return (
+		<div className="flex h-full w-[560px] flex-shrink-0 flex-col overflow-hidden rounded-2xl border border-app-line bg-app-box">
+			{/* Column header */}
+			<div className="flex flex-col gap-1 h-[60px] border-b border-app-line px-3 py-2">
+				<div className="flex items-center gap-2">
+					{/* Status dot */}
+					<span
+						className={cx(
+							"h-2 w-2 bg-ink-faint flex-shrink-0 rounded-full",
+							isRunning && "animate-pulse bg-green-500",
+							isIdle && "bg-yellow-500",
+							!isRunning && !isIdle && "bg-ink-faint",
+						)}
+					/>
+					{/* Task text */}
+					<p
+						className="min-w-0 flex-1 truncate text-xs font-medium text-ink"
+						title={taskText}
+					>
+						{taskText}
+					</p>
+					{/* Cancel button for running workers */}
+					{(isRunning || isIdle) && worker.channel_id && (
+						<CancelButton channelId={worker.channel_id} workerId={worker.id} />
+					)}
+				</div>
+				<div className="flex items-center gap-2 text-tiny text-ink-faint">
+					<span>{worker.agent_name}</span>
+					<span>&middot;</span>
+					{isRunning ? (
+						<LiveDuration startMs={new Date(worker.started_at).getTime()} />
+					) : (
+						<span>{worker.status}</span>
+					)}
+					{toolCalls > 0 && (
+						<>
+							<span>&middot;</span>
+							<span>
+								{toolCalls} tool{toolCalls !== 1 ? "s" : ""}
+							</span>
+						</>
+					)}
+				</div>
+			</div>
+
+			{/* OpenCode embed */}
+			<div className="flex flex-1 bg-app flex-col overflow-hidden">
+				<OpenCodeEmbed
+					port={worker.opencode_port!}
+					sessionId={worker.opencode_session_id ?? worker.id}
+					directory={worker.directory ?? null}
+				/>
+			</div>
+		</div>
+	);
+}
+
+function CancelButton({
+	channelId,
+	workerId,
+}: {
+	channelId: string;
+	workerId: string;
+}) {
+	const [cancelling, setCancelling] = useState(false);
+
+	return (
+		<button
+			disabled={cancelling}
+			onClick={(event) => {
+				event.stopPropagation();
+				setCancelling(true);
+				api
+					.cancelProcess(channelId, "worker", workerId)
+					.catch(console.warn)
+					.finally(() => setCancelling(false));
+			}}
+			className="flex-shrink-0 rounded-md border border-app-line px-1.5 py-0.5 text-tiny font-medium text-ink-dull transition-colors hover:border-red-500/50 hover:text-red-400 disabled:opacity-50"
+			title="Cancel worker"
+		>
+			{cancelling ? "..." : "Cancel"}
+		</button>
+	);
+}
diff --git a/interface/src/components/workbench/grouping.ts b/interface/src/components/workbench/grouping.ts
new file mode 100644
index 000000000..303033127
--- /dev/null
+++ b/interface/src/components/workbench/grouping.ts
@@ -0,0 +1,82 @@
+import {basename, normalizePath} from "./paths";
+import type {
+	DirectoryMatch,
+	OrchestrationWorker,
+	ProjectGroup,
+	WorktreeGroup,
+} from "./types";
+
+export function groupWorkersByProjectAndWorktree(
+	workers: OrchestrationWorker[],
+	directoryIndex: Map<string, DirectoryMatch>,
+): ProjectGroup[] {
+	const projects = new Map<string, Map<string, WorktreeGroup>>();
+	// Track resolved project names per key
+	const projectNames = new Map<string, string>();
+
+	for (const worker of workers) {
+		// Try API-linked project first, then resolve via directory lookup
+		let projectKey = worker.project_id ?? "";
+		let projectName = worker.project_name ?? "";
+		let worktreeName = "";
+
+		if (worker.directory) {
+			const match = directoryIndex.get(normalizePath(worker.directory));
+			if (match) {
+				projectKey = match.projectId;
+				projectName = match.projectName;
+				worktreeName = match.worktreeName;
+			}
+		}
+
+		if (!projectKey) {
+			projectKey = "__ungrouped__";
+			projectName = "Ungrouped";
+		}
+		projectNames.set(projectKey, projectName);
+
+		const worktreeKey = worktreeName || worker.directory || "__no_worktree__";
+		const worktreeDisplay =
+			worktreeName ||
+			(worker.directory ? basename(worker.directory) : "No worktree");
+
+		let worktrees = projects.get(projectKey);
+		if (!worktrees) {
+			worktrees = new Map();
+			projects.set(projectKey, worktrees);
+		}
+
+		let group = worktrees.get(worktreeKey);
+		if (!group) {
+			group = {
+				key: worktreeKey,
+				name: worktreeDisplay,
+				directory: worker.directory ?? null,
+				workers: [],
+			};
+			worktrees.set(worktreeKey, group);
+		}
+		group.workers.push(worker);
+	}
+
+	const result: ProjectGroup[] = [];
+	for (const [projectKey, worktrees] of projects) {
+		const name = projectNames.get(projectKey) || projectKey;
+		const wtList = [...worktrees.values()].sort((a, b) => {
+			// "main" worktree first, then alpha
+			if (a.name === "main") return -1;
+			if (b.name === "main") return 1;
+			return a.name.localeCompare(b.name);
+		});
+		const count = wtList.reduce((sum, wt) => sum + wt.workers.length, 0);
+		result.push({key: projectKey, name, worktrees: wtList, count});
+	}
+
+	result.sort((a, b) => {
+		if (a.key === "__ungrouped__") return 1;
+		if (b.key === "__ungrouped__") return -1;
+		return a.name.localeCompare(b.name);
+	});
+
+	return result;
+}
diff --git a/interface/src/components/workbench/index.ts b/interface/src/components/workbench/index.ts
new file mode 100644
index 000000000..72d892cc7
--- /dev/null
+++ b/interface/src/components/workbench/index.ts
@@ -0,0 +1,11 @@
+export {WorkbenchSidebar} from "./WorkbenchSidebar";
+export {WorkerColumn} from "./WorkerColumn";
+export {EmptyState} from "./EmptyState";
+export {groupWorkersByProjectAndWorktree} from "./grouping";
+export {normalizePath, resolvePath, basename} from "./paths";
+export type {
+	OrchestrationWorker,
+	WorktreeGroup,
+	ProjectGroup,
+	DirectoryMatch,
+} from "./types";
diff --git a/interface/src/components/workbench/paths.ts b/interface/src/components/workbench/paths.ts
new file mode 100644
index 000000000..5fac27784
--- /dev/null
+++ b/interface/src/components/workbench/paths.ts
@@ -0,0 +1,29 @@
+export function basename(path: string): string {
+	const trimmed = path.replace(/\/+$/, "");
+	const idx = trimmed.lastIndexOf("/");
+	return idx === -1 ? trimmed : trimmed.slice(idx + 1);
+}
+
+export function normalizePath(path: string): string {
+	if (!path) return "";
+	const isAbsolute = path.startsWith("/");
+	const segments = path.split("/").filter(Boolean);
+	const out: string[] = [];
+	for (const segment of segments) {
+		if (segment === ".") continue;
+		if (segment === "..") {
+			out.pop();
+			continue;
+		}
+		out.push(segment);
+	}
+	return (isAbsolute ? "/" : "") + out.join("/");
+}
+
+export function resolvePath(base: string, relative: string): string {
+	if (!relative) return normalizePath(base);
+	if (relative.startsWith("/")) return normalizePath(relative);
+	// Join base + relative and normalize (handles .. segments)
+	const joined = base.replace(/\/+$/, "") + "/" + relative;
+	return normalizePath(joined);
+}
diff --git a/interface/src/components/workbench/types.ts b/interface/src/components/workbench/types.ts
new file mode 100644
index 000000000..9e9ab597a
--- /dev/null
+++ b/interface/src/components/workbench/types.ts
@@ -0,0 +1,29 @@
+import type {WorkerRunInfo} from "@/api/client";
+
+/** A worker with agent metadata attached for cross-agent views. */
+export interface OrchestrationWorker extends WorkerRunInfo {
+	agent_id: string;
+	agent_name: string;
+	/** Overridden from SSE live state when available. */
+	live_tool_calls?: number;
+}
+
+export interface WorktreeGroup {
+	key: string;
+	name: string;
+	directory: string | null;
+	workers: OrchestrationWorker[];
+}
+
+export interface ProjectGroup {
+	key: string;
+	name: string;
+	worktrees: WorktreeGroup[];
+	count: number;
+}
+
+export interface DirectoryMatch {
+	projectId: string;
+	projectName: string;
+	worktreeName: string;
+}
diff --git a/interface/src/hooks/useAgentOrder.ts b/interface/src/hooks/useAgentOrder.ts
index 6322592cf..ac00dd47b 100644
--- a/interface/src/hooks/useAgentOrder.ts
+++ b/interface/src/hooks/useAgentOrder.ts
@@ -22,16 +22,36 @@ export function useAgentOrder(agentIds: string[]) {
 			}
 		}
 
-		// Merge: keep stored order for existing agents, append new agents
+		// Merge: keep stored order for existing agents, append new agents.
+		// The "main" agent is always pinned first in the sidebar.
 		const storedSet = new Set(storedOrder);
 		const newAgents = agentIds.filter((id) => !storedSet.has(id));
 		const validStoredOrder = storedOrder.filter((id) => agentIds.includes(id));
-		
-		setOrder([...validStoredOrder, ...newAgents]);
+		const merged = [...validStoredOrder, ...newAgents];
+
+		const mainId = agentIds.includes("main") ? "main" : agentIds[0];
+		if (mainId && merged[0] !== mainId) {
+			const idx = merged.indexOf(mainId);
+			if (idx > 0) {
+				merged.splice(idx, 1);
+				merged.unshift(mainId);
+			}
+		}
+
+		setOrder(merged);
 	}, [agentIds]);
 
-	// Persist order to localStorage
+	// Persist order to localStorage, keeping the main agent pinned first
 	const updateOrder = (newOrder: string[]) => {
+		const mainId = agentIds.includes("main") ? "main" : agentIds[0];
+		if (mainId && newOrder[0] !== mainId) {
+			const idx = newOrder.indexOf(mainId);
+			if (idx > 0) {
+				newOrder = [...newOrder];
+				newOrder.splice(idx, 1);
+				newOrder.unshift(mainId);
+			}
+		}
 		setOrder(newOrder);
 		localStorage.setItem(STORAGE_KEY, JSON.stringify(newOrder));
 	};
diff --git a/interface/src/hooks/useChannelLiveState.ts b/interface/src/hooks/useChannelLiveState.ts
index 40f73bc7b..912ea71f8 100644
--- a/interface/src/hooks/useChannelLiveState.ts
+++ b/interface/src/hooks/useChannelLiveState.ts
@@ -60,6 +60,12 @@ export interface ChannelLiveState {
 
 const PAGE_SIZE = 50;
 
+/** Conversation/routing tools that should never appear in the channel tool call UI. */
+const HIDDEN_CHANNEL_TOOLS = new Set([
+	"reply", "react", "skip", "set_outcome",
+	"spawn_worker", "branch", "route", "cancel",
+]);
+
 function emptyLiveState(): ChannelLiveState {
 	return {
 		isTyping: false,
@@ -79,6 +85,7 @@ function itemTimestamp(item: TimelineItem): string {
 		case "message": return item.created_at;
 		case "branch_run": return item.started_at;
 		case "worker_run": return item.started_at;
+		case "tool_call_run": return item.started_at;
 	}
 }
 
@@ -194,6 +201,9 @@ export function useChannelLiveState(channels: ChannelInfo[]) {
 		});
 	}, []);
 
+	// Track pending channel tool call IDs per channel+tool_name (FIFO queue).
+	const pendingChannelToolCallsRef = useRef<Record<string, string[]>>({});
+
 	// Initial status snapshot load
 	const initialSyncDone = useRef(false);
 	useEffect(() => {
@@ -240,6 +250,9 @@ export function useChannelLiveState(channels: ChannelInfo[]) {
 			sender_id: event.sender_id,
 			content: event.text,
 			created_at: new Date().toISOString(),
+			...(event.attachments && event.attachments.length > 0
+				? {attachments: event.attachments}
+				: {}),
 		});
 	}, [pushItem]);
 
@@ -597,6 +610,28 @@ export function useChannelLiveState(channels: ChannelInfo[]) {
 		const event = data as ToolStartedEvent;
 		const channelId = event.channel_id;
 
+		if (channelId && event.process_type === "channel") {
+			// Skip conversation/routing tools — they're infrastructure, not user-visible.
+			if (HIDDEN_CHANNEL_TOOLS.has(event.tool_name)) return;
+
+			const toolCallId = `tool-${generateId()}`;
+			const queueKey = `${channelId}:${event.tool_name}`;
+			const queue = pendingChannelToolCallsRef.current[queueKey] ?? [];
+			pendingChannelToolCallsRef.current[queueKey] = [...queue, toolCallId];
+
+			pushItem(channelId, {
+				type: "tool_call_run",
+				id: toolCallId,
+				tool_name: event.tool_name,
+				args: event.args,
+				result: null,
+				status: "running",
+				started_at: new Date().toISOString(),
+				completed_at: null,
+			});
+			return;
+		}
+
 		if (channelId) {
 			setLiveStates((prev) => {
 				const state = prev[channelId];
@@ -666,12 +701,26 @@ export function useChannelLiveState(channels: ChannelInfo[]) {
 				return prev;
 			});
 		}
-	}, []);
+	}, [pushItem]);
 
 	const handleToolCompleted = useCallback((data: unknown) => {
 		const event = data as ToolCompletedEvent;
 		const channelId = event.channel_id;
 
+		if (channelId && event.process_type === "channel") {
+			const queueKey = `${channelId}:${event.tool_name}`;
+			const queue = pendingChannelToolCallsRef.current[queueKey] ?? [];
+			const toolCallId = queue[0];
+			if (toolCallId) {
+				pendingChannelToolCallsRef.current[queueKey] = queue.slice(1);
+				updateItem(channelId, toolCallId, (item) => {
+					if (item.type !== "tool_call_run") return item;
+					return { ...item, result: event.result, status: "completed", completed_at: new Date().toISOString() };
+				});
+			}
+			return;
+		}
+
 		if (channelId) {
 			setLiveStates((prev) => {
 				const state = prev[channelId];
diff --git a/interface/src/hooks/useLiveContext.tsx b/interface/src/hooks/useLiveContext.tsx
index 957661d0a..9eebc48ad 100644
--- a/interface/src/hooks/useLiveContext.tsx
+++ b/interface/src/hooks/useLiveContext.tsx
@@ -5,6 +5,7 @@ import { generateId } from "@/lib/id";
 import { useEventSource, type ConnectionState } from "@/hooks/useEventSource";
 import { useChannelLiveState, type ChannelLiveState, type ActiveWorker } from "@/hooks/useChannelLiveState";
 import { useServer } from "@/hooks/useServer";
+import { NOTIFICATIONS_QUERY_KEY } from "@/hooks/useNotifications";
 
 interface LiveContextValue {
 	liveStates: Record<string, ChannelLiveState>;
@@ -261,6 +262,14 @@ export function LiveContextProvider({ children, onBootstrapped }: { children: Re
 		window.dispatchEvent(new CustomEvent("cortex-chat-message", { detail: data }));
 	}, []);
 
+	const handleNotificationCreated = useCallback(() => {
+		queryClient.invalidateQueries({ queryKey: NOTIFICATIONS_QUERY_KEY });
+	}, [queryClient]);
+
+	const handleNotificationUpdated = useCallback(() => {
+		queryClient.invalidateQueries({ queryKey: NOTIFICATIONS_QUERY_KEY });
+	}, [queryClient]);
+
 	// Merge channel handlers with agent message + task handlers
 	const handlers = useMemo(
 		() => ({
@@ -277,8 +286,10 @@ export function LiveContextProvider({ children, onBootstrapped }: { children: Re
 			agent_message_received: handleAgentMessage,
 			task_updated: bumpTaskVersion,
 			cortex_chat_message: handleCortexChatMessage,
+			notification_created: handleNotificationCreated,
+			notification_updated: handleNotificationUpdated,
 		}),
-		[channelHandlers, wrappedWorkerStarted, wrappedWorkerStatus, wrappedWorkerIdle, wrappedWorkerCompleted, wrappedToolStarted, wrappedToolCompleted, handleOpenCodePartUpdated, handleWorkerText, handleAgentMessage, bumpTaskVersion, handleCortexChatMessage],
+		[channelHandlers, wrappedWorkerStarted, wrappedWorkerStatus, wrappedWorkerIdle, wrappedWorkerCompleted, wrappedToolStarted, wrappedToolCompleted, handleOpenCodePartUpdated, handleWorkerText, handleAgentMessage, bumpTaskVersion, handleCortexChatMessage, handleNotificationCreated, handleNotificationUpdated],
 	);
 
 	const onReconnect = useCallback(() => {
@@ -287,6 +298,7 @@ export function LiveContextProvider({ children, onBootstrapped }: { children: Re
 		queryClient.invalidateQueries({ queryKey: ["status"] });
 		queryClient.invalidateQueries({ queryKey: ["agents"] });
 		queryClient.invalidateQueries({ queryKey: ["tasks"] });
+		queryClient.invalidateQueries({ queryKey: NOTIFICATIONS_QUERY_KEY });
 		// Bump task version so any mounted task views refetch immediately.
 		bumpTaskVersion();
 	}, [syncStatusSnapshot, queryClient, bumpTaskVersion]);
diff --git a/interface/src/hooks/useNotifications.ts b/interface/src/hooks/useNotifications.ts
new file mode 100644
index 000000000..0a91165cf
--- /dev/null
+++ b/interface/src/hooks/useNotifications.ts
@@ -0,0 +1,45 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { api, type NotificationItem } from "@/api/client";
+
+export const NOTIFICATIONS_QUERY_KEY = ["notifications"];
+
+export function useNotifications(filter?: "unread" | "all") {
+	const queryClient = useQueryClient();
+
+	const { data, isLoading } = useQuery({
+		queryKey: [...NOTIFICATIONS_QUERY_KEY, filter ?? "unread"],
+		queryFn: () => api.listNotifications({ filter: filter ?? "unread" }),
+		staleTime: 30_000,
+	});
+
+	const markRead = useMutation({
+		mutationFn: (id: string) => api.markNotificationRead(id),
+		onSuccess: () => queryClient.invalidateQueries({ queryKey: NOTIFICATIONS_QUERY_KEY }),
+	});
+
+	const dismiss = useMutation({
+		mutationFn: (id: string) => api.dismissNotification(id),
+		onSuccess: () => queryClient.invalidateQueries({ queryKey: NOTIFICATIONS_QUERY_KEY }),
+	});
+
+	const markAllRead = useMutation({
+		mutationFn: () => api.markAllNotificationsRead(),
+		onSuccess: () => queryClient.invalidateQueries({ queryKey: NOTIFICATIONS_QUERY_KEY }),
+	});
+
+	const dismissRead = useMutation({
+		mutationFn: () => api.dismissReadNotifications(),
+		onSuccess: () => queryClient.invalidateQueries({ queryKey: NOTIFICATIONS_QUERY_KEY }),
+	});
+
+	const notifications: NotificationItem[] = data?.notifications ?? [];
+
+	return {
+		notifications,
+		isLoading,
+		markRead: (id: string) => markRead.mutate(id),
+		dismiss: (id: string) => dismiss.mutate(id),
+		markAllRead: () => markAllRead.mutate(),
+		dismissRead: () => dismissRead.mutate(),
+	};
+}
diff --git a/interface/src/hooks/usePortal.ts b/interface/src/hooks/usePortal.ts
index a5b75b880..857f91286 100644
--- a/interface/src/hooks/usePortal.ts
+++ b/interface/src/hooks/usePortal.ts
@@ -15,14 +15,14 @@ export function usePortal(agentId: string, sessionId?: string) {
 	const [error, setError] = useState<string | null>(null);
 
 	const sendMessage = useCallback(
-		async (text: string) => {
+		async (text: string, attachmentIds?: string[]) => {
 			if (isSending) return;
 
 			setError(null);
 			setIsSending(true);
 
 			try {
-				const response = await api.portalSend(agentId, resolvedSessionId, text);
+				const response = await api.portalSend(agentId, resolvedSessionId, text, undefined, attachmentIds);
 				if (!response.ok) {
 					throw new Error(`HTTP ${response.status}`);
 				}
diff --git a/interface/src/hooks/useServer.tsx b/interface/src/hooks/useServer.tsx
index 77d3dfb97..83f4f901d 100644
--- a/interface/src/hooks/useServer.tsx
+++ b/interface/src/hooks/useServer.tsx
@@ -8,7 +8,11 @@ import {
 	type ReactNode,
 } from "react";
 import { setServerUrl as setClientServerUrl } from "@/api/client";
-import { IS_TAURI, invoke as platformInvoke } from "@/platform";
+import {
+	HAS_BUNDLED_SERVER,
+	IS_DESKTOP,
+	invoke as platformInvoke,
+} from "@/platform";
 
 export type ServerState = "checking" | "connected" | "disconnected";
 
@@ -29,10 +33,10 @@ interface ServerContextValue {
 	hasBootstrapped: boolean;
 	/** Signal that bootstrap queries have completed (called by LiveContextProvider) */
 	onBootstrapped: () => void;
-	/** Whether the app is running inside Tauri */
-	isTauri: boolean;
-	/** Whether a sidecar binary is bundled (Tauri only) */
-	hasSidecar: boolean;
+	/** Whether the app is running inside a desktop host */
+	isDesktopHost: boolean;
+	/** Whether a bundled local server binary is available */
+	hasBundledServer: boolean;
 }
 
 const ServerContext = createContext<ServerContextValue>({
@@ -42,8 +46,8 @@ const ServerContext = createContext<ServerContextValue>({
 	hasConnected: false,
 	hasBootstrapped: false,
 	onBootstrapped: () => {},
-	isTauri: false,
-	hasSidecar: false,
+	isDesktopHost: false,
+	hasBundledServer: false,
 });
 
 export function useServer() {
@@ -63,8 +67,6 @@ function normalizeUrl(raw: string): string {
 	}
 }
 
-// IS_TAURI imported from @/platform
-
 async function checkHealth(baseUrl: string): Promise<boolean> {
 	const controller = new AbortController();
 	const timeout = setTimeout(() => controller.abort(), 3000);
@@ -83,22 +85,22 @@ async function checkHealth(baseUrl: string): Promise<boolean> {
 /** Persist the server URL. Uses Tauri IPC when available, localStorage otherwise. */
 async function persistUrl(url: string): Promise<void> {
 	localStorage.setItem(STORAGE_KEY, url);
-	if (IS_TAURI) {
+	if (IS_DESKTOP) {
 		try {
 			await platformInvoke("set_server_url", { url });
 		} catch {
-			// Tauri command not available (e.g. dev mode without Tauri)
+			// Desktop command not available (e.g. browser/dev mode)
 		}
 	}
 }
 
-/** Load the persisted server URL. Tauri IPC is async so this is only
+/** Load the persisted server URL. Desktop IPC is async so this is only
  *  used for the initial load; subsequent reads use React state. */
 async function loadPersistedUrl(): Promise<string | null> {
-	if (IS_TAURI) {
+	if (IS_DESKTOP) {
 		try {
 			const url = await platformInvoke<string>("get_server_url");
-			// The Tauri command returns the default sentinel when nothing
+			// The desktop command returns the default sentinel when nothing
 			// is stored. Treat it (and empty strings) as "not persisted"
 			// so we fall through to localStorage.
 			if (url && url !== DEFAULT_SERVER_URL) return url;
@@ -111,7 +113,7 @@ async function loadPersistedUrl(): Promise<string | null> {
 
 /**
  * Detect whether the SPA is served from the spacebot server itself
- * (same-origin) rather than from Tauri or a separate dev server.
+ * (same-origin) rather than from the desktop host or a separate dev server.
  *
  * In same-origin mode (embedded via rust_embed, or behind the hosted
  * proxy with __SPACEBOT_BASE_PATH), API calls use relative paths and
@@ -119,12 +121,12 @@ async function loadPersistedUrl(): Promise<string | null> {
  */
 function isSameOriginMode(): boolean {
 	// Hosted deployment with a base path prefix
-	if ((window as any).__SPACEBOT_BASE_PATH) return true;
-	// Not Tauri, and served from a normal HTTP origin (not a dev server
+	if (window.__SPACEBOT_BASE_PATH) return true;
+	// Not running in the desktop host, and served from a normal HTTP origin (not a dev server
 	// with a Vite proxy). In production the spacebot binary embeds the
 	// SPA at the same origin, so relative API paths just work.
 	// In Vite dev mode, the proxy handles /api, so same-origin is also fine.
-	if (!IS_TAURI) return true;
+	if (!IS_DESKTOP) return true;
 	return false;
 }
 
@@ -132,7 +134,7 @@ export function ServerProvider({ children }: { children: ReactNode }) {
 	const sameOrigin = isSameOriginMode();
 
 	// Load saved URL from localStorage synchronously for first render;
-	// an async effect will reconcile with Tauri's persisted value.
+	// an async effect will reconcile with the desktop host's persisted value.
 	const [serverUrl, setServerUrlRaw] = useState<string>(() => {
 		if (sameOrigin) {
 			// Same-origin or dev proxy mode: API is relative, no server
@@ -140,7 +142,7 @@ export function ServerProvider({ children }: { children: ReactNode }) {
 			// returns the relative BASE_PATH + "/api".
 			return "";
 		}
-		// Tauri desktop mode: need an explicit server URL.
+		// Desktop mode: need an explicit server URL.
 		const saved = localStorage.getItem(STORAGE_KEY);
 		const initial = saved ? normalizeUrl(saved) : DEFAULT_SERVER_URL;
 		// Sync to the API client module immediately so the very first
@@ -157,7 +159,7 @@ export function ServerProvider({ children }: { children: ReactNode }) {
 	const onBootstrapped = useCallback(() => setHasBootstrapped(true), []);
 	const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
-	// On mount, reconcile with Tauri-persisted URL (async)
+	// On mount, reconcile with the desktop host's persisted URL (async)
 	useEffect(() => {
 		if (sameOrigin) return;
 		loadPersistedUrl().then((saved) => {
@@ -211,8 +213,8 @@ export function ServerProvider({ children }: { children: ReactNode }) {
 				hasConnected,
 				hasBootstrapped,
 				onBootstrapped,
-				isTauri: IS_TAURI,
-				hasSidecar: IS_TAURI, // sidecar is always bundled in Tauri builds
+				isDesktopHost: IS_DESKTOP,
+				hasBundledServer: HAS_BUNDLED_SERVER,
 			}}
 		>
 			{children}
diff --git a/interface/src/hooks/useTheme.ts b/interface/src/hooks/useTheme.ts
index 797b76456..0fd029113 100644
--- a/interface/src/hooks/useTheme.ts
+++ b/interface/src/hooks/useTheme.ts
@@ -1,6 +1,13 @@
 import { useState, useEffect, useCallback } from "react";
 
-export type ThemeId = "default" | "vanilla" | "midnight" | "noir";
+export type ThemeId =
+	| "default"
+	| "vanilla"
+	| "midnight"
+	| "noir"
+	| "slate"
+	| "nord"
+	| "mocha";
 
 export interface ThemeOption {
 	id: ThemeId;
@@ -13,13 +20,13 @@ export const THEMES: ThemeOption[] = [
 	{
 		id: "default",
 		name: "Default",
-		description: "Dark theme with purple accent",
+		description: "Dark theme with blue accent",
 		className: "",
 	},
 	{
 		id: "vanilla",
 		name: "Vanilla",
-		description: "Light theme with blue accent",
+		description: "Light theme",
 		className: "vanilla-theme",
 	},
 	{
@@ -34,6 +41,24 @@ export const THEMES: ThemeOption[] = [
 		description: "Pure black and white theme",
 		className: "noir-theme",
 	},
+	{
+		id: "slate",
+		name: "Slate",
+		description: "Cool gray dark theme",
+		className: "slate-theme",
+	},
+	{
+		id: "nord",
+		name: "Nord",
+		description: "Arctic blue-gray theme",
+		className: "nord-theme",
+	},
+	{
+		id: "mocha",
+		name: "Mocha",
+		description: "Warm brown dark theme",
+		className: "mocha-theme",
+	},
 ];
 
 const STORAGE_KEY = "spacebot-theme";
diff --git a/interface/src/lib/platformIcons.tsx b/interface/src/lib/platformIcons.tsx
index 48c57f7a8..a79dca881 100644
--- a/interface/src/lib/platformIcons.tsx
+++ b/interface/src/lib/platformIcons.tsx
@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDiscord, faSlack, faTelegram, faTwitch, faWhatsapp } from "@fortawesome/free-brands-svg-icons";
-import { faLink, faEnvelope, faComments, faComment, faServer } from "@fortawesome/free-solid-svg-icons";
+import { faLink, faEnvelope, faComments, faComment, faServer, faCommentDots } from "@fortawesome/free-solid-svg-icons";
 
 interface PlatformIconProps {
 	platform: string;
@@ -14,6 +14,8 @@ export function PlatformIcon({ platform, className = "text-ink-faint", size = "1
 		slack: faSlack,
 		telegram: faTelegram,
 		twitch: faTwitch,
+		portal: faCommentDots,
+		webchat: faCommentDots,
 		webhook: faLink,
 		email: faEnvelope,
 		mattermost: faServer,
diff --git a/interface/src/lib/providerIcons.tsx b/interface/src/lib/providerIcons.tsx
index 07b2d99e2..f57fbb05b 100644
--- a/interface/src/lib/providerIcons.tsx
+++ b/interface/src/lib/providerIcons.tsx
@@ -42,7 +42,7 @@ function NvidiaIcon({ size = 24, className }: IconProps) {
 	);
 }
 
-function OpenCodeZenIcon({ size = 24, className }: IconProps) {
+export function OpenCodeZenIcon({ size = 24, className }: IconProps) {
 	const clipId = useId();
 	const clipPathId = `opencode-zen-clip-${clipId}`;
 	const width = (size * 32) / 40;
diff --git a/interface/src/main.tsx b/interface/src/main.tsx
index ed9d516c9..12c02ba30 100644
--- a/interface/src/main.tsx
+++ b/interface/src/main.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "./App";
-import "./ui/style/style.scss";
+import "./styles.css";
 import "@fontsource/ibm-plex-sans/400.css";
 import "@fontsource/ibm-plex-sans/500.css";
 import "@fontsource/ibm-plex-sans/600.css";
@@ -9,12 +9,9 @@ import "@fontsource/ibm-plex-sans/700.css";
 
 // WKWebView (macOS) renders at a slightly smaller effective scale than browsers.
 // Only apply zoom compensation there — WebView2 (Windows) doesn't need it.
-import { IS_TAURI } from "./platform";
-if (IS_TAURI) {
-	const isMac = /mac/i.test((navigator as any).userAgentData?.platform ?? navigator.platform ?? "");
-	if (isMac) {
-		document.body.style.zoom = "1.1";
-	}
+import {IS_DESKTOP, IS_MACOS} from "./platform";
+if (IS_DESKTOP && IS_MACOS) {
+	document.body.style.zoom = "1.1";
 }
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
diff --git a/interface/src/platform.ts b/interface/src/platform.ts
index 48f70a149..938050350 100644
--- a/interface/src/platform.ts
+++ b/interface/src/platform.ts
@@ -8,7 +8,108 @@
  * In web/browser mode every operation is a no-op or uses standard Web APIs.
  */
 
-export const IS_TAURI: boolean = !!(window as any).__TAURI_INTERNALS__;
+export type HostKind = "browser" | "desktop";
+export type OperatingSystem = "macos" | "windows" | "linux" | "unknown";
+
+export interface PlatformInfo {
+	host: HostKind;
+	os: OperatingSystem;
+	hasBundledServer: boolean;
+}
+
+interface NavigatorWithUserAgentData extends Navigator {
+	userAgentData?: {
+		platform?: string;
+	};
+}
+
+interface BundledProcessCloseEvent {
+	code: number | null;
+}
+
+interface BundledProcessHandlers {
+	onError?: (error: string) => void;
+	onClose?: (event: BundledProcessCloseEvent) => void;
+	onStdout?: (line: string) => void;
+}
+
+function getDesktopBridge(): {invoke: (command: string, args?: unknown) => unknown} | null {
+	if (typeof window === "undefined") return null;
+	return (window as any).__TAURI_INTERNALS__ ?? null;
+}
+
+function detectOperatingSystem(): OperatingSystem {
+	if (typeof navigator === "undefined") return "unknown";
+
+	const browserNavigator = navigator as NavigatorWithUserAgentData;
+	const platformHints = [
+		browserNavigator.userAgentData?.platform,
+		navigator.platform,
+		navigator.userAgent,
+	]
+		.filter((value): value is string => typeof value === "string" && value.length > 0)
+		.join(" ")
+		.toLowerCase();
+
+	if (/(iphone|ipad|ipod)/.test(platformHints)) return "unknown";
+	if (/(mac|darwin)/.test(platformHints)) return "macos";
+	if (/(win|windows)/.test(platformHints)) return "windows";
+	if (/(linux|x11)/.test(platformHints)) return "linux";
+	return "unknown";
+}
+
+const host: HostKind = getDesktopBridge() ? "desktop" : "browser";
+
+export const PLATFORM: PlatformInfo = Object.freeze({
+	host,
+	os: detectOperatingSystem(),
+	hasBundledServer: host === "desktop",
+});
+
+export const IS_DESKTOP = PLATFORM.host === "desktop";
+export const IS_MACOS = PLATFORM.os === "macos";
+export const HAS_BUNDLED_SERVER = PLATFORM.hasBundledServer;
+
+const DESKTOP_DRAG_REGION_ATTRIBUTES = Object.freeze({
+	"data-tauri-drag-region": "true",
+});
+const NO_DRAG_REGION_ATTRIBUTES = Object.freeze({}) as Readonly<Record<string, string>>;
+
+export function dragRegionAttributes(): Readonly<Record<string, string>> {
+	return IS_DESKTOP ? DESKTOP_DRAG_REGION_ATTRIBUTES : NO_DRAG_REGION_ATTRIBUTES;
+}
+
+export async function spawnBundledProcess(
+	binary: string,
+	args: string[],
+	handlers: BundledProcessHandlers = {},
+): Promise<boolean> {
+	if (!HAS_BUNDLED_SERVER) return false;
+
+	const {Command} = await import("@tauri-apps/plugin-shell");
+	const command = Command.sidecar(binary, args);
+
+	if (handlers.onError) {
+		command.on("error", (error: string) => {
+			handlers.onError?.(error);
+		});
+	}
+
+	if (handlers.onClose) {
+		command.on("close", (event: {code: number | null}) => {
+			handlers.onClose?.({code: event.code});
+		});
+	}
+
+	if (handlers.onStdout) {
+		command.stdout.on("data", (line: string) => {
+			handlers.onStdout?.(line);
+		});
+	}
+
+	await command.spawn();
+	return true;
+}
 
 // ── Window management ───────────────────────────────────────────────────
 
@@ -18,7 +119,7 @@ export const IS_TAURI: boolean = !!(window as any).__TAURI_INTERNALS__;
  * bottom-pinned). In browser mode this is a no-op.
  */
 export async function resizeWindow(label: string, width: number, height: number): Promise<void> {
-	if (!IS_TAURI) return;
+	if (!IS_DESKTOP) return;
 	try {
 		const {invoke} = await import("@tauri-apps/api/core");
 		await invoke("resize_overlay_window", {label, width, height});
@@ -28,11 +129,12 @@ export async function resizeWindow(label: string, width: number, height: number)
 }
 
 /**
- * Start dragging the current window (Tauri only, for custom titlebars).
+ * Start dragging the current desktop window for custom titlebars.
  */
 export function startDragging(): void {
-	if (!IS_TAURI) return;
-	(window as any).__TAURI_INTERNALS__.invoke("plugin:window|start_dragging");
+	const desktopBridge = getDesktopBridge();
+	if (!desktopBridge) return;
+	desktopBridge.invoke("plugin:window|start_dragging");
 }
 
 // ── IPC ─────────────────────────────────────────────────────────────────
@@ -42,7 +144,7 @@ export function startDragging(): void {
  * Use this for any Tauri IPC that doesn't have a dedicated helper above.
  */
 export async function invoke<T = void>(command: string, args?: Record<string, unknown>): Promise<T | undefined> {
-	if (!IS_TAURI) return undefined;
+	if (!IS_DESKTOP) return undefined;
 	const {invoke: tauriInvoke} = await import("@tauri-apps/api/core");
 	return tauriInvoke<T>(command, args);
 }
@@ -56,7 +158,7 @@ type UnlistenFn = () => void;
  * Returns an unlisten function. In browser mode returns a no-op.
  */
 export async function listen(event: string, handler: () => void): Promise<UnlistenFn> {
-	if (!IS_TAURI) return () => {};
+	if (!IS_DESKTOP) return () => {};
 	try {
 		const {listen: tauriListen} = await import("@tauri-apps/api/event");
 		return await tauriListen(event, () => handler());
diff --git a/interface/src/router.tsx b/interface/src/router.tsx
index aa9e86833..2d2422e6c 100644
--- a/interface/src/router.tsx
+++ b/interface/src/router.tsx
@@ -3,13 +3,13 @@ import {
 	createRootRoute,
 	createRoute,
 	Outlet,
+	useLocation,
 } from "@tanstack/react-router";
-import {useQuery} from "@tanstack/react-query";
-import {api, BASE_PATH} from "@/api/client";
+import {BASE_PATH} from "@/api/client";
 import {ConnectionBanner} from "@/components/ConnectionBanner";
-import {TopBar, TopBarProvider, useSetTopBar} from "@/components/TopBar";
 import {Sidebar} from "@/components/Sidebar";
 import {Overview} from "@/routes/Overview";
+import {Dashboard} from "@/routes/Dashboard";
 import {AgentDetail} from "@/routes/AgentDetail";
 import {AgentChannels} from "@/routes/AgentChannels";
 import {AgentCortex} from "@/routes/AgentCortex";
@@ -17,68 +17,42 @@ import {ChannelDetail} from "@/routes/ChannelDetail";
 import {AgentMemories} from "@/routes/AgentMemories";
 import {AgentConfig} from "@/routes/AgentConfig";
 import {AgentCron} from "@/routes/AgentCron";
-import {AgentIngest} from "@/routes/AgentIngest";
+
 import {AgentSkills} from "@/routes/AgentSkills";
 import {AgentWorkers} from "@/routes/AgentWorkers";
 import {AgentProjects} from "@/routes/AgentProjects";
 import {AgentTasks} from "@/routes/AgentTasks";
 import {GlobalTasks} from "@/routes/GlobalTasks";
+import {Wiki} from "@/routes/Wiki";
 import {AgentChat} from "@/routes/AgentChat";
 import {Settings} from "@/routes/Settings";
-import {Orchestrate} from "@/routes/Orchestrate";
+import {Workbench} from "@/routes/Workbench";
 import {useLiveContext} from "@/hooks/useLiveContext";
-import {AgentTabs} from "@/components/AgentTabs";
 
 // ── Root layout ──────────────────────────────────────────────────────────
 
 function RootLayout() {
 	const {liveStates, connectionState, hasData} = useLiveContext();
+	const location = useLocation();
+	const bare = location.pathname.startsWith("/workbench") || location.pathname.startsWith("/dashboard");
 
 	return (
-		<TopBarProvider>
-			<div className="flex h-screen flex-col overflow-hidden bg-app">
-				<TopBar />
-				<ConnectionBanner state={connectionState} hasData={hasData} />
-				<div className="flex min-h-0 flex-1">
-					<Sidebar liveStates={liveStates} />
-					<div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+		<div className="flex h-screen flex-col overflow-hidden bg-sidebar">
+			<ConnectionBanner state={connectionState} hasData={hasData} />
+			<div className="flex min-h-0 flex-1">
+				<Sidebar liveStates={liveStates} />
+				<div className="flex min-w-0 flex-1 flex-col overflow-hidden py-[10px] pr-[10px]">
+					{bare ? (
 						<Outlet />
-					</div>
-				</div>
-			</div>
-		</TopBarProvider>
-	);
-}
-
-// ── Topbar content for agent routes ──────────────────────────────────────
-
-function AgentTopBar({agentId}: {agentId: string}) {
-	const agentsQuery = useQuery({
-		queryKey: ["agents"],
-		queryFn: () => api.agents(),
-		staleTime: 10_000,
-	});
-	const agent = agentsQuery.data?.agents.find((a) => a.id === agentId);
-	const displayName = agent?.display_name;
-
-	useSetTopBar(
-		<div className="flex h-full flex-col">
-			<div className="flex flex-1 items-center px-6">
-				<h1 className="font-plex text-sm font-medium text-ink">
-					{displayName ? (
-						<>
-							{displayName}
-							<span className="ml-2 text-ink-faint">{agentId}</span>
-						</>
 					) : (
-						agentId
+						<div className="flex min-w-0 flex-1 flex-col overflow-hidden rounded-2xl border border-app-line bg-app">
+							<Outlet />
+						</div>
 					)}
-				</h1>
+				</div>
 			</div>
-		</div>,
+		</div>
 	);
-
-	return <AgentTabs agentId={agentId} />;
 }
 
 // ── Routes ───────────────────────────────────────────────────────────────
@@ -96,6 +70,12 @@ const indexRoute = createRoute({
 	},
 });
 
+const dashboardRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: "/dashboard",
+	component: Dashboard,
+});
+
 const settingsRoute = createRoute({
 	getParentRoute: () => rootRoute,
 	path: "/settings",
@@ -113,11 +93,6 @@ const logsRoute = createRoute({
 	getParentRoute: () => rootRoute,
 	path: "/logs",
 	component: function LogsPage() {
-		useSetTopBar(
-			<div className="flex h-full items-center px-6">
-				<h1 className="font-plex text-sm font-medium text-ink">Logs</h1>
-			</div>,
-		);
 		return (
 			<div className="flex flex-1 items-center justify-center">
 				<p className="text-sm text-ink-faint">Logs coming soon</p>
@@ -126,19 +101,11 @@ const logsRoute = createRoute({
 	},
 });
 
-const orchestrateRoute = createRoute({
+const workbenchRoute = createRoute({
 	getParentRoute: () => rootRoute,
-	path: "/orchestrate",
-	component: function OrchestratePage() {
-		useSetTopBar(
-			<div className="flex h-full items-center gap-4 px-6">
-				<h1 className="font-plex text-sm font-medium text-ink">
-					Orchestrate
-				</h1>
-				<span className="text-xs text-ink-faint">Active workers across all agents</span>
-			</div>,
-		);
-		return <Orchestrate />;
+	path: "/workbench",
+	component: function WorkbenchPage() {
+		return <Workbench />;
 	},
 });
 
@@ -146,30 +113,25 @@ const tasksRoute = createRoute({
 	getParentRoute: () => rootRoute,
 	path: "/tasks",
 	component: function TasksPage() {
-		useSetTopBar(
-			<div className="flex h-full items-center gap-4 px-6">
-				<h1 className="font-plex text-sm font-medium text-ink">Tasks</h1>
-				<span className="text-xs text-ink-faint">All tasks across agents</span>
-			</div>,
-		);
 		return <GlobalTasks />;
 	},
 });
 
+const wikiRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: "/wiki",
+	component: function WikiPage() {
+		return <Wiki />;
+	},
+});
+
 const agentRoute = createRoute({
 	getParentRoute: () => rootRoute,
 	path: "/agents/$agentId",
 	component: function AgentPage() {
 		const {agentId} = agentRoute.useParams();
 		const {liveStates} = useLiveContext();
-		return (
-			<div className="flex h-full flex-col">
-				<AgentTopBar agentId={agentId} />
-				<div className="flex-1 overflow-hidden">
-					<AgentDetail agentId={agentId} liveStates={liveStates} />
-				</div>
-			</div>
-		);
+		return <AgentDetail agentId={agentId} liveStates={liveStates} />;
 	},
 });
 
@@ -178,14 +140,7 @@ const agentChatRoute = createRoute({
 	path: "/agents/$agentId/chat",
 	component: function AgentChatPage() {
 		const {agentId} = agentChatRoute.useParams();
-		return (
-			<div className="flex h-full flex-col">
-				<AgentTopBar agentId={agentId} />
-				<div className="flex-1 overflow-hidden">
-					<AgentChat agentId={agentId} />
-				</div>
-			</div>
-		);
+		return <AgentChat agentId={agentId} />;
 	},
 });
 
@@ -195,14 +150,7 @@ const agentChannelsRoute = createRoute({
 	component: function AgentChannelsPage() {
 		const {agentId} = agentChannelsRoute.useParams();
 		const {liveStates} = useLiveContext();
-		return (
-			<div className="flex h-full flex-col">
-				<AgentTopBar agentId={agentId} />
-				<div className="flex-1 overflow-hidden">
-					<AgentChannels agentId={agentId} liveStates={liveStates} />
-				</div>
-			</div>
-		);
+		return <AgentChannels agentId={agentId} liveStates={liveStates} />;
 	},
 });
 
@@ -211,32 +159,10 @@ const agentMemoriesRoute = createRoute({
 	path: "/agents/$agentId/memories",
 	component: function AgentMemoriesPage() {
 		const {agentId} = agentMemoriesRoute.useParams();
-		return (
-			<div className="flex h-full flex-col">
-				<AgentTopBar agentId={agentId} />
-				<div className="flex-1 overflow-hidden">
-					<AgentMemories agentId={agentId} />
-				</div>
-			</div>
-		);
+		return <AgentMemories agentId={agentId} />;
 	},
 });
 
-const agentIngestRoute = createRoute({
-	getParentRoute: () => rootRoute,
-	path: "/agents/$agentId/ingest",
-	component: function AgentIngestPage() {
-		const {agentId} = agentIngestRoute.useParams();
-		return (
-			<div className="flex h-full flex-col">
-				<AgentTopBar agentId={agentId} />
-				<div className="flex-1 overflow-hidden">
-					<AgentIngest agentId={agentId} />
-				</div>
-			</div>
-		);
-	},
-});
 
 const agentWorkersRoute = createRoute({
 	getParentRoute: () => rootRoute,
@@ -246,30 +172,19 @@ const agentWorkersRoute = createRoute({
 	}),
 	component: function AgentWorkersPage() {
 		const {agentId} = agentWorkersRoute.useParams();
-		return (
-			<div className="flex h-full flex-col">
-				<AgentTopBar agentId={agentId} />
-				<div className="flex-1 overflow-hidden">
-					<AgentWorkers agentId={agentId} />
-				</div>
-			</div>
-		);
+		return <AgentWorkers agentId={agentId} />;
 	},
 });
 
-const agentProjectsRoute = createRoute({
+const projectsRoute = createRoute({
 	getParentRoute: () => rootRoute,
-	path: "/agents/$agentId/projects",
-	component: function AgentProjectsPage() {
-		const {agentId} = agentProjectsRoute.useParams();
-		return (
-			<div className="flex h-full flex-col">
-				<AgentTopBar agentId={agentId} />
-				<div className="flex-1 overflow-hidden">
-					<AgentProjects agentId={agentId} />
-				</div>
-			</div>
-		);
+	path: "/projects",
+	validateSearch: (search: Record<string, unknown>): {id?: string} => ({
+		id: typeof search.id === "string" ? search.id : undefined,
+	}),
+	component: function ProjectsPage() {
+		const {id} = projectsRoute.useSearch();
+		return <AgentProjects projectId={id} />;
 	},
 });
 
@@ -278,14 +193,7 @@ const agentTasksRoute = createRoute({
 	path: "/agents/$agentId/tasks",
 	component: function AgentTasksPage() {
 		const {agentId} = agentTasksRoute.useParams();
-		return (
-			<div className="flex h-full flex-col">
-				<AgentTopBar agentId={agentId} />
-				<div className="flex-1 overflow-hidden">
-					<AgentTasks agentId={agentId} />
-				</div>
-			</div>
-		);
+		return <AgentTasks agentId={agentId} />;
 	},
 });
 
@@ -294,14 +202,7 @@ const agentCronRoute = createRoute({
 	path: "/agents/$agentId/cron",
 	component: function AgentCronPage() {
 		const {agentId} = agentCronRoute.useParams();
-		return (
-			<div className="flex h-full flex-col">
-				<AgentTopBar agentId={agentId} />
-				<div className="flex-1 overflow-hidden">
-					<AgentCron agentId={agentId} />
-				</div>
-			</div>
-		);
+		return <AgentCron agentId={agentId} />;
 	},
 });
 
@@ -315,14 +216,7 @@ const agentConfigRoute = createRoute({
 	},
 	component: function AgentConfigPage() {
 		const {agentId} = agentConfigRoute.useParams();
-		return (
-			<div className="flex h-full flex-col">
-				<AgentTopBar agentId={agentId} />
-				<div className="flex-1 overflow-hidden">
-					<AgentConfig agentId={agentId} />
-				</div>
-			</div>
-		);
+		return <AgentConfig agentId={agentId} />;
 	},
 });
 
@@ -331,14 +225,7 @@ const agentCortexRoute = createRoute({
 	path: "/agents/$agentId/cortex",
 	component: function AgentCortexPage() {
 		const {agentId} = agentCortexRoute.useParams();
-		return (
-			<div className="flex h-full flex-col">
-				<AgentTopBar agentId={agentId} />
-				<div className="flex-1 overflow-hidden">
-					<AgentCortex agentId={agentId} />
-				</div>
-			</div>
-		);
+		return <AgentCortex agentId={agentId} />;
 	},
 });
 
@@ -347,14 +234,7 @@ const agentSkillsRoute = createRoute({
 	path: "/agents/$agentId/skills",
 	component: function AgentSkillsPage() {
 		const {agentId} = agentSkillsRoute.useParams();
-		return (
-			<div className="flex h-full flex-col">
-				<AgentTopBar agentId={agentId} />
-				<div className="flex-1 overflow-hidden">
-					<AgentSkills agentId={agentId} />
-				</div>
-			</div>
-		);
+		return <AgentSkills agentId={agentId} />;
 	},
 });
 
@@ -366,35 +246,32 @@ const channelRoute = createRoute({
 		const {liveStates, channels, loadOlderMessages} = useLiveContext();
 		const channel = channels.find((c) => c.id === channelId);
 		return (
-			<div className="flex h-full flex-col">
-				<AgentTopBar agentId={agentId} />
-				<div className="flex-1 overflow-hidden">
-					<ChannelDetail
-						agentId={agentId}
-						channelId={channelId}
-						channel={channel}
-						liveState={liveStates[channelId]}
-						onLoadMore={() => loadOlderMessages(channelId)}
-					/>
-				</div>
-			</div>
+			<ChannelDetail
+				agentId={agentId}
+				channelId={channelId}
+				channel={channel}
+				liveState={liveStates[channelId]}
+				onLoadMore={() => loadOlderMessages(channelId)}
+			/>
 		);
 	},
 });
 
 const routeTree = rootRoute.addChildren([
 	indexRoute,
+	dashboardRoute,
 	settingsRoute,
 	logsRoute,
-	orchestrateRoute,
+	workbenchRoute,
 	tasksRoute,
+	wikiRoute,
 	agentRoute,
 	agentChatRoute,
 	agentChannelsRoute,
 	agentMemoriesRoute,
-	agentIngestRoute,
+
 	agentWorkersRoute,
-	agentProjectsRoute,
+	projectsRoute,
 	agentTasksRoute,
 	agentCortexRoute,
 	agentSkillsRoute,
diff --git a/interface/src/routes/AgentChannels.tsx b/interface/src/routes/AgentChannels.tsx
index 707fde9fa..004c28092 100644
--- a/interface/src/routes/AgentChannels.tsx
+++ b/interface/src/routes/AgentChannels.tsx
@@ -1,23 +1,22 @@
-import { useMemo, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { api } from "@/api/client";
-import { ChannelCard } from "@/components/ChannelCard";
-import { Button, SearchInput } from "@/ui";
-import type { ChannelLiveState } from "@/hooks/useChannelLiveState";
-import { Settings02Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-import { useNavigate } from "@tanstack/react-router";
+import {useMemo, useState} from "react";
+import {useQuery} from "@tanstack/react-query";
+import {api} from "@/api/client";
+import {ChannelCard} from "@/components/ChannelCard";
+import {Button, SearchBar} from "@spacedrive/primitives";
+import type {ChannelLiveState} from "@/hooks/useChannelLiveState";
+import {GearSix} from "@phosphor-icons/react";
+import {useNavigate} from "@tanstack/react-router";
 
 interface AgentChannelsProps {
 	agentId: string;
 	liveStates: Record<string, ChannelLiveState>;
 }
 
-export function AgentChannels({ agentId, liveStates }: AgentChannelsProps) {
+export function AgentChannels({agentId, liveStates}: AgentChannelsProps) {
 	const navigate = useNavigate();
 	const [searchQuery, setSearchQuery] = useState("");
 
-	const { data: channelsData, isLoading } = useQuery({
+	const {data: channelsData, isLoading} = useQuery({
 		queryKey: ["channels"],
 		queryFn: api.channels,
 		refetchInterval: 10_000,
@@ -42,11 +41,11 @@ export function AgentChannels({ agentId, liveStates }: AgentChannelsProps) {
 	return (
 		<div className="flex h-full flex-col">
 			{hasChannels && (
-				<div className="flex items-center gap-3 border-b border-app-line/50 bg-app-darkBox/20 px-6 py-3">
-					<SearchInput
+				<div className="flex items-center gap-3 border-b border-app-line/50 bg-app-dark-box/20 px-6 py-3">
+					<SearchBar
 						placeholder="Search channels..."
 						value={searchQuery}
-						onChange={(event) => setSearchQuery(event.target.value)}
+						onChange={setSearchQuery}
 						className="flex-1"
 					/>
 				</div>
@@ -69,17 +68,23 @@ export function AgentChannels({ agentId, liveStates }: AgentChannelsProps) {
 					</div>
 				) : (
 					<div className="flex h-full items-start justify-center pt-[15vh]">
-						<div className="flex max-w-sm flex-col items-center rounded-xl border border-dashed border-app-line/50 bg-app-darkBox/20 p-8 text-center">
-							<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full border border-app-line bg-app-darkBox">
-								<HugeiconsIcon icon={Settings02Icon} className="h-6 w-6 text-ink-faint" />
+						<div className="flex max-w-sm flex-col items-center rounded-xl border border-dashed border-app-line/50 bg-app-dark-box/20 p-8 text-center">
+							<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full border border-app-line bg-app-dark-box">
+								<GearSix className="h-6 w-6 text-ink-faint" />
 							</div>
-							<h3 className="mb-1 font-plex text-sm font-medium text-ink">No channels yet</h3>
+							<h3 className="mb-1 font-plex text-sm font-medium text-ink">
+								No channels yet
+							</h3>
 							<p className="mb-5 max-w-md text-sm text-ink-faint">
-								Channels appear here once the bot receives its first message. Make sure a messaging platform is configured and bound to this agent in Settings.
+								Channels appear here once the bot receives its first message.
+								Make sure a messaging platform is configured and bound to this
+								agent in Settings.
 							</p>
-							<Button 
-								onClick={() => navigate({ to: "/settings", search: { tab: "channels" } })} 
-								variant="secondary" 
+							<Button
+								onClick={() =>
+									navigate({to: "/settings", search: {tab: "channels"}})
+								}
+								variant="gray"
 								size="sm"
 							>
 								Go to Settings
diff --git a/interface/src/routes/AgentChat.tsx b/interface/src/routes/AgentChat.tsx
index f14af692f..6a5056400 100644
--- a/interface/src/routes/AgentChat.tsx
+++ b/interface/src/routes/AgentChat.tsx
@@ -1,5 +1,5 @@
-import { WebChatPanel } from "@/components/WebChatPanel";
+import { PortalPanel } from "@/components/portal";
 
 export function AgentChat({ agentId }: { agentId: string }) {
-	return <WebChatPanel agentId={agentId} />;
+	return <PortalPanel agentId={agentId} />;
 }
diff --git a/interface/src/routes/AgentConfig.tsx b/interface/src/routes/AgentConfig.tsx
index fcb372b3b..5f0d544f2 100644
--- a/interface/src/routes/AgentConfig.tsx
+++ b/interface/src/routes/AgentConfig.tsx
@@ -1,69 +1,37 @@
-import { useCallback, useEffect, useState, useRef } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { api, type AgentConfigResponse, type AgentConfigUpdateRequest } from "@/api/client";
-import { Button, Input, SettingSidebarButton, TextArea, Toggle, NumberStepper, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, cx } from "@/ui";
-import { ModelSelect } from "@/components/ModelSelect";
-import { TagInput } from "@/components/TagInput";
-import { Markdown } from "@/components/Markdown";
-import { ProfileAvatar, seedGradient } from "@/components/ProfileAvatar";
-import { motion, AnimatePresence } from "framer-motion";
-import { useSearch, useNavigate } from "@tanstack/react-router";
-
-
-function supportsAdaptiveThinking(modelId: string): boolean {
-	const id = modelId.toLowerCase();
-	return id.includes("opus-4-6") || id.includes("opus-4.6")
-		|| id.includes("sonnet-4-6") || id.includes("sonnet-4.6");
-}
-
-type SectionId = "general" | "soul" | "identity" | "role" | "routing" | "tuning" | "compaction" | "cortex" | "coalesce" | "memory" | "browser" | "sandbox" | "projects";
-
-const SECTIONS: {
-	id: SectionId;
-	label: string;
-	group: "general" | "identity" | "config";
-	description: string;
-	detail: string;
-}[] = [
-	{ id: "general", label: "General", group: "general", description: "Agent metadata", detail: "The agent's display name and role. The display name is shown in the UI and messaging platforms. The role describes the agent's purpose (e.g. Research Assistant, Code Reviewer)." },
-	{ id: "soul", label: "Soul", group: "identity", description: "SOUL.md", detail: "Defines the agent's personality, values, communication style, and behavioral boundaries. This is the core of who the agent is." },
-	{ id: "identity", label: "Identity", group: "identity", description: "IDENTITY.md", detail: "The agent's name, nature, and purpose. How it introduces itself and what it understands its role to be." },
-	{ id: "role", label: "Role", group: "identity", description: "ROLE.md", detail: "The agent's responsibilities, scope, expected outcomes, and escalation rules. Defines what the agent does and doesn't do." },
-	{ id: "routing", label: "Model Routing", group: "config", description: "Which models each process uses", detail: "Controls which LLM model is used for each process type. Channels handle user-facing conversation, branches do thinking, workers execute tasks, the compactor summarizes context, cortex observes system state, and voice transcribes audio attachments before the channel turn." },
-	{ id: "tuning", label: "Tuning", group: "config", description: "Turn limits, context window, branches", detail: "Core limits that control how much work the agent does per message. Max turns caps LLM iterations per channel message. Context window sets the token budget. Branch limits control parallel thinking." },
-	{ id: "compaction", label: "Compaction", group: "config", description: "Context compaction thresholds", detail: "Thresholds that trigger context summarization as the conversation grows. Background kicks in early, aggressive compresses harder, and emergency truncates without LLM involvement. All values are fractions of the context window." },
-	{ id: "cortex", label: "Cortex", group: "config", description: "System observer settings", detail: "The cortex monitors active processes and generates memory bulletins. Tick interval controls observation frequency. Timeouts determine when stuck workers or branches get cancelled. The circuit breaker auto-disables after consecutive failures." },
-	{ id: "coalesce", label: "Coalesce", group: "config", description: "Message batching", detail: "When multiple messages arrive in quick succession, coalescing batches them into a single LLM turn. This prevents the agent from responding to each message individually in fast-moving conversations." },
-	{ id: "memory", label: "Memory Persistence", group: "config", description: "Auto-save interval", detail: "Spawns a silent background branch at regular intervals to recall existing memories and save new ones from the recent conversation. Runs without blocking the channel." },
-	{ id: "browser", label: "Browser", group: "config", description: "Chrome automation", detail: "Controls browser automation tools available to workers. When enabled, workers can navigate web pages, take screenshots, and interact with sites. JavaScript evaluation is a separate permission." },
-
-	{ id: "sandbox", label: "Sandbox", group: "config", description: "Process containment", detail: "OS-level filesystem containment for shell tool subprocesses. When enabled, worker processes run inside a kernel-enforced sandbox (bubblewrap on Linux, sandbox-exec on macOS) with an allowlist-only filesystem — only system paths, the workspace, and explicitly configured extra paths are accessible." },
-	{ id: "projects", label: "Projects", group: "config", description: "Workspace management", detail: "Controls how the agent manages project workspaces, git repos, and worktrees. Use worktrees for parallel feature branches, auto-discover to scan for repos on project creation, and set a disk usage warning threshold." },
-];
+import {useCallback, useEffect, useState, useRef} from "react";
+import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
+import {useSearch, useNavigate} from "@tanstack/react-router";
+import {
+	api,
+	type AgentConfigResponse,
+	type AgentConfigUpdateRequest,
+} from "@/api/client";
+import {
+	ConfigSidebar,
+	GeneralEditor,
+	IdentityEditor,
+	ConfigSectionEditor,
+	SaveBar,
+	SECTIONS,
+	isIdentityField,
+	getIdentityField,
+	type SectionId,
+	type SaveHandlerRef,
+} from "@/components/agent-config";
+import {AgentIngest} from "@/routes/AgentIngest";
 
 interface AgentConfigProps {
 	agentId: string;
 }
 
-const isIdentityField = (id: SectionId): id is "soul" | "identity" | "role" => {
-	return id === "soul" || id === "identity" || id === "role";
-};
-
-const getIdentityField = (data: { soul: string | null; identity: string | null; role: string | null }, field: SectionId): string | null => {
-	if (isIdentityField(field)) {
-		return data[field];
-	}
-	return null;
-};
-
-export function AgentConfig({ agentId }: AgentConfigProps) {
+export function AgentConfig({agentId}: AgentConfigProps) {
 	const queryClient = useQueryClient();
 	const navigate = useNavigate();
 	const search = useSearch({from: "/agents/$agentId/config"}) as {tab?: string};
 	const [activeSection, setActiveSection] = useState<SectionId>("general");
 	const [dirty, setDirty] = useState(false);
 	const [saving, setSaving] = useState(false);
-	const saveHandlerRef = useRef<{ save?: () => void; revert?: () => void }>({});
+	const saveHandlerRef = useRef<SaveHandlerRef>({});
 
 	// Sync activeSection with URL search param
 	useEffect(() => {
@@ -77,7 +45,11 @@ export function AgentConfig({ agentId }: AgentConfigProps) {
 
 	const handleSectionChange = (section: SectionId) => {
 		setActiveSection(section);
-		navigate({to: "/agents/$agentId/config", params: {agentId}, search: {tab: section}});
+		navigate({
+			to: "/agents/$agentId/config",
+			params: {agentId},
+			search: {tab: section},
+		});
 	};
 
 	const agentsQuery = useQuery({
@@ -99,11 +71,15 @@ export function AgentConfig({ agentId }: AgentConfigProps) {
 	});
 
 	const agentMutation = useMutation({
-		mutationFn: (update: { display_name?: string; role?: string; gradient_start?: string; gradient_end?: string }) =>
-			api.updateAgent(agentId, update),
+		mutationFn: (update: {
+			display_name?: string;
+			role?: string;
+			gradient_start?: string;
+			gradient_end?: string;
+		}) => api.updateAgent(agentId, update),
 		onMutate: () => setSaving(true),
 		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["agents"] });
+			queryClient.invalidateQueries({queryKey: ["agents"]});
 			setDirty(false);
 			setSaving(false);
 		},
@@ -111,7 +87,10 @@ export function AgentConfig({ agentId }: AgentConfigProps) {
 	});
 
 	const identityMutation = useMutation({
-		mutationFn: (update: { field: "soul" | "identity" | "role"; content: string }) =>
+		mutationFn: (update: {
+			field: "soul" | "identity" | "role";
+			content: string;
+		}) =>
 			api.updateIdentity({
 				agent_id: agentId,
 				[update.field]: update.content,
@@ -126,16 +105,17 @@ export function AgentConfig({ agentId }: AgentConfigProps) {
 	});
 
 	const configMutation = useMutation({
-		mutationFn: (update: AgentConfigUpdateRequest) => api.updateAgentConfig(update),
+		mutationFn: (update: AgentConfigUpdateRequest) =>
+			api.updateAgentConfig(update),
 		onMutate: (update) => {
 			setSaving(true);
-			// Optimistically merge the sent values into the cache so the UI
-			// reflects the change immediately (covers fields the backend
-			// doesn't yet return in its response, like sandbox).
-			const previous = queryClient.getQueryData<AgentConfigResponse>(["agent-config", agentId]);
+			const previous = queryClient.getQueryData<AgentConfigResponse>([
+				"agent-config",
+				agentId,
+			]);
 			if (previous) {
-				const { agent_id: _, ...sections } = update;
-				const merged = { ...previous } as unknown as Record<string, unknown>;
+				const {agent_id: _, ...sections} = update;
+				const merged = {...previous} as unknown as Record<string, unknown>;
 				const prev = previous as unknown as Record<string, unknown>;
 				for (const [key, value] of Object.entries(sections)) {
 					if (value !== undefined) {
@@ -145,14 +125,21 @@ export function AgentConfig({ agentId }: AgentConfigProps) {
 						};
 					}
 				}
-				queryClient.setQueryData(["agent-config", agentId], merged as unknown as AgentConfigResponse);
+				queryClient.setQueryData(
+					["agent-config", agentId],
+					merged as unknown as AgentConfigResponse,
+				);
 			}
 		},
 		onSuccess: (result) => {
-			// Merge server response with cache to preserve fields the backend
-			// doesn't yet return (e.g. sandbox).
-			const previous = queryClient.getQueryData<AgentConfigResponse>(["agent-config", agentId]);
-			queryClient.setQueryData(["agent-config", agentId], { ...previous, ...result });
+			const previous = queryClient.getQueryData<AgentConfigResponse>([
+				"agent-config",
+				agentId,
+			]);
+			queryClient.setQueryData(["agent-config", agentId], {
+				...previous,
+				...result,
+			});
 			setDirty(false);
 			setSaving(false);
 		},
@@ -167,8 +154,10 @@ export function AgentConfig({ agentId }: AgentConfigProps) {
 		saveHandlerRef.current.revert?.();
 	}, []);
 
-	const isLoading = agentsQuery.isLoading || identityQuery.isLoading || configQuery.isLoading;
-	const isError = agentsQuery.isError || identityQuery.isError || configQuery.isError;
+	const isLoading =
+		agentsQuery.isLoading || identityQuery.isLoading || configQuery.isLoading;
+	const isError =
+		agentsQuery.isError || identityQuery.isError || configQuery.isError;
 
 	if (isLoading) {
 		return (
@@ -192,102 +181,49 @@ export function AgentConfig({ agentId }: AgentConfigProps) {
 	const active = SECTIONS.find((s) => s.id === activeSection)!;
 	const isGeneralSection = active.group === "general";
 	const isIdentitySection = active.group === "identity";
+	const isIngestSection = active.id === "ingest";
 	const currentAgent = agentsQuery.data?.agents.find((a) => a.id === agentId);
+	const identityData = identityQuery.data ?? {soul: null, identity: null, role: null};
 
 	return (
 		<div className="flex h-full relative">
-			{/* Sidebar */}
-			<div className="flex w-52 flex-shrink-0 flex-col border-r border-app-line/50 bg-app-darkBox/20 overflow-y-auto">
-			{/* General Group */}
-			<div className="flex flex-col gap-0.5 px-2 pt-3">
-				{SECTIONS.filter((s) => s.group === "general").map((section) => {
-					const isActive = activeSection === section.id;
-					return (
-						<SettingSidebarButton
-							key={section.id}
-							onClick={() => handleSectionChange(section.id)}
-							active={isActive}
-						>
-							<span className="flex-1">{section.label}</span>
-						</SettingSidebarButton>
-					);
-				})}
-			</div>
-
-			{/* Identity Group */}
-			<div className="px-3 pb-1 pt-4">
-				<span className="text-tiny font-medium uppercase tracking-wider text-ink-faint">Identity</span>
-			</div>
-					<div className="flex flex-col gap-0.5 px-2">
-					{SECTIONS.filter((s) => s.group === "identity").map((section) => {
-						const isActive = activeSection === section.id;
-						const hasContent = !!getIdentityField(identityQuery.data ?? { soul: null, identity: null, role: null }, section.id)?.trim();
-						return (
-							<SettingSidebarButton
-								key={section.id}
-								onClick={() => handleSectionChange(section.id)}
-								active={isActive}
-							>
-								<span className="flex-1">{section.label}</span>
-								{!hasContent && (
-									<span className="rounded bg-amber-500/10 px-1 py-0.5 text-tiny text-amber-400/70">empty</span>
-								)}
-							</SettingSidebarButton>
-						);
-					})}
-				</div>
-
-				{/* Config Group */}
-				<div className="px-3 pb-1 pt-4 mt-2">
-					<span className="text-tiny font-medium uppercase tracking-wider text-ink-faint">Configuration</span>
-				</div>
-					<div className="flex flex-col gap-0.5 px-2">
-					{SECTIONS.filter((s) => s.group === "config").map((section) => {
-						const isActive = activeSection === section.id;
-						return (
-							<SettingSidebarButton
-								key={section.id}
-								onClick={() => handleSectionChange(section.id)}
-								active={isActive}
-							>
-								<span className="flex-1">{section.label}</span>
-							</SettingSidebarButton>
-						);
-					})}
-				</div>
-			</div>
+			<ConfigSidebar
+				activeSection={activeSection}
+				onSectionChange={handleSectionChange}
+				identityData={identityData}
+			/>
 
-			{/* Editor */}
 			<div className="flex flex-1 flex-col overflow-hidden">
-			{isGeneralSection ? (
-			<GeneralEditor
-				key={active.id}
-				agentId={agentId}
-				displayName={currentAgent?.display_name ?? ""}
-				role={currentAgent?.role ?? ""}
-				gradientStart={currentAgent?.gradient_start ?? ""}
-				gradientEnd={currentAgent?.gradient_end ?? ""}
-				detail={active.detail}
-				onDirtyChange={setDirty}
-				saveHandlerRef={saveHandlerRef}
-				onSave={(update) => agentMutation.mutate(update)}
-			/>
-			) : isIdentitySection ? (
-			<IdentityEditor
-				key={active.id}
-				label={active.label}
-				description={active.description}
-				content={getIdentityField(identityQuery.data ?? { soul: null, identity: null, role: null }, active.id)}
-				onDirtyChange={setDirty}
-				saveHandlerRef={saveHandlerRef}
-				onSave={(content) => {
-					// Only mutate for identity sections
-					if (isIdentityField(active.id)) {
-						identityMutation.mutate({ field: active.id, content });
-					}
-				}}
-			/>
-			) : (
+				{isIngestSection ? (
+					<AgentIngest agentId={agentId} />
+				) : isGeneralSection ? (
+					<GeneralEditor
+						key={active.id}
+						agentId={agentId}
+						displayName={currentAgent?.display_name ?? ""}
+						role={currentAgent?.role ?? ""}
+						gradientStart={currentAgent?.gradient_start ?? ""}
+						gradientEnd={currentAgent?.gradient_end ?? ""}
+						detail={active.detail}
+						onDirtyChange={setDirty}
+						saveHandlerRef={saveHandlerRef}
+						onSave={(update) => agentMutation.mutate(update)}
+					/>
+				) : isIdentitySection ? (
+					<IdentityEditor
+						key={active.id}
+						label={active.label}
+						description={active.description}
+						content={getIdentityField(identityData, active.id)}
+						onDirtyChange={setDirty}
+						saveHandlerRef={saveHandlerRef}
+						onSave={(content) => {
+							if (isIdentityField(active.id)) {
+								identityMutation.mutate({field: active.id, content});
+							}
+						}}
+					/>
+				) : (
 					<ConfigSectionEditor
 						sectionId={active.id}
 						label={active.label}
@@ -296,1011 +232,21 @@ export function AgentConfig({ agentId }: AgentConfigProps) {
 						config={configQuery.data!}
 						onDirtyChange={setDirty}
 						saveHandlerRef={saveHandlerRef}
-						onSave={(update) => configMutation.mutate({ agent_id: agentId, ...update })}
-					/>
-				)}
-			</div>
-
-			{/* Fixed bottom save bar */}
-			<AnimatePresence>
-				{dirty && (
-					<motion.div
-						initial={{ y: 100 }}
-						animate={{ y: 0 }}
-						exit={{ y: 100 }}
-						transition={{ type: "spring", damping: 25, stiffness: 300 }}
-						className="absolute bottom-4 right-4 flex items-center gap-4 rounded-lg border border-app-line/50 bg-app-darkBox px-4 py-3 shadow-lg"
-					>
-						<span className="text-sm text-ink-dull">You have unsaved changes</span>
-						<div className="flex items-center gap-2">
-							<Button
-								onClick={handleRevert}
-								variant="ghost"
-								size="sm"
-							>
-								Revert
-							</Button>
-							<Button
-								onClick={handleSave}
-								size="sm"
-								loading={saving}
-							>
-								Save Changes
-							</Button>
-						</div>
-					</motion.div>
-				)}
-			</AnimatePresence>
-		</div>
-	);
-}
-
-// -- General Editor --
-
-interface GeneralEditorProps {
-	agentId: string;
-	displayName: string;
-	role: string;
-	gradientStart: string;
-	gradientEnd: string;
-	detail: string;
-	onDirtyChange: (dirty: boolean) => void;
-	saveHandlerRef: React.MutableRefObject<{ save?: () => void; revert?: () => void }>;
-	onSave: (update: { display_name?: string; role?: string; gradient_start?: string; gradient_end?: string }) => void;
-}
-
-const GRADIENT_PRESETS: { label: string; start: string; end: string }[] = [
-	{ label: "Purple", start: "hsl(270, 70%, 55%)", end: "hsl(310, 60%, 45%)" },
-	{ label: "Blue", start: "hsl(220, 70%, 55%)", end: "hsl(260, 60%, 45%)" },
-	{ label: "Teal", start: "hsl(170, 70%, 45%)", end: "hsl(200, 60%, 40%)" },
-	{ label: "Green", start: "hsl(140, 60%, 45%)", end: "hsl(170, 50%, 40%)" },
-	{ label: "Orange", start: "hsl(25, 80%, 55%)", end: "hsl(45, 70%, 45%)" },
-	{ label: "Red", start: "hsl(0, 70%, 55%)", end: "hsl(20, 60%, 45%)" },
-	{ label: "Pink", start: "hsl(330, 70%, 55%)", end: "hsl(350, 60%, 45%)" },
-	{ label: "Gold", start: "hsl(45, 80%, 55%)", end: "hsl(30, 70%, 40%)" },
-	{ label: "Indigo", start: "hsl(240, 60%, 55%)", end: "hsl(280, 50%, 45%)" },
-	{ label: "Slate", start: "hsl(220, 15%, 50%)", end: "hsl(220, 10%, 35%)" },
-];
-
-function GeneralEditor({ agentId, displayName, role, gradientStart, gradientEnd, detail, onDirtyChange, saveHandlerRef, onSave }: GeneralEditorProps) {
-	const queryClient = useQueryClient();
-	const [localDisplayName, setLocalDisplayName] = useState(displayName);
-	const [localRole, setLocalRole] = useState(role);
-	const [localGradientStart, setLocalGradientStart] = useState(gradientStart);
-	const [localGradientEnd, setLocalGradientEnd] = useState(gradientEnd);
-	const [localDirty, setLocalDirty] = useState(false);
-	const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
-	const fileInputRef = useRef<HTMLInputElement>(null);
-
-	// Check if agent has an uploaded avatar
-	const avatarUrl = api.agentAvatarUrl(agentId);
-	const { data: avatarExists } = useQuery({
-		queryKey: ["agentAvatar", agentId],
-		queryFn: async () => {
-			try {
-				const response = await fetch(avatarUrl, { method: "HEAD" });
-				return response.ok;
-			} catch {
-				return false;
-			}
-		},
-	});
-
-	const uploadAvatarMutation = useMutation({
-		mutationFn: (file: File) => api.uploadAvatar(agentId, file),
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["agentAvatar", agentId] });
-			queryClient.invalidateQueries({ queryKey: ["agents"] });
-			queryClient.invalidateQueries({ queryKey: ["topology"] });
-			setAvatarPreview(null);
-		},
-	});
-
-	const deleteAvatarMutation = useMutation({
-		mutationFn: () => api.deleteAvatar(agentId),
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["agentAvatar", agentId] });
-			queryClient.invalidateQueries({ queryKey: ["agents"] });
-			queryClient.invalidateQueries({ queryKey: ["topology"] });
-			setAvatarPreview(null);
-		},
-	});
-
-	useEffect(() => {
-		if (!localDirty) {
-			setLocalDisplayName(displayName);
-			setLocalRole(role);
-			setLocalGradientStart(gradientStart);
-			setLocalGradientEnd(gradientEnd);
-		}
-	}, [displayName, role, gradientStart, gradientEnd, localDirty]);
-
-	useEffect(() => {
-		onDirtyChange(localDirty);
-	}, [localDirty, onDirtyChange]);
-
-	const handleSave = useCallback(() => {
-		onSave({
-			display_name: localDisplayName,
-			role: localRole,
-			gradient_start: localGradientStart || undefined,
-			gradient_end: localGradientEnd || undefined,
-		});
-		setLocalDirty(false);
-	}, [onSave, localDisplayName, localRole, localGradientStart, localGradientEnd]);
-
-	const handleRevert = useCallback(() => {
-		setLocalDisplayName(displayName);
-		setLocalRole(role);
-		setLocalGradientStart(gradientStart);
-		setLocalGradientEnd(gradientEnd);
-		setLocalDirty(false);
-	}, [displayName, role, gradientStart, gradientEnd]);
-
-	useEffect(() => {
-		saveHandlerRef.current.save = handleSave;
-		saveHandlerRef.current.revert = handleRevert;
-		return () => {
-			saveHandlerRef.current.save = undefined;
-			saveHandlerRef.current.revert = undefined;
-		};
-	}, [handleSave, handleRevert]);
-
-	const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-		const file = event.target.files?.[0];
-		if (!file) return;
-		// Show preview immediately
-		const reader = new FileReader();
-		reader.onload = () => setAvatarPreview(reader.result as string);
-		reader.readAsDataURL(file);
-		// Upload
-		uploadAvatarMutation.mutate(file);
-	};
-
-	const [seedC1, seedC2] = seedGradient(agentId);
-	const previewC1 = localGradientStart || seedC1;
-	const previewC2 = localGradientEnd || seedC2;
-
-	return (
-		<>
-			<div className="flex items-center justify-between border-b border-app-line/50 bg-app-darkBox/20 px-5 py-2.5">
-				<div className="flex items-center gap-3">
-					<h3 className="text-sm font-medium text-ink">General</h3>
-					<span className="text-tiny text-ink-faint">Agent metadata</span>
-				</div>
-				{localDirty ? (
-					<span className="text-tiny text-amber-400">Unsaved changes</span>
-				) : (
-					<span className="text-tiny text-ink-faint/50">Changes saved to config.toml</span>
-				)}
-			</div>
-			<div className="flex-1 overflow-y-auto px-8 py-8">
-				<div className="mb-6 rounded-lg border border-app-line/30 bg-app-darkBox/20 px-5 py-4">
-					<p className="text-sm leading-relaxed text-ink-dull">{detail}</p>
-				</div>
-				<div className="grid gap-4">
-					<div className="flex flex-col gap-1.5">
-						<label className="text-sm font-medium text-ink">Agent ID</label>
-						<p className="text-tiny text-ink-faint">The config key identifier. This cannot be changed.</p>
-						<Input
-							value={agentId}
-							disabled
-							className="border-app-line/50 bg-app-darkBox/30 text-ink-faint"
-						/>
-					</div>
-					<div className="flex flex-col gap-1.5">
-						<label className="text-sm font-medium text-ink">Display Name</label>
-						<p className="text-tiny text-ink-faint">Human-friendly name shown in the UI and messaging platforms.</p>
-						<Input
-							value={localDisplayName}
-							onChange={(e) => { setLocalDisplayName(e.target.value); setLocalDirty(true); }}
-							placeholder={agentId}
-						/>
-					</div>
-					<div className="flex flex-col gap-1.5">
-						<label className="text-sm font-medium text-ink">Role</label>
-						<p className="text-tiny text-ink-faint">Describes the agent's purpose. Shown in the topology view and agent listings.</p>
-						<Input
-							value={localRole}
-							onChange={(e) => { setLocalRole(e.target.value); setLocalDirty(true); }}
-							placeholder="e.g. Research Assistant, Code Reviewer"
-						/>
-					</div>
-
-					{/* Avatar */}
-					<div className="flex flex-col gap-1.5">
-						<label className="text-sm font-medium text-ink">Avatar</label>
-						<p className="text-tiny text-ink-faint">Upload a custom image, or use the generated gradient avatar.</p>
-						<div className="flex items-center gap-4">
-							<ProfileAvatar
-								seed={agentId}
-								name={localDisplayName || agentId}
-								size={64}
-								className="rounded-full shrink-0"
-								gradientStart={localGradientStart || undefined}
-								gradientEnd={localGradientEnd || undefined}
-								avatarUrl={avatarPreview ?? (avatarExists ? `${avatarUrl}&t=${Date.now()}` : undefined)}
-							/>
-							<div className="flex flex-col gap-2">
-								<div className="flex items-center gap-2">
-									<Button
-										variant="outline"
-										size="sm"
-										onClick={() => fileInputRef.current?.click()}
-									>
-										{avatarExists ? "Change Image" : "Upload Image"}
-									</Button>
-									{avatarExists && (
-										<Button
-											variant="ghost"
-											size="sm"
-											onClick={() => deleteAvatarMutation.mutate()}
-											className="text-ink-faint hover:text-red-400"
-										>
-											Remove
-										</Button>
-									)}
-								</div>
-								<p className="text-tiny text-ink-faint/60">PNG, JPEG, WebP, GIF, or SVG. Max 5 MB.</p>
-							</div>
-							<input
-								ref={fileInputRef}
-								type="file"
-								accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml"
-								onChange={handleFileChange}
-								className="hidden"
-							/>
-						</div>
-					</div>
-
-					{/* Gradient Color */}
-					<div className="flex flex-col gap-1.5">
-						<label className="text-sm font-medium text-ink">Gradient</label>
-						<p className="text-tiny text-ink-faint">Choose a gradient for the avatar and banner. Only used when no image is uploaded.</p>
-						<div className="flex flex-wrap gap-2">
-							{/* Auto (seed-based) option */}
-							<button
-								onClick={() => { setLocalGradientStart(""); setLocalGradientEnd(""); setLocalDirty(true); }}
-								className={cx(
-									"flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors",
-									!localGradientStart
-										? "border-accent bg-accent/10 text-ink"
-										: "border-app-line/50 text-ink-faint hover:border-app-line"
-								)}
-							>
-								<span
-									className="h-5 w-5 rounded-full shrink-0"
-									style={{ background: `linear-gradient(135deg, ${seedC1}, ${seedC2})` }}
-								/>
-								Auto
-							</button>
-							{GRADIENT_PRESETS.map((preset) => (
-								<button
-									key={preset.label}
-									onClick={() => { setLocalGradientStart(preset.start); setLocalGradientEnd(preset.end); setLocalDirty(true); }}
-									className={cx(
-										"flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors",
-										localGradientStart === preset.start && localGradientEnd === preset.end
-											? "border-accent bg-accent/10 text-ink"
-											: "border-app-line/50 text-ink-faint hover:border-app-line"
-									)}
-								>
-									<span
-										className="h-5 w-5 rounded-full shrink-0"
-										style={{ background: `linear-gradient(135deg, ${preset.start}, ${preset.end})` }}
-									/>
-									{preset.label}
-								</button>
-							))}
-						</div>
-						{/* Live preview */}
-						<div className="mt-2 flex items-center gap-3">
-							<span className="text-tiny text-ink-faint">Preview:</span>
-							<span
-								className="h-6 w-20 rounded"
-								style={{ background: `linear-gradient(135deg, ${previewC1}, ${previewC2})` }}
-							/>
-						</div>
-					</div>
-				</div>
-			</div>
-		</>
-	);
-}
-
-// -- Identity Editor --
-
-interface IdentityEditorProps {
-	label: string;
-	description: string;
-	content: string | null;
-	onDirtyChange: (dirty: boolean) => void;
-	saveHandlerRef: React.MutableRefObject<{ save?: () => void; revert?: () => void }>;
-	onSave: (value: string) => void;
-}
-
-function IdentityEditor({ label, description, content, onDirtyChange, saveHandlerRef, onSave }: IdentityEditorProps) {
-	const [value, setValue] = useState(content ?? "");
-	const [localDirty, setLocalDirty] = useState(false);
-	const [mode, setMode] = useState<"edit" | "preview">("edit");
-
-	useEffect(() => {
-		if (!localDirty) {
-			setValue(content ?? "");
-		}
-	}, [content, localDirty]);
-
-	useEffect(() => {
-		onDirtyChange(localDirty);
-	}, [localDirty, onDirtyChange]);
-
-	const handleChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
-		setValue(event.target.value);
-		setLocalDirty(true);
-	}, []);
-
-	const handleSave = useCallback(() => {
-		onSave(value);
-		setLocalDirty(false);
-	}, [onSave, value]);
-
-	const handleRevert = useCallback(() => {
-		setValue(content ?? "");
-		setLocalDirty(false);
-	}, [content]);
-
-	const handleKeyDown = useCallback(
-		(event: React.KeyboardEvent) => {
-			if ((event.metaKey || event.ctrlKey) && event.key === "s") {
-				event.preventDefault();
-				if (localDirty) handleSave();
-			}
-		},
-		[localDirty, handleSave],
-	);
-
-	// Register save/revert handlers
-	useEffect(() => {
-		saveHandlerRef.current.save = handleSave;
-		saveHandlerRef.current.revert = handleRevert;
-		return () => {
-			saveHandlerRef.current.save = undefined;
-			saveHandlerRef.current.revert = undefined;
-		};
-	}, [handleSave, handleRevert]);
-
-	return (
-		<>
-			<div className="flex items-center justify-between border-b border-app-line/50 bg-app-darkBox/20 px-5 py-2.5">
-				<div className="flex items-center gap-3">
-					<h3 className="text-sm font-medium text-ink">{label}</h3>
-					<span className="rounded bg-app-darkBox px-1.5 py-0.5 font-mono text-tiny text-ink-faint">{description}</span>
-				</div>
-				<div className="flex items-center gap-3">
-					<div className="flex items-center rounded border border-app-line/50 text-tiny">
-						<button
-							onClick={() => setMode("edit")}
-							className={cx("px-2 py-0.5 rounded-l transition-colors", mode === "edit" ? "bg-app-darkBox text-ink" : "text-ink-faint hover:text-ink")}
-						>
-							Edit
-						</button>
-						<button
-							onClick={() => setMode("preview")}
-							className={cx("px-2 py-0.5 rounded-r transition-colors", mode === "preview" ? "bg-app-darkBox text-ink" : "text-ink-faint hover:text-ink")}
-						>
-							Preview
-						</button>
-					</div>
-					{localDirty ? (
-						<span className="text-tiny text-amber-400">Unsaved changes</span>
-					) : (
-						<span className="text-tiny text-ink-faint/50">Cmd+S to save</span>
-					)}
-				</div>
-			</div>
-			<div className="flex-1 overflow-y-auto p-4">
-				{mode === "edit" ? (
-					<TextArea
-						value={value}
-						onChange={handleChange}
-						onKeyDown={handleKeyDown}
-						placeholder={`Write ${label.toLowerCase()} content here...`}
-						className="h-full w-full resize-none border-transparent bg-app-darkBox/30 px-4 py-3 font-mono leading-relaxed placeholder:text-ink-faint/40"
-						spellCheck={false}
+						onSave={(update) =>
+							configMutation.mutate({agent_id: agentId, ...update})
+						}
 					/>
-				) : (
-					<div className="prose-sm px-4 py-3">
-						{value ? (
-							<Markdown>{value}</Markdown>
-						) : (
-							<span className="text-ink-faint/40 text-sm">Nothing to preview.</span>
-						)}
-					</div>
-				)}
-			</div>
-		</>
-	);
-}
-
-// -- Config Section Editors --
-
-interface ConfigSectionEditorProps {
-	sectionId: SectionId;
-	label: string;
-	description: string;
-	detail: string;
-	config: AgentConfigResponse;
-	onDirtyChange: (dirty: boolean) => void;
-	saveHandlerRef: React.MutableRefObject<{ save?: () => void; revert?: () => void }>;
-	onSave: (update: Partial<AgentConfigUpdateRequest>) => void;
-}
-
-const SANDBOX_DEFAULTS = { mode: "enabled" as const, writable_paths: [] as string[] };
-
-function ConfigSectionEditor({ sectionId, label, description, detail, config, onDirtyChange, saveHandlerRef, onSave }: ConfigSectionEditorProps) {
-	type ConfigValues = Record<string, string | number | boolean | string[]>;
-	const sandbox = config.sandbox ?? SANDBOX_DEFAULTS;
-	const [localValues, setLocalValues] = useState<ConfigValues>(() => {
-		// Initialize from config based on section
-		switch (sectionId) {
-			case "routing":
-				return { ...config.routing } as ConfigValues;
-			case "tuning":
-				return { ...config.tuning } as ConfigValues;
-			case "compaction":
-				return { ...config.compaction } as ConfigValues;
-			case "cortex":
-				return { ...config.cortex } as ConfigValues;
-			case "coalesce":
-				return { ...config.coalesce } as ConfigValues;
-			case "memory":
-				return { ...config.memory_persistence } as ConfigValues;
-			case "browser":
-				return { ...config.browser } as ConfigValues;
-case "sandbox":
-				return { mode: sandbox.mode, writable_paths: sandbox.writable_paths } as ConfigValues;
-			case "projects":
-				return { ...config.projects } as ConfigValues;
-			default:
-				return {};
-		}
-	});
-
-	const [localDirty, setLocalDirty] = useState(false);
-
-	useEffect(() => {
-		onDirtyChange(localDirty);
-	}, [localDirty, onDirtyChange]);
-
-	// Reset local values when config changes externally
-	useEffect(() => {
-		if (!localDirty) {
-			switch (sectionId) {
-				case "routing":
-					setLocalValues({ ...config.routing });
-					break;
-				case "tuning":
-					setLocalValues({ ...config.tuning });
-					break;
-				case "compaction":
-					setLocalValues({ ...config.compaction });
-					break;
-				case "cortex":
-					setLocalValues({ ...config.cortex });
-					break;
-				case "coalesce":
-					setLocalValues({ ...config.coalesce });
-					break;
-				case "memory":
-					setLocalValues({ ...config.memory_persistence });
-					break;
-				case "browser":
-					setLocalValues({ ...config.browser });
-					break;
-				case "sandbox":
-					setLocalValues({ mode: sandbox.mode, writable_paths: sandbox.writable_paths });
-					break;
-				case "projects":
-					setLocalValues({ ...config.projects });
-					break;
-			}
-		}
-	}, [config, sectionId, localDirty]);
-
-	const handleChange = useCallback((field: string, value: string | number | boolean | string[]) => {
-		setLocalValues((prev) => ({ ...prev, [field]: value }));
-		setLocalDirty(true);
-	}, []);
-
-	const handleSave = useCallback(() => {
-		onSave({ [sectionId]: localValues });
-		setLocalDirty(false);
-	}, [onSave, sectionId, localValues]);
-
-	const handleRevert = useCallback(() => {
-		switch (sectionId) {
-			case "routing":
-				setLocalValues({ ...config.routing });
-				break;
-			case "tuning":
-				setLocalValues({ ...config.tuning });
-				break;
-			case "compaction":
-				setLocalValues({ ...config.compaction });
-				break;
-			case "cortex":
-				setLocalValues({ ...config.cortex });
-				break;
-			case "coalesce":
-				setLocalValues({ ...config.coalesce });
-				break;
-			case "memory":
-				setLocalValues({ ...config.memory_persistence });
-				break;
-			case "browser":
-				setLocalValues({ ...config.browser });
-				break;
-			case "sandbox":
-				setLocalValues({ mode: sandbox.mode, writable_paths: sandbox.writable_paths });
-				break;
-			case "projects":
-				setLocalValues({ ...config.projects });
-				break;
-		}
-		setLocalDirty(false);
-	}, [config, sectionId]);
-
-	// Register save/revert handlers
-	useEffect(() => {
-		saveHandlerRef.current.save = handleSave;
-		saveHandlerRef.current.revert = handleRevert;
-		return () => {
-			saveHandlerRef.current.save = undefined;
-			saveHandlerRef.current.revert = undefined;
-		};
-	}, [handleSave, handleRevert]);
-
-	const renderFields = () => {
-		switch (sectionId) {
-			case "routing": {
-				const modelSlots = [
-					{ key: "channel", label: "Channel Model", description: "Model for user-facing channels" },
-					{ key: "branch", label: "Branch Model", description: "Model for thinking branches" },
-					{ key: "worker", label: "Worker Model", description: "Model for task workers" },
-					{ key: "compactor", label: "Compactor Model", description: "Model for summarization" },
-					{ key: "cortex", label: "Cortex Model", description: "Model for system observation" },
-					{ key: "voice", label: "Voice Model", description: "Model for transcribing audio attachments" },
-				];
-				return (
-					<div className="grid gap-4">
-						{modelSlots.map(({ key, label, description }) => (
-							<div key={key} className="flex flex-col gap-2">
-								<ModelSelect
-									label={label}
-									description={description}
-									value={localValues[key] as string}
-									onChange={(v) => handleChange(key, v)}
-									capability={key === "voice" ? "voice_transcription" : undefined}
-								/>
-								{supportsAdaptiveThinking(localValues[key] as string) && (
-									<div className="ml-4 flex flex-col gap-1">
-										<label className="text-xs font-medium text-ink-dull">Thinking Effort</label>
-										<Select
-											value={(localValues[`${key}_thinking_effort`] as string) || "auto"}
-											onValueChange={(value) => handleChange(`${key}_thinking_effort`, value)}
-										>
-											<SelectTrigger className="border-app-line/50 bg-app-darkBox/30">
-												<SelectValue />
-											</SelectTrigger>
-											<SelectContent>
-												<SelectItem value="auto">Auto</SelectItem>
-												<SelectItem value="max">Max</SelectItem>
-												<SelectItem value="high">High</SelectItem>
-												<SelectItem value="medium">Medium</SelectItem>
-												<SelectItem value="low">Low</SelectItem>
-											</SelectContent>
-										</Select>
-									</div>
-								)}
-							</div>
-						))}
-						<NumberStepper
-							label="Rate Limit Cooldown"
-							description="Seconds to deprioritize rate-limited models"
-							value={localValues.rate_limit_cooldown_secs as number}
-							onChange={(v) => handleChange("rate_limit_cooldown_secs", v)}
-							min={0}
-							suffix="s"
-						/>
-					</div>
-				);
-			}
-			case "tuning":
-				return (
-					<div className="grid gap-4">
-						<NumberStepper
-							label="Max Concurrent Branches"
-							description="Maximum branches per channel"
-							value={localValues.max_concurrent_branches as number}
-							onChange={(v) => handleChange("max_concurrent_branches", v)}
-							min={1}
-							max={20}
-						/>
-						<NumberStepper
-							label="Max Concurrent Workers"
-							description="Maximum workers per channel"
-							value={localValues.max_concurrent_workers as number}
-							onChange={(v) => handleChange("max_concurrent_workers", v)}
-							min={1}
-							max={20}
-						/>
-						<NumberStepper
-							label="Max Turns"
-							description="Max LLM turns per channel message"
-							value={localValues.max_turns as number}
-							onChange={(v) => handleChange("max_turns", v)}
-							min={1}
-							max={50}
-						/>
-						<NumberStepper
-							label="Branch Max Turns"
-							description="Max turns for thinking branches"
-							value={localValues.branch_max_turns as number}
-							onChange={(v) => handleChange("branch_max_turns", v)}
-							min={1}
-							max={100}
-						/>
-						<NumberStepper
-							label="Context Window"
-							description="Context window size in tokens"
-							value={localValues.context_window as number}
-							onChange={(v) => handleChange("context_window", v)}
-							min={1000}
-							step={1000}
-							suffix=" tokens"
-						/>
-						<NumberStepper
-							label="History Backfill"
-							description="Messages to fetch on new channel"
-							value={localValues.history_backfill_count as number}
-							onChange={(v) => handleChange("history_backfill_count", v)}
-							min={0}
-							max={500}
-							suffix=" messages"
-						/>
-					</div>
-				);
-			case "compaction":
-				return (
-					<div className="grid gap-4">
-						<NumberStepper
-							label="Background Threshold"
-							description="Start background summarization (fraction of context window)"
-							value={localValues.background_threshold as number}
-							onChange={(v) => handleChange("background_threshold", v)}
-							min={0}
-							max={1}
-							step={0.01}
-							type="float"
-							showProgress
-						/>
-						<NumberStepper
-							label="Aggressive Threshold"
-							description="Start aggressive summarization"
-							value={localValues.aggressive_threshold as number}
-							onChange={(v) => handleChange("aggressive_threshold", v)}
-							min={0}
-							max={1}
-							step={0.01}
-							type="float"
-							showProgress
-						/>
-						<NumberStepper
-							label="Emergency Threshold"
-							description="Emergency truncation (no LLM, drop oldest 50%)"
-							value={localValues.emergency_threshold as number}
-							onChange={(v) => handleChange("emergency_threshold", v)}
-							min={0}
-							max={1}
-							step={0.01}
-							type="float"
-							showProgress
-						/>
-					</div>
-				);
-			case "cortex":
-				return (
-					<div className="grid gap-4">
-						<NumberStepper
-							label="Tick Interval"
-							description="How often the cortex checks system state"
-							value={localValues.tick_interval_secs as number}
-							onChange={(v) => handleChange("tick_interval_secs", v)}
-							min={1}
-							suffix="s"
-						/>
-						<NumberStepper
-							label="Worker Timeout"
-							description="Worker timeout before cancellation"
-							value={localValues.worker_timeout_secs as number}
-							onChange={(v) => handleChange("worker_timeout_secs", v)}
-							min={10}
-							suffix="s"
-						/>
-						<NumberStepper
-							label="Branch Timeout"
-							description="Branch timeout before cancellation"
-							value={localValues.branch_timeout_secs as number}
-							onChange={(v) => handleChange("branch_timeout_secs", v)}
-							min={5}
-							suffix="s"
-						/>
-						<NumberStepper
-							label="Circuit Breaker"
-							description="Consecutive failures before auto-disable"
-							value={localValues.circuit_breaker_threshold as number}
-							onChange={(v) => handleChange("circuit_breaker_threshold", v)}
-							min={1}
-							max={10}
-						/>
-						<NumberStepper
-							label="Bulletin Interval"
-							description="Seconds between memory bulletin refreshes"
-							value={localValues.bulletin_interval_secs as number}
-							onChange={(v) => handleChange("bulletin_interval_secs", v)}
-							min={60}
-							suffix="s"
-						/>
-						<NumberStepper
-							label="Bulletin Max Words"
-							description="Target word count for memory bulletin"
-							value={localValues.bulletin_max_words as number}
-							onChange={(v) => handleChange("bulletin_max_words", v)}
-							min={100}
-							max={5000}
-							suffix=" words"
-						/>
-						<NumberStepper
-							label="Bulletin Max Turns"
-							description="Max LLM turns for bulletin generation"
-							value={localValues.bulletin_max_turns as number}
-							onChange={(v) => handleChange("bulletin_max_turns", v)}
-							min={5}
-							max={50}
-						/>
-					</div>
-				);
-			case "coalesce":
-				return (
-					<div className="grid gap-4">
-						<ConfigToggleField
-							label="Enabled"
-							description="Enable message coalescing for multi-user channels"
-							value={localValues.enabled as boolean}
-							onChange={(v) => handleChange("enabled", v)}
-						/>
-						<NumberStepper
-							label="Debounce"
-							description="Initial debounce window after first message"
-							value={localValues.debounce_ms as number}
-							onChange={(v) => handleChange("debounce_ms", v)}
-							min={100}
-							max={10000}
-							suffix="ms"
-						/>
-						<NumberStepper
-							label="Max Wait"
-							description="Maximum time to wait before flushing"
-							value={localValues.max_wait_ms as number}
-							onChange={(v) => handleChange("max_wait_ms", v)}
-							min={500}
-							max={30000}
-							suffix="ms"
-						/>
-						<NumberStepper
-							label="Min Messages"
-							description="Min messages to trigger coalesce mode"
-							value={localValues.min_messages as number}
-							onChange={(v) => handleChange("min_messages", v)}
-							min={1}
-							max={10}
-						/>
-						<ConfigToggleField
-							label="Multi-User Only"
-							description="Apply only to multi-user conversations (skip for DMs)"
-							value={localValues.multi_user_only as boolean}
-							onChange={(v) => handleChange("multi_user_only", v)}
-						/>
-					</div>
-				);
-			case "memory":
-				return (
-					<div className="grid gap-4">
-						<ConfigToggleField
-							label="Enabled"
-							description="Enable automatic memory persistence branches"
-							value={localValues.enabled as boolean}
-							onChange={(v) => handleChange("enabled", v)}
-						/>
-						<NumberStepper
-							label="Message Interval"
-							description="Number of user messages between automatic saves"
-							value={localValues.message_interval as number}
-							onChange={(v) => handleChange("message_interval", v)}
-							min={1}
-							max={200}
-							suffix=" messages"
-						/>
-					</div>
-				);
-			case "browser":
-				return (
-					<div className="grid gap-4">
-						<ConfigToggleField
-							label="Enabled"
-							description="Enable browser automation tools for workers"
-							value={localValues.enabled as boolean}
-							onChange={(v) => handleChange("enabled", v)}
-						/>
-						<ConfigToggleField
-							label="Headless"
-							description="Run Chrome in headless mode"
-							value={localValues.headless as boolean}
-							onChange={(v) => handleChange("headless", v)}
-						/>
-						<ConfigToggleField
-							label="JavaScript Evaluation"
-							description="Allow JavaScript evaluation via browser tool"
-							value={localValues.evaluate_enabled as boolean}
-							onChange={(v) => handleChange("evaluate_enabled", v)}
-						/>
-						<ConfigToggleField
-							label="Persist Session"
-							description="Keep the browser alive across worker lifetimes. Cookies, tabs, and login sessions survive between tasks. Requires agent restart to take effect."
-							value={localValues.persist_session as boolean}
-							onChange={(v) => handleChange("persist_session", v)}
-						/>
-						<div className="flex flex-col gap-1.5">
-							<label className="text-sm font-medium text-ink">Close Policy</label>
-							<p className="text-tiny text-ink-faint">What happens when a worker calls &quot;close&quot; or finishes.</p>
-							<Select
-								value={localValues.close_policy as string}
-								onValueChange={(v) => handleChange("close_policy", v)}
-							>
-								<SelectTrigger className="border-app-line/50 bg-app-darkBox/30">
-									<SelectValue />
-								</SelectTrigger>
-								<SelectContent>
-									<SelectItem value="close_browser">Close Browser</SelectItem>
-									<SelectItem value="close_tabs">Close Tabs</SelectItem>
-									<SelectItem value="detach">Detach</SelectItem>
-								</SelectContent>
-							</Select>
-						</div>
-					</div>
-				);
-			case "sandbox":
-				return (
-					<div className="grid gap-4">
-						<div className="flex flex-col gap-1.5">
-							<label className="text-sm font-medium text-ink">Mode</label>
-							<p className="text-tiny text-ink-faint">Kernel-enforced filesystem containment for shell subprocesses.</p>
-							<Select
-								value={localValues.mode as string}
-								onValueChange={(v) => handleChange("mode", v)}
-							>
-								<SelectTrigger className="border-app-line/50 bg-app-darkBox/30">
-									<SelectValue />
-								</SelectTrigger>
-								<SelectContent>
-									<SelectItem value="enabled">Enabled</SelectItem>
-									<SelectItem value="disabled">Disabled</SelectItem>
-								</SelectContent>
-							</Select>
-						</div>
-						<div className="flex flex-col gap-1.5">
-						<label className="text-sm font-medium text-ink">Extra Allowed Paths</label>
-						<p className="text-tiny text-ink-faint">Additional directories workers can read and write beyond the workspace. The workspace is always accessible. Press Enter to add a path.</p>
-							<TagInput
-								value={(localValues.writable_paths as string[]) ?? []}
-								onChange={(paths) => handleChange("writable_paths", paths)}
-								placeholder="/home/user/projects/myapp"
-							/>
-						</div>
-					</div>
-				);
-			case "projects":
-				return (
-					<div className="grid gap-4">
-						<ConfigToggleField
-							label="Use Worktrees"
-							description="Enable git worktree support for parallel feature branches within projects."
-							value={localValues.use_worktrees as boolean}
-							onChange={(v) => handleChange("use_worktrees", v)}
-						/>
-						<div className="flex flex-col gap-1.5">
-							<label className="text-sm font-medium text-ink">Worktree Name Template</label>
-							<p className="text-tiny text-ink-faint">Template for naming new worktrees. Use <code className="text-ink-dull">{"{branch}"}</code> for the branch name.</p>
-							<Input
-								value={localValues.worktree_name_template as string}
-								onChange={(e) => handleChange("worktree_name_template", e.target.value)}
-								placeholder="{branch}"
-								className="border-app-line/50 bg-app-darkBox/30"
-							/>
-						</div>
-						<ConfigToggleField
-							label="Auto-Create Worktrees"
-							description="Automatically create a worktree when spawning a worker on a new branch."
-							value={localValues.auto_create_worktrees as boolean}
-							onChange={(v) => handleChange("auto_create_worktrees", v)}
-						/>
-						<ConfigToggleField
-							label="Auto-Discover Repos"
-							description="Scan the project root for git repositories when a project is created."
-							value={localValues.auto_discover_repos as boolean}
-							onChange={(v) => handleChange("auto_discover_repos", v)}
-						/>
-						<ConfigToggleField
-							label="Auto-Discover Worktrees"
-							description="Scan discovered repos for existing git worktrees on project creation."
-							value={localValues.auto_discover_worktrees as boolean}
-							onChange={(v) => handleChange("auto_discover_worktrees", v)}
-						/>
-						<NumberStepper
-							label="Disk Usage Warning"
-							description={`Warn when total project disk usage exceeds this threshold (${Math.round((localValues.disk_usage_warning_threshold as number) / 1073741824)} GB)`}
-							value={localValues.disk_usage_warning_threshold as number}
-							onChange={(v) => handleChange("disk_usage_warning_threshold", v)}
-							min={0}
-							step={1073741824}
-						/>
-					</div>
-				);
-			default:
-				return null;
-		}
-	};
-
-	return (
-		<>
-			<div className="flex items-center justify-between border-b border-app-line/50 bg-app-darkBox/20 px-5 py-2.5">
-				<div className="flex items-center gap-3">
-					<h3 className="text-sm font-medium text-ink">{label}</h3>
-					<span className="text-tiny text-ink-faint">{description}</span>
-				</div>
-				{localDirty ? (
-					<span className="text-tiny text-amber-400">Unsaved changes</span>
-				) : (
-					<span className="text-tiny text-ink-faint/50">Changes saved to config.toml</span>
 				)}
 			</div>
-			<div className="flex-1 overflow-y-auto px-8 py-8">
-				<div className="mb-6 rounded-lg border border-app-line/30 bg-app-darkBox/20 px-5 py-4">
-					<p className="text-sm leading-relaxed text-ink-dull">{detail}</p>
-				</div>
-				{renderFields()}
-			</div>
-		</>
-	);
-}
 
-// -- Form Field Components --
-
-interface ConfigToggleFieldProps {
-	label: string;
-	description: string;
-	value: boolean;
-	onChange: (value: boolean) => void;
-}
-
-function ConfigToggleField({ label, description, value, onChange }: ConfigToggleFieldProps) {
-	return (
-		<div className="flex items-center justify-between py-2">
-			<div className="flex flex-col gap-0.5">
-				<label className="text-sm font-medium text-ink">{label}</label>
-				<p className="text-tiny text-ink-faint">{description}</p>
-			</div>
-			<Toggle checked={value} onCheckedChange={onChange} size="lg" />
+			{!isIngestSection && (
+				<SaveBar
+					dirty={dirty}
+					saving={saving}
+					onSave={handleSave}
+					onRevert={handleRevert}
+				/>
+			)}
 		</div>
 	);
 }
diff --git a/interface/src/routes/AgentCortex.tsx b/interface/src/routes/AgentCortex.tsx
index 5f4a9dd3a..63476e474 100644
--- a/interface/src/routes/AgentCortex.tsx
+++ b/interface/src/routes/AgentCortex.tsx
@@ -1,16 +1,9 @@
-import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { AnimatePresence, motion } from "framer-motion";
-import {
-	api,
-	type CortexEvent,
-	type CortexEventType,
-} from "@/api/client";
-import { CortexChatPanel } from "@/components/CortexChatPanel";
-import { formatTimeAgo } from "@/lib/format";
-import { IdeaIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-import { FilterButton, Button } from "@/ui";
+import {useState} from "react";
+import {useQuery} from "@tanstack/react-query";
+import {AnimatePresence, motion} from "framer-motion";
+import {api, type CortexEvent, type CortexEventType} from "@/api/client";
+import {formatTimeAgo} from "@/lib/format";
+import {FilterButton} from "@spacedrive/primitives";
 
 const PAGE_SIZE = 50;
 
@@ -31,24 +24,50 @@ const EVENT_CATEGORY_COLORS: Record<string, string> = {
 };
 
 /** Groups for the filter pills — reduces clutter vs showing all 13 types. */
-const FILTER_GROUPS: { label: string; types: CortexEventType[] }[] = [
-	{ label: "Bulletin", types: ["bulletin_generated", "bulletin_failed"] },
-	{ label: "Maintenance", types: ["maintenance_run", "memory_merged", "memory_decayed", "memory_pruned"] },
-	{ label: "Health", types: ["worker_killed", "branch_killed", "circuit_breaker_tripped", "health_check"] },
-	{ label: "Consolidation", types: ["association_created", "contradiction_flagged", "observation_created"] },
+const FILTER_GROUPS: {label: string; types: CortexEventType[]}[] = [
+	{label: "Bulletin", types: ["bulletin_generated", "bulletin_failed"]},
+	{
+		label: "Maintenance",
+		types: [
+			"maintenance_run",
+			"memory_merged",
+			"memory_decayed",
+			"memory_pruned",
+		],
+	},
+	{
+		label: "Health",
+		types: [
+			"worker_killed",
+			"branch_killed",
+			"circuit_breaker_tripped",
+			"health_check",
+		],
+	},
+	{
+		label: "Consolidation",
+		types: [
+			"association_created",
+			"contradiction_flagged",
+			"observation_created",
+		],
+	},
 ];
 
-function EventTypeBadge({ eventType }: { eventType: string }) {
-	const color = EVENT_CATEGORY_COLORS[eventType] ?? "bg-app-darkBox text-ink-faint";
+function EventTypeBadge({eventType}: {eventType: string}) {
+	const color =
+		EVENT_CATEGORY_COLORS[eventType] ?? "bg-app-dark-box text-ink-faint";
 	const label = eventType.replace(/_/g, " ");
 	return (
-		<span className={`inline-flex items-center rounded px-1.5 py-0.5 text-tiny font-medium ${color}`}>
+		<span
+			className={`inline-flex items-center rounded px-1.5 py-0.5 text-tiny font-medium ${color}`}
+		>
 			{label}
 		</span>
 	);
 }
 
-function DetailsPanel({ details }: { details: Record<string, unknown> }) {
+function DetailsPanel({details}: {details: Record<string, unknown>}) {
 	return (
 		<div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-tiny">
 			{Object.entries(details).map(([key, value]) => (
@@ -67,21 +86,20 @@ interface AgentCortexProps {
 	agentId: string;
 }
 
-export function AgentCortex({ agentId }: AgentCortexProps) {
+export function AgentCortex({agentId}: AgentCortexProps) {
 	const [typeFilter, setTypeFilter] = useState<CortexEventType | null>(null);
 	const [groupFilter, setGroupFilter] = useState<string | null>(null);
 	const [offset, setOffset] = useState(0);
 	const [expandedId, setExpandedId] = useState<string | null>(null);
-	const [chatOpen, setChatOpen] = useState(true);
 
 	// Determine actual event_type filter from group or individual selection
 	// For groups, we pass no event_type and filter client-side (API only supports single type)
 	const activeGroupTypes = groupFilter
-		? FILTER_GROUPS.find((g) => g.label === groupFilter)?.types ?? []
+		? (FILTER_GROUPS.find((g) => g.label === groupFilter)?.types ?? [])
 		: [];
 	const isGroupFiltering = activeGroupTypes.length > 0;
 
-	const { data, isLoading, isError } = useQuery({
+	const {data, isLoading, isError} = useQuery({
 		queryKey: ["cortex-events", agentId, typeFilter, offset],
 		queryFn: () =>
 			api.cortexEvents(agentId, {
@@ -97,7 +115,9 @@ export function AgentCortex({ agentId }: AgentCortexProps) {
 	let total = data?.total ?? 0;
 
 	if (isGroupFiltering) {
-		events = events.filter((event) => activeGroupTypes.includes(event.event_type));
+		events = events.filter((event) =>
+			activeGroupTypes.includes(event.event_type),
+		);
 		total = events.length;
 		events = events.slice(offset, offset + PAGE_SIZE);
 	}
@@ -105,7 +125,10 @@ export function AgentCortex({ agentId }: AgentCortexProps) {
 	const hasNext = offset + PAGE_SIZE < total;
 	const hasPrev = offset > 0;
 
-	const handleFilterChange = (group: string | null, type_: CortexEventType | null) => {
+	const handleFilterChange = (
+		group: string | null,
+		type_: CortexEventType | null,
+	) => {
 		setGroupFilter(group);
 		setTypeFilter(type_);
 		setOffset(0);
@@ -113,21 +136,19 @@ export function AgentCortex({ agentId }: AgentCortexProps) {
 	};
 
 	return (
-		<div className="flex h-full">
-			{/* Event timeline */}
-			<div className="flex flex-1 flex-col overflow-hidden">
-				{/* Filter bar */}
-				<div className="flex items-center gap-1.5 border-b border-app-line/50 bg-app-darkBox/20 px-6 py-2">
-					<button
-						onClick={() => handleFilterChange(null, null)}
-						className={`rounded-md px-2 py-1 text-tiny font-medium transition-colors ${
-							!typeFilter && !groupFilter
-								? "bg-accent/15 text-accent"
-								: "text-ink-faint hover:text-ink-dull"
-						}`}
-					>
-						All
-					</button>
+		<div className="flex h-full flex-col overflow-hidden">
+			{/* Filter bar */}
+			<div className="flex items-center gap-1.5 border-b border-app-line/50 bg-app-dark-box/20 px-6 py-2">
+				<button
+					onClick={() => handleFilterChange(null, null)}
+					className={`rounded-md px-2 py-1 text-tiny font-medium transition-colors ${
+						!typeFilter && !groupFilter
+							? "bg-accent/15 text-accent"
+							: "text-ink-faint hover:text-ink-dull"
+					}`}
+				>
+					All
+				</button>
 				{FILTER_GROUPS.map((group) => (
 					<FilterButton
 						key={group.label}
@@ -138,136 +159,109 @@ export function AgentCortex({ agentId }: AgentCortexProps) {
 							)
 						}
 						active={groupFilter === group.label}
-						colorClass={EVENT_CATEGORY_COLORS[group.types[0]]}
 					>
 						{group.label}
 					</FilterButton>
 				))}
 
-					{/* Count + pagination + chat toggle */}
-					<div className="ml-auto flex items-center gap-3">
-						{total > 0 && (
-							<span className="text-tiny text-ink-faint">
-								{offset + 1}-{Math.min(offset + PAGE_SIZE, total)} of {total}
-							</span>
-						)}
-						{(hasPrev || hasNext) && (
-							<div className="flex items-center gap-1">
-								<button
-									onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
-									disabled={!hasPrev}
-									className="rounded px-1.5 py-0.5 text-tiny text-ink-faint transition-colors hover:text-ink-dull disabled:opacity-30"
-								>
-									Prev
-								</button>
-								<button
-									onClick={() => setOffset(offset + PAGE_SIZE)}
-									disabled={!hasNext}
-									className="rounded px-1.5 py-0.5 text-tiny text-ink-faint transition-colors hover:text-ink-dull disabled:opacity-30"
-								>
-									Next
-								</button>
-							</div>
-						)}
-					<div className="flex overflow-hidden rounded-md border border-app-line bg-app-darkBox">
-						<Button
-							onClick={() => setChatOpen(!chatOpen)}
-							variant={chatOpen ? "secondary" : "ghost"}
-							size="icon"
-							className={chatOpen ? "bg-app-selected text-ink" : ""}
-							title="Toggle cortex chat"
-						>
-							<HugeiconsIcon icon={IdeaIcon} className="h-4 w-4" />
-						</Button>
-					</div>
-					</div>
+				{/* Count + pagination */}
+				<div className="ml-auto flex items-center gap-3">
+					{total > 0 && (
+						<span className="text-tiny text-ink-faint">
+							{offset + 1}-{Math.min(offset + PAGE_SIZE, total)} of {total}
+						</span>
+					)}
+					{(hasPrev || hasNext) && (
+						<div className="flex items-center gap-1">
+							<button
+								onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
+								disabled={!hasPrev}
+								className="rounded px-1.5 py-0.5 text-tiny text-ink-faint transition-colors hover:text-ink-dull disabled:opacity-30"
+							>
+								Prev
+							</button>
+							<button
+								onClick={() => setOffset(offset + PAGE_SIZE)}
+								disabled={!hasNext}
+								className="rounded px-1.5 py-0.5 text-tiny text-ink-faint transition-colors hover:text-ink-dull disabled:opacity-30"
+							>
+								Next
+							</button>
+						</div>
+					)}
 				</div>
+			</div>
 
-				{/* Event list */}
-				{isLoading ? (
-					<div className="flex flex-1 items-center justify-center">
-						<div className="flex items-center gap-2 text-ink-dull">
-							<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
-							Loading cortex events...
-						</div>
-					</div>
-				) : isError ? (
-					<div className="flex flex-1 items-center justify-center">
-						<p className="text-sm text-red-400">Failed to load cortex events</p>
+			{/* Event list */}
+			{isLoading ? (
+				<div className="flex flex-1 items-center justify-center">
+					<div className="flex items-center gap-2 text-ink-dull">
+						<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
+						Loading cortex events...
 					</div>
-				) : events.length === 0 ? (
-					<div className="flex flex-1 items-center justify-center">
-						<p className="text-sm text-ink-faint">
-							{typeFilter || groupFilter ? "No events match this filter" : "No cortex events yet"}
-						</p>
-					</div>
-				) : (
-					<div className="flex-1 overflow-y-auto">
-						<div className="flex flex-col">
-							{events.map((event) => {
-								const isExpanded = expandedId === event.id;
-								return (
-									<div key={event.id} className="border-b border-app-line/30">
-										<button
-											onClick={() => setExpandedId(isExpanded ? null : event.id)}
-											className="flex w-full items-center gap-4 px-6 py-3 text-left transition-colors hover:bg-app-darkBox/30"
-										>
-											<span className="w-20 flex-shrink-0 text-tiny text-ink-faint">
-												{formatTimeAgo(event.created_at)}
-											</span>
-											<EventTypeBadge eventType={event.event_type} />
-											<span className="min-w-0 flex-1 truncate text-sm text-ink-dull">
-												{event.summary}
+				</div>
+			) : isError ? (
+				<div className="flex flex-1 items-center justify-center">
+					<p className="text-sm text-red-400">Failed to load cortex events</p>
+				</div>
+			) : events.length === 0 ? (
+				<div className="flex flex-1 items-center justify-center">
+					<p className="text-sm text-ink-faint">
+						{typeFilter || groupFilter
+							? "No events match this filter"
+							: "No cortex events yet"}
+					</p>
+				</div>
+			) : (
+				<div className="flex-1 overflow-y-auto">
+					<div className="flex flex-col">
+						{events.map((event) => {
+							const isExpanded = expandedId === event.id;
+							return (
+								<div key={event.id} className="border-b border-app-line/30">
+									<button
+										onClick={() => setExpandedId(isExpanded ? null : event.id)}
+										className="flex w-full items-center gap-4 px-6 py-3 text-left transition-colors hover:bg-app-dark-box/30"
+									>
+										<span className="w-20 flex-shrink-0 text-tiny text-ink-faint">
+											{formatTimeAgo(event.created_at)}
+										</span>
+										<EventTypeBadge eventType={event.event_type} />
+										<span className="min-w-0 flex-1 truncate text-sm text-ink-dull">
+											{event.summary}
+										</span>
+										{event.details && (
+											<span className="flex-shrink-0 text-tiny text-ink-faint">
+												{isExpanded ? "v" : ">"}
 											</span>
-											{event.details && (
-												<span className="flex-shrink-0 text-tiny text-ink-faint">
-													{isExpanded ? "v" : ">"}
-												</span>
-											)}
-										</button>
+										)}
+									</button>
 
-										<AnimatePresence>
-											{isExpanded && event.details && (
-												<motion.div
-													initial={{ height: 0, opacity: 0 }}
-													animate={{ height: "auto", opacity: 1 }}
-													exit={{ height: 0, opacity: 0 }}
-													transition={{ type: "spring", stiffness: 500, damping: 35 }}
-													className="overflow-hidden"
-												>
-													<div className="border-t border-app-line/20 bg-app-darkBox/20 px-6 py-4">
-														<DetailsPanel details={event.details} />
-													</div>
-												</motion.div>
-											)}
-										</AnimatePresence>
-									</div>
-								);
-							})}
-						</div>
+									<AnimatePresence>
+										{isExpanded && event.details && (
+											<motion.div
+												initial={{height: 0, opacity: 0}}
+												animate={{height: "auto", opacity: 1}}
+												exit={{height: 0, opacity: 0}}
+												transition={{
+													type: "spring",
+													stiffness: 500,
+													damping: 35,
+												}}
+												className="overflow-hidden"
+											>
+												<div className="border-t border-app-line/20 bg-app-dark-box/20 px-6 py-4">
+													<DetailsPanel details={event.details} />
+												</div>
+											</motion.div>
+										)}
+									</AnimatePresence>
+								</div>
+							);
+						})}
 					</div>
-				)}
-			</div>
-
-			{/* Cortex chat panel */}
-			<AnimatePresence>
-				{chatOpen && (
-					<motion.div
-						initial={{ width: 0, opacity: 0 }}
-						animate={{ width: 400, opacity: 1 }}
-						exit={{ width: 0, opacity: 0 }}
-						transition={{ type: "spring", stiffness: 400, damping: 30 }}
-						className="flex-shrink-0 overflow-hidden border-l border-app-line/50"
-					>
-						<div className="h-full w-[400px]">
-							<CortexChatPanel
-								agentId={agentId}
-								onClose={() => setChatOpen(false)}
-							/>
-						</div>
-					</motion.div>
-				)}
-			</AnimatePresence>
+				</div>
+			)}
 		</div>
 	);
 }
diff --git a/interface/src/routes/AgentCron.tsx b/interface/src/routes/AgentCron.tsx
index a6530c37c..878d4a217 100644
--- a/interface/src/routes/AgentCron.tsx
+++ b/interface/src/routes/AgentCron.tsx
@@ -1,27 +1,40 @@
-import { useState } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { api, type CronJobWithStats, type CreateCronRequest, type ChannelInfo } from "@/api/client";
-import { formatCronSchedule, formatTimeAgo } from "@/lib/format";
-import { Clock05Icon, PauseIcon, PlayIcon, FlashIcon, PencilEdit02Icon, Delete02Icon, ArrowDown01Icon, ArrowUp01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
+import {useState} from "react";
+import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
+import {
+	api,
+	type CronJobWithStats,
+	type CreateCronRequest,
+	type ChannelInfo,
+} from "@/api/client";
+import {formatCronSchedule, formatTimeAgo} from "@/lib/format";
+import {
+	Clock,
+	Pause,
+	Play,
+	Lightning,
+	PencilSimple,
+	Trash,
+	CaretDown,
+	CaretUp,
+} from "@phosphor-icons/react";
 import {
 	Button,
-	Dialog,
+	DialogRoot,
 	DialogContent,
 	DialogHeader,
 	DialogTitle,
 	Badge,
 	Input,
 	TextArea,
-	Toggle,
 	Label,
 	NumberStepper,
-	Select,
+	SelectRoot,
 	SelectTrigger,
 	SelectValue,
 	SelectContent,
 	SelectItem,
-} from "@/ui";
+} from "@spacedrive/primitives";
+import {Switch} from "@spacedrive/primitives";
 
 // -- Helpers --
 
@@ -29,17 +42,26 @@ type ScheduleMode = "cron" | "interval";
 
 function intervalToSeconds(value: number, unit: string): number {
 	switch (unit) {
-		case "minutes": return value * 60;
-		case "hours": return value * 3600;
-		case "days": return value * 86400;
-		default: return value;
+		case "minutes":
+			return value * 60;
+		case "hours":
+			return value * 3600;
+		case "days":
+			return value * 86400;
+		default:
+			return value;
 	}
 }
 
-function secondsToInterval(seconds: number): { value: number; unit: "minutes" | "hours" | "days" } {
-	if (seconds % 86400 === 0 && seconds >= 86400) return { value: seconds / 86400, unit: "days" };
-	if (seconds % 3600 === 0 && seconds >= 3600) return { value: seconds / 3600, unit: "hours" };
-	return { value: Math.max(1, Math.floor(seconds / 60)), unit: "minutes" };
+function secondsToInterval(seconds: number): {
+	value: number;
+	unit: "minutes" | "hours" | "days";
+} {
+	if (seconds % 86400 === 0 && seconds >= 86400)
+		return {value: seconds / 86400, unit: "days"};
+	if (seconds % 3600 === 0 && seconds >= 3600)
+		return {value: seconds / 3600, unit: "hours"};
+	return {value: Math.max(1, Math.floor(seconds / 60)), unit: "minutes"};
 }
 
 interface CronFormData {
@@ -93,14 +115,26 @@ function jobToFormData(job: CronJobWithStats): CronFormData {
 }
 
 function formDataToRequest(data: CronFormData): CreateCronRequest {
-	const active_start = data.active_start_hour ? parseInt(data.active_start_hour, 10) : undefined;
-	const active_end = data.active_end_hour ? parseInt(data.active_end_hour, 10) : undefined;
-	const timeout = data.timeout_secs ? parseInt(data.timeout_secs, 10) : undefined;
+	const active_start = data.active_start_hour
+		? parseInt(data.active_start_hour, 10)
+		: undefined;
+	const active_end = data.active_end_hour
+		? parseInt(data.active_end_hour, 10)
+		: undefined;
+	const timeout = data.timeout_secs
+		? parseInt(data.timeout_secs, 10)
+		: undefined;
 	return {
 		id: data.id,
 		prompt: data.prompt,
-		cron_expr: data.schedule_mode === "cron" && data.cron_expr.trim() ? data.cron_expr.trim() : undefined,
-		interval_secs: data.schedule_mode === "interval" ? intervalToSeconds(data.interval_value, data.interval_unit) : undefined,
+		cron_expr:
+			data.schedule_mode === "cron" && data.cron_expr.trim()
+				? data.cron_expr.trim()
+				: undefined,
+		interval_secs:
+			data.schedule_mode === "interval"
+				? intervalToSeconds(data.interval_value, data.interval_unit)
+				: undefined,
 		delivery_target: data.delivery_target,
 		active_start_hour: active_start,
 		active_end_hour: active_end,
@@ -111,16 +145,16 @@ function formDataToRequest(data: CronFormData): CreateCronRequest {
 }
 
 // Cron expression presets for the dropdown
-const CRON_PRESETS: { label: string; value: string }[] = [
-	{ label: "Every hour", value: "0 * * * *" },
-	{ label: "Every 15 minutes", value: "*/15 * * * *" },
-	{ label: "Every 30 minutes", value: "*/30 * * * *" },
-	{ label: "Daily at 9:00", value: "0 9 * * *" },
-	{ label: "Daily at midnight", value: "0 0 * * *" },
-	{ label: "Weekdays at 9:00", value: "0 9 * * 1-5" },
-	{ label: "Weekdays at 17:00", value: "0 17 * * 1-5" },
-	{ label: "Every Monday at 9:00", value: "0 9 * * 1" },
-	{ label: "1st of month at noon", value: "0 12 1 * *" },
+const CRON_PRESETS: {label: string; value: string}[] = [
+	{label: "Every hour", value: "0 * * * *"},
+	{label: "Every 15 minutes", value: "*/15 * * * *"},
+	{label: "Every 30 minutes", value: "*/30 * * * *"},
+	{label: "Daily at 9:00", value: "0 9 * * *"},
+	{label: "Daily at midnight", value: "0 0 * * *"},
+	{label: "Weekdays at 9:00", value: "0 9 * * 1-5"},
+	{label: "Weekdays at 17:00", value: "0 17 * * 1-5"},
+	{label: "Every Monday at 9:00", value: "0 9 * * 1"},
+	{label: "1st of month at noon", value: "0 12 1 * *"},
 ];
 
 // -- Main Component --
@@ -129,7 +163,7 @@ interface AgentCronProps {
 	agentId: string;
 }
 
-export function AgentCron({ agentId }: AgentCronProps) {
+export function AgentCron({agentId}: AgentCronProps) {
 	const queryClient = useQueryClient();
 	const [isModalOpen, setIsModalOpen] = useState(false);
 	const [editingJob, setEditingJob] = useState<CronJobWithStats | null>(null);
@@ -137,13 +171,13 @@ export function AgentCron({ agentId }: AgentCronProps) {
 	const [expandedJobs, setExpandedJobs] = useState<Set<string>>(new Set());
 	const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
 
-	const { data, isLoading, error } = useQuery({
+	const {data, isLoading, error} = useQuery({
 		queryKey: ["cron-jobs", agentId],
 		queryFn: () => api.listCronJobs(agentId),
 		refetchInterval: 15_000,
 	});
 
-	const { data: channelsData } = useQuery({
+	const {data: channelsData} = useQuery({
 		queryKey: ["channels"],
 		queryFn: () => api.channels(),
 	});
@@ -166,32 +200,35 @@ export function AgentCron({ agentId }: AgentCronProps) {
 			} else {
 				label = ch.display_name ?? ch.id;
 			}
-			return { value, label, platform: ch.platform, agentId: ch.agent_id };
+			return {value, label, platform: ch.platform, agentId: ch.agent_id};
 		});
 
 	const toggleMutation = useMutation({
-		mutationFn: ({ cronId, enabled }: { cronId: string; enabled: boolean }) =>
+		mutationFn: ({cronId, enabled}: {cronId: string; enabled: boolean}) =>
 			api.toggleCronJob(agentId, cronId, enabled),
-		onSuccess: () => queryClient.invalidateQueries({ queryKey: ["cron-jobs", agentId] }),
+		onSuccess: () =>
+			queryClient.invalidateQueries({queryKey: ["cron-jobs", agentId]}),
 	});
 
 	const triggerMutation = useMutation({
 		mutationFn: (cronId: string) => api.triggerCronJob(agentId, cronId),
-		onSuccess: () => queryClient.invalidateQueries({ queryKey: ["cron-jobs", agentId] }),
+		onSuccess: () =>
+			queryClient.invalidateQueries({queryKey: ["cron-jobs", agentId]}),
 	});
 
 	const deleteMutation = useMutation({
 		mutationFn: (cronId: string) => api.deleteCronJob(agentId, cronId),
 		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["cron-jobs", agentId] });
+			queryClient.invalidateQueries({queryKey: ["cron-jobs", agentId]});
 			setDeleteConfirmId(null);
 		},
 	});
 
 	const saveMutation = useMutation({
-		mutationFn: (request: CreateCronRequest) => api.createCronJob(agentId, request),
+		mutationFn: (request: CreateCronRequest) =>
+			api.createCronJob(agentId, request),
 		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["cron-jobs", agentId] });
+			queryClient.invalidateQueries({queryKey: ["cron-jobs", agentId]});
 			setIsModalOpen(false);
 			setEditingJob(null);
 			setFormData(defaultFormData());
@@ -217,7 +254,12 @@ export function AgentCron({ agentId }: AgentCronProps) {
 	};
 
 	const handleSave = () => {
-		if (!formData.id.trim() || !formData.prompt.trim() || !formData.delivery_target.trim()) return;
+		if (
+			!formData.id.trim() ||
+			!formData.prompt.trim() ||
+			!formData.delivery_target.trim()
+		)
+			return;
 		if (formData.schedule_mode === "cron" && !formData.cron_expr.trim()) return;
 		saveMutation.mutate(formDataToRequest(formData));
 	};
@@ -234,7 +276,10 @@ export function AgentCron({ agentId }: AgentCronProps) {
 	const totalJobs = data?.jobs.length ?? 0;
 	const enabledJobs = data?.jobs.filter((j) => j.enabled).length ?? 0;
 	const totalRuns =
-		data?.jobs.reduce((sum, j) => sum + j.execution_success_count + j.execution_failure_count, 0) ?? 0;
+		data?.jobs.reduce(
+			(sum, j) => sum + j.execution_success_count + j.execution_failure_count,
+			0,
+		) ?? 0;
 	const executionFailures =
 		data?.jobs.reduce((sum, j) => sum + j.execution_failure_count, 0) ?? 0;
 	const deliveryFailures =
@@ -244,19 +289,35 @@ export function AgentCron({ agentId }: AgentCronProps) {
 		<div className="flex h-full flex-col">
 			{/* Stats bar */}
 			{totalJobs > 0 && (
-				<div className="flex items-center gap-2 border-b border-app-line px-6 py-3">
-					<Badge variant="accent" size="md">{totalJobs} total</Badge>
-					<Badge variant="green" size="md">{enabledJobs} enabled</Badge>
-					<Badge variant="outline" size="md">{totalRuns} executions</Badge>
-					{executionFailures > 0 && <Badge variant="red" size="md">{executionFailures} exec failed</Badge>}
-					{deliveryFailures > 0 && <Badge variant="red" size="md">{deliveryFailures} delivery failed</Badge>}
+				<div className="flex items-center gap-2 border-b border-app-line px-6 py-2">
+					<Badge variant="outline" size="md">
+						{totalJobs} total
+					</Badge>
+					<Badge variant="outline" size="md">
+						{enabledJobs} enabled
+					</Badge>
+					<Badge variant="outline" size="md">
+						{totalRuns} executions
+					</Badge>
+					{executionFailures > 0 && (
+						<Badge variant="error" size="md">
+							{executionFailures} exec failed
+						</Badge>
+					)}
+					{deliveryFailures > 0 && (
+						<Badge variant="error" size="md">
+							{deliveryFailures} delivery failed
+						</Badge>
+					)}
 					{data?.timezone && (
-						<span className="text-tiny text-ink-faint">tz: {data.timezone}</span>
+						<Badge variant="outline" size="md">
+							Timezone: {data.timezone}
+						</Badge>
 					)}
 
 					<div className="flex-1" />
 
-					<Button onClick={openCreate} size="sm">
+					<Button onClick={openCreate} variant="gray" size="md">
 						+ New Job
 					</Button>
 				</div>
@@ -278,15 +339,18 @@ export function AgentCron({ agentId }: AgentCronProps) {
 
 				{!isLoading && !error && totalJobs === 0 && (
 					<div className="flex h-full items-start justify-center pt-[15vh]">
-						<div className="flex max-w-sm flex-col items-center rounded-xl border border-dashed border-app-line/50 bg-app-darkBox/20 p-8 text-center">
-							<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full border border-app-line bg-app-darkBox">
-								<HugeiconsIcon icon={Clock05Icon} className="h-6 w-6 text-ink-faint" />
+						<div className="flex max-w-sm flex-col items-center rounded-xl border border-dashed border-app-line/50 bg-app-dark-box/20 p-8 text-center">
+							<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full border border-app-line bg-app-dark-box">
+								<Clock className="h-6 w-6 text-ink-faint" />
 							</div>
-							<h3 className="mb-1 font-plex text-sm font-medium text-ink">No cron jobs yet</h3>
+							<h3 className="mb-1 font-plex text-sm font-medium text-ink">
+								No cron jobs yet
+							</h3>
 							<p className="mb-5 max-w-md text-sm text-ink-faint">
-								Schedule automated tasks that run on a timer and deliver results to messaging channels
+								Schedule automated tasks that run on a timer and deliver results
+								to messaging channels
 							</p>
-							<Button onClick={openCreate} variant="secondary" size="sm">
+							<Button onClick={openCreate} variant="gray" size="sm">
 								+ New Job
 							</Button>
 						</div>
@@ -303,7 +367,7 @@ export function AgentCron({ agentId }: AgentCronProps) {
 								isExpanded={expandedJobs.has(job.id)}
 								onToggleExpand={() => toggleExpanded(job.id)}
 								onToggleEnabled={() =>
-									toggleMutation.mutate({ cronId: job.id, enabled: !job.enabled })
+									toggleMutation.mutate({cronId: job.id, enabled: !job.enabled})
 								}
 								onTrigger={() => triggerMutation.mutate(job.id)}
 								onEdit={() => openEdit(job)}
@@ -317,10 +381,15 @@ export function AgentCron({ agentId }: AgentCronProps) {
 			</div>
 
 			{/* Create / Edit Modal */}
-			<Dialog open={isModalOpen} onOpenChange={(open) => !open && closeModal()}>
+			<DialogRoot
+				open={isModalOpen}
+				onOpenChange={(open) => !open && closeModal()}
+			>
 				<DialogContent className="!max-w-4xl">
 					<DialogHeader>
-						<DialogTitle>{editingJob ? "Edit Cron Job" : "Create Cron Job"}</DialogTitle>
+						<DialogTitle>
+							{editingJob ? "Edit Cron Job" : "Create Cron Job"}
+						</DialogTitle>
 					</DialogHeader>
 					<div className="grid grid-cols-2 gap-6">
 						{/* Left column — what & when */}
@@ -328,7 +397,9 @@ export function AgentCron({ agentId }: AgentCronProps) {
 							<Field label="Job ID">
 								<Input
 									value={formData.id}
-									onChange={(e) => setFormData((d) => ({ ...d, id: e.target.value }))}
+									onChange={(e) =>
+										setFormData((d) => ({...d, id: e.target.value}))
+									}
 									placeholder="e.g. daily-summary"
 									disabled={!!editingJob}
 									autoComplete="off"
@@ -338,7 +409,9 @@ export function AgentCron({ agentId }: AgentCronProps) {
 							<Field label="Prompt">
 								<TextArea
 									value={formData.prompt}
-									onChange={(e) => setFormData((d) => ({ ...d, prompt: e.target.value }))}
+									onChange={(e) =>
+										setFormData((d) => ({...d, prompt: e.target.value}))
+									}
 									placeholder="What should the agent do on each run?"
 									rows={4}
 								/>
@@ -351,10 +424,12 @@ export function AgentCron({ agentId }: AgentCronProps) {
 											type="button"
 											className={`flex-1 rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${
 												formData.schedule_mode === "cron"
-													? "bg-app-darkBox text-ink shadow-sm"
+													? "bg-app-dark-box text-ink shadow-sm"
 													: "text-ink-faint hover:text-ink"
 											}`}
-											onClick={() => setFormData((d) => ({ ...d, schedule_mode: "cron" }))}
+											onClick={() =>
+												setFormData((d) => ({...d, schedule_mode: "cron"}))
+											}
 										>
 											Cron Expression
 										</button>
@@ -362,10 +437,12 @@ export function AgentCron({ agentId }: AgentCronProps) {
 											type="button"
 											className={`flex-1 rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${
 												formData.schedule_mode === "interval"
-													? "bg-app-darkBox text-ink shadow-sm"
+													? "bg-app-dark-box text-ink shadow-sm"
 													: "text-ink-faint hover:text-ink"
 											}`}
-											onClick={() => setFormData((d) => ({ ...d, schedule_mode: "interval" }))}
+											onClick={() =>
+												setFormData((d) => ({...d, schedule_mode: "interval"}))
+											}
 										>
 											Interval
 										</button>
@@ -375,7 +452,12 @@ export function AgentCron({ agentId }: AgentCronProps) {
 										<div className="flex flex-col gap-2">
 											<Input
 												value={formData.cron_expr}
-												onChange={(e) => setFormData((d) => ({ ...d, cron_expr: e.target.value }))}
+												onChange={(e) =>
+													setFormData((d) => ({
+														...d,
+														cron_expr: e.target.value,
+													}))
+												}
 												placeholder="0 9 * * *"
 												className="font-mono"
 												autoComplete="off"
@@ -388,9 +470,14 @@ export function AgentCron({ agentId }: AgentCronProps) {
 														className={`rounded-md border px-2 py-1 text-tiny transition-colors ${
 															formData.cron_expr === preset.value
 																? "border-accent/50 bg-accent/10 text-accent"
-																: "border-app-line bg-app-darkBox text-ink-faint hover:border-app-line/80 hover:text-ink-dull"
+																: "border-app-line bg-app-dark-box text-ink-faint hover:border-app-line/80 hover:text-ink-dull"
 														}`}
-														onClick={() => setFormData((d) => ({ ...d, cron_expr: preset.value }))}
+														onClick={() =>
+															setFormData((d) => ({
+																...d,
+																cron_expr: preset.value,
+															}))
+														}
 													>
 														{preset.label}
 													</button>
@@ -408,15 +495,22 @@ export function AgentCron({ agentId }: AgentCronProps) {
 												<span className="text-sm text-ink-faint">Every</span>
 												<NumberStepper
 													value={formData.interval_value}
-													onChange={(v) => setFormData((d) => ({ ...d, interval_value: v }))}
+													onChange={(v) =>
+														setFormData((d) => ({...d, interval_value: v}))
+													}
 													min={1}
 													max={999}
-													variant="compact"
-												/>
-												<Select
+														/>
+												<SelectRoot
 													value={formData.interval_unit}
 													onValueChange={(value) =>
-														setFormData((d) => ({ ...d, interval_unit: value as "minutes" | "hours" | "days" }))
+														setFormData((d) => ({
+															...d,
+															interval_unit: value as
+																| "minutes"
+																| "hours"
+																| "days",
+														}))
 													}
 												>
 													<SelectTrigger className="w-32">
@@ -427,9 +521,11 @@ export function AgentCron({ agentId }: AgentCronProps) {
 														<SelectItem value="hours">hours</SelectItem>
 														<SelectItem value="days">days</SelectItem>
 													</SelectContent>
-												</Select>
+												</SelectRoot>
 											</div>
-											<p className="mt-1 text-tiny text-ink-faint">May drift. Prefer cron expressions.</p>
+											<p className="mt-1 text-tiny text-ink-faint">
+												May drift. Prefer cron expressions.
+											</p>
 										</div>
 									)}
 								</div>
@@ -439,13 +535,13 @@ export function AgentCron({ agentId }: AgentCronProps) {
 						{/* Right column — delivery & options */}
 						<div className="flex flex-col gap-4">
 							<Field label="Delivery Target">
-								<Select
+								<SelectRoot
 									value={formData.delivery_target}
 									onValueChange={(value) => {
 										if (value === "__custom__") {
-											setFormData((d) => ({ ...d, delivery_target: "" }));
+											setFormData((d) => ({...d, delivery_target: ""}));
 										} else {
-											setFormData((d) => ({ ...d, delivery_target: value }));
+											setFormData((d) => ({...d, delivery_target: value}));
 										}
 									}}
 								>
@@ -456,16 +552,26 @@ export function AgentCron({ agentId }: AgentCronProps) {
 										{deliveryTargets.map((target) => (
 											<SelectItem key={target.value} value={target.value}>
 												<span>{target.label}</span>
-												<span className="ml-1.5 text-ink-faint">{target.value}</span>
+												<span className="ml-1.5 text-ink-faint">
+													{target.value}
+												</span>
 											</SelectItem>
 										))}
 										<SelectItem value="__custom__">Custom...</SelectItem>
 									</SelectContent>
-								</Select>
-								{(formData.delivery_target === "" || !deliveryTargets.some((t) => t.value === formData.delivery_target)) && (
+								</SelectRoot>
+								{(formData.delivery_target === "" ||
+									!deliveryTargets.some(
+										(t) => t.value === formData.delivery_target,
+									)) && (
 									<Input
 										value={formData.delivery_target}
-										onChange={(e) => setFormData((d) => ({ ...d, delivery_target: e.target.value }))}
+										onChange={(e) =>
+											setFormData((d) => ({
+												...d,
+												delivery_target: e.target.value,
+											}))
+										}
 										placeholder="adapter:target (e.g. discord:123456)"
 										className="mt-1.5"
 									/>
@@ -476,49 +582,78 @@ export function AgentCron({ agentId }: AgentCronProps) {
 								<div className="flex items-center gap-2">
 									<NumberStepper
 										value={parseInt(formData.active_start_hour) || 0}
-										onChange={(v) => setFormData((d) => ({ ...d, active_start_hour: v.toString() }))}
+										onChange={(v) =>
+											setFormData((d) => ({
+												...d,
+												active_start_hour: v.toString(),
+											}))
+										}
 										min={0}
 										max={23}
 										suffix="h"
-										variant="compact"
 									/>
 									<span className="text-sm text-ink-faint">to</span>
 									<NumberStepper
 										value={parseInt(formData.active_end_hour) || 23}
-										onChange={(v) => setFormData((d) => ({ ...d, active_end_hour: v.toString() }))}
+										onChange={(v) =>
+											setFormData((d) => ({
+												...d,
+												active_end_hour: v.toString(),
+											}))
+										}
 										min={0}
 										max={23}
 										suffix="h"
-										variant="compact"
 									/>
 								</div>
-								<p className="mt-1 text-tiny text-ink-faint">Only run during these hours (24h)</p>
+								<p className="mt-1 text-tiny text-ink-faint">
+									Only run during these hours (24h)
+								</p>
 							</Field>
 
 							<Field label="Timeout (optional)">
 								<Input
 									value={formData.timeout_secs}
-									onChange={(e) => setFormData((d) => ({ ...d, timeout_secs: e.target.value.replace(/\D/g, "") }))}
+									onChange={(e) =>
+										setFormData((d) => ({
+											...d,
+											timeout_secs: e.target.value.replace(/\D/g, ""),
+										}))
+									}
 									placeholder="120"
 									className="w-32"
 								/>
-								<p className="mt-1 text-tiny text-ink-faint">Max seconds per run (default 120)</p>
+								<p className="mt-1 text-tiny text-ink-faint">
+									Max seconds per run (default 1500)
+								</p>
 							</Field>
 
 							<div className="flex items-center justify-between">
 								<Label>Enabled</Label>
-								<Toggle checked={formData.enabled} onCheckedChange={(checked) => setFormData((d) => ({ ...d, enabled: checked }))} size="lg" />
+								<Switch
+									checked={formData.enabled}
+									onCheckedChange={(checked) =>
+										setFormData((d) => ({...d, enabled: checked}))
+									}
+									size="lg"
+								/>
 							</div>
 
 							<div className="flex items-center justify-between">
 								<Label>Run Once</Label>
-								<Toggle checked={formData.run_once} onCheckedChange={(checked) => setFormData((d) => ({ ...d, run_once: checked }))} size="lg" />
+								<Switch
+									checked={formData.run_once}
+									onCheckedChange={(checked) =>
+										setFormData((d) => ({...d, run_once: checked}))
+									}
+									size="lg"
+								/>
 							</div>
 						</div>
 					</div>
 
 					<div className="mt-2 flex justify-end gap-2">
-						<Button variant="ghost" size="sm" onClick={closeModal}>
+						<Button variant="gray" size="sm" onClick={closeModal}>
 							Cancel
 						</Button>
 						<Button
@@ -528,51 +663,59 @@ export function AgentCron({ agentId }: AgentCronProps) {
 								!formData.id.trim() ||
 								!formData.prompt.trim() ||
 								!formData.delivery_target.trim() ||
-								(formData.schedule_mode === "cron" && !formData.cron_expr.trim())
+								(formData.schedule_mode === "cron" &&
+									!formData.cron_expr.trim())
 							}
-							loading={saveMutation.isPending}
 						>
 							{editingJob ? "Save Changes" : "Create Job"}
 						</Button>
 					</div>
 				</DialogContent>
-			</Dialog>
+			</DialogRoot>
 
 			{/* Delete Confirmation */}
-			<Dialog open={!!deleteConfirmId} onOpenChange={(open) => !open && setDeleteConfirmId(null)}>
+			<DialogRoot
+				open={!!deleteConfirmId}
+				onOpenChange={(open) => !open && setDeleteConfirmId(null)}
+			>
 				<DialogContent>
 					<DialogHeader>
 						<DialogTitle>Delete Cron Job?</DialogTitle>
 					</DialogHeader>
 					<p className="mb-4 text-sm text-ink-dull">
-						This will permanently delete <code className="rounded bg-app-darkBox px-1.5 py-0.5 text-ink">{deleteConfirmId}</code> and its execution history.
+						This will permanently delete{" "}
+						<code className="rounded bg-app-dark-box px-1.5 py-0.5 text-ink">
+							{deleteConfirmId}
+						</code>{" "}
+						and its execution history.
 					</p>
 					<div className="flex justify-end gap-2">
 						<Button
-							variant="ghost"
+							variant="gray"
 							size="sm"
 							onClick={() => setDeleteConfirmId(null)}
 						>
 							Cancel
 						</Button>
 						<Button
-							variant="destructive"
+							variant="accent"
 							size="sm"
-							onClick={() => deleteConfirmId && deleteMutation.mutate(deleteConfirmId)}
-							loading={deleteMutation.isPending}
+							onClick={() =>
+								deleteConfirmId && deleteMutation.mutate(deleteConfirmId)
+							}
 						>
 							Delete
 						</Button>
 					</div>
 				</DialogContent>
-			</Dialog>
+			</DialogRoot>
 		</div>
 	);
 }
 
 // -- Sub-components --
 
-function Field({ label, children }: { label: string; children: React.ReactNode }) {
+function Field({label, children}: {label: string; children: React.ReactNode}) {
 	return (
 		<div className="space-y-1.5">
 			<label className="text-xs font-medium text-ink-dull">{label}</label>
@@ -606,11 +749,13 @@ function CronJobCard({
 }) {
 	const totalRuns = job.execution_success_count + job.execution_failure_count;
 	const executionSuccessRate =
-		totalRuns > 0 ? Math.round((job.execution_success_count / totalRuns) * 100) : null;
+		totalRuns > 0
+			? Math.round((job.execution_success_count / totalRuns) * 100)
+			: null;
 	const schedule = formatCronSchedule(job.cron_expr, job.interval_secs);
 
 	return (
-		<div className="overflow-hidden rounded-xl border border-app-line bg-app-darkBox">
+		<div className="overflow-hidden rounded-xl border border-app-line bg-app-dark-box">
 			{/* Job row */}
 			<div className="flex items-start gap-3 p-4">
 				{/* Status dot */}
@@ -631,19 +776,26 @@ function CronJobCard({
 						</code>
 						{job.active_hours && (
 							<span className="text-tiny text-ink-faint">
-								{String(job.active_hours[0]).padStart(2, "0")}:00-{String(job.active_hours[1]).padStart(2, "0")}:00
+								{String(job.active_hours[0]).padStart(2, "0")}:00-
+								{String(job.active_hours[1]).padStart(2, "0")}:00
 							</span>
 						)}
 						{!job.enabled && (
-							<span className="rounded bg-gray-500/20 px-1.5 py-0.5 text-tiny text-gray-400">disabled</span>
+							<span className="rounded bg-gray-500/20 px-1.5 py-0.5 text-tiny text-gray-400">
+								disabled
+							</span>
 						)}
 						{job.run_once && (
-							<span className="rounded bg-accent/20 px-1.5 py-0.5 text-tiny text-accent">one-time</span>
+							<span className="rounded bg-accent/20 px-1.5 py-0.5 text-tiny text-accent">
+								one-time
+							</span>
 						)}
 					</div>
 
 					<p className="mb-2 text-sm text-ink-dull" title={job.prompt}>
-						{job.prompt.length > 120 ? job.prompt.slice(0, 120) + "..." : job.prompt}
+						{job.prompt.length > 120
+							? job.prompt.slice(0, 120) + "..."
+							: job.prompt}
 					</p>
 
 					<div className="flex flex-wrap items-center gap-3 text-tiny text-ink-faint">
@@ -666,7 +818,8 @@ function CronJobCard({
 												: "text-red-500"
 									}
 								>
-									exec {executionSuccessRate}% ({job.execution_success_count}/{totalRuns})
+									exec {executionSuccessRate}% ({job.execution_success_count}/
+									{totalRuns})
 								</span>
 							</>
 						)}
@@ -677,8 +830,12 @@ function CronJobCard({
 								<span className="text-ink-faint/50">·</span>
 								<span className="text-ink-faint">
 									delivery {job.delivery_success_count} sent
-									{job.delivery_failure_count > 0 ? `, ${job.delivery_failure_count} failed` : ""}
-									{job.delivery_skipped_count > 0 ? `, ${job.delivery_skipped_count} skipped` : ""}
+									{job.delivery_failure_count > 0
+										? `, ${job.delivery_failure_count} failed`
+										: ""}
+									{job.delivery_skipped_count > 0
+										? `, ${job.delivery_skipped_count} skipped`
+										: ""}
 								</span>
 							</>
 						)}
@@ -691,32 +848,42 @@ function CronJobCard({
 						title={job.enabled ? "Disable" : "Enable"}
 						onClick={onToggleEnabled}
 						disabled={isToggling}
-						variant="ghost"
+						variant="gray"
 						size="sm"
 					>
-						<HugeiconsIcon icon={job.enabled ? PauseIcon : PlayIcon} className="h-3.5 w-3.5" />
+						{job.enabled ? (
+							<Pause className="h-3.5 w-3.5" />
+						) : (
+							<Play className="h-3.5 w-3.5" />
+						)}
 					</Button>
 					<Button
 						title="Run now"
 						onClick={onTrigger}
 						disabled={isTriggering || !job.enabled}
-						variant="ghost"
+						variant="gray"
 						size="sm"
 					>
-						<HugeiconsIcon icon={FlashIcon} className="h-3.5 w-3.5" />
+						<Lightning className="h-3.5 w-3.5" />
 					</Button>
-					<Button title="Edit" onClick={onEdit} variant="ghost" size="sm">
-						<HugeiconsIcon icon={PencilEdit02Icon} className="h-3.5 w-3.5" />
+					<Button title="Edit" onClick={onEdit} variant="gray" size="sm">
+						<PencilSimple className="h-3.5 w-3.5" />
 					</Button>
-					<Button title="Delete" onClick={onDelete} variant="ghost" size="sm" className="hover:text-red-400">
-						<HugeiconsIcon icon={Delete02Icon} className="h-3.5 w-3.5" />
+					<Button
+						title="Delete"
+						onClick={onDelete}
+						variant="gray"
+						size="sm"
+						className="hover:text-red-400"
+					>
+						<Trash className="h-3.5 w-3.5" />
 					</Button>
 				</div>
 			</div>
 
 			{/* Execution history (expandable) */}
 			{isExpanded && (
-				<div className="border-t border-app-line bg-app-darkBox/50 px-4 py-3">
+				<div className="border-t border-app-line bg-app-dark-box/50 px-4 py-3">
 					<JobExecutions agentId={agentId} jobId={job.id} />
 				</div>
 			)}
@@ -727,17 +894,21 @@ function CronJobCard({
 				onClick={onToggleExpand}
 				className="flex w-full items-center justify-center gap-1.5 border-t border-app-line/50 px-3 py-1.5 text-tiny text-ink-faint transition-colors hover:bg-app-lightBox/30 hover:text-ink-dull"
 			>
-				<HugeiconsIcon icon={isExpanded ? ArrowUp01Icon : ArrowDown01Icon} className="h-3 w-3" />
+				{isExpanded ? (
+					<CaretUp className="h-3 w-3" />
+				) : (
+					<CaretDown className="h-3 w-3" />
+				)}
 				{isExpanded ? "Hide history" : "Show history"}
 			</button>
 		</div>
 	);
 }
 
-function JobExecutions({ agentId, jobId }: { agentId: string; jobId: string }) {
-	const { data, isLoading } = useQuery({
+function JobExecutions({agentId, jobId}: {agentId: string; jobId: string}) {
+	const {data, isLoading} = useQuery({
 		queryKey: ["cron-executions", agentId, jobId],
-		queryFn: () => api.cronExecutions(agentId, { cron_id: jobId, limit: 10 }),
+		queryFn: () => api.cronExecutions(agentId, {cron_id: jobId, limit: 10}),
 	});
 
 	if (isLoading) {
@@ -749,28 +920,34 @@ function JobExecutions({ agentId, jobId }: { agentId: string; jobId: string }) {
 	}
 
 	if (!data?.executions.length) {
-		return <p className="py-2 text-tiny text-ink-faint">No execution history yet.</p>;
+		return (
+			<p className="py-2 text-tiny text-ink-faint">No execution history yet.</p>
+		);
 	}
 
 	return (
 		<div className="flex flex-col gap-1">
 			{data.executions.map((execution) => {
-					const statusTone = !execution.execution_succeeded
-						? "bg-red-500"
-						: execution.delivery_attempted && execution.delivery_succeeded === false
-							? "bg-yellow-500"
-							: execution.delivery_attempted && execution.delivery_succeeded === true
-								? "bg-green-500"
-								: "bg-gray-500";
-					const detail =
-						execution.delivery_error ?? execution.execution_error ?? execution.result_summary;
-					const deliveryLabel = !execution.delivery_attempted
-						? "no delivery"
-						: execution.delivery_succeeded === true
-							? "delivered"
-							: execution.delivery_succeeded === false
-								? "delivery failed"
-								: "delivery unknown";
+				const statusTone = !execution.execution_succeeded
+					? "bg-red-500"
+					: execution.delivery_attempted &&
+						  execution.delivery_succeeded === false
+						? "bg-yellow-500"
+						: execution.delivery_attempted &&
+							  execution.delivery_succeeded === true
+							? "bg-green-500"
+							: "bg-gray-500";
+				const detail =
+					execution.delivery_error ??
+					execution.execution_error ??
+					execution.result_summary;
+				const deliveryLabel = !execution.delivery_attempted
+					? "no delivery"
+					: execution.delivery_succeeded === true
+						? "delivered"
+						: execution.delivery_succeeded === false
+							? "delivery failed"
+							: "delivery unknown";
 
 				return (
 					<div
diff --git a/interface/src/routes/AgentDetail.tsx b/interface/src/routes/AgentDetail.tsx
index de31af6ff..26be18266 100644
--- a/interface/src/routes/AgentDetail.tsx
+++ b/interface/src/routes/AgentDetail.tsx
@@ -1,10 +1,15 @@
-import { useMemo, useState } from "react";
-import { Link } from "@tanstack/react-router";
-import { useQuery } from "@tanstack/react-query";
-import { api, type CortexEvent, type CronJobInfo, MEMORY_TYPES } from "@/api/client";
-import type { ChannelLiveState } from "@/hooks/useChannelLiveState";
-import { formatTimeAgo, formatCronSchedule } from "@/lib/format";
-import { DeleteAgentDialog } from "@/components/DeleteAgentDialog";
+import {useMemo, useState} from "react";
+import {Link} from "@tanstack/react-router";
+import {useQuery} from "@tanstack/react-query";
+import {
+	api,
+	type CortexEvent,
+	type CronJobInfo,
+	MEMORY_TYPES,
+} from "@/api/client";
+import type {ChannelLiveState} from "@/hooks/useChannelLiveState";
+import {formatTimeAgo, formatCronSchedule} from "@/lib/format";
+import {DeleteAgentDialog} from "@/components/DeleteAgentDialog";
 import {
 	ResponsiveContainer,
 	AreaChart,
@@ -23,32 +28,32 @@ interface AgentDetailProps {
 	liveStates: Record<string, ChannelLiveState>;
 }
 
-export function AgentDetail({ agentId, liveStates }: AgentDetailProps) {
-	const { data: agentsData } = useQuery({
+export function AgentDetail({agentId, liveStates}: AgentDetailProps) {
+	const {data: agentsData} = useQuery({
 		queryKey: ["agents"],
 		queryFn: api.agents,
 		refetchInterval: 30_000,
 	});
 
-	const { data: overviewData } = useQuery({
+	const {data: overviewData} = useQuery({
 		queryKey: ["agent-overview", agentId],
 		queryFn: () => api.agentOverview(agentId),
 		refetchInterval: 15_000,
 	});
 
-	const { data: configData } = useQuery({
+	const {data: configData} = useQuery({
 		queryKey: ["agent-config", agentId],
 		queryFn: () => api.agentConfig(agentId),
 		refetchInterval: 60_000,
 	});
 
-	const { data: identityData } = useQuery({
+	const {data: identityData} = useQuery({
 		queryKey: ["agent-identity", agentId],
 		queryFn: () => api.agentIdentity(agentId),
 		refetchInterval: 60_000,
 	});
 
-	const { data: channelsData } = useQuery({
+	const {data: channelsData} = useQuery({
 		queryKey: ["channels"],
 		queryFn: api.channels,
 		refetchInterval: 10_000,
@@ -72,7 +77,7 @@ export function AgentDetail({ agentId, liveStates }: AgentDetailProps) {
 			branches += Object.keys(live.branches).length;
 			if (live.isTyping) typing++;
 		}
-		return { workers, branches, typing };
+		return {workers, branches, typing};
 	}, [agentChannels, liveStates]);
 
 	const [deleteOpen, setDeleteOpen] = useState(false);
@@ -85,22 +90,27 @@ export function AgentDetail({ agentId, liveStates }: AgentDetailProps) {
 		);
 	}
 
-	const hasLiveActivity = activity.workers > 0 || activity.branches > 0 || activity.typing > 0;
+	const hasLiveActivity =
+		activity.workers > 0 || activity.branches > 0 || activity.typing > 0;
 
 	return (
 		<div className="h-full overflow-y-auto">
 			<div className="mx-auto max-w-6xl p-6 pb-24">
-			{/* Hero Section */}
-			<HeroSection
-				agentId={agentId}
-				displayName={agent.display_name}
-				channelCount={agentChannels.length}
-				workers={activity.workers}
-				branches={activity.branches}
-				hasLiveActivity={hasLiveActivity}
-				onDelete={() => setDeleteOpen(true)}
+				{/* Hero Section */}
+				<HeroSection
+					agentId={agentId}
+					displayName={agent.display_name}
+					channelCount={agentChannels.length}
+					workers={activity.workers}
+					branches={activity.branches}
+					hasLiveActivity={hasLiveActivity}
+					onDelete={() => setDeleteOpen(true)}
+				/>
+				<DeleteAgentDialog
+					open={deleteOpen}
+					onOpenChange={setDeleteOpen}
+					agentId={agentId}
 				/>
-				<DeleteAgentDialog open={deleteOpen} onOpenChange={setDeleteOpen} agentId={agentId} />
 
 				{/* Bulletin - the most important text */}
 				{overviewData?.latest_bulletin && (
@@ -111,28 +121,38 @@ export function AgentDetail({ agentId, liveStates }: AgentDetailProps) {
 				{overviewData && (
 					<div className="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-2">
 						{/* Memory Growth Chart */}
-						<div className="col-span-1 lg:col-span-2 rounded-xl bg-app-darkBox p-5">
+						<div className="col-span-1 lg:col-span-2 rounded-xl bg-app-dark-box p-5">
 							<div className="mb-4 flex items-center justify-between">
-								<h3 className="font-plex text-sm font-medium text-ink-dull">Memory Growth</h3>
+								<h3 className="font-plex text-sm font-medium text-ink-dull">
+									Memory Growth
+								</h3>
 								<span className="text-tiny text-ink-faint">Last 30 days</span>
 							</div>
 							<MemoryGrowthChart data={overviewData.memory_daily} />
 						</div>
 
 						{/* Activity Heatmap */}
-						<div className="rounded-xl bg-app-darkBox p-5">
+						<div className="rounded-xl bg-app-dark-box p-5">
 							<div className="mb-4 flex items-center justify-between">
-								<h3 className="font-plex text-sm font-medium text-ink-dull">Activity Heatmap</h3>
-								<span className="text-tiny text-ink-faint">Messages by day/hour</span>
+								<h3 className="font-plex text-sm font-medium text-ink-dull">
+									Activity Heatmap
+								</h3>
+								<span className="text-tiny text-ink-faint">
+									Messages by day/hour
+								</span>
 							</div>
 							<ActivityHeatmap data={overviewData.activity_heatmap} />
 						</div>
 
 						{/* Process Activity Chart */}
-						<div className="rounded-xl bg-app-darkBox p-5">
+						<div className="rounded-xl bg-app-dark-box p-5">
 							<div className="mb-4 flex items-center justify-between">
-								<h3 className="font-plex text-sm font-medium text-ink-dull">Process Activity</h3>
-								<span className="text-tiny text-ink-faint">Branches + Workers</span>
+								<h3 className="font-plex text-sm font-medium text-ink-dull">
+									Process Activity
+								</h3>
+								<span className="text-tiny text-ink-faint">
+									Branches + Workers
+								</span>
 							</div>
 							<ProcessActivityChart data={overviewData.activity_daily} />
 						</div>
@@ -143,12 +163,14 @@ export function AgentDetail({ agentId, liveStates }: AgentDetailProps) {
 				{overviewData && (
 					<div className="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-3">
 						{/* Memory Donut */}
-						<div className="rounded-xl bg-app-darkBox p-5">
+						<div className="rounded-xl bg-app-dark-box p-5">
 							<div className="mb-4 flex items-center justify-between">
-								<h3 className="font-plex text-sm font-medium text-ink-dull">Memory</h3>
+								<h3 className="font-plex text-sm font-medium text-ink-dull">
+									Memory
+								</h3>
 								<Link
 									to="/agents/$agentId/memories"
-									params={{ agentId }}
+									params={{agentId}}
 									className="text-tiny text-accent hover:text-accent/80"
 								>
 									Edit
@@ -159,13 +181,15 @@ export function AgentDetail({ agentId, liveStates }: AgentDetailProps) {
 
 						{/* Model Routing */}
 						{configData && (
-							<div className="flex h-full flex-col rounded-xl bg-app-darkBox p-5">
+							<div className="flex h-full flex-col rounded-xl bg-app-dark-box p-5">
 								<div className="mb-4 flex items-center justify-between">
-									<h3 className="font-plex text-sm font-medium text-ink-dull">Model Routing</h3>
+									<h3 className="font-plex text-sm font-medium text-ink-dull">
+										Model Routing
+									</h3>
 									<Link
 										to="/agents/$agentId/config"
-										params={{ agentId }}
-										search={{ tab: "routing" }}
+										params={{agentId}}
+										search={{tab: "routing"}}
 										className="text-tiny text-accent hover:text-accent/80"
 									>
 										Edit
@@ -178,22 +202,33 @@ export function AgentDetail({ agentId, liveStates }: AgentDetailProps) {
 						)}
 
 						{/* Quick Stats */}
-						<div className="flex h-full flex-col rounded-xl bg-app-darkBox p-5">
+						<div className="flex h-full flex-col rounded-xl bg-app-dark-box p-5">
 							<div className="mb-4 flex items-center justify-between">
-								<h3 className="font-plex text-sm font-medium text-ink-dull">Configuration</h3>
+								<h3 className="font-plex text-sm font-medium text-ink-dull">
+									Configuration
+								</h3>
 								<Link
 									to="/agents/$agentId/config"
-									params={{ agentId }}
+									params={{agentId}}
 									className="text-tiny text-accent hover:text-accent/80"
 								>
 									Edit
 								</Link>
 							</div>
 							<div className="flex flex-1 flex-col justify-evenly gap-2">
-								<StatRow label="Context Window" value={agent.context_window.toLocaleString()} />
+								<StatRow
+									label="Context Window"
+									value={agent.context_window.toLocaleString()}
+								/>
 								<StatRow label="Max Turns" value={String(agent.max_turns)} />
-								<StatRow label="Max Branches" value={String(agent.max_concurrent_branches)} />
-								<StatRow label="Max Workers" value={String(agent.max_concurrent_workers)} />
+								<StatRow
+									label="Max Branches"
+									value={String(agent.max_concurrent_branches)}
+								/>
+								<StatRow
+									label="Max Workers"
+									value={String(agent.max_concurrent_workers)}
+								/>
 								<StatRow label="Workspace" value={agent.workspace} truncate />
 							</div>
 						</div>
@@ -201,7 +236,9 @@ export function AgentDetail({ agentId, liveStates }: AgentDetailProps) {
 				)}
 
 				{/* Identity Preview */}
-				{identityData && <IdentitySection agentId={agentId} identity={identityData} />}
+				{identityData && (
+					<IdentitySection agentId={agentId} identity={identityData} />
+				)}
 
 				{/* Cron Jobs */}
 				{overviewData && overviewData.cron_jobs.length > 0 && (
@@ -209,13 +246,13 @@ export function AgentDetail({ agentId, liveStates }: AgentDetailProps) {
 				)}
 
 				{/* Recent Cortex Events */}
-			{overviewData && overviewData.recent_cortex_events.length > 0 && (
-				<CortexEventsSection
-					agentId={agentId}
-					events={overviewData.recent_cortex_events as CortexEvent[]}
-					lastBulletinAt={overviewData.last_bulletin_at ?? null}
-				/>
-			)}
+				{overviewData && overviewData.recent_cortex_events.length > 0 && (
+					<CortexEventsSection
+						agentId={agentId}
+						events={overviewData.recent_cortex_events as CortexEvent[]}
+						lastBulletinAt={overviewData.last_bulletin_at ?? null}
+					/>
+				)}
 			</div>
 		</div>
 	);
@@ -252,12 +289,16 @@ function HeroSection({
 					)}
 					<div className="mt-2 flex items-center gap-4 text-sm">
 						<div className="flex items-center gap-2">
-							<div className={`h-2 w-2 rounded-full ${hasLiveActivity ? "animate-pulse bg-amber-400" : "bg-green-500"}`} />
-							<span className="text-ink-dull">{hasLiveActivity ? "Active" : "Idle"}</span>
+							<div
+								className={`h-2 w-2 rounded-full ${hasLiveActivity ? "animate-pulse bg-amber-400" : "bg-green-500"}`}
+							/>
+							<span className="text-ink-dull">
+								{hasLiveActivity ? "Active" : "Idle"}
+							</span>
 						</div>
 						<Link
 							to="/agents/$agentId/channels"
-							params={{ agentId }}
+							params={{agentId}}
 							className="text-accent hover:text-accent/80"
 						>
 							{channelCount} channel{channelCount !== 1 ? "s" : ""}
@@ -277,13 +318,17 @@ function HeroSection({
 					{workers > 0 && (
 						<div className="flex items-center gap-2 rounded-full bg-amber-500/10 px-3 py-1.5 text-sm">
 							<div className="h-2 w-2 animate-pulse rounded-full bg-amber-400" />
-							<span className="font-medium text-amber-400">{workers} worker{workers !== 1 ? "s" : ""}</span>
+							<span className="font-medium text-amber-400">
+								{workers} worker{workers !== 1 ? "s" : ""}
+							</span>
 						</div>
 					)}
 					{branches > 0 && (
 						<div className="flex items-center gap-2 rounded-full bg-violet-500/10 px-3 py-1.5 text-sm">
 							<div className="h-2 w-2 animate-pulse rounded-full bg-violet-400" />
-							<span className="font-medium text-violet-400">{branches} branch{branches !== 1 ? "es" : ""}</span>
+							<span className="font-medium text-violet-400">
+								{branches} branch{branches !== 1 ? "es" : ""}
+							</span>
 						</div>
 					)}
 				</div>
@@ -292,17 +337,22 @@ function HeroSection({
 	);
 }
 
-function BulletinSection({ bulletin }: { bulletin: string }) {
+function BulletinSection({bulletin}: {bulletin: string}) {
 	const [expanded, setExpanded] = useState(false);
 	const lines = bulletin.split("\n");
 	const shouldTruncate = lines.length > 6;
-	const displayText = expanded || !shouldTruncate ? bulletin : lines.slice(0, 6).join("\n") + "\n...";
+	const displayText =
+		expanded || !shouldTruncate
+			? bulletin
+			: lines.slice(0, 6).join("\n") + "\n...";
 
 	return (
 		<div className="mt-6 rounded-xl border border-accent/20 bg-accent/5 p-5">
 			<div className="mb-3 flex items-center gap-2">
 				<div className="h-2 w-2 rounded-full bg-accent" />
-				<h3 className="font-plex text-sm font-medium text-accent">Latest Memory Bulletin</h3>
+				<h3 className="font-plex text-sm font-medium text-accent">
+					Latest Memory Bulletin
+				</h3>
 			</div>
 			<div className="whitespace-pre-wrap text-sm leading-relaxed text-ink-dull">
 				{displayText}
@@ -348,9 +398,13 @@ const MEMORY_TYPE_COLORS = [
 	"#ef4444", // todo - red
 ];
 
-function MemoryGrowthChart({ data }: { data: { date: string; count: number }[] }) {
+function MemoryGrowthChart({data}: {data: {date: string; count: number}[]}) {
 	if (data.length === 0) {
-		return <div className="h-48 flex items-center justify-center text-ink-faint text-sm">No data</div>;
+		return (
+			<div className="h-48 flex items-center justify-center text-ink-faint text-sm">
+				No data
+			</div>
+		);
 	}
 
 	// Calculate cumulative for area effect
@@ -358,7 +412,10 @@ function MemoryGrowthChart({ data }: { data: { date: string; count: number }[] }
 	const chartData = data.map((d) => {
 		cumulative += d.count;
 		return {
-			date: new Date(d.date).toLocaleDateString("en-US", { month: "short", day: "numeric" }),
+			date: new Date(d.date).toLocaleDateString("en-US", {
+				month: "short",
+				day: "numeric",
+			}),
 			daily: d.count,
 			total: cumulative,
 		};
@@ -366,26 +423,46 @@ function MemoryGrowthChart({ data }: { data: { date: string; count: number }[] }
 
 	return (
 		<div className="h-48 min-h-[192px]">
-			<ResponsiveContainer width="100%" height="100%" minWidth={100} minHeight={100}>
-				<AreaChart data={chartData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+			<ResponsiveContainer
+				width="100%"
+				height="100%"
+				minWidth={100}
+				minHeight={100}
+			>
+				<AreaChart
+					data={chartData}
+					margin={{top: 10, right: 10, left: 0, bottom: 0}}
+				>
 					<defs>
 						<linearGradient id="memoryGradient" x1="0" y1="0" x2="0" y2="1">
-							<stop offset="5%" stopColor={CHART_COLORS.accent} stopOpacity={0.4} />
-							<stop offset="95%" stopColor={CHART_COLORS.accent} stopOpacity={0.05} />
+							<stop
+								offset="5%"
+								stopColor={CHART_COLORS.accent}
+								stopOpacity={0.4}
+							/>
+							<stop
+								offset="95%"
+								stopColor={CHART_COLORS.accent}
+								stopOpacity={0.05}
+							/>
 						</linearGradient>
 					</defs>
-					<CartesianGrid stroke={CHART_COLORS.grid} strokeDasharray="3 3" vertical={false} />
+					<CartesianGrid
+						stroke={CHART_COLORS.grid}
+						strokeDasharray="3 3"
+						vertical={false}
+					/>
 					<XAxis
 						dataKey="date"
 						stroke={CHART_COLORS.axis}
-						tick={{ fill: CHART_COLORS.tick, fontSize: 11 }}
+						tick={{fill: CHART_COLORS.tick, fontSize: 11}}
 						tickLine={false}
-						axisLine={{ stroke: CHART_COLORS.grid }}
+						axisLine={{stroke: CHART_COLORS.grid}}
 						minTickGap={30}
 					/>
 					<YAxis
 						stroke={CHART_COLORS.axis}
-						tick={{ fill: CHART_COLORS.tick, fontSize: 11 }}
+						tick={{fill: CHART_COLORS.tick, fontSize: 11}}
 						tickLine={false}
 						axisLine={false}
 					/>
@@ -396,9 +473,9 @@ function MemoryGrowthChart({ data }: { data: { date: string; count: number }[] }
 							borderRadius: "6px",
 							fontSize: "12px",
 						}}
-						labelStyle={{ color: CHART_COLORS.tick }}
-						itemStyle={{ color: CHART_COLORS.tooltip.text }}
-						cursor={{ stroke: CHART_COLORS.axis }}
+						labelStyle={{color: CHART_COLORS.tick}}
+						itemStyle={{color: CHART_COLORS.tooltip.text}}
+						cursor={{stroke: CHART_COLORS.axis}}
 					/>
 					<Area
 						type="monotone"
@@ -414,43 +491,82 @@ function MemoryGrowthChart({ data }: { data: { date: string; count: number }[] }
 	);
 }
 
-function ProcessActivityChart({ data }: { data: { date: string; branches: number; workers: number }[] }) {
+function ProcessActivityChart({
+	data,
+}: {
+	data: {date: string; branches: number; workers: number}[];
+}) {
 	if (data.length === 0) {
-		return <div className="h-48 flex items-center justify-center text-ink-faint text-sm">No activity</div>;
+		return (
+			<div className="h-48 flex items-center justify-center text-ink-faint text-sm">
+				No activity
+			</div>
+		);
 	}
 
 	const chartData = data.map((d) => ({
-		date: new Date(d.date).toLocaleDateString("en-US", { month: "short", day: "numeric" }),
+		date: new Date(d.date).toLocaleDateString("en-US", {
+			month: "short",
+			day: "numeric",
+		}),
 		branches: d.branches,
 		workers: d.workers,
 	}));
 
 	return (
 		<div className="h-48 min-h-[192px]">
-			<ResponsiveContainer width="100%" height="100%" minWidth={100} minHeight={100}>
-				<AreaChart data={chartData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+			<ResponsiveContainer
+				width="100%"
+				height="100%"
+				minWidth={100}
+				minHeight={100}
+			>
+				<AreaChart
+					data={chartData}
+					margin={{top: 10, right: 10, left: 0, bottom: 0}}
+				>
 					<defs>
 						<linearGradient id="branchGradient" x1="0" y1="0" x2="0" y2="1">
-							<stop offset="5%" stopColor={CHART_COLORS.violet} stopOpacity={0.4} />
-							<stop offset="95%" stopColor={CHART_COLORS.violet} stopOpacity={0.05} />
+							<stop
+								offset="5%"
+								stopColor={CHART_COLORS.violet}
+								stopOpacity={0.4}
+							/>
+							<stop
+								offset="95%"
+								stopColor={CHART_COLORS.violet}
+								stopOpacity={0.05}
+							/>
 						</linearGradient>
 						<linearGradient id="workerGradient" x1="0" y1="0" x2="0" y2="1">
-							<stop offset="5%" stopColor={CHART_COLORS.amber} stopOpacity={0.4} />
-							<stop offset="95%" stopColor={CHART_COLORS.amber} stopOpacity={0.05} />
+							<stop
+								offset="5%"
+								stopColor={CHART_COLORS.amber}
+								stopOpacity={0.4}
+							/>
+							<stop
+								offset="95%"
+								stopColor={CHART_COLORS.amber}
+								stopOpacity={0.05}
+							/>
 						</linearGradient>
 					</defs>
-					<CartesianGrid stroke={CHART_COLORS.grid} strokeDasharray="3 3" vertical={false} />
+					<CartesianGrid
+						stroke={CHART_COLORS.grid}
+						strokeDasharray="3 3"
+						vertical={false}
+					/>
 					<XAxis
 						dataKey="date"
 						stroke={CHART_COLORS.axis}
-						tick={{ fill: CHART_COLORS.tick, fontSize: 11 }}
+						tick={{fill: CHART_COLORS.tick, fontSize: 11}}
 						tickLine={false}
-						axisLine={{ stroke: CHART_COLORS.grid }}
+						axisLine={{stroke: CHART_COLORS.grid}}
 						minTickGap={30}
 					/>
 					<YAxis
 						stroke={CHART_COLORS.axis}
-						tick={{ fill: CHART_COLORS.tick, fontSize: 11 }}
+						tick={{fill: CHART_COLORS.tick, fontSize: 11}}
 						tickLine={false}
 						axisLine={false}
 					/>
@@ -461,9 +577,9 @@ function ProcessActivityChart({ data }: { data: { date: string; branches: number
 							borderRadius: "6px",
 							fontSize: "12px",
 						}}
-						labelStyle={{ color: CHART_COLORS.tick }}
-						itemStyle={{ color: CHART_COLORS.tooltip.text }}
-						cursor={{ stroke: CHART_COLORS.axis }}
+						labelStyle={{color: CHART_COLORS.tick}}
+						itemStyle={{color: CHART_COLORS.tooltip.text}}
+						cursor={{stroke: CHART_COLORS.axis}}
 					/>
 					<Area
 						type="monotone"
@@ -487,14 +603,22 @@ function ProcessActivityChart({ data }: { data: { date: string; branches: number
 	);
 }
 
-function ActivityHeatmap({ data }: { data: { day: number; hour: number; count: number }[] }) {
+function ActivityHeatmap({
+	data,
+}: {
+	data: {day: number; hour: number; count: number}[];
+}) {
 	if (data.length === 0) {
-		return <div className="h-48 flex items-center justify-center text-ink-faint text-sm">No activity data</div>;
+		return (
+			<div className="h-48 flex items-center justify-center text-ink-faint text-sm">
+				No activity data
+			</div>
+		);
 	}
 
 	const maxCount = Math.max(...data.map((d) => d.count), 1);
 	const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-	const hours = Array.from({ length: 24 }, (_value, index) => index);
+	const hours = Array.from({length: 24}, (_value, index) => index);
 
 	const getCell = (day: number, hour: number) => {
 		const cell = data.find((d) => d.day === day && d.hour === hour);
@@ -518,7 +642,10 @@ function ActivityHeatmap({ data }: { data: { day: number; hour: number; count: n
 					))}
 				</div>
 				{days.map((dayLabel, day) => (
-					<div key={day} className="grid grid-cols-[2rem_repeat(24,minmax(0,1fr))] items-center gap-1">
+					<div
+						key={day}
+						className="grid grid-cols-[2rem_repeat(24,minmax(0,1fr))] items-center gap-1"
+					>
 						<div className="text-[10px] text-ink-faint">{dayLabel}</div>
 						{hours.map((hour) => {
 							const count = getCell(day, hour);
@@ -527,7 +654,7 @@ function ActivityHeatmap({ data }: { data: { day: number; hour: number; count: n
 									key={hour}
 									title={`${dayLabel} ${hour}:00 - ${count} messages`}
 									className="h-3.5 w-full rounded-sm bg-accent transition-opacity hover:ring-1 hover:ring-accent"
-									style={{ opacity: getOpacity(count) }}
+									style={{opacity: getOpacity(count)}}
 								/>
 							);
 						})}
@@ -538,7 +665,7 @@ function ActivityHeatmap({ data }: { data: { day: number; hour: number; count: n
 	);
 }
 
-function MemoryDonut({ counts }: { counts: Record<string, number> }) {
+function MemoryDonut({counts}: {counts: Record<string, number>}) {
 	const data = MEMORY_TYPES.map((type, idx) => ({
 		name: type,
 		value: counts[type] ?? 0,
@@ -547,13 +674,22 @@ function MemoryDonut({ counts }: { counts: Record<string, number> }) {
 	const total = data.reduce((sum, item) => sum + item.value, 0);
 
 	if (data.length === 0) {
-		return <div className="h-48 flex items-center justify-center text-ink-faint text-sm">No memories</div>;
+		return (
+			<div className="h-48 flex items-center justify-center text-ink-faint text-sm">
+				No memories
+			</div>
+		);
 	}
 
 	return (
-			<div>
+		<div>
 			<div className="relative h-40 min-h-[160px]">
-				<ResponsiveContainer width="100%" height="100%" minWidth={100} minHeight={100}>
+				<ResponsiveContainer
+					width="100%"
+					height="100%"
+					minWidth={100}
+					minHeight={100}
+				>
 					<PieChart>
 						<Pie
 							data={data}
@@ -578,21 +714,30 @@ function MemoryDonut({ counts }: { counts: Record<string, number> }) {
 								fontSize: "12px",
 								padding: "4px 6px",
 							}}
-							wrapperStyle={{ zIndex: 20 }}
-							labelStyle={{ display: "none" }}
-							itemStyle={{ color: CHART_COLORS.tooltip.text, margin: 0, lineHeight: 1.2 }}
+							wrapperStyle={{zIndex: 20}}
+							labelStyle={{display: "none"}}
+							itemStyle={{
+								color: CHART_COLORS.tooltip.text,
+								margin: 0,
+								lineHeight: 1.2,
+							}}
 						/>
 					</PieChart>
 				</ResponsiveContainer>
 				<div className="pointer-events-none absolute inset-0 z-0 flex flex-col items-center justify-center">
-					<span className="text-2xl font-medium tabular-nums text-ink">{total}</span>
+					<span className="text-2xl font-medium tabular-nums text-ink">
+						{total}
+					</span>
 					<span className="text-tiny text-ink-faint">total</span>
 				</div>
 			</div>
 			<div className="mt-2 flex flex-wrap justify-center gap-2">
 				{data.map((item) => (
 					<div key={item.name} className="flex items-center gap-1.5 text-tiny">
-						<div className="h-2 w-2 rounded-full" style={{ backgroundColor: item.color }} />
+						<div
+							className="h-2 w-2 rounded-full"
+							style={{backgroundColor: item.color}}
+						/>
 						<span className="text-ink-faint">{item.name}</span>
 						<span className="tabular-nums text-ink-dull">{item.value}</span>
 					</div>
@@ -604,21 +749,40 @@ function MemoryDonut({ counts }: { counts: Record<string, number> }) {
 
 // -- List Components --
 
-function ModelRoutingList({ config }: { config: { routing: { channel: string; branch: string; worker: string; compactor: string; cortex: string } } }) {
+function ModelRoutingList({
+	config,
+}: {
+	config: {
+		routing: {
+			channel: string;
+			branch: string;
+			worker: string;
+			compactor: string;
+			cortex: string;
+		};
+	};
+}) {
 	const models = [
-		{ label: "Channel", model: config.routing.channel, color: "text-green-400" },
-		{ label: "Branch", model: config.routing.branch, color: "text-violet-400" },
-		{ label: "Worker", model: config.routing.worker, color: "text-amber-400" },
-		{ label: "Compactor", model: config.routing.compactor, color: "text-blue-400" },
-		{ label: "Cortex", model: config.routing.cortex, color: "text-pink-400" },
+		{label: "Channel", model: config.routing.channel, color: "text-green-400"},
+		{label: "Branch", model: config.routing.branch, color: "text-violet-400"},
+		{label: "Worker", model: config.routing.worker, color: "text-amber-400"},
+		{
+			label: "Compactor",
+			model: config.routing.compactor,
+			color: "text-blue-400",
+		},
+		{label: "Cortex", model: config.routing.cortex, color: "text-pink-400"},
 	];
 
 	return (
 		<div className="flex h-full flex-col justify-evenly gap-2">
-			{models.map(({ label, model, color }) => (
+			{models.map(({label, model, color}) => (
 				<div key={label} className="flex items-center justify-between">
 					<span className="text-tiny text-ink-faint">{label}</span>
-					<span className={`text-sm ${color} truncate max-w-[140px]`} title={model}>
+					<span
+						className={`text-sm ${color} truncate max-w-[140px]`}
+						title={model}
+					>
 						{formatModelName(model)}
 					</span>
 				</div>
@@ -627,11 +791,22 @@ function ModelRoutingList({ config }: { config: { routing: { channel: string; br
 	);
 }
 
-function StatRow({ label, value, truncate }: { label: string; value: string; truncate?: boolean }) {
+function StatRow({
+	label,
+	value,
+	truncate,
+}: {
+	label: string;
+	value: string;
+	truncate?: boolean;
+}) {
 	return (
 		<div className="flex items-center justify-between">
 			<span className="text-tiny text-ink-faint">{label}</span>
-			<span className={`text-sm text-ink-dull ${truncate ? "truncate max-w-[200px]" : ""}`} title={value}>
+			<span
+				className={`text-sm text-ink-dull ${truncate ? "truncate max-w-[200px]" : ""}`}
+				title={value}
+			>
 				{value}
 			</span>
 		</div>
@@ -640,7 +815,10 @@ function StatRow({ label, value, truncate }: { label: string; value: string; tru
 
 function formatModelName(model: string): string {
 	const name = model.includes("/") ? model.split("/").pop()! : model;
-	return name.replace(/-\d{8}$/, "").replace(/claude-/, "claude-").replace(/-202[0-9]+/, "");
+	return name
+		.replace(/-\d{8}$/, "")
+		.replace(/claude-/, "claude-")
+		.replace(/-202[0-9]+/, "");
 }
 
 // -- Other Sections --
@@ -650,33 +828,40 @@ function IdentitySection({
 	identity,
 }: {
 	agentId: string;
-	identity: { soul: string | null; identity: string | null; role: string | null };
+	identity: {soul: string | null; identity: string | null; role: string | null};
 }) {
 	const hasContent = identity.soul || identity.identity || identity.role;
 	if (!hasContent) return null;
 
 	const files = [
-		{ label: "SOUL.md", tab: "soul", content: identity.soul },
-		{ label: "IDENTITY.md", tab: "identity", content: identity.identity },
-		{ label: "ROLE.md", tab: "role", content: identity.role },
-	].filter((f) => f.content && f.content.trim().length > 0 && !f.content.startsWith("<!--"));
+		{label: "SOUL.md", tab: "soul", content: identity.soul},
+		{label: "IDENTITY.md", tab: "identity", content: identity.identity},
+		{label: "ROLE.md", tab: "role", content: identity.role},
+	].filter(
+		(f) =>
+			f.content && f.content.trim().length > 0 && !f.content.startsWith("<!--"),
+	);
 
 	if (files.length === 0) return null;
 
 	return (
 		<section className="mt-6">
 			<div className="mb-3">
-				<h3 className="font-plex text-sm font-medium text-ink-dull">Identity</h3>
+				<h3 className="font-plex text-sm font-medium text-ink-dull">
+					Identity
+				</h3>
 			</div>
 			<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-				{files.map(({ label, tab, content }) => (
-					<div key={label} className="rounded-xl bg-app-darkBox p-4">
+				{files.map(({label, tab, content}) => (
+					<div key={label} className="rounded-xl bg-app-dark-box p-4">
 						<div className="flex items-center justify-between gap-3">
-							<span className="text-tiny font-medium text-ink-faint">{label}</span>
+							<span className="text-tiny font-medium text-ink-faint">
+								{label}
+							</span>
 							<Link
 								to="/agents/$agentId/config"
-								params={{ agentId }}
-								search={{ tab }}
+								params={{agentId}}
+								search={{tab}}
 								className="text-tiny text-accent hover:text-accent/80"
 							>
 								Edit
@@ -692,14 +877,16 @@ function IdentitySection({
 	);
 }
 
-function CronSection({ agentId, jobs }: { agentId: string; jobs: CronJobInfo[] }) {
+function CronSection({agentId, jobs}: {agentId: string; jobs: CronJobInfo[]}) {
 	return (
 		<section className="mt-6">
 			<div className="mb-3 flex items-center justify-between">
-				<h3 className="font-plex text-sm font-medium text-ink-dull">Cron Jobs</h3>
+				<h3 className="font-plex text-sm font-medium text-ink-dull">
+					Cron Jobs
+				</h3>
 				<Link
 					to="/agents/$agentId/cron"
-					params={{ agentId }}
+					params={{agentId}}
 					className="text-tiny text-accent hover:text-accent/80"
 				>
 					Manage
@@ -709,24 +896,30 @@ function CronSection({ agentId, jobs }: { agentId: string; jobs: CronJobInfo[] }
 				{jobs.map((job) => (
 					<div
 						key={job.id}
-						className="flex items-center gap-3 rounded-xl bg-app-darkBox px-4 py-3"
+						className="flex items-center gap-3 rounded-xl bg-app-dark-box px-4 py-3"
 					>
 						<div
 							className={`h-2 w-2 rounded-full ${job.enabled ? "bg-green-500" : "bg-gray-500"}`}
 							title={job.enabled ? "Enabled" : "Disabled"}
 						/>
-						<span className="min-w-0 flex-1 truncate text-sm text-ink-dull" title={job.prompt}>
+						<span
+							className="min-w-0 flex-1 truncate text-sm text-ink-dull"
+							title={job.prompt}
+						>
 							{job.prompt}
 						</span>
-					<code className="rounded bg-app-lightBox/60 px-1.5 py-0.5 font-mono text-tiny text-ink-faint">
-						{formatCronSchedule(job.cron_expr ?? null, job.interval_secs)}
-					</code>
+						<code className="rounded bg-app-lightBox/60 px-1.5 py-0.5 font-mono text-tiny text-ink-faint">
+							{formatCronSchedule(job.cron_expr ?? null, job.interval_secs)}
+						</code>
 						{job.active_hours && (
 							<span className="text-tiny text-ink-faint">
-								{String(job.active_hours[0]).padStart(2, "0")}:00-{String(job.active_hours[1]).padStart(2, "0")}:00
+								{String(job.active_hours[0]).padStart(2, "0")}:00-
+								{String(job.active_hours[1]).padStart(2, "0")}:00
 							</span>
 						)}
-						<span className="text-tiny text-ink-faint">{job.delivery_target}</span>
+						<span className="text-tiny text-ink-faint">
+							{job.delivery_target}
+						</span>
 					</div>
 				))}
 			</div>
@@ -762,7 +955,9 @@ function CortexEventsSection({
 	return (
 		<section className="mt-6">
 			<div className="mb-3 flex items-center justify-between">
-				<h3 className="font-plex text-sm font-medium text-ink-dull">Recent Cortex Events</h3>
+				<h3 className="font-plex text-sm font-medium text-ink-dull">
+					Recent Cortex Events
+				</h3>
 				<div className="flex items-center gap-4">
 					{lastBulletinAt && (
 						<span className="text-tiny text-ink-faint">
@@ -771,19 +966,21 @@ function CortexEventsSection({
 					)}
 					<Link
 						to="/agents/$agentId/cortex"
-						params={{ agentId }}
+						params={{agentId}}
 						className="text-tiny text-accent hover:text-accent/80"
 					>
 						View all
 					</Link>
 				</div>
 			</div>
-			<div className="rounded-xl bg-app-darkBox p-4">
+			<div className="rounded-xl bg-app-dark-box p-4">
 				<div className="flex flex-col gap-2">
 					{events.map((event) => (
 						<div key={event.id} className="flex items-center gap-3 text-sm">
 							<CortexEventBadge type={event.event_type} />
-							<span className="min-w-0 flex-1 truncate text-ink-dull">{event.summary}</span>
+							<span className="min-w-0 flex-1 truncate text-ink-dull">
+								{event.summary}
+							</span>
 							<span className="flex-shrink-0 text-tiny tabular-nums text-ink-faint">
 								{formatTimeAgo(event.created_at)}
 							</span>
@@ -795,7 +992,7 @@ function CortexEventsSection({
 	);
 }
 
-function CortexEventBadge({ type }: { type: string }) {
+function CortexEventBadge({type}: {type: string}) {
 	const color = CORTEX_EVENT_COLORS[type] ?? "bg-gray-500/20 text-gray-400";
 	const label = type.replace(/_/g, " ");
 	return (
diff --git a/interface/src/routes/AgentIngest.tsx b/interface/src/routes/AgentIngest.tsx
index 582569093..5c4a1c87f 100644
--- a/interface/src/routes/AgentIngest.tsx
+++ b/interface/src/routes/AgentIngest.tsx
@@ -2,7 +2,7 @@ import {useState, useRef, useCallback} from "react";
 import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
 import {api, type IngestFileInfo} from "@/api/client";
 import {formatTimeAgo} from "@/lib/format";
-import {Badge} from "@/ui";
+import {Badge} from "@spacedrive/primitives";
 import {clsx} from "clsx";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faTrash} from "@fortawesome/free-solid-svg-icons";
@@ -15,10 +15,10 @@ function formatFileSize(bytes: number): string {
 
 function StatusBadge({status}: {status: IngestFileInfo["status"]}) {
 	const styles: Record<string, string> = {
-		queued: "bg-amber-500/20 text-amber-400",
-		processing: "bg-blue-500/20 text-blue-400",
-		completed: "bg-green-500/20 text-green-400",
-		failed: "bg-red-500/20 text-red-400",
+		queued: "bg-status-warning/20 text-status-warning",
+		processing: "bg-status-info/20 text-status-info",
+		completed: "bg-status-success/20 text-status-success",
+		failed: "bg-status-error/20 text-status-error",
 	};
 	return (
 		<span
@@ -26,7 +26,7 @@ function StatusBadge({status}: {status: IngestFileInfo["status"]}) {
 		>
 			{(status === "processing" || status === "queued") && (
 				<span
-					className={`mr-1.5 h-1.5 w-1.5 animate-pulse rounded-full ${status === "queued" ? "bg-amber-400" : "bg-blue-400"}`}
+					className={`mr-1.5 h-1.5 w-1.5 animate-pulse rounded-full ${status === "queued" ? "bg-status-warning" : "bg-status-info"}`}
 				/>
 			)}
 			{status}
@@ -129,7 +129,7 @@ export function AgentIngest({agentId}: AgentIngestProps) {
 					{files.length} total
 				</Badge>
 				{queued > 0 && (
-					<Badge variant="amber" size="md">
+					<Badge variant="warning" size="md">
 						{queued} queued
 					</Badge>
 				)}
@@ -138,11 +138,11 @@ export function AgentIngest({agentId}: AgentIngestProps) {
 						{processing} processing
 					</Badge>
 				)}
-				<Badge variant="green" size="md">
+				<Badge variant="success" size="md">
 					{completed} completed
 				</Badge>
 				{failed > 0 && (
-					<Badge variant="red" size="md">
+					<Badge variant="error" size="md">
 						{failed} failed
 					</Badge>
 				)}
@@ -258,7 +258,7 @@ function FileRow({
 			: 0;
 
 	return (
-		<div className="group flex items-center gap-4 rounded-lg border border-app-line bg-app-darkBox/30 px-4 py-3">
+		<div className="group flex items-center gap-4 rounded-lg border border-app-line bg-app-dark-box/30 px-4 py-3">
 			{/* File icon */}
 			<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-app-box text-xs text-ink-faint">
 				{file.filename.split(".").pop()?.toUpperCase() ?? "TXT"}
diff --git a/interface/src/routes/AgentMemories.tsx b/interface/src/routes/AgentMemories.tsx
index 579aebb1f..2649653e6 100644
--- a/interface/src/routes/AgentMemories.tsx
+++ b/interface/src/routes/AgentMemories.tsx
@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { AnimatePresence, motion } from "framer-motion";
+import {useCallback, useEffect, useRef, useState} from "react";
+import {useQuery} from "@tanstack/react-query";
+import {useVirtualizer} from "@tanstack/react-virtual";
+import {AnimatePresence, motion} from "framer-motion";
 import {
 	api,
 	MEMORY_TYPES,
@@ -9,28 +9,26 @@ import {
 	type MemorySort,
 	type MemoryType,
 } from "@/api/client";
-import { CortexChatPanel } from "@/components/CortexChatPanel";
-import { MemoryGraph } from "@/components/MemoryGraph";
+import {MemoryGraph} from "@/components/MemoryGraph";
 import {
-	Button,
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-	ToggleGroup,
-	SearchInput,
+	CircleButton,
+	CircleButtonGroup,
+	SearchBar,
 	FilterButton,
-} from "@/ui";
-import { formatTimeAgo } from "@/lib/format";
-import { ArrowDown01Icon, LeftToRightListBulletIcon, WorkflowSquare01Icon, IdeaIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
+	SelectPill,
+	Popover,
+	OptionList,
+	OptionListItem,
+} from "@spacedrive/primitives";
+import {formatTimeAgo} from "@/lib/format";
+import {List, TreeStructure} from "@phosphor-icons/react";
 
 type ViewMode = "list" | "graph";
 
-const SORT_OPTIONS: { value: MemorySort; label: string }[] = [
-	{ value: "recent", label: "Recent" },
-	{ value: "importance", label: "Importance" },
-	{ value: "most_accessed", label: "Most Accessed" },
+const SORT_OPTIONS: {value: MemorySort; label: string}[] = [
+	{value: "recent", label: "Recent"},
+	{value: "importance", label: "Importance"},
+	{value: "most_accessed", label: "Most Accessed"},
 ];
 
 const TYPE_COLORS: Record<MemoryType, string> = {
@@ -44,21 +42,23 @@ const TYPE_COLORS: Record<MemoryType, string> = {
 	todo: "bg-red-500/15 text-red-400",
 };
 
-function TypeBadge({ type: memoryType }: { type: MemoryType }) {
+function TypeBadge({type: memoryType}: {type: MemoryType}) {
 	return (
-		<span className={`inline-flex items-center rounded px-1.5 py-0.5 text-tiny font-medium ${TYPE_COLORS[memoryType]}`}>
+		<span
+			className={`inline-flex items-center rounded px-1.5 py-0.5 text-tiny font-medium ${TYPE_COLORS[memoryType]}`}
+		>
 			{memoryType}
 		</span>
 	);
 }
 
-function ImportanceBar({ value }: { value: number }) {
+function ImportanceBar({value}: {value: number}) {
 	return (
 		<div className="flex items-center gap-1.5">
-			<div className="h-1.5 w-16 overflow-hidden rounded-full bg-app-darkBox">
+			<div className="h-1.5 w-16 overflow-hidden rounded-full bg-app-dark-box">
 				<div
 					className="h-full rounded-full bg-accent/60"
-					style={{ width: `${Math.round(value * 100)}%` }}
+					style={{width: `${Math.round(value * 100)}%`}}
 				/>
 			</div>
 			<span className="text-tiny text-ink-faint">{value.toFixed(2)}</span>
@@ -70,14 +70,14 @@ interface AgentMemoriesProps {
 	agentId: string;
 }
 
-export function AgentMemories({ agentId }: AgentMemoriesProps) {
+export function AgentMemories({agentId}: AgentMemoriesProps) {
 	const [viewMode, setViewMode] = useState<ViewMode>("list");
 	const [searchQuery, setSearchQuery] = useState("");
 	const [debouncedQuery, setDebouncedQuery] = useState("");
 	const [sort, setSort] = useState<MemorySort>("recent");
 	const [typeFilter, setTypeFilter] = useState<MemoryType | null>(null);
 	const [expandedId, setExpandedId] = useState<string | null>(null);
-	const [chatOpen, setChatOpen] = useState(true);
+	const [sortOpen, setSortOpen] = useState(false);
 
 	const parentRef = useRef<HTMLDivElement>(null);
 
@@ -121,19 +121,27 @@ export function AgentMemories({ agentId }: AgentMemoriesProps) {
 
 	const scores: Record<string, number> | null = isSearching
 		? Object.fromEntries(
-				(searchQueryResult.data?.results ?? []).map((r) => [r.memory.id, r.score]),
+				(searchQueryResult.data?.results ?? []).map((r) => [
+					r.memory.id,
+					r.score,
+				]),
 			)
 		: null;
 
-	const isLoading = isSearching ? searchQueryResult.isLoading : listQuery.isLoading;
+	const isLoading = isSearching
+		? searchQueryResult.isLoading
+		: listQuery.isLoading;
 	const isError = isSearching ? searchQueryResult.isError : listQuery.isError;
 
 	const virtualizer = useVirtualizer({
 		count: memories.length,
 		getScrollElement: () => parentRef.current,
-		estimateSize: useCallback((index: number) => {
-			return expandedId === memories[index]?.id ? 200 : 48;
-		}, [expandedId, memories]),
+		estimateSize: useCallback(
+			(index: number) => {
+				return expandedId === memories[index]?.id ? 200 : 48;
+			},
+			[expandedId, memories],
+		),
 		overscan: 10,
 	});
 
@@ -143,59 +151,61 @@ export function AgentMemories({ agentId }: AgentMemoriesProps) {
 	}, [debouncedQuery, sort, typeFilter]);
 
 	return (
-		<div className="flex h-full">
-			<div className="flex flex-1 flex-col overflow-hidden">
+		<div className="flex h-full flex-col overflow-hidden">
 			{/* Toolbar */}
-			<div className="flex items-center gap-3 border-b border-app-line/50 bg-app-darkBox/20 px-6 py-3">
+			<div className="flex items-center gap-3 border-b border-app-line/50 bg-app-dark-box/20 px-6 py-3">
 				{/* Search */}
-				<SearchInput
+				<SearchBar
 					placeholder="Search memories..."
 					value={searchQuery}
-					onChange={(event) => setSearchQuery(event.target.value)}
+					onChange={setSearchQuery}
 					className="flex-1"
 				/>
 
-				{/* Sort dropdown */}
-				<DropdownMenu>
-				<DropdownMenuTrigger className="flex items-center gap-1.5 rounded-md border border-app-line bg-app-darkBox px-2.5 py-1.5 text-sm text-ink-dull transition-colors hover:bg-app-selected hover:text-ink data-[state=open]:bg-app-selected data-[state=open]:text-ink">
-					{SORT_OPTIONS.find((o) => o.value === sort)?.label ?? sort}
-					<HugeiconsIcon icon={ArrowDown01Icon} className="h-3 w-3 text-ink-faint" />
-				</DropdownMenuTrigger>
-					<DropdownMenuContent align="end">
-						{SORT_OPTIONS.map((option) => (
-							<DropdownMenuItem
-								key={option.value}
-								onClick={() => setSort(option.value)}
-								className={option.value === sort ? "bg-app-hover text-ink !bg-app-hover" : ""}
-							>
-								{option.label}
-							</DropdownMenuItem>
-						))}
-					</DropdownMenuContent>
-				</DropdownMenu>
-
-			{/* View mode toggle */}
-			<ToggleGroup
-				value={viewMode}
-				onChange={setViewMode}
-				options={[
-					{ value: "list", label: <HugeiconsIcon icon={LeftToRightListBulletIcon} className="h-3.5 w-3.5" />, title: "List view" },
-					{ value: "graph", label: <HugeiconsIcon icon={WorkflowSquare01Icon} className="h-3.5 w-3.5" />, title: "Graph view" },
-				]}
-			/>
+				{/* Sort pill */}
+				<Popover.Root open={sortOpen} onOpenChange={setSortOpen}>
+					<Popover.Trigger asChild>
+						<SelectPill>
+							{SORT_OPTIONS.find((o) => o.value === sort)?.label ?? sort}
+						</SelectPill>
+					</Popover.Trigger>
+					<Popover.Content
+						align="end"
+						sideOffset={8}
+						className="min-w-[160px] p-2"
+					>
+						<OptionList>
+							{SORT_OPTIONS.map((option) => (
+								<OptionListItem
+									key={option.value}
+									selected={option.value === sort}
+									onClick={() => {
+										setSort(option.value);
+										setSortOpen(false);
+									}}
+								>
+									{option.label}
+								</OptionListItem>
+							))}
+						</OptionList>
+					</Popover.Content>
+				</Popover.Root>
 
-			{/* Cortex chat toggle */}
-			<div className="flex overflow-hidden rounded-md border border-app-line bg-app-darkBox">
-				<Button
-					onClick={() => setChatOpen(!chatOpen)}
-					variant={chatOpen ? "secondary" : "ghost"}
-					size="icon"
-					className={chatOpen ? "bg-app-selected text-ink" : ""}
-					title="Toggle cortex chat"
-				>
-					<HugeiconsIcon icon={IdeaIcon} className="h-4 w-4" />
-				</Button>
-			</div>
+				{/* View mode toggle */}
+				<CircleButtonGroup>
+					<CircleButton
+						icon={List}
+						onClick={() => setViewMode("list")}
+						variant={viewMode === "list" ? "active" : "default"}
+						title="List view"
+					/>
+					<CircleButton
+						icon={TreeStructure}
+						onClick={() => setViewMode("graph")}
+						variant={viewMode === "graph" ? "active" : "default"}
+						title="Graph view"
+					/>
+				</CircleButtonGroup>
 			</div>
 
 			{/* Type filter pills */}
@@ -211,7 +221,7 @@ export function AgentMemories({ agentId }: AgentMemoriesProps) {
 						key={type_}
 						onClick={() => setTypeFilter(typeFilter === type_ ? null : type_)}
 						active={typeFilter === type_}
-						colorClass={TYPE_COLORS[type_]}
+
 					>
 						{type_}
 					</FilterButton>
@@ -258,7 +268,7 @@ export function AgentMemories({ agentId }: AgentMemoriesProps) {
 						<div ref={parentRef} className="flex-1 overflow-y-auto">
 							<div
 								className="relative w-full"
-								style={{ height: virtualizer.getTotalSize() }}
+								style={{height: virtualizer.getTotalSize()}}
 							>
 								{virtualizer.getVirtualItems().map((virtualRow) => {
 									const memory = memories[virtualRow.index];
@@ -272,13 +282,15 @@ export function AgentMemories({ agentId }: AgentMemoriesProps) {
 											data-index={virtualRow.index}
 											ref={virtualizer.measureElement}
 											className="absolute left-0 top-0 w-full"
-											style={{ transform: `translateY(${virtualRow.start}px)` }}
-										>
-										<Button
-											onClick={() => setExpandedId(isExpanded ? null : memory.id)}
-											variant="ghost"
-											className="grid h-auto w-full grid-cols-[80px_1fr_100px_120px_100px] items-center gap-3 rounded-none px-6 py-3 text-left hover:bg-app-darkBox/30"
+											style={{transform: `translateY(${virtualRow.start}px)`}}
 										>
+											<button
+												type="button"
+												onClick={() =>
+													setExpandedId(isExpanded ? null : memory.id)
+												}
+												className="grid w-full grid-cols-[80px_1fr_100px_120px_100px] items-center gap-3 px-6 py-3 text-left transition-colors hover:bg-app-hover"
+											>
 												<TypeBadge type={memory.memory_type} />
 												<div className="min-w-0">
 													<p className="truncate text-sm text-ink-dull">
@@ -297,17 +309,21 @@ export function AgentMemories({ agentId }: AgentMemoriesProps) {
 												<span className="text-tiny text-ink-faint">
 													{formatTimeAgo(memory.created_at)}
 												</span>
-											</Button>
+											</button>
 
 											{/* Expanded detail */}
 											<AnimatePresence>
 												{isExpanded && (
 													<motion.div
-														initial={{ height: 0, opacity: 0 }}
-														animate={{ height: "auto", opacity: 1 }}
-														exit={{ height: 0, opacity: 0 }}
-														transition={{ type: "spring", stiffness: 500, damping: 35 }}
-														className="overflow-hidden border-t border-app-line/30 bg-app-darkBox/20 px-6"
+														initial={{height: 0, opacity: 0}}
+														animate={{height: "auto", opacity: 1}}
+														exit={{height: 0, opacity: 0}}
+														transition={{
+															type: "spring",
+															stiffness: 500,
+															damping: 35,
+														}}
+														className="overflow-hidden border-t border-app-line/30 bg-app-dark-box/20 px-6"
 													>
 														<div className="py-4">
 															<p className="whitespace-pre-wrap text-sm leading-relaxed text-ink-dull">
@@ -316,8 +332,13 @@ export function AgentMemories({ agentId }: AgentMemoriesProps) {
 															<div className="mt-3 flex flex-wrap gap-x-6 gap-y-1 text-tiny text-ink-faint">
 																<span>ID: {memory.id}</span>
 																<span>Accessed: {memory.access_count}x</span>
-																<span>Last accessed: {formatTimeAgo(memory.last_accessed_at)}</span>
-																<span>Updated: {formatTimeAgo(memory.updated_at)}</span>
+																<span>
+																	Last accessed:{" "}
+																	{formatTimeAgo(memory.last_accessed_at)}
+																</span>
+																<span>
+																	Updated: {formatTimeAgo(memory.updated_at)}
+																</span>
 																{memory.channel_id && (
 																	<span>Channel: {memory.channel_id}</span>
 																)}
@@ -334,27 +355,6 @@ export function AgentMemories({ agentId }: AgentMemoriesProps) {
 					)}
 				</>
 			)}
-			</div>
-
-			{/* Cortex chat panel */}
-			<AnimatePresence>
-				{chatOpen && (
-					<motion.div
-						initial={{ width: 0, opacity: 0 }}
-						animate={{ width: 400, opacity: 1 }}
-						exit={{ width: 0, opacity: 0 }}
-						transition={{ type: "spring", stiffness: 400, damping: 30 }}
-						className="flex-shrink-0 overflow-hidden border-l border-app-line/50"
-					>
-						<div className="h-full w-[400px]">
-							<CortexChatPanel
-								agentId={agentId}
-								onClose={() => setChatOpen(false)}
-							/>
-						</div>
-					</motion.div>
-				)}
-			</AnimatePresence>
 		</div>
 	);
 }
diff --git a/interface/src/routes/AgentProjects.tsx b/interface/src/routes/AgentProjects.tsx
index 2d68fac3a..828b8fcf6 100644
--- a/interface/src/routes/AgentProjects.tsx
+++ b/interface/src/routes/AgentProjects.tsx
@@ -1,5 +1,24 @@
-import { useState, useEffect } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {useState, useEffect, useCallback} from "react";
+import {useNavigate} from "@tanstack/react-router";
+import {ArrowLeft, PencilSimple, Trash, Plus, FolderSimple, Clock, DotsSixVertical} from "@phosphor-icons/react";
+import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
+import {
+	DndContext,
+	closestCenter,
+	KeyboardSensor,
+	PointerSensor,
+	useSensor,
+	useSensors,
+	type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+	arrayMove,
+	SortableContext,
+	sortableKeyboardCoordinates,
+	useSortable,
+	rectSortingStrategy,
+} from "@dnd-kit/sortable";
+import {CSS} from "@dnd-kit/utilities";
 import {
 	api,
 	type Project,
@@ -7,20 +26,26 @@ import {
 	type ProjectRepo,
 	type CreateProjectRequest,
 	type CreateWorktreeRequest,
+	type UpdateProjectRequest,
+	getApiBase,
 } from "@/api/client";
-import { Badge, Button } from "@/ui";
 import {
-	Dialog,
+	Badge,
+	Button,
+	Card,
+	CircleButton,
+	DialogRoot,
 	DialogContent,
 	DialogHeader,
 	DialogTitle,
 	DialogFooter,
 	DialogDescription,
-} from "@/ui/Dialog";
-import { Input, Label, TextArea } from "@/ui/Input";
-import { formatTimeAgo } from "@/lib/format";
-import { clsx } from "clsx";
-import { AnimatePresence, motion } from "framer-motion";
+	Input,
+	Label,
+	TextArea,
+} from "@spacedrive/primitives";
+import {formatTimeAgo} from "@/lib/format";
+import {clsx} from "clsx";
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -30,55 +55,79 @@ function formatBytes(bytes: number): string {
 	if (bytes === 0) return "0 B";
 	if (bytes < 1024) return `${bytes} B`;
 	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-	if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	if (bytes < 1024 * 1024 * 1024)
+		return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 	return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
 }
 
-const STATUS_DOT: Record<string, string> = {
-	active: "bg-emerald-500",
-	archived: "bg-ink-faint",
-};
-
 // ---------------------------------------------------------------------------
-// Project Card (list view)
+// Project Card (sortable list view)
 // ---------------------------------------------------------------------------
 
-function ProjectCard({
+function SortableProjectCard({
 	project,
 	onClick,
 }: {
 	project: Project;
 	onClick: () => void;
 }) {
+	const {attributes, listeners, setNodeRef, transform, transition, isDragging} = useSortable({
+		id: project.id,
+	});
+
+	const logoUrl = project.logo_path
+		? `${getApiBase()}/agents/projects/${encodeURIComponent(project.id)}/logo`
+		: null;
+	const fallback = project.icon || project.name.slice(0, 1).toUpperCase();
+
 	return (
-		<motion.button
-			layout
-			initial={{ opacity: 0, y: 8 }}
-			animate={{ opacity: 1, y: 0 }}
-			exit={{ opacity: 0, y: -8 }}
-			onClick={onClick}
-			className="w-full cursor-pointer rounded-xl border border-app-line bg-app-darkBox p-5 text-left transition-colors hover:border-accent/30"
+		<div
+			ref={setNodeRef}
+			style={{
+				transform: CSS.Transform.toString(transform),
+				transition,
+				zIndex: isDragging ? 10 : undefined,
+			}}
 		>
-			<div className="flex items-start justify-between gap-3">
-				<div className="flex min-w-0 items-center gap-3">
-					{project.icon ? (
-						<span className="text-xl leading-none">{project.icon}</span>
+			<Card
+				variant="dark"
+				className={`group relative flex h-[100px] cursor-pointer flex-col justify-between p-4 transition-colors hover:bg-app-hover/50 ${isDragging ? "opacity-50 shadow-lg" : ""}`}
+				onClick={onClick}
+			>
+				{/* Drag handle — visible on hover */}
+				<button
+					type="button"
+					className="absolute top-2 right-2 cursor-grab touch-none rounded p-0.5 text-ink-faint/0 transition-all group-hover:text-ink-faint/50 hover:!text-ink-faint active:cursor-grabbing"
+					onClick={(e) => e.stopPropagation()}
+					{...attributes}
+					{...listeners}
+				>
+					<DotsSixVertical className="size-4" weight="bold" />
+				</button>
+
+				<div className="flex items-center gap-3">
+					{logoUrl ? (
+						<img
+							src={logoUrl}
+							alt=""
+							className="size-8 shrink-0 rounded-md object-contain"
+							draggable={false}
+						/>
 					) : (
-						<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent/10 text-sm text-accent">
-							{project.name.charAt(0).toUpperCase()}
-						</span>
+						<div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-sidebar-selected/40 text-sm font-semibold text-sidebar-ink">
+							{fallback}
+						</div>
 					)}
-					<div className="min-w-0">
+					<div className="min-w-0 flex-1">
 						<div className="flex items-center gap-2">
-							<h3 className="truncate font-plex text-sm font-semibold text-ink">
+							<h3 className="truncate font-plex text-sm font-medium text-ink">
 								{project.name}
 							</h3>
-							<span
-								className={clsx(
-									"h-2 w-2 rounded-full",
-									STATUS_DOT[project.status] ?? STATUS_DOT.active,
-								)}
-							/>
+							{project.tags.map((tag) => (
+								<Badge key={tag} variant="outline" size="sm">
+									{tag}
+								</Badge>
+							))}
 						</div>
 						{project.description && (
 							<p className="mt-0.5 line-clamp-1 text-xs text-ink-dull">
@@ -87,23 +136,19 @@ function ProjectCard({
 						)}
 					</div>
 				</div>
-			</div>
 
-			{project.tags.length > 0 && (
-				<div className="mt-3 flex flex-wrap gap-1.5">
-					{project.tags.map((tag) => (
-						<Badge key={tag} variant="outline" size="sm">
-							{tag}
-						</Badge>
-					))}
+				<div className="flex items-center gap-3 text-[11px] text-ink-faint">
+					<span className="flex min-w-0 items-center gap-1">
+						<FolderSimple className="size-3 shrink-0" weight="bold" />
+						<span className="truncate font-mono">{project.root_path}</span>
+					</span>
+					<span className="ml-auto flex shrink-0 items-center gap-1">
+						<Clock className="size-3" weight="bold" />
+						{formatTimeAgo(project.updated_at)}
+					</span>
 				</div>
-			)}
-
-			<div className="mt-3 flex items-center gap-4 text-[11px] text-ink-faint">
-				<span className="font-mono">{project.root_path}</span>
-				<span className="ml-auto">{formatTimeAgo(project.updated_at)}</span>
-			</div>
-		</motion.button>
+			</Card>
+		</div>
 	);
 }
 
@@ -114,11 +159,9 @@ function ProjectCard({
 function CreateProjectDialog({
 	open,
 	onOpenChange,
-	agentId,
 }: {
 	open: boolean;
 	onOpenChange: (open: boolean) => void;
-	agentId: string;
 }) {
 	const queryClient = useQueryClient();
 	const [name, setName] = useState("");
@@ -128,10 +171,9 @@ function CreateProjectDialog({
 	const [tagsRaw, setTagsRaw] = useState("");
 
 	const createMutation = useMutation({
-		mutationFn: (request: CreateProjectRequest) =>
-			api.createProject(agentId, request),
+		mutationFn: (request: CreateProjectRequest) => api.createProject(request),
 		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["projects", agentId] });
+			queryClient.invalidateQueries({queryKey: ["projects"]});
 			onOpenChange(false);
 			setName("");
 			setRootPath("");
@@ -159,14 +201,14 @@ function CreateProjectDialog({
 	};
 
 	return (
-		<Dialog open={open} onOpenChange={onOpenChange}>
+		<DialogRoot open={open} onOpenChange={onOpenChange}>
 			<DialogContent>
 				<DialogHeader>
 					<DialogTitle>Create Project</DialogTitle>
-				<DialogDescription>
-					Register a project directory — either a single repo or a
-					directory containing multiple repos.
-				</DialogDescription>
+					<DialogDescription>
+						Register a project directory — either a single repo or a directory
+						containing multiple repos.
+					</DialogDescription>
 				</DialogHeader>
 				<form onSubmit={handleSubmit} className="space-y-4">
 					<div>
@@ -226,14 +268,181 @@ function CreateProjectDialog({
 						<Button
 							type="submit"
 							disabled={!name.trim() || !rootPath.trim()}
-							loading={createMutation.isPending}
 						>
 							Create
 						</Button>
 					</DialogFooter>
 				</form>
 			</DialogContent>
-		</Dialog>
+		</DialogRoot>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Edit Project Dialog
+// ---------------------------------------------------------------------------
+
+function EditProjectDialog({
+	open,
+	onOpenChange,
+	project,
+}: {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	project: Project;
+}) {
+	const queryClient = useQueryClient();
+	const [name, setName] = useState(project.name);
+	const [description, setDescription] = useState(project.description);
+	const [icon, setIcon] = useState(project.icon);
+	const [tagsRaw, setTagsRaw] = useState(project.tags.join(", "));
+	const [logoPath, setLogoPath] = useState(project.logo_path ?? "");
+	const [status, setStatus] = useState<"active" | "archived">(project.status);
+
+	// Reset form state when the dialog opens or the project changes.
+	useEffect(() => {
+		if (open) {
+			setName(project.name);
+			setDescription(project.description);
+			setIcon(project.icon);
+			setTagsRaw(project.tags.join(", "));
+			setLogoPath(project.logo_path ?? "");
+			setStatus(project.status);
+		}
+	}, [open, project]);
+
+	const updateMutation = useMutation({
+		mutationFn: (request: UpdateProjectRequest) =>
+			api.updateProject(project.id, request),
+		onSuccess: () => {
+			queryClient.invalidateQueries({queryKey: ["project", project.id]});
+			queryClient.invalidateQueries({queryKey: ["projects"]});
+			onOpenChange(false);
+		},
+	});
+
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault();
+		if (!name.trim()) return;
+		const tags = tagsRaw
+			.split(",")
+			.map((t) => t.trim())
+			.filter(Boolean);
+		updateMutation.mutate({
+			name: name.trim(),
+			description: description.trim(),
+			icon: icon.trim(),
+			tags,
+			logo_path: logoPath.trim() || null,
+			status,
+		});
+	};
+
+	return (
+		<DialogRoot open={open} onOpenChange={onOpenChange}>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Edit Project</DialogTitle>
+					<DialogDescription>
+						Update project metadata. Root path cannot be changed.
+					</DialogDescription>
+				</DialogHeader>
+				<form onSubmit={handleSubmit} className="space-y-4">
+					<div>
+						<Label>Name</Label>
+						<Input
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+							autoFocus
+						/>
+					</div>
+					<div>
+						<Label>Description</Label>
+						<TextArea
+							value={description}
+							onChange={(e) => setDescription(e.target.value)}
+							placeholder="What this project is about..."
+							rows={2}
+						/>
+					</div>
+					<div className="flex gap-3">
+						<div className="flex-1">
+							<Label>Icon</Label>
+							<Input
+								value={icon}
+								onChange={(e) => setIcon(e.target.value)}
+								placeholder="e.g. a single emoji"
+								maxLength={4}
+							/>
+						</div>
+						<div className="flex-[2]">
+							<Label>Tags (comma-separated)</Label>
+							<Input
+								value={tagsRaw}
+								onChange={(e) => setTagsRaw(e.target.value)}
+								placeholder="rust, backend, api"
+							/>
+						</div>
+					</div>
+					<div>
+						<Label>Logo Path (relative to project root)</Label>
+						<Input
+							value={logoPath}
+							onChange={(e) => setLogoPath(e.target.value)}
+							placeholder=".github/logo.png"
+							className="font-mono"
+						/>
+						<p className="mt-1 text-tiny text-ink-faint">
+							Leave blank to clear. Re-scan the project to auto-detect.
+						</p>
+					</div>
+					<div>
+						<Label>Status</Label>
+						<div className="mt-1 flex gap-2">
+							<button
+								type="button"
+								onClick={() => setStatus("active")}
+								className={clsx(
+									"rounded-md border px-3 py-1.5 text-xs font-medium transition-colors",
+									status === "active"
+										? "border-accent bg-accent/10 text-accent"
+										: "border-app-line text-ink-dull hover:text-ink",
+								)}
+							>
+								Active
+							</button>
+							<button
+								type="button"
+								onClick={() => setStatus("archived")}
+								className={clsx(
+									"rounded-md border px-3 py-1.5 text-xs font-medium transition-colors",
+									status === "archived"
+										? "border-accent bg-accent/10 text-accent"
+										: "border-app-line text-ink-dull hover:text-ink",
+								)}
+							>
+								Archived
+							</button>
+						</div>
+					</div>
+					<DialogFooter>
+						<Button
+							type="button"
+							variant="outline"
+							onClick={() => onOpenChange(false)}
+						>
+							Cancel
+						</Button>
+						<Button
+							type="submit"
+							disabled={!name.trim()}
+						>
+							Save
+						</Button>
+					</DialogFooter>
+				</form>
+			</DialogContent>
+		</DialogRoot>
 	);
 }
 
@@ -244,13 +453,11 @@ function CreateProjectDialog({
 function CreateWorktreeDialog({
 	open,
 	onOpenChange,
-	agentId,
 	projectId,
 	repos,
 }: {
 	open: boolean;
 	onOpenChange: (open: boolean) => void;
-	agentId: string;
 	projectId: string;
 	repos: ProjectRepo[];
 }) {
@@ -270,10 +477,10 @@ function CreateWorktreeDialog({
 
 	const createMutation = useMutation({
 		mutationFn: (request: CreateWorktreeRequest) =>
-			api.createProjectWorktree(agentId, projectId, request),
+			api.createProjectWorktree(projectId, request),
 		onSuccess: () => {
 			queryClient.invalidateQueries({
-				queryKey: ["project", agentId, projectId],
+				queryKey: ["project", projectId],
 			});
 			onOpenChange(false);
 			setBranch("");
@@ -292,7 +499,7 @@ function CreateWorktreeDialog({
 	};
 
 	return (
-		<Dialog open={open} onOpenChange={onOpenChange}>
+		<DialogRoot open={open} onOpenChange={onOpenChange}>
 			<DialogContent>
 				<DialogHeader>
 					<DialogTitle>Create Worktree</DialogTitle>
@@ -306,7 +513,7 @@ function CreateWorktreeDialog({
 						<select
 							value={repoId}
 							onChange={(e) => setRepoId(e.target.value)}
-							className="h-8 w-full rounded-md border border-app-line bg-app-darkBox px-3 text-sm text-ink outline-none focus:border-accent/50"
+							className="h-8 w-full rounded-md border border-app-line bg-app-dark-box px-3 text-sm text-ink outline-none focus:border-accent/50"
 						>
 							{repos.map((r) => (
 								<option key={r.id} value={r.id}>
@@ -343,14 +550,13 @@ function CreateWorktreeDialog({
 						<Button
 							type="submit"
 							disabled={!repoId || !branch.trim()}
-							loading={createMutation.isPending}
 						>
 							Create
 						</Button>
 					</DialogFooter>
 				</form>
 			</DialogContent>
-		</Dialog>
+		</DialogRoot>
 	);
 }
 
@@ -364,17 +570,16 @@ function DeleteDialog({
 	title,
 	description,
 	onConfirm,
-	isPending,
 }: {
 	open: boolean;
 	onOpenChange: (open: boolean) => void;
 	title: string;
 	description: string;
 	onConfirm: () => void;
-	isPending: boolean;
+	isPending?: boolean;
 }) {
 	return (
-		<Dialog open={open} onOpenChange={onOpenChange}>
+		<DialogRoot open={open} onOpenChange={onOpenChange}>
 			<DialogContent>
 				<DialogHeader>
 					<DialogTitle>{title}</DialogTitle>
@@ -384,16 +589,12 @@ function DeleteDialog({
 					<Button variant="outline" onClick={() => onOpenChange(false)}>
 						Cancel
 					</Button>
-					<Button
-						variant="destructive"
-						onClick={onConfirm}
-						loading={isPending}
-					>
+					<Button variant="accent" onClick={onConfirm}>
 						Delete
 					</Button>
 				</DialogFooter>
 			</DialogContent>
-		</Dialog>
+		</DialogRoot>
 	);
 }
 
@@ -425,7 +626,9 @@ function RepoCard({
 							{repo.name}
 						</h4>
 						{isSingleRepo && (
-							<Badge variant="outline" size="sm">root</Badge>
+							<Badge variant="outline" size="sm">
+								root
+							</Badge>
 						)}
 					</div>
 					<p className="mt-0.5 truncate font-mono text-[11px] text-ink-faint">
@@ -436,38 +639,29 @@ function RepoCard({
 					<Button variant="outline" size="sm" onClick={onAddWorktree}>
 						+ Worktree
 					</Button>
-					<Button
-						variant="outline"
-						size="icon"
+					<CircleButton
+						icon={Trash}
+						title={`Delete repo ${repo.name}`}
 						onClick={onDelete}
 						disabled={isDeleting}
-						className="h-6 w-6 text-red-500 hover:text-red-400"
-						aria-label={`Delete repo ${repo.name}`}
-					>
-						<svg
-							className="h-3 w-3"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke="currentColor"
-							strokeWidth={2}
-						>
-							<path
-								strokeLinecap="round"
-								strokeLinejoin="round"
-								d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-							/>
-						</svg>
-					</Button>
+					/>
 				</div>
 			</div>
 			<div className="mt-2 flex items-center gap-3 text-xs text-ink-faint">
-				{repo.remote_url && (
-					<span className="truncate">{repo.remote_url}</span>
-				)}
-				<Badge variant={repo.current_branch && repo.current_branch !== repo.default_branch ? "accent" : "outline"} size="sm">
+				{repo.remote_url && <span className="truncate">{repo.remote_url}</span>}
+				<Badge
+					variant={
+						repo.current_branch && repo.current_branch !== repo.default_branch
+							? "accent"
+							: "outline"
+					}
+					size="sm"
+				>
 					{repo.current_branch ?? repo.default_branch}
 				</Badge>
-				<span>{worktreeCount} worktree{worktreeCount !== 1 ? "s" : ""}</span>
+				<span>
+					{worktreeCount} worktree{worktreeCount !== 1 ? "s" : ""}
+				</span>
 				{repo.disk_usage_bytes != null && (
 					<span className="ml-auto shrink-0 font-mono">
 						{formatBytes(repo.disk_usage_bytes)}
@@ -502,10 +696,7 @@ function WorktreeCard({
 						<Badge variant="accent" size="sm">
 							{worktree.branch}
 						</Badge>
-						<Badge
-							variant={worktree.created_by === "agent" ? "violet" : "default"}
-							size="sm"
-						>
+						<Badge variant="default" size="sm">
 							{worktree.created_by}
 						</Badge>
 					</div>
@@ -523,28 +714,12 @@ function WorktreeCard({
 						)}
 					</p>
 				</div>
-				<Button
-					variant="outline"
-					size="icon"
+				<CircleButton
+					icon={Trash}
+					title={`Delete worktree ${worktree.name}`}
 					onClick={onDelete}
 					disabled={isDeleting}
-					className="h-6 w-6 text-red-500 hover:text-red-400"
-					aria-label={`Delete worktree ${worktree.name}`}
-				>
-					<svg
-						className="h-3 w-3"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-						strokeWidth={2}
-					>
-						<path
-							strokeLinecap="round"
-							strokeLinejoin="round"
-							d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-						/>
-					</svg>
-				</Button>
+				/>
 			</div>
 		</div>
 	);
@@ -555,65 +730,58 @@ function WorktreeCard({
 // ---------------------------------------------------------------------------
 
 function ProjectDetail({
-	agentId,
 	projectId,
 	onBack,
 }: {
-	agentId: string;
 	projectId: string;
 	onBack: () => void;
 }) {
 	const queryClient = useQueryClient();
 
-	const { data: project, isLoading } = useQuery({
-		queryKey: ["project", agentId, projectId],
-		queryFn: () => api.getProject(agentId, projectId),
+	const {data: project, isLoading} = useQuery({
+		queryKey: ["project", projectId],
+		queryFn: () => api.getProject(projectId),
 		refetchInterval: 10_000,
 	});
 
-	const scanMutation = useMutation({
-		mutationFn: () => api.scanProject(agentId, projectId),
-		onSuccess: () => {
-			queryClient.invalidateQueries({
-				queryKey: ["project", agentId, projectId],
-			});
-		},
-	});
-
 	const deleteProjectMutation = useMutation({
-		mutationFn: () => api.deleteProject(agentId, projectId),
+		mutationFn: () => api.deleteProject(projectId),
 		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["projects", agentId] });
+			queryClient.invalidateQueries({queryKey: ["projects"]});
 			onBack();
 		},
 	});
 
 	const deleteRepoMutation = useMutation({
-		mutationFn: (repoId: string) =>
-			api.deleteProjectRepo(agentId, projectId, repoId),
+		mutationFn: (repoId: string) => api.deleteProjectRepo(projectId, repoId),
 		onSuccess: () => {
 			queryClient.invalidateQueries({
-				queryKey: ["project", agentId, projectId],
+				queryKey: ["project", projectId],
 			});
 		},
 	});
 
 	const deleteWorktreeMutation = useMutation({
 		mutationFn: (worktreeId: string) =>
-			api.deleteProjectWorktree(agentId, projectId, worktreeId),
+			api.deleteProjectWorktree(projectId, worktreeId),
 		onSuccess: () => {
 			queryClient.invalidateQueries({
-				queryKey: ["project", agentId, projectId],
+				queryKey: ["project", projectId],
 			});
 		},
 	});
 
 	const [showCreateWorktree, setShowCreateWorktree] = useState(false);
 	const [showDeleteProject, setShowDeleteProject] = useState(false);
+	const [showEditProject, setShowEditProject] = useState(false);
 	const [deleteRepoTarget, setDeleteRepoTarget] = useState<string | null>(null);
-	const [deleteWorktreeTarget, setDeleteWorktreeTarget] = useState<string | null>(null);
+	const [deleteWorktreeTarget, setDeleteWorktreeTarget] = useState<
+		string | null
+	>(null);
 	// Track which repo's "Add Worktree" was clicked to pre-select in dialog
-	const [worktreeRepoPreselect, setWorktreeRepoPreselect] = useState<string | null>(null);
+	const [worktreeRepoPreselect, setWorktreeRepoPreselect] = useState<
+		string | null
+	>(null);
 
 	if (isLoading) {
 		return (
@@ -645,99 +813,54 @@ function ProjectDetail({
 		worktrees.reduce((sum, w) => sum + (w.disk_usage_bytes ?? 0), 0);
 
 	return (
-		<div className="h-full overflow-y-auto">
-			<div className="mx-auto max-w-4xl space-y-6 p-6">
-				{/* Header */}
-				<div>
-					<button
-						onClick={onBack}
-						className="mb-3 flex items-center gap-1 text-xs text-ink-faint transition-colors hover:text-ink-dull"
-					>
-						<svg
-							className="h-3.5 w-3.5"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke="currentColor"
-							strokeWidth={2}
-						>
-							<path
-								strokeLinecap="round"
-								strokeLinejoin="round"
-								d="M15 19l-7-7 7-7"
+		<div className="flex h-full flex-col">
+			{/* Top Bar */}
+			<div className="flex items-center justify-between border-b border-app-line px-4 py-2">
+				<div className="flex items-center gap-2">
+					<CircleButton icon={ArrowLeft} title="All Projects" onClick={onBack} />
+					{(() => {
+						const logoUrl = project.logo_path
+							? `${getApiBase()}/agents/projects/${encodeURIComponent(project.id)}/logo`
+							: null;
+						const fallback = project.icon || project.name.slice(0, 1).toUpperCase();
+						return logoUrl ? (
+							<img
+								src={logoUrl}
+								alt=""
+								className="size-[22px] shrink-0 rounded-md object-contain"
+								draggable={false}
 							/>
-						</svg>
-						All Projects
-					</button>
-
-					<div className="flex items-start justify-between gap-4">
-						<div className="min-w-0 flex-1">
-							<div className="flex items-center gap-3">
-								{project.icon ? (
-									<span className="text-2xl leading-none">
-										{project.icon}
-									</span>
-								) : (
-									<span className="flex h-10 w-10 items-center justify-center rounded-lg bg-accent/10 text-base font-semibold text-accent">
-										{project.name.charAt(0).toUpperCase()}
-									</span>
-								)}
-								<div>
-									<h2 className="font-plex text-lg font-semibold text-ink">
-										{project.name}
-									</h2>
-									{project.description && (
-										<p className="mt-0.5 text-sm text-ink-dull">
-											{project.description}
-										</p>
-									)}
-								</div>
-							</div>
-
-							<div className="mt-3 flex flex-wrap items-center gap-2">
-								<Badge
-									variant={
-										project.status === "active" ? "green" : "default"
-									}
-									size="sm"
-								>
-									{project.status}
-								</Badge>
-								{project.tags.map((tag) => (
-									<Badge key={tag} variant="outline" size="sm">
-										{tag}
-									</Badge>
-								))}
-								<span className="font-mono text-[11px] text-ink-faint">
-									{project.root_path}
-								</span>
-								{totalDiskUsage > 0 && (
-									<span className="rounded-md bg-app-button px-2 py-0.5 font-mono text-[11px] text-ink-dull">
-										{formatBytes(totalDiskUsage)}
-									</span>
-								)}
+						) : (
+							<div className="flex size-[22px] shrink-0 items-center justify-center rounded-md bg-sidebar-selected/40 text-[10px] font-semibold text-sidebar-ink">
+								{fallback}
 							</div>
-						</div>
+						);
+					})()}
+					<h2 className="text-sm font-medium text-ink">{project.name}</h2>
+					{project.tags.map((tag) => (
+						<Badge key={tag} variant="outline" size="sm">
+							{tag}
+						</Badge>
+					))}
+					{totalDiskUsage > 0 && (
+						<Badge variant="default" size="sm">
+							{formatBytes(totalDiskUsage)}
+						</Badge>
+					)}
+				</div>
 
-						<div className="flex shrink-0 items-center gap-2">
-							<Button
-								variant="outline"
-								size="sm"
-								onClick={() => scanMutation.mutate()}
-								loading={scanMutation.isPending}
-							>
-								Scan
-							</Button>
-							<Button
-								variant="outline"
-								size="sm"
-								className="text-red-500 hover:text-red-400"
-								onClick={() => setShowDeleteProject(true)}
-							>
-								Delete
-							</Button>
-						</div>
-					</div>
+				<div className="flex items-center gap-2">
+					<CircleButton icon={PencilSimple} title="Edit" onClick={() => setShowEditProject(true)} />
+					<CircleButton icon={Trash} title="Delete" onClick={() => setShowDeleteProject(true)} />
 				</div>
+			</div>
+
+			<div className="flex-1 overflow-y-auto">
+			<div className="mx-auto max-w-4xl space-y-6 p-6">
+				{/* Project Info */}
+				{project.description && (
+					<p className="text-sm text-ink-dull">{project.description}</p>
+				)}
 
 				{/* Repos Section */}
 				<section>
@@ -775,9 +898,7 @@ function ProjectDetail({
 					<div className="mb-3 flex items-center justify-between">
 						<h3 className="font-plex text-sm font-semibold text-ink">
 							Worktrees
-							<span className="ml-2 text-ink-faint">
-								({worktrees.length})
-							</span>
+							<span className="ml-2 text-ink-faint">({worktrees.length})</span>
 						</h3>
 						<Button
 							variant="outline"
@@ -809,33 +930,38 @@ function ProjectDetail({
 					)}
 				</section>
 
-				{/* Stats */}
+				{/* Meta */}
 				<div className="flex items-center gap-4 text-xs text-ink-faint">
+					<span className="font-mono">{project.root_path}</span>
 					<span>Created {formatTimeAgo(project.created_at)}</span>
 					<span>Updated {formatTimeAgo(project.updated_at)}</span>
 				</div>
 			</div>
+			</div>
 
 			{/* Dialogs */}
 			{repos.length > 0 && (
 				<CreateWorktreeDialog
 					open={showCreateWorktree}
 					onOpenChange={setShowCreateWorktree}
-					agentId={agentId}
 					projectId={projectId}
 					repos={
 						worktreeRepoPreselect
 							? [
 									repos.find((r) => r.id === worktreeRepoPreselect)!,
-									...repos.filter(
-										(r) => r.id !== worktreeRepoPreselect,
-									),
+									...repos.filter((r) => r.id !== worktreeRepoPreselect),
 								]
 							: repos
 					}
 				/>
 			)}
 
+			<EditProjectDialog
+				open={showEditProject}
+				onOpenChange={setShowEditProject}
+				project={project}
+			/>
+
 			<DeleteDialog
 				open={showDeleteProject}
 				onOpenChange={setShowDeleteProject}
@@ -884,24 +1010,71 @@ function ProjectDetail({
 // Main Page
 // ---------------------------------------------------------------------------
 
-export function AgentProjects({ agentId }: { agentId: string }) {
-	const [selectedProjectId, setSelectedProjectId] = useState<string | null>(
-		null,
+export function AgentProjects({ projectId }: { projectId?: string }) {
+	const navigate = useNavigate();
+	const queryClient = useQueryClient();
+	const selectedProjectId = projectId ?? null;
+
+	const setSelectedProjectId = useCallback(
+		(id: string | null) => {
+			navigate({
+				to: "/projects",
+				search: id ? { id } : {},
+			});
+		},
+		[navigate],
 	);
+
 	const [showCreate, setShowCreate] = useState(false);
+	const [localProjects, setLocalProjects] = useState<Project[]>([]);
 
-	const { data, isLoading } = useQuery({
-		queryKey: ["projects", agentId],
-		queryFn: () => api.listProjects(agentId),
+	const {data, isLoading} = useQuery({
+		queryKey: ["projects"],
+		queryFn: () => api.listProjects(),
 		refetchInterval: 15_000,
 	});
 
-	const projects = data?.projects ?? [];
+	// Sync local order state from server whenever fresh data arrives,
+	// but only if we're not in the middle of a drag.
+	useEffect(() => {
+		setLocalProjects(data?.projects ?? []);
+	}, [data]);
+
+	const reorderMutation = useMutation({
+		mutationFn: (ids: string[]) => api.reorderProjects(ids),
+		onError: () => {
+			// Revert to last known server state on failure.
+			setLocalProjects(data?.projects ?? []);
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({queryKey: ["projects"]});
+		},
+	});
+
+	const sensors = useSensors(
+		useSensor(PointerSensor, {activationConstraint: {distance: 8}}),
+		useSensor(KeyboardSensor, {coordinateGetter: sortableKeyboardCoordinates}),
+	);
+
+	const handleDragEnd = useCallback(
+		(event: DragEndEvent) => {
+			const {active, over} = event;
+			if (!over || active.id === over.id) return;
+
+			setLocalProjects((items) => {
+				const oldIndex = items.findIndex((p) => p.id === active.id);
+				const newIndex = items.findIndex((p) => p.id === over.id);
+				const reordered = arrayMove(items, oldIndex, newIndex);
+				reorderMutation.mutate(reordered.map((p) => p.id));
+				return reordered;
+			});
+		},
+		[reorderMutation],
+	);
 
 	if (selectedProjectId) {
 		return (
 			<ProjectDetail
-				agentId={agentId}
 				projectId={selectedProjectId}
 				onBack={() => setSelectedProjectId(null)}
 			/>
@@ -909,60 +1082,68 @@ export function AgentProjects({ agentId }: { agentId: string }) {
 	}
 
 	return (
-		<div className="h-full overflow-y-auto">
-			<div className="mx-auto max-w-4xl p-6">
-				<div className="mb-6 flex items-center justify-between">
-					<div>
-						<h2 className="font-plex text-base font-semibold text-ink">
-							Projects
-						</h2>
-						<p className="mt-0.5 text-xs text-ink-faint">
-							Workspaces, repos, and worktrees this agent knows about.
-						</p>
-					</div>
-					<Button size="sm" onClick={() => setShowCreate(true)}>
-						+ Project
-					</Button>
+		<div className="flex h-full flex-col">
+			{/* Top Bar */}
+			<div className="flex items-center justify-between border-b border-app-line px-4 py-2">
+				<div className="flex items-center gap-2">
+					<h2 className="text-sm font-medium text-ink">Projects</h2>
+					<span className="text-xs text-ink-faint">
+						{localProjects.length} project{localProjects.length !== 1 ? "s" : ""}
+					</span>
 				</div>
+				<Button variant="gray" size="md" onClick={() => setShowCreate(true)}>
+					<Plus className="mr-1 size-3.5" weight="bold" />
+					New Project
+				</Button>
+			</div>
 
-				{isLoading ? (
-					<div className="flex items-center justify-center py-20">
-						<div className="h-6 w-6 animate-spin rounded-full border-2 border-accent border-t-transparent" />
-					</div>
-				) : projects.length === 0 ? (
-					<div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-app-line py-20">
-						<p className="text-sm text-ink-faint">
-							No projects registered yet.
-						</p>
-						<Button
-							variant="outline"
-							size="sm"
-							className="mt-4"
-							onClick={() => setShowCreate(true)}
+			<div className="flex-1 overflow-y-auto">
+				<div className="mx-auto max-w-4xl p-6">
+					{isLoading ? (
+						<div className="flex items-center justify-center py-20">
+							<div className="h-6 w-6 animate-spin rounded-full border-2 border-accent border-t-transparent" />
+						</div>
+					) : localProjects.length === 0 ? (
+						<div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-app-line py-20">
+							<FolderSimple className="mb-3 size-8 text-ink-faint" weight="bold" />
+							<p className="text-sm text-ink-faint">
+								No projects registered yet.
+							</p>
+							<Button
+								variant="gray"
+								size="md"
+								className="mt-4"
+								onClick={() => setShowCreate(true)}
+							>
+								Create your first project
+							</Button>
+						</div>
+					) : (
+						<DndContext
+							sensors={sensors}
+							collisionDetection={closestCenter}
+							onDragEnd={handleDragEnd}
 						>
-							Create your first project
-						</Button>
-					</div>
-				) : (
-					<div className="grid gap-3 sm:grid-cols-2">
-						<AnimatePresence mode="popLayout">
-							{projects.map((project) => (
-								<ProjectCard
-									key={project.id}
-									project={project}
-									onClick={() => setSelectedProjectId(project.id)}
-								/>
-							))}
-						</AnimatePresence>
-					</div>
-				)}
+							<SortableContext
+								items={localProjects.map((p) => p.id)}
+								strategy={rectSortingStrategy}
+							>
+								<div className="grid gap-3 sm:grid-cols-2">
+									{localProjects.map((project) => (
+										<SortableProjectCard
+											key={project.id}
+											project={project}
+											onClick={() => setSelectedProjectId(project.id)}
+										/>
+									))}
+								</div>
+							</SortableContext>
+						</DndContext>
+					)}
+				</div>
 			</div>
 
-			<CreateProjectDialog
-				open={showCreate}
-				onOpenChange={setShowCreate}
-				agentId={agentId}
-			/>
+			<CreateProjectDialog open={showCreate} onOpenChange={setShowCreate} />
 		</div>
 	);
 }
diff --git a/interface/src/routes/AgentSkills.tsx b/interface/src/routes/AgentSkills.tsx
index 080a2fce8..1b1059c0c 100644
--- a/interface/src/routes/AgentSkills.tsx
+++ b/interface/src/routes/AgentSkills.tsx
@@ -1,893 +1,148 @@
-import { useState, useEffect, useRef, useCallback } from "react";
-import { useQuery, useMutation, useQueryClient, useInfiniteQuery } from "@tanstack/react-query";
-import { api, type SkillInfo, type RegistrySkill, type RegistryView } from "@/api/client";
-import { Button, Badge, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/ui";
-import { clsx } from "clsx";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {useState, useRef, useCallback} from "react";
+import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
+import {api} from "@/api/client";
 import {
-	faDownload,
-	faTrash,
-	faSearch,
-	faSpinner,
-	faCheckCircle,
-	faExternalLinkAlt,
-	faFire,
-	faTrophy,
-	faBolt,
-	faUpload,
-} from "@fortawesome/free-solid-svg-icons";
+	SkillsSidebar,
+	SkillInspector,
+	SkillsDirectory,
+	BundledSkills,
+	CreateSkill,
+	type SkillView,
+	type SelectedSkill,
+} from "@/components/skills";
+import type {SkillInfo, RegistrySkill} from "@/api/client";
 
 interface AgentSkillsProps {
 	agentId: string;
 }
 
-function formatInstalls(n: number): string {
-	if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
-	if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
-	return String(n);
-}
-
-/**
- * Derive the install spec from a registry skill.
- *
- * The spec is always "owner/repo/skill-name" (3-part format required by backend).
- * Even for single-skill repos, the skillId is included.
- */
-function installSpec(skill: RegistrySkill): string {
-	return `${skill.source}/${skill.skillId}`;
-}
-
-/** Modal for viewing an installed skill's full SKILL.md content. */
-function InstalledSkillDetailModal({
-	agentId,
-	skill,
-	open,
-	onOpenChange,
-}: {
-	agentId: string;
-	skill: SkillInfo | null;
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
-}) {
-	const { data, isLoading } = useQuery({
-		queryKey: ["skill-content", agentId, skill?.name],
-		queryFn: () => api.getSkillContent(agentId, skill!.name),
-		enabled: open && !!skill,
-	});
-
-	return (
-		<Dialog open={open} onOpenChange={onOpenChange}>
-			<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
-				<DialogHeader>
-					<div className="flex items-center gap-2">
-						<DialogTitle>{skill?.name ?? "Skill"}</DialogTitle>
-						{skill && (
-							<Badge variant={skill.source === "instance" ? "accent" : "green"} size="sm">
-								{skill.source}
-							</Badge>
-						)}
-					</div>
-					<DialogDescription>
-						{skill?.description || "No description provided"}
-					</DialogDescription>
-				</DialogHeader>
-
-				{isLoading && (
-					<div className="flex items-center justify-center py-8">
-						<FontAwesomeIcon icon={faSpinner} className="animate-spin text-ink-faint" />
-						<span className="ml-2 text-sm text-ink-faint">Loading skill content...</span>
-					</div>
-				)}
-
-				{data && (
-					<div className="space-y-4">
-						{data.source_repo && (
-							<div className="flex items-center gap-2 text-xs text-ink-dull">
-								<span className="font-medium text-ink-faint">Source:</span>
-								<a
-									href={`https://github.com/${data.source_repo}`}
-									target="_blank"
-									rel="noopener noreferrer"
-									className="font-mono transition-colors hover:text-accent"
-								>
-									{data.source_repo}
-									<FontAwesomeIcon icon={faExternalLinkAlt} className="ml-1 text-[10px]" />
-								</a>
-							</div>
-						)}
-						<div className="flex items-center gap-2 text-xs text-ink-dull">
-							<span className="font-medium text-ink-faint">Path:</span>
-							<span className="font-mono break-all">{data.base_dir}</span>
-						</div>
-						<SkillContentBlock content={data.content} />
-					</div>
-				)}
-			</DialogContent>
-		</Dialog>
-	);
-}
-
-/** Modal for viewing a registry (non-installed) skill's full SKILL.md content. */
-function RegistrySkillDetailModal({
-	skill,
-	open,
-	onOpenChange,
-	onInstall,
-	isInstalled,
-	isInstalling,
-}: {
-	skill: RegistrySkill | null;
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
-	onInstall: () => void;
-	isInstalled: boolean;
-	isInstalling: boolean;
-}) {
-	const { data, isLoading } = useQuery({
-		queryKey: ["registry-skill-content", skill?.source, skill?.skillId],
-		queryFn: () => api.registrySkillContent(skill!.source, skill!.skillId),
-		enabled: open && !!skill,
-	});
-
-	return (
-		<Dialog open={open} onOpenChange={onOpenChange}>
-			<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
-				<DialogHeader>
-					<div className="flex items-center gap-2">
-						<DialogTitle>{skill?.name ?? "Skill"}</DialogTitle>
-						{skill && !isInstalled && (
-							<Button
-								variant="default"
-								size="sm"
-								onClick={(e) => {
-									e.stopPropagation();
-									onInstall();
-								}}
-								disabled={isInstalling}
-								className="ml-auto"
-							>
-								{isInstalling ? (
-									<>
-										<FontAwesomeIcon icon={faSpinner} className="animate-spin" />
-										Installing...
-									</>
-								) : (
-									<>
-										<FontAwesomeIcon icon={faDownload} />
-										Install
-									</>
-								)}
-							</Button>
-						)}
-						{isInstalled && (
-							<Badge variant="green" size="sm" className="ml-auto">
-								Installed
-							</Badge>
-						)}
-					</div>
-					<DialogDescription>
-						{skill?.description || "No description provided"}
-					</DialogDescription>
-				</DialogHeader>
-
-				{skill && (
-					<div className="flex items-center gap-2 text-xs text-ink-dull">
-						<span className="font-medium text-ink-faint">Source:</span>
-						<a
-							href={`https://github.com/${skill.source}`}
-							target="_blank"
-							rel="noopener noreferrer"
-							className="font-mono transition-colors hover:text-accent"
-						>
-							{skill.source}
-							<FontAwesomeIcon icon={faExternalLinkAlt} className="ml-1 text-[10px]" />
-						</a>
-						{skill.installs > 0 && (
-							<>
-								<span className="text-ink-dull/40">|</span>
-								<span>{formatInstalls(skill.installs)} installs</span>
-							</>
-						)}
-					</div>
-				)}
-
-				{isLoading && (
-					<div className="flex items-center justify-center py-8">
-						<FontAwesomeIcon icon={faSpinner} className="animate-spin text-ink-faint" />
-						<span className="ml-2 text-sm text-ink-faint">Loading skill content...</span>
-					</div>
-				)}
-
-				{data && !data.content && !isLoading && (
-					<div className="rounded-md border border-app-line bg-app-darkBox p-6 text-center">
-						<p className="text-sm text-ink-faint">
-							Could not fetch SKILL.md from GitHub.
-						</p>
-					</div>
-				)}
-
-				{data?.content && <SkillContentBlock content={data.content} />}
-			</DialogContent>
-		</Dialog>
-	);
-}
-
-/** Shared component that renders a SKILL.md content block. */
-function SkillContentBlock({ content }: { content: string }) {
-	return (
-		<div className="rounded-md border border-app-line bg-app-darkBox">
-			<div className="border-b border-app-line px-4 py-2">
-				<span className="font-mono text-xs font-medium text-ink-faint">SKILL.md</span>
-			</div>
-			<pre className="overflow-x-auto whitespace-pre-wrap p-4 font-mono text-xs leading-relaxed text-ink-dull">
-				{content}
-			</pre>
-		</div>
-	);
-}
-
-function InstalledSkill({
-	skill,
-	onClick,
-	onRemove,
-	isRemoving,
-}: {
-	skill: SkillInfo;
-	onClick: () => void;
-	onRemove: () => void;
-	isRemoving: boolean;
-}) {
-	return (
-		<div
-			className="flex cursor-pointer flex-col rounded-lg border border-app-line bg-app-box p-4 transition-colors hover:border-app-line-hover"
-			onClick={onClick}
-		>
-			<div className="flex items-center justify-between gap-3">
-				<div className="min-w-0 flex-1">
-					<div className="flex min-w-0 items-center gap-2">
-						<h3 className="truncate font-plex text-sm font-medium text-ink">
-							{skill.name}
-						</h3>
-						<Badge variant={skill.source === "instance" ? "accent" : "green"} size="sm">
-							{skill.source}
-						</Badge>
-					</div>
-				</div>
-				<Button
-					variant="outline"
-					size="icon"
-					onClick={(e) => {
-						e.stopPropagation();
-						onRemove();
-					}}
-					disabled={isRemoving}
-					className="h-6 w-6 flex-shrink-0"
-				>
-					<FontAwesomeIcon
-						icon={isRemoving ? faSpinner : faTrash}
-						className={clsx("text-[11px]", isRemoving && "animate-spin")}
-					/>
-				</Button>
-			</div>
-			<p className="mt-2 text-xs text-ink-faint">
-				{skill.description || "No description provided"}
-			</p>
-			<p className="mt-3 font-mono text-xs text-ink-dull break-all">
-				{skill.base_dir}
-			</p>
-		</div>
-	);
-}
-
-function RegistrySkillCard({
-	skill,
-	isInstalled,
-	onClick,
-	onInstall,
-	onRemove,
-	isInstalling,
-	isRemoving,
-}: {
-	skill: RegistrySkill;
-	isInstalled: boolean;
-	onClick: () => void;
-	onInstall: () => void;
-	onRemove: () => void;
-	isInstalling: boolean;
-	isRemoving: boolean;
-}) {
-	return (
-		<div
-			className="flex cursor-pointer flex-col rounded-lg border border-app-line bg-app-box p-4 transition-colors hover:border-app-line-hover"
-			onClick={onClick}
-		>
-			<div className="flex items-center gap-2">
-				<h3 className="truncate font-plex text-sm font-medium text-ink">
-					{skill.name}
-				</h3>
-			</div>
-			<p className="mt-1 font-mono text-[11px] text-ink-dull/60">{skill.source}</p>
-			<p className="mt-2 flex-1 text-xs text-ink-faint">
-				{skill.description || "No description provided"}
-			</p>
-			<div className="mt-auto flex items-center justify-between gap-2 pt-3">
-				<span className="text-xs text-ink-faint">
-					{formatInstalls(skill.installs)} installs
-				</span>
-				<Button
-					variant="outline"
-					size="icon"
-					onClick={(e) => {
-						e.stopPropagation();
-						if (isInstalled) {
-							onRemove();
-						} else {
-							onInstall();
-						}
-					}}
-					disabled={isInstalling || isRemoving}
-					className={clsx(
-						"group h-6 w-6 p-0",
-					)}
-					title={isInstalled ? "Remove installed skill" : "Install skill"}
-				>
-					{isInstalling || isRemoving ? (
-						<FontAwesomeIcon icon={faSpinner} className="animate-spin text-xs" />
-					) : isInstalled ? (
-						<span className="relative flex h-3.5 w-3.5 items-center justify-center text-xs">
-							<FontAwesomeIcon
-								icon={faCheckCircle}
-								className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-150 ease-out group-hover:scale-75 group-hover:opacity-0"
-							/>
-							<FontAwesomeIcon
-								icon={faTrash}
-								className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 scale-75 opacity-0 transition-all duration-150 ease-out group-hover:scale-100 group-hover:opacity-100"
-							/>
-						</span>
-					) : (
-						<FontAwesomeIcon icon={faDownload} className="text-xs" />
-					)}
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-const VIEWS: { key: RegistryView; label: string; icon: typeof faFire }[] = [
-	{ key: "all-time", label: "All Time", icon: faTrophy },
-	{ key: "trending", label: "Trending", icon: faBolt },
-	{ key: "hot", label: "Hot", icon: faFire },
-];
-
-export function AgentSkills({ agentId }: AgentSkillsProps) {
+export function AgentSkills({agentId}: AgentSkillsProps) {
 	const queryClient = useQueryClient();
-	const [searchQuery, setSearchQuery] = useState("");
-	const [debouncedSearch, setDebouncedSearch] = useState("");
-	const [activeTab, setActiveTab] = useState<"installed" | "browse">("browse");
-	const [registryView, setRegistryView] = useState<RegistryView>("all-time");
-	const scrollRef = useRef<HTMLDivElement>(null);
 	const fileInputRef = useRef<HTMLInputElement>(null);
 
-	// Installed skill detail modal state
-	const [selectedSkill, setSelectedSkill] = useState<SkillInfo | null>(null);
-	const [detailModalOpen, setDetailModalOpen] = useState(false);
-
-	// Registry skill detail modal state
-	const [selectedRegistrySkill, setSelectedRegistrySkill] = useState<RegistrySkill | null>(null);
-	const [registryDetailOpen, setRegistryDetailOpen] = useState(false);
+	const [activeView, setActiveView] = useState<SkillView>("directory");
+	const [selectedSkill, setSelectedSkill] = useState<SelectedSkill | null>(null);
 
-	// Debounce search input
-	useEffect(() => {
-		if (searchQuery.length === 0) {
-			setDebouncedSearch("");
-			return;
-		}
-		if (searchQuery.length < 2) return;
-		const timer = setTimeout(
-			() => setDebouncedSearch(searchQuery),
-			Math.max(150, 350 - 50 * searchQuery.length),
-		);
-		return () => clearTimeout(timer);
-	}, [searchQuery]);
-
-	// Installed skills
-	const { data: skillsData, isLoading } = useQuery({
+	const {data: skillsData, isLoading: isSkillsLoading} = useQuery({
 		queryKey: ["skills", agentId],
 		queryFn: () => api.listSkills(agentId),
 		refetchInterval: 10_000,
 	});
 
-	// Registry browse with infinite scroll
-	const {
-		data: browseData,
-		fetchNextPage,
-		hasNextPage,
-		isFetchingNextPage,
-		isLoading: isBrowseLoading,
-	} = useInfiniteQuery({
-		queryKey: ["registry-browse", registryView],
-		queryFn: ({ pageParam }) => api.registryBrowse(registryView, pageParam),
-		initialPageParam: 0,
-		getNextPageParam: (lastPage, _allPages, lastPageParam) =>
-			lastPage.has_more ? lastPageParam + 1 : undefined,
-		enabled: activeTab === "browse" && !debouncedSearch,
-	});
-
-	// Registry search
-	const { data: searchData, isLoading: isSearching } = useQuery({
-		queryKey: ["registry-search", debouncedSearch],
-		queryFn: () => api.registrySearch(debouncedSearch),
-		enabled: activeTab === "browse" && debouncedSearch.length >= 2,
-	});
+	const installedSkills = skillsData?.skills ?? [];
 
-	// Infinite scroll handler
-	const handleScroll = useCallback(() => {
-		const el = scrollRef.current;
-		if (!el || !hasNextPage || isFetchingNextPage || debouncedSearch) return;
-		const { scrollTop, scrollHeight, clientHeight } = el;
-		if (scrollHeight - scrollTop - clientHeight < 400) {
-			fetchNextPage();
-		}
-	}, [hasNextPage, isFetchingNextPage, fetchNextPage, debouncedSearch]);
+	const installedKeys = new Map(
+		installedSkills.map((s) => [
+			s.source_repo
+				? `${s.source_repo}/${s.name}`.toLowerCase()
+				: s.name.toLowerCase(),
+			s.name,
+		]),
+	);
 
-	useEffect(() => {
-		const el = scrollRef.current;
-		if (!el) return;
-		el.addEventListener("scroll", handleScroll);
-		return () => el.removeEventListener("scroll", handleScroll);
-	}, [handleScroll]);
+	const installedNamesSet = new Set(installedKeys.keys());
 
 	const installMutation = useMutation({
 		mutationFn: (spec: string) =>
-			api.installSkill({
-				agent_id: agentId,
-				spec,
-				instance: false,
-			}),
+			api.installSkill({agent_id: agentId, spec, instance: false}),
 		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["skills", agentId] });
-		},
-	});
-
-	const githubInstallMutation = useMutation({
-		mutationFn: (spec: string) =>
-			api.installSkill({
-				agent_id: agentId,
-				spec,
-				instance: false,
-			}),
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["skills", agentId] });
+			queryClient.invalidateQueries({queryKey: ["skills", agentId]});
 		},
 	});
 
 	const removeMutation = useMutation({
-		mutationFn: (name: string) =>
-			api.removeSkill({
-				agent_id: agentId,
-				name,
-			}),
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["skills", agentId] });
+		mutationFn: (name: string) => api.removeSkill({agent_id: agentId, name}),
+		onSuccess: (_, removedName) => {
+			queryClient.invalidateQueries({queryKey: ["skills", agentId]});
+			setSelectedSkill((prev) =>
+				prev?.type === "installed" && prev.skill.name === removedName ? null : prev,
+			);
 		},
 	});
 
 	const uploadMutation = useMutation({
 		mutationFn: (files: File[]) => api.uploadSkillFiles(agentId, files),
 		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["skills", agentId] });
+			queryClient.invalidateQueries({queryKey: ["skills", agentId]});
 		},
 		onSettled: () => {
-			if (fileInputRef.current) {
-				fileInputRef.current.value = "";
-			}
+			if (fileInputRef.current) fileInputRef.current.value = "";
 		},
 	});
 
-	const handleFileUpload = useCallback(
-		(files: FileList | null) => {
-			if (!files || files.length === 0) return;
-			uploadMutation.mutate(Array.from(files));
-		},
-		[uploadMutation],
-	);
+	const handleSelectInstalledSkill = useCallback((skill: SkillInfo) => {
+		setSelectedSkill({type: "installed", skill});
+	}, []);
 
-	const installedSkills = skillsData?.skills ?? [];
-	const installedKeys = new Map(
-		installedSkills.map((s) => [
-			s.source_repo
-				? `${s.source_repo}/${s.name}`.toLowerCase()
-				: s.name.toLowerCase(),
-			s.name,
-		]),
-	);
-
-	// Flatten browse pages or use search results
-	const registrySkills: RegistrySkill[] = debouncedSearch
-		? (searchData?.skills ?? [])
-		: (browseData?.pages.flatMap((p) => p.skills) ?? []);
-
-	const isRegistryLoading = debouncedSearch ? isSearching : isBrowseLoading;
-	const totalRegistrySkills = browseData?.pages[0]?.total;
+	const handleSelectRegistrySkill = useCallback((skill: RegistrySkill) => {
+		setSelectedSkill({type: "registry", skill});
+	}, []);
 
 	return (
-		<div className="flex h-full flex-col">
-			{/* Installed skill detail modal */}
-			<InstalledSkillDetailModal
-				agentId={agentId}
-				skill={selectedSkill}
-				open={detailModalOpen}
-				onOpenChange={(open) => {
-					setDetailModalOpen(open);
-					if (!open) setSelectedSkill(null);
-				}}
-			/>
-
-			{/* Registry skill detail modal */}
-			<RegistrySkillDetailModal
-				skill={selectedRegistrySkill}
-				open={registryDetailOpen}
-				onOpenChange={(open) => {
-					setRegistryDetailOpen(open);
-					if (!open) setSelectedRegistrySkill(null);
-				}}
-				onInstall={() => {
-					if (selectedRegistrySkill) {
-						installMutation.mutate(installSpec(selectedRegistrySkill));
-					}
-				}}
-				isInstalled={
-					selectedRegistrySkill
-						? Boolean(
-								installedKeys.get(
-									`${selectedRegistrySkill.source}/${selectedRegistrySkill.name}`.toLowerCase(),
-								) ?? installedKeys.get(selectedRegistrySkill.name.toLowerCase()),
-							)
-						: false
-				}
-				isInstalling={
-					selectedRegistrySkill
-						? installMutation.isPending &&
-							installMutation.variables === installSpec(selectedRegistrySkill)
-						: false
-				}
-			/>
-
-			{/* Hidden file input for upload */}
+		<div className="flex h-full">
 			<input
 				ref={fileInputRef}
 				type="file"
 				accept=".zip,.skill"
 				multiple
 				className="hidden"
-				onChange={(e) => handleFileUpload(e.target.files)}
+				onChange={(e) => {
+					const files = e.target.files;
+					if (files && files.length > 0) uploadMutation.mutate(Array.from(files));
+				}}
 			/>
 
-			{/* Header with tabs */}
-			<div className="border-b border-app-line">
-				<div className="flex items-center gap-1 px-6 py-3">
-					<button
-						onClick={() => setActiveTab("browse")}
-						className={clsx(
-							"rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-							activeTab === "browse"
-								? "bg-app-line text-ink"
-								: "text-ink-faint hover:text-ink-dull",
-						)}
-					>
-						Browse Registry
-					</button>
-					<button
-						onClick={() => setActiveTab("installed")}
-						className={clsx(
-							"rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-							activeTab === "installed"
-								? "bg-app-line text-ink"
-								: "text-ink-faint hover:text-ink-dull",
-						)}
-					>
-						Installed ({installedSkills.length})
-					</button>
-					<div className="flex-1" />
-					<a
-						href="https://skills.sh"
-						target="_blank"
-						rel="noopener noreferrer"
-						className="flex items-center gap-2 text-xs text-ink-faint transition-colors hover:text-accent"
-					>
-						<span>skills.sh</span>
-						<FontAwesomeIcon icon={faExternalLinkAlt} className="text-xs" />
-					</a>
-				</div>
+			<SkillsSidebar
+				activeView={activeView}
+				onViewChange={setActiveView}
+				installedSkills={installedSkills}
+				selectedSkill={selectedSkill}
+				onSelectInstalledSkill={handleSelectInstalledSkill}
+				isLoading={isSkillsLoading}
+			/>
 
-				{activeTab === "browse" && (
-					<div className="border-t border-app-line px-6 py-3">
-						<div className="flex items-center gap-3">
-							<div className="relative flex-1">
-								<FontAwesomeIcon
-									icon={faSearch}
-									className="absolute left-3 top-1/2 -translate-y-1/2 text-ink-faint"
-								/>
-								<input
-									type="text"
-									value={searchQuery}
-									onChange={(e) => setSearchQuery(e.target.value)}
-									placeholder="Search skills..."
-									className="w-full rounded-md border border-app-line bg-app-darkBox py-2 pl-10 pr-3 text-sm text-ink placeholder-ink-faint focus:border-accent focus:outline-none"
-								/>
-							</div>
-							{!debouncedSearch && (
-								<div className="flex items-center gap-1">
-									{VIEWS.map((v) => (
-										<button
-											key={v.key}
-											onClick={() => setRegistryView(v.key)}
-											className={clsx(
-												"flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors",
-												registryView === v.key
-													? "bg-app-line text-ink"
-													: "text-ink-faint hover:text-ink-dull",
-											)}
-										>
-											<FontAwesomeIcon icon={v.icon} className="text-[10px]" />
-											{v.label}
-										</button>
-									))}
-								</div>
-							)}
-						</div>
-					</div>
+			<div className="flex flex-1 flex-col overflow-hidden">
+				{activeView === "directory" && (
+					<SkillsDirectory
+						agentId={agentId}
+						installedKeys={installedKeys}
+						selectedSkill={selectedSkill}
+						onSelectSkill={handleSelectRegistrySkill}
+						installMutation={{
+							mutate: installMutation.mutate,
+							isPending: installMutation.isPending,
+							variables: installMutation.variables,
+						}}
+						removeMutation={{
+							mutate: removeMutation.mutate,
+							isPending: removeMutation.isPending,
+							variables: removeMutation.variables,
+						}}
+					/>
+				)}
+				{activeView === "bundled" && (
+					<BundledSkills
+						installedSkills={installedSkills}
+						selectedSkill={selectedSkill}
+						onSelectSkill={handleSelectInstalledSkill}
+					/>
 				)}
+				{activeView === "create" && <CreateSkill />}
 			</div>
 
-			{/* Content */}
-			<div ref={scrollRef} className="flex-1 overflow-y-auto">
-				<div className="p-6">
-					{activeTab === "browse" && (
-						<div className="space-y-4">
-							<div className="rounded-lg border border-app-line bg-app-box p-6">
-								<h3 className="text-sm font-medium text-ink">
-									Install from GitHub
-								</h3>
-								<p className="mt-1 text-xs text-ink-faint">
-									Install any skill from a GitHub repository
-								</p>
-								<form
-									onSubmit={(e) => {
-										e.preventDefault();
-										const formData = new FormData(e.currentTarget);
-										const spec = formData.get("spec") as string;
-										if (spec) {
-											githubInstallMutation.mutate(spec);
-											e.currentTarget.reset();
-										}
-									}}
-									className="mt-3 flex gap-2"
-								>
-									<input
-										type="text"
-										name="spec"
-										placeholder="owner/repo or owner/repo/skill-name"
-										className="flex-1 rounded-md border border-app-line bg-app-darkBox px-3 py-2 text-sm text-ink placeholder-ink-faint focus:border-accent focus:outline-none"
-									/>
-									<Button
-										type="submit"
-										variant="default"
-										size="default"
-										disabled={githubInstallMutation.isPending}
-									>
-										{githubInstallMutation.isPending ? (
-											<>
-												<FontAwesomeIcon
-													icon={faSpinner}
-													className="animate-spin"
-												/>
-												Installing...
-											</>
-										) : (
-											<>
-												<FontAwesomeIcon icon={faDownload} />
-												Install
-											</>
-										)}
-									</Button>
-								</form>
-								{githubInstallMutation.isError && (
-									<p className="mt-2 text-xs text-red-400">
-										Failed to install skill. Check the repository format.
-									</p>
-								)}
-								{githubInstallMutation.isSuccess && (
-									<p className="mt-2 text-xs text-green-400">
-										Installed {githubInstallMutation.data.installed.length} skill(s):{" "}
-										{githubInstallMutation.data.installed.join(", ")}
-									</p>
-								)}
-							</div>
-
-							<div className="flex items-center justify-between">
-								<h2 className="text-sm font-medium text-ink-dull">
-									{debouncedSearch
-										? `Results for "${debouncedSearch}"`
-										: `${VIEWS.find((v) => v.key === registryView)?.label ?? ""} Skills`}
-								</h2>
-							<span className="text-xs text-ink-faint">
-								{debouncedSearch && searchData
-									? `${searchData.count} results`
-									: totalRegistrySkills != null
-										? `${totalRegistrySkills} skills`
-										: registrySkills.length > 0
-											? `${registrySkills.length} skills`
-											: ""}
-							</span>
-							</div>
-
-							{isRegistryLoading && registrySkills.length === 0 && (
-								<div className="rounded-lg border border-app-line bg-app-box p-8 text-center">
-									<FontAwesomeIcon
-										icon={faSpinner}
-										className="animate-spin text-ink-faint"
-									/>
-									<p className="mt-2 text-sm text-ink-faint">
-										Loading skills from registry...
-									</p>
-								</div>
-							)}
-
-							{!isRegistryLoading && registrySkills.length === 0 && debouncedSearch && (
-								<div className="rounded-lg border border-app-line bg-app-box p-8 text-center">
-									<p className="text-sm text-ink-faint">
-										No skills found matching "{debouncedSearch}"
-									</p>
-								</div>
-							)}
-
-							<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-								{registrySkills.map((skill) => {
-									const spec = installSpec(skill);
-									const compositeKey = `${skill.source}/${skill.name}`.toLowerCase();
-									const installedName =
-										installedKeys.get(compositeKey) ??
-										installedKeys.get(skill.name.toLowerCase());
-									const isInstalled = Boolean(installedName);
-									return (
-										<RegistrySkillCard
-											key={`${skill.source}/${skill.skillId}`}
-											skill={skill}
-											isInstalled={isInstalled}
-											onClick={() => {
-												setSelectedRegistrySkill(skill);
-												setRegistryDetailOpen(true);
-											}}
-											onInstall={() =>
-												installMutation.mutate(spec)
-											}
-											onRemove={() => {
-												if (installedName) {
-													removeMutation.mutate(installedName);
-												}
-											}}
-											isInstalling={
-												installMutation.isPending &&
-												installMutation.variables === spec
-											}
-											isRemoving={
-												removeMutation.isPending &&
-												removeMutation.variables === installedName
-											}
-										/>
-									);
-								})}
-							</div>
-
-							{isFetchingNextPage && (
-								<div className="py-4 text-center">
-									<FontAwesomeIcon
-										icon={faSpinner}
-										className="animate-spin text-ink-faint"
-									/>
-									<span className="ml-2 text-xs text-ink-faint">
-										Loading more...
-									</span>
-								</div>
-							)}
-
-						</div>
-					)}
-
-					{activeTab === "installed" && (
-						<div className="space-y-4">
-							<div className="flex items-center justify-between">
-								<h2 className="text-sm font-medium text-ink-dull">
-									Installed Skills
-								</h2>
-								<div className="flex items-center gap-3">
-									<span className="text-xs text-ink-faint">
-										{installedSkills.length} skills
-									</span>
-									<Button
-										variant="outline"
-										size="default"
-										onClick={() => fileInputRef.current?.click()}
-										disabled={uploadMutation.isPending}
-									>
-										{uploadMutation.isPending ? (
-											<>
-												<FontAwesomeIcon icon={faSpinner} className="animate-spin" />
-												Uploading...
-											</>
-										) : (
-											<>
-												<FontAwesomeIcon icon={faUpload} />
-												Upload Skills
-											</>
-										)}
-									</Button>
-								</div>
-							</div>
-
-							{uploadMutation.isError && (
-								<p className="text-xs text-red-400">
-									Failed to upload skill. Make sure the file is a valid .zip or .skill archive.
-								</p>
-							)}
-							{uploadMutation.isSuccess && (
-								<p className="text-xs text-green-400">
-									Uploaded {uploadMutation.data.installed.length} skill(s):{" "}
-									{uploadMutation.data.installed.join(", ")}
-								</p>
-							)}
-
-							{isLoading && (
-								<div className="rounded-lg border border-app-line bg-app-box p-8 text-center">
-									<FontAwesomeIcon
-										icon={faSpinner}
-										className="animate-spin text-ink-faint"
-									/>
-									<p className="mt-2 text-sm text-ink-faint">
-										Loading skills...
-									</p>
-								</div>
-							)}
-
-							{!isLoading && installedSkills.length === 0 && (
-								<div className="rounded-lg border border-app-line bg-app-box p-8 text-center">
-									<p className="text-sm text-ink-faint">
-										No skills installed yet
-									</p>
-									<Button
-										variant="default"
-										size="default"
-										onClick={() => setActiveTab("browse")}
-										className="mt-4"
-									>
-										<FontAwesomeIcon icon={faSearch} />
-										Browse Skills
-									</Button>
-								</div>
-							)}
-
-							<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-								{installedSkills.map((skill) => (
-									<InstalledSkill
-										key={skill.name}
-										skill={skill}
-										onClick={() => {
-											setSelectedSkill(skill);
-											setDetailModalOpen(true);
-										}}
-										onRemove={() => removeMutation.mutate(skill.name)}
-										isRemoving={
-											removeMutation.isPending &&
-											removeMutation.variables === skill.name
-										}
-									/>
-								))}
-							</div>
-						</div>
-					)}
-				</div>
-			</div>
+			{selectedSkill && (
+				<SkillInspector
+					agentId={agentId}
+					selected={selectedSkill}
+					onClose={() => setSelectedSkill(null)}
+					onInstall={(spec) => installMutation.mutate(spec)}
+					onRemove={(name) => removeMutation.mutate(name)}
+					installedNames={installedNamesSet}
+					isInstalling={installMutation.isPending}
+					isRemoving={removeMutation.isPending}
+					removingName={removeMutation.variables ?? null}
+				/>
+			)}
 		</div>
 	);
 }
diff --git a/interface/src/routes/AgentTasks.tsx b/interface/src/routes/AgentTasks.tsx
index 06b280558..be4e0456c 100644
--- a/interface/src/routes/AgentTasks.tsx
+++ b/interface/src/routes/AgentTasks.tsx
@@ -1,5 +1,247 @@
-import { TaskBoard } from "@/components/TaskBoard";
+import {useCallback, useEffect, useRef, useState} from "react";
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
+import {
+	api,
+	type CreateTaskRequest,
+	type TaskItem,
+	type TaskStatus,
+} from "@/api/client";
+import {useLiveContext} from "@/hooks/useLiveContext";
+import {Button} from "@spacedrive/primitives";
+import {
+	TaskList,
+	TaskDetail,
+	TaskCreateForm,
+	type Task,
+	type TaskStatus as UiTaskStatus,
+	type TaskCreateFormData,
+} from "@spacedrive/ai";
+import {
+	GithubMetadataBadges,
+	getGithubReferences,
+} from "@/components/TaskUtils";
 
-export function AgentTasks({ agentId }: { agentId: string }) {
-  return <TaskBoard agentId={agentId} ownerAgentId={agentId} />;
+const TASK_LIMIT = 200;
+
+export function AgentTasks({agentId}: {agentId: string}) {
+	const queryClient = useQueryClient();
+	const {taskEventVersion} = useLiveContext();
+
+	const queryKey = ["tasks", agentId];
+
+	// SSE-driven cache invalidation
+	const prevVersion = useRef(taskEventVersion);
+	useEffect(() => {
+		if (taskEventVersion !== prevVersion.current) {
+			prevVersion.current = taskEventVersion;
+			queryClient.invalidateQueries({queryKey});
+		}
+	}, [taskEventVersion, queryKey, queryClient]);
+
+	const {data, isLoading, error} = useQuery({
+		queryKey,
+		queryFn: () => api.listTasks({agent_id: agentId, limit: TASK_LIMIT}),
+		refetchInterval: 15_000,
+	});
+
+	const tasks = (data?.tasks ?? []) as unknown as Task[];
+
+	const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
+	const [collapsedGroups, setCollapsedGroups] = useState<Set<UiTaskStatus>>(
+		() => new Set(),
+	);
+	const [createOpen, setCreateOpen] = useState(false);
+
+	const activeTask = tasks.find((t) => t.id === activeTaskId);
+
+	const invalidate = useCallback(
+		() => queryClient.invalidateQueries({queryKey}),
+		[queryClient, queryKey],
+	);
+
+	const updateMutation = useMutation({
+		mutationFn: ({
+			taskNumber,
+			...req
+		}: {
+			taskNumber: number;
+			status?: TaskStatus;
+			complete_subtask?: number;
+		}) => api.updateTask(taskNumber, req),
+		onSuccess: () => void invalidate(),
+	});
+
+	const approveMutation = useMutation({
+		mutationFn: (taskNumber: number) => api.approveTask(taskNumber, "human"),
+		onSuccess: () => void invalidate(),
+	});
+
+	const executeMutation = useMutation({
+		mutationFn: (taskNumber: number) => api.executeTask(taskNumber),
+		onSuccess: () => void invalidate(),
+	});
+
+	const deleteMutation = useMutation({
+		mutationFn: (taskNumber: number) => api.deleteTask(taskNumber),
+		onSuccess: () => {
+			setActiveTaskId(null);
+			void invalidate();
+		},
+	});
+
+	const createMutation = useMutation({
+		mutationFn: (req: CreateTaskRequest) => api.createTask(req),
+		onSuccess: () => {
+			setCreateOpen(false);
+			void invalidate();
+		},
+	});
+
+	const handleStatusChange = useCallback(
+		(task: Task, status: UiTaskStatus) => {
+			const t = task as unknown as TaskItem;
+			// Route approve/execute through their dedicated endpoints
+			if (t.status === "pending_approval" && status === "ready") {
+				approveMutation.mutate(t.task_number);
+			} else if (t.status === "backlog" && status === "in_progress") {
+				executeMutation.mutate(t.task_number);
+			} else {
+				updateMutation.mutate({taskNumber: t.task_number, status});
+			}
+		},
+		[updateMutation, approveMutation, executeMutation],
+	);
+
+	const handleDelete = useCallback(
+		(task: Task) => {
+			deleteMutation.mutate((task as unknown as TaskItem).task_number);
+		},
+		[deleteMutation],
+	);
+
+	const handleSubtaskToggle = useCallback(
+		(task: Task, index: number, _completed: boolean) => {
+			updateMutation.mutate({
+				taskNumber: (task as unknown as TaskItem).task_number,
+				complete_subtask: index,
+			});
+		},
+		[updateMutation],
+	);
+
+	const handleToggleGroup = useCallback((status: UiTaskStatus) => {
+		setCollapsedGroups((prev) => {
+			const next = new Set(prev);
+			if (next.has(status)) next.delete(status);
+			else next.add(status);
+			return next;
+		});
+	}, []);
+
+	const handleCreate = useCallback(
+		(formData: TaskCreateFormData) => {
+			createMutation.mutate({
+				owner_agent_id: agentId,
+				title: formData.title,
+				description: formData.description || undefined,
+				priority: formData.priority,
+				status: "backlog",
+			});
+		},
+		[createMutation, agentId],
+	);
+
+	return (
+		<div className="flex h-full w-full">
+			{/* List panel */}
+			<div className="flex min-w-0 flex-1 flex-col">
+				{/* Toolbar */}
+				<div className="flex items-center justify-between border-b border-app-line px-4 py-2">
+					<span className="text-sm text-ink-dull">
+						{tasks.length} task{tasks.length !== 1 ? "s" : ""}
+					</span>
+					<Button size="md" onClick={() => setCreateOpen(!createOpen)}>
+						{createOpen ? "Cancel" : "Create Task"}
+					</Button>
+				</div>
+
+				{/* Create form */}
+				{createOpen && (
+					<div className="border-b border-app-line px-3 py-2">
+						<TaskCreateForm
+							onSubmit={handleCreate}
+							onCancel={() => setCreateOpen(false)}
+							isSubmitting={createMutation.isPending}
+						/>
+					</div>
+				)}
+
+				{/* Task list */}
+				{isLoading ? (
+					<div className="py-8 text-center text-sm text-ink-faint">
+						Loading tasks...
+					</div>
+				) : error ? (
+					<div className="py-8 text-center text-sm text-red-400">
+						Failed to load tasks.
+						<div className="mt-1 font-mono text-[10px] text-ink-faint">
+							{(error as Error).message}
+						</div>
+					</div>
+				) : tasks.length === 0 ? (
+					<div className="flex flex-1 items-center justify-center">
+						<div className="text-center">
+							<p className="text-sm text-ink-dull">No tasks yet.</p>
+							<p className="mt-1 text-xs text-ink-faint">
+								Create one to get started.
+							</p>
+						</div>
+					</div>
+				) : (
+					<div className="flex-1 overflow-y-auto">
+						<TaskList
+							tasks={tasks}
+							activeTaskId={activeTaskId ?? undefined}
+							collapsedGroups={collapsedGroups}
+							onToggleGroup={handleToggleGroup}
+							onTaskClick={(task) => setActiveTaskId(task.id)}
+							onStatusChange={handleStatusChange}
+							onDelete={handleDelete}
+						/>
+					</div>
+				)}
+			</div>
+
+			{/* Detail panel */}
+			{activeTask && (
+				<div className="w-[400px] shrink-0 overflow-y-auto border-l border-app-line">
+					<TaskDetail
+						task={activeTask}
+						onStatusChange={handleStatusChange}
+						onSubtaskToggle={handleSubtaskToggle}
+						onDelete={handleDelete}
+						onClose={() => setActiveTaskId(null)}
+					/>
+					{/* GitHub metadata (not part of the shared TaskDetail) */}
+					<GithubSection
+						metadata={(activeTask as unknown as TaskItem).metadata}
+					/>
+				</div>
+			)}
+		</div>
+	);
+}
+
+function GithubSection({metadata}: {metadata: Record<string, unknown>}) {
+	const refs = getGithubReferences(metadata);
+	if (refs.length === 0) return null;
+
+	return (
+		<div className="border-t border-app-line/40 px-4 py-3">
+			<h3 className="mb-2 text-xs font-medium uppercase tracking-wide text-ink-dull">
+				GitHub Links
+			</h3>
+			<GithubMetadataBadges references={refs} />
+		</div>
+	);
 }
diff --git a/interface/src/routes/AgentWorkers.tsx b/interface/src/routes/AgentWorkers.tsx
index 5c4be8b01..0257f3746 100644
--- a/interface/src/routes/AgentWorkers.tsx
+++ b/interface/src/routes/AgentWorkers.tsx
@@ -10,13 +10,16 @@ import {
 	type TranscriptStep,
 	type OpenCodePart,
 } from "@/api/client";
-import {ToolCall, pairTranscriptSteps, openCodePartToPair} from "@/components/ToolCall";
-import {Badge} from "@/ui/Badge";
+import {
+	ToolCall,
+	pairTranscriptSteps,
+	openCodePartToPair,
+} from "@/components/ToolCall";
+import {Badge, badgeVariants} from "@spacedrive/primitives";
 import {formatTimeAgo, formatDuration} from "@/lib/format";
 import {LiveDuration} from "@/components/LiveDuration";
 import {useLiveContext} from "@/hooks/useLiveContext";
-import {cx} from "@/ui/utils";
-import {badgeStyles} from "@/ui/Badge";
+import {cx} from "class-variance-authority";
 import {ProviderIcon} from "@/lib/providerIcons";
 
 import {OpenCodeEmbed, base64UrlEncode} from "@/components/OpenCodeEmbed";
@@ -26,6 +29,11 @@ type StatusFilter = (typeof STATUS_FILTERS)[number];
 
 const KNOWN_STATUSES = new Set(["running", "idle", "done", "failed"]);
 
+/** Collapse runs of 3+ spaces to 2, preventing Markdown 4-space code blocks. */
+function stripExcessWhitespace(text: string): string {
+	return text.replace(/ {3,}/g, "  ");
+}
+
 function normalizeStatus(status: string): string {
 	if (KNOWN_STATUSES.has(status)) return status;
 	// Legacy rows where set_status text overwrote the state enum.
@@ -48,7 +56,12 @@ export function AgentWorkers({agentId}: {agentId: string}) {
 	const navigate = useNavigate();
 	const routeSearch = useSearch({strict: false}) as {worker?: string};
 	const selectedWorkerId = routeSearch.worker ?? null;
-	const {activeWorkers, workerEventVersion, liveTranscripts, liveOpenCodeParts} = useLiveContext();
+	const {
+		activeWorkers,
+		workerEventVersion,
+		liveTranscripts,
+		liveOpenCodeParts,
+	} = useLiveContext();
 
 	// Invalidate worker queries when SSE events fire
 	const prevVersion = useRef(workerEventVersion);
@@ -151,12 +164,14 @@ export function AgentWorkers({agentId}: {agentId: string}) {
 	// Running workers that haven't hit the DB yet still get a full detail view
 	// from SSE state + live transcript.
 	const mergedDetail: WorkerDetailResponse | null = useMemo(() => {
-		const live = selectedWorkerId ? scopedActiveWorkers[selectedWorkerId] : null;
+		const live = selectedWorkerId
+			? scopedActiveWorkers[selectedWorkerId]
+			: null;
 
 		if (detailData) {
 			// DB data exists — overlay live status if worker is still running
 			if (!live) return detailData;
-			return { ...detailData, status: live.isIdle ? "idle" : "running" };
+			return {...detailData, status: live.isIdle ? "idle" : "running"};
 		}
 
 		// No DB data yet — synthesize from SSE state
@@ -174,10 +189,10 @@ export function AgentWorkers({agentId}: {agentId: string}) {
 			transcript: null,
 			tool_calls: live.toolCalls,
 			opencode_session_id: null,
-		opencode_port: null,
-		interactive: live.interactive,
-		directory: null,
-	};
+			opencode_port: null,
+			interactive: live.interactive,
+			directory: null,
+		};
 	}, [detailData, scopedActiveWorkers, selectedWorkerId]);
 
 	const selectWorker = useCallback(
@@ -196,7 +211,7 @@ export function AgentWorkers({agentId}: {agentId: string}) {
 			{/* Left column: worker list */}
 			<div className="flex w-[360px] flex-shrink-0 flex-col border-r border-app-line/50">
 				{/* Toolbar */}
-				<div className="flex items-center gap-3 border-b border-app-line/50 bg-app-darkBox/20 px-4 py-2.5">
+				<div className="flex items-center gap-3 border-b border-app-line/50 bg-app-dark-box/20 px-4 py-2.5">
 					<input
 						type="text"
 						placeholder="Search tasks..."
@@ -266,7 +281,7 @@ export function AgentWorkers({agentId}: {agentId: string}) {
 	);
 }
 
-interface LiveWorker {
+export interface LiveWorker {
 	id: string;
 	task: string;
 	status: string;
@@ -292,7 +307,11 @@ function WorkerCard({
 	const isLive = worker.status === "running" || !!liveWorker;
 	const isIdle = liveWorker?.isIdle ?? worker.status === "idle";
 	const isInteractive = liveWorker?.interactive ?? worker.interactive;
-	const displayStatus = isIdle ? "idle" : isLive ? "running" : normalizeStatus(worker.status);
+	const displayStatus = isIdle
+		? "idle"
+		: isLive
+			? "running"
+			: normalizeStatus(worker.status);
 	const toolCalls = liveWorker?.toolCalls ?? worker.tool_calls;
 
 	return (
@@ -304,7 +323,12 @@ function WorkerCard({
 			)}
 		>
 			<div className="flex items-center justify-between gap-2">
-				<p className={cx("min-w-0 flex-1 truncate text-xs font-medium", selected ? "text-ink" : "text-ink-dull")}>
+				<p
+					className={cx(
+						"min-w-0 flex-1 truncate text-xs font-medium",
+						selected ? "text-ink" : "text-ink-dull",
+					)}
+				>
 					{worker.task.replace(/^\[opencode]\s*/, "")}
 				</p>
 				<div className="flex shrink-0 items-center gap-1.5 pointer-events-none">
@@ -317,10 +341,7 @@ function WorkerCard({
 							interactive
 						</Badge>
 					) : null}
-					<Badge
-						variant="outline"
-						size="sm"
-					>
+					<Badge variant="outline" size="sm">
 						{isLive && !isIdle && (
 							<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
 						)}
@@ -338,8 +359,7 @@ function WorkerCard({
 				{isLive && !isIdle ? (
 					<LiveDuration
 						startMs={
-							liveWorker?.startedAt ??
-							new Date(worker.started_at).getTime()
+							liveWorker?.startedAt ?? new Date(worker.started_at).getTime()
 						}
 					/>
 				) : (
@@ -358,7 +378,7 @@ function WorkerCard({
 
 type DetailTab = "opencode" | "transcript";
 
-function WorkerDetail({
+export function WorkerDetail({
 	detail,
 	liveWorker,
 	liveTranscript,
@@ -371,7 +391,10 @@ function WorkerDetail({
 }) {
 	const isLive = detail.status === "running" || !!liveWorker;
 	const isIdle = liveWorker?.isIdle ?? detail.status === "idle";
-	const duration = durationBetween(detail.started_at, detail.completed_at ?? null);
+	const duration = durationBetween(
+		detail.started_at,
+		detail.completed_at ?? null,
+	);
 	const displayStatus = liveWorker?.status;
 	const currentTool = liveWorker?.currentTool;
 	const toolCalls = liveWorker?.toolCalls ?? detail.tool_calls ?? 0;
@@ -402,8 +425,10 @@ function WorkerDetail({
 	// from the DB or the server-side live cache (survives page refreshes).
 	// For completed workers, always use the persisted DB transcript.
 	const rawTranscript = isLive
-		? (liveTranscript && liveTranscript.length > 0 ? liveTranscript : detail.transcript ?? null)
-		: detail.transcript ?? null;
+		? liveTranscript && liveTranscript.length > 0
+			? liveTranscript
+			: (detail.transcript ?? null)
+		: (detail.transcript ?? null);
 	const transcript = useMemo(() => {
 		if (!rawTranscript || !detail.result) return rawTranscript;
 		const last = rawTranscript[rawTranscript.length - 1];
@@ -430,7 +455,7 @@ function WorkerDetail({
 	return (
 		<div className="flex h-full flex-col">
 			{/* Header */}
-			<div className="flex flex-col gap-2 border-b border-app-line/50 bg-app-darkBox/20 px-6 py-4">
+			<div className="flex flex-col gap-2 border-b border-app-line/50 bg-app-dark-box/20 px-6 py-4">
 				<div className="flex items-start justify-between gap-3">
 					<TaskText text={detail.task} />
 					{isLive && detail.channel_id && (
@@ -443,13 +468,13 @@ function WorkerDetail({
 				<div className="flex items-center justify-between gap-3">
 					<div className="flex items-center gap-3 text-tiny text-ink-faint">
 						{detail.channel_name && <span>{detail.channel_name}</span>}
-				{hasOpenCodeEmbed && detail.opencode_port && (
-					<OpenCodeDirectLink
-						port={detail.opencode_port}
-						sessionId={detail.opencode_session_id!}
-						directory={detail.directory ?? null}
-					/>
-				)}
+						{hasOpenCodeEmbed && detail.opencode_port && (
+							<OpenCodeDirectLink
+								port={detail.opencode_port}
+								sessionId={detail.opencode_session_id!}
+								directory={detail.directory ?? null}
+							/>
+						)}
 						{isRunning ? (
 							<span>
 								Running for{" "}
@@ -461,14 +486,14 @@ function WorkerDetail({
 								/>
 							</span>
 						) : isIdle ? (
-							<span className="text-blue-500">Idle — waiting for follow-up</span>
+							<span className="text-blue-500">
+								Idle — waiting for follow-up
+							</span>
 						) : (
 							duration && <span>{duration}</span>
 						)}
 						{!isLive && <span>{formatTimeAgo(detail.started_at)}</span>}
-						{toolCalls > 0 && (
-							<span>{toolCalls} tool calls</span>
-						)}
+						{toolCalls > 0 && <span>{toolCalls} tool calls</span>}
 					</div>
 					{hasOpenCodeEmbed && (
 						<div className="flex items-center gap-1 rounded-full border border-app-line/50 p-0.5">
@@ -501,9 +526,7 @@ function WorkerDetail({
 				{isRunning && (currentTool || displayStatus) && (
 					<div className="flex items-center gap-2 text-tiny">
 						{currentTool ? (
-							<span className="text-accent">
-								Running {currentTool}...
-							</span>
+							<span className="text-accent">Running {currentTool}...</span>
 						) : displayStatus ? (
 							<span className="text-amber-500">{displayStatus}</span>
 						) : null}
@@ -512,12 +535,12 @@ function WorkerDetail({
 			</div>
 
 			{/* Content */}
-		{activeTab === "opencode" && hasOpenCodeEmbed ? (
-			<OpenCodeEmbed
-				port={detail.opencode_port!}
-				sessionId={detail.opencode_session_id!}
-				directory={detail.directory ?? null}
-			/>
+			{activeTab === "opencode" && hasOpenCodeEmbed ? (
+				<OpenCodeEmbed
+					port={detail.opencode_port!}
+					sessionId={detail.opencode_session_id!}
+					directory={detail.directory ?? null}
+				/>
 			) : (
 				<div ref={transcriptRef} className="flex-1 overflow-y-auto">
 					{/* Result section */}
@@ -576,8 +599,8 @@ function WorkerDetail({
 										transition={{duration: 0.2, ease: "easeOut"}}
 									>
 										{item.kind === "text" ? (
-											<div className="text-xs text-ink">
-												<Markdown>{item.text}</Markdown>
+											<div className="text-xs text-ink-dull">
+												<Markdown>{stripExcessWhitespace(item.text)}</Markdown>
 											</div>
 										) : (
 											<ToolCall pair={item.pair} />
@@ -647,9 +670,13 @@ function OpenCodeDirectLink({
 			href={href}
 			target="_blank"
 			rel="noopener noreferrer"
-			className={cx(badgeStyles({ variant: "outline", size: "sm" }), "w-fit")}
+			className={cx(badgeVariants({variant: "outline", size: "sm"}), "w-fit")}
 		>
-			<ProviderIcon provider="opencode-zen" size={12} className="text-current" />
+			<ProviderIcon
+				provider="opencode-zen"
+				size={12}
+				className="text-current"
+			/>
 			OpenCode ::{port}
 		</a>
 	);
@@ -671,13 +698,12 @@ function TaskText({text}: {text: string}) {
 		<div
 			ref={containerRef}
 			className="relative min-w-0 flex-1"
-			onMouseEnter={() => { if (isTruncated) setHovered(true); }}
+			onMouseEnter={() => {
+				if (isTruncated) setHovered(true);
+			}}
 			onMouseLeave={() => setHovered(false)}
 		>
-			<p
-				ref={textRef}
-				className="truncate text-sm font-medium text-ink-dull"
-			>
+			<p ref={textRef} className="truncate text-sm font-medium text-ink-dull">
 				{text}
 			</p>
 			{hovered && (
@@ -717,8 +743,6 @@ function CancelWorkerButton({
 	);
 }
 
-
-
 // -- OpenCode-native part renderers --
 
 function OpenCodePartView({part}: {part: OpenCodePart}) {
@@ -753,5 +777,3 @@ function OpenCodePartView({part}: {part: OpenCodePart}) {
 			return null;
 	}
 }
-
-
diff --git a/interface/src/routes/ChannelDetail.tsx b/interface/src/routes/ChannelDetail.tsx
index 84d293261..4650a305c 100644
--- a/interface/src/routes/ChannelDetail.tsx
+++ b/interface/src/routes/ChannelDetail.tsx
@@ -1,16 +1,28 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Link } from "@tanstack/react-router";
-import { AnimatePresence, motion } from "framer-motion";
-import { api, type ChannelInfo, type TimelineItem, type TimelineBranchRun, type TimelineWorkerRun } from "@/api/client";
-import { isOpenCodeWorker, type ChannelLiveState, type ActiveWorker, type ActiveBranch } from "@/hooks/useChannelLiveState";
-import { CortexChatPanel } from "@/components/CortexChatPanel";
-import { LiveDuration } from "@/components/LiveDuration";
-import { Markdown } from "@/components/Markdown";
-import { PromptInspectModal } from "@/components/PromptInspectModal";
-import { formatTimestamp, platformIcon, platformColor } from "@/lib/format";
-import { Button } from "@/ui";
-import { Cancel01Icon, IdeaIcon, CodeIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
+import {useCallback, useEffect, useMemo, useRef, useState} from "react";
+import {Link} from "@tanstack/react-router";
+import {useQuery} from "@tanstack/react-query";
+import {
+	api,
+	type ChannelInfo,
+	type TimelineItem,
+	type TimelineBranchRun,
+	type TimelineWorkerRun,
+	type TranscriptStep,
+} from "@/api/client";
+import {
+	isOpenCodeWorker,
+	type ChannelLiveState,
+	type ActiveWorker,
+	type ActiveBranch,
+} from "@/hooks/useChannelLiveState";
+import {useLiveContext} from "@/hooks/useLiveContext";
+import {LiveDuration} from "@/components/LiveDuration";
+import {Markdown} from "@/components/Markdown";
+import {PromptInspectModal} from "@/components/PromptInspectModal";
+import {pairTranscriptSteps, ToolCall} from "@/components/ToolCall";
+import {formatTimestamp, platformIcon, platformColor} from "@/lib/format";
+import {Button} from "@spacedrive/primitives";
+import {X, Code} from "@phosphor-icons/react";
 
 interface ChannelDetailProps {
 	agentId: string;
@@ -20,28 +32,96 @@ interface ChannelDetailProps {
 	onLoadMore: () => void;
 }
 
-function CancelButton({ onClick, className }: { onClick: () => void; className?: string }) {
+function CancelButton({
+	onClick,
+	className,
+}: {
+	onClick: () => void;
+	className?: string;
+}) {
 	const [cancelling, setCancelling] = useState(false);
 	return (
 		<Button
 			type="button"
-			variant="ghost"
+			variant="bare"
 			size="icon"
 			disabled={cancelling}
-			onClick={(e) => {
+			onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
 				e.stopPropagation();
 				setCancelling(true);
 				onClick();
 			}}
-			className={`h-7 w-7 flex-shrink-0 text-ink-faint/50 hover:bg-red-500/15 hover:text-red-400 ${className ?? ""}`}
+			className={`h-7 w-7 flex-shrink-0 text-ink-faint/50 hover:bg-status-error/15 hover:text-status-error ${className ?? ""}`}
 			title="Cancel"
 		>
-			<HugeiconsIcon icon={Cancel01Icon} className="h-3.5 w-3.5" />
+			<X className="h-3.5 w-3.5" />
 		</Button>
 	);
 }
 
-function LiveBranchRunItem({ item, live, channelId }: { item: TimelineBranchRun; live: ActiveBranch; channelId: string }) {
+function WorkerTranscriptView({
+	workerId,
+	agentId,
+	isLive,
+	liveTranscript,
+}: {
+	workerId: string;
+	agentId: string;
+	isLive: boolean;
+	liveTranscript?: TranscriptStep[];
+}) {
+	const {data: detailData} = useQuery({
+		queryKey: ["worker-detail", agentId, workerId],
+		queryFn: () => api.workerDetail(agentId, workerId).catch(() => null),
+	});
+
+	const transcript = useMemo(() => {
+		if (isLive) {
+			return liveTranscript && liveTranscript.length > 0
+				? liveTranscript
+				: (detailData?.transcript ?? null);
+		}
+		return detailData?.transcript ?? null;
+	}, [isLive, liveTranscript, detailData]);
+
+	if (!transcript || transcript.length === 0) {
+		if (isLive) {
+			return (
+				<div className="flex items-center gap-2 py-2 pl-4 text-tiny text-ink-faint">
+					<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-accent" />
+					Waiting for first tool call...
+				</div>
+			);
+		}
+		return null;
+	}
+
+	const items = pairTranscriptSteps(transcript);
+
+	return (
+		<div className="mt-2 flex flex-col gap-2 pl-4">
+			{items.map((item, index) =>
+				item.kind === "text" ? (
+					<div key={`text-${index}`} className="text-xs text-ink-dull">
+						<Markdown>{item.text.replace(/ {3,}/g, "  ")}</Markdown>
+					</div>
+				) : (
+					<ToolCall key={item.pair.id} pair={item.pair} />
+				),
+			)}
+		</div>
+	);
+}
+
+function LiveBranchRunItem({
+	item,
+	live,
+	channelId,
+}: {
+	item: TimelineBranchRun;
+	live: ActiveBranch;
+	channelId: string;
+}) {
 	const displayTool = live.currentTool ?? live.lastTool;
 	return (
 		<div className="flex gap-3 px-3 py-2">
@@ -49,21 +129,34 @@ function LiveBranchRunItem({ item, live, channelId }: { item: TimelineBranchRun;
 				{formatTimestamp(new Date(item.started_at).getTime())}
 			</span>
 			<div className="min-w-0 flex-1">
-				<div className="rounded-md bg-violet-500/10 px-3 py-2">
+				<div className="rounded-md bg-accent/10 px-3 py-2">
 					<div className="flex min-w-0 items-center gap-2">
-						<div className="h-2 w-2 animate-pulse rounded-full bg-violet-400" />
-						<span className="text-sm font-medium text-violet-300">Branch</span>
-						<span className="min-w-0 flex-1 truncate text-sm text-ink-dull">{item.description}</span>
-						<CancelButton className="ml-auto" onClick={() => { api.cancelProcess(channelId, "branch", item.id).catch(console.warn); }} />
+						<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
+						<span className="text-sm font-medium text-accent-faint">Branch</span>
+						<span className="min-w-0 flex-1 truncate text-sm text-ink-dull">
+							{item.description}
+						</span>
+						<CancelButton
+							className="ml-auto"
+							onClick={() => {
+								api
+									.cancelProcess(channelId, "branch", item.id)
+									.catch(console.warn);
+							}}
+						/>
 					</div>
 					<div className="mt-1 flex items-center gap-3 pl-4 text-tiny text-ink-faint">
 						<LiveDuration startMs={live.startedAt} />
 						{displayTool && (
-							<span className={live.currentTool ? "text-violet-400/70" : "text-violet-400/40"}>{displayTool}</span>
-						)}
-						{live.toolCalls > 0 && (
-							<span>{live.toolCalls} tool calls</span>
+							<span
+								className={
+									live.currentTool ? "text-accent/70" : "text-accent/40"
+								}
+							>
+								{displayTool}
+							</span>
 						)}
+						{live.toolCalls > 0 && <span>{live.toolCalls} tool calls</span>}
 					</div>
 				</div>
 			</div>
@@ -71,9 +164,20 @@ function LiveBranchRunItem({ item, live, channelId }: { item: TimelineBranchRun;
 	);
 }
 
-function LiveWorkerRunItem({ item, live, channelId, agentId }: { item: TimelineWorkerRun; live: ActiveWorker; channelId: string; agentId: string }) {
+function LiveWorkerRunItem({
+	item,
+	live,
+	channelId,
+	agentId,
+}: {
+	item: TimelineWorkerRun;
+	live: ActiveWorker;
+	channelId: string;
+	agentId: string;
+}) {
 	const [expanded, setExpanded] = useState(true);
 	const oc = isOpenCodeWorker(live);
+	const {liveTranscripts} = useLiveContext();
 
 	return (
 		<div className="flex gap-3 px-3 py-2">
@@ -81,9 +185,13 @@ function LiveWorkerRunItem({ item, live, channelId, agentId }: { item: TimelineW
 				{formatTimestamp(new Date(item.started_at).getTime())}
 			</span>
 			<div className="min-w-0 flex-1">
-				<div className={`w-full rounded-md px-3 py-2 transition-colors ${
-					oc ? "bg-zinc-500/10 hover:bg-zinc-500/15" : "bg-amber-500/10 hover:bg-amber-500/15"
-				}`}>
+				<div
+					className={`w-full rounded-md px-3 py-2 transition-colors ${
+						oc
+							? "bg-ink-faint/10 hover:bg-ink-faint/15"
+							: "bg-status-warning/10 hover:bg-status-warning/15"
+					}`}
+				>
 					<div className="flex min-w-0 items-center gap-2 overflow-hidden">
 						<button
 							type="button"
@@ -91,11 +199,21 @@ function LiveWorkerRunItem({ item, live, channelId, agentId }: { item: TimelineW
 							className="min-w-0 flex-1 text-left"
 						>
 							<div className="flex min-w-0 items-center gap-2 overflow-hidden">
-								<div className={`h-2 w-2 animate-pulse rounded-full ${oc ? "bg-zinc-400" : "bg-amber-400"}`} />
-								<span className={`text-sm font-medium ${oc ? "text-zinc-300" : "text-amber-300"}`}>Worker</span>
-								<span className={`min-w-0 flex-1 text-sm text-ink-dull ${
-									expanded ? "whitespace-normal break-words" : "truncate"
-								}`}>{item.task}</span>
+								<div
+									className={`h-2 w-2 animate-pulse rounded-full ${oc ? "bg-ink-faint" : "bg-status-warning"}`}
+								/>
+								<span
+									className={`text-sm font-medium ${oc ? "text-ink-dull" : "text-status-warning"}`}
+								>
+									Worker
+								</span>
+								<span
+									className={`min-w-0 flex-1 text-sm text-ink-dull ${
+										expanded ? "whitespace-normal break-words" : "truncate"
+									}`}
+								>
+									{item.task}
+								</span>
 								<span className="flex-shrink-0 text-tiny leading-5 text-ink-faint">
 									{expanded ? "▾" : "▸"}
 								</span>
@@ -103,38 +221,54 @@ function LiveWorkerRunItem({ item, live, channelId, agentId }: { item: TimelineW
 						</button>
 						<Link
 							to="/agents/$agentId/workers"
-							params={{ agentId }}
-							search={{ worker: item.id }}
+							params={{agentId}}
+							search={{worker: item.id}}
 							className={`flex-shrink-0 rounded border px-1.5 py-0.5 text-tiny font-medium transition-colors ${
 								oc
-									? "border-zinc-400/30 text-zinc-300 hover:border-zinc-400/60 hover:bg-zinc-500/15"
-									: "border-amber-400/30 text-amber-300 hover:border-amber-400/60 hover:bg-amber-500/15"
+									? "border-ink-faint/30 text-ink-dull hover:border-ink-faint/60 hover:bg-ink-faint/15"
+									: "border-status-warning/30 text-status-warning hover:border-status-warning/60 hover:bg-status-warning/15"
 							}`}
 						>
 							Open
 						</Link>
-						<CancelButton onClick={() => { api.cancelProcess(channelId, "worker", item.id).catch(console.warn); }} />
+						<CancelButton
+							onClick={() => {
+								api
+									.cancelProcess(channelId, "worker", item.id)
+									.catch(console.warn);
+							}}
+						/>
 					</div>
 				</div>
 				{expanded && (
-					<div className="mt-1 flex min-w-0 items-center gap-3 overflow-hidden pl-4 text-tiny text-ink-faint">
-						<LiveDuration startMs={live.startedAt} />
-						<span className="truncate">{live.status}</span>
-						{live.currentTool && (
-							<span className={`truncate ${oc ? "text-zinc-400/70" : "text-amber-400/70"}`}>{live.currentTool}</span>
-						)}
-						{live.toolCalls > 0 && (
-							<span>{live.toolCalls} tool calls</span>
-						)}
-					</div>
+					<>
+						<div className="mt-1 flex min-w-0 items-center gap-3 overflow-hidden pl-4 text-tiny text-ink-faint">
+							<LiveDuration startMs={live.startedAt} />
+							<span className="truncate">{live.status}</span>
+							{live.currentTool && (
+								<span
+									className={`truncate ${oc ? "text-ink-faint/70" : "text-status-warning/70"}`}
+								>
+									{live.currentTool}
+								</span>
+							)}
+							{live.toolCalls > 0 && <span>{live.toolCalls} tool calls</span>}
+						</div>
+						<WorkerTranscriptView
+							workerId={item.id}
+							agentId={agentId}
+							isLive
+							liveTranscript={liveTranscripts[item.id]}
+						/>
+					</>
 				)}
 			</div>
 		</div>
 	);
 }
 
-function BranchRunItem({ item }: { item: TimelineBranchRun }) {
-	const [expanded, setExpanded] = useState(false);
+function BranchRunItem({item}: {item: TimelineBranchRun}) {
+	const [expanded, setExpanded] = useState(true);
 
 	return (
 		<div className="flex gap-3 px-3 py-2">
@@ -142,20 +276,23 @@ function BranchRunItem({ item }: { item: TimelineBranchRun }) {
 				{formatTimestamp(new Date(item.started_at).getTime())}
 			</span>
 			<div className="min-w-0 flex-1">
-				<Button
+				<button
 					type="button"
 					onClick={() => setExpanded(!expanded)}
-					variant="ghost"
-					className="h-auto w-full justify-start rounded-md bg-violet-500/10 px-3 py-2 text-left hover:bg-violet-500/15"
+					className="w-full rounded-md bg-accent/10 px-3 py-2 text-left hover:bg-accent/15"
 				>
 					<div className="flex min-w-0 items-start gap-2">
 						<span className="inline-flex flex-shrink-0 items-center gap-2 self-start">
-							<span className="h-2 w-2 rounded-full bg-violet-400/50" />
-							<span className="text-sm font-medium text-violet-300">Branch</span>
+							<span className="h-2 w-2 rounded-full bg-accent/50" />
+							<span className="text-sm font-medium text-accent-faint">
+								Branch
+							</span>
 						</span>
-						<span className={`min-w-0 flex-1 text-sm text-ink-dull ${
-							expanded ? "whitespace-normal break-words" : "truncate"
-						}`}>
+						<span
+							className={`min-w-0 flex-1 text-sm text-ink-dull ${
+								expanded ? "whitespace-normal break-words" : "truncate"
+							}`}
+						>
 							{item.description}
 						</span>
 						{item.conclusion && (
@@ -164,11 +301,13 @@ function BranchRunItem({ item }: { item: TimelineBranchRun }) {
 							</span>
 						)}
 					</div>
-				</Button>
+				</button>
 				{expanded && item.conclusion && (
-					<div className="mt-1 rounded-md border border-violet-500/10 bg-violet-500/5 px-3 py-2">
+					<div className="mt-1 rounded-md border border-accent/10 bg-accent/5 px-3 py-2">
 						<div className="text-sm text-ink-dull">
-							<Markdown className="whitespace-pre-wrap break-words">{item.conclusion}</Markdown>
+							<Markdown className="break-words">
+								{item.conclusion}
+							</Markdown>
 						</div>
 					</div>
 				)}
@@ -177,9 +316,15 @@ function BranchRunItem({ item }: { item: TimelineBranchRun }) {
 	);
 }
 
-function WorkerRunItem({ item, agentId }: { item: TimelineWorkerRun; agentId: string }) {
-	const [expanded, setExpanded] = useState(false);
-	const oc = isOpenCodeWorker({ task: item.task });
+function WorkerRunItem({
+	item,
+	agentId,
+}: {
+	item: TimelineWorkerRun;
+	agentId: string;
+}) {
+	const [expanded, setExpanded] = useState(true);
+	const oc = isOpenCodeWorker({task: item.task});
 
 	return (
 		<div className="flex gap-3 px-3 py-2">
@@ -187,59 +332,90 @@ function WorkerRunItem({ item, agentId }: { item: TimelineWorkerRun; agentId: st
 				{formatTimestamp(new Date(item.started_at).getTime())}
 			</span>
 			<div className="min-w-0 flex-1">
-				<div className={`w-full rounded-md px-3 py-2 transition-colors ${
-					oc ? "bg-zinc-500/10 hover:bg-zinc-500/15" : "bg-amber-500/10 hover:bg-amber-500/15"
-				}`}>
+				<div
+					className={`w-full rounded-md px-3 py-2 transition-colors ${
+						oc
+							? "bg-ink-faint/10 hover:bg-ink-faint/15"
+							: "bg-status-warning/10 hover:bg-status-warning/15"
+					}`}
+				>
 					<div className="flex min-w-0 items-center gap-2 overflow-hidden">
 						<button
 							type="button"
-							onClick={() => {
-								if (item.result) setExpanded(!expanded);
-							}}
+							onClick={() => setExpanded(!expanded)}
 							className="min-w-0 flex-1 text-left"
 						>
 							<div className="flex min-w-0 items-center gap-2 overflow-hidden">
-								<div className={`h-2 w-2 rounded-full ${oc ? "bg-zinc-400/50" : "bg-amber-400/50"}`} />
-								<span className={`text-sm font-medium ${oc ? "text-zinc-300" : "text-amber-300"}`}>Worker</span>
-								<span className={`min-w-0 flex-1 text-sm text-ink-dull ${
-									expanded ? "whitespace-normal break-words" : "truncate"
-								}`}>{item.task}</span>
-								{item.result && (
-									<span className="flex-shrink-0 text-tiny leading-5 text-ink-faint">
-										{expanded ? "▾" : "▸"}
-									</span>
-								)}
+								<div
+									className={`h-2 w-2 rounded-full ${oc ? "bg-ink-faint/50" : "bg-status-warning/50"}`}
+								/>
+								<span
+									className={`text-sm font-medium ${oc ? "text-ink-dull" : "text-status-warning"}`}
+								>
+									Worker
+								</span>
+								<span
+									className={`min-w-0 flex-1 text-sm text-ink-dull ${
+										expanded ? "whitespace-normal break-words" : "truncate"
+									}`}
+								>
+									{item.task}
+								</span>
+								<span className="flex-shrink-0 text-tiny leading-5 text-ink-faint">
+									{expanded ? "▾" : "▸"}
+								</span>
 							</div>
 						</button>
 						<Link
 							to="/agents/$agentId/workers"
-							params={{ agentId }}
-							search={{ worker: item.id }}
+							params={{agentId}}
+							search={{worker: item.id}}
 							className={`flex-shrink-0 rounded border px-1.5 py-0.5 text-tiny font-medium transition-colors ${
 								oc
-									? "border-zinc-400/30 text-zinc-300 hover:border-zinc-400/60 hover:bg-zinc-500/15"
-									: "border-amber-400/30 text-amber-300 hover:border-amber-400/60 hover:bg-amber-500/15"
+									? "border-ink-faint/30 text-ink-dull hover:border-ink-faint/60 hover:bg-ink-faint/15"
+									: "border-status-warning/30 text-status-warning hover:border-status-warning/60 hover:bg-status-warning/15"
 							}`}
 						>
 							Open
 						</Link>
 					</div>
 				</div>
-				{expanded && item.result && (
-					<div className={`mt-1 rounded-md border px-3 py-2 ${
-						oc ? "border-zinc-500/10 bg-zinc-500/5" : "border-amber-500/10 bg-amber-500/5"
-					}`}>
-						<div className="text-sm text-ink-dull">
-							<Markdown className="whitespace-pre-wrap break-words">{item.result}</Markdown>
-						</div>
-					</div>
+				{expanded && (
+					<>
+						<WorkerTranscriptView
+							workerId={item.id}
+							agentId={agentId}
+							isLive={false}
+						/>
+						{item.result && (
+							<div
+								className={`mt-2 rounded-md border px-3 py-2 ${
+									oc
+										? "border-ink-faint/10 bg-ink-faint/5"
+										: "border-status-warning/10 bg-status-warning/5"
+								}`}
+							>
+								<div className="text-sm text-ink-dull">
+									<Markdown className="break-words">
+										{item.result}
+									</Markdown>
+								</div>
+							</div>
+						)}
+					</>
 				)}
 			</div>
 		</div>
 	);
 }
 
-function TimelineEntry({ item, liveWorkers, liveBranches, channelId, agentId }: {
+function TimelineEntry({
+	item,
+	liveWorkers,
+	liveBranches,
+	channelId,
+	agentId,
+}: {
 	item: TimelineItem;
 	liveWorkers: Record<string, ActiveWorker>;
 	liveBranches: Record<string, ActiveBranch>;
@@ -251,17 +427,21 @@ function TimelineEntry({ item, liveWorkers, liveBranches, channelId, agentId }:
 			return (
 				<div
 					className={`flex gap-3 rounded-md px-3 py-2 ${
-						item.role === "user" ? "bg-app-darkBox/30" : ""
+						item.role === "user" ? "bg-app-dark-box/30" : ""
 					}`}
 				>
 					<span className="flex-shrink-0 pt-0.5 text-tiny text-ink-faint">
 						{formatTimestamp(new Date(item.created_at).getTime())}
 					</span>
 					<div className="min-w-0 flex-1">
-						<span className={`text-sm font-medium ${
-							item.role === "user" ? "text-accent-faint" : "text-green-400"
-						}`}>
-							{item.role === "user" ? (item.sender_name ?? "user") : (item.sender_name ?? "bot")}
+						<span
+							className={`text-sm font-medium ${
+								item.role === "user" ? "text-accent-faint" : "text-status-success"
+							}`}
+						>
+							{item.role === "user"
+								? (item.sender_name ?? "user")
+								: (item.sender_name ?? "bot")}
 						</span>
 						<div className="mt-0.5 text-sm text-ink-dull">
 							<Markdown>{item.content}</Markdown>
@@ -271,18 +451,41 @@ function TimelineEntry({ item, liveWorkers, liveBranches, channelId, agentId }:
 			);
 		case "branch_run": {
 			const live = liveBranches[item.id];
-			if (live) return <LiveBranchRunItem item={item as TimelineBranchRun} live={live} channelId={channelId} />;
+			if (live)
+				return (
+					<LiveBranchRunItem
+						item={item as TimelineBranchRun}
+						live={live}
+						channelId={channelId}
+					/>
+				);
 			return <BranchRunItem item={item as TimelineBranchRun} />;
 		}
 		case "worker_run": {
 			const live = liveWorkers[item.id];
-			if (live) return <LiveWorkerRunItem item={item as TimelineWorkerRun} live={live} channelId={channelId} agentId={agentId} />;
-			return <WorkerRunItem item={item as TimelineWorkerRun} agentId={agentId} />;
+			if (live)
+				return (
+					<LiveWorkerRunItem
+						item={item as TimelineWorkerRun}
+						live={live}
+						channelId={channelId}
+						agentId={agentId}
+					/>
+				);
+			return (
+				<WorkerRunItem item={item as TimelineWorkerRun} agentId={agentId} />
+			);
 		}
 	}
 }
 
-export function ChannelDetail({ agentId, channelId, channel, liveState, onLoadMore }: ChannelDetailProps) {
+export function ChannelDetail({
+	agentId,
+	channelId,
+	channel,
+	liveState,
+	onLoadMore,
+}: ChannelDetailProps) {
 	const timeline = liveState?.timeline ?? [];
 	const hasMore = liveState?.hasMore ?? false;
 	const loadingMore = liveState?.loadingMore ?? false;
@@ -292,7 +495,6 @@ export function ChannelDetail({ agentId, channelId, channel, liveState, onLoadMo
 	const activeWorkerCount = Object.keys(workers).length;
 	const activeBranchCount = Object.keys(branches).length;
 	const hasActivity = activeWorkerCount > 0 || activeBranchCount > 0;
-	const [cortexOpen, setCortexOpen] = useState(true);
 	const [inspectOpen, setInspectOpen] = useState(false);
 
 	const scrollRef = useRef<HTMLDivElement>(null);
@@ -300,20 +502,23 @@ export function ChannelDetail({ agentId, channelId, channel, liveState, onLoadMo
 	const lastLoadMoreAtRef = useRef(0);
 
 	// Trigger load when the sentinel at the top of the timeline becomes visible
-	const handleIntersection = useCallback((entries: IntersectionObserverEntry[]) => {
-		const entry = entries[0];
-		if (!entry?.isIntersecting) {
-			return;
-		}
-		const now = Date.now();
-		if (now - lastLoadMoreAtRef.current < 800) {
-			return;
-		}
-		if (hasMore && !loadingMore) {
-			lastLoadMoreAtRef.current = now;
-			onLoadMore();
-		}
-	}, [hasMore, loadingMore, onLoadMore]);
+	const handleIntersection = useCallback(
+		(entries: IntersectionObserverEntry[]) => {
+			const entry = entries[0];
+			if (!entry?.isIntersecting) {
+				return;
+			}
+			const now = Date.now();
+			if (now - lastLoadMoreAtRef.current < 800) {
+				return;
+			}
+			if (hasMore && !loadingMore) {
+				lastLoadMoreAtRef.current = now;
+				onLoadMore();
+			}
+		},
+		[hasMore, loadingMore, onLoadMore],
+	);
 
 	useEffect(() => {
 		const sentinel = sentinelRef.current;
@@ -331,10 +536,10 @@ export function ChannelDetail({ agentId, channelId, channel, liveState, onLoadMo
 			{/* Main channel content */}
 			<div className="flex flex-1 flex-col overflow-hidden">
 				{/* Channel sub-header */}
-				<div className="flex h-12 items-center gap-3 border-b border-app-line/50 bg-app-darkBox/20 px-6">
+				<div className="flex h-12 items-center gap-3 border-b border-app-line/50 bg-app-dark-box/20 px-6">
 					<Link
 						to="/agents/$agentId/channels"
-						params={{ agentId }}
+						params={{agentId}}
 						className="text-tiny text-ink-faint hover:text-ink-dull"
 					>
 						Channels
@@ -343,32 +548,38 @@ export function ChannelDetail({ agentId, channelId, channel, liveState, onLoadMo
 					<span className="text-sm font-medium text-ink">
 						{channel?.display_name ?? channelId}
 						{channel?.display_name && (
-							<span className="ml-2 font-normal text-ink-faint text-tiny">{channelId}</span>
+							<span className="ml-2 font-normal text-ink-faint text-tiny">
+								{channelId}
+							</span>
 						)}
 					</span>
 					{channel && (
-						<span className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-tiny font-medium ${platformColor(channel.platform)}`}>
+						<span
+							className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-tiny font-medium ${platformColor(channel.platform)}`}
+						>
 							{platformIcon(channel.platform)}
 						</span>
 					)}
 
-					{/* Right side: activity indicators + typing + cortex toggle */}
+					{/* Right side: activity indicators + typing + inspect */}
 					<div className="ml-auto flex items-center gap-3">
 						{hasActivity && (
 							<div className="flex items-center gap-2">
 								{activeWorkerCount > 0 && (
 									<div className="flex items-center gap-1.5">
-										<div className="h-1.5 w-1.5 animate-pulse rounded-full bg-amber-400" />
-										<span className="text-tiny text-amber-300">
-											{activeWorkerCount} worker{activeWorkerCount !== 1 ? "s" : ""}
+										<div className="h-1.5 w-1.5 animate-pulse rounded-full bg-status-warning" />
+										<span className="text-tiny text-status-warning">
+											{activeWorkerCount} worker
+											{activeWorkerCount !== 1 ? "s" : ""}
 										</span>
 									</div>
 								)}
 								{activeBranchCount > 0 && (
 									<div className="flex items-center gap-1.5">
-										<div className="h-1.5 w-1.5 animate-pulse rounded-full bg-violet-400" />
-										<span className="text-tiny text-violet-300">
-											{activeBranchCount} branch{activeBranchCount !== 1 ? "es" : ""}
+										<div className="h-1.5 w-1.5 animate-pulse rounded-full bg-accent" />
+										<span className="text-tiny text-accent-faint">
+											{activeBranchCount} branch
+											{activeBranchCount !== 1 ? "es" : ""}
 										</span>
 									</div>
 								)}
@@ -382,42 +593,38 @@ export function ChannelDetail({ agentId, channelId, channel, liveState, onLoadMo
 								<span className="ml-1 text-tiny text-ink-faint">typing</span>
 							</div>
 						)}
-						<div className="flex overflow-hidden rounded-md border border-app-line bg-app-darkBox">
-							<Button
-								aria-label="Inspect prompt"
-								onClick={() => setInspectOpen(true)}
-								variant="ghost"
-								size="icon"
-								title="Inspect prompt"
-							>
-								<HugeiconsIcon icon={CodeIcon} className="h-4 w-4" />
-							</Button>
-							<Button
-								onClick={() => setCortexOpen(!cortexOpen)}
-								variant={cortexOpen ? "secondary" : "ghost"}
-								size="icon"
-								className={cortexOpen ? "bg-app-selected text-ink" : ""}
-								title="Toggle cortex chat"
-							>
-								<HugeiconsIcon icon={IdeaIcon} className="h-4 w-4" />
-							</Button>
-						</div>
+						<Button
+							aria-label="Inspect prompt"
+							onClick={() => setInspectOpen(true)}
+							variant="bare"
+							size="icon"
+							title="Inspect prompt"
+						>
+							<Code className="h-4 w-4" />
+						</Button>
 					</div>
 				</div>
 
 				{/* Timeline — flex-col-reverse keeps scroll pinned to bottom */}
-				<div ref={scrollRef} className="flex flex-1 flex-col-reverse overflow-y-auto">
+				<div
+					ref={scrollRef}
+					className="flex flex-1 flex-col-reverse overflow-y-auto"
+				>
 					<div className="flex flex-col gap-1 p-6">
 						{/* Sentinel for infinite scroll — sits above the oldest item */}
 						<div ref={sentinelRef} className="h-px" />
 						{loadingMore && (
 							<div className="flex justify-center py-3">
-								<span className="text-tiny text-ink-faint">Loading older messages...</span>
+								<span className="text-tiny text-ink-faint">
+									Loading older messages...
+								</span>
 							</div>
 						)}
 						{!hasMore && timeline.length > 0 && (
 							<div className="flex justify-center py-3">
-								<span className="text-tiny text-ink-faint/50">Beginning of conversation</span>
+								<span className="text-tiny text-ink-faint/50">
+									Beginning of conversation
+								</span>
 							</div>
 						)}
 						{timeline.length === 0 ? (
@@ -440,7 +647,9 @@ export function ChannelDetail({ agentId, channelId, channel, liveState, onLoadMo
 									{formatTimestamp(Date.now())}
 								</span>
 								<div className="flex items-center gap-1.5">
-									<span className="text-sm font-medium text-green-400">bot</span>
+									<span className="text-sm font-medium text-status-success">
+										bot
+									</span>
 									<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-ink-faint" />
 									<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-ink-faint [animation-delay:0.2s]" />
 									<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-ink-faint [animation-delay:0.4s]" />
@@ -451,28 +660,11 @@ export function ChannelDetail({ agentId, channelId, channel, liveState, onLoadMo
 				</div>
 			</div>
 
-			<PromptInspectModal open={inspectOpen} onOpenChange={setInspectOpen} channelId={channelId} />
-
-			{/* Cortex chat panel */}
-			<AnimatePresence>
-				{cortexOpen && (
-					<motion.div
-						initial={{ width: 0, opacity: 0 }}
-						animate={{ width: 400, opacity: 1 }}
-						exit={{ width: 0, opacity: 0 }}
-						transition={{ type: "spring", stiffness: 400, damping: 30 }}
-						className="flex-shrink-0 overflow-hidden border-l border-app-line/50"
-					>
-						<div className="h-full w-[400px]">
-							<CortexChatPanel
-								agentId={agentId}
-								channelId={channelId}
-								onClose={() => setCortexOpen(false)}
-							/>
-						</div>
-					</motion.div>
-				)}
-			</AnimatePresence>
+			<PromptInspectModal
+				open={inspectOpen}
+				onOpenChange={setInspectOpen}
+				channelId={channelId}
+			/>
 		</div>
 	);
 }
diff --git a/interface/src/routes/Dashboard.tsx b/interface/src/routes/Dashboard.tsx
new file mode 100644
index 000000000..214362965
--- /dev/null
+++ b/interface/src/routes/Dashboard.tsx
@@ -0,0 +1,28 @@
+import { ActionItemsCard } from "@/components/dashboard/ActionItemsCard";
+import { TokenUsageCard } from "@/components/dashboard/TokenUsageCard";
+import { ActivityCard } from "@/components/dashboard/ActivityCard";
+import { RecentActivityCard } from "@/components/dashboard/RecentActivityCard";
+
+
+export function Dashboard() {
+	return (
+		<div className="flex h-full flex-col">
+			<div className="min-h-0 flex-1 overflow-y-auto">
+				<div className="py-3 pr-3 pb-12">
+					<div className="grid h-[340px] grid-cols-2 gap-5">
+						<ActionItemsCard />
+						<TokenUsageCard />
+					</div>
+
+					<div className="mt-5">
+						<ActivityCard />
+					</div>
+
+					<div className="mt-5">
+						<RecentActivityCard />
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/routes/GlobalTasks.tsx b/interface/src/routes/GlobalTasks.tsx
index 386546747..ca28925fb 100644
--- a/interface/src/routes/GlobalTasks.tsx
+++ b/interface/src/routes/GlobalTasks.tsx
@@ -1,55 +1,335 @@
-import { useMemo, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { api } from "@/api/client";
-import { TaskBoard } from "@/components/TaskBoard";
+import {useCallback, useEffect, useMemo, useRef, useState} from "react";
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
+import {
+	api,
+	type CreateTaskRequest,
+	type TaskItem,
+	type TaskStatus,
+} from "@/api/client";
+import {useLiveContext} from "@/hooks/useLiveContext";
+import {
+	Button,
+	Popover,
+	SelectPill,
+	OptionList,
+	OptionListItem,
+} from "@spacedrive/primitives";
+import {
+	TaskList,
+	TaskDetail,
+	TaskCreateForm,
+	type Task,
+	type TaskStatus as UiTaskStatus,
+	type TaskCreateFormData,
+} from "@spacedrive/ai";
+import {
+	GithubMetadataBadges,
+	getGithubReferences,
+} from "@/components/TaskUtils";
+
+const TASK_LIMIT = 200;
+
+function AgentPicker({
+	agents,
+	value,
+	onChange,
+}: {
+	agents: {id: string; display_name?: string | null}[];
+	value?: string;
+	onChange: (id: string) => void;
+}) {
+	const [open, setOpen] = useState(false);
+	const selected = agents.find((a) => a.id === value);
+
+	return (
+		<div className="flex items-center gap-2">
+			<label className="text-xs text-ink-dull">Create as:</label>
+			<Popover.Root open={open} onOpenChange={setOpen}>
+				<Popover.Trigger asChild>
+					<SelectPill size="sm">
+						{selected?.display_name ?? selected?.id ?? "Select agent"}
+					</SelectPill>
+				</Popover.Trigger>
+				<Popover.Content
+					align="start"
+					sideOffset={4}
+					className="min-w-[180px] p-1.5"
+				>
+					<OptionList>
+						{agents.map((agent) => (
+							<OptionListItem
+								key={agent.id}
+								selected={agent.id === value}
+								size="sm"
+								onClick={() => {
+									onChange(agent.id);
+									setOpen(false);
+								}}
+							>
+								{agent.display_name ?? agent.id}
+							</OptionListItem>
+						))}
+					</OptionList>
+				</Popover.Content>
+			</Popover.Root>
+		</div>
+	);
+}
 
 export function GlobalTasks() {
-  const { data: agentsData } = useQuery({
-    queryKey: ["agents"],
-    queryFn: api.agents,
-    staleTime: 10_000,
-  });
-
-  const agents = agentsData?.agents ?? [];
-  const [selectedOwnerId, setSelectedOwnerId] = useState<string | undefined>();
-
-  // Resolve which agent owns newly created tasks. Explicit selection takes
-  // priority, then fall back to the first agent.
-  const effectiveOwner = selectedOwnerId ?? agents[0]?.id;
-
-  const agentNames = useMemo(() => {
-    const map: Record<string, string | null | undefined> = {};
-    for (const agent of agents) {
-      map[agent.id] = agent.display_name;
-    }
-    return map;
-  }, [agents]);
-
-  return (
-    <div className="flex h-full flex-col">
-      {agents.length > 1 && (
-        <div className="flex items-center gap-2 border-b border-app-line px-4 py-1.5">
-          <label className="text-xs text-ink-dull">Create tasks as:</label>
-          <select
-            className="rounded-md border border-app-line bg-app-darkBox px-2 py-1 text-xs text-ink focus:border-accent focus:outline-none"
-            value={effectiveOwner ?? ""}
-            onChange={(e) => setSelectedOwnerId(e.target.value || undefined)}
-          >
-            {agents.map((agent) => (
-              <option key={agent.id} value={agent.id}>
-                {agent.display_name ?? agent.id}
-              </option>
-            ))}
-          </select>
-        </div>
-      )}
-      <div className="flex-1 overflow-hidden">
-        <TaskBoard
-          ownerAgentId={effectiveOwner}
-          agentNames={agentNames}
-          showAgentBadge={agents.length > 1}
-        />
-      </div>
-    </div>
-  );
+	const queryClient = useQueryClient();
+	const {taskEventVersion} = useLiveContext();
+
+	const queryKey = ["tasks"];
+
+	// SSE-driven cache invalidation
+	const prevVersion = useRef(taskEventVersion);
+	useEffect(() => {
+		if (taskEventVersion !== prevVersion.current) {
+			prevVersion.current = taskEventVersion;
+			queryClient.invalidateQueries({queryKey});
+		}
+	}, [taskEventVersion, queryKey, queryClient]);
+
+	const {data: agentsData} = useQuery({
+		queryKey: ["agents"],
+		queryFn: api.agents,
+		staleTime: 10_000,
+	});
+
+	const agents = agentsData?.agents ?? [];
+	const [selectedOwnerId, setSelectedOwnerId] = useState<string | undefined>();
+	const effectiveOwner = selectedOwnerId ?? agents[0]?.id;
+
+	const agentNameMap = useMemo(() => {
+		const map: Record<string, string> = {};
+		for (const agent of agents) {
+			map[agent.id] = agent.display_name ?? agent.id;
+		}
+		return map;
+	}, [agents]);
+
+	const resolveAgentName = useCallback(
+		(agentId: string) => agentNameMap[agentId] ?? agentId,
+		[agentNameMap],
+	);
+
+	const {data, isLoading, error} = useQuery({
+		queryKey,
+		queryFn: () => api.listTasks({limit: TASK_LIMIT}),
+		refetchInterval: 15_000,
+	});
+
+	const tasks = (data?.tasks ?? []) as unknown as Task[];
+
+	const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
+	const [collapsedGroups, setCollapsedGroups] = useState<Set<UiTaskStatus>>(
+		() => new Set(),
+	);
+	const [createOpen, setCreateOpen] = useState(false);
+
+	const activeTask = tasks.find((t) => t.id === activeTaskId);
+
+	const invalidate = useCallback(
+		() => queryClient.invalidateQueries({queryKey}),
+		[queryClient, queryKey],
+	);
+
+	const updateMutation = useMutation({
+		mutationFn: ({
+			taskNumber,
+			...req
+		}: {
+			taskNumber: number;
+			status?: TaskStatus;
+			complete_subtask?: number;
+		}) => api.updateTask(taskNumber, req),
+		onSuccess: () => void invalidate(),
+	});
+
+	const approveMutation = useMutation({
+		mutationFn: (taskNumber: number) => api.approveTask(taskNumber, "human"),
+		onSuccess: () => void invalidate(),
+	});
+
+	const executeMutation = useMutation({
+		mutationFn: (taskNumber: number) => api.executeTask(taskNumber),
+		onSuccess: () => void invalidate(),
+	});
+
+	const deleteMutation = useMutation({
+		mutationFn: (taskNumber: number) => api.deleteTask(taskNumber),
+		onSuccess: () => {
+			setActiveTaskId(null);
+			void invalidate();
+		},
+	});
+
+	const createMutation = useMutation({
+		mutationFn: (req: CreateTaskRequest) => api.createTask(req),
+		onSuccess: () => {
+			setCreateOpen(false);
+			void invalidate();
+		},
+	});
+
+	const handleStatusChange = useCallback(
+		(task: Task, status: UiTaskStatus) => {
+			const t = task as unknown as TaskItem;
+			if (t.status === "pending_approval" && status === "ready") {
+				approveMutation.mutate(t.task_number);
+			} else if (t.status === "backlog" && status === "in_progress") {
+				executeMutation.mutate(t.task_number);
+			} else {
+				updateMutation.mutate({taskNumber: t.task_number, status});
+			}
+		},
+		[updateMutation, approveMutation, executeMutation],
+	);
+
+	const handleDelete = useCallback(
+		(task: Task) => {
+			deleteMutation.mutate((task as unknown as TaskItem).task_number);
+		},
+		[deleteMutation],
+	);
+
+	const handleSubtaskToggle = useCallback(
+		(task: Task, index: number, _completed: boolean) => {
+			updateMutation.mutate({
+				taskNumber: (task as unknown as TaskItem).task_number,
+				complete_subtask: index,
+			});
+		},
+		[updateMutation],
+	);
+
+	const handleToggleGroup = useCallback((status: UiTaskStatus) => {
+		setCollapsedGroups((prev) => {
+			const next = new Set(prev);
+			if (next.has(status)) next.delete(status);
+			else next.add(status);
+			return next;
+		});
+	}, []);
+
+	const handleCreate = useCallback(
+		(formData: TaskCreateFormData) => {
+			if (!effectiveOwner) return;
+			createMutation.mutate({
+				owner_agent_id: effectiveOwner,
+				title: formData.title,
+				description: formData.description || undefined,
+				priority: formData.priority,
+				status: "backlog",
+			});
+		},
+		[createMutation, effectiveOwner],
+	);
+
+	return (
+		<div className="flex h-full w-full">
+			{/* List panel */}
+			<div className="flex min-w-0 flex-1 flex-col">
+				{/* Toolbar */}
+				<div className="flex items-center justify-between border-b border-app-line px-4 py-2">
+					<div className="flex items-center gap-3">
+						<span className="text-sm text-ink-dull">
+							{tasks.length} task{tasks.length !== 1 ? "s" : ""}
+						</span>
+						{agents.length > 1 && (
+							<AgentPicker
+								agents={agents}
+								value={effectiveOwner}
+								onChange={setSelectedOwnerId}
+							/>
+						)}
+					</div>
+					{effectiveOwner && (
+						<Button size="md" onClick={() => setCreateOpen(!createOpen)}>
+							{createOpen ? "Cancel" : "Create Task"}
+						</Button>
+					)}
+				</div>
+
+				{/* Create form */}
+				{createOpen && (
+					<div className="border-b border-app-line px-3 py-2">
+						<TaskCreateForm
+							onSubmit={handleCreate}
+							onCancel={() => setCreateOpen(false)}
+							isSubmitting={createMutation.isPending}
+						/>
+					</div>
+				)}
+
+				{/* Task list */}
+				{isLoading ? (
+					<div className="py-8 text-center text-sm text-ink-faint">
+						Loading tasks...
+					</div>
+				) : error ? (
+					<div className="py-8 text-center text-sm text-red-400">
+						Failed to load tasks.
+						<div className="mt-1 font-mono text-[10px] text-ink-faint">
+							{(error as Error).message}
+						</div>
+					</div>
+				) : tasks.length === 0 ? (
+					<div className="flex flex-1 items-center justify-center">
+						<div className="text-center">
+							<p className="text-sm text-ink-dull">No tasks yet.</p>
+							<p className="mt-1 text-xs text-ink-faint">
+								Create one to get started.
+							</p>
+						</div>
+					</div>
+				) : (
+					<div className="flex-1 overflow-y-auto">
+						<TaskList
+							tasks={tasks}
+							activeTaskId={activeTaskId ?? undefined}
+							collapsedGroups={collapsedGroups}
+							onToggleGroup={handleToggleGroup}
+							onTaskClick={(task) => setActiveTaskId(task.id)}
+							onStatusChange={handleStatusChange}
+							onDelete={handleDelete}
+							resolveAgentName={resolveAgentName}
+						/>
+					</div>
+				)}
+			</div>
+
+			{/* Detail panel */}
+			{activeTask && (
+				<div className="w-[400px] shrink-0 overflow-y-auto border-l border-app-line">
+					<TaskDetail
+						task={activeTask}
+						resolveAgentName={resolveAgentName}
+						onStatusChange={handleStatusChange}
+						onSubtaskToggle={handleSubtaskToggle}
+						onDelete={handleDelete}
+						onClose={() => setActiveTaskId(null)}
+					/>
+					<GithubSection
+						metadata={(activeTask as unknown as TaskItem).metadata}
+					/>
+				</div>
+			)}
+		</div>
+	);
+}
+
+function GithubSection({metadata}: {metadata: Record<string, unknown>}) {
+	const refs = getGithubReferences(metadata);
+	if (refs.length === 0) return null;
+
+	return (
+		<div className="border-t border-app-line/40 px-4 py-3">
+			<h3 className="mb-2 text-xs font-medium uppercase tracking-wide text-ink-dull">
+				GitHub Links
+			</h3>
+			<GithubMetadataBadges references={refs} />
+		</div>
+	);
 }
diff --git a/interface/src/routes/Orchestrate.tsx b/interface/src/routes/Orchestrate.tsx
deleted file mode 100644
index 7579bfd62..000000000
--- a/interface/src/routes/Orchestrate.tsx
+++ /dev/null
@@ -1,392 +0,0 @@
-import {useState, useMemo, useEffect, useRef} from "react";
-import {useQuery, useQueryClient, useQueries} from "@tanstack/react-query";
-import {api, type WorkerRunInfo} from "@/api/client";
-import {OpenCodeEmbed} from "@/components/OpenCodeEmbed";
-import {LiveDuration} from "@/components/LiveDuration";
-import {Badge} from "@/ui/Badge";
-import {useLiveContext} from "@/hooks/useLiveContext";
-import {cx} from "@/ui/utils";
-
-// ── Types ────────────────────────────────────────────────────────────────
-
-/** A worker with agent metadata attached for cross-agent views. */
-interface OrchestrationWorker extends WorkerRunInfo {
-	agent_id: string;
-	agent_name: string;
-	/** Overridden from SSE live state when available. */
-	live_tool_calls?: number;
-}
-
-interface ProjectGroup {
-	/** Project name, or "Ungrouped" for workers without a project. */
-	name: string;
-	projectId: string | null;
-	workers: OrchestrationWorker[];
-}
-
-// ── Filters ──────────────────────────────────────────────────────────────
-
-type GroupBy = "project" | "agent";
-
-// ── Component ────────────────────────────────────────────────────────────
-
-export function Orchestrate() {
-	const [groupBy, setGroupBy] = useState<GroupBy>("project");
-	const [agentFilter, setAgentFilter] = useState<string | null>(null);
-	const queryClient = useQueryClient();
-	const {activeWorkers, workerEventVersion} = useLiveContext();
-
-	// -- Fetch all agents --
-	const {data: agentsData} = useQuery({
-		queryKey: ["agents"],
-		queryFn: () => api.agents(),
-		staleTime: 30_000,
-	});
-
-	const agents = agentsData?.agents ?? [];
-
-	// -- Fan-out: fetch active workers per agent --
-	// We fetch both "running" and "idle" status workers separately then merge.
-	const workerQueries = useQueries({
-		queries: agents.flatMap((agent) =>
-			(["running", "idle"] as const).map((status) => ({
-				queryKey: ["orchestrate-workers", agent.id, status],
-				queryFn: () => api.workersList(agent.id, {limit: 200, status}),
-				refetchInterval: 10_000,
-			})),
-		),
-	});
-
-	// Invalidate when SSE events fire
-	const prevVersion = useRef(workerEventVersion);
-	useEffect(() => {
-		if (workerEventVersion !== prevVersion.current) {
-			prevVersion.current = workerEventVersion;
-			queryClient.invalidateQueries({queryKey: ["orchestrate-workers"]});
-		}
-	}, [workerEventVersion, queryClient]);
-
-	// -- Merge DB workers with SSE live state --
-	const allWorkers: OrchestrationWorker[] = useMemo(() => {
-		const result: OrchestrationWorker[] = [];
-		const seenIds = new Set<string>();
-
-		agents.forEach((agent, agentIndex) => {
-			const agentName = agent.display_name ?? agent.id;
-			// Each agent has 2 queries (running, idle) at indices agentIndex*2 and agentIndex*2+1
-			for (let statusIdx = 0; statusIdx < 2; statusIdx++) {
-				const queryIdx = agentIndex * 2 + statusIdx;
-				const queryResult = workerQueries[queryIdx];
-				const workers = queryResult?.data?.workers ?? [];
-
-				for (const worker of workers) {
-					if (seenIds.has(worker.id)) continue;
-					seenIds.add(worker.id);
-
-					// Only show OpenCode workers
-					if (worker.worker_type !== "opencode") continue;
-					// Must have a port to embed
-					if (!worker.opencode_port) continue;
-
-					const liveWorker = activeWorkers[worker.id];
-					result.push({
-						...worker,
-						agent_id: agent.id,
-						agent_name: agentName,
-						status: liveWorker?.status ?? worker.status,
-						live_tool_calls: liveWorker?.toolCalls,
-					});
-				}
-			}
-
-			// Also add SSE-only workers (started but not yet in DB)
-			for (const [workerId, liveWorker] of Object.entries(activeWorkers)) {
-				if (seenIds.has(workerId)) continue;
-				if (liveWorker.agentId !== agent.id) continue;
-				if (liveWorker.workerType !== "opencode") continue;
-				seenIds.add(workerId);
-
-				// SSE workers don't have opencode_port in activeWorkers.
-				// They'll appear in the DB query on next refetch once persisted.
-				// Skip for now — they'll show up shortly.
-			}
-		});
-
-		return result;
-	}, [agents, workerQueries, activeWorkers]);
-
-	// -- Apply agent filter --
-	const filteredWorkers = useMemo(
-		() => agentFilter ? allWorkers.filter((w) => w.agent_id === agentFilter) : allWorkers,
-		[allWorkers, agentFilter],
-	);
-
-	// -- Group workers --
-	const groups: ProjectGroup[] = useMemo(() => {
-		if (groupBy === "agent") {
-			const byAgent = new Map<string, OrchestrationWorker[]>();
-			for (const worker of filteredWorkers) {
-				const key = worker.agent_id;
-				const list = byAgent.get(key) ?? [];
-				list.push(worker);
-				byAgent.set(key, list);
-			}
-			return Array.from(byAgent.entries()).map(([agentId, workers]) => ({
-				name: workers[0]?.agent_name ?? agentId,
-				projectId: null,
-				workers,
-			}));
-		}
-
-		// Group by project
-		const byProject = new Map<string, OrchestrationWorker[]>();
-		for (const worker of filteredWorkers) {
-			const key = worker.project_name ?? "Ungrouped";
-			const list = byProject.get(key) ?? [];
-			list.push(worker);
-			byProject.set(key, list);
-		}
-
-		// Sort: named projects first (alphabetical), "Ungrouped" last
-		const entries = Array.from(byProject.entries());
-		entries.sort(([a], [b]) => {
-			if (a === "Ungrouped") return 1;
-			if (b === "Ungrouped") return -1;
-			return a.localeCompare(b);
-		});
-
-		return entries.map(([name, workers]) => ({
-			name,
-			projectId: workers[0]?.project_id ?? null,
-			workers,
-		}));
-	}, [filteredWorkers, groupBy]);
-
-	const isLoading = workerQueries.some((query) => query.isLoading);
-
-	// -- Unique agents with active workers (for filter dropdown) --
-	const activeAgents = useMemo(() => {
-		const seen = new Map<string, string>();
-		for (const worker of allWorkers) {
-			if (!seen.has(worker.agent_id)) {
-				seen.set(worker.agent_id, worker.agent_name);
-			}
-		}
-		return Array.from(seen.entries()).map(([id, name]) => ({id, name}));
-	}, [allWorkers]);
-
-	return (
-		<div className="flex h-full flex-col">
-			{/* Toolbar */}
-			<div className="flex items-center gap-3 border-b border-app-line px-4 py-2">
-				{/* Group by toggle */}
-				<div className="flex items-center gap-1.5">
-					<span className="text-tiny font-medium text-ink-faint">Group by</span>
-					<div className="flex rounded-md border border-app-line">
-						<button
-							onClick={() => setGroupBy("project")}
-							className={cx(
-								"px-2.5 py-1 text-tiny font-medium transition-colors",
-								groupBy === "project"
-									? "bg-app-selected text-ink"
-									: "text-ink-faint hover:text-ink",
-							)}
-						>
-							Project
-						</button>
-						<button
-							onClick={() => setGroupBy("agent")}
-							className={cx(
-								"px-2.5 py-1 text-tiny font-medium transition-colors",
-								groupBy === "agent"
-									? "bg-app-selected text-ink"
-									: "text-ink-faint hover:text-ink",
-							)}
-						>
-							Agent
-						</button>
-					</div>
-				</div>
-
-				{/* Agent filter */}
-				{activeAgents.length > 1 && (
-					<div className="flex items-center gap-1.5">
-						<span className="text-tiny font-medium text-ink-faint">Agent</span>
-						<select
-							value={agentFilter ?? ""}
-							onChange={(event) => setAgentFilter(event.target.value || null)}
-							className="rounded-md border border-app-line bg-transparent px-2 py-1 text-tiny text-ink outline-none"
-						>
-							<option value="">All</option>
-							{activeAgents.map(({id, name}) => (
-								<option key={id} value={id}>{name}</option>
-							))}
-						</select>
-					</div>
-				)}
-
-				{/* Worker count */}
-				<div className="ml-auto text-tiny text-ink-faint">
-					{filteredWorkers.length} active worker{filteredWorkers.length !== 1 ? "s" : ""}
-				</div>
-			</div>
-
-			{/* Content */}
-			<div className="flex-1 overflow-y-auto">
-				{isLoading && filteredWorkers.length === 0 ? (
-					<div className="flex h-full items-center justify-center">
-						<div className="flex items-center gap-2 text-xs text-ink-faint">
-							<span className="h-2 w-2 animate-pulse rounded-full bg-accent" />
-							Loading workers...
-						</div>
-					</div>
-				) : filteredWorkers.length === 0 ? (
-					<EmptyState />
-				) : (
-					<div className="flex flex-col gap-0.5 p-2">
-						{groups.map((group) => (
-							<ProjectTrack key={group.name} group={group} />
-						))}
-					</div>
-				)}
-			</div>
-		</div>
-	);
-}
-
-// ── Empty state ──────────────────────────────────────────────────────────
-
-function EmptyState() {
-	return (
-		<div className="flex h-full flex-col items-center justify-center gap-3 text-ink-faint">
-			<div className="flex h-12 w-12 items-center justify-center rounded-full border border-app-line">
-				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-					<rect x="2" y="3" width="20" height="18" rx="2" />
-					<line x1="9" y1="3" x2="9" y2="21" />
-					<line x1="15" y1="3" x2="15" y2="21" />
-				</svg>
-			</div>
-			<div className="text-center">
-				<p className="text-sm font-medium">No active workers</p>
-				<p className="mt-1 text-xs">
-					OpenCode workers will appear here as columns when they're running.
-				</p>
-			</div>
-		</div>
-	);
-}
-
-// ── Project track (horizontal scrollable row of worker columns) ──────────
-
-function ProjectTrack({group}: {group: ProjectGroup}) {
-	return (
-		<div className="flex flex-col">
-			{/* Track header */}
-			<div className="flex items-center gap-2 px-2 py-1.5">
-				<h2 className="text-xs font-semibold text-ink">{group.name}</h2>
-				<Badge variant="outline" size="sm">
-					{group.workers.length}
-				</Badge>
-			</div>
-
-			{/* Horizontal scroll container */}
-			<div className="flex gap-2 overflow-x-auto pb-2 pl-2 pr-2">
-				{group.workers.map((worker) => (
-					<WorkerColumn key={worker.id} worker={worker} />
-				))}
-			</div>
-		</div>
-	);
-}
-
-// ── Worker column (fixed-width, contains header + OpenCode embed) ────────
-
-function WorkerColumn({worker}: {worker: OrchestrationWorker}) {
-	const isRunning = worker.status === "running";
-	const isIdle = worker.status === "idle";
-	const toolCalls = worker.live_tool_calls ?? worker.tool_calls;
-
-	// Strip the [opencode] prefix from the task text for display
-	const taskText = worker.task.replace(/^\[opencode\]\s*/i, "");
-
-	return (
-		<div className="flex h-[calc(100vh-9rem)] w-[560px] flex-shrink-0 flex-col overflow-hidden rounded-lg border border-app-line bg-app-darkBox">
-			{/* Column header */}
-			<div className="flex flex-col gap-1 border-b border-app-line px-3 py-2">
-				<div className="flex items-center gap-2">
-					{/* Status dot */}
-					<span
-						className={cx(
-							"h-2 w-2 flex-shrink-0 rounded-full",
-							isRunning && "animate-pulse bg-green-500",
-							isIdle && "bg-yellow-500",
-							!isRunning && !isIdle && "bg-ink-faint",
-						)}
-					/>
-					{/* Task text */}
-					<p className="min-w-0 flex-1 truncate text-xs font-medium text-ink" title={taskText}>
-						{taskText}
-					</p>
-					{/* Cancel button for running workers */}
-					{(isRunning || isIdle) && worker.channel_id && (
-						<CancelButton channelId={worker.channel_id} workerId={worker.id} />
-					)}
-				</div>
-				<div className="flex items-center gap-2 text-tiny text-ink-faint">
-					<span>{worker.agent_name}</span>
-					<span>&middot;</span>
-					{isRunning ? (
-						<LiveDuration startMs={new Date(worker.started_at).getTime()} />
-					) : (
-						<span>{worker.status}</span>
-					)}
-					{toolCalls > 0 && (
-						<>
-							<span>&middot;</span>
-							<span>{toolCalls} tool{toolCalls !== 1 ? "s" : ""}</span>
-						</>
-					)}
-				</div>
-			</div>
-
-			{/* OpenCode embed */}
-			<div className="flex flex-1 flex-col overflow-hidden">
-				<OpenCodeEmbed
-					port={worker.opencode_port!}
-					sessionId={worker.opencode_session_id ?? worker.id}
-					directory={worker.directory ?? null}
-				/>
-			</div>
-		</div>
-	);
-}
-
-// ── Cancel button ────────────────────────────────────────────────────────
-
-function CancelButton({
-	channelId,
-	workerId,
-}: {
-	channelId: string;
-	workerId: string;
-}) {
-	const [cancelling, setCancelling] = useState(false);
-
-	return (
-		<button
-			disabled={cancelling}
-			onClick={(event) => {
-				event.stopPropagation();
-				setCancelling(true);
-				api
-					.cancelProcess(channelId, "worker", workerId)
-					.catch(console.warn)
-					.finally(() => setCancelling(false));
-			}}
-			className="flex-shrink-0 rounded-md border border-app-line px-1.5 py-0.5 text-tiny font-medium text-ink-dull transition-colors hover:border-red-500/50 hover:text-red-400 disabled:opacity-50"
-			title="Cancel worker"
-		>
-			{cancelling ? "..." : "Cancel"}
-		</button>
-	);
-}
diff --git a/interface/src/routes/Overlay.tsx b/interface/src/routes/Overlay.tsx
index b152e28fa..374cfbfcc 100644
--- a/interface/src/routes/Overlay.tsx
+++ b/interface/src/routes/Overlay.tsx
@@ -1,12 +1,25 @@
-import {useState, useEffect, useCallback, useRef, lazy, Suspense, useMemo} from "react";
+import {
+	useState,
+	useEffect,
+	useCallback,
+	useRef,
+	lazy,
+	Suspense,
+	useMemo,
+} from "react";
 import {useQuery} from "@tanstack/react-query";
 import {api} from "@/api/client";
 import {useAudioRecorder} from "@/hooks/useAudioRecorder";
 import {useTtsPlayback} from "@/hooks/useTtsPlayback";
 import {getPortalSessionId} from "@/hooks/usePortal";
 import {useEventSource} from "@/hooks/useEventSource";
-import {cx} from "@/ui/utils";
-import {IS_TAURI, resizeWindow, listen as platformListen} from "@/platform";
+import {cx} from "class-variance-authority";
+import {
+	dragRegionAttributes,
+	IS_DESKTOP,
+	resizeWindow,
+	listen as platformListen,
+} from "@/platform";
 
 const Orb = lazy(() => import("@/components/Orb"));
 
@@ -30,10 +43,16 @@ export function Overlay() {
 	const [expanded, setExpanded] = useState(false);
 	const [voiceState, setVoiceState] = useState<VoiceState>("idle");
 	const [agentId] = useState("main"); // default agent
-	const [profileId, setProfileId] = useState<string>(() => localStorage.getItem("spacebot.voice.profileId") ?? "");
-	const [statusText, setStatusText] = useState("Press Option+Shift+Space to talk");
+	const [profileId, setProfileId] = useState<string>(
+		() => localStorage.getItem("spacebot.voice.profileId") ?? "",
+	);
+	const [statusText, setStatusText] = useState(
+		"Press Option+Shift+Space to talk",
+	);
 	const [, setSpokenText] = useState<string | null>(null);
-	const [transcript, setTranscript] = useState<Array<{role: string; text: string}>>([]);
+	const [transcript, setTranscript] = useState<
+		Array<{role: string; text: string}>
+	>([]);
 	const containerRef = useRef<HTMLDivElement>(null);
 
 	const sessionId = getPortalSessionId(agentId);
@@ -69,16 +88,21 @@ export function Overlay() {
 	// Measure actual content height and ask the host to resize the window.
 	// The frontend is the single source of truth for layout dimensions.
 	useEffect(() => {
-		if (!IS_TAURI) return;
+		if (!IS_DESKTOP) return;
 		const element = containerRef.current;
 		if (!element) return;
 
 		const observer = new ResizeObserver((entries) => {
-			const height = entries[0]?.borderBoxSize?.[0]?.blockSize
-				?? entries[0]?.contentRect.height
-				?? 0;
+			const height =
+				entries[0]?.borderBoxSize?.[0]?.blockSize ??
+				entries[0]?.contentRect.height ??
+				0;
 			if (height > 0) {
-				void resizeWindow(OVERLAY_WINDOW_LABEL, OVERLAY_WIDTH, Math.ceil(height));
+				void resizeWindow(
+					OVERLAY_WINDOW_LABEL,
+					OVERLAY_WIDTH,
+					Math.ceil(height),
+				);
 			}
 		});
 		observer.observe(element);
@@ -93,7 +117,11 @@ export function Overlay() {
 
 	useEffect(() => {
 		if (!profilesQuery.data?.length) return;
-		if (profileId && profilesQuery.data.some((profile) => profile.id === profileId)) return;
+		if (
+			profileId &&
+			profilesQuery.data.some((profile) => profile.id === profileId)
+		)
+			return;
 		const firstProfileId = profilesQuery.data[0]?.id ?? "";
 		if (firstProfileId) {
 			setProfileId(firstProfileId);
@@ -102,54 +130,78 @@ export function Overlay() {
 	}, [profilesQuery.data, profileId]);
 
 	// -- SSE: listen for spoken_response + outbound_message events --
-	const handleSpokenResponse = useCallback((data: unknown) => {
-		const event = data as SpokenResponseEvent;
-		if (event.channel_id !== sessionId) return;
-
-		spokenReceivedRef.current = true;
-		if (ttsStartedRef.current) {
-			// We've already started playback for this turn via fallback.
-			// Keep the transcript update, but don't trigger overlapping audio.
-			setTranscript((prev) => [...prev, {role: "assistant", text: event.full_text}]);
-			return;
-		}
+	const handleSpokenResponse = useCallback(
+		(data: unknown) => {
+			const event = data as SpokenResponseEvent;
+			if (event.channel_id !== sessionId) return;
+
+			spokenReceivedRef.current = true;
+			if (ttsStartedRef.current) {
+				// We've already started playback for this turn via fallback.
+				// Keep the transcript update, but don't trigger overlapping audio.
+				setTranscript((prev) => [
+					...prev,
+					{role: "assistant", text: event.full_text},
+				]);
+				return;
+			}
 
-		setSpokenText(event.spoken_text);
-		setVoiceState("speaking");
-		setStatusText(event.spoken_text);
+			setSpokenText(event.spoken_text);
+			setVoiceState("speaking");
+			setStatusText(event.spoken_text);
 
-		// Add full text to transcript
-		setTranscript((prev) => [...prev, {role: "assistant", text: event.full_text}]);
+			// Add full text to transcript
+			setTranscript((prev) => [
+				...prev,
+				{role: "assistant", text: event.full_text},
+			]);
 
-		// Play TTS
-		ttsStartedRef.current = true;
+			// Play TTS
+			ttsStartedRef.current = true;
 			speak(event.spoken_text, agentId, profileId).then(() => {
 				ttsStartedRef.current = false;
 				setVoiceState("idle");
 				setStatusText("Press Option+Shift+Space to talk");
 			});
-	}, [sessionId, agentId, speak, profileId]);
+		},
+		[sessionId, agentId, speak, profileId],
+	);
 
-	const handleOutboundMessage = useCallback((data: unknown) => {
-		const event = data as {agent_id: string; channel_id: string; text: string};
-		if (event.channel_id !== sessionId) return;
+	const handleOutboundMessage = useCallback(
+		(data: unknown) => {
+			const event = data as {
+				agent_id: string;
+				channel_id: string;
+				text: string;
+			};
+			if (event.channel_id !== sessionId) return;
 
-		// Show the full reply in the transcript immediately, but only speak when
-		// a dedicated spoken_response event arrives from the backend.
-		if (voiceState === "processing") {
-			setStatusText(event.text.slice(0, 120) + (event.text.length > 120 ? "..." : ""));
-			setTranscript((prev) => [...prev, {role: "assistant", text: event.text}]);
-		}
-	}, [sessionId, voiceState]);
+			// Show the full reply in the transcript immediately, but only speak when
+			// a dedicated spoken_response event arrives from the backend.
+			if (voiceState === "processing") {
+				setStatusText(
+					event.text.slice(0, 120) + (event.text.length > 120 ? "..." : ""),
+				);
+				setTranscript((prev) => [
+					...prev,
+					{role: "assistant", text: event.text},
+				]);
+			}
+		},
+		[sessionId, voiceState],
+	);
 
-	const handleTypingState = useCallback((data: unknown) => {
-		const event = data as {channel_id: string; is_typing: boolean};
-		if (event.channel_id !== sessionId) return;
+	const handleTypingState = useCallback(
+		(data: unknown) => {
+			const event = data as {channel_id: string; is_typing: boolean};
+			if (event.channel_id !== sessionId) return;
 
-		if (event.is_typing && voiceState === "processing") {
-			setStatusText("Thinking...");
-		}
-	}, [sessionId, voiceState]);
+			if (event.is_typing && voiceState === "processing") {
+				setStatusText("Thinking...");
+			}
+		},
+		[sessionId, voiceState],
+	);
 
 	useEventSource(api.getEventsUrl(), {
 		handlers: {
@@ -200,19 +252,25 @@ export function Overlay() {
 	}, [recorderState, stopRecording, agentId, sessionId]);
 
 	useEffect(() => {
-		if (!IS_TAURI) return;
+		if (!IS_DESKTOP) return;
 
 		let disposed = false;
 		let unlistenStart: null | (() => void) = null;
 		let unlistenStop: null | (() => void) = null;
 
 		void (async () => {
-			unlistenStart = await platformListen("voice-overlay:start-recording", () => {
-				void handleStartRecording();
-			});
-			unlistenStop = await platformListen("voice-overlay:stop-recording", () => {
-				void handleStopRecording();
-			});
+			unlistenStart = await platformListen(
+				"voice-overlay:start-recording",
+				() => {
+					void handleStartRecording();
+				},
+			);
+			unlistenStop = await platformListen(
+				"voice-overlay:stop-recording",
+				() => {
+					void handleStopRecording();
+				},
+			);
 			// If the component unmounted before the async listeners resolved,
 			// clean up immediately.
 			if (disposed) {
@@ -231,13 +289,23 @@ export function Overlay() {
 	// -- Keyboard shortcut (web mode mirrors the dedicated voice hotkey) --
 	useEffect(() => {
 		const handleKeyDown = (event: KeyboardEvent) => {
-			if (event.code === "Space" && event.altKey && event.shiftKey && voiceState === "idle") {
+			if (
+				event.code === "Space" &&
+				event.altKey &&
+				event.shiftKey &&
+				voiceState === "idle"
+			) {
 				event.preventDefault();
 				handleStartRecording();
 			}
 		};
 		const handleKeyUp = (event: KeyboardEvent) => {
-			if (event.code === "Space" && event.altKey && event.shiftKey && voiceState === "recording") {
+			if (
+				event.code === "Space" &&
+				event.altKey &&
+				event.shiftKey &&
+				voiceState === "recording"
+			) {
 				event.preventDefault();
 				handleStopRecording();
 			}
@@ -251,23 +319,26 @@ export function Overlay() {
 		};
 	}, [voiceState, handleStartRecording, handleStopRecording]);
 
-	const activeEnergy = voiceState === "recording"
-		? audioLevel
-		: voiceState === "speaking"
-			? playbackLevel
-			: 0;
-
-	const activeSpectrumLevels = voiceState === "recording"
-		? recorderSpectrumLevels
-		: voiceState === "speaking"
-			? playbackSpectrumLevels
-			: Array.from({length: 45}, () => 0);
-
-	const waveColor = voiceState === "recording"
-		? "#70b8ff"
-		: voiceState === "speaking"
-			? "#ba5cf6"
-			: "#6b7280";
+	const activeEnergy =
+		voiceState === "recording"
+			? audioLevel
+			: voiceState === "speaking"
+				? playbackLevel
+				: 0;
+
+	const activeSpectrumLevels =
+		voiceState === "recording"
+			? recorderSpectrumLevels
+			: voiceState === "speaking"
+				? playbackSpectrumLevels
+				: Array.from({length: 45}, () => 0);
+
+	const waveColor =
+		voiceState === "recording"
+			? "#70b8ff"
+			: voiceState === "speaking"
+				? "#ba5cf6"
+				: "#6b7280";
 
 	const haloStyle = (() => {
 		if (voiceState === "recording") {
@@ -285,7 +356,8 @@ export function Overlay() {
 		}
 
 		return {
-			background: "radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 34%, transparent 72%)",
+			background:
+				"radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 34%, transparent 72%)",
 			transform: "scale(1)",
 		};
 	})();
@@ -298,7 +370,7 @@ export function Overlay() {
 		>
 			{/* Expanded transcript area */}
 			{expanded && (
-				<div className="mb-2 w-full max-w-[500px] overflow-hidden rounded-2xl border border-white/10 bg-app-darkBox/95 shadow-2xl backdrop-blur-xl">
+				<div className="mb-2 w-full max-w-[500px] overflow-hidden rounded-2xl border border-white/10 bg-app-dark-box/95 shadow-2xl backdrop-blur-xl">
 					{/* Header */}
 					<div className="flex items-start justify-between gap-3 border-b border-white/5 px-4 py-2.5">
 						<div className="flex items-center gap-2">
@@ -310,9 +382,14 @@ export function Overlay() {
 								value={profileId}
 								onChange={(event) => {
 									setProfileId(event.target.value);
-									localStorage.setItem("spacebot.voice.profileId", event.target.value);
+									localStorage.setItem(
+										"spacebot.voice.profileId",
+										event.target.value,
+									);
 								}}
-								disabled={profilesQuery.isLoading || !profilesQuery.data?.length}
+								disabled={
+									profilesQuery.isLoading || !profilesQuery.data?.length
+								}
 								className="min-w-[180px] max-w-[220px] rounded-md border border-white/10 bg-white/5 px-2 py-1 text-tiny text-ink outline-none disabled:opacity-60"
 							>
 								{profilesQuery.isLoading && <option>Loading voices...</option>}
@@ -325,17 +402,18 @@ export function Overlay() {
 									</option>
 								))}
 							</select>
-						<button
-							onClick={() => setExpanded(false)}
-							className="text-tiny text-ink-faint hover:text-ink"
-						>
-							Collapse
-						</button>
+							<button
+								onClick={() => setExpanded(false)}
+								className="text-tiny text-ink-faint hover:text-ink"
+							>
+								Collapse
+							</button>
 						</div>
 					</div>
 					{profilesQuery.isError && (
 						<div className="border-b border-white/5 px-4 py-2 text-tiny text-amber-300/80">
-							Couldn&apos;t load Voicebox profiles. Restart Spacebot after backend changes, or set `SPACEBOT_VOICEBOX_PROFILE_ID`.
+							Couldn&apos;t load Voicebox profiles. Restart Spacebot after
+							backend changes, or set `SPACEBOT_VOICEBOX_PROFILE_ID`.
 						</div>
 					)}
 
@@ -365,27 +443,27 @@ export function Overlay() {
 
 			{/* Pill */}
 			<div
+				{...dragRegionAttributes()}
 				className={cx(
 					"voice-overlay-pill mb-2 flex w-full max-w-[460px] cursor-pointer items-center gap-2.5 overflow-hidden rounded-[20px] border px-3 py-2 shadow-2xl backdrop-blur-xl transition-all",
 					voiceState === "recording"
 						? "border-sky-300/35 bg-sky-400/10"
 						: voiceState === "speaking"
 							? "border-violet-300/35 bg-violet-400/10"
-							: "border-white/10 bg-app-darkBox/95",
+							: "border-white/10 bg-app-dark-box/95",
 				)}
-			data-tauri-drag-region
-			onClick={() => {
-				if (voiceState === "idle") setExpanded(!expanded);
-			}}
+				onClick={() => {
+					if (voiceState === "idle") setExpanded(!expanded);
+				}}
 			>
-			<div
-				className={cx(
-					"pointer-events-none absolute inset-x-5 -bottom-5 -top-5 rounded-full blur-2xl transition-all duration-200",
-					voiceState === "recording" && "voice-overlay-halo-recording",
-					voiceState === "speaking" && "voice-overlay-halo-speaking",
-				)}
-				style={haloStyle}
-			/>
+				<div
+					className={cx(
+						"pointer-events-none absolute inset-x-5 -bottom-5 -top-5 rounded-full blur-2xl transition-all duration-200",
+						voiceState === "recording" && "voice-overlay-halo-recording",
+						voiceState === "speaking" && "voice-overlay-halo-speaking",
+					)}
+					style={haloStyle}
+				/>
 
 				<div className="relative flex h-9 w-9 flex-shrink-0 items-center justify-center">
 					<div
@@ -428,10 +506,12 @@ export function Overlay() {
 										: "Voice ready"}
 						</span>
 					</div>
-					<p className={cx(
-						"min-w-0 truncate text-[12px] leading-tight",
-						voiceState === "idle" ? "text-ink-faint" : "text-ink",
-					)}>
+					<p
+						className={cx(
+							"min-w-0 truncate text-[12px] leading-tight",
+							voiceState === "idle" ? "text-ink-faint" : "text-ink",
+						)}
+					>
 						{statusText}
 					</p>
 					<div className="relative z-10 h-9 overflow-hidden px-1">
@@ -452,17 +532,17 @@ export function Overlay() {
 					}}
 					className={cx(
 						"relative z-10 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border transition-colors",
-						voiceState === "idle" && "border-white/10 bg-white/5 text-ink-faint hover:bg-white/10 hover:text-ink",
-						voiceState === "processing" && "animate-pulse border-violet-300/30 bg-violet-400/15 text-violet-100",
-						voiceState === "speaking" && "border-violet-300/30 bg-violet-400/15 text-violet-100",
-						voiceState === "recording" && "border-sky-300/30 bg-sky-400/15 text-sky-100",
+						voiceState === "idle" &&
+							"border-white/10 bg-white/5 text-ink-faint hover:bg-white/10 hover:text-ink",
+						voiceState === "processing" &&
+							"animate-pulse border-violet-300/30 bg-violet-400/15 text-violet-100",
+						voiceState === "speaking" &&
+							"border-violet-300/30 bg-violet-400/15 text-violet-100",
+						voiceState === "recording" &&
+							"border-sky-300/30 bg-sky-400/15 text-sky-100",
 					)}
 				>
-					{voiceState === "speaking" ? (
-						<SpeakerIcon />
-					) : (
-						<MicIcon />
-					)}
+					{voiceState === "speaking" ? <SpeakerIcon /> : <MicIcon />}
 				</button>
 
 				{/* Stop button (while recording) */}
@@ -505,15 +585,24 @@ function SiriWaveform({
 		const bucketCount = 24;
 		return Array.from({length: bucketCount}, (_, bucketIndex) => {
 			const start = Math.floor((bucketIndex / bucketCount) * levels.length);
-			const end = Math.max(start + 1, Math.floor(((bucketIndex + 1) / bucketCount) * levels.length));
+			const end = Math.max(
+				start + 1,
+				Math.floor(((bucketIndex + 1) / bucketCount) * levels.length),
+			);
 			const slice = levels.slice(start, end);
-			const average = slice.reduce((sum, value) => sum + value, 0) / slice.length;
+			const average =
+				slice.reduce((sum, value) => sum + value, 0) / slice.length;
 			return Math.min(1, average);
 		});
 	}, [levels]);
 
 	const wavePaths = useMemo(() => {
-		const makePath = (phase: number, amplitudeBoost: number, frequency: number, drift: number) => {
+		const makePath = (
+			phase: number,
+			amplitudeBoost: number,
+			frequency: number,
+			drift: number,
+		) => {
 			const sampleCount = 88;
 			const points = Array.from({length: sampleCount + 1}, (_, index) => {
 				const progress = index / sampleCount;
@@ -524,15 +613,21 @@ function SiriWaveform({
 				);
 				const fft = smoothedLevels[levelIndex] ?? 0;
 				const envelope = Math.pow(Math.sin(progress * Math.PI), 1.35);
-				const neighboringLevel = smoothedLevels[Math.min(smoothedLevels.length - 1, levelIndex + 1)] ?? fft;
+				const neighboringLevel =
+					smoothedLevels[Math.min(smoothedLevels.length - 1, levelIndex + 1)] ??
+					fft;
 				const blendedFft = fft * 0.65 + neighboringLevel * 0.35;
 				const baseAmplitude = active
 					? 3.2 + energy * 9.5 + blendedFft * 12.5 * amplitudeBoost
 					: 1.35;
 				const primary = Math.sin(progress * Math.PI * frequency + phase);
-				const secondary = Math.sin(progress * Math.PI * (frequency * 0.52) - drift) * 0.4;
-				const tertiary = Math.cos(progress * Math.PI * (frequency * 0.24) + phase * 0.35) * 0.18;
-				const y = centerY - (primary + secondary + tertiary) * baseAmplitude * envelope;
+				const secondary =
+					Math.sin(progress * Math.PI * (frequency * 0.52) - drift) * 0.4;
+				const tertiary =
+					Math.cos(progress * Math.PI * (frequency * 0.24) + phase * 0.35) *
+					0.18;
+				const y =
+					centerY - (primary + secondary + tertiary) * baseAmplitude * envelope;
 				return {x, y};
 			});
 
@@ -550,17 +645,52 @@ function SiriWaveform({
 		const layerColors = buildWaveLayerColors(color);
 
 		return [
-			{path: makePath(0.1, 1.28, 3.15, 0.55), opacity: active ? 0.96 : 0.28, strokeWidth: 2.9, color: layerColors[0]},
-			{path: makePath(0.9, 1.08, 2.7, 1.1), opacity: active ? 0.82 : 0.22, strokeWidth: 2.55, color: layerColors[1]},
-			{path: makePath(1.7, 0.9, 2.2, 1.7), opacity: active ? 0.64 : 0.18, strokeWidth: 2.15, color: layerColors[2]},
-			{path: makePath(2.45, 0.74, 1.75, 2.15), opacity: active ? 0.46 : 0.14, strokeWidth: 1.85, color: layerColors[3]},
-			{path: makePath(3.2, 0.58, 1.3, 2.7), opacity: active ? 0.3 : 0.1, strokeWidth: 1.5, color: layerColors[4]},
+			{
+				path: makePath(0.1, 1.28, 3.15, 0.55),
+				opacity: active ? 0.96 : 0.28,
+				strokeWidth: 2.9,
+				color: layerColors[0],
+			},
+			{
+				path: makePath(0.9, 1.08, 2.7, 1.1),
+				opacity: active ? 0.82 : 0.22,
+				strokeWidth: 2.55,
+				color: layerColors[1],
+			},
+			{
+				path: makePath(1.7, 0.9, 2.2, 1.7),
+				opacity: active ? 0.64 : 0.18,
+				strokeWidth: 2.15,
+				color: layerColors[2],
+			},
+			{
+				path: makePath(2.45, 0.74, 1.75, 2.15),
+				opacity: active ? 0.46 : 0.14,
+				strokeWidth: 1.85,
+				color: layerColors[3],
+			},
+			{
+				path: makePath(3.2, 0.58, 1.3, 2.7),
+				opacity: active ? 0.3 : 0.1,
+				strokeWidth: 1.5,
+				color: layerColors[4],
+			},
 		];
 	}, [active, centerY, color, energy, smoothedLevels, width]);
 
 	return (
-		<svg viewBox={`0 0 ${width} ${height}`} className="h-full w-full" preserveAspectRatio="none" aria-hidden="true">
-			<path d={`M 0 ${centerY} L ${width} ${centerY}`} stroke={color} strokeOpacity={active ? 0.14 : 0.08} strokeWidth="1" />
+		<svg
+			viewBox={`0 0 ${width} ${height}`}
+			className="h-full w-full"
+			preserveAspectRatio="none"
+			aria-hidden="true"
+		>
+			<path
+				d={`M 0 ${centerY} L ${width} ${centerY}`}
+				stroke={color}
+				strokeOpacity={active ? 0.14 : 0.08}
+				strokeWidth="1"
+			/>
 			{wavePaths.map((wave, index) => (
 				<path
 					key={index}
@@ -612,15 +742,20 @@ function buildWaveLayerColors(baseColor: string) {
 function mixHex(colorA: string, colorB: string, amount: number) {
 	const from = hexToRgb(colorA);
 	const to = hexToRgb(colorB);
-	const mix = (fromValue: number, toValue: number) => Math.round(fromValue + (toValue - fromValue) * amount);
+	const mix = (fromValue: number, toValue: number) =>
+		Math.round(fromValue + (toValue - fromValue) * amount);
 	return `rgb(${mix(from.red, to.red)}, ${mix(from.green, to.green)}, ${mix(from.blue, to.blue)})`;
 }
 
 function hexToRgb(hex: string) {
 	const normalized = hex.replace("#", "");
-	const value = normalized.length === 3
-		? normalized.split("").map((char) => char + char).join("")
-		: normalized;
+	const value =
+		normalized.length === 3
+			? normalized
+					.split("")
+					.map((char) => char + char)
+					.join("")
+			: normalized;
 	const parsed = Number.parseInt(value, 16);
 	return {
 		red: (parsed >> 16) & 255,
@@ -633,7 +768,16 @@ function hexToRgb(hex: string) {
 
 function MicIcon() {
 	return (
-		<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		>
 			<rect x="5" y="1" width="6" height="9" rx="3" />
 			<path d="M3 7a5 5 0 0 0 10 0" />
 			<line x1="8" y1="12" x2="8" y2="15" />
@@ -644,8 +788,21 @@ function MicIcon() {
 
 function SpeakerIcon() {
 	return (
-		<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-			<polygon points="2,5 6,5 10,1.5 10,14.5 6,11 2,11" fill="currentColor" stroke="none" />
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		>
+			<polygon
+				points="2,5 6,5 10,1.5 10,14.5 6,11 2,11"
+				fill="currentColor"
+				stroke="none"
+			/>
 			<path d="M12.5 5.5a3.5 3.5 0 0 1 0 5" />
 		</svg>
 	);
@@ -653,8 +810,25 @@ function SpeakerIcon() {
 
 function StopIcon() {
 	return (
-		<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-			<rect x="3.5" y="3.5" width="7" height="7" rx="1.5" fill="currentColor" stroke="none" />
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 14 14"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		>
+			<rect
+				x="3.5"
+				y="3.5"
+				width="7"
+				height="7"
+				rx="1.5"
+				fill="currentColor"
+				stroke="none"
+			/>
 		</svg>
 	);
 }
diff --git a/interface/src/routes/Overview.tsx b/interface/src/routes/Overview.tsx
index a52496c17..520defff2 100644
--- a/interface/src/routes/Overview.tsx
+++ b/interface/src/routes/Overview.tsx
@@ -1,13 +1,12 @@
 import {useMemo, useState} from "react";
-import {useQuery} from "@tanstack/react-query";
+import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
 import {Link} from "@tanstack/react-router";
-import {SparklesIcon, IdeaIcon} from "@hugeicons/core-free-icons";
-import {HugeiconsIcon} from "@hugeicons/react";
+import {Sparkle, Lightbulb, FolderSimplePlus} from "@phosphor-icons/react";
 import {api} from "@/api/client";
 import {CreateAgentDialog} from "@/components/CreateAgentDialog";
-import {TopologyGraph} from "@/components/TopologyGraph";
+import {OrgGraph} from "@/components/org";
+import {Button, CircleButton} from "@spacedrive/primitives";
 import {UpdatePill} from "@/components/UpdatePill";
-import {useSetTopBar} from "@/components/TopBar";
 import type {ChannelLiveState} from "@/hooks/useChannelLiveState";
 import {formatUptime} from "@/lib/format";
 
@@ -18,6 +17,27 @@ interface OverviewProps {
 
 export function Overview({liveStates, activeLinks}: OverviewProps) {
 	const [createOpen, setCreateOpen] = useState(false);
+	const queryClient = useQueryClient();
+
+	const createHuman = useMutation({
+		mutationFn: (id: string) => api.createHuman({id}),
+		onSuccess: () => {
+			queryClient.invalidateQueries({queryKey: ["topology"]});
+		},
+	});
+
+	const {data: topologyData} = useQuery({
+		queryKey: ["topology"],
+		queryFn: api.topology,
+		staleTime: 10_000,
+	});
+
+	const createGroup = useMutation({
+		mutationFn: (name: string) => api.createGroup({name, agent_ids: []}),
+		onSuccess: () => {
+			queryClient.invalidateQueries({queryKey: ["topology"]});
+		},
+	});
 
 	const {data: statusData} = useQuery({
 		queryKey: ["status"],
@@ -59,71 +79,85 @@ export function Overview({liveStates, activeLinks}: OverviewProps) {
 
 	const uptime = statusData?.uptime_seconds ?? 0;
 
-	useSetTopBar(
-		<div className="flex h-full flex-1 items-center justify-between px-6">
-			<div className="flex items-center gap-4">
-				<div className="flex items-center gap-2">
-					<h1 className="font-plex text-sm font-medium text-ink">Spacebot</h1>
-					{statusData ? (
-						<div className="h-2 w-2 rounded-full bg-green-500" />
-					) : (
-						<div className="h-2 w-2 rounded-full bg-red-500" />
-					)}
-				</div>
+	return (
+		<div className="flex flex-col h-full">
+			<div className="flex h-12 shrink-0 items-center justify-between border-b border-app-line pl-6 pr-3">
+				<div className="flex items-center gap-4">
+					<div className="flex items-center gap-2">
+						<h1 className="font-plex text-sm font-medium text-ink">Spacebot</h1>
+						{statusData ? (
+							<div className="h-2 w-2 rounded-full bg-green-500" />
+						) : (
+							<div className="h-2 w-2 rounded-full bg-red-500" />
+						)}
+					</div>
 
-				<div className="flex items-center gap-4 text-tiny text-ink-faint">
-					<span>
-						{agents.length} agent{agents.length !== 1 ? "s" : ""}
-					</span>
-					<span>
-						{channels.length} channel{channels.length !== 1 ? "s" : ""}
-					</span>
-					<span>{formatUptime(uptime)}</span>
-				</div>
+					<div className="flex items-center gap-4 text-tiny text-ink-faint">
+						<span>
+							{agents.length} agent{agents.length !== 1 ? "s" : ""}
+						</span>
+						<span>
+							{channels.length} channel{channels.length !== 1 ? "s" : ""}
+						</span>
+						<span>{formatUptime(uptime)}</span>
+					</div>
 
-				{(activity.workers > 0 || activity.branches > 0) && (
-					<div className="flex items-center gap-2">
-						{activity.workers > 0 && (
-							<span className="flex items-center gap-1.5 rounded-full bg-amber-500/10 px-2.5 py-1 text-tiny">
-								<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-amber-400" />
-								<span className="font-medium text-amber-400">
-									{activity.workers}w
+					{(activity.workers > 0 || activity.branches > 0) && (
+						<div className="flex items-center gap-2">
+							{activity.workers > 0 && (
+								<span className="flex items-center gap-1.5 rounded-full bg-amber-500/10 px-2.5 py-1 text-tiny">
+									<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-amber-400" />
+									<span className="font-medium text-amber-400">
+										{activity.workers}w
+									</span>
 								</span>
-							</span>
-						)}
-						{activity.branches > 0 && (
-							<span className="flex items-center gap-1.5 rounded-full bg-violet-500/10 px-2.5 py-1 text-tiny">
-								<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-violet-400" />
-								<span className="font-medium text-violet-400">
-									{activity.branches}b
+							)}
+							{activity.branches > 0 && (
+								<span className="flex items-center gap-1.5 rounded-full bg-violet-500/10 px-2.5 py-1 text-tiny">
+									<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-violet-400" />
+									<span className="font-medium text-violet-400">
+										{activity.branches}b
+									</span>
 								</span>
-							</span>
-						)}
-					</div>
-				)}
-			</div>
+							)}
+						</div>
+					)}
+				</div>
 
-			<div className="flex items-center gap-3">
-				<UpdatePill />
-				{providersData?.has_any && (
-					<button
-						onClick={() => setCreateOpen(true)}
-						className="text-tiny text-ink-faint hover:text-ink transition-colors"
+				<div className="flex items-center gap-3">
+					<CircleButton
+						icon={FolderSimplePlus}
+						title="New Group"
+						onClick={() =>
+							createGroup.mutate(
+								`Group ${(topologyData?.groups?.length ?? 0) + 1}`,
+							)
+						}
+					/>
+					<UpdatePill />
+					{providersData?.has_any && (
+						<Button
+							variant="gray"
+							size="md"
+							onClick={() => setCreateOpen(true)}
+						>
+							New Agent
+						</Button>
+					)}
+					<Button
+						variant="gray"
+						size="md"
+						onClick={() => createHuman.mutate(`human-${Date.now()}`)}
 					>
-						+ New Agent
-					</button>
-				)}
+						New Human
+					</Button>
+				</div>
 			</div>
-		</div>,
-	);
-
-	return (
-		<div className="flex flex-col h-full">
 			{providersData && !providersData.has_any && agents.length > 0 && (
 				<div className="mx-6 mt-4 flex items-center justify-between gap-3 rounded-lg border border-amber-500/25 bg-amber-500/10 px-4 py-3">
 					<p className="text-sm text-amber-200">
-						Agents are configured, but no provider credentials are available. Add or unlock
-						secrets to bring agents online.
+						Agents are configured, but no provider credentials are available.
+						Add or unlock secrets to bring agents online.
 					</p>
 					<Link
 						to="/settings"
@@ -149,9 +183,12 @@ export function Overview({liveStates, activeLinks}: OverviewProps) {
 						{providersData && !providersData.has_any ? (
 							<div className="flex flex-col items-center gap-6 max-w-md text-center">
 								<div className="flex flex-col items-center gap-4">
-									<h2 className="text-lg font-medium text-ink">Welcome to Spacebot</h2>
+									<h2 className="text-lg font-medium text-ink">
+										Welcome to Spacebot
+									</h2>
 									<p className="text-sm text-ink-faint leading-relaxed">
-										An agentic AI system where every process has a dedicated role. To get started, connect an LLM provider.
+										An agentic AI system where every process has a dedicated
+										role. To get started, connect an LLM provider.
 									</p>
 									<div className="mt-1 flex items-center gap-3">
 										<Link
@@ -159,7 +196,7 @@ export function Overview({liveStates, activeLinks}: OverviewProps) {
 											search={{tab: "providers"}}
 											className="inline-flex items-center gap-2 rounded-lg bg-accent px-4 py-2 text-sm font-medium text-white shadow hover:bg-accent/90 transition-colors"
 										>
-											<HugeiconsIcon icon={SparklesIcon} className="h-4 w-4" />
+											<Sparkle className="h-4 w-4" />
 											Add LLM Provider
 										</Link>
 										<a
@@ -172,11 +209,13 @@ export function Overview({liveStates, activeLinks}: OverviewProps) {
 										</a>
 									</div>
 								</div>
-								<div className="flex items-start gap-3 rounded-lg border border-app-line bg-app-darkBox/50 px-4 py-3 text-left">
-									<HugeiconsIcon icon={IdeaIcon} className="mt-0.5 h-4 w-4 shrink-0 text-accent" />
+								<div className="flex items-start gap-3 rounded-lg border border-app-line bg-app-dark-box/50 px-4 py-3 text-left">
+									<Lightbulb className="mt-0.5 h-4 w-4 shrink-0 text-accent" />
 									<p className="text-tiny text-ink-faint leading-relaxed">
 										<span className="font-medium text-ink-dull">Pro tip:</span>{" "}
-										Once set up, you can talk to the Cortex from any agent page to get help with configuration, debugging, or learning how Spacebot works.
+										Once set up, you can talk to the Cortex from any agent page
+										to get help with configuration, debugging, or learning how
+										Spacebot works.
 									</p>
 								</div>
 							</div>
@@ -193,12 +232,16 @@ export function Overview({liveStates, activeLinks}: OverviewProps) {
 						)}
 					</div>
 				) : (
-					<TopologyGraph activeEdges={activeLinks} agents={agents} />
+					<OrgGraph activeEdges={activeLinks} agents={agents} />
 				)}
 			</div>
 
 			{agents[0] && (
-				<CreateAgentDialog open={createOpen} onOpenChange={setCreateOpen} agentId={agents[0].id} />
+				<CreateAgentDialog
+					open={createOpen}
+					onOpenChange={setCreateOpen}
+					agentId={agents[0].id}
+				/>
 			)}
 		</div>
 	);
diff --git a/interface/src/routes/Settings.tsx b/interface/src/routes/Settings.tsx
index 895cc279c..446299266 100644
--- a/interface/src/routes/Settings.tsx
+++ b/interface/src/routes/Settings.tsx
@@ -1,292 +1,55 @@
-import { useState, useEffect, useRef } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { api, type GlobalSettingsResponse, type UpdateStatus, type SecretCategory, type SecretListItem, type StoreState } from "@/api/client";
-import { Badge, Button, Input, SettingSidebarButton, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Toggle } from "@/ui";
-import { useSearch, useNavigate } from "@tanstack/react-router";
-import { PlatformCatalog, InstanceCard, AddInstanceCard } from "@/components/ChannelSettingCard";
-import { ModelSelect } from "@/components/ModelSelect";
-import { ProviderIcon } from "@/lib/providerIcons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSearch } from "@fortawesome/free-solid-svg-icons";
-
-import { parse as parseToml } from "smol-toml";
-import { useTheme, THEMES, type ThemeId } from "@/hooks/useTheme";
-import { Markdown } from "@/components/Markdown";
-import { useSetTopBar } from "@/components/TopBar";
-
-type SectionId = "appearance" | "providers" | "channels" | "api-keys" | "secrets" | "server" | "opencode" | "worker-logs" | "updates" | "config-file" | "changelog";
-
-const SECTIONS = [
-	{
-		id: "providers" as const,
-		label: "Providers",
-		group: "general" as const,
-		description: "LLM provider credentials",
-	},
-	{
-		id: "channels" as const,
-		label: "Channels",
-		group: "messaging" as const,
-		description: "Messaging platforms and bindings",
-	},
-	{
-		id: "api-keys" as const,
-		label: "API Keys",
-		group: "general" as const,
-		description: "Third-party service keys",
-	},
-	{
-		id: "secrets" as const,
-		label: "Secrets",
-		group: "general" as const,
-		description: "Encrypted secret storage",
-	},
-	{
-		id: "server" as const,
-		label: "Server",
-		group: "system" as const,
-		description: "API server configuration",
-	},
-	{
-		id: "opencode" as const,
-		label: "OpenCode",
-		group: "system" as const,
-		description: "OpenCode worker integration",
-	},
-	{
-		id: "worker-logs" as const,
-		label: "Worker Logs",
-		group: "system" as const,
-		description: "Worker execution logging",
-	},
-	{
-		id: "updates" as const,
-		label: "Updates",
-		group: "system" as const,
-		description: "Release checks and update controls",
-	},
-	{
-		id: "appearance" as const,
-		label: "Appearance",
-		group: "general" as const,
-		description: "Theme and display settings",
-	},
-	{
-		id: "config-file" as const,
-		label: "Config File",
-		group: "system" as const,
-		description: "Raw config.toml editor",
-	},
-	{
-		id: "changelog" as const,
-		label: "Changelog",
-		group: "system" as const,
-		description: "Release history",
-	},
-] satisfies {
-	id: SectionId;
-	label: string;
-	group: string;
-	description: string;
-}[];
-
-const PROVIDERS = [
-	{
-		id: "openrouter",
-		name: "OpenRouter",
-		description: "Multi-provider gateway with unified API",
-		placeholder: "sk-or-...",
-		envVar: "OPENROUTER_API_KEY",
-		defaultModel: "openrouter/anthropic/claude-sonnet-4",
-	},
-	{
-		id: "kilo",
-		name: "Kilo Gateway",
-		description: "OpenAI-compatible multi-provider gateway",
-		placeholder: "sk-...",
-		envVar: "KILO_API_KEY",
-		defaultModel: "kilo/anthropic/claude-sonnet-4.5",
-	},
-	{
-		id: "opencode-zen",
-		name: "OpenCode Zen",
-		description: "Multi-format gateway (Kimi, GLM, MiniMax, Qwen)",
-		placeholder: "...",
-		envVar: "OPENCODE_ZEN_API_KEY",
-		defaultModel: "opencode-zen/kimi-k2.5",
-	},
-	{
-		id: "opencode-go",
-		name: "OpenCode Go",
-		description: "Lite OpenCode model catalog and limits",
-		placeholder: "...",
-		envVar: "OPENCODE_GO_API_KEY",
-		defaultModel: "opencode-go/kimi-k2.5",
-	},
-	{
-		id: "anthropic",
-		name: "Anthropic",
-		description: "Claude models (Sonnet, Opus, Haiku)",
-		placeholder: "sk-ant-...",
-		envVar: "ANTHROPIC_API_KEY",
-		defaultModel: "anthropic/claude-sonnet-4",
-	},
-	{
-		id: "openai",
-		name: "OpenAI",
-		description: "GPT models",
-		placeholder: "sk-...",
-		envVar: "OPENAI_API_KEY",
-		defaultModel: "openai/gpt-4.1",
-	},
-	{
-		id: "zai-coding-plan",
-		name: "Z.AI Coding Plan",
-		description: "GLM coding models (glm-4.7, glm-5, glm-4.5-air)",
-		placeholder: "...",
-		envVar: "ZAI_CODING_PLAN_API_KEY",
-		defaultModel: "zai-coding-plan/glm-5",
-	},
-	{
-		id: "zhipu",
-		name: "Z.ai (GLM)",
-		description: "GLM models (GLM-4, GLM-4-Flash)",
-		placeholder: "...",
-		envVar: "ZHIPU_API_KEY",
-		defaultModel: "zhipu/glm-4-plus",
-	},
-	{
-		id: "groq",
-		name: "Groq",
-		description: "Fast inference for Llama, Mixtral models",
-		placeholder: "gsk_...",
-		envVar: "GROQ_API_KEY",
-		defaultModel: "groq/llama-3.3-70b-versatile",
-	},
-	{
-		id: "together",
-		name: "Together AI",
-		description: "Wide model selection with competitive pricing",
-		placeholder: "...",
-		envVar: "TOGETHER_API_KEY",
-		defaultModel: "together/meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo",
-	},
-	{
-		id: "fireworks",
-		name: "Fireworks AI",
-		description: "Fast inference for popular OSS models",
-		placeholder: "...",
-		envVar: "FIREWORKS_API_KEY",
-		defaultModel: "fireworks/accounts/fireworks/models/llama-v3p3-70b-instruct",
-	},
-	{
-		id: "deepseek",
-		name: "DeepSeek",
-		description: "DeepSeek Chat and Reasoner models",
-		placeholder: "sk-...",
-		envVar: "DEEPSEEK_API_KEY",
-		defaultModel: "deepseek/deepseek-chat",
-	},
-	{
-		id: "xai",
-		name: "xAI",
-		description: "Grok models",
-		placeholder: "xai-...",
-		envVar: "XAI_API_KEY",
-		defaultModel: "xai/grok-2-latest",
-	},
-	{
-		id: "mistral",
-		name: "Mistral AI",
-		description: "Mistral Large, Small, Codestral models",
-		placeholder: "...",
-		envVar: "MISTRAL_API_KEY",
-		defaultModel: "mistral/mistral-large-latest",
-	},
-	{
-		id: "gemini",
-		name: "Google Gemini",
-		description: "Google Gemini experimental and production models",
-		placeholder: "AIza...",
-		envVar: "GEMINI_API_KEY",
-		defaultModel: "gemini/gemini-2.5-flash",
-	},
-	{
-		id: "nvidia",
-		name: "NVIDIA NIM",
-		description: "NVIDIA-hosted models via NIM API",
-		placeholder: "nvapi-...",
-		envVar: "NVIDIA_API_KEY",
-		defaultModel: "nvidia/meta/llama-3.1-405b-instruct",
-	},
-	{
-		id: "minimax",
-		name: "MiniMax",
-		description: "MiniMax (Anthropic message format)",
-		placeholder: "sk-...",
-		envVar: "MINIMAX_API_KEY",
-		defaultModel: "minimax/MiniMax-M2.5",
-	},
-	{
-		id: "minimax-cn",
-		name: "MiniMax CN",
-		description: "MiniMax China (Anthropic message format)",
-		placeholder: "sk-...",
-		envVar: "MINIMAX_CN_API_KEY",
-		defaultModel: "minimax-cn/MiniMax-M2.5",
-	},
-	{
-		id: "moonshot",
-		name: "Moonshot AI",
-		description: "Kimi models (Kimi K2, Kimi K2.5)",
-		placeholder: "sk-...",
-		envVar: "MOONSHOT_API_KEY",
-		defaultModel: "moonshot/kimi-k2.5",
-	},
-	{
-		id: "github-copilot",
-		name: "GitHub Copilot",
-		description: "GitHub Copilot API (uses GitHub PAT for token exchange)",
-		placeholder: "ghp_... or gh auth token",
-		envVar: "GITHUB_COPILOT_API_KEY",
-		defaultModel: "github-copilot/claude-sonnet-4",
-	},
-	{
-		id: "azure",
-		name: "Azure OpenAI",
-		description: "Azure OpenAI Service with custom deployments",
-		placeholder: "Azure API key (alphanumeric string)",
-		envVar: "AZURE_API_KEY",
-		defaultModel: "azure/gpt-4o",
-	},
-	{
-		id: "ollama",
-		name: "Ollama",
-		description: "Local or remote Ollama API endpoint",
-		placeholder: "http://localhost:11434",
-		envVar: "OLLAMA_BASE_URL",
-		defaultModel: "ollama/llama3.2",
-	},
-] as const;
-
-const CHATGPT_OAUTH_DEFAULT_MODEL = "openai-chatgpt/gpt-5.3-codex";
+import {useState, useEffect, useRef} from "react";
+import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
+import {api} from "@/api/client";
+import {
+	Button,
+	Input,
+	DialogRoot,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogDescription,
+	DialogFooter,
+} from "@spacedrive/primitives";
+import {SettingSidebarButton} from "@/ui/SettingSidebarButton";
+import {useSearch, useNavigate} from "@tanstack/react-router";
+import {ModelSelect} from "@/components/ModelSelect";
+import {
+	InstanceSection,
+	AppearanceSection,
+	ChannelsSection,
+	SecretsSection,
+	ApiKeysSection,
+	ServerSection,
+	WorkerLogsSection,
+	OpenCodeSection,
+	UpdatesSection,
+	ChangelogSection,
+	ConfigFileSection,
+	ProviderCard,
+	ChatGptOAuthDialog,
+	SECTIONS,
+	PROVIDERS,
+	CHATGPT_OAUTH_DEFAULT_MODEL,
+	type SectionId,
+} from "@/components/settings";
 
 export function Settings() {
 	const queryClient = useQueryClient();
 	const navigate = useNavigate();
-	const search = useSearch({ from: "/settings" }) as { tab?: string };
+	const search = useSearch({from: "/settings"}) as {tab?: string};
 	const [activeSection, setActiveSection] = useState<SectionId>("providers");
 
 	// Sync activeSection with URL search param
 	useEffect(() => {
-		if (search.tab && SECTIONS.some(s => s.id === search.tab)) {
+		if (search.tab && SECTIONS.some((s) => s.id === search.tab)) {
 			setActiveSection(search.tab as SectionId);
 		}
 	}, [search.tab]);
 
 	const handleSectionChange = (section: SectionId) => {
 		setActiveSection(section);
-		navigate({ to: "/settings", search: { tab: section } });
+		navigate({to: "/settings", search: {tab: section}});
 	};
 	const [editingProvider, setEditingProvider] = useState<string | null>(null);
 	const [keyInput, setKeyInput] = useState("");
@@ -297,7 +60,8 @@ export function Settings() {
 		message: string;
 		sample?: string | null;
 	} | null>(null);
-	const [isPollingOpenAiBrowserOAuth, setIsPollingOpenAiBrowserOAuth] = useState(false);
+	const [isPollingOpenAiBrowserOAuth, setIsPollingOpenAiBrowserOAuth] =
+		useState(false);
 	const [openAiBrowserOAuthMessage, setOpenAiBrowserOAuthMessage] = useState<{
 		text: string;
 		type: "success" | "error";
@@ -319,7 +83,7 @@ export function Settings() {
 	const fetchAbortControllerRef = useRef<AbortController | null>(null);
 
 	// Fetch providers data (only when on providers tab)
-	const { data, isLoading } = useQuery({
+	const {data, isLoading} = useQuery({
 		queryKey: ["providers"],
 		queryFn: api.providers,
 		staleTime: 5_000,
@@ -327,16 +91,42 @@ export function Settings() {
 	});
 
 	// Fetch global settings (only when on api-keys, server, or worker-logs tabs)
-	const { data: globalSettings, isLoading: globalSettingsLoading } = useQuery({
+	const {data: globalSettings, isLoading: globalSettingsLoading} = useQuery({
 		queryKey: ["global-settings"],
 		queryFn: api.globalSettings,
 		staleTime: 5_000,
-		enabled: activeSection === "api-keys" || activeSection === "server" || activeSection === "opencode" || activeSection === "worker-logs",
+		enabled:
+			activeSection === "instance" ||
+			activeSection === "api-keys" ||
+			activeSection === "server" ||
+			activeSection === "opencode" ||
+			activeSection === "worker-logs",
 	});
 
 	const updateMutation = useMutation({
-		mutationFn: ({ provider, apiKey, model, baseUrl, apiVersion, deployment }: { provider: string; apiKey: string; model: string; baseUrl?: string; apiVersion?: string; deployment?: string }) =>
-			api.updateProvider(provider, apiKey, model, baseUrl, apiVersion, deployment),
+		mutationFn: ({
+			provider,
+			apiKey,
+			model,
+			baseUrl,
+			apiVersion,
+			deployment,
+		}: {
+			provider: string;
+			apiKey: string;
+			model: string;
+			baseUrl?: string;
+			apiVersion?: string;
+			deployment?: string;
+		}) =>
+			api.updateProvider(
+				provider,
+				apiKey,
+				model,
+				baseUrl,
+				apiVersion,
+				deployment,
+			),
 		onSuccess: (result) => {
 			if (result.success) {
 				setEditingProvider(null);
@@ -344,48 +134,64 @@ export function Settings() {
 				setModelInput("");
 				setTestedSignature(null);
 				setTestResult(null);
-				setMessage({ text: result.message, type: "success" });
-				queryClient.invalidateQueries({ queryKey: ["providers"] });
+				setMessage({text: result.message, type: "success"});
+				queryClient.invalidateQueries({queryKey: ["providers"]});
 				// Agents will auto-start on the backend, refetch agent list after a short delay
 				setTimeout(() => {
-					queryClient.invalidateQueries({ queryKey: ["agents"] });
-					queryClient.invalidateQueries({ queryKey: ["overview"] });
+					queryClient.invalidateQueries({queryKey: ["agents"]});
+					queryClient.invalidateQueries({queryKey: ["overview"]});
 				}, 3000);
 			} else {
-				setMessage({ text: result.message, type: "error" });
+				setMessage({text: result.message, type: "error"});
 			}
 		},
 		onError: (error) => {
-			setMessage({ text: `Failed: ${error.message}`, type: "error" });
+			setMessage({text: `Failed: ${error.message}`, type: "error"});
 		},
 	});
 
 	const testModelMutation = useMutation({
-		mutationFn: ({ provider, apiKey, model, baseUrl, apiVersion, deployment }: {
+		mutationFn: ({
+			provider,
+			apiKey,
+			model,
+			baseUrl,
+			apiVersion,
+			deployment,
+		}: {
 			provider: string;
 			apiKey: string;
 			model: string;
 			baseUrl?: string;
 			apiVersion?: string;
 			deployment?: string;
-		}) => api.testProviderModel(provider, apiKey, model, baseUrl, apiVersion, deployment),
+		}) =>
+			api.testProviderModel(
+				provider,
+				apiKey,
+				model,
+				baseUrl,
+				apiVersion,
+				deployment,
+			),
 	});
 	const startOpenAiBrowserOAuthMutation = useMutation({
-		mutationFn: (params: { model: string }) => api.startOpenAiOAuthBrowser(params),
+		mutationFn: (params: {model: string}) =>
+			api.startOpenAiOAuthBrowser(params),
 	});
 
 	const removeMutation = useMutation({
 		mutationFn: (provider: string) => api.removeProvider(provider),
 		onSuccess: (result) => {
 			if (result.success) {
-				setMessage({ text: result.message, type: "success" });
-				queryClient.invalidateQueries({ queryKey: ["providers"] });
+				setMessage({text: result.message, type: "success"});
+				queryClient.invalidateQueries({queryKey: ["providers"]});
 			} else {
-				setMessage({ text: result.message, type: "error" });
+				setMessage({text: result.message, type: "error"});
 			}
 		},
 		onError: (error) => {
-			setMessage({ text: `Failed: ${error.message}`, type: "error" });
+			setMessage({text: `Failed: ${error.message}`, type: "error"});
 		},
 	});
 
@@ -401,24 +207,40 @@ export function Settings() {
 
 		if (editingProvider === "azure") {
 			if (!keyInput.trim()) {
-				setTestResult({ success: false, message: "API key is required for Azure OpenAI" });
+				setTestResult({
+					success: false,
+					message: "API key is required for Azure OpenAI",
+				});
 				return false;
 			}
 			if (!azureBaseUrl.trim()) {
-				setTestResult({ success: false, message: "Base URL is required for Azure OpenAI" });
+				setTestResult({
+					success: false,
+					message: "Base URL is required for Azure OpenAI",
+				});
 				return false;
 			}
 			if (!azureApiVersion.trim()) {
-				setTestResult({ success: false, message: "API Version is required for Azure OpenAI" });
+				setTestResult({
+					success: false,
+					message: "API Version is required for Azure OpenAI",
+				});
 				return false;
 			}
 			if (!azureDeployment.trim()) {
-				setTestResult({ success: false, message: "Deployment Name is required for Azure OpenAI" });
+				setTestResult({
+					success: false,
+					message: "Deployment Name is required for Azure OpenAI",
+				});
 				return false;
 			}
-			const normalizedBaseUrl = azureBaseUrl.trim().replace(/\/+$/, '');
+			const normalizedBaseUrl = azureBaseUrl.trim().replace(/\/+$/, "");
 			if (!normalizedBaseUrl.endsWith(".openai.azure.com")) {
-				setTestResult({ success: false, message: "Base URL must end with '.openai.azure.com' (e.g., https://{resource-name}.openai.azure.com)" });
+				setTestResult({
+					success: false,
+					message:
+						"Base URL must end with '.openai.azure.com' (e.g., https://{resource-name}.openai.azure.com)",
+				});
 				return false;
 			}
 		}
@@ -426,16 +248,28 @@ export function Settings() {
 		setMessage(null);
 		setTestResult(null);
 		try {
-			const azureModel = editingProvider === "azure" ? `azure/${azureDeployment.trim()}` : modelInput.trim();
+			const azureModel =
+				editingProvider === "azure"
+					? `azure/${azureDeployment.trim()}`
+					: modelInput.trim();
 			const result = await testModelMutation.mutateAsync({
 				provider: editingProvider,
 				apiKey: keyInput.trim(),
 				model: azureModel,
-				baseUrl: editingProvider === "azure" ? azureBaseUrl.trim().replace(/\/+$/, '') : undefined,
-				apiVersion: editingProvider === "azure" ? azureApiVersion.trim() : undefined,
-				deployment: editingProvider === "azure" ? azureDeployment.trim() : undefined,
+				baseUrl:
+					editingProvider === "azure"
+						? azureBaseUrl.trim().replace(/\/+$/, "")
+						: undefined,
+				apiVersion:
+					editingProvider === "azure" ? azureApiVersion.trim() : undefined,
+				deployment:
+					editingProvider === "azure" ? azureDeployment.trim() : undefined,
+			});
+			setTestResult({
+				success: result.success,
+				message: result.message,
+				sample: result.sample,
 			});
-			setTestResult({ success: result.success, message: result.message, sample: result.sample });
 			if (result.success) {
 				setTestedSignature(currentSignature);
 				return true;
@@ -444,7 +278,7 @@ export function Settings() {
 				return false;
 			}
 		} catch (error: any) {
-			setTestResult({ success: false, message: `Failed: ${error.message}` });
+			setTestResult({success: false, message: `Failed: ${error.message}`});
 			setTestedSignature(null);
 			return false;
 		}
@@ -455,24 +289,39 @@ export function Settings() {
 
 		if (editingProvider === "azure") {
 			if (!keyInput.trim()) {
-				setMessage({ text: "API key is required for Azure OpenAI", type: "error" });
+				setMessage({
+					text: "API key is required for Azure OpenAI",
+					type: "error",
+				});
 				return;
 			}
 			if (!azureBaseUrl.trim()) {
-				setMessage({ text: "Base URL is required for Azure OpenAI", type: "error" });
+				setMessage({
+					text: "Base URL is required for Azure OpenAI",
+					type: "error",
+				});
 				return;
 			}
 			if (!azureApiVersion.trim()) {
-				setMessage({ text: "API Version is required for Azure OpenAI", type: "error" });
+				setMessage({
+					text: "API Version is required for Azure OpenAI",
+					type: "error",
+				});
 				return;
 			}
 			if (!azureDeployment.trim()) {
-				setMessage({ text: "Deployment Name is required for Azure OpenAI", type: "error" });
+				setMessage({
+					text: "Deployment Name is required for Azure OpenAI",
+					type: "error",
+				});
 				return;
 			}
-			const normalizedBaseUrl = azureBaseUrl.trim().replace(/\/+$/, '');
+			const normalizedBaseUrl = azureBaseUrl.trim().replace(/\/+$/, "");
 			if (!normalizedBaseUrl.endsWith(".openai.azure.com")) {
-				setMessage({ text: "Base URL must end with '.openai.azure.com'", type: "error" });
+				setMessage({
+					text: "Base URL must end with '.openai.azure.com'",
+					type: "error",
+				});
 				return;
 			}
 		}
@@ -488,7 +337,7 @@ export function Settings() {
 				provider: editingProvider,
 				apiKey: keyInput.trim(),
 				model: azureModel,
-				baseUrl: azureBaseUrl.trim().replace(/\/+$/, ''),
+				baseUrl: azureBaseUrl.trim().replace(/\/+$/, ""),
 				apiVersion: azureApiVersion.trim(),
 				deployment: azureDeployment.trim(),
 			});
@@ -501,7 +350,10 @@ export function Settings() {
 		}
 	};
 
-	const monitorOpenAiBrowserOAuth = async (stateToken: string, signal: AbortSignal) => {
+	const monitorOpenAiBrowserOAuth = async (
+		stateToken: string,
+		signal: AbortSignal,
+	) => {
 		setIsPollingOpenAiBrowserOAuth(true);
 		setOpenAiBrowserOAuthMessage(null);
 		try {
@@ -539,7 +391,7 @@ export function Settings() {
 						signal.removeEventListener("abort", onAbort);
 						resolve(undefined);
 					}, 2000);
-					signal.addEventListener("abort", onAbort, { once: true });
+					signal.addEventListener("abort", onAbort, {once: true});
 				});
 			}
 			if (signal.aborted) return;
@@ -570,7 +422,12 @@ export function Settings() {
 			const result = await startOpenAiBrowserOAuthMutation.mutateAsync({
 				model: CHATGPT_OAUTH_DEFAULT_MODEL,
 			});
-			if (!result.success || !result.user_code || !result.verification_url || !result.state) {
+			if (
+				!result.success ||
+				!result.user_code ||
+				!result.verification_url ||
+				!result.state
+			) {
 				setOpenAiBrowserOAuthMessage({
 					text: result.message || "Failed to start device sign-in",
 					type: "error",
@@ -588,7 +445,10 @@ export function Settings() {
 			});
 			void monitorOpenAiBrowserOAuth(result.state, abort.signal);
 		} catch (error: any) {
-			setOpenAiBrowserOAuthMessage({text: `Failed: ${error.message}`, type: "error"});
+			setOpenAiBrowserOAuthMessage({
+				text: `Failed: ${error.message}`,
+				type: "error",
+			});
 		}
 	};
 
@@ -657,24 +517,17 @@ export function Settings() {
 
 	const isConfigured = (providerId: string): boolean => {
 		if (!data) return false;
-		const statusKey = providerId.replace(/-/g, "_") as keyof typeof data.providers;
+		const statusKey = providerId.replace(
+			/-/g,
+			"_",
+		) as keyof typeof data.providers;
 		return data.providers[statusKey] ?? false;
 	};
 
-	const sectionLabel = SECTIONS.find((s) => s.id === activeSection)?.label;
-
-	useSetTopBar(
-		<div className="flex h-full items-center px-6">
-			<h1 className="font-plex text-sm font-medium text-ink">
-				{sectionLabel ?? "Settings"}
-			</h1>
-		</div>,
-	);
-
 	return (
 		<div className="flex h-full min-h-0 overflow-hidden">
 			{/* Sidebar */}
-			<div className="flex min-h-0 w-52 flex-shrink-0 flex-col overflow-y-auto border-r border-app-line/50 bg-app-darkBox/20">
+			<div className="flex min-h-0 w-52 flex-shrink-0 flex-col overflow-y-auto border-r border-app-line/50 bg-app-dark-box/20">
 				<div className="px-3 pb-1 pt-4">
 					<span className="text-tiny font-medium uppercase tracking-wider text-ink-faint">
 						Settings
@@ -696,7 +549,12 @@ export function Settings() {
 			{/* Content */}
 			<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
 				<div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
-					{activeSection === "appearance" ? (
+					{activeSection === "instance" ? (
+						<InstanceSection
+							settings={globalSettings}
+							isLoading={globalSettingsLoading}
+						/>
+					) : activeSection === "appearance" ? (
 						<AppearanceSection />
 					) : activeSection === "providers" ? (
 						<div className="mx-auto max-w-2xl px-6 py-6">
@@ -706,15 +564,16 @@ export function Settings() {
 									LLM Providers
 								</h2>
 								<p className="mt-1 text-sm text-ink-dull">
-									Configure credentials/endpoints for LLM providers. At least one provider is
-									required for agents to function.
+									Configure credentials/endpoints for LLM providers. At least
+									one provider is required for agents to function.
 								</p>
 							</div>
 
-							<div className="mb-4 rounded-md border border-app-line bg-app-darkBox/20 px-4 py-3">
+							<div className="mb-4 rounded-md border border-app-line bg-app-dark-box/20 px-4 py-3">
 								<p className="text-sm text-ink-faint">
-									When you add a provider, choose a model and run a completion test before saving.
-									Saving applies that model to all five default routing roles and to your default agent.
+									When you add a provider, choose a model and run a completion
+									test before saving. Saving applies that model to all five
+									default routing roles and to your default agent.
 								</p>
 							</div>
 
@@ -725,80 +584,84 @@ export function Settings() {
 								</div>
 							) : (
 								<div className="flex flex-col gap-3">
-									{PROVIDERS.map((provider) => (
-										[
+									{PROVIDERS.map((provider) => [
+										<ProviderCard
+											key={provider.id}
+											provider={provider.id}
+											name={provider.name}
+											description={provider.description}
+											configured={isConfigured(provider.id)}
+											defaultModel={provider.defaultModel}
+											onEdit={() => {
+												setEditingProvider(provider.id);
+												setKeyInput("");
+												setModelInput(provider.defaultModel ?? "");
+												setTestedSignature(null);
+												setTestResult(null);
+												setMessage(null);
+												if (provider.id === "azure") {
+													// Reset Azure fields before hydrating
+													setAzureBaseUrl("");
+													setAzureApiVersion("");
+													setAzureDeployment("");
+
+													// Cancel previous request
+													fetchAbortControllerRef.current?.abort();
+
+													// Create new abort controller
+													const abortController = new AbortController();
+													fetchAbortControllerRef.current = abortController;
+
+													api
+														.getProviderConfig("azure", {
+															signal: abortController.signal,
+														})
+														.then((result) => {
+															// Check if aborted
+															if (abortController.signal.aborted) return;
+															if (!result.success) return;
+
+															setAzureBaseUrl(result.base_url ?? "");
+															setAzureApiVersion(result.api_version ?? "");
+															const deployment = result.deployment ?? "";
+															setAzureDeployment(deployment);
+															if (deployment) {
+																setModelInput(`azure/${deployment}`);
+															}
+														})
+														.catch((error) => {
+															if (error.name === "AbortError") return;
+															console.error(
+																"Failed to fetch Azure config:",
+																error,
+															);
+														});
+												}
+											}}
+											onRemove={() => removeMutation.mutate(provider.id)}
+											removing={removeMutation.isPending}
+										/>,
+										provider.id === "openai" ? (
 											<ProviderCard
-												key={provider.id}
-												provider={provider.id}
-												name={provider.name}
-												description={provider.description}
-												configured={isConfigured(provider.id)}
-												defaultModel={provider.defaultModel}
-												onEdit={() => {
-													setEditingProvider(provider.id);
-													setKeyInput("");
-													setModelInput(provider.defaultModel ?? "");
-													setTestedSignature(null);
-													setTestResult(null);
-													setMessage(null);
-													if (provider.id === "azure") {
-														// Reset Azure fields before hydrating
-														setAzureBaseUrl("");
-														setAzureApiVersion("");
-														setAzureDeployment("");
-
-														// Cancel previous request
-														fetchAbortControllerRef.current?.abort();
-
-														// Create new abort controller
-														const abortController = new AbortController();
-														fetchAbortControllerRef.current = abortController;
-
-														api.getProviderConfig("azure", { signal: abortController.signal })
-															.then((result) => {
-																// Check if aborted
-																if (abortController.signal.aborted) return;
-																if (!result.success) return;
-
-																setAzureBaseUrl(result.base_url ?? "");
-																setAzureApiVersion(result.api_version ?? "");
-																const deployment = result.deployment ?? "";
-																setAzureDeployment(deployment);
-																if (deployment) {
-																	setModelInput(`azure/${deployment}`);
-																}
-															})
-															.catch((error) => {
-																if (error.name === 'AbortError') return;
-																console.error("Failed to fetch Azure config:", error);
-															});
-													}
-												}}
-												onRemove={() => removeMutation.mutate(provider.id)}
+												key="openai-chatgpt"
+												provider="openai-chatgpt"
+												name="ChatGPT Plus (OAuth)"
+												description="Sign in with your ChatGPT Plus account using a device code."
+												configured={isConfigured("openai-chatgpt")}
+												defaultModel={CHATGPT_OAUTH_DEFAULT_MODEL}
+												onEdit={() => setOpenAiOAuthDialogOpen(true)}
+												onRemove={() => removeMutation.mutate("openai-chatgpt")}
 												removing={removeMutation.isPending}
-											/>,
-											provider.id === "openai" ? (
-												<ProviderCard
-													key="openai-chatgpt"
-													provider="openai-chatgpt"
-													name="ChatGPT Plus (OAuth)"
-													description="Sign in with your ChatGPT Plus account using a device code."
-													configured={isConfigured("openai-chatgpt")}
-													defaultModel={CHATGPT_OAUTH_DEFAULT_MODEL}
-													onEdit={() => setOpenAiOAuthDialogOpen(true)}
-													onRemove={() => removeMutation.mutate("openai-chatgpt")}
-													removing={removeMutation.isPending}
-													actionLabel="Sign in"
-													showRemove={isConfigured("openai-chatgpt")}
-												/>
-											) : null,
-										]
-									))}
+												actionLabel="Sign in"
+												showRemove={isConfigured("openai-chatgpt")}
+											/>
+										) : null,
+									])}
 								</div>
 							)}
 
 							{/* Info note */}
-							<div className="mt-6 rounded-md border border-app-line bg-app-darkBox/20 px-4 py-3">
+							<div className="mt-6 rounded-md border border-app-line bg-app-dark-box/20 px-4 py-3">
 								<p className="text-sm text-ink-faint">
 									Provider values are written to{" "}
 									<code className="rounded bg-app-box px-1 py-0.5 text-tiny text-ink-dull">
@@ -829,15 +692,27 @@ export function Settings() {
 					) : activeSection === "channels" ? (
 						<ChannelsSection />
 					) : activeSection === "api-keys" ? (
-						<ApiKeysSection settings={globalSettings} isLoading={globalSettingsLoading} />
+						<ApiKeysSection
+							settings={globalSettings}
+							isLoading={globalSettingsLoading}
+						/>
 					) : activeSection === "secrets" ? (
 						<SecretsSection />
 					) : activeSection === "server" ? (
-						<ServerSection settings={globalSettings} isLoading={globalSettingsLoading} />
+						<ServerSection
+							settings={globalSettings}
+							isLoading={globalSettingsLoading}
+						/>
 					) : activeSection === "opencode" ? (
-						<OpenCodeSection settings={globalSettings} isLoading={globalSettingsLoading} />
+						<OpenCodeSection
+							settings={globalSettings}
+							isLoading={globalSettingsLoading}
+						/>
 					) : activeSection === "worker-logs" ? (
-						<WorkerLogsSection settings={globalSettings} isLoading={globalSettingsLoading} />
+						<WorkerLogsSection
+							settings={globalSettings}
+							isLoading={globalSettingsLoading}
+						/>
 					) : activeSection === "updates" ? (
 						<UpdatesSection />
 					) : activeSection === "config-file" ? (
@@ -848,21 +723,28 @@ export function Settings() {
 				</div>
 			</div>
 
-			<Dialog open={!!editingProvider} onOpenChange={(open) => { if (!open) handleClose(); }}>
+			<DialogRoot
+				open={!!editingProvider}
+				onOpenChange={(open) => {
+					if (!open) handleClose();
+				}}
+			>
 				<DialogContent className="max-w-md">
 					<DialogHeader>
 						<DialogTitle>
 							{isConfigured(editingProvider ?? "") ? "Update" : "Add"}{" "}
-							{editingProvider === "ollama" || editingProvider === "azure" ? "Endpoint" : "API Key"}
+							{editingProvider === "ollama" || editingProvider === "azure"
+								? "Endpoint"
+								: "API Key"}
 						</DialogTitle>
 						<DialogDescription>
 							{editingProvider === "ollama"
 								? `Enter your ${editingProviderData?.name} base URL. It will be saved to your instance config.`
 								: editingProvider === "azure"
 									? "Enter your Azure OpenAI configuration. API key, base URL, API version, and deployment name are required."
-								: editingProvider === "openai"
-									? "Enter an OpenAI API key. The model below will be applied to routing."
-								: `Enter your ${editingProviderData?.name} API key. It will be saved to your instance config.`}
+									: editingProvider === "openai"
+										? "Enter an OpenAI API key. The model below will be applied to routing."
+										: `Enter your ${editingProviderData?.name} API key. It will be saved to your instance config.`}
 						</DialogDescription>
 					</DialogHeader>
 					{editingProvider === "azure" ? (
@@ -899,7 +781,9 @@ export function Settings() {
 								</p>
 							</div>
 							<div className="space-y-1.5 mt-3">
-								<label className="text-sm font-medium text-ink">API Version</label>
+								<label className="text-sm font-medium text-ink">
+									API Version
+								</label>
 								<Input
 									type="text"
 									value={azureApiVersion}
@@ -917,7 +801,9 @@ export function Settings() {
 								</p>
 							</div>
 							<div className="space-y-1.5 mt-3">
-								<label className="text-sm font-medium text-ink">Deployment Name</label>
+								<label className="text-sm font-medium text-ink">
+									Deployment Name
+								</label>
 								<Input
 									type="text"
 									value={azureDeployment}
@@ -940,7 +826,7 @@ export function Settings() {
 									type="text"
 									value={`azure/${azureDeployment || "deployment"}`}
 									disabled
-									className="bg-app-darkBox/50"
+									className="bg-app-dark-box/50"
 								/>
 								<p className="text-tiny text-ink-faint">
 									Model is auto-generated from deployment name
@@ -977,10 +863,16 @@ export function Settings() {
 					<div className="flex items-center gap-2 mt-3">
 						<Button
 							onClick={handleTestModel}
-							disabled={!editingProvider || !modelInput.trim() || (editingProvider === "azure" && (!azureBaseUrl.trim() || !azureApiVersion.trim() || !azureDeployment.trim()))}
-							loading={testModelMutation.isPending}
+							disabled={
+								!editingProvider ||
+								!modelInput.trim() ||
+								(editingProvider === "azure" &&
+									(!azureBaseUrl.trim() ||
+										!azureApiVersion.trim() ||
+										!azureDeployment.trim()))
+							}
 							variant="outline"
-							size="sm"
+							size="md"
 						>
 							Test model
 						</Button>
@@ -990,23 +882,27 @@ export function Settings() {
 					</div>
 					{testResult && (
 						<div
-							className={`rounded-md border px-3 py-2 text-sm ${testResult.success
+							className={`rounded-md border px-3 py-2 text-sm ${
+								testResult.success
 									? "border-green-500/20 bg-green-500/10 text-green-400"
 									: "border-red-500/20 bg-red-500/10 text-red-400"
-								}`}
+							}`}
 						>
 							<div>{testResult.message}</div>
 							{testResult.success && testResult.sample ? (
-								<div className="mt-1 text-xs text-ink-dull">Sample: {testResult.sample}</div>
+								<div className="mt-1 text-xs text-ink-dull">
+									Sample: {testResult.sample}
+								</div>
 							) : null}
 						</div>
 					)}
 					{message && (
 						<div
-							className={`rounded-md border px-3 py-2 text-sm ${message.type === "success"
+							className={`rounded-md border px-3 py-2 text-sm ${
+								message.type === "success"
 									? "border-green-500/20 bg-green-500/10 text-green-400"
 									: "border-red-500/20 bg-red-500/10 text-red-400"
-								}`}
+							}`}
 						>
 							{message.text}
 						</div>
@@ -1016,36 +912,44 @@ export function Settings() {
 							<>
 								{isConfigured(editingProvider ?? "") && (
 									<Button
-										onClick={() => removeMutation.mutate(editingProvider, { onSuccess: (result) => { if (result.success) handleClose(); } })}
-										loading={removeMutation.isPending}
-										variant="destructive"
-										size="sm"
+										onClick={() =>
+											removeMutation.mutate(editingProvider, {
+												onSuccess: (result) => {
+													if (result.success) handleClose();
+												},
+											})
+										}
+										variant="accent"
+										size="md"
 									>
 										Remove
 									</Button>
 								)}
-								<Button onClick={handleClose} variant="ghost" size="sm">
+								<Button onClick={handleClose} variant="outline" size="md">
 									Cancel
 								</Button>
-							<Button
-								onClick={handleSave}
-								disabled={!keyInput.trim() || !azureBaseUrl.trim() || !azureApiVersion.trim() || !azureDeployment.trim()}
-								loading={updateMutation.isPending}
-								size="sm"
-							>
-								Save
-							</Button>
+								<Button
+									onClick={handleSave}
+									disabled={
+										!keyInput.trim() ||
+										!azureBaseUrl.trim() ||
+										!azureApiVersion.trim() ||
+										!azureDeployment.trim()
+									}
+									size="md"
+								>
+									Save
+								</Button>
 							</>
 						) : (
 							<>
-								<Button onClick={handleClose} variant="ghost" size="sm">
+								<Button onClick={handleClose} variant="outline" size="md">
 									Cancel
 								</Button>
 								<Button
 									onClick={handleSave}
 									disabled={!modelInput.trim()}
-									loading={updateMutation.isPending}
-									size="sm"
+									size="md"
 								>
 									Save
 								</Button>
@@ -1053,2228 +957,7 @@ export function Settings() {
 						)}
 					</DialogFooter>
 				</DialogContent>
-			</Dialog>
-		</div>
-	);
-}
-
-function AppearanceSection() {
-	const { theme, setTheme } = useTheme();
-
-	return (
-		<div className="mx-auto max-w-2xl px-6 py-6">
-			<div className="mb-6">
-				<h2 className="font-plex text-sm font-semibold text-ink">Theme</h2>
-				<p className="mt-1 text-sm text-ink-dull">
-					Choose a theme for the dashboard interface.
-				</p>
-			</div>
-
-			<div className="grid grid-cols-2 gap-3">
-				{THEMES.map((t) => (
-					<button
-						key={t.id}
-						onClick={() => setTheme(t.id)}
-						className={`group relative flex flex-col items-start rounded-lg border p-4 text-left transition-colors ${
-							theme === t.id
-								? "border-accent bg-accent/10"
-								: "border-app-line bg-app-box hover:border-app-line/80 hover:bg-app-hover"
-						}`}
-					>
-						<div className="flex w-full items-center justify-between">
-							<span className="text-sm font-medium text-ink">{t.name}</span>
-							{theme === t.id && (
-								<span className="h-2 w-2 rounded-full bg-accent" />
-							)}
-						</div>
-						<p className="mt-1 text-sm text-ink-dull">{t.description}</p>
-						<ThemePreview themeId={t.id} />
-					</button>
-				))}
-			</div>
-		</div>
-	);
-}
-
-function ThemePreview({ themeId }: { themeId: ThemeId }) {
-	const colors = {
-		default: { bg: "#0d0d0f", sidebar: "#0a0a0b", accent: "#a855f7" },
-		vanilla: { bg: "#ffffff", sidebar: "#f5f5f6", accent: "#3b82f6" },
-		midnight: { bg: "#14162b", sidebar: "#0c0e1a", accent: "#3b82f6" },
-		noir: { bg: "#080808", sidebar: "#000000", accent: "#3b82f6" },
-	};
-	const c = colors[themeId];
-
-	return (
-		<div
-			className="mt-3 flex h-12 w-full overflow-hidden rounded border border-app-line/50"
-			style={{ backgroundColor: c.bg }}
-		>
-			<div className="w-8 border-r" style={{ backgroundColor: c.sidebar, borderColor: c.accent + "30" }} />
-			<div className="flex flex-1 flex-col gap-1 p-1.5">
-				<div className="h-1.5 w-12 rounded-sm" style={{ backgroundColor: c.accent }} />
-				<div className="h-1 w-16 rounded-sm opacity-30" style={{ backgroundColor: c.accent }} />
-				<div className="h-1 w-10 rounded-sm opacity-20" style={{ backgroundColor: c.accent }} />
-			</div>
-		</div>
-	);
-}
-
-type Platform = "discord" | "slack" | "telegram" | "twitch" | "email" | "webhook" | "mattermost" | "signal";
-
-function ChannelsSection() {
-	const [expandedKey, setExpandedKey] = useState<string | null>(null);
-	const [addingPlatform, setAddingPlatform] = useState<Platform | null>(null);
-
-	const { data: messagingStatus, isLoading } = useQuery({
-		queryKey: ["messaging-status"],
-		queryFn: api.messagingStatus,
-		staleTime: 5_000,
-	});
-
-	const instances = messagingStatus?.instances ?? [];
-
-	// Determine whether to show default or named add form
-	function handleAddInstance(platform: Platform) {
-		setAddingPlatform(platform);
-	}
-
-	function isDefaultAdd(): boolean {
-		if (!addingPlatform) return true;
-		return !instances.some(
-			(inst) => inst.platform === addingPlatform && inst.name === null,
-		);
-	}
-
-	return (
-		<div className="mx-auto max-w-3xl px-6 py-6">
-			<div className="mb-6">
-				<h2 className="font-plex text-sm font-semibold text-ink">Messaging Platforms</h2>
-				<p className="mt-1 text-sm text-ink-dull">
-					Connect messaging platforms and configure how conversations route to agents.
-				</p>
-			</div>
-
-			{isLoading ? (
-				<div className="flex items-center gap-2 text-ink-dull">
-					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
-					Loading channels...
-				</div>
-			) : (
-				<div className="grid grid-cols-[200px_1fr] gap-6">
-					{/* Left column: Platform catalog */}
-					<div className="flex-shrink-0">
-						<PlatformCatalog onAddInstance={handleAddInstance} />
-					</div>
-
-					{/* Right column: Configured instances */}
-					<div className="flex flex-col gap-3 min-w-0">
-						{/* Active add-instance card */}
-						{addingPlatform && (
-							<AddInstanceCard
-								platform={addingPlatform}
-								isDefault={isDefaultAdd()}
-								onCancel={() => setAddingPlatform(null)}
-								onCreated={() => setAddingPlatform(null)}
-							/>
-						)}
-
-						{/* Configured instance cards */}
-						{instances.length > 0 ? (
-							instances.map((instance) => (
-								<InstanceCard
-									key={instance.runtime_key}
-									instance={instance}
-									expanded={expandedKey === instance.runtime_key}
-									onToggleExpand={() =>
-										setExpandedKey(
-											expandedKey === instance.runtime_key ? null : instance.runtime_key,
-										)
-									}
-								/>
-							))
-						) : !addingPlatform ? (
-							<div className="rounded-lg border border-app-line border-dashed bg-app-box/50 p-8 text-center">
-								<p className="text-sm text-ink-dull">
-									No messaging platforms configured yet.
-								</p>
-								<p className="mt-1 text-sm text-ink-faint">
-									Click a platform on the left to get started.
-								</p>
-							</div>
-						) : null}
-					</div>
-				</div>
-			)}
+			</DialogRoot>
 		</div>
 	);
 }
-
-
-
-// ── Secrets Section ──────────────────────────────────────────────────────
-
-function SecretsSection() {
-	const queryClient = useQueryClient();
-
-	// Store status.
-	const { data: storeStatus, isLoading: statusLoading } = useQuery({
-		queryKey: ["secrets-status"],
-		queryFn: () => api.secretsStatus(),
-		staleTime: 5_000,
-	});
-
-	// Secret list.
-	const { data: secretsData, isLoading: secretsLoading } = useQuery({
-		queryKey: ["secrets"],
-		queryFn: () => api.listSecrets(),
-		staleTime: 5_000,
-	});
-
-	const secrets = secretsData?.secrets ?? [];
-	const isLoading = statusLoading || secretsLoading;
-	const state: StoreState = storeStatus?.state ?? "unencrypted";
-	const isLocked = state === "locked";
-	const canMutate = !isLocked;
-
-	// ── UI state ─────────────────────────────────────────────────────────
-	const [addDialogOpen, setAddDialogOpen] = useState(false);
-	const [editingSecret, setEditingSecret] = useState<string | null>(null);
-	const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
-	const [nameInput, setNameInput] = useState("");
-	const [valueInput, setValueInput] = useState("");
-	const [categoryInput, setCategoryInput] = useState<SecretCategory>("tool");
-	const [message, setMessage] = useState<{ text: string; type: "success" | "error" } | null>(null);
-
-	// Encryption flow state.
-	const [encryptDialogOpen, setEncryptDialogOpen] = useState(false);
-	const [masterKeyDisplay, setMasterKeyDisplay] = useState<string | null>(null);
-	const [masterKeyCopied, setMasterKeyCopied] = useState(false);
-	const [unlockKeyInput, setUnlockKeyInput] = useState("");
-	const [rotateDialogOpen, setRotateDialogOpen] = useState(false);
-
-	const [filterCategory, setFilterCategory] = useState<"all" | SecretCategory>("all");
-	const [searchQuery, setSearchQuery] = useState("");
-
-	// ── Mutations ────────────────────────────────────────────────────────
-	const invalidateSecrets = () => {
-		queryClient.invalidateQueries({ queryKey: ["secrets"] });
-		queryClient.invalidateQueries({ queryKey: ["secrets-status"] });
-	};
-
-	const putMutation = useMutation({
-		mutationFn: ({ name, value, category }: { name: string; value: string; category?: SecretCategory }) =>
-			api.putSecret(name, value, category),
-		onSuccess: (result) => {
-			invalidateSecrets();
-			setAddDialogOpen(false);
-			setEditingSecret(null);
-			setNameInput("");
-			setValueInput("");
-			setMessage({
-				text: result.reload_required
-					? `${result.name} saved (${result.category}). Restart required for system secrets to take effect.`
-					: `${result.name} saved (${result.category}).`,
-				type: "success",
-			});
-		},
-		onError: (error) => {
-			setMessage({ text: `Failed: ${error.message}`, type: "error" });
-		},
-	});
-
-	const deleteMutation = useMutation({
-		mutationFn: (name: string) => api.deleteSecret(name),
-		onSuccess: (result) => {
-			invalidateSecrets();
-			setDeleteTarget(null);
-			setMessage({
-				text: result.warning
-					? `Deleted ${result.deleted}. ${result.warning}`
-					: `Deleted ${result.deleted}.`,
-				type: "success",
-			});
-		},
-		onError: (error) => {
-			setMessage({ text: `Failed: ${error.message}`, type: "error" });
-		},
-	});
-
-	const encryptMutation = useMutation({
-		mutationFn: () => api.enableEncryption(),
-		onSuccess: (result) => {
-			invalidateSecrets();
-			setMasterKeyDisplay(result.master_key);
-			setMasterKeyCopied(false);
-		},
-		onError: (error) => {
-			setMessage({ text: `Failed: ${error.message}`, type: "error" });
-			setEncryptDialogOpen(false);
-		},
-	});
-
-	const unlockMutation = useMutation({
-		mutationFn: (key: string) => api.unlockSecrets(key),
-		onSuccess: () => {
-			invalidateSecrets();
-			setUnlockKeyInput("");
-			setMessage({ text: "Secret store unlocked.", type: "success" });
-		},
-		onError: (error) => {
-			setMessage({ text: `Unlock failed: ${error.message}`, type: "error" });
-		},
-	});
-
-	const lockMutation = useMutation({
-		mutationFn: () => api.lockSecrets(),
-		onSuccess: () => {
-			invalidateSecrets();
-			setMessage({ text: "Secret store locked.", type: "success" });
-		},
-		onError: (error) => {
-			setMessage({ text: `Failed: ${error.message}`, type: "error" });
-		},
-	});
-
-	const rotateMutation = useMutation({
-		mutationFn: () => api.rotateKey(),
-		onSuccess: (result) => {
-			invalidateSecrets();
-			setRotateDialogOpen(false);
-			setMasterKeyDisplay(result.master_key);
-			setMasterKeyCopied(false);
-			setEncryptDialogOpen(true);
-		},
-		onError: (error) => {
-			setMessage({ text: `Failed: ${error.message}`, type: "error" });
-			setRotateDialogOpen(false);
-		},
-	});
-
-	const migrateMutation = useMutation({
-		mutationFn: () => api.migrateSecrets(),
-		onSuccess: (result) => {
-			invalidateSecrets();
-			setMessage({
-				text: result.migrated.length > 0
-					? `Migrated ${result.migrated.length} secrets from config.toml.`
-					: result.message,
-				type: result.migrated.length > 0 ? "success" : "success",
-			});
-		},
-		onError: (error) => {
-			setMessage({ text: `Migration failed: ${error.message}`, type: "error" });
-		},
-	});
-
-	// ── Handlers ─────────────────────────────────────────────────────────
-	const handleOpenAdd = () => {
-		setNameInput("");
-		setValueInput("");
-		setCategoryInput("tool");
-		setMessage(null);
-		setAddDialogOpen(true);
-	};
-
-	const handleOpenEdit = (secret: SecretListItem) => {
-		setEditingSecret(secret.name);
-		setNameInput(secret.name);
-		setValueInput("");
-		setCategoryInput(secret.category);
-		setMessage(null);
-	};
-
-	const handleSave = () => {
-		const name = editingSecret ?? nameInput.trim().toUpperCase();
-		if (!name || !valueInput) return;
-		putMutation.mutate({ name, value: valueInput, category: categoryInput });
-	};
-
-	const handleCopyKey = async () => {
-		if (!masterKeyDisplay) return;
-		try {
-			await navigator.clipboard.writeText(masterKeyDisplay);
-			setMasterKeyCopied(true);
-		} catch {
-			// Fallback
-			const textarea = document.createElement("textarea");
-			textarea.value = masterKeyDisplay;
-			textarea.setAttribute("readonly", "");
-			textarea.style.position = "absolute";
-			textarea.style.left = "-9999px";
-			document.body.appendChild(textarea);
-			textarea.select();
-			document.execCommand("copy");
-			document.body.removeChild(textarea);
-			setMasterKeyCopied(true);
-		}
-	};
-
-	const filteredSecrets = secrets.filter((secret) => {
-		if (filterCategory !== "all" && secret.category !== filterCategory) return false;
-		if (searchQuery && !secret.name.toLowerCase().includes(searchQuery.toLowerCase())) return false;
-		return true;
-	});
-
-	return (
-		<div className="mx-auto max-w-2xl px-6 py-6">
-			{/* Header */}
-			<div className="mb-6">
-				<h2 className="font-plex text-sm font-semibold text-ink">Secrets</h2>
-				<p className="mt-1 text-sm text-ink-dull">
-					Manage credentials for LLM providers (system) and CLI tools used by workers (tool).
-					System secrets are never exposed to worker subprocesses. Tool secrets are injected as
-					environment variables.
-				</p>
-			</div>
-
-			{/* Status bar */}
-			{storeStatus && (
-				<div className="mb-4 flex items-center gap-3 rounded-md border border-app-line bg-app-darkBox/20 px-4 py-3">
-					<div className="flex items-center gap-2">
-						<div className={`h-2 w-2 rounded-full ${
-							state === "unlocked" ? "bg-green-500"
-								: state === "locked" ? "bg-red-500"
-									: "bg-amber-500"
-						}`} />
-						<span className="text-sm font-medium text-ink">
-							{state === "unlocked" ? "Encrypted & Unlocked"
-								: state === "locked" ? "Encrypted & Locked"
-									: "Unencrypted"}
-						</span>
-					</div>
-					<div className="flex-1" />
-					<span className="text-tiny text-ink-faint">
-						{storeStatus.secret_count} secrets ({storeStatus.system_count} system, {storeStatus.tool_count} tool)
-					</span>
-				</div>
-			)}
-
-			{/* Encryption banner (unencrypted stores) */}
-			{state === "unencrypted" && !storeStatus?.platform_managed && (
-				<div className="mb-4 rounded-md border border-amber-500/20 bg-amber-500/5 px-4 py-3">
-					<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-						<div className="sm:pr-4">
-							<p className="text-sm font-medium text-amber-400">Encryption not enabled</p>
-							<p className="mt-0.5 text-sm text-ink-faint">
-								Secrets are stored without encryption. Enable encryption for protection
-								against volume compromise.
-							</p>
-						</div>
-						<Button
-							onClick={() => { setEncryptDialogOpen(true); setMasterKeyDisplay(null); }}
-							variant="outline"
-							className="w-full shrink-0 whitespace-nowrap sm:w-auto"
-						>
-							Enable Encryption
-						</Button>
-					</div>
-				</div>
-			)}
-
-			{/* Unlock prompt (locked stores) */}
-			{isLocked && (
-				<div className="mb-4 rounded-md border border-red-500/20 bg-red-500/5 px-4 py-3">
-					<p className="text-sm font-medium text-red-400">Secrets are locked</p>
-					<p className="mt-0.5 text-sm text-ink-faint">
-						Enter your master key to unlock encrypted secrets. You can view secret names
-						but cannot add, edit, or read values while locked.
-					</p>
-					<div className="mt-3 flex items-center gap-2">
-						<Input
-							type="password"
-							value={unlockKeyInput}
-							onChange={(e) => setUnlockKeyInput(e.target.value)}
-							placeholder="Paste master key (hex)"
-							className="max-w-sm font-mono text-tiny"
-							onKeyDown={(e) => { if (e.key === "Enter" && unlockKeyInput.trim()) unlockMutation.mutate(unlockKeyInput.trim()); }}
-						/>
-						<Button
-							onClick={() => unlockMutation.mutate(unlockKeyInput.trim())}
-							disabled={!unlockKeyInput.trim()}
-							loading={unlockMutation.isPending}
-							size="sm"
-						>
-							Unlock
-						</Button>
-					</div>
-				</div>
-			)}
-
-			{/* Feedback message */}
-			{message && (
-				<div className={`mb-4 rounded-md border px-3 py-2 text-sm ${
-					message.type === "success"
-						? "border-green-500/20 bg-green-500/10 text-green-400"
-						: "border-red-500/20 bg-red-500/10 text-red-400"
-				}`}>
-					{message.text}
-				</div>
-			)}
-
-			{/* Toolbar */}
-			<div className="mb-3 flex items-center gap-2">
-				<Input
-					value={searchQuery}
-					onChange={(e) => setSearchQuery(e.target.value)}
-					placeholder="Filter secrets..."
-					className="max-w-xs"
-				/>
-				<div className="flex gap-1">
-					{(["all", "system", "tool"] as const).map((cat) => (
-						<button
-							key={cat}
-							onClick={() => setFilterCategory(cat)}
-							className={`rounded-full px-2.5 py-1 text-tiny font-medium transition-colors ${
-								filterCategory === cat
-									? "bg-accent/15 text-accent"
-									: "text-ink-faint hover:text-ink-dull"
-							}`}
-						>
-							{cat === "all" ? "All" : cat.charAt(0).toUpperCase() + cat.slice(1)}
-						</button>
-					))}
-				</div>
-				<div className="flex-1" />
-				{canMutate && (
-					<Button onClick={handleOpenAdd} size="sm">
-						Add secret
-					</Button>
-				)}
-			</div>
-
-			{/* Secret list */}
-			{isLoading ? (
-				<div className="flex items-center gap-2 text-ink-dull">
-					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
-					Loading secrets...
-				</div>
-			) : filteredSecrets.length === 0 ? (
-				<div className="flex flex-col items-center rounded-lg border border-dashed border-app-line py-12">
-					<p className="text-sm font-medium text-ink-dull">
-						{secrets.length === 0 ? "No secrets yet" : "No matching secrets"}
-					</p>
-					<p className="mt-1 text-sm text-ink-faint">
-						{secrets.length === 0
-							? "Add credentials for LLM providers or CLI tools."
-							: "Try a different filter."}
-					</p>
-					{secrets.length === 0 && canMutate && (
-						<div className="mt-4 flex gap-2">
-							<Button onClick={handleOpenAdd} size="sm">
-								Add secret
-							</Button>
-							<Button onClick={() => migrateMutation.mutate()} variant="outline" size="sm" loading={migrateMutation.isPending}>
-								Migrate from config
-							</Button>
-						</div>
-					)}
-				</div>
-			) : (
-				<div className="flex flex-col gap-1.5">
-					{filteredSecrets.map((secret) => (
-						<div
-							key={secret.name}
-							className="group flex items-center rounded-lg border border-app-line bg-app-box px-4 py-3"
-						>
-							<div className="flex-1 min-w-0">
-								<div className="flex items-center gap-2">
-									<code className="text-sm font-medium text-ink">{secret.name}</code>
-									<Badge
-										variant="outline"
-										size="sm"
-										className="pointer-events-none transition-none"
-									>
-										{secret.category}
-									</Badge>
-								</div>
-								<p className="mt-0.5 text-tiny text-ink-faint">
-									Updated {new Date(secret.updated_at).toLocaleDateString()}
-								</p>
-							</div>
-							{canMutate && (
-								<div className="flex gap-1.5 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto">
-									<Button onClick={() => handleOpenEdit(secret)} variant="outline" size="sm">
-										Update
-									</Button>
-									<Button onClick={() => setDeleteTarget(secret.name)} variant="outline" size="sm">
-										Delete
-									</Button>
-								</div>
-							)}
-						</div>
-					))}
-				</div>
-			)}
-
-			{/* Bottom actions for encrypted stores */}
-			{storeStatus?.encrypted && !storeStatus.platform_managed && canMutate && (
-				<div className="mt-6 flex items-center gap-2 border-t border-app-line pt-4">
-					<Button onClick={() => lockMutation.mutate()} variant="outline" size="sm" loading={lockMutation.isPending}>
-						Lock store
-					</Button>
-					<Button onClick={() => setRotateDialogOpen(true)} variant="outline" size="sm">
-						Rotate master key
-					</Button>
-					<div className="flex-1" />
-					<Button onClick={() => migrateMutation.mutate()} variant="outline" size="sm" loading={migrateMutation.isPending}>
-						Migrate from config
-					</Button>
-				</div>
-			)}
-
-			{/* Migrate button for unencrypted stores */}
-			{state === "unencrypted" && secrets.length > 0 && (
-				<div className="mt-4 flex justify-end">
-					<Button onClick={() => migrateMutation.mutate()} variant="outline" size="sm" loading={migrateMutation.isPending}>
-						Migrate from config
-					</Button>
-				</div>
-			)}
-
-			{/* ── Add / Edit Dialog ─────────────────────────────────────── */}
-			<Dialog
-				open={addDialogOpen || !!editingSecret}
-				onOpenChange={(open) => {
-					if (!open) {
-						setAddDialogOpen(false);
-						setEditingSecret(null);
-						setNameInput("");
-						setValueInput("");
-					}
-				}}
-			>
-				<DialogContent className="max-w-md">
-					<DialogHeader>
-						<DialogTitle>{editingSecret ? "Update Secret" : "Add Secret"}</DialogTitle>
-						<DialogDescription>
-							{editingSecret
-								? `Enter a new value for ${editingSecret}. The existing value will be overwritten.`
-								: "Add a new credential. System secrets are internal (LLM keys, messaging tokens). Tool secrets are exposed to worker subprocesses as environment variables."}
-						</DialogDescription>
-					</DialogHeader>
-
-					{!editingSecret && (
-						<div className="space-y-1.5">
-							<label className="text-sm font-medium text-ink">Name</label>
-							<Input
-								value={nameInput}
-								onChange={(e) => setNameInput(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, ""))}
-								placeholder="GH_TOKEN"
-								className="font-mono"
-								autoFocus
-							/>
-							<p className="text-tiny text-ink-faint">
-								UPPER_SNAKE_CASE. This is also the env var name for tool secrets.
-							</p>
-						</div>
-					)}
-
-					<div className="space-y-1.5">
-						<label className="text-sm font-medium text-ink">Value</label>
-						<Input
-							type="password"
-							value={valueInput}
-							onChange={(e) => setValueInput(e.target.value)}
-							placeholder={editingSecret ? "Enter new value" : "Secret value"}
-							autoFocus={!!editingSecret}
-							onKeyDown={(e) => { if (e.key === "Enter") handleSave(); }}
-						/>
-					</div>
-
-					<div className="space-y-1.5">
-						<label className="text-sm font-medium text-ink">Category</label>
-						<Select
-							value={categoryInput}
-							onValueChange={(value) => setCategoryInput(value as SecretCategory)}
-						>
-							<SelectTrigger>
-								<SelectValue />
-							</SelectTrigger>
-							<SelectContent>
-								<SelectItem value="tool">
-									Tool — exposed to workers as env vars
-								</SelectItem>
-								<SelectItem value="system">
-									System — internal only, never exposed
-								</SelectItem>
-							</SelectContent>
-						</Select>
-						<p className="text-tiny text-ink-faint">
-							{categoryInput === "tool"
-								? "Workers will have access to this credential via environment variable."
-								: "Only the Spacebot process can read this credential. Workers never see it."}
-						</p>
-					</div>
-
-					<DialogFooter>
-						<Button
-							onClick={() => { setAddDialogOpen(false); setEditingSecret(null); }}
-							variant="ghost"
-							size="sm"
-						>
-							Cancel
-						</Button>
-						<Button
-							onClick={handleSave}
-							disabled={(!editingSecret && !nameInput.trim()) || !valueInput}
-							loading={putMutation.isPending}
-							size="sm"
-						>
-							Save
-						</Button>
-					</DialogFooter>
-				</DialogContent>
-			</Dialog>
-
-			{/* ── Delete Confirmation ───────────────────────────────────── */}
-			<Dialog open={!!deleteTarget} onOpenChange={(open) => { if (!open) setDeleteTarget(null); }}>
-				<DialogContent className="max-w-sm">
-					<DialogHeader>
-						<DialogTitle>Delete Secret</DialogTitle>
-						<DialogDescription>
-							Are you sure you want to delete <code className="font-mono text-ink">{deleteTarget}</code>?
-							{" "}If this secret is referenced in config.toml, the reference will fail to resolve.
-						</DialogDescription>
-					</DialogHeader>
-					<DialogFooter>
-						<Button onClick={() => setDeleteTarget(null)} variant="ghost" size="sm">
-							Cancel
-						</Button>
-						<Button
-							onClick={() => { if (deleteTarget) deleteMutation.mutate(deleteTarget); }}
-							loading={deleteMutation.isPending}
-							variant="destructive"
-							size="sm"
-						>
-							Delete
-						</Button>
-					</DialogFooter>
-				</DialogContent>
-			</Dialog>
-
-			{/* ── Enable Encryption / Master Key Display Dialog ─────────── */}
-			<Dialog
-				open={encryptDialogOpen}
-				onOpenChange={(open) => {
-					if (!open) {
-						setEncryptDialogOpen(false);
-						setMasterKeyDisplay(null);
-						setMasterKeyCopied(false);
-					}
-				}}
-			>
-				<DialogContent className="max-w-md">
-					{!masterKeyDisplay ? (
-						<>
-							<DialogHeader>
-								<DialogTitle>Enable Encryption</DialogTitle>
-								<DialogDescription>
-									This will generate a master key and encrypt all secrets at rest using
-									AES-256-GCM. On Linux, you will need the master key to unlock secrets
-									after a reboot.
-								</DialogDescription>
-							</DialogHeader>
-							<DialogFooter>
-								<Button
-									onClick={() => setEncryptDialogOpen(false)}
-									variant="ghost"
-									size="sm"
-								>
-									Cancel
-								</Button>
-								<Button
-									onClick={() => encryptMutation.mutate()}
-									loading={encryptMutation.isPending}
-									size="sm"
-								>
-									Enable encryption
-								</Button>
-							</DialogFooter>
-						</>
-					) : (
-						<>
-							<DialogHeader>
-								<DialogTitle>Master Key Generated</DialogTitle>
-								<DialogDescription>
-									Save this key somewhere safe. On Linux, you will need it to unlock the
-									secret store after a reboot. This is the only time the key will be shown.
-								</DialogDescription>
-							</DialogHeader>
-							<div className="space-y-3">
-								<div className="flex items-center gap-2">
-									<code className="flex-1 rounded border border-app-line bg-app-darkerBox px-3 py-2 font-mono text-tiny text-ink break-all select-all">
-										{masterKeyDisplay}
-									</code>
-									<Button onClick={handleCopyKey} size="sm" variant={masterKeyCopied ? "secondary" : "outline"}>
-										{masterKeyCopied ? "Copied" : "Copy"}
-									</Button>
-								</div>
-								<div className="rounded-md border border-amber-500/20 bg-amber-500/5 px-3 py-2 text-sm text-amber-400">
-									If you lose this key and the OS credential store is cleared (e.g. after
-									a Linux reboot), you will not be able to access your encrypted secrets.
-								</div>
-							</div>
-							<DialogFooter>
-								<Button
-									onClick={() => {
-										setEncryptDialogOpen(false);
-										setMasterKeyDisplay(null);
-										setMasterKeyCopied(false);
-									}}
-									size="sm"
-								>
-									Done
-								</Button>
-							</DialogFooter>
-						</>
-					)}
-				</DialogContent>
-			</Dialog>
-
-			{/* ── Rotate Key Confirmation ───────────────────────────────── */}
-			<Dialog open={rotateDialogOpen} onOpenChange={(open) => { if (!open) setRotateDialogOpen(false); }}>
-				<DialogContent className="max-w-sm">
-					<DialogHeader>
-						<DialogTitle>Rotate Master Key</DialogTitle>
-						<DialogDescription>
-							This will generate a new master key and re-encrypt all secrets. Your current
-							master key will be invalidated. You will need to save the new key.
-						</DialogDescription>
-					</DialogHeader>
-					<DialogFooter>
-						<Button onClick={() => setRotateDialogOpen(false)} variant="ghost" size="sm">
-							Cancel
-						</Button>
-						<Button
-							onClick={() => rotateMutation.mutate()}
-							loading={rotateMutation.isPending}
-							size="sm"
-						>
-							Rotate key
-						</Button>
-					</DialogFooter>
-				</DialogContent>
-			</Dialog>
-		</div>
-	);
-}
-
-interface GlobalSettingsSectionProps {
-	settings: GlobalSettingsResponse | undefined;
-	isLoading: boolean;
-}
-
-function ApiKeysSection({ settings, isLoading }: GlobalSettingsSectionProps) {
-	const queryClient = useQueryClient();
-	const [editingBraveKey, setEditingBraveKey] = useState(false);
-	const [braveKeyInput, setBraveKeyInput] = useState("");
-	const [message, setMessage] = useState<{ text: string; type: "success" | "error" } | null>(null);
-
-	const updateMutation = useMutation({
-		mutationFn: api.updateGlobalSettings,
-		onSuccess: (result) => {
-			if (result.success) {
-				setEditingBraveKey(false);
-				setBraveKeyInput("");
-				setMessage({ text: result.message, type: "success" });
-				queryClient.invalidateQueries({ queryKey: ["global-settings"] });
-			} else {
-				setMessage({ text: result.message, type: "error" });
-			}
-		},
-		onError: (error) => {
-			setMessage({ text: `Failed: ${error.message}`, type: "error" });
-		},
-	});
-
-	const handleSaveBraveKey = () => {
-		updateMutation.mutate({ brave_search_key: braveKeyInput.trim() || null });
-	};
-
-	const handleRemoveBraveKey = () => {
-		updateMutation.mutate({ brave_search_key: null });
-	};
-
-	return (
-		<div className="mx-auto max-w-2xl px-6 py-6">
-			<div className="mb-6">
-				<h2 className="font-plex text-sm font-semibold text-ink">Third-Party API Keys</h2>
-				<p className="mt-1 text-sm text-ink-dull">
-					Configure API keys for third-party services used by workers.
-				</p>
-			</div>
-
-			{isLoading ? (
-				<div className="flex items-center gap-2 text-ink-dull">
-					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
-					Loading settings...
-				</div>
-			) : (
-				<div className="flex flex-col gap-3">
-					<div className="rounded-lg border border-app-line bg-app-box p-4">
-						<div className="flex items-center gap-3">
-							<FontAwesomeIcon icon={faSearch} className="text-ink-faint" />
-							<div className="flex-1">
-								<div className="flex items-center gap-2">
-									<span className="text-sm font-medium text-ink">Brave Search</span>
-									{settings?.brave_search_key && (
-										<span className="text-tiny text-green-400">● Configured</span>
-									)}
-								</div>
-								<p className="mt-0.5 text-sm text-ink-dull">
-									Powers web search capabilities for workers
-								</p>
-							</div>
-							<div className="flex gap-2">
-								<Button
-									onClick={() => {
-										setEditingBraveKey(true);
-										setBraveKeyInput(settings?.brave_search_key || "");
-										setMessage(null);
-									}}
-									variant="outline"
-									size="sm"
-								>
-									{settings?.brave_search_key ? "Update" : "Add key"}
-								</Button>
-								{settings?.brave_search_key && (
-									<Button
-										onClick={handleRemoveBraveKey}
-										variant="outline"
-										size="sm"
-										loading={updateMutation.isPending}
-									>
-										Remove
-									</Button>
-								)}
-							</div>
-						</div>
-					</div>
-				</div>
-			)}
-
-			{message && (
-				<div
-					className={`mt-4 rounded-md border px-3 py-2 text-sm ${message.type === "success"
-							? "border-green-500/20 bg-green-500/10 text-green-400"
-							: "border-red-500/20 bg-red-500/10 text-red-400"
-						}`}
-				>
-					{message.text}
-				</div>
-			)}
-
-			<Dialog open={editingBraveKey} onOpenChange={(open) => { if (!open) setEditingBraveKey(false); }}>
-				<DialogContent className="max-w-md">
-					<DialogHeader>
-						<DialogTitle>{settings?.brave_search_key ? "Update" : "Add"} Brave Search Key</DialogTitle>
-						<DialogDescription>
-							Enter your Brave Search API key. Get one at brave.com/search/api
-						</DialogDescription>
-					</DialogHeader>
-					<Input
-						type="password"
-						value={braveKeyInput}
-						onChange={(e) => setBraveKeyInput(e.target.value)}
-						placeholder="BSA..."
-						autoFocus
-						onKeyDown={(e) => {
-							if (e.key === "Enter") handleSaveBraveKey();
-						}}
-					/>
-					<DialogFooter>
-						<Button onClick={() => setEditingBraveKey(false)} variant="ghost" size="sm">
-							Cancel
-						</Button>
-						<Button
-							onClick={handleSaveBraveKey}
-							disabled={!braveKeyInput.trim()}
-							loading={updateMutation.isPending}
-							size="sm"
-						>
-							Save
-						</Button>
-					</DialogFooter>
-				</DialogContent>
-			</Dialog>
-		</div>
-	);
-}
-
-function ServerSection({ settings, isLoading }: GlobalSettingsSectionProps) {
-	const queryClient = useQueryClient();
-	const [apiEnabled, setApiEnabled] = useState(settings?.api_enabled ?? true);
-	const [apiPort, setApiPort] = useState(settings?.api_port.toString() ?? "19898");
-	const [apiBind, setApiBind] = useState(settings?.api_bind ?? "127.0.0.1");
-	const [message, setMessage] = useState<{ text: string; type: "success" | "error"; requiresRestart?: boolean } | null>(null);
-
-	// Update form state when settings load
-	useEffect(() => {
-		if (settings) {
-			setApiEnabled(settings.api_enabled);
-			setApiPort(settings.api_port.toString());
-			setApiBind(settings.api_bind);
-		}
-	}, [settings]);
-
-	const updateMutation = useMutation({
-		mutationFn: api.updateGlobalSettings,
-		onSuccess: (result) => {
-			if (result.success) {
-				setMessage({ text: result.message, type: "success", requiresRestart: result.requires_restart });
-				queryClient.invalidateQueries({ queryKey: ["global-settings"] });
-			} else {
-				setMessage({ text: result.message, type: "error" });
-			}
-		},
-		onError: (error) => {
-			setMessage({ text: `Failed: ${error.message}`, type: "error" });
-		},
-	});
-
-	const handleSave = () => {
-		const port = parseInt(apiPort, 10);
-		if (isNaN(port) || port < 1024 || port > 65535) {
-			setMessage({ text: "Port must be between 1024 and 65535", type: "error" });
-			return;
-		}
-
-		updateMutation.mutate({
-			api_enabled: apiEnabled,
-			api_port: port,
-			api_bind: apiBind.trim(),
-		});
-	};
-
-	return (
-		<div className="mx-auto max-w-2xl px-6 py-6">
-			<div className="mb-6">
-				<h2 className="font-plex text-sm font-semibold text-ink">API Server Configuration</h2>
-				<p className="mt-1 text-sm text-ink-dull">
-					Configure the HTTP API server. Changes require a restart to take effect.
-				</p>
-			</div>
-
-			{isLoading ? (
-				<div className="flex items-center gap-2 text-ink-dull">
-					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
-					Loading settings...
-				</div>
-			) : (
-				<div className="flex flex-col gap-4">
-					<div className="rounded-lg border border-app-line bg-app-box p-4">
-						<div className="flex items-center justify-between">
-							<div>
-								<span className="text-sm font-medium text-ink">Enable API Server</span>
-								<p className="mt-0.5 text-sm text-ink-dull">
-									Disable to prevent the HTTP API from starting
-								</p>
-							</div>
-							<Toggle
-								size="sm"
-								checked={apiEnabled}
-								onCheckedChange={setApiEnabled}
-							/>
-						</div>
-					</div>
-
-					<div className="rounded-lg border border-app-line bg-app-box p-4">
-						<label className="block">
-							<span className="text-sm font-medium text-ink">Port</span>
-							<p className="mt-0.5 text-sm text-ink-dull">Port number for the API server</p>
-							<Input
-								type="number"
-								value={apiPort}
-								onChange={(e) => setApiPort(e.target.value)}
-								min="1024"
-								max="65535"
-								className="mt-2"
-							/>
-						</label>
-					</div>
-
-					<div className="rounded-lg border border-app-line bg-app-box p-4">
-						<label className="block">
-							<span className="text-sm font-medium text-ink">Bind Address</span>
-							<p className="mt-0.5 text-sm text-ink-dull">
-								IP address to bind to (127.0.0.1 for local, 0.0.0.0 for all interfaces)
-							</p>
-							<Input
-								type="text"
-								value={apiBind}
-								onChange={(e) => setApiBind(e.target.value)}
-								placeholder="127.0.0.1"
-								className="mt-2"
-							/>
-						</label>
-					</div>
-
-					<Button onClick={handleSave} loading={updateMutation.isPending}>
-						Save Changes
-					</Button>
-				</div>
-			)}
-
-			{message && (
-				<div
-					className={`mt-4 rounded-md border px-3 py-2 text-sm ${message.type === "success"
-							? "border-green-500/20 bg-green-500/10 text-green-400"
-							: "border-red-500/20 bg-red-500/10 text-red-400"
-						}`}
-				>
-					{message.text}
-					{message.requiresRestart && (
-						<div className="mt-1 text-yellow-400">
-							⚠️ Restart required for changes to take effect
-						</div>
-					)}
-				</div>
-			)}
-		</div>
-	);
-}
-
-function WorkerLogsSection({ settings, isLoading }: GlobalSettingsSectionProps) {
-	const queryClient = useQueryClient();
-	const [logMode, setLogMode] = useState(settings?.worker_log_mode ?? "errors_only");
-	const [message, setMessage] = useState<{ text: string; type: "success" | "error" } | null>(null);
-
-	// Update form state when settings load
-	useEffect(() => {
-		if (settings) {
-			setLogMode(settings.worker_log_mode);
-		}
-	}, [settings]);
-
-	const updateMutation = useMutation({
-		mutationFn: api.updateGlobalSettings,
-		onSuccess: (result) => {
-			if (result.success) {
-				setMessage({ text: result.message, type: "success" });
-				queryClient.invalidateQueries({ queryKey: ["global-settings"] });
-			} else {
-				setMessage({ text: result.message, type: "error" });
-			}
-		},
-		onError: (error) => {
-			setMessage({ text: `Failed: ${error.message}`, type: "error" });
-		},
-	});
-
-	const handleSave = () => {
-		updateMutation.mutate({ worker_log_mode: logMode });
-	};
-
-	const modes = [
-		{
-			value: "errors_only",
-			label: "Errors Only",
-			description: "Only log failed worker runs (saves disk space)",
-		},
-		{
-			value: "all_separate",
-			label: "All (Separate)",
-			description: "Log all runs with separate directories for success/failure",
-		},
-		{
-			value: "all_combined",
-			label: "All (Combined)",
-			description: "Log all runs to the same directory",
-		},
-	];
-
-	return (
-		<div className="mx-auto max-w-2xl px-6 py-6">
-			<div className="mb-6">
-				<h2 className="font-plex text-sm font-semibold text-ink">Worker Execution Logs</h2>
-				<p className="mt-1 text-sm text-ink-dull">
-					Control how worker execution logs are stored in the logs directory.
-				</p>
-			</div>
-
-			{isLoading ? (
-				<div className="flex items-center gap-2 text-ink-dull">
-					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
-					Loading settings...
-				</div>
-			) : (
-				<div className="flex flex-col gap-4">
-					<div className="flex flex-col gap-3">
-						{modes.map((mode) => (
-							<div
-								key={mode.value}
-								className={`rounded-lg border p-4 cursor-pointer transition-colors ${logMode === mode.value
-										? "border-accent bg-accent/5"
-										: "border-app-line bg-app-box hover:border-app-line/80"
-									}`}
-								onClick={() => setLogMode(mode.value)}
-							>
-								<label className="flex items-start gap-3 cursor-pointer">
-									<input
-										type="radio"
-										value={mode.value}
-										checked={logMode === mode.value}
-										onChange={(e) => setLogMode(e.target.value)}
-										className="mt-0.5"
-									/>
-									<div className="flex-1">
-										<span className="text-sm font-medium text-ink">{mode.label}</span>
-										<p className="mt-0.5 text-sm text-ink-dull">{mode.description}</p>
-									</div>
-								</label>
-							</div>
-						))}
-					</div>
-
-					<Button onClick={handleSave} loading={updateMutation.isPending}>
-						Save Changes
-					</Button>
-				</div>
-			)}
-
-			{message && (
-				<div
-					className={`mt-4 rounded-md border px-3 py-2 text-sm ${message.type === "success"
-							? "border-green-500/20 bg-green-500/10 text-green-400"
-							: "border-red-500/20 bg-red-500/10 text-red-400"
-						}`}
-				>
-					{message.text}
-				</div>
-			)}
-		</div>
-	);
-}
-
-const PERMISSION_OPTIONS = [
-	{ value: "allow", label: "Allow", description: "Tool can run without restriction" },
-	{ value: "deny", label: "Deny", description: "Tool is completely disabled" },
-];
-
-function OpenCodeSection({ settings, isLoading }: GlobalSettingsSectionProps) {
-	const queryClient = useQueryClient();
-	const [enabled, setEnabled] = useState(settings?.opencode?.enabled ?? false);
-	const [path, setPath] = useState(settings?.opencode?.path ?? "opencode");
-	const [maxServers, setMaxServers] = useState(settings?.opencode?.max_servers?.toString() ?? "5");
-	const [startupTimeout, setStartupTimeout] = useState(settings?.opencode?.server_startup_timeout_secs?.toString() ?? "30");
-	const [maxRetries, setMaxRetries] = useState(settings?.opencode?.max_restart_retries?.toString() ?? "5");
-	const [editPerm, setEditPerm] = useState(settings?.opencode?.permissions?.edit ?? "allow");
-	const [bashPerm, setBashPerm] = useState(settings?.opencode?.permissions?.bash ?? "allow");
-	const [webfetchPerm, setWebfetchPerm] = useState(settings?.opencode?.permissions?.webfetch ?? "allow");
-	const [message, setMessage] = useState<{ text: string; type: "success" | "error" } | null>(null);
-
-	useEffect(() => {
-		if (settings?.opencode) {
-			setEnabled(settings.opencode.enabled);
-			setPath(settings.opencode.path);
-			setMaxServers(settings.opencode.max_servers.toString());
-			setStartupTimeout(settings.opencode.server_startup_timeout_secs.toString());
-			setMaxRetries(settings.opencode.max_restart_retries.toString());
-			setEditPerm(settings.opencode.permissions.edit);
-			setBashPerm(settings.opencode.permissions.bash);
-			setWebfetchPerm(settings.opencode.permissions.webfetch);
-		}
-	}, [settings?.opencode]);
-
-	const updateMutation = useMutation({
-		mutationFn: api.updateGlobalSettings,
-		onSuccess: (result) => {
-			if (result.success) {
-				setMessage({ text: result.message, type: "success" });
-				queryClient.invalidateQueries({ queryKey: ["global-settings"] });
-			} else {
-				setMessage({ text: result.message, type: "error" });
-			}
-		},
-		onError: (error) => {
-			setMessage({ text: `Failed: ${error.message}`, type: "error" });
-		},
-	});
-
-	const handleSave = () => {
-		const servers = parseInt(maxServers, 10);
-		if (isNaN(servers) || servers < 1) {
-			setMessage({ text: "Max servers must be at least 1", type: "error" });
-			return;
-		}
-		const timeout = parseInt(startupTimeout, 10);
-		if (isNaN(timeout) || timeout < 1) {
-			setMessage({ text: "Startup timeout must be at least 1", type: "error" });
-			return;
-		}
-		const retries = parseInt(maxRetries, 10);
-		if (isNaN(retries) || retries < 0) {
-			setMessage({ text: "Max retries cannot be negative", type: "error" });
-			return;
-		}
-
-		updateMutation.mutate({
-			opencode: {
-				enabled,
-				path: path.trim() || "opencode",
-				max_servers: servers,
-				server_startup_timeout_secs: timeout,
-				max_restart_retries: retries,
-				permissions: {
-					edit: editPerm,
-					bash: bashPerm,
-					webfetch: webfetchPerm,
-				},
-			},
-		});
-	};
-
-	return (
-		<div className="mx-auto max-w-2xl px-6 py-6">
-			<div className="mb-6">
-				<h2 className="font-plex text-sm font-semibold text-ink">OpenCode Workers</h2>
-				<p className="mt-1 text-sm text-ink-dull">
-					Spawn <a href="https://opencode.ai" target="_blank" rel="noopener noreferrer" className="text-accent hover:underline">OpenCode</a> coding agents as worker subprocesses. Requires the <code className="rounded bg-app-box px-1 py-0.5 text-tiny text-ink-dull">opencode</code> binary on PATH or a custom path below.
-				</p>
-			</div>
-
-			{isLoading ? (
-				<div className="flex items-center gap-2 text-ink-dull">
-					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
-					Loading settings...
-				</div>
-			) : (
-				<div className="flex flex-col gap-4">
-					{/* Enable toggle */}
-					<div className="rounded-lg border border-app-line bg-app-box p-4">
-						<label className="flex items-center gap-3">
-							<input
-								type="checkbox"
-								checked={enabled}
-								onChange={(e) => setEnabled(e.target.checked)}
-								className="h-4 w-4"
-							/>
-							<div>
-								<span className="text-sm font-medium text-ink">Enable OpenCode Workers</span>
-								<p className="mt-0.5 text-sm text-ink-dull">
-									Allow agents to spawn OpenCode coding sessions
-								</p>
-							</div>
-						</label>
-					</div>
-
-					{enabled && (
-						<>
-							{/* Binary path */}
-							<div className="rounded-lg border border-app-line bg-app-box p-4">
-								<label className="block">
-									<span className="text-sm font-medium text-ink">Binary Path</span>
-									<p className="mt-0.5 text-sm text-ink-dull">
-										Path to the OpenCode binary, or just the name if it's on PATH
-									</p>
-									<Input
-										type="text"
-										value={path}
-										onChange={(e) => setPath(e.target.value)}
-										placeholder="opencode"
-										className="mt-2"
-									/>
-								</label>
-							</div>
-
-							{/* Pool settings */}
-							<div className="rounded-lg border border-app-line bg-app-box p-4">
-								<span className="text-sm font-medium text-ink">Server Pool</span>
-								<p className="mt-0.5 text-sm text-ink-dull">
-									Controls how many OpenCode server processes can run concurrently
-								</p>
-								<div className="mt-3 grid grid-cols-3 gap-3">
-									<label className="block">
-										<span className="text-tiny font-medium text-ink-dull">Max Servers</span>
-										<Input
-											type="number"
-											value={maxServers}
-											onChange={(e) => setMaxServers(e.target.value)}
-											min="1"
-											max="20"
-											className="mt-1"
-										/>
-									</label>
-									<label className="block">
-										<span className="text-tiny font-medium text-ink-dull">Startup Timeout (s)</span>
-										<Input
-											type="number"
-											value={startupTimeout}
-											onChange={(e) => setStartupTimeout(e.target.value)}
-											min="1"
-											className="mt-1"
-										/>
-									</label>
-									<label className="block">
-										<span className="text-tiny font-medium text-ink-dull">Max Retries</span>
-										<Input
-											type="number"
-											value={maxRetries}
-											onChange={(e) => setMaxRetries(e.target.value)}
-											min="0"
-											className="mt-1"
-										/>
-									</label>
-								</div>
-							</div>
-
-							{/* Permissions */}
-							<div className="rounded-lg border border-app-line bg-app-box p-4">
-								<span className="text-sm font-medium text-ink">Permissions</span>
-								<p className="mt-0.5 text-sm text-ink-dull">
-									Control which tools OpenCode workers can use
-								</p>
-								<div className="mt-3 flex flex-col gap-3">
-									{([
-										{ label: "File Edit", value: editPerm, setter: setEditPerm },
-										{ label: "Shell / Bash", value: bashPerm, setter: setBashPerm },
-										{ label: "Web Fetch", value: webfetchPerm, setter: setWebfetchPerm },
-									] as const).map(({ label, value, setter }) => (
-										<div key={label} className="flex items-center justify-between">
-											<span className="text-sm text-ink">{label}</span>
-											<Select value={value} onValueChange={(v) => setter(v)}>
-												<SelectTrigger className="w-28">
-													<SelectValue />
-												</SelectTrigger>
-												<SelectContent>
-													{PERMISSION_OPTIONS.map((opt) => (
-														<SelectItem key={opt.value} value={opt.value}>
-															{opt.label}
-														</SelectItem>
-													))}
-												</SelectContent>
-											</Select>
-										</div>
-									))}
-								</div>
-							</div>
-						</>
-					)}
-
-					<Button onClick={handleSave} loading={updateMutation.isPending}>
-						Save Changes
-					</Button>
-				</div>
-			)}
-
-			{message && (
-				<div
-					className={`mt-4 rounded-md border px-3 py-2 text-sm ${message.type === "success"
-							? "border-green-500/20 bg-green-500/10 text-green-400"
-							: "border-red-500/20 bg-red-500/10 text-red-400"
-						}`}
-				>
-					{message.text}
-				</div>
-			)}
-		</div>
-	);
-}
-
-function formatCheckedAt(checkedAt: string | null): string {
-	if (!checkedAt) return "Never";
-	const timestamp = new Date(checkedAt);
-	if (Number.isNaN(timestamp.getTime())) return checkedAt;
-	return timestamp.toLocaleString();
-}
-
-function pullableDockerImage(image: string | null): string {
-	if (!image) return "ghcr.io/spacedriveapp/spacebot:latest";
-	return image.split("@")[0] ?? image;
-}
-
-function UpdatesSection() {
-	const queryClient = useQueryClient();
-	const [message, setMessage] = useState<{ text: string; type: "success" | "error" } | null>(null);
-	const [copiedBlock, setCopiedBlock] = useState<string | null>(null);
-
-	const { data, isLoading, isFetching } = useQuery<UpdateStatus>({
-		queryKey: ["update-check"],
-		queryFn: api.updateCheck,
-		staleTime: 30_000,
-		refetchInterval: 300_000,
-	});
-
-	const checkNowMutation = useMutation({
-		mutationFn: api.updateCheckNow,
-		onSuccess: (status) => {
-			queryClient.setQueryData(["update-check"], status);
-			if (status.update_available && status.latest_version) {
-				setMessage({
-					text: `Update ${status.latest_version} is available.`,
-					type: "success",
-				});
-			} else {
-				setMessage({ text: "No newer release found.", type: "success" });
-			}
-		},
-		onError: (error) => {
-			setMessage({ text: `Failed to check updates: ${error.message}`, type: "error" });
-		},
-	});
-
-	const applyMutation = useMutation({
-		mutationFn: api.updateApply,
-		onSuccess: (result) => {
-			if (result.status === "updating") {
-				setMessage({
-					text: "Applying update. This instance will restart in a few seconds.",
-					type: "success",
-				});
-				setTimeout(() => {
-					queryClient.invalidateQueries({ queryKey: ["update-check"] });
-				}, 3000);
-				return;
-			}
-
-			setMessage({ text: result.error ?? "Update failed", type: "error" });
-		},
-		onError: (error) => {
-			setMessage({ text: `Failed to apply update: ${error.message}`, type: "error" });
-		},
-	});
-
-	const handleCopy = async (label: string, content: string) => {
-		try {
-			if (navigator.clipboard?.writeText) {
-				await navigator.clipboard.writeText(content);
-			} else {
-				const textarea = document.createElement("textarea");
-				textarea.value = content;
-				textarea.setAttribute("readonly", "");
-				textarea.style.position = "absolute";
-				textarea.style.left = "-9999px";
-				document.body.appendChild(textarea);
-				textarea.select();
-				document.execCommand("copy");
-				document.body.removeChild(textarea);
-			}
-			setCopiedBlock(label);
-			setTimeout(() => setCopiedBlock((current) => (current === label ? null : current)), 1200);
-		} catch (error: any) {
-			setMessage({ text: `Failed to copy commands: ${error.message}`, type: "error" });
-		}
-	};
-
-	const deployment = data?.deployment ?? "native";
-	const deploymentLabel = deployment === "docker"
-		? "Docker"
-		: deployment === "hosted"
-			? "Hosted"
-			: "Native";
-
-	const dockerComposeCommands = [
-		"docker compose pull spacebot",
-		"docker compose up -d --force-recreate spacebot",
-	];
-
-	const dockerRunCommands = [
-		`docker pull ${pullableDockerImage(data?.docker_image ?? null)}`,
-		"docker stop spacebot && docker rm spacebot",
-		"# re-run your docker run command",
-	];
-
-	const nativeCommands = [
-		"git pull",
-		"cargo install --path . --force",
-		"spacebot restart",
-	];
-
-	return (
-		<div className="mx-auto max-w-2xl px-6 py-6">
-			<div className="mb-6">
-				<h2 className="font-plex text-sm font-semibold text-ink">Updates</h2>
-				<p className="mt-1 text-sm text-ink-dull">
-					Check release status, trigger one-click Docker updates, and copy manual update commands.
-				</p>
-			</div>
-
-			{isLoading ? (
-				<div className="flex items-center gap-2 text-ink-dull">
-					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
-					Loading update status...
-				</div>
-			) : (
-				<div className="flex flex-col gap-4">
-					<div className="rounded-lg border border-app-line bg-app-box p-4">
-						<div className="flex items-center justify-between gap-4">
-							<div>
-								<p className="text-sm font-medium text-ink">Release Status</p>
-								<p className="mt-0.5 text-sm text-ink-dull">
-									{data?.update_available
-										? `Update ${data.latest_version ?? ""} is available`
-										: "You're running the latest available release"}
-								</p>
-							</div>
-							<Button
-								onClick={() => {
-									setMessage(null);
-									checkNowMutation.mutate();
-								}}
-								loading={checkNowMutation.isPending || isFetching}
-								size="sm"
-								variant="outline"
-							>
-								Check now
-							</Button>
-						</div>
-
-						<div className="mt-4 grid grid-cols-2 gap-3 text-sm">
-							<div>
-								<p className="text-ink-faint">Deployment</p>
-								<p className="text-ink">{deploymentLabel}</p>
-							</div>
-							<div>
-								<p className="text-ink-faint">Current version</p>
-								<p className="text-ink">{data?.current_version ?? "Unknown"}</p>
-							</div>
-							<div>
-								<p className="text-ink-faint">Latest release</p>
-								<p className="text-ink">{data?.latest_version ?? "Unknown"}</p>
-							</div>
-							<div>
-								<p className="text-ink-faint">Last checked</p>
-								<p className="text-ink">{formatCheckedAt(data?.checked_at ?? null)}</p>
-							</div>
-						</div>
-
-						{data?.docker_image && (
-							<div className="mt-3 rounded border border-app-line/70 bg-app-darkBox/30 px-3 py-2">
-								<p className="text-tiny text-ink-faint">Container image</p>
-								<p className="font-mono text-xs text-ink">{data.docker_image}</p>
-							</div>
-						)}
-
-						{data?.release_url && (
-							<a
-								href={data.release_url}
-								target="_blank"
-								rel="noopener noreferrer"
-								className="mt-3 inline-block text-sm text-accent hover:underline"
-							>
-								View release notes
-							</a>
-						)}
-					</div>
-
-					{deployment === "docker" && (
-						<div className="rounded-lg border border-app-line bg-app-box p-4">
-							<div className="flex items-center justify-between gap-3">
-								<div>
-									<p className="text-sm font-medium text-ink">One-Click Docker Update</p>
-									<p className="mt-0.5 text-sm text-ink-dull">
-										Pull and swap to the latest release image from the web UI.
-									</p>
-								</div>
-								<Button
-									onClick={() => {
-										setMessage(null);
-										applyMutation.mutate();
-									}}
-									disabled={!data?.can_apply || !data?.update_available}
-									loading={applyMutation.isPending}
-									size="sm"
-								>
-									Update now
-								</Button>
-							</div>
-							{!data?.update_available && (
-								<p className="mt-3 text-xs text-ink-faint">No update available yet.</p>
-							)}
-							{!data?.can_apply && data?.cannot_apply_reason && (
-								<p className="mt-3 text-xs text-yellow-300">{data.cannot_apply_reason}</p>
-							)}
-							{data?.can_apply && (
-								<p className="mt-3 text-xs text-ink-faint">
-									Applying an update restarts this instance. The UI should reconnect in 10-30 seconds.
-								</p>
-							)}
-						</div>
-					)}
-
-					<div className="rounded-lg border border-app-line bg-app-box p-4">
-						<p className="text-sm font-medium text-ink">Manual Update Commands</p>
-						<p className="mt-0.5 text-sm text-ink-dull">
-							Use these when one-click update is unavailable or when you prefer manual rollouts.
-						</p>
-
-						{deployment === "docker" && (
-							<div className="mt-3 flex flex-col gap-3">
-								<div className="rounded border border-app-line/70 bg-app-darkBox/30 p-3">
-									<div className="mb-2 flex items-center justify-between">
-										<p className="text-xs font-medium uppercase tracking-wider text-ink-faint">Docker Compose</p>
-										<Button
-											onClick={() => handleCopy("compose", dockerComposeCommands.join("\n"))}
-											variant="ghost"
-											size="sm"
-										>
-											{copiedBlock === "compose" ? "Copied" : "Copy"}
-										</Button>
-									</div>
-									<pre className="overflow-x-auto text-xs text-ink"><code>{dockerComposeCommands.join("\n")}</code></pre>
-								</div>
-								<div className="rounded border border-app-line/70 bg-app-darkBox/30 p-3">
-									<div className="mb-2 flex items-center justify-between">
-										<p className="text-xs font-medium uppercase tracking-wider text-ink-faint">docker run</p>
-										<Button
-											onClick={() => handleCopy("docker-run", dockerRunCommands.join("\n"))}
-											variant="ghost"
-											size="sm"
-										>
-											{copiedBlock === "docker-run" ? "Copied" : "Copy"}
-										</Button>
-									</div>
-									<pre className="overflow-x-auto text-xs text-ink"><code>{dockerRunCommands.join("\n")}</code></pre>
-								</div>
-							</div>
-						)}
-
-						{deployment === "native" && (
-							<div className="mt-3 rounded border border-app-line/70 bg-app-darkBox/30 p-3">
-								<div className="mb-2 flex items-center justify-between">
-									<p className="text-xs font-medium uppercase tracking-wider text-ink-faint">Source Install</p>
-									<Button
-										onClick={() => handleCopy("native", nativeCommands.join("\n"))}
-										variant="ghost"
-										size="sm"
-									>
-										{copiedBlock === "native" ? "Copied" : "Copy"}
-									</Button>
-								</div>
-								<pre className="overflow-x-auto text-xs text-ink"><code>{nativeCommands.join("\n")}</code></pre>
-							</div>
-						)}
-
-						{deployment === "hosted" && (
-							<p className="mt-3 text-sm text-ink-dull">
-								Hosted instances are updated through platform rollouts.
-							</p>
-						)}
-					</div>
-
-					{data?.error && (
-						<div className="rounded-md border border-red-500/20 bg-red-500/10 px-3 py-2 text-sm text-red-400">
-							Update check error: {data.error}
-						</div>
-					)}
-				</div>
-			)}
-
-			{message && (
-				<div
-					className={`mt-4 rounded-md border px-3 py-2 text-sm ${message.type === "success"
-							? "border-green-500/20 bg-green-500/10 text-green-400"
-							: "border-red-500/20 bg-red-500/10 text-red-400"
-						}`}
-				>
-					{message.text}
-				</div>
-			)}
-		</div>
-	);
-}
-
-interface ChangelogRelease {
-	version: string;
-	body: string;
-}
-
-function parseChangelog(raw: string): ChangelogRelease[] {
-	const releases: ChangelogRelease[] = [];
-	const versionPattern = /^## (v\d+\.\S+)/;
-	let current: ChangelogRelease | null = null;
-	const lines: string[] = [];
-
-	for (const line of raw.split("\n")) {
-		const match = line.match(versionPattern);
-		if (match) {
-			if (current) {
-				current.body = lines.join("\n").trim();
-				releases.push(current);
-				lines.length = 0;
-			}
-			current = { version: match[1], body: "" };
-			continue;
-		}
-		if (current) lines.push(line);
-	}
-	if (current) {
-		current.body = lines.join("\n").trim();
-		releases.push(current);
-	}
-	return releases;
-}
-
-function ChangelogSection() {
-	const { data: changelog, isLoading } = useQuery<string>({
-		queryKey: ["changelog"],
-		queryFn: api.changelog,
-		staleTime: 60_000 * 60, // 1 hour — changelog is baked into the binary
-	});
-
-	const releases = changelog ? parseChangelog(changelog) : [];
-
-	return (
-		<div className="mx-auto max-w-2xl px-6 py-6">
-			<div className="mb-6">
-				<h2 className="font-plex text-sm font-semibold text-ink">Changelog</h2>
-				<p className="mt-1 text-sm text-ink-dull">
-					Release history for this Spacebot build.
-				</p>
-			</div>
-
-			{isLoading ? (
-				<div className="flex items-center gap-2 text-ink-dull">
-					<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
-					Loading changelog...
-				</div>
-			) : releases.length > 0 ? (
-				<div className="flex flex-col gap-4">
-					{releases.map((release) => (
-						<div
-							key={release.version}
-							className="rounded-lg border border-app-line bg-app-box p-5"
-						>
-							<h3 className="font-plex text-2xl font-bold text-ink mb-3">
-								{release.version}
-							</h3>
-							{release.body && (
-								<Markdown className="text-sm text-ink-dull">{release.body}</Markdown>
-							)}
-						</div>
-					))}
-				</div>
-			) : (
-				<p className="text-sm text-ink-faint">No changelog available.</p>
-			)}
-		</div>
-	);
-}
-
-function ConfigFileSection() {
-	const queryClient = useQueryClient();
-	const editorRef = useRef<HTMLDivElement>(null);
-	const viewRef = useRef<import("@codemirror/view").EditorView | null>(null);
-	const [originalContent, setOriginalContent] = useState("");
-	const [currentContent, setCurrentContent] = useState("");
-	const [validationError, setValidationError] = useState<string | null>(null);
-	const [message, setMessage] = useState<{ text: string; type: "success" | "error" } | null>(null);
-	const [editorLoaded, setEditorLoaded] = useState(false);
-
-	const { data, isLoading } = useQuery({
-		queryKey: ["raw-config"],
-		queryFn: api.rawConfig,
-		staleTime: 5_000,
-	});
-
-	const updateMutation = useMutation({
-		mutationFn: (content: string) => api.updateRawConfig(content),
-		onSuccess: (result) => {
-			if (result.success) {
-				setOriginalContent(currentContent);
-				setMessage({ text: result.message, type: "success" });
-				setValidationError(null);
-				// Invalidate all config-related queries so other tabs pick up changes
-				queryClient.invalidateQueries({ queryKey: ["providers"] });
-				queryClient.invalidateQueries({ queryKey: ["global-settings"] });
-				queryClient.invalidateQueries({ queryKey: ["agents"] });
-				queryClient.invalidateQueries({ queryKey: ["overview"] });
-			} else {
-				setMessage({ text: result.message, type: "error" });
-			}
-		},
-		onError: (error) => {
-			setMessage({ text: `Failed: ${error.message}`, type: "error" });
-		},
-	});
-
-	const isDirty = currentContent !== originalContent;
-
-	// Initialize CodeMirror when data loads
-	useEffect(() => {
-		if (!data?.content || !editorRef.current || editorLoaded) return;
-
-		const content = data.content;
-		setOriginalContent(content);
-		setCurrentContent(content);
-
-		// Lazy-load CodeMirror to avoid SSR issues and keep initial bundle small
-		Promise.all([
-			import("@codemirror/view"),
-			import("@codemirror/state"),
-			import("codemirror"),
-			import("@codemirror/theme-one-dark"),
-			import("@codemirror/language"),
-			import("@codemirror/legacy-modes/mode/toml"),
-		]).then(([viewMod, stateMod, cm, themeMod, langMod, tomlMode]) => {
-			if (!editorRef.current) return;
-
-			const tomlLang = langMod.StreamLanguage.define(tomlMode.toml);
-
-			const updateListener = viewMod.EditorView.updateListener.of((update) => {
-				if (update.docChanged) {
-					const newContent = update.state.doc.toString();
-					setCurrentContent(newContent);
-					try {
-						parseToml(newContent);
-						setValidationError(null);
-					} catch (error: any) {
-						setValidationError(error.message || "Invalid TOML");
-					}
-				}
-			});
-
-			const theme = viewMod.EditorView.theme({
-				"&": {
-					height: "100%",
-					fontSize: "13px",
-				},
-				".cm-scroller": {
-					fontFamily: "'IBM Plex Mono', monospace",
-					overflow: "auto",
-				},
-				".cm-gutters": {
-					backgroundColor: "transparent",
-					borderRight: "1px solid hsl(var(--color-app-line) / 0.3)",
-				},
-				".cm-activeLineGutter": {
-					backgroundColor: "transparent",
-				},
-			});
-
-			const state = stateMod.EditorState.create({
-				doc: content,
-				extensions: [
-					cm.basicSetup,
-					tomlLang,
-					themeMod.oneDark,
-					theme,
-					updateListener,
-					viewMod.keymap.of([{
-						key: "Mod-s",
-						run: () => {
-							// Trigger save via DOM event since we can't access React state here
-							editorRef.current?.dispatchEvent(new CustomEvent("cm-save"));
-							return true;
-						},
-					}]),
-				],
-			});
-
-			const view = new viewMod.EditorView({
-				state,
-				parent: editorRef.current,
-			});
-
-			viewRef.current = view;
-			setEditorLoaded(true);
-		});
-
-		return () => {
-			viewRef.current?.destroy();
-			viewRef.current = null;
-		};
-	}, [data?.content]);
-
-	// Handle Cmd+S from CodeMirror
-	useEffect(() => {
-		const element = editorRef.current;
-		if (!element) return;
-
-		const handler = () => {
-			if (isDirty && !validationError) {
-				updateMutation.mutate(currentContent);
-			}
-		};
-
-		element.addEventListener("cm-save", handler);
-		return () => element.removeEventListener("cm-save", handler);
-	}, [isDirty, validationError, currentContent]);
-
-	const handleSave = () => {
-		if (!isDirty || validationError) return;
-		setMessage(null);
-		updateMutation.mutate(currentContent);
-	};
-
-	const handleRevert = () => {
-		if (!viewRef.current) return;
-		const view = viewRef.current;
-		view.dispatch({
-			changes: { from: 0, to: view.state.doc.length, insert: originalContent },
-		});
-		setCurrentContent(originalContent);
-		setValidationError(null);
-		setMessage(null);
-	};
-
-	return (
-		<div className="flex h-full flex-col">
-			{/* Description + actions */}
-			<div className="flex items-center justify-between px-6 py-4 border-b border-app-line/30">
-				<p className="text-sm text-ink-dull">
-					Edit the raw configuration file. Changes are validated as TOML before saving.
-				</p>
-				<div className="flex items-center gap-2 flex-shrink-0 ml-4">
-					{isDirty && (
-						<Button onClick={handleRevert} variant="ghost" size="sm">
-							Revert
-						</Button>
-					)}
-					<Button
-						onClick={handleSave}
-						disabled={!isDirty || !!validationError}
-						loading={updateMutation.isPending}
-						size="sm"
-					>
-						Save
-					</Button>
-				</div>
-			</div>
-
-			{/* Validation / status bar */}
-			{(validationError || message) && (
-				<div className={`border-b px-6 py-2 text-sm ${validationError
-						? "border-red-500/20 bg-red-500/5 text-red-400"
-						: message?.type === "success"
-							? "border-green-500/20 bg-green-500/5 text-green-400"
-							: "border-red-500/20 bg-red-500/5 text-red-400"
-					}`}>
-					{validationError ? `Syntax error: ${validationError}` : message?.text}
-				</div>
-			)}
-
-			{/* Editor */}
-			<div className="flex-1 overflow-hidden">
-				{isLoading ? (
-					<div className="flex items-center gap-2 p-6 text-ink-dull">
-						<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
-						Loading config...
-					</div>
-				) : (
-					<div ref={editorRef} className="h-full" />
-				)}
-			</div>
-		</div>
-	);
-}
-
-interface ProviderCardProps {
-	provider: string;
-	name: string;
-	description: string;
-	configured: boolean;
-	defaultModel: string;
-	onEdit: () => void;
-	onRemove: () => void;
-	removing: boolean;
-	actionLabel?: string;
-	showRemove?: boolean;
-}
-
-function ProviderCard({
-	provider,
-	name,
-	description,
-	configured,
-	defaultModel,
-	onEdit,
-	onRemove,
-	removing,
-	actionLabel,
-	showRemove,
-}: ProviderCardProps) {
-	const primaryLabel = actionLabel ?? (configured ? "Update" : "Add key");
-	const shouldShowRemove = showRemove ?? configured;
-	return (
-		<div className="rounded-lg border border-app-line bg-app-box p-4">
-			<div className="flex items-center gap-3">
-				<ProviderIcon provider={provider} size={32} />
-				<div className="flex-1">
-					<div className="flex items-center gap-2">
-						<span className="text-sm font-medium text-ink">{name}</span>
-						{configured && (
-							<span className="inline-flex items-center">
-								<span className="h-2 w-2 rounded-full bg-green-400" aria-hidden="true" />
-								<span className="sr-only">Configured</span>
-							</span>
-						)}
-					</div>
-					<p className="mt-0.5 text-sm text-ink-dull">{description}</p>
-					<p className="mt-1 text-tiny text-ink-faint">
-						Default model: <span className="text-ink-dull">{defaultModel}</span>
-					</p>
-				</div>
-				<div className="flex gap-2">
-					<Button onClick={onEdit} variant="outline" size="sm">
-						{primaryLabel}
-					</Button>
-					{shouldShowRemove && (
-						<Button onClick={onRemove} variant="outline" size="sm" loading={removing}>
-							Remove
-						</Button>
-					)}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-interface ChatGptOAuthDialogProps {
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
-	isRequesting: boolean;
-	isPolling: boolean;
-	message: { text: string; type: "success" | "error" } | null;
-	deviceCodeInfo: { userCode: string; verificationUrl: string } | null;
-	deviceCodeCopied: boolean;
-	onCopyDeviceCode: () => void;
-	onOpenDeviceLogin: () => void;
-	onRestart: () => void;
-}
-
-function ChatGptOAuthDialog({
-	open,
-	onOpenChange,
-	isRequesting,
-	isPolling,
-	message,
-	deviceCodeInfo,
-	deviceCodeCopied,
-	onCopyDeviceCode,
-	onOpenDeviceLogin,
-	onRestart,
-}: ChatGptOAuthDialogProps) {
-	return (
-		<Dialog open={open} onOpenChange={onOpenChange}>
-			<DialogContent className="max-w-md">
-				<DialogHeader>
-					<DialogTitle className="flex items-center gap-2">
-						<ProviderIcon provider="openai-chatgpt" size={20} />
-						Sign in with ChatGPT Plus
-					</DialogTitle>
-					{!message && (
-						<DialogDescription>
-							Copy the device code below, then sign in to your OpenAI account to authorize access.
-							You must first <a href="https://chatgpt.com/security-settings" target="_blank" rel="noopener noreferrer" className="underline text-accent hover:text-accent/80">enable device code login</a> in your ChatGPT security settings.
-						</DialogDescription>
-					)}
-				</DialogHeader>
-
-				<div className="space-y-4">
-					{message && !deviceCodeInfo ? (
-						/* Completed state — success or error with no active flow */
-						<div
-							className={`rounded-md border px-3 py-2 text-sm ${message.type === "success"
-								? "border-green-500/20 bg-green-500/10 text-green-400"
-								: "border-red-500/20 bg-red-500/10 text-red-400"
-							}`}
-						>
-							{message.text}
-						</div>
-					) : isRequesting && !deviceCodeInfo ? (
-						<div className="flex items-center gap-2 text-sm text-ink-dull">
-							<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
-							Requesting device code...
-						</div>
-					) : deviceCodeInfo ? (
-						<div className="space-y-4">
-							<div className="rounded-md border border-app-line p-3">
-								<div className="flex items-center gap-2">
-									<span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-accent/15 text-[11px] font-semibold text-accent">1</span>
-									<p className="text-sm text-ink-dull">Copy this device code</p>
-								</div>
-								<div className="mt-2.5 flex items-center gap-2 pl-7">
-									<code className="rounded border border-app-line bg-app-darkerBox px-3 py-1.5 font-mono text-base tracking-widest text-ink">
-										{deviceCodeInfo.userCode}
-									</code>
-									<Button onClick={onCopyDeviceCode} size="sm" variant={deviceCodeCopied ? "secondary" : "outline"}>
-										{deviceCodeCopied ? "Copied" : "Copy"}
-									</Button>
-								</div>
-							</div>
-
-							<div className={`rounded-md border border-app-line p-3 ${!deviceCodeCopied ? "opacity-50" : ""}`}>
-								<div className="flex items-center gap-2">
-									<span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-accent/15 text-[11px] font-semibold text-accent">2</span>
-									<p className="text-sm text-ink-dull">Open OpenAI and paste the code</p>
-								</div>
-								<div className="mt-2.5 pl-7">
-									<Button
-										onClick={onOpenDeviceLogin}
-										disabled={!deviceCodeCopied}
-										size="sm"
-										variant="outline"
-									>
-										Open login page
-									</Button>
-								</div>
-							</div>
-
-							{isPolling && !message && (
-								<div className="flex items-center gap-2 text-sm text-ink-faint">
-									<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
-									Waiting for sign-in confirmation...
-								</div>
-							)}
-
-							{message && (
-								<div
-									className={`rounded-md border px-3 py-2 text-sm ${message.type === "success"
-										? "border-green-500/20 bg-green-500/10 text-green-400"
-										: "border-red-500/20 bg-red-500/10 text-red-400"
-									}`}
-								>
-									{message.text}
-								</div>
-							)}
-						</div>
-					) : null}
-				</div>
-
-				<DialogFooter>
-					{message && !deviceCodeInfo ? (
-						/* Completed — show Done (or Retry for errors) */
-						message.type === "success" ? (
-							<Button onClick={() => onOpenChange(false)} size="sm">
-								Done
-							</Button>
-						) : (
-							<>
-								<Button onClick={() => onOpenChange(false)} variant="ghost" size="sm">
-									Close
-								</Button>
-								<Button
-									onClick={onRestart}
-									disabled={isRequesting}
-									loading={isRequesting}
-									size="sm"
-								>
-									Try again
-								</Button>
-							</>
-						)
-					) : (
-						<>
-							<Button onClick={() => onOpenChange(false)} variant="ghost" size="sm">
-								Cancel
-							</Button>
-							{deviceCodeInfo && (
-								<Button
-									onClick={onRestart}
-									disabled={isRequesting}
-									loading={isRequesting}
-									variant="outline"
-									size="sm"
-								>
-									Get new code
-								</Button>
-							)}
-						</>
-					)}
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
-	);
-}
diff --git a/interface/src/routes/Wiki.tsx b/interface/src/routes/Wiki.tsx
new file mode 100644
index 000000000..2cc119247
--- /dev/null
+++ b/interface/src/routes/Wiki.tsx
@@ -0,0 +1,447 @@
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+	api,
+type WikiPageSummary,
+	type WikiPageType,
+	type CreateWikiPageRequest,
+} from "@/api/client";
+import { BookBookmark, Plus, MagnifyingGlass, ArrowLeft, ClockCounterClockwise, X } from "@phosphor-icons/react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+const PAGE_TYPES: WikiPageType[] = ["entity", "concept", "decision", "project", "reference"];
+
+const PAGE_TYPE_LABELS: Record<WikiPageType, string> = {
+	entity: "Entities",
+	concept: "Concepts",
+	decision: "Decisions",
+	project: "Projects",
+	reference: "Reference",
+};
+
+// ---------------------------------------------------------------------------
+// Markdown renderer with wiki: link support
+// ---------------------------------------------------------------------------
+
+function WikiMarkdown({ content, onNavigate }: { content: string; onNavigate: (slug: string) => void }) {
+	return (
+		<div className="markdown text-xs">
+			<ReactMarkdown
+				remarkPlugins={[remarkGfm]}
+				rehypePlugins={[rehypeRaw]}
+				components={{
+					a: ({ children, href, ...props }) => {
+						if (href?.startsWith("wiki:")) {
+							const slug = href.slice(5);
+							return (
+								<button
+									onClick={() => onNavigate(slug)}
+									className="text-accent underline underline-offset-2 hover:opacity-80"
+								>
+									{children}
+								</button>
+							);
+						}
+						return (
+							<a href={href} target="_blank" rel="noopener noreferrer" {...props}>
+								{children}
+							</a>
+						);
+					},
+				}}
+			>
+				{content}
+			</ReactMarkdown>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Create page form
+// ---------------------------------------------------------------------------
+
+function CreatePageForm({ onCreated, onCancel }: { onCreated: (slug: string) => void; onCancel: () => void }) {
+	const queryClient = useQueryClient();
+	const [title, setTitle] = useState("");
+	const [pageType, setPageType] = useState<WikiPageType>("reference");
+	const [content, setContent] = useState("");
+	const [editSummary, setEditSummary] = useState("");
+
+	const createMutation = useMutation({
+		mutationFn: (req: CreateWikiPageRequest) => api.createWikiPage(req),
+		onSuccess: (data) => {
+			queryClient.invalidateQueries({ queryKey: ["wiki"] });
+			onCreated(data.page.slug);
+		},
+	});
+
+	return (
+		<div className="flex flex-col gap-4 p-4">
+			<div className="flex items-center gap-2">
+				<button onClick={onCancel} className="text-ink-dull hover:text-ink">
+					<ArrowLeft className="size-4" />
+				</button>
+				<h2 className="text-sm font-semibold text-ink">New Wiki Page</h2>
+			</div>
+
+			<div className="flex flex-col gap-3">
+				<div>
+					<label className="mb-1 block text-xs font-medium text-ink-dull">Title</label>
+					<input
+						value={title}
+						onChange={(e) => setTitle(e.target.value)}
+						placeholder="Page title"
+						className="w-full rounded-md border border-app-line bg-app-input px-3 py-1.5 text-sm text-ink outline-none focus:ring-1 focus:ring-accent"
+					/>
+				</div>
+
+				<div>
+					<label className="mb-1 block text-xs font-medium text-ink-dull">Type</label>
+					<select
+						value={pageType}
+						onChange={(e) => setPageType(e.target.value as WikiPageType)}
+						className="w-full rounded-md border border-app-line bg-app-input px-3 py-1.5 text-sm text-ink outline-none focus:ring-1 focus:ring-accent"
+					>
+						{PAGE_TYPES.map((t) => (
+							<option key={t} value={t}>{t}</option>
+						))}
+					</select>
+				</div>
+
+				<div>
+					<label className="mb-1 block text-xs font-medium text-ink-dull">Content</label>
+					<textarea
+						value={content}
+						onChange={(e) => setContent(e.target.value)}
+						placeholder="Write markdown content. Link other pages with [display text](wiki:slug)."
+						rows={12}
+						className="w-full rounded-md border border-app-line bg-app-input px-3 py-1.5 font-mono text-sm text-ink outline-none focus:ring-1 focus:ring-accent"
+					/>
+				</div>
+
+				<div>
+					<label className="mb-1 block text-xs font-medium text-ink-dull">Edit summary (optional)</label>
+					<input
+						value={editSummary}
+						onChange={(e) => setEditSummary(e.target.value)}
+						placeholder="Describe what this page is about"
+						className="w-full rounded-md border border-app-line bg-app-input px-3 py-1.5 text-sm text-ink outline-none focus:ring-1 focus:ring-accent"
+					/>
+				</div>
+
+				{createMutation.error && (
+					<p className="text-xs text-red-400">{String(createMutation.error)}</p>
+				)}
+
+				<div className="flex gap-2">
+					<button
+						onClick={() => createMutation.mutate({ title, page_type: pageType, content, edit_summary: editSummary || undefined })}
+						disabled={!title || createMutation.isPending}
+						className="rounded-md bg-accent px-3 py-1.5 text-sm font-medium text-white hover:bg-accent/90 disabled:opacity-50"
+					>
+						{createMutation.isPending ? "Creating…" : "Create Page"}
+					</button>
+					<button onClick={onCancel} className="rounded-md px-3 py-1.5 text-sm font-medium text-ink-dull hover:text-ink">
+						Cancel
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Page detail view
+// ---------------------------------------------------------------------------
+
+function PageDetail({ slug, onBack, onNavigate }: { slug: string; onBack: () => void; onNavigate: (slug: string) => void }) {
+	const [showHistory, setShowHistory] = useState(false);
+
+	const { data, isLoading } = useQuery({
+		queryKey: ["wiki", "page", slug],
+		queryFn: () => api.getWikiPage(slug),
+	});
+
+	const { data: historyData } = useQuery({
+		queryKey: ["wiki", "history", slug],
+		queryFn: () => api.getWikiHistory(slug),
+		enabled: showHistory,
+	});
+
+	const page = data?.page;
+
+	if (isLoading) {
+		return (
+			<div className="flex flex-1 items-center justify-center">
+				<div className="text-xs text-ink-dull">Loading…</div>
+			</div>
+		);
+	}
+
+	if (!page) {
+		return (
+			<div className="flex flex-1 flex-col items-center justify-center gap-2">
+				<p className="text-sm text-ink-dull">Page not found</p>
+				<button onClick={onBack} className="text-xs text-accent hover:underline">Go back</button>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex flex-1 flex-col overflow-hidden">
+			{/* Header */}
+			<div className="flex shrink-0 items-center gap-2 border-b border-app-line/30 px-4 py-3">
+				<button onClick={onBack} className="text-ink-dull hover:text-ink">
+					<ArrowLeft className="size-4" />
+				</button>
+				<div className="flex-1 min-w-0">
+					<h1 className="text-sm font-semibold text-ink truncate">{page.title}</h1>
+					<div className="flex items-center gap-2 text-xs text-ink-dull">
+						<span className="rounded bg-app-selected/40 px-1.5 py-0.5 capitalize">{page.page_type}</span>
+						<span>v{page.version}</span>
+						<span>·</span>
+						<span>{new Date(page.updated_at).toLocaleDateString()}</span>
+					</div>
+				</div>
+				<button
+					onClick={() => setShowHistory(!showHistory)}
+					className={`text-ink-dull hover:text-ink ${showHistory ? "text-accent" : ""}`}
+					title="Version history"
+				>
+					<ClockCounterClockwise className="size-4" />
+				</button>
+			</div>
+
+			{showHistory && historyData ? (
+				<div className="flex-1 overflow-y-auto p-4">
+					<h3 className="mb-3 text-xs font-semibold uppercase tracking-wide text-ink-dull">Version History</h3>
+					<div className="space-y-2">
+						{historyData.versions.map((v) => (
+							<div key={v.id} className="rounded-lg border border-app-line/30 p-3">
+								<div className="flex items-center justify-between">
+									<span className="text-sm font-medium text-ink">Version {v.version}</span>
+									<span className="text-xs text-ink-dull">{new Date(v.created_at).toLocaleString()}</span>
+								</div>
+								{v.edit_summary && (
+									<p className="mt-1 text-xs text-ink-dull">{v.edit_summary}</p>
+								)}
+								<p className="mt-1 text-xs text-ink-dull">by {v.author_id}</p>
+							</div>
+						))}
+					</div>
+				</div>
+			) : (
+				<div className="flex-1 overflow-y-auto p-4">
+					<div className="mx-auto max-w-2xl">
+						<WikiMarkdown content={page.content} onNavigate={onNavigate} />
+
+						{page.related.length > 0 && (
+							<div className="mt-6 border-t border-app-line/30 pt-4">
+								<h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-ink-dull">Related</h3>
+								<div className="flex flex-wrap gap-2">
+									{page.related.map((slug) => (
+										<button
+											key={slug}
+											onClick={() => onNavigate(slug)}
+											className="rounded-full bg-app-selected/30 px-2.5 py-1 text-xs text-ink hover:bg-app-selected/50"
+										>
+											{slug}
+										</button>
+									))}
+								</div>
+							</div>
+						)}
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Page list sidebar
+// ---------------------------------------------------------------------------
+
+function PageList({
+	pages,
+	selectedSlug,
+	onSelect,
+}: {
+	pages: WikiPageSummary[];
+	selectedSlug: string | null;
+	onSelect: (slug: string) => void;
+}) {
+	const grouped = PAGE_TYPES.reduce<Record<string, WikiPageSummary[]>>((acc, type) => {
+		acc[type] = pages.filter((p) => p.page_type === type);
+		return acc;
+	}, {} as Record<string, WikiPageSummary[]>);
+
+	return (
+		<div className="space-y-4">
+			{PAGE_TYPES.map((type) => {
+				const group = grouped[type];
+				if (!group || group.length === 0) return null;
+				return (
+					<div key={type}>
+						<div className="mb-1 px-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-ink-dull">
+							{PAGE_TYPE_LABELS[type]}
+						</div>
+						<div className="space-y-0.5">
+							{group.map((page) => (
+								<button
+									key={page.slug}
+									onClick={() => onSelect(page.slug)}
+									className={`w-full rounded-lg px-2 py-1.5 text-left text-sm transition-colors ${
+										selectedSlug === page.slug
+											? "bg-app-selected/40 text-ink"
+											: "text-ink-dull hover:bg-app-selected/20 hover:text-ink"
+									}`}
+								>
+									<span className="truncate block">{page.title}</span>
+								</button>
+							))}
+						</div>
+					</div>
+				);
+			})}
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Main Wiki view
+// ---------------------------------------------------------------------------
+
+export function Wiki() {
+	const [selectedSlug, setSelectedSlug] = useState<string | null>(null);
+	const [creating, setCreating] = useState(false);
+	const [search, setSearch] = useState("");
+
+	const { data: listData, isLoading } = useQuery({
+		queryKey: ["wiki", "list"],
+		queryFn: () => api.listWikiPages(),
+	});
+
+	const { data: searchData } = useQuery({
+		queryKey: ["wiki", "search", search],
+		queryFn: () => api.searchWikiPages({ query: search }),
+		enabled: search.length > 1,
+	});
+
+	const pages = search.length > 1
+		? (searchData?.pages ?? [])
+		: (listData?.pages ?? []);
+
+	const totalPages = listData?.pages.length ?? 0;
+
+	if (creating) {
+		return (
+			<div className="flex h-full flex-col">
+				<CreatePageForm
+					onCreated={(slug) => {
+						setCreating(false);
+						setSelectedSlug(slug);
+					}}
+					onCancel={() => setCreating(false)}
+				/>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex h-full overflow-hidden">
+			{/* Sidebar */}
+			<div className="flex w-56 shrink-0 flex-col border-r border-app-line/30">
+				{/* Header */}
+				<div className="flex items-center gap-2 border-b border-app-line/30 px-3 py-3">
+					<BookBookmark className="size-4 text-ink-dull" weight="bold" />
+					<span className="text-sm font-semibold text-ink">Wiki</span>
+					{totalPages > 0 && (
+						<span className="ml-auto text-xs text-ink-dull">{totalPages}</span>
+					)}
+					<button
+						onClick={() => setCreating(true)}
+						className="ml-1 text-ink-dull hover:text-ink"
+						title="New page"
+					>
+						<Plus className="size-4" />
+					</button>
+				</div>
+
+				{/* Search */}
+				<div className="px-3 py-2">
+					<div className="flex items-center gap-2 rounded-md border border-app-line bg-app-input px-2 py-1">
+						<MagnifyingGlass className="size-3.5 shrink-0 text-ink-dull" />
+						<input
+							value={search}
+							onChange={(e) => setSearch(e.target.value)}
+							placeholder="Search…"
+							className="min-w-0 flex-1 bg-transparent text-xs text-ink outline-none placeholder:text-ink-dull"
+						/>
+						{search && (
+							<button onClick={() => setSearch("")} className="text-ink-dull hover:text-ink">
+								<X className="size-3" />
+							</button>
+						)}
+					</div>
+				</div>
+
+				{/* Page list */}
+				<div className="flex-1 overflow-y-auto px-3 pb-4">
+					{isLoading ? (
+						<p className="py-4 text-center text-xs text-ink-dull">Loading…</p>
+					) : pages.length === 0 ? (
+						<div className="py-6 text-center">
+							<p className="text-xs text-ink-dull">
+								{search ? "No results" : "No pages yet"}
+							</p>
+							{!search && (
+								<button
+									onClick={() => setCreating(true)}
+									className="mt-2 text-xs text-accent hover:underline"
+								>
+									Create the first page
+								</button>
+							)}
+						</div>
+					) : (
+						<PageList
+							pages={pages}
+							selectedSlug={selectedSlug}
+							onSelect={setSelectedSlug}
+						/>
+					)}
+				</div>
+			</div>
+
+			{/* Content */}
+			<div className="flex flex-1 overflow-hidden">
+				{selectedSlug ? (
+					<PageDetail
+						slug={selectedSlug}
+						onBack={() => setSelectedSlug(null)}
+						onNavigate={setSelectedSlug}
+					/>
+				) : (
+					<div className="flex flex-1 flex-col items-center justify-center gap-3">
+						<BookBookmark className="size-10 text-ink-dull/30" weight="thin" />
+						<p className="text-sm text-ink-dull">Select a page or create a new one</p>
+						<button
+							onClick={() => setCreating(true)}
+							className="flex items-center gap-1.5 rounded-md bg-accent/10 px-3 py-1.5 text-sm font-medium text-accent hover:bg-accent/20"
+						>
+							<Plus className="size-3.5" />
+							New Page
+						</button>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/routes/Workbench.tsx b/interface/src/routes/Workbench.tsx
new file mode 100644
index 000000000..a02a3302d
--- /dev/null
+++ b/interface/src/routes/Workbench.tsx
@@ -0,0 +1,196 @@
+import {useMemo, useEffect, useRef} from "react";
+import {useQuery, useQueryClient, useQueries} from "@tanstack/react-query";
+import {api} from "@/api/client";
+import {useLiveContext} from "@/hooks/useLiveContext";
+import {
+	EmptyState,
+	WorkbenchSidebar,
+	WorkerColumn,
+	groupWorkersByProjectAndWorktree,
+	normalizePath,
+	resolvePath,
+	type DirectoryMatch,
+	type OrchestrationWorker,
+} from "@/components/workbench";
+
+export function Workbench() {
+	const queryClient = useQueryClient();
+	const {activeWorkers, workerEventVersion} = useLiveContext();
+
+	// -- Fetch all agents --
+	const {data: agentsData} = useQuery({
+		queryKey: ["agents"],
+		queryFn: () => api.agents(),
+		staleTime: 30_000,
+	});
+
+	const agents = agentsData?.agents ?? [];
+
+	// -- Fan-out: fetch active workers per agent --
+	// We fetch both "running" and "idle" status workers separately then merge.
+	const workerQueries = useQueries({
+		queries: agents.flatMap((agent) =>
+			(["running", "idle"] as const).map((status) => ({
+				queryKey: ["orchestrate-workers", agent.id, status],
+				queryFn: () => api.workersList(agent.id, {limit: 200, status}),
+				refetchInterval: 10_000,
+			})),
+		),
+	});
+
+	// Invalidate when SSE events fire
+	const prevVersion = useRef(workerEventVersion);
+	useEffect(() => {
+		if (workerEventVersion !== prevVersion.current) {
+			prevVersion.current = workerEventVersion;
+			queryClient.invalidateQueries({queryKey: ["orchestrate-workers"]});
+		}
+	}, [workerEventVersion, queryClient]);
+
+	// -- Merge DB workers with SSE live state --
+	const allWorkers: OrchestrationWorker[] = useMemo(() => {
+		const result: OrchestrationWorker[] = [];
+		const seenIds = new Set<string>();
+
+		agents.forEach((agent, agentIndex) => {
+			const agentName = agent.display_name ?? agent.id;
+			// Each agent has 2 queries (running, idle) at indices agentIndex*2 and agentIndex*2+1
+			for (let statusIdx = 0; statusIdx < 2; statusIdx++) {
+				const queryIdx = agentIndex * 2 + statusIdx;
+				const queryResult = workerQueries[queryIdx];
+				const workers = queryResult?.data?.workers ?? [];
+
+				for (const worker of workers) {
+					if (seenIds.has(worker.id)) continue;
+					seenIds.add(worker.id);
+
+					// Only show OpenCode workers
+					if (worker.worker_type !== "opencode") continue;
+					// Must have a port to embed
+					if (!worker.opencode_port) continue;
+
+					const liveWorker = activeWorkers[worker.id];
+					result.push({
+						...worker,
+						agent_id: agent.id,
+						agent_name: agentName,
+						status: liveWorker?.status ?? worker.status,
+						live_tool_calls: liveWorker?.toolCalls,
+					});
+				}
+			}
+
+			// Also add SSE-only workers (started but not yet in DB)
+			for (const [workerId, liveWorker] of Object.entries(activeWorkers)) {
+				if (seenIds.has(workerId)) continue;
+				if (liveWorker.agentId !== agent.id) continue;
+				if (liveWorker.workerType !== "opencode") continue;
+				seenIds.add(workerId);
+
+				// SSE workers don't have opencode_port in activeWorkers.
+				// They'll appear in the DB query on next refetch once persisted.
+				// Skip for now — they'll show up shortly.
+			}
+		});
+
+		return result;
+	}, [agents, workerQueries, activeWorkers]);
+
+	const filteredWorkers = allWorkers;
+	const isLoading = workerQueries.some((query) => query.isLoading);
+
+	// -- Fetch projects + worktrees to resolve worker.directory → project/worktree --
+	const {data: projectsData} = useQuery({
+		queryKey: ["workbench-projects"],
+		queryFn: () => api.listProjects(),
+		staleTime: 60_000,
+	});
+	const projects = projectsData?.projects ?? [];
+
+	const projectDetailQueries = useQueries({
+		queries: projects.map((project) => ({
+			queryKey: ["workbench-project-detail", project.id],
+			queryFn: () => api.getProject(project.id),
+			staleTime: 60_000,
+		})),
+	});
+
+	const directoryIndex = useMemo(() => {
+		const index = new Map<string, DirectoryMatch>();
+		projects.forEach((project, idx) => {
+			const detail = projectDetailQueries[idx]?.data;
+			if (!detail) return;
+			// Main repo root acts as the default worktree
+			if (project.root_path) {
+				const abs = normalizePath(project.root_path);
+				if (!index.has(abs)) {
+					index.set(abs, {
+						projectId: project.id,
+						projectName: project.name,
+						worktreeName: "main",
+					});
+				}
+			}
+			for (const worktree of detail.worktrees ?? []) {
+				const abs = resolvePath(project.root_path, worktree.path);
+				index.set(abs, {
+					projectId: project.id,
+					projectName: project.name,
+					worktreeName: worktree.name,
+				});
+			}
+		});
+		return index;
+	}, [projects, projectDetailQueries]);
+
+	const columnRefs = useRef<Record<string, HTMLDivElement | null>>({});
+	const scrollToWorker = (id: string) => {
+		columnRefs.current[id]?.scrollIntoView({
+			behavior: "smooth",
+			inline: "start",
+			block: "nearest",
+		});
+	};
+
+	// Group by project → worktree
+	const tree = useMemo(
+		() => groupWorkersByProjectAndWorktree(filteredWorkers, directoryIndex),
+		[filteredWorkers, directoryIndex],
+	);
+
+	return (
+		<div className="flex h-full gap-[10px] bg-sidebar pr-[10px] pb-[10px]">
+			<WorkbenchSidebar
+				tree={tree}
+				totalCount={filteredWorkers.length}
+				onSelectWorker={scrollToWorker}
+			/>
+			<div className="flex min-w-0 flex-1">
+				{isLoading && filteredWorkers.length === 0 ? (
+					<div className="flex h-full flex-1 items-center justify-center">
+						<div className="flex items-center gap-2 text-xs text-ink-faint">
+							<span className="h-2 w-2 animate-pulse rounded-full bg-accent" />
+							Loading workers...
+						</div>
+					</div>
+				) : filteredWorkers.length === 0 ? (
+					<EmptyState />
+				) : (
+					<div className="flex flex-1 gap-[10px] overflow-x-auto">
+						{filteredWorkers.map((worker) => (
+							<div
+								key={worker.id}
+								ref={(el) => {
+									columnRefs.current[worker.id] = el;
+								}}
+								className="flex h-full flex-shrink-0"
+							>
+								<WorkerColumn worker={worker} />
+							</div>
+						))}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
diff --git a/interface/src/styles.css b/interface/src/styles.css
new file mode 100644
index 000000000..63582e3f0
--- /dev/null
+++ b/interface/src/styles.css
@@ -0,0 +1,193 @@
+/* Pre-declare the layer used by OpenCodeEmbed's portal CSS so it has the
+   lowest priority. Without this, the portal stylesheet (injected at runtime
+   after this file loads) would register its layer after Tailwind's, and
+   OpenCode's preflight (`*, ::before, ::after { border-color: ... }`) would
+   win over Spacebot's own utilities. Declaring it first here reserves the
+   bottom-most layer position. */
+@layer opencode-portals;
+
+@import "tailwindcss";
+
+/* SpaceUI design tokens */
+@import "@spacedrive/tokens/src/css/theme.css";
+@import "@spacedrive/tokens/src/css/base.css";
+
+/* Themes */
+@import "@spacedrive/tokens/src/css/themes/light.css";
+@import "@spacedrive/tokens/src/css/themes/dark.css";
+@import "@spacedrive/tokens/src/css/themes/midnight.css";
+@import "@spacedrive/tokens/src/css/themes/noir.css";
+@import "@spacedrive/tokens/src/css/themes/slate.css";
+@import "@spacedrive/tokens/src/css/themes/nord.css";
+@import "@spacedrive/tokens/src/css/themes/mocha.css";
+
+/* Tell Tailwind to scan SpaceUI component source for classes */
+@source "../../../spaceui/packages/primitives/src";
+@source "../../../spaceui/packages/ai/src";
+@source "../../../spaceui/packages/forms/src";
+@source "../../../spaceui/packages/explorer/src";
+
+/* Override default font to IBM Plex Sans */
+@theme {
+	--font-sans: "IBM Plex Sans", system-ui, sans-serif;
+}
+
+/* Custom utilities */
+@utility no-scrollbar {
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+/* Base styles */
+html,
+body {
+	overflow: hidden;
+	height: 100%;
+}
+
+html {
+	font-size: 106.25%;
+	background: var(--color-app);
+}
+
+body {
+	font-family: var(--font-sans);
+	color: var(--color-ink);
+	background: var(--color-app);
+}
+
+/* Markdown prose styling for message content */
+.markdown {
+	line-height: 1.625;
+
+	p {
+		margin-block: 0.25rem;
+	}
+	p:first-child {
+		margin-top: 0;
+	}
+	p:last-child {
+		margin-bottom: 0;
+	}
+	strong {
+		font-weight: 600;
+		color: var(--color-ink);
+	}
+	em {
+		font-style: italic;
+	}
+	a {
+		color: var(--color-accent);
+		text-decoration: underline;
+		text-decoration-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
+		&:hover {
+			text-decoration-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
+		}
+	}
+	code {
+		border-radius: 0.25rem;
+		background: var(--color-app-dark-box);
+		padding: 0.125rem 0.375rem;
+		font-family: var(--font-mono);
+		font-size: 0.75rem;
+		color: var(--color-ink);
+	}
+	pre {
+		margin-block: 0.5rem;
+		overflow-x: auto;
+		border-radius: 0.375rem;
+		background: var(--color-app-dark-box);
+		padding: 0.75rem;
+		code {
+			background: transparent;
+			padding: 0;
+		}
+	}
+	ul,
+	ol {
+		margin-block: 0.375rem;
+		padding-left: 1.25rem;
+	}
+	ul {
+		list-style-type: disc;
+	}
+	ol {
+		list-style-type: decimal;
+	}
+	li {
+		margin-block: 0.125rem;
+	}
+	blockquote {
+		margin-block: 0.5rem;
+		border-left: 2px solid var(--color-app-line);
+		padding-left: 0.75rem;
+		font-style: italic;
+		color: var(--color-ink-faint);
+	}
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		margin-top: 0.75rem;
+		margin-bottom: 0.25rem;
+		font-weight: 600;
+		color: var(--color-ink);
+	}
+	h1 {
+		font-size: 1.125rem;
+	}
+	h2 {
+		font-size: 1rem;
+	}
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-size: 0.8rem;
+	}
+	hr {
+		margin-block: 0.75rem;
+		border-color: var(--color-app-line);
+	}
+	table {
+		margin-block: 0.5rem;
+		width: 100%;
+		font-size: 0.8rem;
+	}
+	th {
+		border: 1px solid var(--color-app-line);
+		background: var(--color-app-dark-box);
+		padding: 0.25rem 0.5rem;
+		text-align: left;
+		font-weight: 500;
+		color: var(--color-ink);
+	}
+	td {
+		border: 1px solid var(--color-app-line);
+		padding: 0.25rem 0.5rem;
+	}
+	img {
+		margin-block: 0.5rem;
+		max-width: 100%;
+		border-radius: 0.25rem;
+	}
+}
+
+/* Hide React Query devtools toggle button */
+.tsqd-open-btn-container {
+	opacity: 0 !important;
+}
+
+/* Override React Flow's default group node styles */
+.react-flow__node-group {
+	background-color: transparent !important;
+	border: none !important;
+	padding: 0 !important;
+	width: auto !important;
+	box-shadow: none !important;
+}
diff --git a/interface/src/ui/Badge.tsx b/interface/src/ui/Badge.tsx
deleted file mode 100644
index eb5879e17..000000000
--- a/interface/src/ui/Badge.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cx } from "./utils";
-
-export const badgeStyles = cva(
-  [
-    "inline-flex items-center rounded-full border font-medium transition-colors",
-    "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  ],
-  {
-    variants: {
-      variant: {
-        default: [
-          "border-transparent bg-app-button text-ink-dull",
-          "hover:bg-app-hover hover:text-ink",
-        ],
-        accent: [
-          "border-transparent bg-accent/15 text-accent",
-          "hover:bg-accent/25",
-        ],
-        amber: [
-          "border-transparent bg-amber-500/15 text-amber-500",
-          "hover:bg-amber-500/25",
-        ],
-        violet: [
-          "border-transparent bg-violet-500/15 text-violet-500",
-          "hover:bg-violet-500/25",
-        ],
-        blue: [
-          "border-transparent bg-blue-500/15 text-blue-500",
-          "hover:bg-blue-500/25",
-        ],
-        red: [
-          "border-transparent bg-red-500/15 text-red-500",
-          "hover:bg-red-500/25",
-        ],
-        green: [
-          "border-transparent bg-emerald-500/15 text-emerald-500",
-          "hover:bg-emerald-500/25",
-        ],
-        outline: [
-          "border-app-line text-ink-dull",
-          "hover:border-ink-faint hover:text-ink",
-        ],
-      },
-      size: {
-        sm: "h-5 px-2 text-tiny gap-1",
-        md: "h-6 px-2.5 text-xs gap-1.5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "sm",
-    },
-  }
-);
-
-export type BadgeBaseProps = VariantProps<typeof badgeStyles>;
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    BadgeBaseProps {
-  children?: React.ReactNode;
-}
-
-export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
-  ({ className, variant, size, children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cx(badgeStyles({ variant, size }), className)}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-
-Badge.displayName = "Badge";
diff --git a/interface/src/ui/Banner.tsx b/interface/src/ui/Banner.tsx
deleted file mode 100644
index 2a21bee3a..000000000
--- a/interface/src/ui/Banner.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as React from "react";
-import { cx } from "./utils";
-
-export type BannerVariant = "info" | "warning" | "error" | "success" | "cyan";
-
-interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
-  variant?: BannerVariant;
-  dot?: "pulse" | "static" | "none";
-  children: React.ReactNode;
-}
-
-const variantStyles: Record<BannerVariant, string> = {
-  info: "bg-blue-500/10 text-blue-400 border-blue-500/20",
-  warning: "bg-amber-500/10 text-amber-400 border-amber-500/20",
-  error: "bg-red-500/10 text-red-400 border-red-500/20",
-  success: "bg-green-500/10 text-green-400 border-green-500/20",
-  cyan: "bg-cyan-500/10 text-cyan-400 border-cyan-500/20",
-};
-
-export function Banner({
-  variant = "info",
-  dot = "static",
-  className,
-  children,
-  ...props
-}: BannerProps) {
-  return (
-    <div
-      className={cx(
-        "border-b px-4 py-2 text-sm",
-        variantStyles[variant],
-        className
-      )}
-      {...props}
-    >
-      <div className="flex items-center gap-2">
-        {dot !== "none" && (
-          <div
-            className={cx(
-              "h-1.5 w-1.5 rounded-full bg-current",
-              dot === "pulse" && "animate-pulse"
-            )}
-          />
-        )}
-        {children}
-      </div>
-    </div>
-  );
-}
-
-export function BannerActions({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <div className={cx("ml-auto flex items-center gap-2", className)}>
-      {children}
-    </div>
-  );
-}
diff --git a/interface/src/ui/Button.tsx b/interface/src/ui/Button.tsx
deleted file mode 100644
index 411f6236b..000000000
--- a/interface/src/ui/Button.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as React from "react";
-import {cva, type VariantProps} from "class-variance-authority";
-import {cx} from "./utils";
-import {Loader} from "./Loader";
-
-export const buttonStyles = cva(
-	[
-		"inline-flex items-center justify-center rounded-lg font-medium transition-colors",
-		"disabled:pointer-events-none disabled:opacity-50",
-		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
-	],
-	{
-		variants: {
-			size: {
-				default: "h-9 px-4 py-2 text-sm",
-				sm: "h-8 rounded-md px-3 text-xs",
-				lg: "h-10 rounded-md px-8 text-sm",
-				icon: "h-8 w-8 rounded-md p-0",
-			},
-			variant: {
-				default: ["bg-accent text-white shadow", "hover:bg-accent/90"],
-				destructive: [
-				"border border-app-line bg-transparent text-ink-dull",
-				"hover:bg-red-600 hover:text-white hover:border-red-600",
-			],
-				outline: [
-					"border border-app-line bg-transparent",
-					"hover:bg-app-hover/40 hover:text-ink",
-				],
-				secondary: [
-					"bg-app-darkBox text-ink-dull",
-					"hover:bg-app-lightBox hover:text-ink",
-				],
-				ghost: ["hover:bg-app-darkBox hover:text-ink-dull", "text-ink-faint"],
-				link: ["text-accent underline-offset-4", "hover:underline"],
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
-);
-
-export type ButtonBaseProps = VariantProps<typeof buttonStyles>;
-
-export interface ButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonBaseProps {
-	loading?: boolean;
-	leftIcon?: React.ReactNode;
-	rightIcon?: React.ReactNode;
-	children?: React.ReactNode;
-}
-
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	(
-		{
-			className,
-			variant,
-			size,
-			loading,
-			leftIcon,
-			rightIcon,
-			children,
-			disabled,
-			...props
-		},
-		ref,
-	) => {
-		const isDisabled = disabled || loading;
-
-		return (
-			<button
-				className={cx(buttonStyles({variant, size}), className)}
-				ref={ref}
-				disabled={isDisabled}
-				{...props}
-			>
-				{loading && <Loader className="mr-2 h-4 w-4 animate-spin" />}
-				{!loading && leftIcon && (
-					<span className="mr-2 inline-flex items-center">{leftIcon}</span>
-				)}
-				{children}
-				{!loading && rightIcon && (
-					<span className="ml-2 inline-flex items-center">{rightIcon}</span>
-				)}
-			</button>
-		);
-	},
-);
-
-Button.displayName = "Button";
diff --git a/interface/src/ui/Card.tsx b/interface/src/ui/Card.tsx
deleted file mode 100644
index 320d4c351..000000000
--- a/interface/src/ui/Card.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cx } from "./utils";
-
-export const cardStyles = cva(
-  [
-    "rounded-xl border transition-colors",
-  ],
-  {
-    variants: {
-      variant: {
-        default: [
-          "border-app-line bg-app-darkBox",
-        ],
-        darker: [
-          "border-app-line bg-app-darkerBox",
-        ],
-        ghost: [
-          "border-transparent bg-transparent",
-        ],
-      },
-      padding: {
-        none: "",
-        sm: "p-3",
-        md: "p-5",
-        lg: "p-6",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      padding: "md",
-    },
-  }
-);
-
-export type CardBaseProps = VariantProps<typeof cardStyles>;
-
-export interface CardProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    CardBaseProps {}
-
-export const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ className, variant, padding, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cx(cardStyles({ variant, padding }), className)}
-        {...props}
-      />
-    );
-  }
-);
-
-Card.displayName = "Card";
-
-export const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cx("flex flex-col space-y-1.5", className)}
-    {...props}
-  />
-));
-CardHeader.displayName = "CardHeader";
-
-export const CardTitle = React.forwardRef<
-  HTMLHeadingElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cx("font-plex text-base font-semibold text-ink", className)}
-    {...props}
-  />
-));
-CardTitle.displayName = "CardTitle";
-
-export const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cx("text-sm text-ink-dull", className)}
-    {...props}
-  />
-));
-CardDescription.displayName = "CardDescription";
-
-export const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cx("", className)} {...props} />
-));
-CardContent.displayName = "CardContent";
-
-export const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cx("flex items-center pt-4", className)}
-    {...props}
-  />
-));
-CardFooter.displayName = "CardFooter";
diff --git a/interface/src/ui/Checkbox.tsx b/interface/src/ui/Checkbox.tsx
deleted file mode 100644
index 709382451..000000000
--- a/interface/src/ui/Checkbox.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Tick02Icon, MinusSignIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cx } from "./utils";
-
-const checkboxStyles = cva(
-  [
-    "peer h-4 w-4 shrink-0 rounded border border-app-line",
-    "ring-offset-app-box focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
-    "disabled:cursor-not-allowed disabled:opacity-50",
-    "data-[state=checked]:bg-accent data-[state=checked]:border-accent",
-    "data-[state=indeterminate]:bg-accent data-[state=indeterminate]:border-accent",
-  ]
-);
-
-const indicatorStyles = cva(
-  "flex items-center justify-center text-current"
-);
-
-export interface CheckboxProps
-  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
-    VariantProps<typeof checkboxStyles> {
-  indeterminate?: boolean;
-}
-
-export const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  CheckboxProps
->(({ className, indeterminate, checked, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cx(checkboxStyles(), className)}
-    checked={indeterminate ? "indeterminate" : checked}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cx(indicatorStyles())}
-    >
-      {indeterminate ? (
-        <HugeiconsIcon icon={MinusSignIcon} className="h-3 w-3 text-white" />
-      ) : (
-        <HugeiconsIcon icon={Tick02Icon} className="h-3 w-3 text-white" />
-      )}
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export interface CheckboxLabelProps {
-  children: React.ReactNode;
-  disabled?: boolean;
-  className?: string;
-}
-
-export const CheckboxLabel: React.FC<CheckboxLabelProps> = ({
-  children,
-  disabled,
-  className,
-}) => (
-  <span
-    className={cx(
-      "text-sm font-medium text-ink",
-      disabled && "opacity-50",
-      className
-    )}
-  >
-    {children}
-  </span>
-);
-
-export interface CheckboxFieldProps {
-  label: React.ReactNode;
-  description?: string;
-  disabled?: boolean;
-  className?: string;
-  checkboxProps?: Omit<CheckboxProps, "disabled">;
-}
-
-export const CheckboxField: React.FC<CheckboxFieldProps> = ({
-  label,
-  description,
-  disabled,
-  className,
-  checkboxProps,
-}) => (
-  <label
-    className={cx(
-      "flex items-start gap-3 cursor-pointer",
-      disabled && "cursor-not-allowed",
-      className
-    )}
-  >
-    <div className="mt-0.5">
-      <Checkbox disabled={disabled} {...checkboxProps} />
-    </div>
-    <div className="space-y-1">
-      <CheckboxLabel disabled={disabled}>{label}</CheckboxLabel>
-      {description && (
-        <p className={cx("text-xs text-ink-dull", disabled && "opacity-50")}>
-          {description}
-        </p>
-      )}
-    </div>
-  </label>
-);
diff --git a/interface/src/ui/Dialog.tsx b/interface/src/ui/Dialog.tsx
deleted file mode 100644
index 5e6ebcf33..000000000
--- a/interface/src/ui/Dialog.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cx } from "./utils";
-import { Cancel01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
-const DialogPortal = DialogPrimitive.Portal;
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cx(
-      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cx(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-app-line bg-app-darkBox p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-app-darkBox transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-app-button data-[state=open]:text-ink-dull">
-        <HugeiconsIcon icon={Cancel01Icon} className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cx(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-);
-DialogHeader.displayName = "DialogHeader";
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cx(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-);
-DialogFooter.displayName = "DialogFooter";
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cx(
-      "text-lg font-plex font-semibold leading-none tracking-tight text-ink",
-      className
-    )}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cx("text-sm text-ink-dull", className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-};
diff --git a/interface/src/ui/Divider.tsx b/interface/src/ui/Divider.tsx
deleted file mode 100644
index cd66cc071..000000000
--- a/interface/src/ui/Divider.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { tw } from "./utils";
-
-export const Divider = tw.div`h-px w-full bg-app-divider`;
-
-export const VerticalDivider = tw.div`h-full w-px bg-app-divider`;
diff --git a/interface/src/ui/Dropdown.tsx b/interface/src/ui/Dropdown.tsx
deleted file mode 100644
index 6cc11d867..000000000
--- a/interface/src/ui/Dropdown.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { cx } from "./utils";
-import { Tick02Icon, ArrowRight01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cx(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-app-selected data-[state=open]:bg-app-selected",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-      {children}
-      <HugeiconsIcon icon={ArrowRight01Icon} className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cx(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-app-line bg-app-box p-1 text-ink shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-));
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cx(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-app-line bg-app-box p-1 text-ink shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cx(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-app-selected focus:text-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cx(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-app-selected focus:text-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <HugeiconsIcon icon={Tick02Icon} className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cx(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-app-selected focus:text-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <div className="h-2 w-2 rounded-full bg-accent" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cx(
-      "px-2 py-1.5 text-sm font-semibold text-ink-dull",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cx("-mx-1 my-1 h-px bg-app-divider", className)}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cx("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  );
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-};
-
-export const Dropdown = {
-  Root: DropdownMenu,
-  Trigger: DropdownMenuTrigger,
-  Content: DropdownMenuContent,
-  Item: DropdownMenuItem,
-  CheckboxItem: DropdownMenuCheckboxItem,
-  RadioItem: DropdownMenuRadioItem,
-  Label: DropdownMenuLabel,
-  Separator: DropdownMenuSeparator,
-  Shortcut: DropdownMenuShortcut,
-  Group: DropdownMenuGroup,
-  Sub: DropdownMenuSub,
-  SubContent: DropdownMenuSubContent,
-  SubTrigger: DropdownMenuSubTrigger,
-  RadioGroup: DropdownMenuRadioGroup,
-};
diff --git a/interface/src/ui/FilterButton.tsx b/interface/src/ui/FilterButton.tsx
deleted file mode 100644
index 14c8a8a96..000000000
--- a/interface/src/ui/FilterButton.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from "react";
-import { cx } from "./utils";
-
-export interface FilterButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-	active?: boolean;
-	colorClass?: string;
-	children: React.ReactNode;
-}
-
-export const FilterButton = React.forwardRef<
-	HTMLButtonElement,
-	FilterButtonProps
->(({ active, colorClass, className, children, ...props }, ref) => (
-	<button
-		ref={ref}
-		className={cx(
-			"h-6 rounded-md px-2 text-tiny font-medium transition-colors",
-			active
-				? colorClass || "bg-app-selected text-ink"
-				: "text-ink-faint hover:text-ink-dull",
-			className
-		)}
-		{...props}
-	>
-		{children}
-	</button>
-));
-
-FilterButton.displayName = "FilterButton";
diff --git a/interface/src/ui/Input.tsx b/interface/src/ui/Input.tsx
deleted file mode 100644
index 87946252d..000000000
--- a/interface/src/ui/Input.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import * as React from "react";
-import {cva, type VariantProps} from "class-variance-authority";
-import {cx} from "./utils";
-import {Search01Icon} from "@hugeicons/core-free-icons";
-import {HugeiconsIcon} from "@hugeicons/react";
-
-export const inputSizes = {
-	sm: "h-8 text-sm px-3 py-1.5",
-	md: "h-9 text-sm px-3",
-	lg: "h-10 text-base px-3.5",
-} as const;
-
-export const inputStyles = cva(
-	[
-		"rounded-md border text-sm leading-4",
-		"outline-none transition-colors",
-		"text-ink",
-	],
-	{
-		variants: {
-			variant: {
-				default: ["border-app-line bg-app-darkBox", "focus-within:border-accent/50"],
-				transparent: [
-					"border-transparent bg-app-box",
-					"focus-within:border-app-line",
-				],
-			},
-			error: {
-				true: "border-red-500/50 focus-within:border-red-500",
-			},
-			size: inputSizes,
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "sm",
-		},
-	},
-);
-
-type InputVariants = VariantProps<typeof inputStyles>;
-
-export interface InputProps
-	extends
-		Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
-		InputVariants {
-	icon?: React.ReactNode;
-	right?: React.ReactNode;
-}
-
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-	({className, variant, size, error, icon, right, ...props}, ref) => {
-		return (
-			<div
-				className={cx(
-					inputStyles({variant, size, error}),
-					"flex items-center gap-2",
-					className,
-				)}
-			>
-				{icon && <span className="text-ink-faint shrink-0">{icon}</span>}
-				<input
-					ref={ref}
-					className="bg-transparent w-full outline-none placeholder:text-ink-faint"
-					{...props}
-				/>
-				{right && <span className="shrink-0">{right}</span>}
-			</div>
-		);
-	},
-);
-
-Input.displayName = "Input";
-
-export interface TextAreaProps
-	extends
-		React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-		Pick<InputVariants, "variant" | "error"> {}
-
-export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
-	({className, variant = "default", error, ...props}, ref) => {
-		return (
-			<textarea
-				ref={ref}
-				className={cx(
-					inputStyles({variant, error}),
-					"w-full min-h-[80px] resize-y py-2 placeholder:text-ink-faint [&::-webkit-resizer]:bg-transparent",
-					className,
-				)}
-				{...props}
-			/>
-		);
-	},
-);
-
-TextArea.displayName = "TextArea";
-
-export const SearchInput = React.forwardRef<
-	HTMLInputElement,
-	Omit<InputProps, "icon">
->(({size = "sm", ...props}, ref) => (
-	<Input
-		ref={ref}
-		icon={
-			<HugeiconsIcon
-				icon={Search01Icon}
-				size={size === "sm" ? 14 : size === "md" ? 16 : 18}
-			/>
-		}
-		size={size}
-		{...props}
-	/>
-));
-
-SearchInput.displayName = "SearchInput";
-
-export const Label = React.forwardRef<
-	HTMLLabelElement,
-	React.LabelHTMLAttributes<HTMLLabelElement>
->(({className, ...props}, ref) => (
-	<label
-		ref={ref}
-		className={cx("block text-xs font-medium text-ink-dull mb-1.5", className)}
-		{...props}
-	/>
-));
-
-Label.displayName = "Label";
-
-export const PasswordInput = React.forwardRef<
-	HTMLInputElement,
-	Omit<InputProps, "type" | "right">
->(({...props}, ref) => {
-	const [show, setShow] = React.useState(false);
-
-	return (
-		<Input
-			ref={ref}
-			type={show ? "text" : "password"}
-			right={
-				<button
-					type="button"
-					onClick={() => setShow(!show)}
-					className="text-xs text-ink-dull hover:text-ink transition-colors"
-				>
-					{show ? "Hide" : "Show"}
-				</button>
-			}
-			{...props}
-		/>
-	);
-});
-
-PasswordInput.displayName = "PasswordInput";
diff --git a/interface/src/ui/Loader.tsx b/interface/src/ui/Loader.tsx
deleted file mode 100644
index 12a49171a..000000000
--- a/interface/src/ui/Loader.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cx } from "./utils";
-
-const loaderStyles = cva(
-  ["animate-spin text-ink-dull"],
-  {
-    variants: {
-      size: {
-        sm: "h-4 w-4",
-        md: "h-6 w-6",
-        lg: "h-8 w-8",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-    },
-  }
-);
-
-export interface LoaderProps
-  extends React.SVGAttributes<SVGSVGElement>,
-    VariantProps<typeof loaderStyles> {}
-
-export const Loader = React.forwardRef<SVGSVGElement, LoaderProps>(
-  ({ className, size, ...props }, ref) => {
-    return (
-      <svg
-        ref={ref}
-        className={cx(loaderStyles({ size }), className)}
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        {...props}
-      >
-        <circle
-          className="opacity-25"
-          cx="12"
-          cy="12"
-          r="10"
-          stroke="currentColor"
-          strokeWidth="4"
-        />
-        <path
-          className="opacity-75"
-          fill="currentColor"
-          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-        />
-      </svg>
-    );
-  }
-);
-
-Loader.displayName = "Loader";
diff --git a/interface/src/ui/NumberStepper.tsx b/interface/src/ui/NumberStepper.tsx
deleted file mode 100644
index 3b1a1ef3d..000000000
--- a/interface/src/ui/NumberStepper.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import * as React from "react";
-import { Button } from "./Button";
-import { PlusSignIcon, MinusSignIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-
-export interface NumberStepperProps {
-	label?: string;
-	description?: string;
-	value: number;
-	onChange: (value: number) => void;
-	min?: number;
-	max?: number;
-	step?: number;
-	suffix?: string;
-	type?: "integer" | "float";
-	showProgress?: boolean;
-	variant?: "default" | "compact";
-}
-
-export const NumberStepper = React.forwardRef<HTMLDivElement, NumberStepperProps>(
-	(
-		{
-			label,
-			description,
-			value,
-			onChange,
-			min,
-			max,
-			step = 1,
-			suffix,
-			type = "integer",
-			showProgress = false,
-			variant = "default",
-		},
-		ref
-	) => {
-		const safeValue = value ?? 0;
-
-		const clamp = (v: number) => {
-			let clamped = v;
-			if (min !== undefined && clamped < min) clamped = min;
-			if (max !== undefined && clamped > max) clamped = max;
-			if (type === "float") {
-				clamped = Math.round(clamped / step) * step;
-			}
-			return clamped;
-		};
-
-		const increment = () => onChange(clamp(safeValue + step));
-		const decrement = () => onChange(clamp(safeValue - step));
-
-		const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-			const raw = e.target.value;
-			if (type === "integer" && (raw === "" || raw === "-")) return;
-			if (type === "float" && (raw === "" || raw === "0." || raw === ".")) return;
-			const parsed = Number(raw);
-			if (!Number.isNaN(parsed)) onChange(clamp(parsed));
-		};
-
-		const displayValue =
-			type === "float" ? safeValue.toFixed(2) : safeValue.toString();
-		const inputWidth = variant === "compact" 
-			? (type === "float" ? "w-12" : "w-14")
-			: (type === "float" ? "w-16" : "w-20");
-
-		const progress =
-			showProgress && min !== undefined && max !== undefined
-				? ((safeValue - min) / (max - min)) * 100
-				: 0;
-
-		return (
-			<div ref={ref} className="flex flex-col gap-1.5">
-				{label && <label className="text-sm font-medium text-ink">{label}</label>}
-				{description && <p className="text-tiny text-ink-faint">{description}</p>}
-				<div className={`flex items-center gap-2.5 ${(label || description) ? 'mt-1' : ''}`}>
-					<div className="flex items-stretch rounded-md border border-app-line/50 bg-app-darkBox/30 overflow-hidden">
-						<Button
-							type="button"
-							onClick={decrement}
-							variant="ghost"
-							size="icon"
-							className="h-8 w-8 rounded-none"
-						>
-							<HugeiconsIcon icon={MinusSignIcon} className="h-3 w-3" />
-						</Button>
-						<input
-							type="text"
-							inputMode={type === "float" ? "decimal" : "numeric"}
-							value={displayValue}
-							onChange={handleInput}
-							className={`${inputWidth} border-x border-app-line/50 bg-transparent px-2 py-1.5 text-center font-mono text-sm text-ink-dull focus:outline-none`}
-						/>
-						<Button
-							type="button"
-							onClick={increment}
-							variant="ghost"
-							size="icon"
-							className="h-8 w-8 rounded-none"
-						>
-							<HugeiconsIcon icon={PlusSignIcon} className="h-3 w-3" />
-						</Button>
-					</div>
-					{showProgress && (
-						<div className="h-1.5 w-32 overflow-hidden rounded-full bg-app-darkBox">
-							<div
-								className="h-full rounded-full bg-accent/50 transition-all"
-								style={{ width: `${progress}%` }}
-							/>
-						</div>
-					)}
-					{suffix && <span className="text-tiny text-ink-faint">{suffix}</span>}
-				</div>
-			</div>
-		);
-	}
-);
-
-NumberStepper.displayName = "NumberStepper";
diff --git a/interface/src/ui/Popover.tsx b/interface/src/ui/Popover.tsx
deleted file mode 100644
index 05ceefffd..000000000
--- a/interface/src/ui/Popover.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cx } from "./utils";
-
-const popoverContentStyles = cva(
-  [
-    "z-50 w-72 rounded-lg border border-app-line bg-app-box p-4 shadow-lg",
-    "outline-none data-[state=open]:animate-in data-[state=closed]:animate-out",
-    "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-    "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-    "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-    "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-  ]
-);
-
-export interface PopoverContentProps
-  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>,
-    VariantProps<typeof popoverContentStyles> {}
-
-export const Popover = PopoverPrimitive.Root;
-
-export const PopoverTrigger = PopoverPrimitive.Trigger;
-
-export const PopoverAnchor = PopoverPrimitive.Anchor;
-
-export const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  PopoverContentProps
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cx(popoverContentStyles(), className)}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
-
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export const PopoverClose = PopoverPrimitive.Close;
-
-export interface PopoverHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-  title?: string;
-  description?: string;
-}
-
-export const PopoverHeader: React.FC<PopoverHeaderProps> = ({
-  title,
-  description,
-  className,
-  children,
-  ...props
-}) => (
-  <div className={cx("space-y-1.5", className)} {...props}>
-    {title && <h4 className="text-sm font-semibold text-ink">{title}</h4>}
-    {description && <p className="text-xs text-ink-dull">{description}</p>}
-    {children}
-  </div>
-);
-
-export interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export const PopoverFooter: React.FC<PopoverFooterProps> = ({
-  className,
-  children,
-  ...props
-}) => (
-  <div
-    className={cx(
-      "mt-4 flex items-center justify-end gap-2",
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </div>
-);
diff --git a/interface/src/ui/ProgressBar.tsx b/interface/src/ui/ProgressBar.tsx
deleted file mode 100644
index 6354c3ff0..000000000
--- a/interface/src/ui/ProgressBar.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cx } from "./utils";
-import { Tick02Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-
-const progressBarStyles = cva(
-  "relative h-2 w-full overflow-hidden rounded-full bg-app-button",
-  {
-    variants: {
-      size: {
-        sm: "h-1",
-        md: "h-2",
-        lg: "h-3",
-        xl: "h-4",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-    },
-  }
-);
-
-const progressIndicatorStyles = cva(
-  "h-full w-full flex-1 bg-accent transition-all",
-  {
-    variants: {
-      variant: {
-        default: "bg-accent",
-        success: "bg-green-500",
-        warning: "bg-amber-500",
-        error: "bg-red-500",
-        neutral: "bg-ink-dull",
-      },
-      animated: {
-        true: "animate-pulse",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      animated: false,
-    },
-  }
-);
-
-export interface ProgressBarProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof progressBarStyles>,
-    VariantProps<typeof progressIndicatorStyles> {
-  value: number;
-  max?: number;
-  showLabel?: boolean;
-  labelPosition?: "inside" | "outside";
-}
-
-export const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(
-  (
-    {
-      className,
-      value,
-      max = 100,
-      size,
-      variant,
-      animated,
-      showLabel = false,
-      labelPosition = "outside",
-      ...props
-    },
-    ref
-  ) => {
-    const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
-
-    return (
-      <div className={cx("w-full", className)} {...props}>
-        <div
-          ref={ref}
-          className={cx(progressBarStyles({ size }))}
-        >
-          <div
-            className={cx(progressIndicatorStyles({ variant, animated }))}
-            style={{ width: `${percentage}%` }}
-          />
-          {showLabel && labelPosition === "inside" && size !== "sm" && (
-            <span className="absolute inset-0 flex items-center justify-center text-xs font-medium text-white">
-              {Math.round(percentage)}%
-            </span>
-          )}
-        </div>
-        {showLabel && labelPosition === "outside" && (
-          <div className="mt-1 flex items-center justify-between text-xs text-ink-dull">
-            <span>{Math.round(percentage)}%</span>
-            <span>
-              {value} / {max}
-            </span>
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
-ProgressBar.displayName = "ProgressBar";
-
-export interface CircularProgressProps
-  extends React.SVGProps<SVGSVGElement>,
-    VariantProps<typeof progressIndicatorStyles> {
-  value: number;
-  max?: number;
-  size?: number;
-  strokeWidth?: number;
-  showLabel?: boolean;
-}
-
-export const CircularProgress: React.FC<CircularProgressProps> = ({
-  value,
-  max = 100,
-  size = 40,
-  strokeWidth = 4,
-  variant,
-  showLabel = false,
-  className,
-  ...props
-}) => {
-  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
-  const radius = (size - strokeWidth) / 2;
-  const circumference = radius * 2 * Math.PI;
-  const offset = circumference - (percentage / 100) * circumference;
-
-  const variantColor = {
-    default: "stroke-accent",
-    success: "stroke-green-500",
-    warning: "stroke-amber-500",
-    error: "stroke-red-500",
-    neutral: "stroke-ink-dull",
-  }[variant || "default"];
-
-  return (
-    <div className={cx("relative inline-flex items-center justify-center", className)}>
-      <svg width={size} height={size} {...props}>
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={radius}
-          fill="none"
-          stroke="currentColor"
-          strokeWidth={strokeWidth}
-          className="text-app-button"
-        />
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={radius}
-          fill="none"
-          stroke="currentColor"
-          strokeWidth={strokeWidth}
-          strokeLinecap="round"
-          strokeDasharray={circumference}
-          strokeDashoffset={offset}
-          className={cx(variantColor, "transition-all duration-300")}
-          transform={`rotate(-90 ${size / 2} ${size / 2})`}
-        />
-      </svg>
-      {showLabel && (
-        <span className="absolute text-xs font-medium text-ink">
-          {Math.round(percentage)}%
-        </span>
-      )}
-    </div>
-  );
-};
-
-export interface ProgressStep {
-  label: string;
-  description?: string;
-  status?: "pending" | "current" | "completed" | "error";
-}
-
-export interface ProgressStepsProps extends React.HTMLAttributes<HTMLDivElement> {
-  steps: ProgressStep[];
-  currentStep: number;
-  orientation?: "horizontal" | "vertical";
-}
-
-export const ProgressSteps: React.FC<ProgressStepsProps> = ({
-  steps,
-  currentStep,
-  orientation = "horizontal",
-  className,
-  ...props
-}) => {
-  return (
-    <div
-      className={cx(
-        orientation === "horizontal"
-          ? "flex items-start gap-2"
-          : "flex flex-col gap-4",
-        className
-      )}
-      {...props}
-    >
-      {steps.map((step, index) => {
-        const status =
-          step.status ||
-          (index < currentStep
-            ? "completed"
-            : index === currentStep
-            ? "current"
-            : "pending");
-
-        return (
-          <div
-            key={index}
-            className={cx(
-              "flex",
-              orientation === "horizontal"
-                ? "flex-col items-center flex-1 text-center"
-                : "items-start gap-3"
-            )}
-          >
-            <div
-              className={cx(
-                "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-medium",
-                status === "completed" && "bg-accent text-white",
-                status === "current" && "border-2 border-accent bg-app-box text-accent",
-                status === "pending" && "border-2 border-app-line bg-app-box text-ink-dull",
-                status === "error" && "bg-red-500 text-white"
-              )}
-            >
-              {status === "completed" ? (
-                <HugeiconsIcon icon={Tick02Icon} className="h-4 w-4" />
-              ) : (
-                index + 1
-              )}
-            </div>
-            <div className={cx(orientation === "horizontal" && "mt-2")}>
-              <p
-                className={cx(
-                  "text-sm font-medium",
-                  status === "pending" ? "text-ink-dull" : "text-ink"
-                )}
-              >
-                {step.label}
-              </p>
-              {step.description && (
-                <p className="text-xs text-ink-dull mt-0.5">{step.description}</p>
-              )}
-            </div>
-            {orientation === "horizontal" && index < steps.length - 1 && (
-              <div className="absolute left-0 right-0 top-4 -z-10 hidden h-0.5 w-full bg-app-line lg:block" />
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
diff --git a/interface/src/ui/RadioGroup.tsx b/interface/src/ui/RadioGroup.tsx
deleted file mode 100644
index b7a4a5634..000000000
--- a/interface/src/ui/RadioGroup.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { CircleIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cx } from "./utils";
-
-const radioGroupStyles = cva("grid gap-3");
-
-const radioGroupItemStyles = cva(
-  [
-    "aspect-square h-4 w-4 rounded-full border border-app-line",
-    "text-accent ring-offset-app-box focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
-    "disabled:cursor-not-allowed disabled:opacity-50",
-    "data-[state=checked]:border-accent",
-  ]
-);
-
-const radioIndicatorStyles = cva("flex items-center justify-center");
-
-export interface RadioGroupProps
-  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,
-    VariantProps<typeof radioGroupStyles> {}
-
-export const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  RadioGroupProps
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cx(radioGroupStyles(), className)}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-
-export interface RadioGroupItemProps
-  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
-    VariantProps<typeof radioGroupItemStyles> {}
-
-export const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  RadioGroupItemProps
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cx(radioGroupItemStyles(), className)}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className={cx(radioIndicatorStyles())}>
-        <HugeiconsIcon icon={CircleIcon} className="h-2 w-2 fill-current text-current" fill="currentColor" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
-});
-
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-export interface RadioLabelProps {
-  children: React.ReactNode;
-  disabled?: boolean;
-  className?: string;
-}
-
-export const RadioLabel: React.FC<RadioLabelProps> = ({
-  children,
-  disabled,
-  className,
-}) => (
-  <span
-    className={cx(
-      "text-sm font-medium text-ink",
-      disabled && "opacity-50",
-      className
-    )}
-  >
-    {children}
-  </span>
-);
-
-export interface RadioGroupFieldProps {
-  value: string;
-  label: React.ReactNode;
-  description?: string;
-  disabled?: boolean;
-  className?: string;
-}
-
-export const RadioGroupField: React.FC<RadioGroupFieldProps> = ({
-  value,
-  label,
-  description,
-  disabled,
-  className,
-}) => (
-  <label
-    className={cx(
-      "flex items-start gap-3 cursor-pointer",
-      disabled && "cursor-not-allowed",
-      className
-    )}
-  >
-    <div className="mt-0.5">
-      <RadioGroupItem value={value} disabled={disabled} />
-    </div>
-    <div className="space-y-1">
-      <RadioLabel disabled={disabled}>{label}</RadioLabel>
-      {description && (
-        <p className={cx("text-xs text-ink-dull", disabled && "opacity-50")}>
-          {description}
-        </p>
-      )}
-    </div>
-  </label>
-);
diff --git a/interface/src/ui/Select.tsx b/interface/src/ui/Select.tsx
deleted file mode 100644
index 541ba3ac3..000000000
--- a/interface/src/ui/Select.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { cx } from "./utils";
-import { Tick02Icon, ArrowDown01Icon, ArrowUp01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-
-export type SelectProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>;
-
-const Select = SelectPrimitive.Root;
-const SelectGroup = SelectPrimitive.Group;
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cx(
-      "flex h-8 w-full items-center justify-between rounded-md border border-app-line bg-app-darkBox px-3 py-1.5 text-sm transition-colors placeholder:text-ink-faint focus:border-accent/50 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <HugeiconsIcon icon={ArrowDown01Icon} className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cx(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <HugeiconsIcon icon={ArrowUp01Icon} className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cx(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <HugeiconsIcon icon={ArrowDown01Icon} className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cx(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-app-line bg-app-box text-ink shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cx(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cx("py-1.5 pl-8 pr-2 text-sm font-semibold text-ink-dull", className)}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cx(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-app-hover focus:text-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <HugeiconsIcon icon={Tick02Icon} className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cx("-mx-1 my-1 h-px bg-app-divider", className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-};
diff --git a/interface/src/ui/SettingSidebarButton.tsx b/interface/src/ui/SettingSidebarButton.tsx
index 5e120651d..cd04513d5 100644
--- a/interface/src/ui/SettingSidebarButton.tsx
+++ b/interface/src/ui/SettingSidebarButton.tsx
@@ -1,8 +1,7 @@
 import * as React from "react";
-import { cx } from "./utils";
+import {cx} from "class-variance-authority";
 
-export interface SettingSidebarButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface SettingSidebarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	active?: boolean;
 	children: React.ReactNode;
 }
@@ -10,15 +9,15 @@ export interface SettingSidebarButtonProps
 export const SettingSidebarButton = React.forwardRef<
 	HTMLButtonElement,
 	SettingSidebarButtonProps
->(({ active, className, children, ...props }, ref) => (
+>(({active, className, children, ...props}, ref) => (
 	<button
 		ref={ref}
 		className={cx(
 			"flex items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm transition-colors",
 			active
-				? "bg-app-darkBox text-ink"
-				: "text-ink-dull hover:bg-app-darkBox/50 hover:text-ink",
-			className
+				? "bg-app-dark-box text-ink"
+				: "text-ink-dull hover:bg-app-dark-box/50 hover:text-ink",
+			className,
 		)}
 		{...props}
 	>
diff --git a/interface/src/ui/Slider.tsx b/interface/src/ui/Slider.tsx
deleted file mode 100644
index cfcdb6536..000000000
--- a/interface/src/ui/Slider.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as SliderPrimitive from "@radix-ui/react-slider";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cx } from "./utils";
-
-const sliderTrackStyles = cva(
-  "relative flex w-full grow overflow-hidden rounded-full bg-app-button h-2"
-);
-
-const sliderRangeStyles = cva("absolute h-full bg-accent rounded-full");
-
-const sliderThumbStyles = cva(
-  [
-    "block h-5 w-5 rounded-full border-2 border-accent bg-app-box",
-    "ring-offset-app-box transition-colors",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
-    "disabled:pointer-events-none disabled:opacity-50",
-    "cursor-grab active:cursor-grabbing",
-  ]
-);
-
-const sliderMarkStyles = cva(
-  "absolute w-1 h-1 rounded-full bg-app-line top-1/2 -translate-y-1/2"
-);
-
-export interface SliderProps
-  extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,
-    VariantProps<typeof sliderTrackStyles> {
-  marks?: number[];
-}
-
-export const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  SliderProps
->(({ className, marks, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cx(
-      "relative flex w-full touch-none select-none items-center",
-      className
-    )}
-    {...props}
-  >
-    <SliderPrimitive.Track className={cx(sliderTrackStyles())}>
-      <SliderPrimitive.Range className={cx(sliderRangeStyles())} />
-      {marks?.map((mark, index) => (
-        <div
-          key={index}
-          className={cx(sliderMarkStyles())}
-          style={{
-            left: `${mark}%`,
-          }}
-        />
-      ))}
-    </SliderPrimitive.Track>
-    {props.defaultValue?.map((_, index) => (
-      <SliderPrimitive.Thumb
-        key={index}
-        className={cx(sliderThumbStyles())}
-      />
-    )) ||
-      (props.value?.map((_, index) => (
-        <SliderPrimitive.Thumb
-          key={index}
-          className={cx(sliderThumbStyles())}
-        />
-      )) || <SliderPrimitive.Thumb className={cx(sliderThumbStyles())} />)}
-  </SliderPrimitive.Root>
-));
-
-Slider.displayName = SliderPrimitive.Root.displayName;
-
-export interface SliderLabelProps {
-  min: number;
-  max: number;
-  value: number[];
-  className?: string;
-}
-
-export const SliderLabel: React.FC<SliderLabelProps> = ({
-  min,
-  max,
-  value,
-  className,
-}) => (
-  <div className={cx("flex items-center justify-between text-xs text-ink-dull", className)}>
-    <span>{min}</span>
-    <span className="font-medium text-ink">
-      {value.length > 1 ? `${value[0]} - ${value[1]}` : value[0]}
-    </span>
-    <span>{max}</span>
-  </div>
-);
-
-export interface SliderFieldProps extends SliderProps {
-  label?: string;
-  description?: string;
-  showValue?: boolean;
-  minLabel?: string;
-  maxLabel?: string;
-}
-
-export const SliderField: React.FC<SliderFieldProps> = ({
-  label,
-  description,
-  showValue = true,
-  minLabel,
-  maxLabel,
-  value,
-  defaultValue,
-  min = 0,
-  max = 100,
-  className,
-  ...props
-}) => {
-  const currentValue = value || defaultValue || [min];
-  
-  return (
-    <div className={cx("space-y-3", className)}>
-      {label && (
-        <div className="flex items-center justify-between">
-          <span className="text-sm font-medium text-ink">{label}</span>
-          {showValue && (
-            <span className="text-sm text-ink-dull">
-              {currentValue.length > 1
-                ? `${currentValue[0]} - ${currentValue[1]}`
-                : currentValue[0]}
-            </span>
-          )}
-        </div>
-      )}
-      <Slider value={value} defaultValue={defaultValue} min={min} max={max} {...props} />
-      {description && <p className="text-xs text-ink-dull">{description}</p>}
-      {(minLabel || maxLabel) && (
-        <div className="flex items-center justify-between text-xs text-ink-dull">
-          <span>{minLabel || min}</span>
-          <span>{maxLabel || max}</span>
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/interface/src/ui/Tabs.tsx b/interface/src/ui/Tabs.tsx
deleted file mode 100644
index dd273e3e3..000000000
--- a/interface/src/ui/Tabs.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { cx } from "./utils";
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cx(
-      "inline-flex h-10 items-center justify-center rounded-lg bg-app-box p-1 text-ink-dull",
-      className
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cx(
-      "relative inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-app-box transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-app-darkBox data-[state=active]:text-ink data-[state=inactive]:hover:text-ink-faint",
-      className
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cx(
-      "mt-2 ring-offset-app-box focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
-      className
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/interface/src/ui/Toggle.tsx b/interface/src/ui/Toggle.tsx
index 754963c99..6f17e246b 100644
--- a/interface/src/ui/Toggle.tsx
+++ b/interface/src/ui/Toggle.tsx
@@ -1,14 +1,13 @@
 import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-import {cva, type VariantProps} from "class-variance-authority";
-import {cx} from "./utils";
+import {cva, cx, type VariantProps} from "class-variance-authority";
 
 const switchStyles = cva(
 	[
 		"peer inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors",
 		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
 		"disabled:cursor-not-allowed disabled:opacity-50",
-		"data-[state=checked]:bg-accent data-[state=unchecked]:bg-app-darkBox",
+		"data-[state=checked]:bg-accent data-[state=unchecked]:bg-app-dark-box",
 	],
 	{
 		variants: {
diff --git a/interface/src/ui/ToggleGroup.tsx b/interface/src/ui/ToggleGroup.tsx
deleted file mode 100644
index c59e60ab4..000000000
--- a/interface/src/ui/ToggleGroup.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from "react";
-import { cx } from "./utils";
-
-export interface ToggleGroupOption<T extends string> {
-	value: T;
-	label: React.ReactNode;
-	title?: string;
-}
-
-export interface ToggleGroupProps<T extends string> {
-	options: ToggleGroupOption<T>[];
-	value: T;
-	onChange: (value: T) => void;
-	className?: string;
-}
-
-export function ToggleGroup<T extends string>({
-	options,
-	value,
-	onChange,
-	className,
-}: ToggleGroupProps<T>) {
-	return (
-		<div
-			className={cx(
-				"flex overflow-hidden rounded-md border border-app-line bg-app-darkBox",
-				className
-			)}
-		>
-			{options.map((option) => {
-				const isActive = option.value === value;
-
-				return (
-					<button
-						key={option.value}
-						onClick={() => onChange(option.value)}
-						title={option.title}
-						className={cx(
-							"inline-flex h-8 w-8 items-center justify-center transition-colors",
-							isActive
-								? "bg-app-selected text-ink"
-								: "text-ink-faint hover:bg-app-hover/40 hover:text-ink-dull"
-						)}
-					>
-						{option.label}
-					</button>
-				);
-			})}
-		</div>
-	);
-}
diff --git a/interface/src/ui/Tooltip.tsx b/interface/src/ui/Tooltip.tsx
deleted file mode 100644
index 483a3aec1..000000000
--- a/interface/src/ui/Tooltip.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { cx } from "./utils";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cx(
-      "z-50 overflow-hidden rounded-md border border-app-line bg-app-box px-3 py-1.5 text-sm text-ink shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/interface/src/ui/Typography.tsx b/interface/src/ui/Typography.tsx
deleted file mode 100644
index a3fc773da..000000000
--- a/interface/src/ui/Typography.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { tw } from "./utils";
-
-export const CategoryHeading = tw.h3`text-xs font-semibold text-ink-dull uppercase tracking-wide`;
-
-export const SectionHeading = tw.h2`text-sm font-semibold text-ink`;
-
-export const ScreenHeading = tw.h1`text-xl font-plex font-bold text-ink`;
-
-export const PageHeading = tw.h1`text-2xl font-plex font-bold text-ink`;
-
-export const BodyText = tw.p`text-sm text-ink leading-relaxed`;
-
-export const MutedText = tw.p`text-xs text-ink-dull leading-relaxed`;
-
-export const Kbd = tw.kbd`h-4.5 flex items-center justify-center rounded-md border border-app-line bg-app-box px-1.5 text-tiny font-sans text-ink-dull`;
diff --git a/interface/src/ui/forms/CheckBoxField.tsx b/interface/src/ui/forms/CheckBoxField.tsx
deleted file mode 100644
index 4b709ecbb..000000000
--- a/interface/src/ui/forms/CheckBoxField.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { useFormContext, Controller } from "react-hook-form";
-import { CheckboxField, type CheckboxProps } from "../Checkbox";
-import { ErrorMessage } from "./Form";
-import { cx } from "../utils";
-
-export interface CheckBoxFieldProps extends Omit<CheckboxProps, "name" | "checked" | "onCheckedChange"> {
-  name: string;
-  label?: React.ReactNode;
-  description?: string;
-  className?: string;
-}
-
-export const CheckBoxField: React.FC<CheckBoxFieldProps> = ({
-  name,
-  label,
-  description,
-  className,
-  ...props
-}) => {
-  const { control, formState } = useFormContext();
-  const error = formState.errors[name]?.message as string | undefined;
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field }) => (
-        <div className={cx("space-y-1.5", className)}>
-          <CheckboxField
-            label={label || name}
-            description={description}
-            checkboxProps={{
-              ...props,
-              checked: field.value,
-              onCheckedChange: field.onChange,
-            }}
-          />
-          {error && <ErrorMessage error={error} />}
-        </div>
-      )}
-    />
-  );
-};
-
-CheckBoxField.displayName = "CheckBoxField";
diff --git a/interface/src/ui/forms/Form.tsx b/interface/src/ui/forms/Form.tsx
deleted file mode 100644
index 7050e7ac6..000000000
--- a/interface/src/ui/forms/Form.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-"use client";
-
-import { useFormContext, FormProvider, useFormState } from "react-hook-form";
-import { cx } from "../utils";
-
-export { FormProvider, useFormContext, useFormState };
-
-export const Form = FormProvider;
-
-export interface ErrorMessageProps {
-  error?: string;
-  className?: string;
-}
-
-export const ErrorMessage = ({ error, className }: ErrorMessageProps) => {
-  if (!error) return null;
-  return (
-    <p className={cx("text-xs text-red-500 mt-1", className)}>{error}</p>
-  );
-};
diff --git a/interface/src/ui/forms/FormField.tsx b/interface/src/ui/forms/FormField.tsx
deleted file mode 100644
index 483427910..000000000
--- a/interface/src/ui/forms/FormField.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  useFormContext,
-  Controller,
-  type FieldPath,
-  type FieldValues,
-  type ControllerProps,
-} from "react-hook-form";
-import { cx } from "../utils";
-import { Label } from "../Input";
-
-interface FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> {
-  name: TName;
-}
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-);
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-interface FormItemContextValue {
-  id: string;
-}
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-interface FormItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  name: string;
-  label?: string;
-  description?: string;
-}
-
-const FormItem = React.forwardRef<HTMLDivElement, FormItemProps>(
-  ({ className, name, label, description, children, ...props }, ref) => {
-    const id = React.useId();
-
-    return (
-      <FormItemContext.Provider value={{ id }}>
-        <div ref={ref} className={cx("space-y-2", className)} {...props}>
-          {label && <Label htmlFor={id}>{label}</Label>}
-          {children}
-          {description && (
-            <p className="text-xs text-ink-dull">{description}</p>
-          )}
-          <FormMessage />
-        </div>
-      </FormItemContext.Provider>
-    );
-  }
-);
-FormItem.displayName = "FormItem";
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof Label>,
-  React.ComponentPropsWithoutRef<typeof Label>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-
-  return (
-    <Label
-      ref={ref}
-      className={cx(error && "text-red-500", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
-});
-FormLabel.displayName = "FormLabel";
-
-const FormControl = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-
-  return (
-    <div
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
-});
-FormControl.displayName = "FormControl";
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
-
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cx("text-xs text-ink-dull", className)}
-      {...props}
-    />
-  );
-});
-FormDescription.displayName = "FormDescription";
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cx("text-xs font-medium text-red-500", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  );
-});
-FormMessage.displayName = "FormMessage";
-
-export {
-  useFormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-};
diff --git a/interface/src/ui/forms/InputField.tsx b/interface/src/ui/forms/InputField.tsx
deleted file mode 100644
index e60857c78..000000000
--- a/interface/src/ui/forms/InputField.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { useFormContext, Controller } from "react-hook-form";
-import { Input, type InputProps, Label } from "../Input";
-import { ErrorMessage } from "./Form";
-import { cx } from "../utils";
-
-export interface InputFieldProps extends Omit<InputProps, "name" | "error"> {
-  name: string;
-  label?: string;
-  description?: string;
-  className?: string;
-}
-
-export const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
-  ({ name, label, description, className, ...props }, ref) => {
-    const { control, formState } = useFormContext();
-    const error = formState.errors[name]?.message as string | undefined;
-
-    return (
-      <Controller
-        name={name}
-        control={control}
-        render={({ field }) => (
-          <div className={cx("space-y-1.5", className)}>
-            {label && <Label htmlFor={name}>{label}</Label>}
-            <Input
-              {...field}
-              {...props}
-              ref={ref}
-              id={name}
-              error={!!error}
-            />
-            {description && !error && (
-              <p className="text-xs text-ink-dull">{description}</p>
-            )}
-            {error && <ErrorMessage error={error} />}
-          </div>
-        )}
-      />
-    );
-  }
-);
-
-InputField.displayName = "InputField";
diff --git a/interface/src/ui/forms/SelectField.tsx b/interface/src/ui/forms/SelectField.tsx
deleted file mode 100644
index 92f2e86aa..000000000
--- a/interface/src/ui/forms/SelectField.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { useFormContext, Controller } from "react-hook-form";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../Select";
-import { Label } from "../Input";
-import { ErrorMessage } from "./Form";
-import { cx } from "../utils";
-
-export interface SelectOption {
-  value: string;
-  label: string;
-  disabled?: boolean;
-}
-
-export interface SelectFieldProps {
-  name: string;
-  label?: string;
-  description?: string;
-  options: SelectOption[];
-  placeholder?: string;
-  className?: string;
-  disabled?: boolean;
-}
-
-export const SelectField: React.FC<SelectFieldProps> = ({
-  name,
-  label,
-  description,
-  options,
-  placeholder,
-  className,
-  disabled,
-}) => {
-  const { control, formState } = useFormContext();
-  const error = formState.errors[name]?.message as string | undefined;
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field }) => (
-        <div className={cx("space-y-1.5", className)}>
-          {label && <Label htmlFor={name}>{label}</Label>}
-          <Select
-            value={field.value}
-            onValueChange={field.onChange}
-            disabled={disabled}
-          >
-            <SelectTrigger id={name}>
-              <SelectValue placeholder={placeholder} />
-            </SelectTrigger>
-            <SelectContent>
-              {options.map((option: SelectOption) => (
-                <SelectItem
-                  key={option.value}
-                  value={option.value}
-                  disabled={option.disabled}
-                >
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          {description && !error && (
-            <p className="text-xs text-ink-dull">{description}</p>
-          )}
-          {error && <ErrorMessage error={error} />}
-        </div>
-      )}
-    />
-  );
-};
-
-SelectField.displayName = "SelectField";
diff --git a/interface/src/ui/forms/SwitchField.tsx b/interface/src/ui/forms/SwitchField.tsx
deleted file mode 100644
index dacde8874..000000000
--- a/interface/src/ui/forms/SwitchField.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { useFormContext, Controller } from "react-hook-form";
-import { Toggle, type ToggleProps } from "../Toggle";
-import { ErrorMessage } from "./Form";
-import { cx } from "../utils";
-
-export interface SwitchFieldProps extends Omit<ToggleProps, "name" | "checked" | "onCheckedChange"> {
-  name: string;
-  label?: string;
-  description?: string;
-  className?: string;
-}
-
-export const SwitchField: React.FC<SwitchFieldProps> = ({
-  name,
-  label,
-  description,
-  className,
-  ...props
-}) => {
-  const { control, formState } = useFormContext();
-  const error = formState.errors[name]?.message as string | undefined;
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field }) => (
-        <div className={cx("space-y-1.5", className)}>
-          <label className="flex items-center justify-between cursor-pointer">
-            <div className="space-y-1">
-              {label && (
-                <span className="text-sm font-medium text-ink">{label}</span>
-              )}
-              {description && (
-                <p className="text-xs text-ink-dull">{description}</p>
-              )}
-            </div>
-            <Toggle
-              {...props}
-              checked={field.value}
-              onCheckedChange={field.onChange}
-            />
-          </label>
-          {error && <ErrorMessage error={error} />}
-        </div>
-      )}
-    />
-  );
-};
-
-SwitchField.displayName = "SwitchField";
diff --git a/interface/src/ui/forms/TextAreaField.tsx b/interface/src/ui/forms/TextAreaField.tsx
deleted file mode 100644
index d83d81bd5..000000000
--- a/interface/src/ui/forms/TextAreaField.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { useFormContext, Controller } from "react-hook-form";
-import { TextArea, type TextAreaProps, Label } from "../Input";
-import { ErrorMessage } from "./Form";
-import { cx } from "../utils";
-
-export interface TextAreaFieldProps extends Omit<TextAreaProps, "name"> {
-  name: string;
-  label?: string;
-  description?: string;
-  className?: string;
-}
-
-export const TextAreaField = React.forwardRef<
-  HTMLTextAreaElement,
-  TextAreaFieldProps
->(({ name, label, description, className, ...props }, ref) => {
-  const { control, formState } = useFormContext();
-  const error = formState.errors[name]?.message as string | undefined;
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field }) => (
-        <div className={cx("space-y-1.5", className)}>
-          {label && <Label htmlFor={name}>{label}</Label>}
-          <TextArea
-            {...field}
-            {...props}
-            ref={ref}
-            id={name}
-            error={!!error}
-          />
-          {description && !error && (
-            <p className="text-xs text-ink-dull">{description}</p>
-          )}
-          {error && <ErrorMessage error={error} />}
-        </div>
-      )}
-    />
-  );
-});
-
-TextAreaField.displayName = "TextAreaField";
diff --git a/interface/src/ui/forms/index.ts b/interface/src/ui/forms/index.ts
deleted file mode 100644
index c8348526d..000000000
--- a/interface/src/ui/forms/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-export * from "./Form";
-export * from "./FormField";
-export * from "./InputField";
-export * from "./TextAreaField";
-export * from "./CheckBoxField";
-export * from "./SwitchField";
-export * from "./SelectField";
diff --git a/interface/src/ui/index.ts b/interface/src/ui/index.ts
deleted file mode 100644
index c690699ee..000000000
--- a/interface/src/ui/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export { cva, cx, cn, tw, type VariantProps } from "./utils";
-
-export * from "./Button";
-export * from "./Input";
-export * from "./Card";
-export * from "./Badge";
-export * from "./Banner";
-export * from "./Toggle";
-export * from "./Dialog";
-export * from "./Dropdown";
-export * from "./Select";
-export * from "./Tabs";
-export * from "./Tooltip";
-export * from "./Typography";
-export * from "./Divider";
-export * from "./Loader";
-export * from "./Checkbox";
-export * from "./RadioGroup";
-export * from "./Popover";
-export * from "./Slider";
-export * from "./ProgressBar";
-export * from "./SettingSidebarButton";
-export * from "./ToggleGroup";
-export * from "./FilterButton";
-export * from "./NumberStepper";
-export * as Forms from "./forms";
diff --git a/interface/src/ui/style/colors.scss b/interface/src/ui/style/colors.scss
deleted file mode 100644
index 5a6270348..000000000
--- a/interface/src/ui/style/colors.scss
+++ /dev/null
@@ -1,198 +0,0 @@
-:root {
-	--dark-hue: 230;
-	--light-hue: 230;
-
-	// global
-	--color-black: 0, 0%, 0%;
-	--color-white: 0, 0%, 100%;
-	// accent theme colors
-	--color-accent: 282, 70%, 57%;
-	--color-accent-faint: 282, 65%, 64%;
-	--color-accent-deep: 282, 75%, 48%;
-	// text
-	--color-ink: var(--dark-hue), 15%, 94%;
-	--color-ink-dull: var(--dark-hue), 8%, 65%;
-	--color-ink-faint: var(--dark-hue), 5%, 45%;
-	// sidebar
-	--color-sidebar: var(--dark-hue), 8%, 3%;
-	--color-sidebar-box: var(--dark-hue), 8%, 6%;
-	--color-sidebar-line: var(--dark-hue), 8%, 12%;
-	--color-sidebar-ink: var(--dark-hue), 15%, 94%;
-	--color-sidebar-ink-dull: var(--dark-hue), 8%, 65%;
-	--color-sidebar-ink-faint: var(--dark-hue), 5%, 45%;
-	--color-sidebar-divider: var(--dark-hue), 8%, 5%;
-	--color-sidebar-button: var(--dark-hue), 8%, 12%;
-	--color-sidebar-selected: var(--dark-hue), 8%, 15%;
-	--color-sidebar-shade: var(--dark-hue), 8%, 12%;
-	// main
-	--color-app: var(--dark-hue), 8%, 5%;
-	--color-app-box: var(--dark-hue), 8%, 8%;
-	--color-app-dark-box: var(--dark-hue), 8%, 6%;
-	--color-app-darker-box: var(--dark-hue), 8%, 4%;
-	--color-app-light-box: var(--dark-hue), 8%, 15%;
-	--color-app-overlay: var(--dark-hue), 8%, 7%;
-	--color-app-input: var(--dark-hue), 8%, 10%;
-	--color-app-focus: var(--dark-hue), 8%, 4%;
-	--color-app-line: var(--dark-hue), 8%, 14%;
-	--color-app-divider: var(--dark-hue), 8%, 3%;
-	--color-app-button: var(--dark-hue), 8%, 12%;
-	--color-app-hover: var(--dark-hue), 8%, 16%;
-	--color-app-selected: var(--dark-hue), 8%, 18%;
-	--color-app-selected-item: var(--dark-hue), 8%, 8%;
-	--color-app-active: var(--dark-hue), 8%, 20%;
-	--color-app-shade: var(--dark-hue), 8%, 0%;
-	--color-app-frame: var(--dark-hue), 8%, 16%;
-	--color-app-slider: var(--dark-hue), 8%, 10%;
-	--color-app-explorer-scrollbar: var(--dark-hue), 8%, 18%;
-	// menu
-	--color-menu: var(--dark-hue), 8%, 4%;
-	--color-menu-line: var(--dark-hue), 8%, 8%;
-	--color-menu-ink: var(--dark-hue), 15%, 94%;
-	--color-menu-faint: var(--dark-hue), 5%, 65%;
-	--color-menu-hover: var(--dark-hue), 8%, 16%;
-	--color-menu-selected: var(--dark-hue), 5%, 18%;
-	--color-menu-shade: var(--dark-hue), 5%, 0%;
-}
-
-.vanilla-theme {
-	--color-black: 0, 0%, 0%;
-	--color-white: 0, 0%, 100%;
-	--color-accent: 208, 100%, 57%;
-	--color-accent-faint: 208, 100%, 67%;
-	--color-accent-deep: 208, 100%, 47%;
-	--color-ink: var(--light-hue), 5%, 25%;
-	--color-ink-dull: var(--light-hue), 5%, 40%;
-	--color-ink-faint: var(--light-hue), 5%, 60%;
-	--color-sidebar: var(--light-hue), 5%, 96%;
-	--color-sidebar-box: var(--light-hue), 5%, 100%;
-	--color-sidebar-line: var(--light-hue), 10%, 85%;
-	--color-sidebar-ink: var(--light-hue), 5%, 25%;
-	--color-sidebar-ink-dull: var(--light-hue), 5%, 35%;
-	--color-sidebar-ink-faint: var(--light-hue), 5%, 45%;
-	--color-sidebar-divider: var(--light-hue), 15%, 93%;
-	--color-sidebar-button: var(--light-hue), 15%, 100%;
-	--color-sidebar-selected: var(--light-hue), 10%, 80%;
-	--color-sidebar-shade: var(--light-hue), 15%, 100%;
-	--color-app: var(--light-hue), 5%, 100%;
-	--color-app-box: var(--light-hue), 5%, 98%;
-	--color-app-dark-box: var(--light-hue), 5%, 97%;
-	--color-app-darker-box: var(--light-hue), 5%, 95%;
-	--color-app-light-box: var(--light-hue), 5%, 95%;
-	--color-app-overlay: var(--light-hue), 5%, 100%;
-	--color-app-input: var(--light-hue), 5%, 100%;
-	--color-app-focus: var(--light-hue), 5%, 98%;
-	--color-app-line: var(--light-hue), 5%, 90%;
-	--color-app-button: var(--light-hue), 5%, 100%;
-	--color-app-divider: var(--light-hue), 5%, 80%;
-	--color-app-selected: var(--light-hue), 5%, 93%;
-	--color-app-selected-item: var(--light-hue), 5%, 96%;
-	--color-app-hover: var(--light-hue), 5%, 97%;
-	--color-app-active: var(--light-hue), 5%, 87%;
-	--color-app-shade: var(--light-hue), 15%, 50%;
-	--color-app-frame: 0, 0%, 100%;
-	--color-app-slider: var(--light-hue), 5%, 95%;
-	--color-app-explorer-scrollbar: var(--light-hue), 5%, 75%;
-	--color-menu: var(--light-hue), 5%, 98%;
-	--color-menu-line: var(--light-hue), 5%, 95%;
-	--color-menu-ink: var(--light-hue), 5%, 20%;
-	--color-menu-faint: var(--light-hue), 5%, 80%;
-	--color-menu-hover: var(--light-hue), 15%, 20%;
-	--color-menu-selected: var(--light-hue), 5%, 30%;
-	--color-menu-shade: var(--light-hue), 5%, 0%;
-}
-
-.midnight-theme {
-	--dark-hue: 240;
-	--color-black: 0, 0%, 0%;
-	--color-white: 0, 0%, 100%;
-	--color-accent: 208, 100%, 57%;
-	--color-accent-faint: 208, 100%, 64%;
-	--color-accent-deep: 208, 100%, 47%;
-	--color-ink: var(--dark-hue), 20%, 88%;
-	--color-ink-dull: var(--dark-hue), 8%, 65%;
-	--color-ink-faint: var(--dark-hue), 8%, 50%;
-	--color-sidebar: var(--dark-hue), 30%, 4%;
-	--color-sidebar-box: var(--dark-hue), 25%, 8%;
-	--color-sidebar-line: var(--dark-hue), 20%, 15%;
-	--color-sidebar-ink: var(--dark-hue), 20%, 88%;
-	--color-sidebar-ink-dull: var(--dark-hue), 8%, 65%;
-	--color-sidebar-ink-faint: var(--dark-hue), 8%, 50%;
-	--color-sidebar-divider: var(--dark-hue), 25%, 9%;
-	--color-sidebar-button: var(--dark-hue), 25%, 10%;
-	--color-sidebar-selected: var(--dark-hue), 25%, 16%;
-	--color-sidebar-shade: var(--dark-hue), 20%, 15%;
-	--color-app: var(--dark-hue), 25%, 8%;
-	--color-app-box: var(--dark-hue), 20%, 12%;
-	--color-app-dark-box: var(--dark-hue), 25%, 9%;
-	--color-app-darker-box: var(--dark-hue), 28%, 6%;
-	--color-app-light-box: var(--dark-hue), 20%, 16%;
-	--color-app-overlay: var(--dark-hue), 25%, 11%;
-	--color-app-input: var(--dark-hue), 20%, 14%;
-	--color-app-focus: var(--dark-hue), 25%, 6%;
-	--color-app-line: var(--dark-hue), 20%, 16%;
-	--color-app-divider: var(--dark-hue), 25%, 3%;
-	--color-app-button: var(--dark-hue), 20%, 16%;
-	--color-app-hover: var(--dark-hue), 20%, 18%;
-	--color-app-selected: var(--dark-hue), 20%, 20%;
-	--color-app-selected-item: var(--dark-hue), 20%, 12%;
-	--color-app-active: var(--dark-hue), 20%, 22%;
-	--color-app-shade: var(--dark-hue), 25%, 0%;
-	--color-app-frame: var(--dark-hue), 20%, 18%;
-	--color-app-slider: var(--dark-hue), 20%, 14%;
-	--color-app-explorer-scrollbar: var(--dark-hue), 25%, 20%;
-	--color-menu: var(--dark-hue), 25%, 6%;
-	--color-menu-line: var(--dark-hue), 20%, 10%;
-	--color-menu-ink: var(--dark-hue), 20%, 88%;
-	--color-menu-faint: var(--dark-hue), 5%, 75%;
-	--color-menu-hover: var(--dark-hue), 20%, 22%;
-	--color-menu-selected: var(--dark-hue), 10%, 22%;
-	--color-menu-shade: var(--dark-hue), 10%, 0%;
-}
-
-.noir-theme {
-	--dark-hue: 0;
-	--color-black: 0, 0%, 0%;
-	--color-white: 0, 0%, 100%;
-	--color-accent: 208, 100%, 57%;
-	--color-accent-faint: 208, 100%, 64%;
-	--color-accent-deep: 208, 100%, 47%;
-	--color-ink: 0, 0%, 90%;
-	--color-ink-dull: 0, 0%, 70%;
-	--color-ink-faint: 0, 0%, 50%;
-	--color-sidebar: 0, 0%, 0%;
-	--color-sidebar-box: 0, 0%, 4%;
-	--color-sidebar-line: 0, 0%, 12%;
-	--color-sidebar-ink: 0, 0%, 90%;
-	--color-sidebar-ink-dull: 0, 0%, 70%;
-	--color-sidebar-ink-faint: 0, 0%, 50%;
-	--color-sidebar-divider: 0, 0%, 5%;
-	--color-sidebar-button: 0, 0%, 6%;
-	--color-sidebar-selected: 0, 0%, 12%;
-	--color-sidebar-shade: 0, 0%, 0%;
-	--color-app: 0, 0%, 3%;
-	--color-app-box: 0, 0%, 8%;
-	--color-app-dark-box: 0, 0%, 5%;
-	--color-app-darker-box: 0, 0%, 2%;
-	--color-app-light-box: 0, 0%, 12%;
-	--color-app-overlay: 0, 0%, 7%;
-	--color-app-input: 0, 0%, 10%;
-	--color-app-focus: 0, 0%, 2%;
-	--color-app-line: 0, 0%, 14%;
-	--color-app-divider: 0, 0%, 0%;
-	--color-app-button: 0, 0%, 12%;
-	--color-app-hover: 0, 0%, 14%;
-	--color-app-selected: 0, 0%, 16%;
-	--color-app-selected-item: 0, 0%, 8%;
-	--color-app-active: 0, 0%, 18%;
-	--color-app-shade: 0, 0%, 0%;
-	--color-app-frame: 0, 0%, 14%;
-	--color-app-slider: 0, 0%, 10%;
-	--color-app-explorer-scrollbar: 0, 0%, 18%;
-	--color-menu: 0, 0%, 2%;
-	--color-menu-line: 0, 0%, 8%;
-	--color-menu-ink: 0, 0%, 90%;
-	--color-menu-faint: 0, 0%, 70%;
-	--color-menu-hover: 0, 0%, 16%;
-	--color-menu-selected: 0, 0%, 18%;
-	--color-menu-shade: 0, 0%, 0%;
-}
diff --git a/interface/src/ui/style/style.scss b/interface/src/ui/style/style.scss
deleted file mode 100644
index 5200fdea9..000000000
--- a/interface/src/ui/style/style.scss
+++ /dev/null
@@ -1,134 +0,0 @@
-@use './colors.scss';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-	.no-scrollbar::-webkit-scrollbar {
-		display: none;
-	}
-
-	.no-scrollbar {
-		-ms-overflow-style: none;
-		scrollbar-width: none;
-	}
-
-}
-
-html, body {
-	overflow: hidden;
-	height: 100%;
-}
-
-html {
-	font-size: 106.25%;
-	background: hsla(var(--color-app), 1);
-}
-
-body {
-	@apply font-plex text-ink bg-app;
-}
-
-/* Markdown prose styling for message content */
-.markdown {
-	@apply leading-relaxed;
-
-	p {
-		@apply my-1;
-	}
-
-	p:first-child {
-		@apply mt-0;
-	}
-
-	p:last-child {
-		@apply mb-0;
-	}
-
-	strong {
-		@apply font-semibold text-ink;
-	}
-
-	em {
-		@apply italic;
-	}
-
-	a {
-		@apply text-accent underline decoration-accent/30 hover:decoration-accent/60;
-	}
-
-	code {
-		@apply rounded bg-app-darkBox px-1.5 py-0.5 font-mono text-xs text-ink;
-	}
-
-	pre {
-		@apply my-2 overflow-x-auto rounded-md bg-app-darkBox p-3;
-
-		code {
-			@apply bg-transparent p-0;
-		}
-	}
-
-	ul, ol {
-		@apply my-1.5 pl-5;
-	}
-
-	ul {
-		@apply list-disc;
-	}
-
-	ol {
-		@apply list-decimal;
-	}
-
-	li {
-		@apply my-0.5;
-	}
-
-	blockquote {
-		@apply my-2 border-l-2 border-app-line pl-3 italic text-ink-faint;
-	}
-
-	h1, h2, h3, h4, h5, h6 {
-		@apply mt-3 mb-1 font-semibold text-ink;
-	}
-
-	h1 { @apply text-lg; }
-	h2 { @apply text-base; }
-	h3, h4, h5, h6 { @apply text-sm; }
-
-	hr {
-		@apply my-3 border-app-line;
-	}
-
-	table {
-		@apply my-2 w-full text-sm;
-	}
-
-	th {
-		@apply border border-app-line bg-app-darkBox px-2 py-1 text-left font-medium text-ink;
-	}
-
-	td {
-		@apply border border-app-line px-2 py-1;
-	}
-
-	img {
-		@apply my-2 max-w-full rounded;
-	}
-}
-
-// Hide React Query devtools toggle button (still accessible by clicking the area)
-.tsqd-open-btn-container {
-	opacity: 0 !important;
-}
-
-// Override React Flow's default group node styles
-.react-flow__node-group {
-	background-color: transparent !important;
-	border: none !important;
-	padding: 0 !important;
-	width: auto !important;
-	box-shadow: none !important;
-}
diff --git a/interface/src/ui/utils.tsx b/interface/src/ui/utils.tsx
deleted file mode 100644
index e8a7e34ed..000000000
--- a/interface/src/ui/utils.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as React from "react";
-import { cva as cvaOriginal, cx as cxOriginal, type VariantProps } from "class-variance-authority";
-
-export { VariantProps };
-export const cva = cvaOriginal;
-export const cx = cxOriginal;
-
-type ElementType = keyof React.JSX.IntrinsicElements;
-
-type TailwindFactory = {
-  [K in ElementType]: (
-    strings: TemplateStringsArray,
-    ...values: (string | number | undefined | null | false)[]
-  ) => React.ForwardRefExoticComponent<
-    React.PropsWithoutRef<React.JSX.IntrinsicElements[K]> & React.RefAttributes<HTMLElement>
-  >;
-} & {
-  <T extends React.ComponentType<any>>(
-    component: T
-  ): (
-    strings: TemplateStringsArray,
-    ...values: (string | number | undefined | null | false)[]
-  ) => React.ForwardRefExoticComponent<
-    React.PropsWithoutRef<React.ComponentPropsWithoutRef<T>> & React.RefAttributes<any>
-  >;
-};
-
-function twFactory<T extends ElementType | React.ComponentType<any>>(type: T) {
-  return (
-    strings: TemplateStringsArray,
-    ...values: (string | number | undefined | null | false)[]
-  ): React.ForwardRefExoticComponent<any> => {
-    const baseClasses = strings.reduce((acc, str, i) => {
-      const value = values[i];
-      if (value === undefined || value === null || value === false) {
-        return acc + str;
-      }
-      return acc + str + String(value);
-    }, "");
-
-    return React.forwardRef((props: any, ref) => {
-      const { className, ...rest } = props;
-      const finalClassName = cx(baseClasses, className);
-      
-      if (typeof type === "string") {
-        return React.createElement(type, {
-          ref,
-          className: finalClassName,
-          ...rest,
-        });
-      }
-      
-      return React.createElement(type, {
-        ref,
-        className: finalClassName,
-        ...rest,
-      });
-    }) as any;
-  };
-}
-
-export const tw = new Proxy((() => {}) as unknown as TailwindFactory, {
-  get(_, property: string) {
-    return twFactory(property as ElementType);
-  },
-  apply(_, __, [element]: [React.ComponentType<any>]) {
-    return twFactory(element);
-  },
-});
-
-export function cn(...inputs: (string | number | undefined | null | false)[]) {
-  return cx(inputs);
-}
diff --git a/interface/tailwind.config.ts b/interface/tailwind.config.ts
deleted file mode 100644
index 39092c556..000000000
--- a/interface/tailwind.config.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import defaultTheme from "tailwindcss/defaultTheme";
-import type { Config } from "tailwindcss";
-
-function alpha(variableName: string) {
-	return `hsla(var(${variableName}), <alpha-value>)`;
-}
-
-export default {
-	content: ["./index.html", "./src/**/*.{ts,tsx}"],
-
-	theme: {
-		screens: {
-			xs: "475px",
-			sm: "650px",
-			md: "868px",
-			lg: "1024px",
-			xl: "1280px",
-		},
-		fontFamily: {
-			sans: [...defaultTheme.fontFamily.sans],
-			mono: [...defaultTheme.fontFamily.mono],
-			plex: ["IBM Plex Sans", ...defaultTheme.fontFamily.sans],
-		},
-		fontSize: {
-			tiny: ".70rem",
-			xs: ".75rem",
-			sm: ".80rem",
-			base: "1rem",
-			lg: "1.125rem",
-			xl: "1.25rem",
-			"2xl": "1.5rem",
-			"3xl": "1.875rem",
-			"4xl": "2.25rem",
-			"5xl": "3rem",
-			"6xl": "4rem",
-			"7xl": "5rem",
-		},
-		extend: {
-			colors: {
-				accent: {
-					DEFAULT: alpha("--color-accent"),
-					faint: alpha("--color-accent-faint"),
-					deep: alpha("--color-accent-deep"),
-				},
-				ink: {
-					DEFAULT: alpha("--color-ink"),
-					dull: alpha("--color-ink-dull"),
-					faint: alpha("--color-ink-faint"),
-				},
-				sidebar: {
-					DEFAULT: alpha("--color-sidebar"),
-					box: alpha("--color-sidebar-box"),
-					line: alpha("--color-sidebar-line"),
-					ink: alpha("--color-sidebar-ink"),
-					inkFaint: alpha("--color-sidebar-ink-faint"),
-					inkDull: alpha("--color-sidebar-ink-dull"),
-					divider: alpha("--color-sidebar-divider"),
-					button: alpha("--color-sidebar-button"),
-					selected: alpha("--color-sidebar-selected"),
-					shade: alpha("--color-sidebar-shade"),
-				},
-				app: {
-					DEFAULT: alpha("--color-app"),
-					box: alpha("--color-app-box"),
-					darkBox: alpha("--color-app-dark-box"),
-					darkerBox: alpha("--color-app-darker-box"),
-					lightBox: alpha("--color-app-light-box"),
-					overlay: alpha("--color-app-overlay"),
-					input: alpha("--color-app-input"),
-					focus: alpha("--color-app-focus"),
-					line: alpha("--color-app-line"),
-					divider: alpha("--color-app-divider"),
-					button: alpha("--color-app-button"),
-					selected: alpha("--color-app-selected"),
-					selectedItem: alpha("--color-app-selected-item"),
-					hover: alpha("--color-app-hover"),
-					active: alpha("--color-app-active"),
-					shade: alpha("--color-app-shade"),
-					frame: alpha("--color-app-frame"),
-					slider: alpha("--color-app-slider"),
-					explorerScrollbar: alpha("--color-app-explorer-scrollbar"),
-				},
-				menu: {
-					DEFAULT: alpha("--color-menu"),
-					line: alpha("--color-menu-line"),
-					hover: alpha("--color-menu-hover"),
-					selected: alpha("--color-menu-selected"),
-					shade: alpha("--color-menu-shade"),
-					ink: alpha("--color-menu-ink"),
-					faint: alpha("--color-menu-faint"),
-				},
-			},
-			transitionTimingFunction: {
-				"in-sine": "cubic-bezier(0.12, 0, 0.39, 0)",
-				"out-sine": "cubic-bezier(0.61, 1, 0.88, 1)",
-				"in-out-sine": "cubic-bezier(0.37, 0, 0.63, 1)",
-				"in-cubic": "cubic-bezier(0.32, 0, 0.67, 0)",
-				"out-cubic": "cubic-bezier(0.33, 1, 0.68, 1)",
-				"in-out-cubic": "cubic-bezier(0.65, 0, 0.35, 1)",
-				"in-expo": "cubic-bezier(0.7, 0, 0.84, 0)",
-				"out-expo": "cubic-bezier(0.16, 1, 0.3, 1)",
-				"in-out-expo": "cubic-bezier(0.87, 0, 0.13, 1)",
-			},
-		},
-	},
-	plugins: [
-		require("tailwindcss-animate"),
-	],
-} satisfies Config;
diff --git a/interface/vite.config.ts b/interface/vite.config.ts
index 31b763366..4682a58eb 100644
--- a/interface/vite.config.ts
+++ b/interface/vite.config.ts
@@ -1,30 +1,109 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
 import path from "node:path";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+const spaceui = path.resolve(__dirname, "../../spaceui/packages");
 
 export default defineConfig({
-	plugins: [react()],
+	plugins: [react(), tailwindcss()],
+
 	resolve: {
-		alias: {
-			"@": path.resolve(__dirname, "src"),
-		},
+		dedupe: ["react", "react-dom"],
+		alias: [
+			// Pin React to a single copy (prevents "Invalid hook call")
+			{
+				find: /^react$/,
+				replacement: path.resolve(
+					__dirname,
+					"./node_modules/react/index.js",
+				),
+			},
+			{
+				find: /^react\/jsx-runtime$/,
+				replacement: path.resolve(
+					__dirname,
+					"./node_modules/react/jsx-runtime.js",
+				),
+			},
+			{
+				find: /^react\/jsx-dev-runtime$/,
+				replacement: path.resolve(
+					__dirname,
+					"./node_modules/react/jsx-dev-runtime.js",
+				),
+			},
+			{
+				find: /^react-dom$/,
+				replacement: path.resolve(
+					__dirname,
+					"./node_modules/react-dom/index.js",
+				),
+			},
+			{
+				find: /^react-dom\/client$/,
+				replacement: path.resolve(
+					__dirname,
+					"./node_modules/react-dom/client.js",
+				),
+			},
+
+			// SpaceUI — resolve to source for HMR
+			{
+				find: "@spacedrive/tokens/src/css",
+				replacement: `${spaceui}/tokens/src/css`,
+			},
+			{
+				find: "@spacedrive/tokens",
+				replacement: `${spaceui}/tokens`,
+			},
+			{
+				find: "@spacedrive/primitives",
+				replacement: `${spaceui}/primitives/src/index.ts`,
+			},
+			{
+				find: "@spacedrive/ai",
+				replacement: `${spaceui}/ai/src/index.ts`,
+			},
+			{
+				find: "@spacedrive/forms",
+				replacement: `${spaceui}/forms/src/index.ts`,
+			},
+			{
+				find: "@spacedrive/explorer",
+				replacement: `${spaceui}/explorer/src/index.ts`,
+			},
+
+			// Project alias
+			{ find: "@", replacement: path.resolve(__dirname, "src") },
+		],
+	},
+
+	optimizeDeps: {
+		exclude: [
+			"@spacedrive/tokens",
+			"@spacedrive/primitives",
+			"@spacedrive/ai",
+			"@spacedrive/forms",
+			"@spacedrive/explorer",
+		],
 	},
+
 	server: {
 		port: 19840,
+		fs: {
+			allow: [
+				path.resolve(__dirname, ".."),
+				path.resolve(__dirname, "../../spaceui"),
+			],
+		},
 		proxy: {
 			"/api": {
 				target: "http://127.0.0.1:19898",
 				changeOrigin: true,
-				// SSE: the default http-proxy timeout (2 min) kills long-lived
-				// event-stream connections.  Setting timeout to 0 disables it.
-				// The proxyRes handler also strips buffering hints so chunks
-				// flush immediately.
 				timeout: 0,
 				configure: (proxy) => {
 					proxy.on("proxyReq", (_proxyReq, req, _res) => {
-						// Disable socket timeout for SSE requests so Node
-						// doesn't close the connection after 2 minutes of
-						// "inactivity" (SSE heartbeats aren't frequent enough).
 						if (req.headers.accept?.includes("text/event-stream")) {
 							_proxyReq.socket?.setTimeout?.(0);
 						}
@@ -34,7 +113,6 @@ export default defineConfig({
 						if (ct.includes("text/event-stream")) {
 							proxyRes.headers["cache-control"] = "no-cache";
 							proxyRes.headers["x-accel-buffering"] = "no";
-							// Keep the socket alive indefinitely for SSE
 							proxyRes.socket?.setTimeout?.(0);
 							req.socket?.setTimeout?.(0);
 						}
@@ -43,6 +121,7 @@ export default defineConfig({
 			},
 		},
 	},
+
 	build: {
 		outDir: "dist",
 		emptyOutDir: true,
diff --git a/justfile b/justfile
index 1958d272b..0b4f62c52 100644
--- a/justfile
+++ b/justfile
@@ -24,6 +24,29 @@ test-lib:
 test-integration-compile:
     cargo test --tests --no-run
 
+# Link local SpaceUI packages for development.
+# Expects the spaceui repo cloned adjacent to this repo (../spaceui).
+spaceui-link:
+    #!/usr/bin/env bash
+    set -euo pipefail
+    if [ ! -d ../spaceui/packages ]; then
+        echo "Error: ../spaceui not found. Clone it adjacent to this repo:"
+        echo "  git clone https://github.com/spacedriveapp/spaceui ../spaceui"
+        exit 1
+    fi
+    cd ../spaceui
+    bun install && bun run build --filter='@spacedrive/primitives' --filter='@spacedrive/ai' --filter='@spacedrive/forms' --filter='@spacedrive/explorer' --filter='@spacedrive/tokens'
+    for pkg in primitives ai forms explorer tokens; do
+        cd packages/$pkg && bun link && cd ../..
+    done
+    cd "{{justfile_directory()}}/interface"
+    bun link @spacedrive/primitives @spacedrive/ai @spacedrive/forms @spacedrive/explorer @spacedrive/tokens
+    echo "SpaceUI packages linked successfully."
+
+# Unlink SpaceUI packages and restore npm versions.
+spaceui-unlink:
+    cd interface && bun unlink @spacedrive/primitives @spacedrive/ai @spacedrive/forms @spacedrive/explorer @spacedrive/tokens && bun install
+
 gate-pr: preflight
     ./scripts/gate-pr.sh
 
@@ -58,12 +81,12 @@ bundle-sidecar:
     ./scripts/bundle-sidecar.sh --release
 
 # Run the desktop app in development mode.
-# Tauri's beforeDevCommand handles sidecar bundling and Vite automatically.
+# The desktop package script pre-bundles the sidecar, and Tauri starts Vite.
 desktop-dev:
     cd desktop && bun run tauri:dev
 
 # Build the full desktop app (sidecar + frontend + Tauri bundle).
-# Tauri's beforeBuildCommand handles sidecar bundling and frontend build automatically.
+# The desktop package script pre-bundles the sidecar, and Tauri builds the frontend.
 desktop-build:
     cd desktop && bun run tauri:build
 
diff --git a/migrations/20260404000001_projects_global.sql b/migrations/20260404000001_projects_global.sql
new file mode 100644
index 000000000..f4526347b
--- /dev/null
+++ b/migrations/20260404000001_projects_global.sql
@@ -0,0 +1,29 @@
+-- Make projects a global concept (not per-agent).
+--
+-- Previously projects were scoped by agent_id with a unique constraint on
+-- (agent_id, root_path). Now projects are shared across all agents with a
+-- unique constraint on just root_path.
+--
+-- SQLite doesn't support DROP CONSTRAINT, so we recreate the table.
+
+CREATE TABLE projects_new (
+    id TEXT PRIMARY KEY NOT NULL,
+    name TEXT NOT NULL DEFAULT '',
+    description TEXT NOT NULL DEFAULT '',
+    icon TEXT NOT NULL DEFAULT '',
+    tags TEXT NOT NULL DEFAULT '[]',
+    root_path TEXT NOT NULL,
+    settings TEXT NOT NULL DEFAULT '{}',
+    status TEXT NOT NULL DEFAULT 'active',
+    created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+INSERT INTO projects_new (id, name, description, icon, tags, root_path, settings, status, created_at, updated_at)
+SELECT id, name, description, icon, tags, root_path, settings, status, created_at, updated_at
+FROM projects;
+
+DROP TABLE projects;
+ALTER TABLE projects_new RENAME TO projects;
+
+CREATE UNIQUE INDEX idx_projects_root_path ON projects(root_path);
diff --git a/migrations/20260404000002_project_logo.sql b/migrations/20260404000002_project_logo.sql
new file mode 100644
index 000000000..8d7a7b6b1
--- /dev/null
+++ b/migrations/20260404000002_project_logo.sql
@@ -0,0 +1,2 @@
+-- Add logo_path column to projects table for auto-detected project logos.
+ALTER TABLE projects ADD COLUMN logo_path TEXT;
diff --git a/migrations/20260404120000_drop_per_agent_projects.sql b/migrations/20260404120000_drop_per_agent_projects.sql
new file mode 100644
index 000000000..40c8421ac
--- /dev/null
+++ b/migrations/20260404120000_drop_per_agent_projects.sql
@@ -0,0 +1,8 @@
+-- Projects, repos, and worktrees have moved to the instance-level database
+-- (spacebot.db). Drop the per-agent tables after the data migration has run.
+-- The migration runs on startup from `projects::migration::migrate_legacy_projects`,
+-- which copies rows into the instance DB before this migration drops the tables.
+
+DROP TABLE IF EXISTS project_worktrees;
+DROP TABLE IF EXISTS project_repos;
+DROP TABLE IF EXISTS projects;
diff --git a/migrations/20260407000001_token_usage.sql b/migrations/20260407000001_token_usage.sql
new file mode 100644
index 000000000..e47dab6b2
--- /dev/null
+++ b/migrations/20260407000001_token_usage.sql
@@ -0,0 +1,22 @@
+-- Token usage tracking: one row per process invocation.
+CREATE TABLE IF NOT EXISTS token_usage (
+    id                  TEXT PRIMARY KEY DEFAULT (lower(hex(randomblob(16)))),
+    agent_id            TEXT NOT NULL,
+    process_type        TEXT NOT NULL,
+    conversation_id     TEXT,
+    model               TEXT NOT NULL,
+    provider            TEXT NOT NULL,
+    input_tokens        INTEGER NOT NULL DEFAULT 0,
+    output_tokens       INTEGER NOT NULL DEFAULT 0,
+    cache_read_tokens   INTEGER NOT NULL DEFAULT 0,
+    cache_write_tokens  INTEGER NOT NULL DEFAULT 0,
+    reasoning_tokens    INTEGER NOT NULL DEFAULT 0,
+    request_count       INTEGER NOT NULL DEFAULT 0,
+    estimated_cost_usd  REAL,
+    cost_status         TEXT NOT NULL DEFAULT 'unknown',
+    recorded_at         TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ', 'now'))
+);
+
+CREATE INDEX IF NOT EXISTS idx_token_usage_agent    ON token_usage(agent_id, recorded_at DESC);
+CREATE INDEX IF NOT EXISTS idx_token_usage_conv     ON token_usage(conversation_id) WHERE conversation_id IS NOT NULL;
+CREATE INDEX IF NOT EXISTS idx_token_usage_recorded ON token_usage(recorded_at DESC);
diff --git a/migrations/global/20260404120000_projects.sql b/migrations/global/20260404120000_projects.sql
new file mode 100644
index 000000000..59ed63794
--- /dev/null
+++ b/migrations/global/20260404120000_projects.sql
@@ -0,0 +1,56 @@
+-- Projects, repos, and worktrees at the instance level (shared across agents).
+-- A project maps to a directory containing one or more git repos + worktrees.
+
+CREATE TABLE IF NOT EXISTS projects (
+    id TEXT PRIMARY KEY NOT NULL,
+    name TEXT NOT NULL DEFAULT '',
+    description TEXT NOT NULL DEFAULT '',
+    icon TEXT NOT NULL DEFAULT '',
+    tags TEXT NOT NULL DEFAULT '[]',
+    root_path TEXT NOT NULL,
+    logo_path TEXT,
+    settings TEXT NOT NULL DEFAULT '{}',
+    status TEXT NOT NULL DEFAULT 'active',
+    created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE UNIQUE INDEX IF NOT EXISTS idx_projects_root_path ON projects(root_path);
+CREATE INDEX IF NOT EXISTS idx_projects_status ON projects(status);
+
+CREATE TABLE IF NOT EXISTS project_repos (
+    id TEXT PRIMARY KEY NOT NULL,
+    project_id TEXT NOT NULL,
+    name TEXT NOT NULL,
+    path TEXT NOT NULL,
+    remote_url TEXT NOT NULL DEFAULT '',
+    default_branch TEXT NOT NULL DEFAULT 'main',
+    current_branch TEXT,
+    description TEXT NOT NULL DEFAULT '',
+    disk_usage_bytes INTEGER,
+    created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (project_id) REFERENCES projects(id) ON DELETE CASCADE
+);
+
+CREATE INDEX IF NOT EXISTS idx_project_repos_project ON project_repos(project_id);
+CREATE UNIQUE INDEX IF NOT EXISTS idx_project_repos_path ON project_repos(project_id, path);
+
+CREATE TABLE IF NOT EXISTS project_worktrees (
+    id TEXT PRIMARY KEY NOT NULL,
+    project_id TEXT NOT NULL,
+    repo_id TEXT NOT NULL,
+    name TEXT NOT NULL,
+    path TEXT NOT NULL,
+    branch TEXT NOT NULL,
+    created_by TEXT NOT NULL DEFAULT 'user',
+    disk_usage_bytes INTEGER,
+    created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (project_id) REFERENCES projects(id) ON DELETE CASCADE,
+    FOREIGN KEY (repo_id) REFERENCES project_repos(id) ON DELETE CASCADE
+);
+
+CREATE INDEX IF NOT EXISTS idx_project_worktrees_project ON project_worktrees(project_id);
+CREATE INDEX IF NOT EXISTS idx_project_worktrees_repo ON project_worktrees(repo_id);
+CREATE UNIQUE INDEX IF NOT EXISTS idx_project_worktrees_path ON project_worktrees(project_id, path);
diff --git a/migrations/global/20260405120000_notifications.sql b/migrations/global/20260405120000_notifications.sql
new file mode 100644
index 000000000..de125bed0
--- /dev/null
+++ b/migrations/global/20260405120000_notifications.sql
@@ -0,0 +1,41 @@
+-- Instance-level notifications store.
+-- Surfaces actionable events to the dashboard Inbox card.
+
+CREATE TABLE IF NOT EXISTS notifications (
+    id TEXT PRIMARY KEY,
+    -- 'task_approval' | 'worker_failed' | 'cortex_observation'
+    kind TEXT NOT NULL,
+    -- 'info' | 'warn' | 'error'
+    severity TEXT NOT NULL DEFAULT 'info',
+    title TEXT NOT NULL,
+    body TEXT,
+    -- Source agent (NULL means instance-level)
+    agent_id TEXT,
+    -- Type of the related entity: 'task' | 'worker' | 'cortex_event'
+    related_entity_type TEXT,
+    -- ID/number of the related entity
+    related_entity_id TEXT,
+    -- Deep-link the UI action button should navigate to
+    action_url TEXT,
+    metadata TEXT,
+    created_at TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%SZ', 'now')),
+    read_at TEXT,
+    dismissed_at TEXT
+);
+
+-- Fast inbox query: undismissed notifications newest-first
+CREATE INDEX IF NOT EXISTS idx_notifications_inbox
+    ON notifications(dismissed_at, created_at DESC);
+
+CREATE INDEX IF NOT EXISTS idx_notifications_agent
+    ON notifications(agent_id, created_at DESC);
+
+CREATE INDEX IF NOT EXISTS idx_notifications_entity
+    ON notifications(related_entity_type, related_entity_id);
+
+-- Prevent duplicate active notifications for the same entity.
+-- When the same event fires repeatedly (e.g. task toggled back to
+-- pending_approval), INSERT OR IGNORE silently skips the duplicate.
+CREATE UNIQUE INDEX IF NOT EXISTS idx_notifications_entity_active
+    ON notifications(kind, related_entity_type, related_entity_id)
+    WHERE dismissed_at IS NULL;
diff --git a/migrations/global/20260407120000_wiki.sql b/migrations/global/20260407120000_wiki.sql
new file mode 100644
index 000000000..dcfe263ec
--- /dev/null
+++ b/migrations/global/20260407120000_wiki.sql
@@ -0,0 +1,57 @@
+-- Instance-wide wiki: shared knowledge base across all agents and users.
+-- Every edit is versioned permanently — nothing is ever deleted.
+
+CREATE TABLE IF NOT EXISTS wiki_pages (
+    id          TEXT PRIMARY KEY DEFAULT (lower(hex(randomblob(16)))),
+    slug        TEXT NOT NULL UNIQUE,
+    title       TEXT NOT NULL,
+    page_type   TEXT NOT NULL CHECK (page_type IN ('entity', 'concept', 'decision', 'project', 'reference')),
+    content     TEXT NOT NULL DEFAULT '',
+    related     TEXT NOT NULL DEFAULT '[]',    -- JSON array of related page slugs
+    created_by  TEXT NOT NULL,                 -- agent_id or user_id
+    updated_by  TEXT NOT NULL,
+    version     INTEGER NOT NULL DEFAULT 1,
+    archived    INTEGER NOT NULL DEFAULT 0,
+    created_at  TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ', 'now')),
+    updated_at  TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ', 'now'))
+);
+
+CREATE TABLE IF NOT EXISTS wiki_page_versions (
+    id           TEXT PRIMARY KEY DEFAULT (lower(hex(randomblob(16)))),
+    page_id      TEXT NOT NULL REFERENCES wiki_pages(id),
+    version      INTEGER NOT NULL,
+    content      TEXT NOT NULL,
+    edit_summary TEXT,
+    author_type  TEXT NOT NULL CHECK (author_type IN ('agent', 'user')),
+    author_id    TEXT NOT NULL,
+    created_at   TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ', 'now')),
+    UNIQUE (page_id, version)
+);
+
+-- Full-text search across title + content
+CREATE VIRTUAL TABLE IF NOT EXISTS wiki_pages_fts USING fts5(
+    slug UNINDEXED,
+    title,
+    content,
+    content='wiki_pages',
+    content_rowid='rowid'
+);
+
+-- Keep FTS in sync
+CREATE TRIGGER IF NOT EXISTS wiki_pages_fts_insert AFTER INSERT ON wiki_pages BEGIN
+    INSERT INTO wiki_pages_fts(rowid, slug, title, content) VALUES (new.rowid, new.slug, new.title, new.content);
+END;
+
+CREATE TRIGGER IF NOT EXISTS wiki_pages_fts_update AFTER UPDATE ON wiki_pages BEGIN
+    INSERT INTO wiki_pages_fts(wiki_pages_fts, rowid, slug, title, content) VALUES ('delete', old.rowid, old.slug, old.title, old.content);
+    INSERT INTO wiki_pages_fts(rowid, slug, title, content) VALUES (new.rowid, new.slug, new.title, new.content);
+END;
+
+CREATE TRIGGER IF NOT EXISTS wiki_pages_fts_delete AFTER DELETE ON wiki_pages BEGIN
+    INSERT INTO wiki_pages_fts(wiki_pages_fts, rowid, slug, title, content) VALUES ('delete', old.rowid, old.slug, old.title, old.content);
+END;
+
+CREATE INDEX IF NOT EXISTS wiki_pages_type    ON wiki_pages(page_type);
+CREATE INDEX IF NOT EXISTS wiki_pages_updated ON wiki_pages(updated_at DESC);
+CREATE INDEX IF NOT EXISTS wiki_pages_archived ON wiki_pages(archived);
+CREATE INDEX IF NOT EXISTS wiki_versions_page ON wiki_page_versions(page_id, version DESC);
diff --git a/migrations/global/20260409000001_project_sort_order.sql b/migrations/global/20260409000001_project_sort_order.sql
new file mode 100644
index 000000000..942d78c11
--- /dev/null
+++ b/migrations/global/20260409000001_project_sort_order.sql
@@ -0,0 +1,11 @@
+-- Add user-controlled sort order to projects.
+ALTER TABLE projects ADD COLUMN sort_order INTEGER NOT NULL DEFAULT 0;
+
+-- Initialise from creation order so existing projects have a deterministic baseline.
+UPDATE projects
+SET sort_order = (
+    SELECT COUNT(*)
+    FROM projects p2
+    WHERE p2.created_at < projects.created_at
+        OR (p2.created_at = projects.created_at AND p2.id < projects.id)
+);
diff --git a/packages/api-client/package.json b/packages/api-client/package.json
index a87d65c9a..0efe593eb 100644
--- a/packages/api-client/package.json
+++ b/packages/api-client/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@spacebot/api-client",
+  "name": "@spacedrive/api-client",
   "version": "0.1.0",
   "private": true,
   "type": "module",
diff --git a/packages/api-client/src/client.ts b/packages/api-client/src/client.ts
index c94a7d742..76b433389 100644
--- a/packages/api-client/src/client.ts
+++ b/packages/api-client/src/client.ts
@@ -237,4 +237,55 @@ export const apiClient = {
       }),
     });
   },
+
+  // ── Voice / TTS ──────────────────────────────────────────────────────
+
+  webChatSendAudio(
+    agentId: string,
+    sessionId: string,
+    audioBlob: Blob,
+    senderName?: string,
+  ): Promise<Response> {
+    const formData = new FormData();
+    formData.append("agent_id", agentId);
+    formData.append("session_id", sessionId);
+    formData.append("sender_name", senderName ?? "user");
+    formData.append("audio", audioBlob, "voice.webm");
+    return fetch(`${getApiBase()}/webchat/send-audio`, {
+      method: "POST",
+      body: formData,
+      ...(authToken ? { headers: { Authorization: `Bearer ${authToken}` } } : {}),
+    });
+  },
+
+  async ttsGenerate(
+    text: string,
+    options?: { profileId?: string; engine?: string; agentId?: string },
+  ): Promise<ArrayBuffer> {
+    const response = await fetch(`${getApiBase()}/tts/generate`, {
+      method: "POST",
+      headers: buildHeaders(),
+      body: JSON.stringify({
+        text,
+        profile_id: options?.profileId,
+        engine: options?.engine,
+        agent_id: options?.agentId,
+      }),
+    });
+    if (!response.ok) throw new Error(`TTS error: ${response.status}`);
+    return response.arrayBuffer();
+  },
+
+  ttsProfiles(agentId?: string) {
+    const params = agentId ? `?agent_id=${encodeURIComponent(agentId)}` : "";
+    return request<TtsProfile[]>(`/tts/profiles${params}`);
+  },
 };
+
+export interface TtsProfile {
+  id: string;
+  name?: string | null;
+  default_engine?: string | null;
+  preset_engine?: string | null;
+  effects_chain?: unknown;
+}
diff --git a/packages/api-client/src/events.ts b/packages/api-client/src/events.ts
index e330734c8..8c2836777 100644
--- a/packages/api-client/src/events.ts
+++ b/packages/api-client/src/events.ts
@@ -137,6 +137,14 @@ export interface CortexChatMessageEvent {
   tool_calls?: CortexChatToolCall[];
 }
 
+export interface SpokenResponseEvent {
+  type: "spoken_response";
+  agent_id: string;
+  channel_id: string;
+  spoken_text: string;
+  full_text: string;
+}
+
 export type ApiEvent =
   | InboundMessageEvent
   | OutboundMessageEvent
@@ -152,4 +160,5 @@ export type ApiEvent =
   | ToolCompletedEvent
   | OpenCodePartUpdatedEvent
   | WorkerTextEvent
-  | CortexChatMessageEvent;
+  | CortexChatMessageEvent
+  | SpokenResponseEvent;
diff --git a/prompts/en/adapters/cron.md.j2 b/prompts/en/adapters/cron.md.j2
index dc31f629b..9d2df2f44 100644
--- a/prompts/en/adapters/cron.md.j2
+++ b/prompts/en/adapters/cron.md.j2
@@ -1,11 +1,19 @@
 This is an automated scheduled task, not a live conversation. There is no human present.
 
 - Do not ask clarifying questions or wait for follow-up — there won't be any.
-- **Always delegate.** Spawn workers for every data-gathering subtask — web searches, API checks, GitHub activity, system health, external lookups. Spawn multiple workers in parallel when the prompt covers independent topics. Branch for memory recall and context synthesis.
+- **Always delegate.** Spawn workers for every data-gathering subtask — web searches, API checks, GitHub activity, system health, external lookups. Spawn multiple workers in parallel when the prompt covers independent topics.
 - Do not try to answer from your own knowledge. Your job is to orchestrate thorough research and compile the results into a polished deliverable.
-- Wait for all workers and branches to complete before composing your final response. Do not reply with partial results or placeholders.
+- Wait for all workers and branches to complete before composing your final response.
 - Be concise and data-driven in the final output. Lead with findings, not preamble. Include specifics — numbers, dates, names, links.
-- Your entire text output will be delivered as-is to the configured channel. Write it like a finished report.
 - If a worker fails or data is unavailable, say so clearly and include what you were able to gather.
-- Use the `reply` tool for your primary output — it will be delivered to the configured destination automatically.
+- Use `reply()` freely for progress updates — these appear in the channel UI but are NOT delivered to the target.
 - Only use `send_message_to_another_channel` if the task explicitly requires sending to additional channels beyond the primary delivery target.
+
+## Delivery
+
+When all work is complete and you have synthesized the full result, call `set_outcome()` once with the final polished content. This is what gets delivered to the configured target channel.
+
+- `reply()` → channel UI only. Not delivered to the target.
+- `set_outcome()` → stored for delivery when the run finishes.
+- Call `set_outcome()` exactly once with the complete, polished output.
+- If you have nothing meaningful to report, do not call `set_outcome()` at all.
diff --git a/prompts/en/branch.md.j2 b/prompts/en/branch.md.j2
index 995e6aed0..524e0f50f 100644
--- a/prompts/en/branch.md.j2
+++ b/prompts/en/branch.md.j2
@@ -50,6 +50,23 @@ List tasks on the board (optionally by status/priority). Use before updates to v
 
 ### task_update
 Refine a task. Update the description as the user clarifies scope — append sections, rewrite requirements, adjust subtasks. To execute a task, move it to `ready` and the cortex will pick it up and spawn a worker automatically. You do not need to spawn workers for tasks yourself.
+{%- if wiki_enabled %}
+
+### Wiki tools (wiki_create, wiki_edit, wiki_read, wiki_list, wiki_search, wiki_history)
+
+You have access to the agent's wiki — a shared, versioned knowledge base of structured pages. Use these to capture knowledge, look up reference material, and maintain documentation.
+
+- `wiki_create` — Create a new page. Types: `entity`, `concept`, `decision`, `project`, `reference`.
+- `wiki_edit` — Edit a page by replacing a text block (tolerant matching).
+- `wiki_read` — Read a page by slug. Returns full content and resolved links.
+- `wiki_list` — List all pages, optionally filtered by type.
+- `wiki_search` — Full-text search across all pages.
+- `wiki_history` — View version history for a page.
+
+**When a worker should write to the wiki:** If the user asks you to spawn a worker to document or research something, enable wiki write access on the worker by including it in the spawn task. The branch can also write to the wiki directly for quick captures during reasoning.
+
+**Link syntax:** `[display text](wiki:slug)` links one page to another.
+{%- endif %}
 
 ## Rules
 
diff --git a/prompts/en/channel.md.j2 b/prompts/en/channel.md.j2
index 4908de4de..e55a0153b 100644
--- a/prompts/en/channel.md.j2
+++ b/prompts/en/channel.md.j2
@@ -20,7 +20,11 @@ You are the user-facing conversation process. You are the ambassador — the onl
 
 ## Your Role
 
+{%- if direct_mode %}
+You communicate, you execute, you stay responsive. You have direct access to execution tools — shell, file operations, browser, web search, and memory. Use them directly for tasks instead of spawning workers. When you need to think deeply or access long-term memory, you can still branch. Workers and branches remain available for long-running or isolated work, but prefer direct execution for straightforward operations.
+{%- else %}
 You communicate, you delegate, you stay responsive. You do not do heavy work yourself. When you need to think deeply, you branch. When you need something done, you spawn a worker.
+{%- endif %}
 
 You have a soul, an identity, and a personality. These are loaded separately and injected above this prompt. Embody them in every response.
 
@@ -37,51 +41,59 @@ When work produces a user-facing file artifact (PDF, DOCX, CSV, ZIP, image, etc.
 
 You are able to write code or do work extremely fast inside a worker, never say something will take too long, just do it. You are an agentic coding machine.
 
-## Delegation
+{%- if direct_mode %}
 
-You have three paths for getting things done. Choosing the right one matters.
+## Execution & Delegation
 
-**Branch** — for thinking and memory. Branch when you need to recall, save, or forget something from long-term memory, manage the task board (create, list, update, or approve tasks), reason through a complex decision, figure out what instructions to give a worker, answer Spacebot self-knowledge questions (features, architecture, configuration, release notes), or retrieve transcript context from another channel. Branches have your full conversation context and access to the memory system (recall, save, and delete), Spacebot docs lookup (`spacebot_docs`), task tools (`task_create`, `task_list`, `task_update`), cross-channel transcript recall  (`channel_recall` — queries the full persisted message database, supports temporal filtering), and worker transcript inspection (`worker_inspect`). They return a conclusion. You never see the working. Branch often — it's cheap and keeps you responsive.
+Use your tools directly for tasks. Only delegate to a worker for long-running or isolated work.
 
-**Worker** — for doing. Workers have execution tools (see Worker Capabilities section below). They do NOT have your conversation context or access to memories — they only know what you tell them in the task description, so be specific. Two flavors:
+**Branch** — for deep thinking, task board management, Spacebot self-knowledge questions, or cross-channel recall.
 
-- _Fire-and-forget_ — bounded tasks with a clear end state. "Run the test suite." "Read src/config.rs and summarize it." The worker does it and reports back.
-- _Interactive_ — open-ended work the user might steer. "Refactor the auth module." "Debug the CI pipeline." The worker stays alive and you route follow-up messages to it when the user gives additional instructions.
+**Worker** — for work that needs its own context or would block your conversation.
+{%- else %}
 
-Use `worker_inspect` in a branch when you need to verify what a worker actually did — what tools it called, what results it got, what sources it checked. Useful when a worker returns a thin or unexpected result, or when the user asks "what did you actually do?"
+## Delegation
 
-**Reply** — for talking. Use reply to respond to the user. This is your primary output. If you can answer directly without thinking or doing, just reply.
+You have three paths for getting things done. Choosing the right one matters.
+
+**Branch** — for thinking and memory. Branch when you need to recall, save, or forget memories, manage the task board, reason through a complex decision, plan worker instructions, answer Spacebot self-knowledge questions, or retrieve transcript context from another channel. Branch often — it's cheap and keeps you responsive.
+
+**Worker** — for doing. Two flavors:
+- _Fire-and-forget_ — bounded tasks with a clear end state ("run the test suite", "summarize src/config.rs").
+- _Interactive_ — open-ended work the user might steer. You route follow-up messages to it.
 
-**React** — for lightweight acknowledgment. Use `react` to add an emoji reaction to the user's message. A reaction can stand on its own (react + skip), accompany a reply (react + reply), or signal you're paying attention without interrupting. Don't overuse it — a well-placed 👀 or 😂 lands better than reacting to everything, but feel free to be creative with your choice of reaction.
+Workers only know what you tell them — be specific.
 
 The key distinction: branches think, workers do, you talk. Never use a worker for memory recall. Never search memories yourself — branch first. Never execute shell commands or file operations yourself — that's a worker.
+{%- endif %}
+
+**Reply** — your primary output. If you can answer without thinking or doing, just reply.
+
+**React** — emoji reactions. Can stand alone with skip, or accompany a reply. Don't overuse — a well-placed reaction lands better than reacting to everything.
 
 Never suggest that the user do something you could do yourself. If someone asks you to recall, search, look something up, run a command, or find information — do it using your tools. Don't tell them to "check the database manually", "scroll through history", or "ask someone else". If your tools can handle it, use them. If they can't, say so plainly — but try first.
 
+{%- if direct_mode %}
+
+## Sandbox
+{%- else %}
+
 ## Builtin Worker Sandbox
+{%- endif %}
 
 {%- if sandbox_enabled %}
-Sandbox mode is **enabled** for builtin workers, so `shell` runs with OS-level containment while `file` remains workspace-scoped by path validation.
+Sandbox mode is **enabled**{% if not direct_mode %} for builtin workers{% endif %}, so `shell` runs with OS-level containment while `file` remains workspace-scoped by path validation.
 {%- else %}
-Sandbox mode is **disabled** for builtin workers, so `shell`/`file`/`send_file` all have full host filesystem access (OS permissions apply). Environment sanitization still applies.
+Sandbox mode is **disabled**{% if not direct_mode %} for builtin workers{% endif %}, so `shell`/`file`/`send_file` all have full host filesystem access (OS permissions apply). Environment sanitization still applies.
 {%- endif %}
 
 When an interactive worker is active and the user's message is directed at that work, route the message to the worker instead of spawning a new one.
 
-**Cancel** — for stopping work. Use `cancel` when a worker is stuck, taking too long, working on the wrong thing, or the user asks you to stop it. You can cancel workers and branches by their ID (visible in the status block and in spawn confirmations). Don't let a runaway worker burn tokens — if something looks wrong, cancel it and start fresh.
+**Cancel** — kill stuck, runaway, or misdirected workers and branches. Don't let them burn tokens — cancel and start fresh.
 
 ## Cron (Scheduled Tasks)
 
-You can create recurring or one-shot scheduled tasks using the `cron` tool. **Prefer `cron_expr`** (5-field wall-clock cron) when the schedule aligns to real times of day — "every morning at 9am", "weekdays at 17:00", "first of the month at noon" — which is almost always what users actually want.
-
-Use `interval_secs` only when the user explicitly wants a fixed-duration cadence that 5-field cron cannot express (for example, every 90 minutes). Interval-based scheduling can drift relative to clock boundaries, so prefer `cron_expr` whenever the schedule is tied to real times of day. If a user asks for "every hour", use `cron_expr: '0 * * * *'`, not `interval_secs: 3600`.
-
-Common patterns:
-- Daily at 9am → `0 9 * * *`
-- Every hour on the hour → `0 * * * *`
-- Weekdays at 17:00 → `0 17 * * 1-5`
-- Every 15 minutes → `*/15 * * * *`
-- First of month at noon → `0 12 1 * *`
+Prefer `cron_expr` over `interval_secs` — wall-clock schedules are almost always what users want.
 
 ## Task Board
 
@@ -117,12 +129,21 @@ When in doubt, skip. Being a lurker who speaks when it matters is better than be
 ## Rules
 
 1. Always use the tool call API for actions. Your text output is sent verbatim to users — never write tool call syntax (like `[reply]`, `[react]`, `[skip]`, etc.) as plain text. If you want to reply, call the `reply` tool. If you want to react, call the `react` tool.
+{%- if direct_mode %}
+2. Execute tasks directly using your tools (`shell`, `file_read`, `file_write`, `file_edit`, `file_list`, `web_search`, browser tools). Only delegate to a worker for long-running or isolated work.
+3. Use `memory_recall` and `memory_save` directly for memory operations. Branch for complex reasoning, task board management, or cross-channel transcript recall via `channel_recall`.
+{%- else %}
 2. Never execute tasks directly. If it needs shell commands, file operations, web browsing, or web search — that's a worker.
 3. Never search memories yourself. Branch to recall. If you need conversation history from any channel (including this one), branch and use `channel_recall` — it queries the full persisted database and supports temporal filtering.
+{%- endif %}
 4. When you spawn a worker, always reply with a brief natural acknowledgment so the user knows you're on it — something like "On it", "Checking now", "Let me look into that", or a relevant follow-up question. When you branch (for memory or thinking), prefer `skip` — branches are fast and invisible. Never mention internal process details (branch, worker, status block).
 5. Keep responses conversational. You're talking to a person, not filing a report.
 6. If multiple things are happening, handle them in a natural flow. No rigid ordering.
+{%- if not direct_mode %}
 7. When you don't know something and it might be in memory, branch to recall. Don't guess.
+{%- else %}
+7. When you don't know something and it might be in memory, use `memory_recall` to check. Don't guess.
+{%- endif %}
 8. The status block is for your awareness. Don't dump it to the user unless they ask.
 9. Save important information to memory. Be selective. When the user asks to forget something, branch to find and delete the relevant memories.
 10. One worker per task. Never spawn multiple workers for the same request. If a worker is already handling something, wait for it to finish or route follow-ups to it. Check your status block before spawning.
diff --git a/prompts/en/fragments/system/retrigger.md.j2 b/prompts/en/fragments/system/retrigger.md.j2
index 3003b2294..10006e8be 100644
--- a/prompts/en/fragments/system/retrigger.md.j2
+++ b/prompts/en/fragments/system/retrigger.md.j2
@@ -10,4 +10,5 @@ Instructions:
 - Do not just reference or tease the results — relay them fully.
 - Do not mention internal processes (branch, worker, retrigger, status block, process IDs).
 - If a result failed, let the user know what went wrong in plain language.
+- If a process timed out or was cancelled, offer to try again.
 - Only skip if every result above is genuinely empty or irrelevant to anything the user asked about.]
diff --git a/prompts/en/tools/set_outcome_description.md.j2 b/prompts/en/tools/set_outcome_description.md.j2
new file mode 100644
index 000000000..39c5091fe
--- /dev/null
+++ b/prompts/en/tools/set_outcome_description.md.j2
@@ -0,0 +1 @@
+Store the final delivery outcome for this cron job. Call once when all work is complete and you have synthesized the full result. The content will be delivered to the configured target channel when the run finishes. Does not send anything immediately — use reply() for in-channel progress updates.
\ No newline at end of file
diff --git a/prompts/en/tools/task_update_description.md.j2 b/prompts/en/tools/task_update_description.md.j2
index 7f632f45b..27ae4eed2 100644
--- a/prompts/en/tools/task_update_description.md.j2
+++ b/prompts/en/tools/task_update_description.md.j2
@@ -1 +1 @@
-Update an existing task by task number. Use this to refine the spec as scope evolves — append sections, rewrite requirements, adjust subtasks, change priority. The description is a living document; update it when the user clarifies intent or when you discover new context. Move to `ready` when the spec is complete and the cortex will pick it up for execution. Use `metadata` to attach or enrich structured external references like GitHub issues and PRs. Metadata updates deep-merge nested objects, so you can safely add fields such as `url`, `number`, `repo`, `labels`, or `state` without replacing sibling fields. For worker processes, only subtask and metadata updates are allowed.
+Update an existing task by task number. Use this to refine the spec as scope evolves — append sections, rewrite requirements, adjust subtasks, change priority. The description is a living document; update it when the user clarifies intent or when you discover new context. Do NOT change a task's status unless the user explicitly asks you to — tasks require human approval before they can move to `ready`. Use `metadata` to attach or enrich structured external references like GitHub issues and PRs. Metadata updates deep-merge nested objects, so you can safely add fields such as `url`, `number`, `repo`, `labels`, or `state` without replacing sibling fields. For worker processes, only subtask and metadata updates are allowed.
diff --git a/prompts/en/tools/wiki_create_description.md.j2 b/prompts/en/tools/wiki_create_description.md.j2
new file mode 100644
index 000000000..c17a7bc83
--- /dev/null
+++ b/prompts/en/tools/wiki_create_description.md.j2
@@ -0,0 +1,11 @@
+Create a new wiki page. Wiki pages are instance-wide persistent knowledge — not conversation notes. Only create a page when there is enough to say something true, stable, and useful that will hold up over time.
+
+**page_type**: entity (person, project, tool, org), concept (pattern, approach, idea), decision (why a significant choice was made), project (running synthesis of a workstream), reference (stable factual content used repeatedly).
+
+**slug**: derived automatically from the title. You don't need to set it.
+
+**content**: full markdown body. Lead with one sentence stating what the page is about. Use ## headings. Link related pages inline with [display text](wiki:slug). Only link on first mention of a notable entity.
+
+**related**: slugs of pages with a coarse relationship to this one.
+
+Read existing pages with wiki_read before creating — update rather than duplicate.
\ No newline at end of file
diff --git a/prompts/en/tools/wiki_edit_description.md.j2 b/prompts/en/tools/wiki_edit_description.md.j2
new file mode 100644
index 000000000..11ac82ba9
--- /dev/null
+++ b/prompts/en/tools/wiki_edit_description.md.j2
@@ -0,0 +1,7 @@
+Edit an existing wiki page by replacing a specific string. Uses tolerant matching — minor whitespace or formatting drift won't break the match.
+
+Always call wiki_read before editing to confirm the current content. Provide enough surrounding context in old_string to make the match unique. If the match fails, the error will tell you why — read the page again and try with more context.
+
+**replace_all**: default false. Set true only when intentionally renaming something that appears multiple times.
+
+**edit_summary**: brief description of what changed and why. Always provide one.
\ No newline at end of file
diff --git a/prompts/en/tools/wiki_history_description.md.j2 b/prompts/en/tools/wiki_history_description.md.j2
new file mode 100644
index 000000000..f442e0af2
--- /dev/null
+++ b/prompts/en/tools/wiki_history_description.md.j2
@@ -0,0 +1 @@
+List the version history of a wiki page. Returns each version with its author, timestamp, and edit summary. Use wiki_read with a version number to see the content at that point.
\ No newline at end of file
diff --git a/prompts/en/tools/wiki_list_description.md.j2 b/prompts/en/tools/wiki_list_description.md.j2
new file mode 100644
index 000000000..75930d1a8
--- /dev/null
+++ b/prompts/en/tools/wiki_list_description.md.j2
@@ -0,0 +1 @@
+List all wiki pages. Returns title, slug, type, version, and last updated time for each page. Filter by page_type to narrow results. Use this to browse what exists before deciding what to read or create.
\ No newline at end of file
diff --git a/prompts/en/tools/wiki_read_description.md.j2 b/prompts/en/tools/wiki_read_description.md.j2
new file mode 100644
index 000000000..479dd3418
--- /dev/null
+++ b/prompts/en/tools/wiki_read_description.md.j2
@@ -0,0 +1,3 @@
+Read a wiki page by slug. Returns the current content and a list of resolved wiki: links found inline — their slugs and titles, without fetching full content. Use the links list to decide what related pages to pull next.
+
+Pass version to read a historical snapshot.
\ No newline at end of file
diff --git a/prompts/en/tools/wiki_search_description.md.j2 b/prompts/en/tools/wiki_search_description.md.j2
new file mode 100644
index 000000000..f7cb6d1ec
--- /dev/null
+++ b/prompts/en/tools/wiki_search_description.md.j2
@@ -0,0 +1 @@
+Full-text search across all wiki pages (title and content). Returns matching pages ranked by relevance. Filter by page_type to narrow results. Use this to find relevant pages before reading or editing.
\ No newline at end of file
diff --git a/prompts/en/worker.md.j2 b/prompts/en/worker.md.j2
index 2d5e521f7..b060ee261 100644
--- a/prompts/en/worker.md.j2
+++ b/prompts/en/worker.md.j2
@@ -11,6 +11,10 @@ Your working directory is `{{ workspace_dir }}`. This is your agent's workspace
 - Persistent binary directory: `{{ instance_dir }}/tools/bin/` (on PATH, survives restarts and rollouts)
 
 Binaries installed via package managers (apt, brew, etc.) land on the root filesystem which is ephemeral on hosted instances — they disappear on rollouts. To install a tool durably, download or copy the binary into `{{ instance_dir }}/tools/bin/`.
+{%- if project_context %}
+
+{{ project_context }}
+{%- endif %}
 
 ## Sandbox Mode
 
@@ -139,6 +143,22 @@ Example uses:
 - Obtained an OAuth refresh token → store `MYAPP_REFRESH_TOKEN`
 
 Do not log or echo the secret value after storing it.
+{%- if wiki_enabled %}
+
+### Wiki tools (wiki_create, wiki_edit, wiki_read, wiki_list, wiki_search)
+
+You have access to the agent's wiki — a shared knowledge base of structured pages stored in a database. **Wiki pages are not files on disk.** You cannot access wiki content through `file_read`, `file_list`, `shell`, or any filesystem tool. The only way to read, search, or modify wiki content is through the wiki tools below.
+
+- `wiki_create` — Create a new wiki page with a title, type, and markdown content. Types: `entity`, `concept`, `decision`, `project`, `reference`.
+- `wiki_edit` — Edit an existing page by replacing a block of text (tolerant matching — minor whitespace differences are fine).
+- `wiki_read` — Read a page by slug. Returns full content plus resolved links.
+- `wiki_list` — List all pages, optionally filtered by type.
+- `wiki_search` — Full-text search across all pages.
+
+**When to write to wiki vs files:** Write to the wiki when capturing knowledge that should persist and be browsable by humans (architecture docs, decision records, entity descriptions). Write to files when the task involves code, configs, or data that belongs in the workspace. Do not create `.md` files in the workspace as a substitute for wiki pages.
+
+**Link syntax:** Reference other wiki pages with `[display text](wiki:slug)`. The slug is auto-generated from the title on creation.
+{%- endif %}
 
 {%- if status_text %}
 {{ status_text }}
diff --git a/skills/builtin/wiki-writing/SKILL.md b/skills/builtin/wiki-writing/SKILL.md
new file mode 100644
index 000000000..89785105d
--- /dev/null
+++ b/skills/builtin/wiki-writing/SKILL.md
@@ -0,0 +1,160 @@
+---
+name: wiki-writing
+description: Use when creating or substantially editing wiki pages. Covers language, tone, structure, page type selection, linking discipline, and what separates a useful wiki article from filler.
+---
+
+# Wiki Writing
+
+Wiki pages are the persistent knowledge layer of the instance. They outlive conversations, outlive individual agents, and serve anyone who reads them months or years from now. A wiki page that reads like a hastily assembled summary is worse than no page at all — it teaches the reader not to trust the wiki.
+
+The standard is encyclopedic: neutral, precise, well-structured, and written with the same care you'd bring to a Wikipedia article. Not a style exercise. A useful one. The goal is that someone encountering a page cold — no prior context, no conversation history — understands the subject fully on first read.
+
+## Before Writing
+
+Read before creating. Run `wiki_list` and `wiki_search` to check whether the topic already has coverage. Expanding an existing page is almost always better than creating a new one. Duplicate pages fragment knowledge and create maintenance burden.
+
+If a page exists but covers the topic poorly, edit it. If the topic genuinely has no coverage and there is enough stable, verified information to sustain a standalone article, create one.
+
+Ask: will this page still be accurate and useful in six months? If the answer depends on a conversation that happened today, the information belongs in memory, not the wiki.
+
+## Choosing a Page Type
+
+Each type carries expectations about what the reader will find.
+
+**entity** — A person, team, tool, service, or organization. The reader expects to learn what it is, what it does, and how it relates to other entities. Keep it factual and current.
+
+**concept** — A pattern, approach, methodology, or idea. The reader expects to understand what it means, when it applies, and what distinguishes it from similar concepts. Provide enough context for someone unfamiliar with the term.
+
+**decision** — Why a significant choice was made. The reader expects the context that led to the decision, the alternatives considered, and the reasoning. Decision pages age well when they capture the "why" rather than just the "what."
+
+**project** — A running synthesis of a workstream. The reader expects to understand current state, goals, and key milestones. Project pages require periodic updates — create one only if there is commitment to maintain it.
+
+**reference** — Stable factual content used repeatedly. Configuration formats, API conventions, environment setup, naming schemes. The reader expects accuracy and completeness. Reference pages should be authoritative enough that people link to them rather than restating the information.
+
+If the topic doesn't fit any type cleanly, it probably isn't ready for a standalone page. Fold it into an existing page or reconsider.
+
+## Language
+
+### Tone
+
+Write in the third person. Address the subject, not the reader.
+
+The tone is neutral, professional, and confident. State facts directly. Let the information carry its own weight — no hype, no hedging, no editorializing. The prose should feel like it was written by someone who understands the subject well enough to explain it plainly.
+
+Good: "The routing layer selects a model based on the task's token budget and the configured priority tiers."
+Bad: "The amazing routing layer intelligently selects the best model for your needs."
+Bad: "It should be noted that the routing layer attempts to select a model."
+
+### Clarity
+
+Use plain, precise language. Prefer concrete terms over abstract ones. If a sentence can be shorter without losing meaning, make it shorter.
+
+Define internal jargon, acronyms, and project-specific terms on first use. Assume the reader is intelligent but unfamiliar with the specific context.
+
+Avoid:
+- Filler phrases: "It is worth noting that," "Basically," "In order to," "It is important to understand that"
+- Vague qualifiers: "very," "really," "quite," "somewhat," "fairly"
+- Puffery: "robust," "seamless," "comprehensive," "cutting-edge," "powerful"
+- Setup language: "In this section, we will cover..." — just cover it.
+- Editorializing: "Unfortunately," "Fortunately," "Obviously," "Interestingly"
+
+### Voice and Tense
+
+Active voice is the default. Passive voice is acceptable when the actor is unknown, irrelevant, or when it genuinely improves flow — not as a habit.
+
+Good (active): "The cortex regenerates the knowledge synthesis when memories change."
+Acceptable (passive): "The migration was applied during the 0.4.0 release."
+Bad (unnecessary passive): "The configuration file is read by the agent at startup." → "The agent reads the configuration file at startup."
+
+Present tense for anything currently true. Past tense for events and discontinued practices. No future tense for aspirational features unless clearly labeled as planned.
+
+### Sentence and Paragraph Discipline
+
+One idea per sentence. One theme per paragraph. Paragraphs stay short — three to six sentences in most cases. Longer paragraphs signal that the content should be broken up or restructured with headings.
+
+Vary sentence length for rhythm, but keep the average readable (15–25 words). A paragraph of exclusively short sentences reads as choppy. A paragraph of exclusively long sentences reads as dense. Mix them.
+
+No contractions in article body prose. Use "does not" instead of "doesn't."
+
+### Words to Watch
+
+These words and phrases almost always signal that the sentence should be rewritten:
+
+- "leverage," "utilize" → use
+- "facilitate" → help, enable, or just describe what happens
+- "synergy," "paradigm," "ecosystem" → say what you actually mean
+- "best practice" → name the practice
+- "going forward" → cut it
+- "in terms of" → restructure the sentence
+- "at the end of the day" → cut it
+- "a number of" → some, several, or the actual number
+
+## Structure
+
+### Lead Sentence
+
+Every page opens with a single sentence that defines the subject. The lead sentence tells the reader what the thing is in the plainest terms possible. It should make sense to someone who has never encountered the topic.
+
+Good: "The cortex is a background process that maintains an agent's long-term memory and synthesizes knowledge across conversations."
+Good: "Branch workers are short-lived processes spawned by a channel to handle tasks that require tool use or extended reasoning."
+Bad: "This page documents the cortex." (Says nothing about the subject.)
+Bad: "The cortex is a really important part of the system that does a lot of things." (Says nothing specific.)
+
+### Body
+
+Use `##` headings to organize the body into logical sections. Choose section titles that are short noun phrases — not questions, not gerunds, not full sentences.
+
+Good: `## Architecture`, `## Configuration`, `## Versioning`
+Bad: `## How Does the Architecture Work?`, `## Understanding the Configuration`
+
+Organize by the structure that best serves the topic:
+- Chronological for decisions and project histories
+- Thematic for concepts and entities
+- Procedural for reference pages that describe workflows
+
+### Lists vs. Prose
+
+Use bulleted lists for discrete items: feature sets, configuration options, enumerated choices. Use prose for explanation, context, and narrative. If a bullet point needs more than two sentences of explanation, it belongs in a paragraph instead.
+
+### Wiki Links
+
+Link to other wiki pages on first mention of a notable entity using `[display text](wiki:slug)`. After the first link, use the plain term without relinking.
+
+Only link when the target page adds genuine context. Overlinking clutters the prose and trains readers to ignore links. Do not link common terms that do not have meaningful wiki pages.
+
+Bad: "The [agent](wiki:agent) uses [memory](wiki:memory) to store [information](wiki:information)."
+Good: "The agent uses the [memory graph](wiki:memory-graph) to persist knowledge across sessions."
+
+### Related Pages
+
+The `related` field captures coarse relationships — pages that share significant context with this one. Use it for pages that a reader of this article would plausibly want to read next. Three to five related slugs is typical. Do not list every page that mentions the same topic.
+
+### Edit Summaries
+
+Every edit gets a summary. The summary explains what changed and why in one sentence. Future readers and agents use these to understand the page's evolution without diffing every version.
+
+Good: "Added configuration section covering environment variables and defaults."
+Good: "Corrected the API endpoint path from /v1/chat to /v2/chat."
+Bad: "Updated." (Useless.)
+Bad: "Fixed some stuff." (Useless.)
+
+## When Not to Create a Page
+
+Not everything belongs in the wiki. Skip it when:
+
+- The information is transient or conversation-specific → use memory instead
+- There is not enough verified content for a substantive article → wait until there is
+- The topic is already covered adequately on an existing page → add a section there
+- The page would consist of a single paragraph with no room to grow → fold it into a related page
+
+A wiki with fifty well-written pages is more valuable than one with two hundred stubs.
+
+## Editing Existing Pages
+
+Read the full page with `wiki_read` before making any edit. Understand the existing structure, tone, and coverage before changing anything.
+
+When adding content, match the existing style. If the page uses third-person encyclopedic tone, do not introduce second-person instructions. If headings use noun phrases, do not add a heading in question form.
+
+When correcting factual content, verify the correction against authoritative sources before applying it. Include the basis for the correction in the edit summary.
+
+When restructuring, preserve all existing information unless it is demonstrably wrong or duplicated. Reorganization is not a license to delete content.
diff --git a/src/agent/branch.rs b/src/agent/branch.rs
index cfba7ffe4..fb8c95973 100644
--- a/src/agent/branch.rs
+++ b/src/agent/branch.rs
@@ -115,9 +115,13 @@ impl Branch {
             .as_deref()
             .unwrap_or_else(|| routing.resolve(ProcessType::Branch, None))
             .to_string();
+        let usage_accumulator = std::sync::Arc::new(tokio::sync::Mutex::new(
+            crate::llm::usage::UsageAccumulator::new(),
+        ));
         let model = SpacebotModel::make(&self.deps.llm_manager, &model_name)
             .with_context(&*self.deps.agent_id, "branch")
-            .with_routing((**routing).clone());
+            .with_routing((**routing).clone())
+            .with_accumulator(usage_accumulator.clone());
 
         let agent = AgentBuilder::new(model)
             .preamble(&self.system_prompt)
@@ -257,6 +261,20 @@ impl Branch {
             conclusion: conclusion.clone(),
         });
 
+        // Flush accumulated token usage.
+        let acc = usage_accumulator.lock().await;
+        if let Err(error) = acc
+            .flush(
+                &self.deps.sqlite_pool,
+                &self.deps.agent_id,
+                "branch",
+                Some(&*self.channel_id),
+            )
+            .await
+        {
+            tracing::warn!(%error, "failed to flush branch token usage");
+        }
+
         tracing::info!(branch_id = %self.id, "branch completed");
 
         Ok(conclusion)
diff --git a/src/agent/channel.rs b/src/agent/channel.rs
index 1539bda2e..095383216 100644
--- a/src/agent/channel.rs
+++ b/src/agent/channel.rs
@@ -133,6 +133,10 @@ pub struct ChannelState {
     /// Resolved model overrides from conversation settings.
     /// Used by branches, workers, and compactor to resolve their model.
     pub model_overrides: Arc<crate::conversation::settings::ResolvedConversationSettings>,
+    /// Optional cron outcome for the `set_outcome` tool.
+    /// When set, the `set_outcome` tool is registered for this channel,
+    /// allowing the LLM to explicitly store a delivery payload.
+    pub cron_outcome: Option<crate::cron::CronOutcome>,
 }
 
 impl ChannelState {
@@ -143,20 +147,27 @@ impl ChannelState {
             .await
     }
 
-    /// Cancel a running worker by aborting its tokio task and cleaning up state.
-    /// Emits a synthetic terminal event so downstream consumers converge.
+    /// Cancel a running worker by aborting its tokio task.
+    /// Emits a synthetic terminal event so the event handler can clean up
+    /// worker_handles and trigger a retrigger with the cancellation reason.
     pub async fn cancel_worker_with_reason(
         &self,
         worker_id: WorkerId,
         reason: &str,
     ) -> std::result::Result<(), String> {
-        let removed = self
-            .active_workers
-            .write()
-            .await
-            .remove(&worker_id)
-            .is_some();
-        let handle = self.worker_handles.write().await.remove(&worker_id);
+        // Abort via read access so the handle stays in worker_handles.
+        // The WorkerComplete event handler will remove it and trigger a retrigger.
+        let aborted = {
+            let handles = self.worker_handles.read().await;
+            if let Some(handle) = handles.get(&worker_id) {
+                handle.abort();
+                true
+            } else {
+                false
+            }
+        };
+
+        // Stop routing messages to the dead worker immediately.
         let removed_input = self
             .worker_inputs
             .write()
@@ -164,23 +175,15 @@ impl ChannelState {
             .remove(&worker_id)
             .is_some();
         self.worker_injections.write().await.remove(&worker_id);
-        let removed_status = self.status_block.write().await.remove_worker(worker_id);
-        let should_emit = removed || handle.is_some();
 
-        if !should_emit {
+        if !aborted {
+            let removed_status = self.status_block.write().await.remove_worker(worker_id);
             if removed_input || removed_status {
                 return Ok(());
             }
             return Err(format!("Worker {worker_id} not found"));
         }
 
-        // Abort first so the worker stops producing new ToolStarted/ToolCompleted
-        // events, then drain whatever was accumulated. This avoids a race where
-        // events written between drain and abort would be lost.
-        if let Some(handle) = handle {
-            handle.abort();
-        }
-
         // Now that the worker future is cancelled, drain the live transcript
         // cache. persist_transcript() inside the worker's run() method will
         // never execute after abort, so we compensate here.
@@ -278,22 +281,33 @@ impl ChannelState {
     }
 
     /// Cancel a running branch by aborting its tokio task.
-    /// Emits a synthetic terminal result so channel state converges.
+    /// Emits a synthetic terminal result so the event handler can clean up
+    /// active_branches and trigger a retrigger with the cancellation reason.
     pub async fn cancel_branch_with_reason(
         &self,
         branch_id: BranchId,
         reason: &str,
     ) -> std::result::Result<(), String> {
-        let handle = self.active_branches.write().await.remove(&branch_id);
-        let removed_status = self.status_block.write().await.remove_branch(branch_id);
-        let Some(handle) = handle else {
+        // Abort via read access so the handle stays in active_branches.
+        // The BranchResult event handler will remove it and trigger a retrigger.
+        let aborted = {
+            let branches = self.active_branches.read().await;
+            if let Some(handle) = branches.get(&branch_id) {
+                handle.abort();
+                true
+            } else {
+                false
+            }
+        };
+
+        if !aborted {
+            let removed_status = self.status_block.write().await.remove_branch(branch_id);
             if removed_status {
                 return Ok(());
             }
             return Err(format!("Branch {branch_id} not found"));
-        };
+        }
 
-        handle.abort();
         let reason = crate::summarize_first_non_empty_line(reason, crate::EVENT_SUMMARY_MAX_CHARS);
         let conclusion = if reason.is_empty() {
             "Branch cancelled.".to_string()
@@ -378,6 +392,43 @@ impl ChannelControlHandle {
             Err(_) => ControlActionResult::NotFound,
         }
     }
+
+    /// Cancel all active workers and branches, emitting WorkerComplete/BranchResult
+    /// for each so the channel can retrigger and synthesize partial results.
+    pub async fn cancel_all_workers_and_branches(&self, reason: &str) {
+        let worker_ids: Vec<WorkerId> = self
+            .inner
+            .state
+            .worker_handles
+            .read()
+            .await
+            .keys()
+            .cloned()
+            .collect();
+        for worker_id in worker_ids {
+            let _ = self
+                .inner
+                .state
+                .cancel_worker_with_reason(worker_id, reason)
+                .await;
+        }
+        let branch_ids: Vec<BranchId> = self
+            .inner
+            .state
+            .active_branches
+            .read()
+            .await
+            .keys()
+            .cloned()
+            .collect();
+        for branch_id in branch_ids {
+            let _ = self
+                .inner
+                .state
+                .cancel_branch_with_reason(branch_id, reason)
+                .await;
+        }
+    }
 }
 
 impl WeakChannelControlHandle {
@@ -500,6 +551,7 @@ impl Channel {
         prompt_snapshot_store: Option<Arc<crate::agent::prompt_snapshot::PromptSnapshotStore>>,
         live_worker_transcripts: Option<LiveWorkerTranscripts>,
         resolved_settings: ResolvedConversationSettings,
+        cron_outcome: Option<crate::cron::CronOutcome>,
     ) -> (Self, mpsc::Sender<InboundMessage>) {
         let process_id = ProcessId::Channel(id.clone());
         let hook = SpacebotHook::new(
@@ -552,6 +604,7 @@ impl Channel {
                 resolved_settings.worker_context.clone(),
             )),
             model_overrides: Arc::new(resolved_settings.clone()),
+            cron_outcome,
         };
 
         // Each channel gets its own isolated tool server to avoid races between
@@ -849,6 +902,17 @@ impl Channel {
         self.response_tx.send(routed).await
     }
 
+    /// Drain accumulated channel tool calls from ApiState and serialize as JSON.
+    /// Returns `None` if there are no tool calls or ApiState is unavailable.
+    async fn drain_tool_calls_json(&self) -> Option<String> {
+        let api_state = self.state.deps.api_state.as_ref()?;
+        let calls = api_state.take_channel_tool_calls(&self.id).await;
+        if calls.is_empty() {
+            return None;
+        }
+        serde_json::to_string(&calls).ok()
+    }
+
     async fn send_builtin_text(&mut self, text: String, log_label: &str) {
         match self.send_routed(OutboundResponse::Text(text.clone())).await {
             Ok(()) => {
@@ -860,11 +924,15 @@ impl Channel {
                         .with_label_values(&[&self.deps.agent_id, channel_type])
                         .inc();
                 }
-                self.state.conversation_logger.log_bot_message_with_name(
-                    &self.state.channel_id,
-                    &text,
-                    Some(self.agent_display_name()),
-                );
+                let tool_calls_json = self.drain_tool_calls_json().await;
+                self.state
+                    .conversation_logger
+                    .log_bot_message_with_metadata(
+                        &self.state.channel_id,
+                        &text,
+                        Some(self.agent_display_name()),
+                        tool_calls_json,
+                    );
             }
             Err(error) => {
                 #[cfg(feature = "metrics")]
@@ -944,9 +1012,11 @@ impl Channel {
             "/quiet" | "/observe" => {
                 self.set_response_mode(ResponseMode::Observe).await;
                 self.send_builtin_text(
-                    "observe mode enabled. i'll learn from this conversation but won't respond.".to_string(),
+                    "observe mode enabled. i'll learn from this conversation but won't respond."
+                        .to_string(),
                     "observe",
-                ).await;
+                )
+                .await;
                 return Ok(true);
             }
             "/active" => {
@@ -976,7 +1046,8 @@ impl Channel {
                     "- /tasks: ready task list".to_string(),
                     "- /digest: one-shot day digest (00:00 -> now)".to_string(),
                     "- /observe: learn from conversation, never respond".to_string(),
-                    "- /mention-only: only respond when @mentioned, replied to, or given a command".to_string(),
+                    "- /mention-only: only respond when @mentioned, replied to, or given a command"
+                        .to_string(),
                     "- /active: normal reply mode".to_string(),
                     "- /agent-id: runtime agent id".to_string(),
                 ];
@@ -997,6 +1068,22 @@ impl Channel {
         let mut last_lag_warning: Option<std::time::Instant> = None;
 
         loop {
+            // Cron channels have no further user messages after the initial prompt.
+            // Once all workers/branches finish and no retrigger is pending, exit so
+            // the scheduler can flush the reply buffer. Without this the channel
+            // would wait on the broadcast event_rx (which never closes) until the
+            // job timeout kills it.
+            if self.state.cron_outcome.is_some()
+                && self.message_count > 0
+                && !self.pending_retrigger
+                && self.retrigger_deadline.is_none()
+                && self.state.worker_handles.read().await.is_empty()
+                && self.state.active_branches.read().await.is_empty()
+            {
+                tracing::info!(channel_id = %self.id, "cron channel finished all work, exiting");
+                break;
+            }
+
             // Compute next deadline from coalesce and retrigger timers
             let next_deadline = match (self.coalesce_deadline, self.retrigger_deadline) {
                 (Some(a), Some(b)) => Some(a.min(b)),
@@ -1597,9 +1684,12 @@ impl Channel {
 
         let org_context = self.build_org_context(&prompt_engine);
 
-        let adapter_prompt = self
-            .current_adapter()
-            .and_then(|adapter| prompt_engine.render_channel_adapter_prompt(adapter));
+        let adapter_prompt = if self.state.cron_outcome.is_some() {
+            prompt_engine.render_channel_adapter_prompt("cron")
+        } else {
+            self.current_adapter()
+                .and_then(|adapter| prompt_engine.render_channel_adapter_prompt(adapter))
+        };
 
         let empty_to_none = |s: String| if s.is_empty() { None } else { Some(s) };
 
@@ -1657,6 +1747,8 @@ impl Channel {
         let model_name = routing.resolve(ProcessType::Channel, None).to_string();
         let tool_use_enforcement = rc.tool_use_enforcement.load();
 
+        let direct_mode = self.resolved_settings.delegation == DelegationMode::Direct;
+
         let system_prompt = prompt_engine.render_channel_prompt_with_links(
             empty_to_none(identity_context),
             memory_bulletin_text,
@@ -1673,6 +1765,7 @@ impl Channel {
             self.backfill_transcript.clone(),
             empty_to_none(working_memory),
             empty_to_none(channel_activity_map),
+            direct_mode,
         )?;
 
         prompt_engine.maybe_append_tool_use_enforcement(
@@ -2182,100 +2275,13 @@ impl Channel {
 
     /// Build pre-rendered project context for prompt injection.
     ///
-    /// Fetches all active projects with their repos and worktrees, converts them
-    /// to prompt-friendly structs, and renders via the projects_context template.
-    /// Returns `None` if no projects exist or if rendering fails.
+    /// Delegates to the standalone `build_project_context` function shared
+    /// with worker spawning paths.
     async fn build_project_context(
         &self,
         prompt_engine: &crate::prompts::engine::PromptEngine,
     ) -> Option<String> {
-        use crate::prompts::engine::{ProjectContext, ProjectRepoContext, ProjectWorktreeContext};
-
-        let store = &self.deps.project_store;
-        let projects = match store
-            .list_projects(
-                &self.deps.agent_id,
-                Some(crate::projects::ProjectStatus::Active),
-            )
-            .await
-        {
-            Ok(projects) => projects,
-            Err(error) => {
-                tracing::warn!(%error, "failed to load projects for prompt injection");
-                return None;
-            }
-        };
-
-        if projects.is_empty() {
-            return None;
-        }
-
-        let mut contexts = Vec::with_capacity(projects.len());
-        for project in &projects {
-            let repos = match store.list_repos(&project.id).await {
-                Ok(repos) => repos,
-                Err(error) => {
-                    tracing::warn!(%error, project_id = %project.id, "failed to load repos for project");
-                    Vec::new()
-                }
-            };
-
-            let worktrees = match store.list_worktrees_with_repos(&project.id).await {
-                Ok(worktrees) => worktrees,
-                Err(error) => {
-                    tracing::warn!(%error, project_id = %project.id, "failed to load worktrees for project");
-                    Vec::new()
-                }
-            };
-
-            contexts.push(ProjectContext {
-                name: project.name.clone(),
-                root_path: project.root_path.clone(),
-                description: if project.description.is_empty() {
-                    None
-                } else {
-                    Some(project.description.clone())
-                },
-                tags: project.tags.clone(),
-                repos: repos
-                    .into_iter()
-                    .map(|repo| ProjectRepoContext {
-                        name: repo.name.clone(),
-                        path: repo.path.clone(),
-                        default_branch: repo.default_branch.clone(),
-                        remote_url: if repo.remote_url.is_empty() {
-                            None
-                        } else {
-                            Some(repo.remote_url.clone())
-                        },
-                    })
-                    .collect(),
-                worktrees: worktrees
-                    .into_iter()
-                    .map(|worktree_with_repo| ProjectWorktreeContext {
-                        name: worktree_with_repo.worktree.name.clone(),
-                        path: worktree_with_repo.worktree.path.clone(),
-                        branch: worktree_with_repo.worktree.branch.clone(),
-                        repo_name: worktree_with_repo.repo_name.clone(),
-                    })
-                    .collect(),
-            });
-        }
-
-        match prompt_engine.render_projects_context(contexts) {
-            Ok(rendered) => {
-                let rendered = rendered.trim().to_string();
-                if rendered.is_empty() {
-                    None
-                } else {
-                    Some(rendered)
-                }
-            }
-            Err(error) => {
-                tracing::warn!(%error, "failed to render projects context");
-                None
-            }
-        }
+        crate::agent::channel_dispatch::build_project_context(&self.deps, prompt_engine).await
     }
 
     /// Build a snapshot of the system configuration for status block injection.
@@ -2330,9 +2336,12 @@ impl Channel {
 
         let org_context = self.build_org_context(&prompt_engine);
 
-        let adapter_prompt = self
-            .current_adapter()
-            .and_then(|adapter| prompt_engine.render_channel_adapter_prompt(adapter));
+        let adapter_prompt = if self.state.cron_outcome.is_some() {
+            prompt_engine.render_channel_adapter_prompt("cron")
+        } else {
+            self.current_adapter()
+                .and_then(|adapter| prompt_engine.render_channel_adapter_prompt(adapter))
+        };
 
         let project_context = self.build_project_context(&prompt_engine).await;
 
@@ -2394,6 +2403,7 @@ impl Channel {
         let routing = rc.routing.load();
         let model_name = routing.resolve(ProcessType::Channel, None).to_string();
         let tool_use_enforcement = rc.tool_use_enforcement.load();
+        let direct_mode = self.resolved_settings.delegation == DelegationMode::Direct;
 
         let system_prompt = prompt_engine.render_channel_prompt_with_links(
             empty_to_none(identity_context),
@@ -2411,6 +2421,7 @@ impl Channel {
             self.backfill_transcript.clone(),
             empty_to_none(working_memory),
             empty_to_none(channel_activity_map),
+            direct_mode,
         )?;
 
         prompt_engine.maybe_append_tool_use_enforcement(
@@ -2464,7 +2475,9 @@ impl Channel {
             .and_then(|v| v.as_str())
             .map(|s| s.to_string());
 
-        // Add tools based on delegation mode
+        // reply() always sends live — cron channels use set_outcome() for delivery.
+        let reply_target = crate::tools::ReplyTarget::Live(Box::new(routed_sender.clone()));
+
         match self.resolved_settings.delegation {
             DelegationMode::Standard => {
                 // Current behavior - standard channel tools only
@@ -2472,6 +2485,7 @@ impl Channel {
                     &self.tool_server,
                     self.state.clone(),
                     routed_sender,
+                    reply_target,
                     conversation_id,
                     skip_flag.clone(),
                     replied_flag.clone(),
@@ -2480,6 +2494,7 @@ impl Channel {
                     allow_direct_reply,
                     adapter.map(|s| s.to_string()),
                     slack_thread_ts.as_deref(),
+                    self.state.cron_outcome.clone(),
                 )
                 .await
                 {
@@ -2493,6 +2508,7 @@ impl Channel {
                     &self.tool_server,
                     self.state.clone(),
                     routed_sender,
+                    reply_target,
                     conversation_id,
                     skip_flag.clone(),
                     replied_flag.clone(),
@@ -2501,6 +2517,7 @@ impl Channel {
                     allow_direct_reply,
                     adapter.map(|s| s.to_string()),
                     slack_thread_ts.as_deref(),
+                    self.state.cron_outcome.clone(),
                 )
                 .await
                 {
@@ -2527,9 +2544,13 @@ impl Channel {
                 routing.resolve(ProcessType::Channel, None)
             };
 
+        let usage_accumulator = std::sync::Arc::new(tokio::sync::Mutex::new(
+            crate::llm::usage::UsageAccumulator::new(),
+        ));
         let model = SpacebotModel::make(&self.deps.llm_manager, model_name)
             .with_context(&*self.deps.agent_id, "channel")
-            .with_routing((**routing).clone());
+            .with_routing((**routing).clone())
+            .with_accumulator(usage_accumulator.clone());
 
         let agent = AgentBuilder::new(model)
             .preamble(system_prompt)
@@ -2630,12 +2651,32 @@ impl Channel {
             )
         };
 
-        if let Err(error) =
-            crate::tools::remove_channel_tools(&self.tool_server, allow_direct_reply).await
-        {
+        let remove_result = match self.resolved_settings.delegation {
+            DelegationMode::Direct => {
+                crate::tools::remove_direct_mode_tools(&self.tool_server, allow_direct_reply).await
+            }
+            DelegationMode::Standard => {
+                crate::tools::remove_channel_tools(&self.tool_server, allow_direct_reply).await
+            }
+        };
+        if let Err(error) = remove_result {
             tracing::warn!(%error, "failed to remove channel tools");
         }
 
+        // Flush accumulated token usage to the database.
+        let acc = usage_accumulator.lock().await;
+        if let Err(error) = acc
+            .flush(
+                &self.deps.sqlite_pool,
+                &self.deps.agent_id,
+                "channel",
+                Some(conversation_id),
+            )
+            .await
+        {
+            tracing::warn!(%error, "failed to flush token usage");
+        }
+
         Ok((result, skip_flag, replied_flag, retrigger_reply_preserved))
     }
 
@@ -2857,11 +2898,15 @@ impl Channel {
                             if extracted.is_some() {
                                 tracing::warn!(channel_id = %self.id, "extracted reply from malformed tool syntax in LLM text output");
                             }
-                            self.state.conversation_logger.log_bot_message_with_name(
-                                &self.state.channel_id,
-                                &final_text,
-                                Some(self.agent_display_name()),
-                            );
+                            let tool_calls_json = self.drain_tool_calls_json().await;
+                            self.state
+                                .conversation_logger
+                                .log_bot_message_with_metadata(
+                                    &self.state.channel_id,
+                                    &final_text,
+                                    Some(self.agent_display_name()),
+                                    tool_calls_json,
+                                );
                             self.send_outbound_text(final_text, "failed to send fallback reply")
                                 .await;
                         }
@@ -2987,11 +3032,12 @@ impl Channel {
                     // Regular branch: accumulate result for the next retrigger.
                     // The result text will be embedded directly in the retrigger
                     // message so the LLM knows exactly which process produced it.
+                    let branch_success = !conclusion.starts_with("Branch cancelled:");
                     self.pending_results.push(PendingResult {
                         process_type: "branch",
                         process_id: branch_id.to_string(),
                         result: conclusion.clone(),
-                        success: true,
+                        success: branch_success,
                     });
                     should_retrigger = true;
 
@@ -3004,7 +3050,8 @@ impl Channel {
 
                     // Truncate for working memory — full conclusion lives in branch_runs.
                     let summary = if conclusion.len() > 200 {
-                        format!("{}...", &conclusion[..200])
+                        let boundary = conclusion.floor_char_boundary(200);
+                        format!("{}...", &conclusion[..boundary])
                     } else {
                         conclusion.clone()
                     };
@@ -3150,7 +3197,10 @@ impl Channel {
         // Multiple branch/worker completions within the debounce window are
         // coalesced into a single retrigger to prevent message spam.
         if should_retrigger {
-            if self.retrigger_count >= MAX_RETRIGGERS_PER_TURN {
+            // Cron channels have no user to send a reset message, so the cap would
+            // permanently stall multi-worker jobs. The job timeout is the natural bound.
+            let cap_applies = self.state.cron_outcome.is_none();
+            if cap_applies && self.retrigger_count >= MAX_RETRIGGERS_PER_TURN {
                 tracing::warn!(
                     channel_id = %self.id,
                     retrigger_count = self.retrigger_count,
diff --git a/src/agent/channel_attachments.rs b/src/agent/channel_attachments.rs
index 7d7d21bb5..ad9e9317b 100644
--- a/src/agent/channel_attachments.rs
+++ b/src/agent/channel_attachments.rs
@@ -501,7 +501,7 @@ pub(crate) fn content_from_bytes(bytes: &[u8], attachment: &crate::Attachment) -
 // ---------------------------------------------------------------------------
 
 /// Metadata for a saved attachment, returned after persisting to disk and DB.
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, utoipa::ToSchema)]
 pub struct SavedAttachmentMeta {
     pub id: String,
     pub filename: String,
@@ -526,6 +526,30 @@ pub(crate) async fn save_channel_attachments(
     let mut results = Vec::with_capacity(attachments.len());
 
     for attachment in attachments {
+        // Pre-saved: file is already on disk from a portal upload — look up the
+        // DB record by id + channel_id and re-derive the path from saved_dir
+        // instead of trusting struct fields.
+        if let Some(ref pre_saved_id) = attachment.pre_saved_id {
+            match lookup_pre_saved(pool, pre_saved_id, channel_id, saved_dir).await {
+                Ok(Some(pair)) => results.push(pair),
+                Ok(None) => {
+                    tracing::warn!(
+                        attachment_id = %pre_saved_id,
+                        channel_id,
+                        "pre-saved attachment not found or wrong channel"
+                    );
+                }
+                Err(error) => {
+                    tracing::warn!(
+                        %error,
+                        attachment_id = %pre_saved_id,
+                        "failed to load pre-saved attachment"
+                    );
+                }
+            }
+            continue;
+        }
+
         let safe_name = match sanitize_filename(&attachment.filename) {
             Ok(name) => name,
             Err(error) => {
@@ -797,3 +821,123 @@ async fn filename_taken(pool: &sqlx::SqlitePool, saved_dir: &Path, filename: &st
     // Also check filesystem in case of orphaned files
     saved_dir.join(filename).exists()
 }
+
+// ---------------------------------------------------------------------------
+// Pre-saved attachment lookup
+// ---------------------------------------------------------------------------
+
+/// Look up a pre-saved attachment by id + channel_id and read its bytes from
+/// disk. Returns `None` if the row doesn't exist or the channel doesn't match.
+/// The path is re-derived from `saved_dir` + the `saved_filename` column to
+/// avoid trusting the `disk_path` column.
+async fn lookup_pre_saved(
+    pool: &sqlx::SqlitePool,
+    attachment_id: &str,
+    channel_id: &str,
+    saved_dir: &Path,
+) -> anyhow::Result<Option<(SavedAttachmentMeta, Vec<u8>)>> {
+    use sqlx::Row as _;
+
+    let row = sqlx::query(
+        "SELECT id, original_filename, saved_filename, mime_type, size_bytes \
+         FROM saved_attachments WHERE id = ? AND channel_id = ?",
+    )
+    .bind(attachment_id)
+    .bind(channel_id)
+    .fetch_optional(pool)
+    .await?;
+
+    let Some(row) = row else {
+        return Ok(None);
+    };
+
+    let id: String = row.try_get("id")?;
+    let original_filename: String = row.try_get("original_filename")?;
+    let saved_filename: String = row.try_get("saved_filename")?;
+    let mime_type: String = row.try_get("mime_type")?;
+    let size_bytes: i64 = row.try_get("size_bytes")?;
+
+    let path = saved_dir.join(&saved_filename);
+    if !path.starts_with(saved_dir) {
+        anyhow::bail!("pre-saved attachment path escapes saved dir: {saved_filename}");
+    }
+
+    let bytes = tokio::fs::read(&path).await?;
+
+    Ok(Some((
+        SavedAttachmentMeta {
+            id,
+            filename: original_filename,
+            saved_filename,
+            mime_type,
+            size_bytes: u64::try_from(size_bytes).unwrap_or(0),
+        },
+        bytes,
+    )))
+}
+
+// ---------------------------------------------------------------------------
+// Portal upload — persist bytes directly (no URL download)
+// ---------------------------------------------------------------------------
+
+/// Save raw bytes from a portal upload to `workspace/saved/` and insert a
+/// record into `saved_attachments`. Used by the portal attachment upload
+/// endpoint where the file is already in memory (no URL to download from).
+pub async fn persist_attachment_bytes(
+    pool: &sqlx::SqlitePool,
+    channel_id: &str,
+    saved_dir: &Path,
+    original_filename: &str,
+    mime_type: &str,
+    bytes: &[u8],
+) -> anyhow::Result<SavedAttachmentMeta> {
+    let safe_name = sanitize_filename(original_filename)
+        .map_err(|e| anyhow::anyhow!("unsafe filename: {e}"))?;
+
+    tokio::fs::create_dir_all(saved_dir).await?;
+
+    let saved_filename = deduplicate_filename(pool, saved_dir, &safe_name)
+        .await
+        .map_err(|e| anyhow::anyhow!("filename dedup failed: {e}"))?;
+    let disk_path = saved_dir.join(&saved_filename);
+
+    write_file_atomic(&disk_path, bytes)
+        .await
+        .map_err(|e| anyhow::anyhow!("write failed: {e}"))?;
+
+    let id = uuid::Uuid::new_v4().to_string();
+    let size_bytes = bytes.len() as u64;
+    let disk_path_str = disk_path.to_string_lossy().to_string();
+
+    sqlx::query(
+        "INSERT INTO saved_attachments \
+         (id, channel_id, original_filename, saved_filename, mime_type, size_bytes, disk_path) \
+         VALUES (?, ?, ?, ?, ?, ?, ?)",
+    )
+    .bind(&id)
+    .bind(channel_id)
+    .bind(original_filename)
+    .bind(&saved_filename)
+    .bind(mime_type)
+    .bind(size_bytes as i64)
+    .bind(&disk_path_str)
+    .execute(pool)
+    .await?;
+
+    tracing::info!(
+        attachment_id = %id,
+        original = %original_filename,
+        saved = %saved_filename,
+        size = size_bytes,
+        channel_id,
+        "persisted portal upload attachment"
+    );
+
+    Ok(SavedAttachmentMeta {
+        id,
+        filename: original_filename.to_string(),
+        saved_filename,
+        mime_type: mime_type.to_string(),
+        size_bytes,
+    })
+}
diff --git a/src/agent/channel_dispatch.rs b/src/agent/channel_dispatch.rs
index b4a884f46..30402c119 100644
--- a/src/agent/channel_dispatch.rs
+++ b/src/agent/channel_dispatch.rs
@@ -130,10 +130,12 @@ pub async fn spawn_branch_from_state(
     let routing = rc.routing.load();
     let model_name = routing.resolve(ProcessType::Branch, None).to_string();
     let tool_use_enforcement = rc.tool_use_enforcement.load();
+    let wiki_enabled = state.deps.wiki_store.is_some();
     let system_prompt = prompt_engine
         .render_branch_prompt(
             &rc.instance_dir.display().to_string(),
             &rc.workspace_dir.display().to_string(),
+            wiki_enabled,
         )
         .and_then(|prompt| {
             prompt_engine.maybe_append_tool_use_enforcement(
@@ -290,6 +292,9 @@ async fn spawn_branch(
         state.channel_store.clone(),
         crate::conversation::ProcessRunLogger::new(state.deps.sqlite_pool.clone()),
         profile,
+        state.deps.api_state.clone(),
+        state.deps.wiki_store.clone(),
+        state.deps.sandbox.clone(),
     );
     let branch_max_turns = **state.deps.runtime_config.branch_max_turns.load();
 
@@ -327,6 +332,11 @@ async fn spawn_branch(
         channel_id = %state.channel_id,
         description = %description,
     );
+    // Acquire the write lock before spawning so the event loop cannot process
+    // BranchResult (which also takes a write lock) before we insert the handle.
+    // Without this, a fast-completing branch sends BranchResult before the
+    // insert, causing `was_active` to be false and suppressing the retrigger.
+    let mut branches = state.active_branches.write().await;
     let handle = tokio::spawn(
         async move {
             if let Err(error) = branch.run(&prompt).await {
@@ -352,11 +362,8 @@ async fn spawn_branch(
         }
         .instrument(branch_span),
     );
-
-    {
-        let mut branches = state.active_branches.write().await;
-        branches.insert(branch_id, handle);
-    }
+    branches.insert(branch_id, handle);
+    drop(branches);
 
     {
         let mut status = state.status_block.write().await;
@@ -452,6 +459,101 @@ async fn release_task_reservation(state: &ChannelState, task: &str) {
     state.reserved_tasks.write().await.remove(&normalized);
 }
 
+/// Build pre-rendered project context for injection into worker/channel prompts.
+///
+/// Fetches all active projects with their repos and worktrees, converts them
+/// to prompt-friendly structs, and renders via the projects_context template.
+/// Returns `None` if no projects exist or if rendering fails.
+pub async fn build_project_context(
+    deps: &AgentDeps,
+    prompt_engine: &crate::prompts::engine::PromptEngine,
+) -> Option<String> {
+    use crate::prompts::engine::{ProjectContext, ProjectRepoContext, ProjectWorktreeContext};
+
+    let store = &deps.project_store;
+    let projects = match store
+        .list_projects(Some(crate::projects::ProjectStatus::Active))
+        .await
+    {
+        Ok(projects) => projects,
+        Err(error) => {
+            tracing::warn!(%error, "failed to load projects for prompt injection");
+            return None;
+        }
+    };
+
+    if projects.is_empty() {
+        return None;
+    }
+
+    let mut contexts = Vec::with_capacity(projects.len());
+    for project in &projects {
+        let repos = match store.list_repos(&project.id).await {
+            Ok(repos) => repos,
+            Err(error) => {
+                tracing::warn!(%error, project_id = %project.id, "failed to load repos for project");
+                Vec::new()
+            }
+        };
+
+        let worktrees = match store.list_worktrees_with_repos(&project.id).await {
+            Ok(worktrees) => worktrees,
+            Err(error) => {
+                tracing::warn!(%error, project_id = %project.id, "failed to load worktrees for project");
+                Vec::new()
+            }
+        };
+
+        contexts.push(ProjectContext {
+            name: project.name.clone(),
+            root_path: project.root_path.clone(),
+            description: if project.description.is_empty() {
+                None
+            } else {
+                Some(project.description.clone())
+            },
+            tags: project.tags.clone(),
+            repos: repos
+                .into_iter()
+                .map(|repo| ProjectRepoContext {
+                    name: repo.name.clone(),
+                    path: repo.path.clone(),
+                    default_branch: repo.default_branch.clone(),
+                    remote_url: if repo.remote_url.is_empty() {
+                        None
+                    } else {
+                        Some(repo.remote_url.clone())
+                    },
+                })
+                .collect(),
+            worktrees: worktrees
+                .into_iter()
+                .map(|wt| ProjectWorktreeContext {
+                    name: wt.worktree.name.clone(),
+                    path: wt.worktree.path.clone(),
+                    branch: wt.worktree.branch.clone(),
+                    repo_name: wt.repo_name.clone(),
+                })
+                .collect(),
+        });
+    }
+
+    match prompt_engine.render_projects_context(contexts) {
+        Ok(rendered) => {
+            let rendered = rendered.trim().to_string();
+            if rendered.is_empty() {
+                None
+            } else {
+                Some(rendered)
+            }
+        }
+        Err(error) => {
+            tracing::warn!(%error, "failed to render projects context");
+            None
+        }
+    }
+}
+
 /// Spawn a worker from a ChannelState. Used by the SpawnWorkerTool.
 pub async fn spawn_worker_from_state(
     state: &ChannelState,
@@ -504,6 +606,7 @@ async fn spawn_worker_inner(
     let routing = rc.routing.load();
     let model_name = routing.resolve(ProcessType::Worker, None).to_string();
     let tool_use_enforcement = rc.tool_use_enforcement.load();
+    let project_context = build_project_context(&state.deps, &prompt_engine).await;
     let worker_system_prompt = prompt_engine
         .render_worker_prompt(
             &rc.instance_dir.display().to_string(),
@@ -515,6 +618,8 @@ async fn spawn_worker_inner(
             &tool_secret_names,
             browser_config.persist_session,
             worker_status_text,
+            worker_context.wiki_write && state.deps.wiki_store.is_some(),
+            project_context,
         )
         .map_err(|e| AgentError::Other(anyhow::anyhow!("{e}")))?;
     let skills = rc.skills.load();
@@ -611,6 +716,7 @@ async fn spawn_worker_inner(
             state.logs_dir.clone(),
             initial_history,
             worker_context.memory,
+            worker_context.wiki_write,
             worker_model_override,
         );
         let worker_id = worker.id;
@@ -637,6 +743,7 @@ async fn spawn_worker_inner(
             state.logs_dir.clone(),
             initial_history,
             worker_context.memory,
+            worker_context.wiki_write,
             worker_model_override,
         );
         state
@@ -1177,6 +1284,7 @@ pub async fn resume_idle_worker_into_state(
             let routing = rc.routing.load();
             let model_name = routing.resolve(ProcessType::Worker, None).to_string();
             let tool_use_enforcement = rc.tool_use_enforcement.load();
+            let project_context = build_project_context(&state.deps, &prompt_engine).await;
             let system_prompt = prompt_engine
                 .render_worker_prompt(
                     &rc.instance_dir.display().to_string(),
@@ -1188,6 +1296,8 @@ pub async fn resume_idle_worker_into_state(
                     &tool_secret_names,
                     browser_config.persist_session,
                     worker_status_text,
+                    false, // resumed workers use original context; wiki not re-injected
+                    project_context,
                 )
                 .and_then(|prompt| {
                     prompt_engine.maybe_append_tool_use_enforcement(
diff --git a/src/agent/channel_history.rs b/src/agent/channel_history.rs
index 195baa60a..4b4fa5f45 100644
--- a/src/agent/channel_history.rs
+++ b/src/agent/channel_history.rs
@@ -8,22 +8,31 @@ use crate::{ChannelId, InboundMessage, ProcessEvent};
 
 /// Write history back after the agentic loop completes.
 ///
-/// On success or `MaxTurnsError`, the history Rig built is consistent and safe
-/// to keep.
+/// On success, `prompt_once_streaming` writes the final `chat_history` back
+/// to the external `history` parameter, so we extend guard with the net-new
+/// messages from that turn.
 ///
-/// On `PromptCancelled` (e.g. reply tool fired), Rig's carried history has
-/// the user prompt + the assistant's tool-call message but no tool results.
-/// Writing it back wholesale would leave a dangling tool-call that poisons
-/// every subsequent turn. Instead, we preserve only the **first user text
-/// message** Rig appended (the real user prompt), while discarding assistant
-/// tool-call messages and tool-result user messages.
+/// On `MaxTurnsError`, the loop hit the turn cap before the agent finished.
+/// `prompt_once_streaming` does NOT update the external `history` in this
+/// case — only the Ok path does. We therefore use the `chat_history` carried
+/// inside the error, which contains everything built before the limit was hit.
+/// The state is consistent (no dangling tool calls) because the error is
+/// raised at the start of a new loop iteration, after the previous iteration
+/// pushed all tool results.
+///
+/// On `PromptCancelled` (reply tool fired, context injection, loop guard
+/// circuit break, etc.), the same applies: `prompt_once_streaming` does NOT
+/// write `chat_history` back to `history` on early exit, so reading
+/// `history[history_len_before..]` would always return an empty slice —
+/// silently dropping the user message and reply from every cancelled turn.
+/// Instead we destructure `chat_history` from the error, which contains the
+/// real exchange.  For regular turns we preserve only the first user text
+/// message and a clean assistant reply (discarding dangling tool calls and
+/// tool-result user messages). For retrigger turns we extract the relay text.
 ///
 /// On hard errors, we truncate to the pre-turn snapshot since the history
 /// state is unpredictable.
 ///
-/// `MaxTurnsError` is safe — Rig pushes all tool results into a `User` message
-/// before raising it, so history is consistent.
-///
 /// Returns true when a retrigger PromptCancelled turn had a reply tool call
 /// extracted and persisted as a clean assistant text message.
 pub(crate) fn apply_history_after_turn(
@@ -35,12 +44,32 @@ pub(crate) fn apply_history_after_turn(
     is_retrigger: bool,
 ) -> bool {
     match result {
-        Ok(_) | Err(rig::completion::PromptError::MaxTurnsError { .. }) => {
-            *guard = history;
+        Ok(_) => {
+            // prompt_once_streaming writes *history = chat_history in the Ok
+            // path, so `history` is up-to-date. Extend guard with the net-new
+            // messages rather than replacing it wholesale, so that any
+            // concurrent writes from background tasks (e.g. the compaction
+            // worker) that landed in guard between the clone and the write-back
+            // are not erased.
+            let new_messages = history.into_iter().skip(history_len_before);
+            guard.extend(new_messages);
+            false
+        }
+        Err(rig::completion::PromptError::MaxTurnsError { chat_history, .. }) => {
+            // prompt_once_streaming does NOT update `history` for MaxTurnsError.
+            // Use the chat_history embedded in the error instead — it contains
+            // every message built before the turn cap was hit, in a consistent
+            // state (no dangling tool calls; the error fires at loop-iteration
+            // start, after the previous iteration's tool results were pushed).
+            let new_messages = chat_history[history_len_before..].iter().cloned();
+            guard.extend(new_messages);
             false
         }
-        Err(rig::completion::PromptError::PromptCancelled { .. }) => {
-            let new_messages = &history[history_len_before..];
+        Err(rig::completion::PromptError::PromptCancelled { chat_history, .. }) => {
+            // prompt_once_streaming does NOT update `history` for PromptCancelled.
+            // Use chat_history from the error: it contains the messages that
+            // were actually built before cancellation fired.
+            let new_messages = &chat_history[history_len_before..];
 
             // Rig appended the user prompt and possibly an assistant tool-call
             // message to history before cancellation.
@@ -121,7 +150,7 @@ pub(crate) fn apply_history_after_turn(
             // Hard errors: history state is unpredictable, truncate to snapshot.
             tracing::debug!(
                 channel_id = %channel_id,
-                rolled_back = history.len().saturating_sub(history_len_before),
+                rolled_back = guard.len().saturating_sub(history_len_before),
                 "rolling back history after failed turn"
             );
             guard.truncate(history_len_before);
diff --git a/src/agent/cortex.rs b/src/agent/cortex.rs
index 226337dca..8081ac307 100644
--- a/src/agent/cortex.rs
+++ b/src/agent/cortex.rs
@@ -774,17 +774,53 @@ pub struct CortexEvent {
 #[derive(Debug, Clone)]
 pub struct CortexLogger {
     pool: SqlitePool,
+    /// Optional notification store for emitting dashboard inbox entries.
+    notification_store: Option<std::sync::Arc<crate::notifications::NotificationStore>>,
+    /// Agent id, recorded in notifications for filtering.
+    agent_id: Option<String>,
 }
 
+// TODO: re-enable once notifications have proper action_url
+// const NOTIFY_EVENT_TYPES: &[&str] = &["circuit_breaker_tripped", "worker_killed"];
+
 impl CortexLogger {
     pub fn new(pool: SqlitePool) -> Self {
-        Self { pool }
+        Self {
+            pool,
+            notification_store: None,
+            agent_id: None,
+        }
+    }
+
+    /// Attach a notification store so high-signal events surface in the inbox.
+    pub fn with_notifications(
+        mut self,
+        store: std::sync::Arc<crate::notifications::NotificationStore>,
+        agent_id: String,
+    ) -> Self {
+        self.notification_store = Some(store);
+        self.agent_id = Some(agent_id);
+        self
     }
 
     /// Log a cortex action. Fire-and-forget.
     pub fn log(&self, event_type: &str, summary: &str, details: Option<serde_json::Value>) {
         let pool = self.pool.clone();
         let id = uuid::Uuid::new_v4().to_string();
+
+        // TODO: re-enable once action_url points somewhere useful
+        // let should_notify =
+        //     self.notification_store.is_some() && NOTIFY_EVENT_TYPES.contains(&event_type);
+        // let notif_data = should_notify.then(|| {
+        //     (
+        //         self.notification_store.clone().unwrap(),
+        //         self.agent_id.clone(),
+        //         summary.to_string(),
+        //         details.clone(),
+        //         id.clone(),
+        //     )
+        // });
+
         let event_type = event_type.to_string();
         let summary = summary.to_string();
         let details_json = details.map(|d| d.to_string());
@@ -803,6 +839,26 @@ impl CortexLogger {
                 tracing::warn!(%error, "failed to persist cortex event");
             }
         });
+
+        // TODO: re-enable once action_url points somewhere useful
+        // if let Some((store, agent_id, title, details, entity_id)) = notif_data {
+        //     tokio::spawn(async move {
+        //         let n = crate::notifications::NewNotification {
+        //             kind: crate::notifications::NotificationKind::CortexObservation,
+        //             severity: crate::notifications::NotificationSeverity::Warn,
+        //             title,
+        //             body: details.as_ref().map(|d| d.to_string()),
+        //             agent_id,
+        //             related_entity_type: Some("cortex_event".to_string()),
+        //             related_entity_id: Some(entity_id),
+        //             action_url: None,
+        //             metadata: None,
+        //         };
+        //         if let Err(error) = store.insert(n).await {
+        //             tracing::warn!(%error, "failed to insert cortex observation notification");
+        //         }
+        //     });
+        // }
     }
 
     /// Load cortex events with optional type filter, newest first.
@@ -1143,19 +1199,24 @@ impl Cortex {
             }
         }
 
-        logger.log(
-            "health_check",
-            "Cortex supervision health tick completed",
-            Some(serde_json::json!({
-                "kill_skipped_due_to_lag": false,
-                "kill_budget": kill_budget,
-                "kill_attempts": kill_attempts,
-                "kill_actions": kill_actions,
-                "worker_timeout_secs": worker_timeout.as_secs(),
-                "branch_timeout_secs": branch_timeout.as_secs(),
-                "pruned_dead_channels": pruned_dead_channels,
-            })),
-        );
+        // Only log health ticks when something actually happened.
+        if kill_actions > 0 || pruned_dead_channels > 0 {
+            logger.log(
+                "health_check",
+                &format!(
+                    "Cortex supervision: killed {} processes, pruned {} dead channels",
+                    kill_actions, pruned_dead_channels
+                ),
+                Some(serde_json::json!({
+                    "kill_budget": kill_budget,
+                    "kill_attempts": kill_attempts,
+                    "kill_actions": kill_actions,
+                    "worker_timeout_secs": worker_timeout.as_secs(),
+                    "branch_timeout_secs": branch_timeout.as_secs(),
+                    "pruned_dead_channels": pruned_dead_channels,
+                })),
+            );
+        }
 
         Ok(())
     }
@@ -2421,9 +2482,13 @@ pub async fn generate_bulletin(deps: &AgentDeps, logger: &CortexLogger) -> bool
 
     let routing = deps.runtime_config.routing.load();
     let model_name = routing.resolve(ProcessType::Cortex, None).to_string();
+    let usage_accumulator = std::sync::Arc::new(tokio::sync::Mutex::new(
+        crate::llm::usage::UsageAccumulator::new(),
+    ));
     let model = SpacebotModel::make(&deps.llm_manager, &model_name)
         .with_context(&*deps.agent_id, "cortex")
-        .with_routing((**routing).clone());
+        .with_routing((**routing).clone())
+        .with_accumulator(usage_accumulator.clone());
 
     // No tools needed — the LLM just synthesizes the pre-gathered data.
     // Attach CortexHook so observation/termination semantics stay consistent
@@ -2443,7 +2508,18 @@ pub async fn generate_bulletin(deps: &AgentDeps, logger: &CortexLogger) -> bool
         }
     };
 
-    match agent.prompt(&synthesis_prompt).await {
+    let result = agent.prompt(&synthesis_prompt).await;
+    // Flush cortex token usage.
+    let acc = usage_accumulator.lock().await;
+    if let Err(error) = acc
+        .flush(&deps.sqlite_pool, &deps.agent_id, "cortex", None)
+        .await
+    {
+        tracing::warn!(%error, "failed to flush cortex token usage");
+    }
+    drop(acc);
+
+    match result {
         Ok(bulletin) => {
             let word_count = bulletin.split_whitespace().count();
             let duration_ms = started.elapsed().as_millis() as u64;
@@ -2587,9 +2663,13 @@ pub async fn generate_knowledge_synthesis(deps: &AgentDeps, logger: &CortexLogge
 
     let routing = deps.runtime_config.routing.load();
     let model_name = routing.resolve(ProcessType::Cortex, None).to_string();
+    let usage_accumulator = std::sync::Arc::new(tokio::sync::Mutex::new(
+        crate::llm::usage::UsageAccumulator::new(),
+    ));
     let model = SpacebotModel::make(&deps.llm_manager, &model_name)
         .with_context(&*deps.agent_id, "cortex")
-        .with_routing((**routing).clone());
+        .with_routing((**routing).clone())
+        .with_accumulator(usage_accumulator.clone());
 
     let agent = AgentBuilder::new(model)
         .preamble(&synthesis_preamble)
@@ -2605,7 +2685,17 @@ pub async fn generate_knowledge_synthesis(deps: &AgentDeps, logger: &CortexLogge
         }
     };
 
-    match agent.prompt(&user_prompt).await {
+    let result = agent.prompt(&user_prompt).await;
+    let acc = usage_accumulator.lock().await;
+    if let Err(error) = acc
+        .flush(&deps.sqlite_pool, &deps.agent_id, "cortex", None)
+        .await
+    {
+        tracing::warn!(%error, "failed to flush cortex token usage");
+    }
+    drop(acc);
+
+    match result {
         Ok(synthesis) => {
             let word_count = synthesis.split_whitespace().count();
             let duration_ms = started.elapsed().as_millis() as u64;
@@ -2837,16 +2927,29 @@ pub async fn maybe_synthesize_intraday_batch(
     // Use a short one-shot LLM call — no tools, no hooks.
     let routing = deps.runtime_config.routing.load();
     let model_name = routing.resolve(ProcessType::Cortex, None).to_string();
+    let usage_accumulator = std::sync::Arc::new(tokio::sync::Mutex::new(
+        crate::llm::usage::UsageAccumulator::new(),
+    ));
     let model = SpacebotModel::make(&deps.llm_manager, &model_name)
         .with_context(&*deps.agent_id, "cortex")
-        .with_routing((**routing).clone());
+        .with_routing((**routing).clone())
+        .with_accumulator(usage_accumulator.clone());
 
     let agent = AgentBuilder::new(model)
         .preamble("You are a concise narrative summarizer. Output only the summary paragraph, nothing else.")
         .hook(CortexHook::new())
         .build();
 
-    let synthesis = agent.prompt(&prompt).await?;
+    let synthesis = agent.prompt(&prompt).await;
+    let acc = usage_accumulator.lock().await;
+    if let Err(e) = acc
+        .flush(&deps.sqlite_pool, &deps.agent_id, "cortex", None)
+        .await
+    {
+        tracing::warn!(error = %e, "failed to flush cortex token usage");
+    }
+    drop(acc);
+    let synthesis = synthesis?;
 
     // Store the synthesis.
     wm.save_intraday_synthesis(
@@ -2979,16 +3082,29 @@ pub async fn maybe_synthesize_daily_summary(
     // One-shot LLM call.
     let routing = deps.runtime_config.routing.load();
     let model_name = routing.resolve(ProcessType::Cortex, None).to_string();
+    let usage_accumulator = std::sync::Arc::new(tokio::sync::Mutex::new(
+        crate::llm::usage::UsageAccumulator::new(),
+    ));
     let model = SpacebotModel::make(&deps.llm_manager, &model_name)
         .with_context(&*deps.agent_id, "cortex")
-        .with_routing((**routing).clone());
+        .with_routing((**routing).clone())
+        .with_accumulator(usage_accumulator.clone());
 
     let agent = AgentBuilder::new(model)
         .preamble("You are a daily activity summarizer. Output only the summary, nothing else.")
         .hook(CortexHook::new())
         .build();
 
-    let summary = agent.prompt(&prompt).await?;
+    let summary = agent.prompt(&prompt).await;
+    let acc = usage_accumulator.lock().await;
+    if let Err(e) = acc
+        .flush(&deps.sqlite_pool, &deps.agent_id, "cortex", None)
+        .await
+    {
+        tracing::warn!(error = %e, "failed to flush cortex token usage");
+    }
+    drop(acc);
+    let summary = summary?;
 
     wm.save_daily_summary(&yesterday, &summary, total_events)
         .await?;
@@ -3130,19 +3246,32 @@ async fn generate_profile(deps: &AgentDeps, logger: &CortexLogger) {
 
     let routing = deps.runtime_config.routing.load();
     let model_name = routing.resolve(ProcessType::Cortex, None).to_string();
+    let usage_accumulator = std::sync::Arc::new(tokio::sync::Mutex::new(
+        crate::llm::usage::UsageAccumulator::new(),
+    ));
     let model = SpacebotModel::make(&deps.llm_manager, &model_name)
         .with_context(&*deps.agent_id, "cortex")
-        .with_routing((**routing).clone());
+        .with_routing((**routing).clone())
+        .with_accumulator(usage_accumulator.clone());
 
     let agent = AgentBuilder::new(model)
         .preamble(&profile_prompt)
         .hook(CortexHook::new())
         .build();
 
-    match agent
+    let result = agent
         .prompt_typed::<ProfileLlmResponse>(&synthesis_prompt)
+        .await;
+    let acc = usage_accumulator.lock().await;
+    if let Err(e) = acc
+        .flush(&deps.sqlite_pool, &deps.agent_id, "cortex", None)
         .await
     {
+        tracing::warn!(error = %e, "failed to flush cortex token usage");
+    }
+    drop(acc);
+
+    match result {
         Ok(profile_data) => {
             let duration_ms = started.elapsed().as_millis() as u64;
             let agent_id = &deps.agent_id;
@@ -3292,6 +3421,8 @@ async fn pickup_one_ready_task(deps: &AgentDeps, logger: &CortexLogger) -> anyho
     let routing = deps.runtime_config.routing.load();
     let model_name = routing.resolve(ProcessType::Worker, None).to_string();
     let tool_use_enforcement = deps.runtime_config.tool_use_enforcement.load();
+    let project_context =
+        crate::agent::channel_dispatch::build_project_context(deps, &prompt_engine).await;
     let worker_system_prompt = prompt_engine
         .render_worker_prompt(
             &deps.runtime_config.instance_dir.display().to_string(),
@@ -3303,16 +3434,35 @@ async fn pickup_one_ready_task(deps: &AgentDeps, logger: &CortexLogger) -> anyho
             &tool_secret_names,
             browser_config.persist_session,
             worker_status_text,
+            deps.wiki_store.is_some(),
+            project_context,
         )
-        .and_then(|prompt| {
-            prompt_engine.maybe_append_tool_use_enforcement(
-                prompt,
-                tool_use_enforcement.as_ref(),
-                &model_name,
-            )
-        })
         .map_err(|error| anyhow::anyhow!("failed to render worker prompt: {error}"))?;
 
+    // Append skills listing so task workers can discover and read_skill relevant
+    // skills (e.g. wiki-writing). No suggested skills — the worker decides based
+    // on the task description.
+    let skills = deps.runtime_config.skills.load();
+    let worker_system_prompt = match skills.render_worker_skills(&[], &prompt_engine) {
+        Ok(skills_prompt) if !skills_prompt.is_empty() => {
+            format!("{worker_system_prompt}\n\n{skills_prompt}")
+        }
+        Ok(_) => worker_system_prompt,
+        Err(error) => {
+            tracing::warn!(%error, "failed to render worker skills listing for task pickup");
+            worker_system_prompt
+        }
+    };
+
+    // Tool-use enforcement must be the last instruction appended.
+    let worker_system_prompt = prompt_engine
+        .maybe_append_tool_use_enforcement(
+            worker_system_prompt,
+            tool_use_enforcement.as_ref(),
+            &model_name,
+        )
+        .map_err(|error| anyhow::anyhow!("failed to append tool-use enforcement: {error}"))?;
+
     let mut task_prompt = format!("Execute task #{}: {}", task.task_number, task.title);
     if let Some(description) = &task.description {
         task_prompt.push_str("\n\nDescription:\n");
@@ -3355,6 +3505,7 @@ async fn pickup_one_ready_task(deps: &AgentDeps, logger: &CortexLogger) -> anyho
         logs_dir,
         Vec::new(), // no initial history for cortex task workers
         crate::conversation::settings::WorkerMemoryMode::None,
+        deps.wiki_store.is_some(),
         None, // No model override for cortex workers
     );
 
diff --git a/src/agent/cortex_chat.rs b/src/agent/cortex_chat.rs
index 83ea43999..9fed2d842 100644
--- a/src/agent/cortex_chat.rs
+++ b/src/agent/cortex_chat.rs
@@ -1,5 +1,10 @@
 //! Cortex chat: persistent admin conversation with the cortex.
 //!
+//! **DEPRECATED:** Cortex chat is being replaced by per-channel settings
+//! (Channel Settings UI) which provide fine-grained control. Remaining
+//! functionality (skills_search, install_skill, config_inspect, etc.) is
+//! being ported to channel/worker toolsets. Do not add new features here.
+//!
 //! One session per agent. The admin talks to the cortex interactively,
 //! with the full toolset (memory, shell, file, browser, web search).
 //! When opened on a channel page, the channel's recent history is injected
@@ -881,6 +886,16 @@ impl CortexChatSession {
                                 transcript.push_str(&format!("*[Worker: {task}]*: {result}\n\n"));
                             }
                         }
+                        crate::conversation::history::TimelineItem::ToolCallRun {
+                            tool_name,
+                            result,
+                            ..
+                        } => {
+                            if let Some(result) = result {
+                                transcript
+                                    .push_str(&format!("*[Tool: {tool_name}]*: {result}\n\n"));
+                            }
+                        }
                     }
                 }
                 Some(transcript)
diff --git a/src/agent/ingestion.rs b/src/agent/ingestion.rs
index e2c9e69b1..0642b630d 100644
--- a/src/agent/ingestion.rs
+++ b/src/agent/ingestion.rs
@@ -506,6 +506,9 @@ async fn process_chunk(
             working_memory: Some(deps.working_memory.clone()),
             channel_id: None,
         },
+        deps.api_state.clone(),
+        deps.wiki_store.clone(),
+        deps.sandbox.clone(),
     );
 
     let agent = AgentBuilder::new(model)
diff --git a/src/agent/worker.rs b/src/agent/worker.rs
index f7dcc35c5..5e42f56df 100644
--- a/src/agent/worker.rs
+++ b/src/agent/worker.rs
@@ -93,6 +93,8 @@ pub struct Worker {
     pub prior_history: Option<Vec<rig::message::Message>>,
     /// Worker memory mode controlling what memory tools this worker gets.
     pub worker_memory_mode: WorkerMemoryMode,
+    /// Whether this worker has wiki write tools.
+    pub wiki_write: bool,
     /// Model override from conversation settings (per-process or blanket).
     pub model_override: Option<String>,
 }
@@ -111,6 +113,7 @@ impl Worker {
         input_rx: Option<mpsc::Receiver<String>>,
         initial_history: Vec<rig::message::Message>,
         worker_memory_mode: WorkerMemoryMode,
+        wiki_write: bool,
         model_override: Option<String>,
     ) -> (Self, mpsc::Sender<String>) {
         let id = Uuid::new_v4();
@@ -148,6 +151,7 @@ impl Worker {
                     Some(initial_history)
                 },
                 worker_memory_mode,
+                wiki_write,
                 model_override,
             },
             inject_tx,
@@ -171,6 +175,7 @@ impl Worker {
         logs_dir: PathBuf,
         initial_history: Vec<rig::message::Message>,
         worker_memory_mode: WorkerMemoryMode,
+        wiki_write: bool,
         model_override: Option<String>,
     ) -> (Self, mpsc::Sender<String>) {
         Self::build(
@@ -185,6 +190,7 @@ impl Worker {
             None,
             initial_history,
             worker_memory_mode,
+            wiki_write,
             model_override,
         )
     }
@@ -206,6 +212,7 @@ impl Worker {
         logs_dir: PathBuf,
         initial_history: Vec<rig::message::Message>,
         worker_memory_mode: WorkerMemoryMode,
+        wiki_write: bool,
         model_override: Option<String>,
     ) -> (Self, mpsc::Sender<String>, mpsc::Sender<String>) {
         let (input_tx, input_rx) = mpsc::channel(32);
@@ -221,6 +228,7 @@ impl Worker {
             Some(input_rx),
             initial_history,
             worker_memory_mode,
+            wiki_write,
             model_override,
         );
 
@@ -246,6 +254,7 @@ impl Worker {
         prior_history: Vec<rig::message::Message>,
     ) -> (Self, mpsc::Sender<String>, mpsc::Sender<String>) {
         let (input_tx, input_rx) = mpsc::channel(32);
+        let wiki_write = deps.wiki_store.is_some();
         let (mut worker, inject_tx) = Self::build(
             channel_id,
             task,
@@ -258,7 +267,8 @@ impl Worker {
             Some(input_rx),
             Vec::new(), // initial_history - will be replaced by prior_history below
             WorkerMemoryMode::None, // Resumed workers don't have context settings
-            None,       // Resumed workers don't have model override
+            wiki_write,
+            None, // Resumed workers don't have model override
         );
         // Reuse the original worker ID so DB row stays linked.
         worker.id = existing_id;
@@ -342,6 +352,8 @@ impl Worker {
             self.deps.runtime_config.clone(),
             self.worker_memory_mode,
             self.deps.memory_search.clone(),
+            self.wiki_write,
+            self.deps.wiki_store.clone(),
         );
 
         let routing = self.deps.runtime_config.routing.load();
@@ -350,10 +362,14 @@ impl Worker {
             .as_deref()
             .unwrap_or_else(|| routing.resolve(ProcessType::Worker, None))
             .to_string();
+        let usage_accumulator = std::sync::Arc::new(tokio::sync::Mutex::new(
+            crate::llm::usage::UsageAccumulator::new(),
+        ));
         let model = SpacebotModel::make(&self.deps.llm_manager, &model_name)
             .with_context(&*self.deps.agent_id, "worker")
             .with_worker_type("builtin")
-            .with_routing((**routing).clone());
+            .with_routing((**routing).clone())
+            .with_accumulator(usage_accumulator.clone());
 
         let agent = AgentBuilder::new(model)
             .preamble(&self.system_prompt)
@@ -719,6 +735,20 @@ impl Worker {
         // Persist transcript blob
         self.persist_transcript(&compacted_history, &history).await;
 
+        // Flush accumulated token usage.
+        let acc = usage_accumulator.lock().await;
+        if let Err(error) = acc
+            .flush(
+                &self.deps.sqlite_pool,
+                &self.deps.agent_id,
+                "worker",
+                self.channel_id.as_deref(),
+            )
+            .await
+        {
+            tracing::warn!(%error, "failed to flush worker token usage");
+        }
+
         tracing::info!(worker_id = %self.id, "worker completed");
         Ok(result)
     }
diff --git a/src/api.rs b/src/api.rs
index f52db2fe1..7ff078a3a 100644
--- a/src/api.rs
+++ b/src/api.rs
@@ -4,7 +4,9 @@
 //! managing agents, viewing status, and interacting with the system.
 //! Includes an SSE endpoint for realtime event streaming.
 
+mod activity;
 pub mod agents;
+mod attachments;
 mod bindings;
 mod channels;
 mod config;
@@ -17,6 +19,7 @@ mod mcp;
 mod memories;
 mod messaging;
 mod models;
+mod notifications;
 mod opencode_proxy;
 mod portal;
 mod projects;
@@ -30,7 +33,9 @@ mod state;
 mod system;
 mod tasks;
 mod tools;
+mod usage;
+mod wiki;
 mod workers;
 
 pub use server::{api_router, start_http_server};
-pub use state::{AgentInfo, ApiEvent, ApiState};
+pub use state::{AgentInfo, ApiEvent, ApiState, ChannelToolCallEntry};
diff --git a/src/api/activity.rs b/src/api/activity.rs
new file mode 100644
index 000000000..1ae48bb46
--- /dev/null
+++ b/src/api/activity.rs
@@ -0,0 +1,353 @@
+//! Instance-wide activity endpoint — aggregates process counts and token
+//! usage across all agents, grouped by day.
+
+use super::state::ApiState;
+
+use axum::Json;
+use axum::extract::{Query, State};
+use axum::http::StatusCode;
+use serde::{Deserialize, Serialize};
+use sqlx::Row as _;
+use std::collections::HashMap;
+use std::sync::Arc;
+
+// ── Response types ──
+
+#[derive(Debug, Clone, Default, Serialize, utoipa::ToSchema)]
+pub(super) struct ProcessTokens {
+    input: i64,
+    output: i64,
+    cache_read: i64,
+    reasoning: i64,
+    cost_usd: f64,
+}
+
+#[derive(Debug, Clone, Default, Serialize, utoipa::ToSchema)]
+pub(super) struct TokenSummary {
+    input: i64,
+    output: i64,
+    cache_read: i64,
+    reasoning: i64,
+    cost_usd: f64,
+    by_process: HashMap<String, ProcessTokens>,
+}
+
+#[derive(Debug, Clone, Serialize, utoipa::ToSchema)]
+pub(super) struct ActivityDay {
+    date: String,
+    messages: i64,
+    branches: i64,
+    workers: i64,
+    cortex: i64,
+    cron: i64,
+    active_channels: i64,
+    tokens: TokenSummary,
+}
+
+impl ActivityDay {
+    fn new(date: String) -> Self {
+        Self {
+            date,
+            messages: 0,
+            branches: 0,
+            workers: 0,
+            cortex: 0,
+            cron: 0,
+            active_channels: 0,
+            tokens: TokenSummary::default(),
+        }
+    }
+}
+
+#[derive(Debug, Clone, Default, Serialize, utoipa::ToSchema)]
+pub(super) struct ActivityTotals {
+    messages: i64,
+    branches: i64,
+    workers: i64,
+    cortex: i64,
+    cron: i64,
+    active_channels: i64,
+    tokens: TokenSummary,
+}
+
+#[derive(Debug, Serialize, utoipa::ToSchema)]
+pub(super) struct ActivityResponse {
+    daily: Vec<ActivityDay>,
+    totals: ActivityTotals,
+}
+
+// ── Query params ──
+
+#[derive(Debug, Deserialize, utoipa::IntoParams)]
+pub(super) struct ActivityQuery {
+    /// ISO 8601 lower bound (default: 30 days ago).
+    #[serde(default)]
+    since: Option<String>,
+    /// ISO 8601 upper bound.
+    #[serde(default)]
+    until: Option<String>,
+}
+
+fn default_since() -> String {
+    let thirty_days_ago = chrono::Utc::now() - chrono::Duration::days(30);
+    thirty_days_ago.format("%Y-%m-%dT%H:%M:%S%.3fZ").to_string()
+}
+
+// ── Helpers ──
+
+/// Merge per-date count into the day map, accumulating across agents.
+fn merge_count(days: &mut HashMap<String, ActivityDay>, date: &str, field: &str, count: i64) {
+    let day = days
+        .entry(date.to_string())
+        .or_insert_with(|| ActivityDay::new(date.to_string()));
+    match field {
+        "messages" => day.messages += count,
+        "branches" => day.branches += count,
+        "workers" => day.workers += count,
+        "cortex" => day.cortex += count,
+        "cron" => day.cron += count,
+        "active_channels" => day.active_channels += count,
+        _ => {}
+    }
+}
+
+/// Run a simple `SELECT date(...) as date, COUNT(*) as count ... GROUP BY date`
+/// query against a pool and merge into the day map.
+async fn query_count(
+    pool: &sqlx::SqlitePool,
+    table: &str,
+    date_column: &str,
+    since: &str,
+    until: Option<&str>,
+    days: &mut HashMap<String, ActivityDay>,
+    field: &str,
+) {
+    let mut sql = format!(
+        "SELECT date({date_column}) as date, COUNT(*) as count \
+         FROM {table} WHERE {date_column} >= ?"
+    );
+    if until.is_some() {
+        sql.push_str(&format!(" AND {date_column} <= ?"));
+    }
+    sql.push_str(" GROUP BY date");
+
+    let mut q = sqlx::query(&sql).bind(since);
+    if let Some(u) = until {
+        q = q.bind(u);
+    }
+
+    if let Ok(rows) = q.fetch_all(pool).await {
+        for row in rows {
+            let date: String = row.get("date");
+            let count: i64 = row.get("count");
+            merge_count(days, &date, field, count);
+        }
+    }
+}
+
+/// Query distinct channel count per day.
+async fn query_active_channels(
+    pool: &sqlx::SqlitePool,
+    since: &str,
+    until: Option<&str>,
+    days: &mut HashMap<String, ActivityDay>,
+) {
+    let mut sql = String::from(
+        "SELECT date(created_at) as date, COUNT(DISTINCT channel_id) as count \
+         FROM conversation_messages WHERE created_at >= ?",
+    );
+    if until.is_some() {
+        sql.push_str(" AND created_at <= ?");
+    }
+    sql.push_str(" GROUP BY date");
+
+    let mut q = sqlx::query(&sql).bind(since);
+    if let Some(u) = until {
+        q = q.bind(u);
+    }
+
+    if let Ok(rows) = q.fetch_all(pool).await {
+        for row in rows {
+            let date: String = row.get("date");
+            let count: i64 = row.get("count");
+            merge_count(days, &date, "active_channels", count);
+        }
+    }
+}
+
+/// Query token usage grouped by date and process_type.
+async fn query_tokens(
+    pool: &sqlx::SqlitePool,
+    since: &str,
+    until: Option<&str>,
+    days: &mut HashMap<String, ActivityDay>,
+) {
+    let mut sql = String::from(
+        "SELECT date(recorded_at) as date, process_type, \
+         COALESCE(SUM(input_tokens), 0) as input_tokens, \
+         COALESCE(SUM(output_tokens), 0) as output_tokens, \
+         COALESCE(SUM(cache_read_tokens), 0) as cache_read_tokens, \
+         COALESCE(SUM(reasoning_tokens), 0) as reasoning_tokens, \
+         COALESCE(SUM(estimated_cost_usd), 0.0) as cost_usd \
+         FROM token_usage WHERE recorded_at >= ?",
+    );
+    if until.is_some() {
+        sql.push_str(" AND recorded_at <= ?");
+    }
+    sql.push_str(" GROUP BY date, process_type ORDER BY date");
+
+    let mut q = sqlx::query(&sql).bind(since);
+    if let Some(u) = until {
+        q = q.bind(u);
+    }
+
+    if let Ok(rows) = q.fetch_all(pool).await {
+        for row in rows {
+            let date: String = row.get("date");
+            let process_type: String = row.get("process_type");
+            let input: i64 = row.get("input_tokens");
+            let output: i64 = row.get("output_tokens");
+            let cache_read: i64 = row.get("cache_read_tokens");
+            let reasoning: i64 = row.get("reasoning_tokens");
+            let cost: f64 = row.get("cost_usd");
+
+            let day = days
+                .entry(date.to_string())
+                .or_insert_with(|| ActivityDay::new(date.to_string()));
+
+            // Accumulate into daily totals.
+            day.tokens.input += input;
+            day.tokens.output += output;
+            day.tokens.cache_read += cache_read;
+            day.tokens.reasoning += reasoning;
+            day.tokens.cost_usd += cost;
+
+            // Accumulate into per-process breakdown.
+            let proc = day.tokens.by_process.entry(process_type).or_default();
+            proc.input += input;
+            proc.output += output;
+            proc.cache_read += cache_read;
+            proc.reasoning += reasoning;
+            proc.cost_usd += cost;
+        }
+    }
+}
+
+// ── Endpoint ──
+
+/// Instance-wide activity aggregation across all agents.
+#[utoipa::path(
+    get,
+    path = "/activity",
+    params(ActivityQuery),
+    responses(
+        (status = 200, body = ActivityResponse),
+        (status = 500, description = "Internal server error"),
+    ),
+    tag = "activity",
+)]
+pub(super) async fn get_activity(
+    State(state): State<Arc<ApiState>>,
+    Query(query): Query<ActivityQuery>,
+) -> Result<Json<ActivityResponse>, StatusCode> {
+    let pools = state.agent_pools.load();
+    let since = query.since.unwrap_or_else(default_since);
+    let until = query.until.as_deref();
+
+    let mut days: HashMap<String, ActivityDay> = HashMap::new();
+
+    for (_agent_id, pool) in pools.iter() {
+        query_count(
+            pool,
+            "conversation_messages",
+            "created_at",
+            &since,
+            until,
+            &mut days,
+            "messages",
+        )
+        .await;
+        query_count(
+            pool,
+            "branch_runs",
+            "started_at",
+            &since,
+            until,
+            &mut days,
+            "branches",
+        )
+        .await;
+        query_count(
+            pool,
+            "worker_runs",
+            "started_at",
+            &since,
+            until,
+            &mut days,
+            "workers",
+        )
+        .await;
+        query_count(
+            pool,
+            "cortex_events",
+            "created_at",
+            &since,
+            until,
+            &mut days,
+            "cortex",
+        )
+        .await;
+        query_count(
+            pool,
+            "cron_executions",
+            "executed_at",
+            &since,
+            until,
+            &mut days,
+            "cron",
+        )
+        .await;
+        query_active_channels(pool, &since, until, &mut days).await;
+        query_tokens(pool, &since, until, &mut days).await;
+    }
+
+    // Sort by date and compute totals.
+    let mut daily: Vec<ActivityDay> = days.into_values().collect();
+    daily.sort_by(|a, b| a.date.cmp(&b.date));
+
+    let mut totals = ActivityTotals::default();
+    // Track unique channels per day for totals — we want the max distinct, but
+    // since each day already has distinct channels counted, total is the sum of
+    // unique channels across all days (or we could do max — the plan says total
+    // distinct, so we'll track a running set... but we don't have the raw IDs
+    // at this point). Use simple sum for now — the total will reflect cumulative
+    // channel activity.
+    for day in &daily {
+        totals.messages += day.messages;
+        totals.branches += day.branches;
+        totals.workers += day.workers;
+        totals.cortex += day.cortex;
+        totals.cron += day.cron;
+        totals.active_channels += day.active_channels;
+        totals.tokens.input += day.tokens.input;
+        totals.tokens.output += day.tokens.output;
+        totals.tokens.cache_read += day.tokens.cache_read;
+        totals.tokens.reasoning += day.tokens.reasoning;
+        totals.tokens.cost_usd += day.tokens.cost_usd;
+
+        for (process_type, proc_tokens) in &day.tokens.by_process {
+            let entry = totals
+                .tokens
+                .by_process
+                .entry(process_type.clone())
+                .or_default();
+            entry.input += proc_tokens.input;
+            entry.output += proc_tokens.output;
+            entry.cache_read += proc_tokens.cache_read;
+            entry.reasoning += proc_tokens.reasoning;
+            entry.cost_usd += proc_tokens.cost_usd;
+        }
+    }
+
+    Ok(Json(ActivityResponse { daily, totals }))
+}
diff --git a/src/api/agents.rs b/src/api/agents.rs
index 90d790a56..b5f595edf 100644
--- a/src/api/agents.rs
+++ b/src/api/agents.rs
@@ -461,16 +461,22 @@ pub(super) async fn trigger_warmup(
             );
             continue;
         };
+        let Some(project_store) = state.project_store.load().as_ref().clone() else {
+            tracing::warn!(
+                agent_id,
+                "shared project store not initialized, skipping warmup"
+            );
+            continue;
+        };
 
         let llm_manager = llm_manager.clone();
         let force = request.force;
         let agent_id = agent_id.clone();
         let injection_tx = state.injection_tx.clone();
         let humans = (**state.agent_humans.load()).clone();
+        let notif_store_warmup = state.notification_store.load().as_ref().clone();
         tokio::spawn(async move {
             let (event_tx, memory_event_tx) = crate::create_process_event_buses();
-            let project_store =
-                std::sync::Arc::new(crate::projects::ProjectStore::new(sqlite_pool.clone()));
             let working_memory_tz = runtime_config
                 .user_timezone
                 .load()
@@ -502,8 +508,13 @@ pub(super) async fn trigger_warmup(
                 ),
                 injection_tx,
                 working_memory,
+                api_state: None,
+                wiki_store: None,
             };
-            let logger = CortexLogger::new(sqlite_pool);
+            let mut logger = CortexLogger::new(sqlite_pool);
+            if let Some(store) = notif_store_warmup {
+                logger = logger.with_notifications(store, agent_id.clone());
+            }
             crate::agent::cortex::run_warmup_once(&deps, &logger, "api_trigger", force).await;
         });
     }
@@ -864,10 +875,15 @@ pub async fn create_agent_internal(
         .await,
     );
 
-    let project_store = std::sync::Arc::new(crate::projects::ProjectStore::new(db.sqlite.clone()));
+    let project_store = state
+        .project_store
+        .load()
+        .as_ref()
+        .clone()
+        .ok_or_else(|| "shared project store not initialized".to_string())?;
 
     // Inject active project root paths into the sandbox allowlist.
-    crate::projects::refresh_sandbox_project_paths(&project_store, &arc_agent_id, &sandbox).await;
+    crate::projects::refresh_sandbox_project_paths(&project_store, &sandbox).await;
 
     let deps = crate::AgentDeps {
         agent_id: arc_agent_id.clone(),
@@ -922,6 +938,8 @@ pub async fn create_agent_internal(
                 .unwrap_or(chrono_tz::Tz::UTC);
             crate::memory::WorkingMemoryStore::new(db.sqlite.clone(), tz)
         },
+        api_state: Some(state.clone()),
+        wiki_store: state.wiki_store.load().as_ref().clone(),
     };
 
     let event_rx = event_tx.subscribe();
@@ -948,6 +966,7 @@ pub async fn create_agent_internal(
     let channel_store = crate::conversation::ChannelStore::new(db.sqlite.clone());
     let run_logger = crate::conversation::ProcessRunLogger::new(db.sqlite.clone());
     let cortex_ctx = crate::agent::cortex_chat::CortexChatSession::create_context();
+    #[allow(deprecated)] // Cortex chat is legacy — being replaced by Channel Settings
     let cortex_tool_server = crate::tools::create_cortex_chat_tool_server(
         deps.agent_id.clone(),
         deps.clone(),
@@ -983,14 +1002,22 @@ pub async fn create_agent_internal(
     )
     .with_factory(true);
 
-    let cortex_logger = crate::agent::cortex::CortexLogger::new(db.sqlite.clone());
+    let notif_store_for_cortex = state.notification_store.load().as_ref().clone();
+    let make_cortex_logger = |pool: sqlx::SqlitePool| {
+        let mut logger = crate::agent::cortex::CortexLogger::new(pool);
+        if let Some(ref store) = notif_store_for_cortex {
+            logger = logger.with_notifications(store.clone(), agent_id.to_string());
+        }
+        logger
+    };
+    let cortex_logger = make_cortex_logger(db.sqlite.clone());
     let _warmup_loop = crate::agent::cortex::spawn_warmup_loop(deps.clone(), cortex_logger.clone());
     let _cortex_loop = crate::agent::cortex::spawn_cortex_loop(deps.clone(), cortex_logger.clone());
     let _association_loop =
         crate::agent::cortex::spawn_association_loop(deps.clone(), cortex_logger);
     crate::agent::cortex::spawn_ready_task_loop(
         deps.clone(),
-        crate::agent::cortex::CortexLogger::new(db.sqlite.clone()),
+        make_cortex_logger(db.sqlite.clone()),
     );
 
     let ingestion_config = **runtime_config.ingestion.load();
@@ -1048,12 +1075,6 @@ pub async fn create_agent_internal(
         sandboxes.insert(agent_id.clone(), sandbox);
         state.sandboxes.store(std::sync::Arc::new(sandboxes));
 
-        let mut project_stores_map = (**state.project_stores.load()).clone();
-        project_stores_map.insert(agent_id.clone(), project_store);
-        state
-            .project_stores
-            .store(std::sync::Arc::new(project_stores_map));
-
         let mut agent_infos = (**state.agent_configs.load()).clone();
         agent_infos.push(AgentInfo {
             id: agent_config.id.clone(),
@@ -1382,12 +1403,6 @@ pub(super) async fn delete_agent(
         state
             .cortex_chat_sessions
             .store(std::sync::Arc::new(sessions));
-
-        let mut project_stores_map = (**state.project_stores.load()).clone();
-        project_stores_map.remove(&agent_id);
-        state
-            .project_stores
-            .store(std::sync::Arc::new(project_stores_map));
     }
 
     // Signal the main event loop to remove the agent
diff --git a/src/api/attachments.rs b/src/api/attachments.rs
new file mode 100644
index 000000000..4b3ebf18c
--- /dev/null
+++ b/src/api/attachments.rs
@@ -0,0 +1,357 @@
+//! Attachment upload, serving, and listing endpoints.
+
+use super::state::ApiState;
+use crate::agent::channel_attachments::persist_attachment_bytes;
+
+use axum::Json;
+use axum::body::Body;
+use axum::extract::{Path, Query, State};
+use axum::http::{StatusCode, header};
+use axum::response::Response;
+use serde::{Deserialize, Serialize};
+use sqlx::Row as _;
+use std::sync::Arc;
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+#[derive(Serialize, utoipa::ToSchema)]
+pub(super) struct AttachmentUploadResponse {
+    id: String,
+    original_filename: String,
+    mime_type: String,
+    size_bytes: u64,
+}
+
+#[derive(Serialize, utoipa::ToSchema)]
+pub(super) struct AttachmentInfo {
+    id: String,
+    original_filename: String,
+    mime_type: String,
+    size_bytes: u64,
+    created_at: String,
+}
+
+#[derive(Serialize, utoipa::ToSchema)]
+pub(super) struct AttachmentListResponse {
+    attachments: Vec<AttachmentInfo>,
+}
+
+#[derive(Deserialize, utoipa::ToSchema, utoipa::IntoParams)]
+pub(super) struct AttachmentServeQuery {
+    /// When true, force Content-Disposition: attachment (download).
+    #[serde(default)]
+    download: bool,
+    /// When true, serve a thumbnail-sized version (for display in the UI).
+    /// Currently serves the full file — thumbnail generation is a future enhancement.
+    #[serde(default)]
+    #[allow(dead_code)]
+    thumbnail: bool,
+}
+
+#[derive(Deserialize, utoipa::ToSchema, utoipa::IntoParams)]
+pub(super) struct AttachmentListQuery {
+    /// Filter to attachments from a specific message.
+    message_id: Option<String>,
+    limit: Option<i64>,
+}
+
+// ---------------------------------------------------------------------------
+// Upload
+// ---------------------------------------------------------------------------
+
+/// Upload a file attachment for a portal conversation.
+///
+/// The file is persisted to `workspace/saved/` and tracked in `saved_attachments`.
+/// Returns an attachment ID to include in the subsequent message send request.
+#[utoipa::path(
+    post,
+    path = "/agents/{agent_id}/channels/{channel_id}/attachments/upload",
+    params(
+        ("agent_id" = String, Path, description = "Agent ID"),
+        ("channel_id" = String, Path, description = "Channel / conversation ID"),
+    ),
+    responses(
+        (status = 200, body = AttachmentUploadResponse),
+        (status = 400, description = "Invalid or empty file"),
+        (status = 404, description = "Agent not found"),
+        (status = 413, description = "File too large (max 50 MB)"),
+        (status = 500, description = "Internal server error"),
+    ),
+    tag = "portal",
+)]
+pub(super) async fn upload_attachment(
+    State(state): State<Arc<ApiState>>,
+    Path((agent_id, channel_id)): Path<(String, String)>,
+    mut multipart: axum::extract::Multipart,
+) -> Result<Json<AttachmentUploadResponse>, StatusCode> {
+    const MAX_SIZE: usize = 50 * 1024 * 1024; // 50 MB
+
+    let workspaces = state.agent_workspaces.load();
+    let workspace = workspaces.get(&agent_id).ok_or(StatusCode::NOT_FOUND)?;
+    let saved_dir = workspace.join("saved");
+
+    let pools = state.agent_pools.load();
+    let pool = pools.get(&agent_id).ok_or(StatusCode::NOT_FOUND)?;
+
+    // Read the first file field from the multipart body.
+    let mut field = multipart
+        .next_field()
+        .await
+        .map_err(|_| StatusCode::BAD_REQUEST)?
+        .ok_or(StatusCode::BAD_REQUEST)?;
+
+    let original_filename = field.file_name().unwrap_or("upload").to_string();
+
+    let content_type = field
+        .content_type()
+        .map(|ct| ct.to_string())
+        .unwrap_or_else(|| {
+            mime_guess::from_path(&original_filename)
+                .first_or_octet_stream()
+                .to_string()
+        });
+
+    // Read the body in chunks and abort early if the payload exceeds MAX_SIZE.
+    // Without this, field.bytes() would buffer the entire upload into memory
+    // before we can check the size.
+    let mut bytes = Vec::new();
+    loop {
+        match field.chunk().await {
+            Ok(Some(chunk)) => {
+                if bytes.len() + chunk.len() > MAX_SIZE {
+                    return Err(StatusCode::PAYLOAD_TOO_LARGE);
+                }
+                bytes.extend_from_slice(&chunk);
+            }
+            Ok(None) => break,
+            Err(error) => {
+                tracing::warn!(%error, "failed to read upload chunk");
+                return Err(StatusCode::BAD_REQUEST);
+            }
+        }
+    }
+
+    if bytes.is_empty() {
+        return Err(StatusCode::BAD_REQUEST);
+    }
+
+    let meta = persist_attachment_bytes(
+        pool,
+        &channel_id,
+        &saved_dir,
+        &original_filename,
+        &content_type,
+        &bytes,
+    )
+    .await
+    .map_err(|error| {
+        tracing::warn!(%error, "failed to persist portal attachment");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
+
+    Ok(Json(AttachmentUploadResponse {
+        id: meta.id,
+        original_filename: meta.filename,
+        mime_type: meta.mime_type,
+        size_bytes: meta.size_bytes,
+    }))
+}
+
+// ---------------------------------------------------------------------------
+// Serve
+// ---------------------------------------------------------------------------
+
+/// Serve a saved attachment file.
+///
+/// Reads the file from disk with the correct Content-Type.
+/// Use `?download=true` to force a download prompt.
+/// Use `?thumbnail=true` to request a thumbnail (currently serves full file).
+#[utoipa::path(
+    get,
+    path = "/agents/{agent_id}/attachments/{attachment_id}",
+    params(
+        ("agent_id" = String, Path, description = "Agent ID"),
+        ("attachment_id" = String, Path, description = "Attachment ID"),
+        AttachmentServeQuery,
+    ),
+    responses(
+        (status = 200, description = "File content"),
+        (status = 404, description = "Attachment not found"),
+        (status = 500, description = "Internal server error"),
+    ),
+    tag = "portal",
+)]
+pub(super) async fn serve_attachment(
+    State(state): State<Arc<ApiState>>,
+    Path((agent_id, attachment_id)): Path<(String, String)>,
+    Query(query): Query<AttachmentServeQuery>,
+) -> Result<Response, StatusCode> {
+    let pools = state.agent_pools.load();
+    let pool = pools.get(&agent_id).ok_or(StatusCode::NOT_FOUND)?;
+
+    let workspaces = state.agent_workspaces.load();
+    let workspace = workspaces.get(&agent_id).ok_or(StatusCode::NOT_FOUND)?;
+    let saved_dir = workspace.join("saved");
+
+    let row = sqlx::query(
+        "SELECT original_filename, saved_filename, mime_type \
+         FROM saved_attachments WHERE id = ?",
+    )
+    .bind(&attachment_id)
+    .fetch_optional(pool)
+    .await
+    .map_err(|error| {
+        tracing::warn!(%error, "failed to query attachment");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?
+    .ok_or(StatusCode::NOT_FOUND)?;
+
+    let original_filename: String = row.try_get("original_filename").map_err(|error| {
+        tracing::error!(%error, %attachment_id, "saved_attachments row missing original_filename");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
+    let mime_type: String = row.try_get("mime_type").map_err(|error| {
+        tracing::error!(%error, %attachment_id, "saved_attachments row missing mime_type");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
+    let saved_filename: String = row.try_get("saved_filename").map_err(|error| {
+        tracing::error!(%error, %attachment_id, "saved_attachments row missing saved_filename");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
+
+    // Re-derive the path from the agent's saved/ directory instead of trusting
+    // the disk_path column, which could read arbitrary files if the row is
+    // corrupted. saved_filename is sanitized on insert but we also reject
+    // anything that escapes saved_dir.
+    let resolved_path = saved_dir.join(&saved_filename);
+    if !resolved_path.starts_with(&saved_dir) {
+        tracing::error!(%attachment_id, %saved_filename, "attachment path escapes saved dir");
+        return Err(StatusCode::NOT_FOUND);
+    }
+
+    let bytes = tokio::fs::read(&resolved_path).await.map_err(|error| {
+        tracing::warn!(%error, path = %resolved_path.display(), "attachment file missing from disk");
+        StatusCode::NOT_FOUND
+    })?;
+
+    let disposition = if query.download {
+        format!(
+            "attachment; filename=\"{}\"",
+            sanitize_header_value(&original_filename)
+        )
+    } else {
+        format!(
+            "inline; filename=\"{}\"",
+            sanitize_header_value(&original_filename)
+        )
+    };
+
+    let response = Response::builder()
+        .header(header::CONTENT_TYPE, &mime_type)
+        .header(header::CONTENT_DISPOSITION, &disposition)
+        .header(header::CONTENT_LENGTH, bytes.len())
+        .body(Body::from(bytes))
+        .map_err(|error| {
+            tracing::error!(%error, "failed to build attachment response");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?;
+
+    Ok(response)
+}
+
+// ---------------------------------------------------------------------------
+// List
+// ---------------------------------------------------------------------------
+
+/// List saved attachments for a channel.
+#[utoipa::path(
+    get,
+    path = "/agents/{agent_id}/channels/{channel_id}/attachments",
+    params(
+        ("agent_id" = String, Path, description = "Agent ID"),
+        ("channel_id" = String, Path, description = "Channel ID"),
+        AttachmentListQuery,
+    ),
+    responses(
+        (status = 200, body = AttachmentListResponse),
+        (status = 404, description = "Agent not found"),
+        (status = 500, description = "Internal server error"),
+    ),
+    tag = "portal",
+)]
+pub(super) async fn list_attachments(
+    State(state): State<Arc<ApiState>>,
+    Path((agent_id, channel_id)): Path<(String, String)>,
+    Query(query): Query<AttachmentListQuery>,
+) -> Result<Json<AttachmentListResponse>, StatusCode> {
+    let pools = state.agent_pools.load();
+    let pool = pools.get(&agent_id).ok_or(StatusCode::NOT_FOUND)?;
+
+    let limit = query.limit.unwrap_or(100).min(500);
+
+    let rows = if let Some(ref message_id) = query.message_id {
+        sqlx::query(
+            "SELECT id, original_filename, mime_type, size_bytes, created_at \
+             FROM saved_attachments \
+             WHERE channel_id = ? AND message_id = ? \
+             ORDER BY created_at ASC LIMIT ?",
+        )
+        .bind(&channel_id)
+        .bind(message_id)
+        .bind(limit)
+        .fetch_all(pool)
+        .await
+    } else {
+        sqlx::query(
+            "SELECT id, original_filename, mime_type, size_bytes, created_at \
+             FROM saved_attachments \
+             WHERE channel_id = ? \
+             ORDER BY created_at ASC LIMIT ?",
+        )
+        .bind(&channel_id)
+        .bind(limit)
+        .fetch_all(pool)
+        .await
+    }
+    .map_err(|error| {
+        tracing::warn!(%error, "failed to list attachments");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
+
+    let attachments = rows
+        .into_iter()
+        .map(|row| {
+            let id: String = row.try_get("id")?;
+            let original_filename: String = row.try_get("original_filename")?;
+            let mime_type: String = row.try_get("mime_type")?;
+            let size_bytes: i64 = row.try_get("size_bytes")?;
+            let created_at: chrono::DateTime<chrono::Utc> = row.try_get("created_at")?;
+            Ok::<_, sqlx::Error>(AttachmentInfo {
+                id,
+                original_filename,
+                mime_type,
+                size_bytes: u64::try_from(size_bytes).unwrap_or(0),
+                created_at: created_at.to_rfc3339(),
+            })
+        })
+        .collect::<Result<Vec<_>, _>>()
+        .map_err(|error| {
+            tracing::error!(%error, "saved_attachments row missing expected column");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?;
+
+    Ok(Json(AttachmentListResponse { attachments }))
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/// Strip characters that could break HTTP header values.
+fn sanitize_header_value(s: &str) -> String {
+    s.chars()
+        .filter(|c| c.is_ascii() && *c != '"' && *c != '\\' && *c != '\r' && *c != '\n')
+        .collect()
+}
diff --git a/src/api/channels.rs b/src/api/channels.rs
index bb996dbfa..49b6a6ab5 100644
--- a/src/api/channels.rs
+++ b/src/api/channels.rs
@@ -708,10 +708,7 @@ pub(super) async fn inspect_prompt(
         use crate::prompts::engine::{ProjectContext, ProjectRepoContext, ProjectWorktreeContext};
         let store = &channel_state.deps.project_store;
         let projects = store
-            .list_projects(
-                &channel_state.deps.agent_id,
-                Some(crate::projects::ProjectStatus::Active),
-            )
+            .list_projects(Some(crate::projects::ProjectStatus::Active))
             .await
             .unwrap_or_default();
         if projects.is_empty() {
@@ -780,6 +777,7 @@ pub(super) async fn inspect_prompt(
             None, // backfill_transcript — only set during channel initialization
             empty_to_none(working_memory),
             empty_to_none(channel_activity_map),
+            false, // direct_mode — resolved at runtime by the channel, not available here
         )
         .unwrap_or_default();
 
@@ -1032,7 +1030,10 @@ pub(super) async fn get_channel_settings(
     channel_store
         .get(&channel_id)
         .await
-        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?
+        .map_err(|error| {
+            tracing::error!(%error, %channel_id, "failed to load channel for settings fetch");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?
         .ok_or(StatusCode::NOT_FOUND)?;
 
     let store = crate::conversation::ChannelSettingsStore::new(pool.clone());
@@ -1077,7 +1078,10 @@ pub(super) async fn update_channel_settings(
     channel_store
         .get(&channel_id)
         .await
-        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?
+        .map_err(|error| {
+            tracing::error!(%error, %channel_id, "failed to load channel for settings update");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?
         .ok_or(StatusCode::NOT_FOUND)?;
 
     let store = crate::conversation::ChannelSettingsStore::new(pool.clone());
diff --git a/src/api/cortex.rs b/src/api/cortex.rs
index a670cf941..daebc54cb 100644
--- a/src/api/cortex.rs
+++ b/src/api/cortex.rs
@@ -1,3 +1,7 @@
+// NOTE: Cortex chat endpoints are deprecated. Cortex chat is being replaced
+// by Channel Settings which provide fine-grained per-channel control.
+// The cortex *events* endpoint (process logs) is NOT deprecated.
+
 use super::state::ApiState;
 
 use crate::agent::cortex::{CortexEvent, CortexLogger};
diff --git a/src/api/notifications.rs b/src/api/notifications.rs
new file mode 100644
index 000000000..48496a283
--- /dev/null
+++ b/src/api/notifications.rs
@@ -0,0 +1,253 @@
+//! REST API for the instance-level notification inbox.
+
+use super::state::{ApiEvent, ApiState};
+use crate::notifications::{Notification, NotificationFilter, NotificationKind, NotificationStore};
+
+use axum::Json;
+use axum::extract::{Path, Query, State};
+use axum::http::StatusCode;
+use serde::{Deserialize, Serialize};
+use std::sync::Arc;
+
+// ---------------------------------------------------------------------------
+// Request / Response types
+// ---------------------------------------------------------------------------
+
+#[derive(Debug, Deserialize, utoipa::IntoParams)]
+pub(super) struct ListNotificationsQuery {
+    /// "unread" returns only unread notifications; anything else returns all.
+    #[serde(default)]
+    pub filter: Option<String>,
+    /// Filter by agent id.
+    pub agent_id: Option<String>,
+    /// Filter by kind: "task_approval", "worker_failed", "cortex_observation".
+    pub kind: Option<String>,
+    #[serde(default = "default_limit")]
+    pub limit: i64,
+    #[serde(default)]
+    pub offset: i64,
+}
+
+fn default_limit() -> i64 {
+    50
+}
+
+#[derive(Debug, Serialize, utoipa::ToSchema)]
+pub(super) struct NotificationsResponse {
+    pub notifications: Vec<Notification>,
+}
+
+#[derive(Debug, Serialize, utoipa::ToSchema)]
+pub(super) struct UnreadCountResponse {
+    pub count: i64,
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+fn get_notification_store(state: &ApiState) -> Result<Arc<NotificationStore>, StatusCode> {
+    state
+        .notification_store
+        .load()
+        .as_ref()
+        .clone()
+        .ok_or(StatusCode::SERVICE_UNAVAILABLE)
+}
+
+fn parse_kind(value: Option<&str>) -> Option<NotificationKind> {
+    match value? {
+        "task_approval" => Some(NotificationKind::TaskApproval),
+        "worker_failed" => Some(NotificationKind::WorkerFailed),
+        "cortex_observation" => Some(NotificationKind::CortexObservation),
+        _ => None,
+    }
+}
+
+fn broadcast_updated(state: &ApiState, id: &str, read: bool, dismissed: bool) {
+    state
+        .event_tx
+        .send(ApiEvent::NotificationUpdated {
+            id: id.to_string(),
+            read,
+            dismissed,
+        })
+        .ok();
+}
+
+// ---------------------------------------------------------------------------
+// Handlers
+// ---------------------------------------------------------------------------
+
+/// `GET /notifications` — list notifications with optional filters.
+#[utoipa::path(
+    get,
+    path = "/notifications",
+    params(ListNotificationsQuery),
+    responses(
+        (status = 200, body = NotificationsResponse),
+        (status = 503, description = "Notification store not initialized"),
+    ),
+    tag = "notifications",
+)]
+pub(super) async fn list_notifications(
+    State(state): State<Arc<ApiState>>,
+    Query(query): Query<ListNotificationsQuery>,
+) -> Result<Json<NotificationsResponse>, StatusCode> {
+    let store = get_notification_store(&state)?;
+    let unread_only = query.filter.as_deref() == Some("unread");
+    let kind = parse_kind(query.kind.as_deref());
+
+    let notifications = store
+        .list(NotificationFilter {
+            unread_only,
+            include_dismissed: false,
+            agent_id: query.agent_id,
+            kind,
+            limit: Some(query.limit.clamp(1, 500)),
+            offset: Some(query.offset),
+        })
+        .await
+        .map_err(|error| {
+            tracing::warn!(%error, "failed to list notifications");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?;
+
+    Ok(Json(NotificationsResponse { notifications }))
+}
+
+/// `GET /notifications/unread_count` — count unread, undismissed notifications.
+#[utoipa::path(
+    get,
+    path = "/notifications/unread_count",
+    responses(
+        (status = 200, body = UnreadCountResponse),
+        (status = 503, description = "Notification store not initialized"),
+    ),
+    tag = "notifications",
+)]
+pub(super) async fn unread_count(
+    State(state): State<Arc<ApiState>>,
+) -> Result<Json<UnreadCountResponse>, StatusCode> {
+    let store = get_notification_store(&state)?;
+    let count = store.unread_count().await.map_err(|error| {
+        tracing::warn!(%error, "failed to count unread notifications");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
+    Ok(Json(UnreadCountResponse { count }))
+}
+
+/// `POST /notifications/{id}/read` — mark a single notification as read.
+#[utoipa::path(
+    post,
+    path = "/notifications/{id}/read",
+    params(("id" = String, Path, description = "Notification id")),
+    responses(
+        (status = 204, description = "Marked as read"),
+        (status = 404, description = "Not found or already read"),
+        (status = 503, description = "Notification store not initialized"),
+    ),
+    tag = "notifications",
+)]
+pub(super) async fn mark_read(
+    State(state): State<Arc<ApiState>>,
+    Path(id): Path<String>,
+) -> Result<StatusCode, StatusCode> {
+    let store = get_notification_store(&state)?;
+    let updated = store.mark_read(&id).await.map_err(|error| {
+        tracing::warn!(%error, %id, "failed to mark notification read");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
+    if !updated {
+        return Err(StatusCode::NOT_FOUND);
+    }
+    broadcast_updated(&state, &id, true, false);
+    Ok(StatusCode::NO_CONTENT)
+}
+
+/// `POST /notifications/{id}/dismiss` — dismiss a single notification.
+#[utoipa::path(
+    post,
+    path = "/notifications/{id}/dismiss",
+    params(("id" = String, Path, description = "Notification id")),
+    responses(
+        (status = 204, description = "Dismissed"),
+        (status = 404, description = "Not found or already dismissed"),
+        (status = 503, description = "Notification store not initialized"),
+    ),
+    tag = "notifications",
+)]
+pub(super) async fn dismiss_notification(
+    State(state): State<Arc<ApiState>>,
+    Path(id): Path<String>,
+) -> Result<StatusCode, StatusCode> {
+    let store = get_notification_store(&state)?;
+    let updated = store.dismiss(&id).await.map_err(|error| {
+        tracing::warn!(%error, %id, "failed to dismiss notification");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
+    if !updated {
+        return Err(StatusCode::NOT_FOUND);
+    }
+    broadcast_updated(&state, &id, true, true);
+    Ok(StatusCode::NO_CONTENT)
+}
+
+/// `POST /notifications/read_all` — mark all undismissed notifications as read.
+#[utoipa::path(
+    post,
+    path = "/notifications/read_all",
+    responses(
+        (status = 204, description = "All marked as read"),
+        (status = 503, description = "Notification store not initialized"),
+    ),
+    tag = "notifications",
+)]
+pub(super) async fn mark_all_read(
+    State(state): State<Arc<ApiState>>,
+) -> Result<StatusCode, StatusCode> {
+    let store = get_notification_store(&state)?;
+    store.mark_all_read().await.map_err(|error| {
+        tracing::warn!(%error, "failed to mark all notifications read");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
+    // Broadcast a generic update so connected clients re-fetch
+    state
+        .event_tx
+        .send(ApiEvent::NotificationUpdated {
+            id: String::new(),
+            read: true,
+            dismissed: false,
+        })
+        .ok();
+    Ok(StatusCode::NO_CONTENT)
+}
+
+/// `POST /notifications/dismiss_read` — dismiss all already-read notifications.
+#[utoipa::path(
+    post,
+    path = "/notifications/dismiss_read",
+    responses(
+        (status = 204, description = "Read notifications dismissed"),
+        (status = 503, description = "Notification store not initialized"),
+    ),
+    tag = "notifications",
+)]
+pub(super) async fn dismiss_read(
+    State(state): State<Arc<ApiState>>,
+) -> Result<StatusCode, StatusCode> {
+    let store = get_notification_store(&state)?;
+    store.dismiss_read().await.map_err(|error| {
+        tracing::warn!(%error, "failed to dismiss read notifications");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
+    state
+        .event_tx
+        .send(ApiEvent::NotificationUpdated {
+            id: String::new(),
+            read: true,
+            dismissed: true,
+        })
+        .ok();
+    Ok(StatusCode::NO_CONTENT)
+}
diff --git a/src/api/portal.rs b/src/api/portal.rs
index b4748419c..e2f6ec3c7 100644
--- a/src/api/portal.rs
+++ b/src/api/portal.rs
@@ -2,7 +2,7 @@
 
 use super::state::ApiState;
 use crate::{
-    InboundMessage, MessageContent,
+    Attachment, InboundMessage, MessageContent,
     conversation::{
         ConversationDefaultsResponse, ConversationSettings, DelegationMode, MemoryMode,
         ModelOption, PortalConversation, PortalConversationStore, PortalConversationSummary,
@@ -24,6 +24,9 @@ pub(super) struct PortalSendRequest {
     #[serde(default = "default_sender_name")]
     sender_name: String,
     message: String,
+    /// IDs of pre-uploaded attachments to include with this message.
+    #[serde(default)]
+    attachment_ids: Vec<String>,
 }
 
 fn default_sender_name() -> String {
@@ -160,6 +163,91 @@ pub(super) async fn portal_send(
         serde_json::Value::String(request.sender_name.clone()),
     );
 
+    // Resolve pre-uploaded attachments from saved_attachments table.
+    let attachments: Vec<Attachment> = if request.attachment_ids.is_empty() {
+        Vec::new()
+    } else {
+        use sqlx::Row as _;
+        let pools = state.agent_pools.load();
+        let pool = pools.get(&request.agent_id).ok_or(StatusCode::NOT_FOUND)?;
+
+        let mut resolved = Vec::with_capacity(request.attachment_ids.len());
+        let mut attachment_metas: Vec<crate::agent::channel_attachments::SavedAttachmentMeta> =
+            Vec::with_capacity(request.attachment_ids.len());
+        for attachment_id in &request.attachment_ids {
+            // Filter by channel_id to prevent cross-conversation attachment
+            // references — a user in conversation A should not be able to
+            // reference an attachment uploaded in conversation B.
+            let row = sqlx::query(
+                "SELECT id, original_filename, saved_filename, mime_type, size_bytes \
+                 FROM saved_attachments WHERE id = ? AND channel_id = ?",
+            )
+            .bind(attachment_id)
+            .bind(&conversation_id)
+            .fetch_optional(pool)
+            .await
+            .map_err(|error| {
+                tracing::warn!(%error, "failed to look up attachment");
+                StatusCode::INTERNAL_SERVER_ERROR
+            })?;
+
+            if let Some(row) = row {
+                let id: String = row.try_get("id").map_err(|error| {
+                    tracing::error!(%error, "saved_attachments row missing id");
+                    StatusCode::INTERNAL_SERVER_ERROR
+                })?;
+                let filename: String = row.try_get("original_filename").map_err(|error| {
+                    tracing::error!(%error, "saved_attachments row missing original_filename");
+                    StatusCode::INTERNAL_SERVER_ERROR
+                })?;
+                let saved_filename: String = row.try_get("saved_filename").map_err(|error| {
+                    tracing::error!(%error, "saved_attachments row missing saved_filename");
+                    StatusCode::INTERNAL_SERVER_ERROR
+                })?;
+                let mime_type: String = row.try_get("mime_type").map_err(|error| {
+                    tracing::error!(%error, "saved_attachments row missing mime_type");
+                    StatusCode::INTERNAL_SERVER_ERROR
+                })?;
+                let size_bytes = row
+                    .try_get::<i64, _>("size_bytes")
+                    .ok()
+                    .and_then(|n| u64::try_from(n).ok())
+                    .unwrap_or(0);
+                attachment_metas.push(crate::agent::channel_attachments::SavedAttachmentMeta {
+                    id: id.clone(),
+                    filename: filename.clone(),
+                    saved_filename,
+                    mime_type: mime_type.clone(),
+                    size_bytes,
+                });
+                resolved.push(Attachment {
+                    filename,
+                    mime_type,
+                    url: String::new(),
+                    size_bytes: Some(size_bytes),
+                    auth_header: None,
+                    pre_saved_id: Some(id),
+                });
+            }
+        }
+        if !attachment_metas.is_empty() {
+            metadata.insert(
+                "portal_attachment_metas".into(),
+                serde_json::to_value(&attachment_metas).unwrap_or_default(),
+            );
+        }
+        resolved
+    };
+
+    let content = if attachments.is_empty() {
+        MessageContent::Text(request.message)
+    } else {
+        MessageContent::Media {
+            text: Some(request.message),
+            attachments,
+        }
+    };
+
     let inbound = InboundMessage {
         id: uuid::Uuid::new_v4().to_string(),
         source: "portal".into(),
@@ -167,7 +255,7 @@ pub(super) async fn portal_send(
         conversation_id,
         sender_id: request.sender_name.clone(),
         agent_id: Some(request.agent_id.into()),
-        content: MessageContent::Text(request.message),
+        content,
         timestamp: chrono::Utc::now(),
         metadata,
         formatted_author: Some(request.sender_name),
diff --git a/src/api/projects.rs b/src/api/projects.rs
index 414b0c8ad..03ae932d4 100644
--- a/src/api/projects.rs
+++ b/src/api/projects.rs
@@ -4,7 +4,8 @@ use super::state::ApiState;
 
 use axum::Json;
 use axum::extract::{Path, Query, State};
-use axum::http::StatusCode;
+use axum::http::{StatusCode, header};
+use axum::response::IntoResponse;
 use serde::{Deserialize, Serialize};
 use std::sync::Arc;
 
@@ -48,21 +49,20 @@ fn sanitize_segment(name: &str) -> Result<String, StatusCode> {
 // Query / request types
 // ---------------------------------------------------------------------------
 
-#[derive(Deserialize, utoipa::ToSchema, utoipa::IntoParams)]
-pub(super) struct AgentQuery {
-    agent_id: String,
-}
-
 #[derive(Deserialize, utoipa::ToSchema, utoipa::IntoParams)]
 pub(super) struct ProjectListQuery {
-    agent_id: String,
     #[serde(default)]
     status: Option<String>,
 }
 
+#[derive(Deserialize, utoipa::ToSchema)]
+pub(super) struct ReorderProjectsRequest {
+    /// Project IDs in the desired display order (first = sort_order 0).
+    ids: Vec<String>,
+}
+
 #[derive(Deserialize, utoipa::ToSchema)]
 pub(super) struct CreateProjectRequest {
-    agent_id: String,
     name: String,
     #[serde(default)]
     description: Option<String>,
@@ -80,7 +80,6 @@ pub(super) struct CreateProjectRequest {
 
 #[derive(Deserialize, utoipa::ToSchema)]
 pub(super) struct UpdateProjectRequest {
-    agent_id: String,
     #[serde(default)]
     name: Option<String>,
     #[serde(default)]
@@ -90,6 +89,8 @@ pub(super) struct UpdateProjectRequest {
     #[serde(default)]
     tags: Option<Vec<String>>,
     #[serde(default)]
+    logo_path: Option<String>,
+    #[serde(default)]
     settings: Option<serde_json::Value>,
     #[serde(default)]
     status: Option<String>,
@@ -97,7 +98,6 @@ pub(super) struct UpdateProjectRequest {
 
 #[derive(Deserialize, utoipa::ToSchema)]
 pub(super) struct CreateRepoRequest {
-    agent_id: String,
     name: String,
     path: String,
     #[serde(default)]
@@ -110,7 +110,6 @@ pub(super) struct CreateRepoRequest {
 
 #[derive(Deserialize, utoipa::ToSchema)]
 pub(super) struct CreateWorktreeRequest {
-    agent_id: String,
     repo_id: String,
     branch: String,
     #[serde(default)]
@@ -169,11 +168,14 @@ fn default_true() -> bool {
 
 /// Refresh the sandbox allowlist with project root paths after a project
 /// create, delete, or scan. Best-effort — logs and continues on error.
-async fn refresh_sandbox(state: &ApiState, agent_id: &str) {
-    let stores = state.project_stores.load();
+async fn refresh_sandbox(state: &ApiState) {
+    let store_guard = state.project_store.load();
+    let Some(store) = store_guard.as_ref().as_ref() else {
+        return;
+    };
     let sandboxes = state.sandboxes.load();
-    if let (Some(store), Some(sandbox)) = (stores.get(agent_id), sandboxes.get(agent_id)) {
-        crate::projects::refresh_sandbox_project_paths(store, agent_id, sandbox).await;
+    for sandbox in sandboxes.values() {
+        crate::projects::refresh_sandbox_project_paths(store, sandbox).await;
     }
 }
 
@@ -309,7 +311,36 @@ async fn compute_and_cache_disk_usage(
 // Handlers
 // ---------------------------------------------------------------------------
 
-/// GET /agents/projects — list projects for an agent.
+/// PUT /agents/projects/reorder — update the sort order of all projects.
+#[utoipa::path(
+    put,
+    path = "/agents/projects/reorder",
+    request_body = ReorderProjectsRequest,
+    responses(
+        (status = 204, description = "Sort order updated"),
+        (status = 404, description = "No project store available"),
+    ),
+    tag = "projects",
+)]
+pub(super) async fn reorder_projects(
+    State(state): State<Arc<ApiState>>,
+    Json(request): Json<ReorderProjectsRequest>,
+) -> Result<StatusCode, StatusCode> {
+    let store_guard = state.project_store.load();
+    let store = store_guard.as_ref().as_ref().ok_or(StatusCode::NOT_FOUND)?;
+
+    store
+        .reorder_projects(&request.ids)
+        .await
+        .map_err(|error| {
+            tracing::error!(%error, "failed to reorder projects");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?;
+
+    Ok(StatusCode::NO_CONTENT)
+}
+
+/// GET /agents/projects — list projects.
 #[utoipa::path(
     get,
     path = "/agents/projects",
@@ -318,7 +349,7 @@ async fn compute_and_cache_disk_usage(
     ),
     responses(
         (status = 200, body = ProjectListResponse),
-        (status = 404, description = "Agent not found"),
+        (status = 404, description = "No project store available"),
     ),
     tag = "projects",
 )]
@@ -326,18 +357,15 @@ pub(super) async fn list_projects(
     State(state): State<Arc<ApiState>>,
     Query(query): Query<ProjectListQuery>,
 ) -> Result<Json<ProjectListResponse>, StatusCode> {
-    let stores = state.project_stores.load();
-    let store = stores.get(&query.agent_id).ok_or(StatusCode::NOT_FOUND)?;
+    let store_guard = state.project_store.load();
+    let store = store_guard.as_ref().as_ref().ok_or(StatusCode::NOT_FOUND)?;
 
     let status = query.status.as_deref().and_then(ProjectStatus::parse);
 
-    let projects = store
-        .list_projects(&query.agent_id, status)
-        .await
-        .map_err(|error| {
-            tracing::error!(%error, "failed to list projects");
-            StatusCode::INTERNAL_SERVER_ERROR
-        })?;
+    let projects = store.list_projects(status).await.map_err(|error| {
+        tracing::error!(%error, "failed to list projects");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
 
     Ok(Json(ProjectListResponse { projects }))
 }
@@ -349,7 +377,7 @@ pub(super) async fn list_projects(
     request_body = CreateProjectRequest,
     responses(
         (status = 200, body = ProjectResponse),
-        (status = 404, description = "Agent not found"),
+        (status = 404, description = "No project store available"),
     ),
     tag = "projects",
 )]
@@ -357,12 +385,11 @@ pub(super) async fn create_project(
     State(state): State<Arc<ApiState>>,
     Json(request): Json<CreateProjectRequest>,
 ) -> Result<Json<ProjectResponse>, StatusCode> {
-    let stores = state.project_stores.load();
-    let store = stores.get(&request.agent_id).ok_or(StatusCode::NOT_FOUND)?;
+    let store_guard = state.project_store.load();
+    let store = store_guard.as_ref().as_ref().ok_or(StatusCode::NOT_FOUND)?;
 
     let project = store
         .create_project(CreateProjectInput {
-            agent_id: request.agent_id.clone(),
             name: request.name,
             description: request.description.unwrap_or_default(),
             icon: request.icon.unwrap_or_default(),
@@ -379,43 +406,53 @@ pub(super) async fn create_project(
         })?;
 
     // Refresh sandbox allowlist with new project path.
-    refresh_sandbox(&state, &request.agent_id).await;
+    refresh_sandbox(&state).await;
 
     // Auto-discover repos, worktrees, and disk usage in the background so the
     // API responds immediately. The UI will pick up discovered repos on its
     // next query invalidation / refetch.
-    if request.auto_discover {
+    {
         let root = std::path::PathBuf::from(&request.root_path);
         if root.is_dir() {
             let store = store.clone();
             let project_id = project.id.clone();
+            let auto_discover = request.auto_discover;
             tokio::spawn(async move {
-                match crate::projects::git::discover_repos(&root).await {
-                    Ok(discovered) => {
-                        for repo in discovered {
-                            if let Err(error) = store
-                                .create_repo(CreateRepoInput {
-                                    project_id: project_id.clone(),
-                                    name: repo.name,
-                                    path: repo.relative_path,
-                                    remote_url: repo.remote_url,
-                                    default_branch: repo.default_branch,
-                                    current_branch: repo.current_branch,
-                                    description: String::new(),
-                                })
-                                .await
-                            {
-                                tracing::warn!(%error, "failed to register discovered repo");
+                // Detect and set project logo.
+                if let Some(logo) = crate::projects::detect_logo(&root)
+                    && let Err(error) = store.set_logo_path(&project_id, Some(&logo)).await
+                {
+                    tracing::warn!(%error, "failed to set detected logo path");
+                }
+
+                if auto_discover {
+                    match crate::projects::git::discover_repos(&root).await {
+                        Ok(discovered) => {
+                            for repo in discovered {
+                                if let Err(error) = store
+                                    .create_repo(CreateRepoInput {
+                                        project_id: project_id.clone(),
+                                        name: repo.name,
+                                        path: repo.relative_path,
+                                        remote_url: repo.remote_url,
+                                        default_branch: repo.default_branch,
+                                        current_branch: repo.current_branch,
+                                        description: String::new(),
+                                    })
+                                    .await
+                                {
+                                    tracing::warn!(%error, "failed to register discovered repo");
+                                }
                             }
                         }
+                        Err(error) => {
+                            tracing::warn!(%error, "failed to discover repos in project root");
+                        }
                     }
-                    Err(error) => {
-                        tracing::warn!(%error, "failed to discover repos in project root");
-                    }
-                }
 
-                discover_and_register_worktrees(&store, &project_id, &root).await;
-                compute_and_cache_disk_usage(&store, &project_id, &root).await;
+                    discover_and_register_worktrees(&store, &project_id, &root).await;
+                    compute_and_cache_disk_usage(&store, &project_id, &root).await;
+                }
 
                 tracing::info!(project_id = %project_id, "background project scan complete");
             });
@@ -424,7 +461,7 @@ pub(super) async fn create_project(
 
     // Return the project immediately (repos/worktrees populate asynchronously).
     let full = store
-        .get_project_with_relations(&request.agent_id, &project.id)
+        .get_project_with_relations(&project.id)
         .await
         .map_err(|error| {
             tracing::error!(%error, "failed to load project with relations");
@@ -441,24 +478,22 @@ pub(super) async fn create_project(
     path = "/agents/projects/{id}",
     params(
         ("id" = String, Path, description = "Project ID"),
-        AgentQuery,
     ),
     responses(
         (status = 200, body = ProjectResponse),
-        (status = 404, description = "Agent or project not found"),
+        (status = 404, description = "Project not found"),
     ),
     tag = "projects",
 )]
 pub(super) async fn get_project(
     State(state): State<Arc<ApiState>>,
     Path(project_id): Path<String>,
-    Query(query): Query<AgentQuery>,
 ) -> Result<Json<ProjectResponse>, StatusCode> {
-    let stores = state.project_stores.load();
-    let store = stores.get(&query.agent_id).ok_or(StatusCode::NOT_FOUND)?;
+    let store_guard = state.project_store.load();
+    let store = store_guard.as_ref().as_ref().ok_or(StatusCode::NOT_FOUND)?;
 
     let project = store
-        .get_project_with_relations(&query.agent_id, &project_id)
+        .get_project_with_relations(&project_id)
         .await
         .map_err(|error| {
             tracing::error!(%error, "failed to get project");
@@ -479,7 +514,7 @@ pub(super) async fn get_project(
     request_body = UpdateProjectRequest,
     responses(
         (status = 200, body = ProjectResponse),
-        (status = 404, description = "Agent or project not found"),
+        (status = 404, description = "Project not found"),
     ),
     tag = "projects",
 )]
@@ -488,20 +523,20 @@ pub(super) async fn update_project(
     Path(project_id): Path<String>,
     Json(request): Json<UpdateProjectRequest>,
 ) -> Result<Json<ProjectResponse>, StatusCode> {
-    let stores = state.project_stores.load();
-    let store = stores.get(&request.agent_id).ok_or(StatusCode::NOT_FOUND)?;
+    let store_guard = state.project_store.load();
+    let store = store_guard.as_ref().as_ref().ok_or(StatusCode::NOT_FOUND)?;
 
     let status = request.status.as_deref().and_then(ProjectStatus::parse);
 
     store
         .update_project(
-            &request.agent_id,
             &project_id,
             UpdateProjectInput {
                 name: request.name,
                 description: request.description,
                 icon: request.icon,
                 tags: request.tags,
+                logo_path: request.logo_path,
                 settings: request.settings,
                 status,
             },
@@ -515,7 +550,7 @@ pub(super) async fn update_project(
 
     // Reload with relations.
     let full = store
-        .get_project_with_relations(&request.agent_id, &project_id)
+        .get_project_with_relations(&project_id)
         .await
         .map_err(|error| {
             tracing::error!(%error, "failed to reload project");
@@ -532,36 +567,31 @@ pub(super) async fn update_project(
     path = "/agents/projects/{id}",
     params(
         ("id" = String, Path, description = "Project ID"),
-        AgentQuery,
     ),
     responses(
         (status = 200, body = ActionResponse),
-        (status = 404, description = "Agent or project not found"),
+        (status = 404, description = "Project not found"),
     ),
     tag = "projects",
 )]
 pub(super) async fn delete_project(
     State(state): State<Arc<ApiState>>,
     Path(project_id): Path<String>,
-    Query(query): Query<AgentQuery>,
 ) -> Result<Json<ActionResponse>, StatusCode> {
-    let stores = state.project_stores.load();
-    let store = stores.get(&query.agent_id).ok_or(StatusCode::NOT_FOUND)?;
+    let store_guard = state.project_store.load();
+    let store = store_guard.as_ref().as_ref().ok_or(StatusCode::NOT_FOUND)?;
 
-    let deleted = store
-        .delete_project(&query.agent_id, &project_id)
-        .await
-        .map_err(|error| {
-            tracing::error!(%error, "failed to delete project");
-            StatusCode::INTERNAL_SERVER_ERROR
-        })?;
+    let deleted = store.delete_project(&project_id).await.map_err(|error| {
+        tracing::error!(%error, "failed to delete project");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
 
     if !deleted {
         return Err(StatusCode::NOT_FOUND);
     }
 
     // Refresh sandbox allowlist after removing project path.
-    refresh_sandbox(&state, &query.agent_id).await;
+    refresh_sandbox(&state).await;
 
     Ok(Json(ActionResponse {
         success: true,
@@ -575,24 +605,22 @@ pub(super) async fn delete_project(
     path = "/agents/projects/{id}/scan",
     params(
         ("id" = String, Path, description = "Project ID"),
-        AgentQuery,
     ),
     responses(
         (status = 200, body = ProjectResponse),
-        (status = 404, description = "Agent or project not found"),
+        (status = 404, description = "Project not found"),
     ),
     tag = "projects",
 )]
 pub(super) async fn scan_project(
     State(state): State<Arc<ApiState>>,
     Path(project_id): Path<String>,
-    Query(query): Query<AgentQuery>,
 ) -> Result<Json<ProjectResponse>, StatusCode> {
-    let stores = state.project_stores.load();
-    let store = stores.get(&query.agent_id).ok_or(StatusCode::NOT_FOUND)?;
+    let store_guard = state.project_store.load();
+    let store = store_guard.as_ref().as_ref().ok_or(StatusCode::NOT_FOUND)?;
 
     let project = store
-        .get_project(&query.agent_id, &project_id)
+        .get_project(&project_id)
         .await
         .map_err(|error| {
             tracing::error!(%error, "failed to get project for scan");
@@ -651,9 +679,15 @@ pub(super) async fn scan_project(
     // Recompute and cache disk usage.
     compute_and_cache_disk_usage(store, &project_id, &root).await;
 
+    // Re-detect project logo.
+    let logo = crate::projects::detect_logo(&root);
+    if let Err(error) = store.set_logo_path(&project_id, logo.as_deref()).await {
+        tracing::warn!(%error, "failed to update logo path during scan");
+    }
+
     // Reload with relations.
     let full = store
-        .get_project_with_relations(&query.agent_id, &project_id)
+        .get_project_with_relations(&project_id)
         .await
         .map_err(|error| {
             tracing::error!(%error, "failed to reload project after scan");
@@ -662,7 +696,7 @@ pub(super) async fn scan_project(
         .ok_or(StatusCode::NOT_FOUND)?;
 
     // Refresh sandbox allowlist (scan may have added new repos/worktrees).
-    refresh_sandbox(&state, &query.agent_id).await;
+    refresh_sandbox(&state).await;
 
     Ok(Json(ProjectResponse { project: full }))
 }
@@ -677,7 +711,7 @@ pub(super) async fn scan_project(
     request_body = CreateRepoRequest,
     responses(
         (status = 200, body = RepoResponse),
-        (status = 404, description = "Agent or project not found"),
+        (status = 404, description = "Project not found"),
     ),
     tag = "projects",
 )]
@@ -686,12 +720,12 @@ pub(super) async fn create_repo(
     Path(project_id): Path<String>,
     Json(request): Json<CreateRepoRequest>,
 ) -> Result<Json<RepoResponse>, StatusCode> {
-    let stores = state.project_stores.load();
-    let store = stores.get(&request.agent_id).ok_or(StatusCode::NOT_FOUND)?;
+    let store_guard = state.project_store.load();
+    let store = store_guard.as_ref().as_ref().ok_or(StatusCode::NOT_FOUND)?;
 
     // Verify project exists.
     store
-        .get_project(&request.agent_id, &project_id)
+        .get_project(&project_id)
         .await
         .map_err(|error| {
             tracing::error!(%error, "failed to verify project");
@@ -728,21 +762,19 @@ pub(super) async fn create_repo(
     params(
         ("project_id" = String, Path, description = "Project ID"),
         ("repo_id" = String, Path, description = "Repository ID"),
-        AgentQuery,
     ),
     responses(
         (status = 200, body = ActionResponse),
-        (status = 404, description = "Agent, project, or repo not found"),
+        (status = 404, description = "Project or repo not found"),
     ),
     tag = "projects",
 )]
 pub(super) async fn delete_repo(
     State(state): State<Arc<ApiState>>,
     Path((project_id, repo_id)): Path<(String, String)>,
-    Query(query): Query<AgentQuery>,
 ) -> Result<Json<ActionResponse>, StatusCode> {
-    let stores = state.project_stores.load();
-    let store = stores.get(&query.agent_id).ok_or(StatusCode::NOT_FOUND)?;
+    let store_guard = state.project_store.load();
+    let store = store_guard.as_ref().as_ref().ok_or(StatusCode::NOT_FOUND)?;
 
     // Verify the repo belongs to this project.
     let repo = store
@@ -782,7 +814,7 @@ pub(super) async fn delete_repo(
     request_body = CreateWorktreeRequest,
     responses(
         (status = 200, body = WorktreeResponse),
-        (status = 404, description = "Agent, project, or repo not found"),
+        (status = 404, description = "Project or repo not found"),
     ),
     tag = "projects",
 )]
@@ -791,12 +823,12 @@ pub(super) async fn create_worktree(
     Path(project_id): Path<String>,
     Json(request): Json<CreateWorktreeRequest>,
 ) -> Result<Json<WorktreeResponse>, StatusCode> {
-    let stores = state.project_stores.load();
-    let store = stores.get(&request.agent_id).ok_or(StatusCode::NOT_FOUND)?;
+    let store_guard = state.project_store.load();
+    let store = store_guard.as_ref().as_ref().ok_or(StatusCode::NOT_FOUND)?;
 
     // Look up the project and repo.
     let project = store
-        .get_project(&request.agent_id, &project_id)
+        .get_project(&project_id)
         .await
         .map_err(|error| {
             tracing::error!(%error, "failed to get project");
@@ -880,21 +912,19 @@ pub(super) async fn create_worktree(
     params(
         ("project_id" = String, Path, description = "Project ID"),
         ("worktree_id" = String, Path, description = "Worktree ID"),
-        AgentQuery,
     ),
     responses(
         (status = 200, body = ActionResponse),
-        (status = 404, description = "Agent, project, or worktree not found"),
+        (status = 404, description = "Project or worktree not found"),
     ),
     tag = "projects",
 )]
 pub(super) async fn delete_worktree(
     State(state): State<Arc<ApiState>>,
     Path((project_id, worktree_id)): Path<(String, String)>,
-    Query(query): Query<AgentQuery>,
 ) -> Result<Json<ActionResponse>, StatusCode> {
-    let stores = state.project_stores.load();
-    let store = stores.get(&query.agent_id).ok_or(StatusCode::NOT_FOUND)?;
+    let store_guard = state.project_store.load();
+    let store = store_guard.as_ref().as_ref().ok_or(StatusCode::NOT_FOUND)?;
 
     // Look up worktree and project for the git removal.
     let worktree = store
@@ -912,7 +942,7 @@ pub(super) async fn delete_worktree(
     }
 
     let project = store
-        .get_project(&query.agent_id, &project_id)
+        .get_project(&project_id)
         .await
         .map_err(|error| {
             tracing::error!(%error, "failed to get project");
@@ -965,24 +995,22 @@ pub(super) async fn delete_worktree(
     path = "/agents/projects/{id}/disk-usage",
     params(
         ("id" = String, Path, description = "Project ID"),
-        AgentQuery,
     ),
     responses(
         (status = 200, body = DiskUsageResponse),
-        (status = 404, description = "Agent or project not found"),
+        (status = 404, description = "Project not found"),
     ),
     tag = "projects",
 )]
 pub(super) async fn disk_usage(
     State(state): State<Arc<ApiState>>,
     Path(project_id): Path<String>,
-    Query(query): Query<AgentQuery>,
 ) -> Result<Json<DiskUsageResponse>, StatusCode> {
-    let stores = state.project_stores.load();
-    let store = stores.get(&query.agent_id).ok_or(StatusCode::NOT_FOUND)?;
+    let store_guard = state.project_store.load();
+    let store = store_guard.as_ref().as_ref().ok_or(StatusCode::NOT_FOUND)?;
 
     let project = store
-        .get_project(&query.agent_id, &project_id)
+        .get_project(&project_id)
         .await
         .map_err(|error| {
             tracing::error!(%error, "failed to get project for disk usage");
@@ -1039,6 +1067,68 @@ pub(super) async fn disk_usage(
     }))
 }
 
+/// GET /agents/projects/{id}/logo — serve the detected project logo.
+#[utoipa::path(
+    get,
+    path = "/agents/projects/{id}/logo",
+    params(
+        ("id" = String, Path, description = "Project ID"),
+    ),
+    responses(
+        (status = 200, description = "Logo image"),
+        (status = 404, description = "No logo found"),
+    ),
+    tag = "projects",
+)]
+pub(super) async fn serve_logo(
+    State(state): State<Arc<ApiState>>,
+    Path(project_id): Path<String>,
+) -> Result<impl IntoResponse, StatusCode> {
+    let store_guard = state.project_store.load();
+    let store = store_guard.as_ref().as_ref().ok_or(StatusCode::NOT_FOUND)?;
+
+    let project = store
+        .get_project(&project_id)
+        .await
+        .map_err(|error| {
+            tracing::error!(%error, "failed to get project for logo");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?
+        .ok_or(StatusCode::NOT_FOUND)?;
+
+    let logo_rel = project.logo_path.ok_or(StatusCode::NOT_FOUND)?;
+    let root = std::path::PathBuf::from(&project.root_path);
+    let logo_abs = root.join(&logo_rel);
+
+    // Ensure the resolved path is inside the project root (prevent traversal).
+    let canonical_root = root.canonicalize().map_err(|_| StatusCode::NOT_FOUND)?;
+    let canonical_logo = logo_abs.canonicalize().map_err(|_| StatusCode::NOT_FOUND)?;
+    if !canonical_logo.starts_with(&canonical_root) {
+        return Err(StatusCode::NOT_FOUND);
+    }
+
+    let data = tokio::fs::read(&canonical_logo)
+        .await
+        .map_err(|_| StatusCode::NOT_FOUND)?;
+
+    let content_type = match logo_rel
+        .rsplit('.')
+        .next()
+        .unwrap_or("")
+        .to_ascii_lowercase()
+        .as_str()
+    {
+        "png" => "image/png",
+        "svg" => "image/svg+xml",
+        "ico" => "image/x-icon",
+        "jpg" | "jpeg" => "image/jpeg",
+        "webp" => "image/webp",
+        _ => "application/octet-stream",
+    };
+
+    Ok(([(header::CONTENT_TYPE, content_type)], data))
+}
+
 /// Recursively calculate directory size. Best-effort — skips entries it can't
 /// read. Uses `symlink_metadata` to avoid following symlinks (prevents infinite
 /// recursion and escaping project root).
diff --git a/src/api/providers.rs b/src/api/providers.rs
index 894f8c2e9..3cf4421aa 100644
--- a/src/api/providers.rs
+++ b/src/api/providers.rs
@@ -405,12 +405,14 @@ pub(super) async fn get_providers(
         github_copilot,
         azure,
     ) = if config_path.exists() {
-        let content = tokio::fs::read_to_string(&config_path)
-            .await
-            .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
-        let doc: toml_edit::DocumentMut = content
-            .parse()
-            .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+        let content = tokio::fs::read_to_string(&config_path).await.map_err(|error| {
+            tracing::error!(%error, path = %config_path.display(), "failed to read config.toml for providers");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?;
+        let doc: toml_edit::DocumentMut = content.parse().map_err(|error| {
+            tracing::error!(%error, "failed to parse config.toml for providers");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?;
 
         let resolve_value = |value: &str| -> Option<String> {
             if let Some(alias) = value.strip_prefix("secret:") {
@@ -881,16 +883,18 @@ pub(super) async fn update_provider(
     let config_path = state.config_path.read().await.clone();
 
     let content = if config_path.exists() {
-        tokio::fs::read_to_string(&config_path)
-            .await
-            .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?
+        tokio::fs::read_to_string(&config_path).await.map_err(|error| {
+            tracing::error!(%error, path = %config_path.display(), "failed to read config.toml for provider setup");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?
     } else {
         String::new()
     };
 
-    let mut doc: toml_edit::DocumentMut = content
-        .parse()
-        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+    let mut doc: toml_edit::DocumentMut = content.parse().map_err(|error| {
+        tracing::error!(%error, "failed to parse config.toml for provider setup");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
 
     if doc.get("llm").is_none() {
         doc["llm"] = toml_edit::Item::Table(toml_edit::Table::new());
@@ -901,7 +905,10 @@ pub(super) async fn update_provider(
 
     tokio::fs::write(&config_path, doc.to_string())
         .await
-        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+        .map_err(|error| {
+            tracing::error!(%error, path = %config_path.display(), "failed to write config.toml for provider setup");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?;
 
     // Refresh in-memory defaults so newly created agents inherit the updated routing.
     refresh_defaults_config(&state).await;
@@ -986,16 +993,18 @@ async fn update_azure_provider(
 
     let config_path = state.config_path.read().await.clone();
     let content = if config_path.exists() {
-        tokio::fs::read_to_string(&config_path)
-            .await
-            .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?
+        tokio::fs::read_to_string(&config_path).await.map_err(|error| {
+            tracing::error!(%error, path = %config_path.display(), "failed to read config.toml for azure setup");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?
     } else {
         String::new()
     };
 
-    let mut doc: toml_edit::DocumentMut = content
-        .parse()
-        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+    let mut doc: toml_edit::DocumentMut = content.parse().map_err(|error| {
+        tracing::error!(%error, "failed to parse config.toml for azure setup");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
 
     // Determine the API key: use incoming if non-empty, otherwise preserve existing
     let api_key = if request.api_key.trim().is_empty() {
@@ -1030,7 +1039,10 @@ async fn update_azure_provider(
         doc["llm"]["provider"]["azure"] = toml_edit::Item::Table(toml_edit::Table::new());
     }
 
-    let azure_table = doc["llm"]["provider"]["azure"].as_table_mut().unwrap();
+    // Just initialized above if it was missing, so the table is guaranteed to exist.
+    let azure_table = doc["llm"]["provider"]["azure"]
+        .as_table_mut()
+        .expect("azure table must exist after initialization above");
     azure_table["api_type"] = toml_edit::value("azure");
     azure_table["base_url"] = toml_edit::value(base_url.trim());
     azure_table["api_key"] = toml_edit::value(api_key.trim());
@@ -1150,13 +1162,15 @@ pub(super) async fn get_provider_config(
         }));
     }
 
-    let content = tokio::fs::read_to_string(&config_path)
-        .await
-        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+    let content = tokio::fs::read_to_string(&config_path).await.map_err(|error| {
+        tracing::error!(%error, path = %config_path.display(), "failed to read config.toml for azure config");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
 
-    let doc: toml_edit::DocumentMut = content
-        .parse()
-        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+    let doc: toml_edit::DocumentMut = content.parse().map_err(|error| {
+        tracing::error!(%error, "failed to parse config.toml for azure config");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
 
     // Get Azure config from [llm.provider.azure]
     let azure_config = doc
@@ -1484,9 +1498,10 @@ pub(super) async fn delete_provider(
         let instance_dir = (**state.instance_dir.load()).clone();
         let cred_path = crate::openai_auth::credentials_path(&instance_dir);
         if cred_path.exists() {
-            tokio::fs::remove_file(&cred_path)
-                .await
-                .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+            tokio::fs::remove_file(&cred_path).await.map_err(|error| {
+                tracing::error!(%error, path = %cred_path.display(), "failed to remove OpenAI OAuth credentials");
+                StatusCode::INTERNAL_SERVER_ERROR
+            })?;
         }
         if let Some(mgr) = state.llm_manager.read().await.as_ref() {
             mgr.clear_openai_oauth_credentials().await;
@@ -1503,9 +1518,10 @@ pub(super) async fn delete_provider(
         let instance_dir = (**state.instance_dir.load()).clone();
         let token_path = crate::github_copilot_auth::credentials_path(&instance_dir);
         if token_path.exists() {
-            tokio::fs::remove_file(&token_path)
-                .await
-                .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+            tokio::fs::remove_file(&token_path).await.map_err(|error| {
+                tracing::error!(%error, path = %token_path.display(), "failed to remove github copilot token");
+                StatusCode::INTERNAL_SERVER_ERROR
+            })?;
         }
         if let Some(manager) = state.llm_manager.read().await.as_ref() {
             manager.clear_copilot_token().await;
@@ -1521,13 +1537,15 @@ pub(super) async fn delete_provider(
             }));
         }
 
-        let content = tokio::fs::read_to_string(&config_path)
-            .await
-            .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+        let content = tokio::fs::read_to_string(&config_path).await.map_err(|error| {
+            tracing::error!(%error, path = %config_path.display(), "failed to read config.toml for azure removal");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?;
 
-        let mut doc: toml_edit::DocumentMut = content
-            .parse()
-            .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+        let mut doc: toml_edit::DocumentMut = content.parse().map_err(|error| {
+            tracing::error!(%error, "failed to parse config.toml for azure removal");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?;
 
         if let Some(llm) = doc.get_mut("llm")
             && let Some(llm_table) = llm.as_table_mut()
@@ -1568,13 +1586,15 @@ pub(super) async fn delete_provider(
         }));
     }
 
-    let content = tokio::fs::read_to_string(&config_path)
-        .await
-        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+    let content = tokio::fs::read_to_string(&config_path).await.map_err(|error| {
+        tracing::error!(%error, path = %config_path.display(), "failed to read config.toml for provider removal");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
 
-    let mut doc: toml_edit::DocumentMut = content
-        .parse()
-        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+    let mut doc: toml_edit::DocumentMut = content.parse().map_err(|error| {
+        tracing::error!(%error, "failed to parse config.toml for provider removal");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
 
     if let Some(llm) = doc.get_mut("llm")
         && let Some(table) = llm.as_table_mut()
@@ -1584,7 +1604,10 @@ pub(super) async fn delete_provider(
 
     tokio::fs::write(&config_path, doc.to_string())
         .await
-        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+        .map_err(|error| {
+            tracing::error!(%error, path = %config_path.display(), "failed to write config.toml for provider removal");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?;
 
     Ok(Json(ProviderUpdateResponse {
         success: true,
diff --git a/src/api/server.rs b/src/api/server.rs
index 4e78f137d..d7b52db80 100644
--- a/src/api/server.rs
+++ b/src/api/server.rs
@@ -2,9 +2,9 @@
 
 use super::state::ApiState;
 use super::{
-    agents, bindings, channels, config, cortex, cron, factory, ingest, links, mcp, memories,
-    messaging, models, opencode_proxy, portal, projects, providers, secrets, settings, skills, ssh,
-    system, tasks, tools, workers,
+    activity, agents, attachments, bindings, channels, config, cortex, cron, factory, ingest,
+    links, mcp, memories, messaging, models, notifications, opencode_proxy, portal, projects,
+    providers, secrets, settings, skills, ssh, system, tasks, tools, usage, wiki, workers,
 };
 
 use axum::Json;
@@ -124,6 +124,13 @@ pub fn api_router() -> OpenApiRouter<Arc<ApiState>> {
         .routes(routes!(cron::cron_executions))
         .routes(routes!(cron::trigger_cron))
         .routes(routes!(cron::toggle_cron))
+        // Notification routes
+        .routes(routes!(notifications::list_notifications))
+        .routes(routes!(notifications::unread_count))
+        .routes(routes!(notifications::mark_read))
+        .routes(routes!(notifications::dismiss_notification))
+        .routes(routes!(notifications::mark_all_read))
+        .routes(routes!(notifications::dismiss_read))
         // Task routes
         .routes(routes!(tasks::list_tasks, tasks::create_task))
         .routes(routes!(
@@ -134,14 +141,23 @@ pub fn api_router() -> OpenApiRouter<Arc<ApiState>> {
         .routes(routes!(tasks::approve_task))
         .routes(routes!(tasks::execute_task))
         .routes(routes!(tasks::assign_task))
+        // Wiki routes
+        .routes(routes!(wiki::list_pages, wiki::create_page))
+        .routes(routes!(wiki::search_pages))
+        .routes(routes!(wiki::get_page, wiki::archive_page))
+        .routes(routes!(wiki::edit_page))
+        .routes(routes!(wiki::get_history))
+        .routes(routes!(wiki::restore_version))
         // Project routes
         .routes(routes!(projects::list_projects, projects::create_project))
+        .routes(routes!(projects::reorder_projects))
         .routes(routes!(
             projects::get_project,
             projects::update_project,
             projects::delete_project
         ))
         .routes(routes!(projects::scan_project))
+        .routes(routes!(projects::serve_logo))
         .routes(routes!(projects::disk_usage))
         .routes(routes!(projects::create_repo))
         .routes(routes!(projects::delete_repo))
@@ -227,6 +243,10 @@ pub fn api_router() -> OpenApiRouter<Arc<ApiState>> {
         .routes(routes!(portal::update_portal_conversation))
         .routes(routes!(portal::delete_portal_conversation))
         .routes(routes!(portal::conversation_defaults))
+        // Attachment routes
+        .routes(routes!(attachments::upload_attachment))
+        .routes(routes!(attachments::serve_attachment))
+        .routes(routes!(attachments::list_attachments))
         // Link routes
         .routes(routes!(links::list_links, links::create_link))
         .routes(routes!(links::update_link, links::delete_link))
@@ -236,6 +256,11 @@ pub fn api_router() -> OpenApiRouter<Arc<ApiState>> {
         .routes(routes!(links::update_group, links::delete_group))
         .routes(routes!(links::list_humans, links::create_human))
         .routes(routes!(links::update_human, links::delete_human))
+        // Usage routes
+        .routes(routes!(usage::get_usage))
+        .routes(routes!(usage::get_conversation_usage))
+        // Activity routes
+        .routes(routes!(activity::get_activity))
         // Factory routes
         .routes(routes!(factory::list_presets))
         .routes(routes!(factory::get_preset))
diff --git a/src/api/settings.rs b/src/api/settings.rs
index 5c401bb5b..41e197e73 100644
--- a/src/api/settings.rs
+++ b/src/api/settings.rs
@@ -8,6 +8,7 @@ use std::sync::Arc;
 
 #[derive(Serialize, utoipa::ToSchema)]
 pub(super) struct GlobalSettingsResponse {
+    company_name: String,
     brave_search_key: Option<String>,
     api_enabled: bool,
     api_port: u16,
@@ -36,6 +37,7 @@ pub(super) struct OpenCodePermissionsResponse {
 
 #[derive(Deserialize, utoipa::ToSchema)]
 pub(super) struct GlobalSettingsUpdate {
+    company_name: Option<String>,
     brave_search_key: Option<String>,
     api_enabled: Option<bool>,
     api_port: Option<u16>,
@@ -99,139 +101,159 @@ pub(super) async fn get_global_settings(
 ) -> Result<Json<GlobalSettingsResponse>, StatusCode> {
     let config_path = state.config_path.read().await.clone();
 
-    let (brave_search_key, api_enabled, api_port, api_bind, worker_log_mode, opencode, ssh_enabled) =
-        if config_path.exists() {
-            let content = tokio::fs::read_to_string(&config_path)
-                .await
-                .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
-            let doc: toml_edit::DocumentMut = content
-                .parse()
-                .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
-
-            let brave_search = doc
-                .get("defaults")
-                .and_then(|d| d.get("brave_search_key"))
-                .and_then(|v| v.as_str())
-                .and_then(|s| {
-                    if let Some(var) = s.strip_prefix("env:") {
-                        std::env::var(var).ok()
-                    } else {
-                        Some(s.to_string())
-                    }
-                });
-
-            let api_enabled = doc
-                .get("api")
-                .and_then(|a| a.get("enabled"))
-                .and_then(|v| v.as_bool())
-                .unwrap_or(true);
-
-            let api_port = doc
-                .get("api")
-                .and_then(|a| a.get("port"))
-                .and_then(|v| v.as_integer())
-                .and_then(|i| u16::try_from(i).ok())
-                .unwrap_or(19898);
-
-            let api_bind = doc
-                .get("api")
-                .and_then(|a| a.get("bind"))
-                .and_then(|v| v.as_str())
-                .unwrap_or("127.0.0.1")
-                .to_string();
+    let (
+        company_name,
+        brave_search_key,
+        api_enabled,
+        api_port,
+        api_bind,
+        worker_log_mode,
+        opencode,
+        ssh_enabled,
+    ) = if config_path.exists() {
+        let content = tokio::fs::read_to_string(&config_path).await.map_err(|error| {
+            tracing::error!(%error, path = %config_path.display(), "failed to read config.toml for global settings");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?;
+        let doc: toml_edit::DocumentMut = content.parse().map_err(|error| {
+            tracing::error!(%error, "failed to parse config.toml for global settings");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?;
 
-            let worker_log_mode = doc
-                .get("defaults")
-                .and_then(|d| d.get("worker_log_mode"))
+        let company_name = doc
+            .get("instance")
+            .and_then(|i| i.get("company_name"))
+            .and_then(|v| v.as_str())
+            .unwrap_or("My Company")
+            .to_string();
+
+        let brave_search = doc
+            .get("defaults")
+            .and_then(|d| d.get("brave_search_key"))
+            .and_then(|v| v.as_str())
+            .and_then(|s| {
+                if let Some(var) = s.strip_prefix("env:") {
+                    std::env::var(var).ok()
+                } else {
+                    Some(s.to_string())
+                }
+            });
+
+        let api_enabled = doc
+            .get("api")
+            .and_then(|a| a.get("enabled"))
+            .and_then(|v| v.as_bool())
+            .unwrap_or(true);
+
+        let api_port = doc
+            .get("api")
+            .and_then(|a| a.get("port"))
+            .and_then(|v| v.as_integer())
+            .and_then(|i| u16::try_from(i).ok())
+            .unwrap_or(19898);
+
+        let api_bind = doc
+            .get("api")
+            .and_then(|a| a.get("bind"))
+            .and_then(|v| v.as_str())
+            .unwrap_or("127.0.0.1")
+            .to_string();
+
+        let worker_log_mode = doc
+            .get("defaults")
+            .and_then(|d| d.get("worker_log_mode"))
+            .and_then(|v| v.as_str())
+            .unwrap_or("errors_only")
+            .to_string();
+
+        let opencode_table = doc.get("defaults").and_then(|d| d.get("opencode"));
+        let opencode_perms = opencode_table.and_then(|o| o.get("permissions"));
+        let opencode = OpenCodeSettingsResponse {
+            enabled: opencode_table
+                .and_then(|o| o.get("enabled"))
+                .and_then(|v| v.as_bool())
+                .unwrap_or(false),
+            path: opencode_table
+                .and_then(|o| o.get("path"))
                 .and_then(|v| v.as_str())
-                .unwrap_or("errors_only")
-                .to_string();
-
-            let opencode_table = doc.get("defaults").and_then(|d| d.get("opencode"));
-            let opencode_perms = opencode_table.and_then(|o| o.get("permissions"));
-            let opencode = OpenCodeSettingsResponse {
-                enabled: opencode_table
-                    .and_then(|o| o.get("enabled"))
-                    .and_then(|v| v.as_bool())
-                    .unwrap_or(false),
-                path: opencode_table
-                    .and_then(|o| o.get("path"))
+                .unwrap_or("opencode")
+                .to_string(),
+            max_servers: opencode_table
+                .and_then(|o| o.get("max_servers"))
+                .and_then(|v| v.as_integer())
+                .and_then(|i| usize::try_from(i).ok())
+                .unwrap_or(5),
+            server_startup_timeout_secs: opencode_table
+                .and_then(|o| o.get("server_startup_timeout_secs"))
+                .and_then(|v| v.as_integer())
+                .and_then(|i| u64::try_from(i).ok())
+                .unwrap_or(30),
+            max_restart_retries: opencode_table
+                .and_then(|o| o.get("max_restart_retries"))
+                .and_then(|v| v.as_integer())
+                .and_then(|i| u32::try_from(i).ok())
+                .unwrap_or(5),
+            permissions: OpenCodePermissionsResponse {
+                edit: opencode_perms
+                    .and_then(|p| p.get("edit"))
                     .and_then(|v| v.as_str())
-                    .unwrap_or("opencode")
+                    .unwrap_or("allow")
                     .to_string(),
-                max_servers: opencode_table
-                    .and_then(|o| o.get("max_servers"))
-                    .and_then(|v| v.as_integer())
-                    .and_then(|i| usize::try_from(i).ok())
-                    .unwrap_or(5),
-                server_startup_timeout_secs: opencode_table
-                    .and_then(|o| o.get("server_startup_timeout_secs"))
-                    .and_then(|v| v.as_integer())
-                    .and_then(|i| u64::try_from(i).ok())
-                    .unwrap_or(30),
-                max_restart_retries: opencode_table
-                    .and_then(|o| o.get("max_restart_retries"))
-                    .and_then(|v| v.as_integer())
-                    .and_then(|i| u32::try_from(i).ok())
-                    .unwrap_or(5),
-                permissions: OpenCodePermissionsResponse {
-                    edit: opencode_perms
-                        .and_then(|p| p.get("edit"))
-                        .and_then(|v| v.as_str())
-                        .unwrap_or("allow")
-                        .to_string(),
-                    bash: opencode_perms
-                        .and_then(|p| p.get("bash"))
-                        .and_then(|v| v.as_str())
-                        .unwrap_or("allow")
-                        .to_string(),
-                    webfetch: opencode_perms
-                        .and_then(|p| p.get("webfetch"))
-                        .and_then(|v| v.as_str())
-                        .unwrap_or("allow")
-                        .to_string(),
-                },
-            };
+                bash: opencode_perms
+                    .and_then(|p| p.get("bash"))
+                    .and_then(|v| v.as_str())
+                    .unwrap_or("allow")
+                    .to_string(),
+                webfetch: opencode_perms
+                    .and_then(|p| p.get("webfetch"))
+                    .and_then(|v| v.as_str())
+                    .unwrap_or("allow")
+                    .to_string(),
+            },
+        };
 
-            let ssh_enabled = doc
-                .get("ssh")
-                .and_then(|s| s.get("enabled"))
-                .and_then(|v| v.as_bool())
-                .unwrap_or(false);
-
-            (
-                brave_search,
-                api_enabled,
-                api_port,
-                api_bind,
-                worker_log_mode,
-                opencode,
-                ssh_enabled,
-            )
-        } else {
-            (
-                None,
-                true,
-                19898,
-                "127.0.0.1".to_string(),
-                "errors_only".to_string(),
-                OpenCodeSettingsResponse {
-                    enabled: false,
-                    path: "opencode".to_string(),
-                    max_servers: 5,
-                    server_startup_timeout_secs: 30,
-                    max_restart_retries: 5,
-                    permissions: OpenCodePermissionsResponse {
-                        edit: "allow".to_string(),
-                        bash: "allow".to_string(),
-                        webfetch: "allow".to_string(),
-                    },
+        let ssh_enabled = doc
+            .get("ssh")
+            .and_then(|s| s.get("enabled"))
+            .and_then(|v| v.as_bool())
+            .unwrap_or(false);
+
+        (
+            company_name,
+            brave_search,
+            api_enabled,
+            api_port,
+            api_bind,
+            worker_log_mode,
+            opencode,
+            ssh_enabled,
+        )
+    } else {
+        (
+            "My Company".to_string(),
+            None,
+            true,
+            19898,
+            "127.0.0.1".to_string(),
+            "errors_only".to_string(),
+            OpenCodeSettingsResponse {
+                enabled: false,
+                path: "opencode".to_string(),
+                max_servers: 5,
+                server_startup_timeout_secs: 30,
+                max_restart_retries: 5,
+                permissions: OpenCodePermissionsResponse {
+                    edit: "allow".to_string(),
+                    bash: "allow".to_string(),
+                    webfetch: "allow".to_string(),
                 },
-                false,
-            )
-        };
+            },
+            false,
+        )
+    };
 
     Ok(Json(GlobalSettingsResponse {
+        company_name,
         brave_search_key,
         api_enabled,
         api_port,
@@ -259,19 +281,28 @@ pub(super) async fn update_global_settings(
     let config_path = state.config_path.read().await.clone();
 
     let content = if config_path.exists() {
-        tokio::fs::read_to_string(&config_path)
-            .await
-            .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?
+        tokio::fs::read_to_string(&config_path).await.map_err(|error| {
+            tracing::error!(%error, path = %config_path.display(), "failed to read config.toml for update");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?
     } else {
         String::new()
     };
 
-    let mut doc: toml_edit::DocumentMut = content
-        .parse()
-        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+    let mut doc: toml_edit::DocumentMut = content.parse().map_err(|error| {
+        tracing::error!(%error, "failed to parse config.toml for update");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
 
     let mut requires_restart = false;
 
+    if let Some(name) = request.company_name {
+        if doc.get("instance").is_none() {
+            doc["instance"] = toml_edit::Item::Table(toml_edit::Table::new());
+        }
+        doc["instance"]["company_name"] = toml_edit::value(name);
+    }
+
     if let Some(key) = request.brave_search_key {
         if doc.get("defaults").is_none() {
             doc["defaults"] = toml_edit::Item::Table(toml_edit::Table::new());
@@ -369,7 +400,10 @@ pub(super) async fn update_global_settings(
 
     tokio::fs::write(&config_path, doc.to_string())
         .await
-        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+        .map_err(|error| {
+            tracing::error!(%error, path = %config_path.display(), "failed to write config.toml for update");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?;
 
     let reload_path = config_path.clone();
     match tokio::task::spawn_blocking(move || crate::config::Config::load_from_path(&reload_path))
diff --git a/src/api/skills.rs b/src/api/skills.rs
index 19ece5398..1216755b5 100644
--- a/src/api/skills.rs
+++ b/src/api/skills.rs
@@ -207,6 +207,7 @@ pub(super) async fn list_skills(
             file_path: s.file_path.display().to_string(),
             base_dir: s.base_dir.display().to_string(),
             source: match s.source {
+                crate::skills::SkillSource::Builtin => "builtin".to_string(),
                 crate::skills::SkillSource::Instance => "instance".to_string(),
                 crate::skills::SkillSource::Workspace => "workspace".to_string(),
             },
@@ -291,8 +292,8 @@ pub(super) async fn remove_skill(
 
     let removed_path = skills.remove(&req.name).await.map_err(|error| {
         let msg = error.to_string();
-        if msg.contains("instance-level skill") {
-            tracing::warn!(skill = %req.name, "rejected removal of instance-level skill");
+        if msg.contains("built-in skill") || msg.contains("instance-level skill") {
+            tracing::warn!(skill = %req.name, "rejected removal of protected skill");
             StatusCode::FORBIDDEN
         } else {
             tracing::warn!(%error, skill = %req.name, "failed to remove skill");
@@ -353,6 +354,7 @@ pub(super) async fn get_skill_content(
         file_path: skill.file_path.display().to_string(),
         base_dir: skill.base_dir.display().to_string(),
         source: match skill.source {
+            crate::skills::SkillSource::Builtin => "builtin".to_string(),
             crate::skills::SkillSource::Instance => "instance".to_string(),
             crate::skills::SkillSource::Workspace => "workspace".to_string(),
         },
diff --git a/src/api/state.rs b/src/api/state.rs
index 8e0f4c831..0f4ccc263 100644
--- a/src/api/state.rs
+++ b/src/api/state.rs
@@ -13,6 +13,7 @@ use crate::mcp::McpManager;
 use crate::memory::{EmbeddingModel, MemorySearch};
 use crate::messaging::MessagingManager;
 use crate::messaging::portal::PortalAdapter;
+use crate::notifications::{NewNotification, Notification, NotificationStore};
 use crate::projects::ProjectStore;
 use crate::prompts::PromptEngine;
 use crate::tasks::TaskStore;
@@ -84,8 +85,12 @@ pub struct ApiState {
     pub cron_schedulers: arc_swap::ArcSwap<HashMap<String, Arc<Scheduler>>>,
     /// Instance-level global task store shared across all agents.
     pub task_store: ArcSwap<Option<Arc<TaskStore>>>,
-    /// Per-agent project stores for project/repo/worktree CRUD operations.
-    pub project_stores: arc_swap::ArcSwap<HashMap<String, Arc<ProjectStore>>>,
+    /// Instance-wide wiki knowledge base.
+    pub wiki_store: ArcSwap<Option<Arc<crate::wiki::WikiStore>>>,
+    /// Instance-level shared project store.
+    pub project_store: ArcSwap<Option<Arc<ProjectStore>>>,
+    /// Instance-level notification store for the dashboard inbox.
+    pub notification_store: ArcSwap<Option<Arc<NotificationStore>>>,
     /// Per-agent RuntimeConfig for reading live hot-reloaded configuration.
     pub runtime_configs: ArcSwap<HashMap<String, Arc<RuntimeConfig>>>,
     /// Per-agent MCP managers for status and reconnect APIs.
@@ -137,11 +142,26 @@ pub struct ApiState {
     /// recover the transcript without waiting for the worker to complete.
     /// Keyed by worker_id, cleared on worker completion.
     pub live_worker_transcripts: Arc<RwLock<HashMap<String, Vec<TranscriptStep>>>>,
+    /// In-memory cache of tool calls for running channel turns (direct mode).
+    /// Keyed by channel_id, drained when the bot message is persisted.
+    pub live_channel_tool_calls: Arc<RwLock<HashMap<String, Vec<ChannelToolCallEntry>>>>,
     /// Serializes SSH daemon enable/disable transitions to prevent races
     /// between overlapping toggle requests.
     pub ssh_mutex: tokio::sync::Mutex<()>,
 }
 
+/// A single channel-level tool call accumulated in memory during a direct-mode turn.
+#[derive(Debug, Clone, Serialize, serde::Deserialize)]
+pub struct ChannelToolCallEntry {
+    pub id: String,
+    pub tool_name: String,
+    pub args: String,
+    pub result: Option<String>,
+    pub status: String,
+    pub started_at: String,
+    pub completed_at: Option<String>,
+}
+
 /// Events sent to SSE clients. Wraps ProcessEvents with agent context.
 #[derive(Debug, Clone, Serialize, utoipa::ToSchema)]
 #[serde(tag = "type", rename_all = "snake_case")]
@@ -153,6 +173,8 @@ pub enum ApiEvent {
         sender_name: Option<String>,
         sender_id: String,
         text: String,
+        #[serde(default, skip_serializing_if = "Vec::is_empty")]
+        attachments: Vec<crate::agent::channel_attachments::SavedAttachmentMeta>,
     },
     /// An outbound message sent by the bot.
     OutboundMessage {
@@ -279,6 +301,14 @@ pub enum ApiEvent {
         content: String,
         tool_calls: Option<Vec<crate::agent::cortex_chat::CortexChatToolCall>>,
     },
+    /// A new notification was created and persisted.
+    NotificationCreated { notification: Notification },
+    /// A notification was updated (read or dismissed) — for cross-tab sync.
+    NotificationUpdated {
+        id: String,
+        read: bool,
+        dismissed: bool,
+    },
 }
 
 impl ApiState {
@@ -307,7 +337,9 @@ impl ApiState {
             cron_stores: arc_swap::ArcSwap::from_pointee(HashMap::new()),
             cron_schedulers: arc_swap::ArcSwap::from_pointee(HashMap::new()),
             task_store: ArcSwap::from_pointee(None),
-            project_stores: arc_swap::ArcSwap::from_pointee(HashMap::new()),
+            wiki_store: ArcSwap::from_pointee(None),
+            project_store: ArcSwap::from_pointee(None),
+            notification_store: ArcSwap::from_pointee(None),
             runtime_configs: ArcSwap::from_pointee(HashMap::new()),
             mcp_managers: ArcSwap::from_pointee(HashMap::new()),
             sandboxes: ArcSwap::from_pointee(HashMap::new()),
@@ -332,6 +364,7 @@ impl ApiState {
             agent_groups: ArcSwap::from_pointee(Vec::new()),
             agent_humans: ArcSwap::from_pointee(Vec::new()),
             live_worker_transcripts: Arc::new(RwLock::new(HashMap::new())),
+            live_channel_tool_calls: Arc::new(RwLock::new(HashMap::new())),
             ssh_mutex: tokio::sync::Mutex::new(()),
         }
     }
@@ -382,6 +415,10 @@ impl ApiState {
     ) {
         let api_tx = self.event_tx.clone();
         let live_transcripts = self.live_worker_transcripts.clone();
+        let live_channel_tools = self.live_channel_tool_calls.clone();
+        // Snapshot the notification store at registration time. It is set once
+        // at startup before any agents register, so the snapshot is always valid.
+        let _notif_store_snap = self.notification_store.load_full();
         tokio::spawn(async move {
             loop {
                 match agent_event_rx.recv().await {
@@ -474,6 +511,49 @@ impl ApiState {
                                         success: *success,
                                     })
                                     .ok();
+                                // TODO: re-enable WorkerFailed notifications once action_url points somewhere useful
+                                // if !success {
+                                //     if let Some(ref store) = *notif_store_snap {
+                                //         let store = store.clone();
+                                //         let event_tx = api_tx.clone();
+                                //         let agent_id_n = agent_id.clone();
+                                //         let worker_id_n = worker_id.to_string();
+                                //         let body = if result.is_empty() {
+                                //             None
+                                //         } else {
+                                //             Some(result.chars().take(300).collect::<String>())
+                                //         };
+                                //         tokio::spawn(async move {
+                                //             let n = NewNotification {
+                                //                 kind: NotificationKind::WorkerFailed,
+                                //                 severity: NotificationSeverity::Error,
+                                //                 title: format!("Worker failed: {worker_id_n}"),
+                                //                 body,
+                                //                 agent_id: Some(agent_id_n),
+                                //                 related_entity_type: Some("worker".to_string()),
+                                //                 related_entity_id: Some(worker_id_n),
+                                //                 action_url: None,
+                                //                 metadata: None,
+                                //             };
+                                //             match store.insert(n).await {
+                                //                 Ok(Some(notification)) => {
+                                //                     event_tx
+                                //                         .send(ApiEvent::NotificationCreated {
+                                //                             notification,
+                                //                         })
+                                //                         .ok();
+                                //                 }
+                                //                 Ok(None) => {}
+                                //                 Err(error) => {
+                                //                     tracing::warn!(
+                                //                         %error,
+                                //                         "failed to insert worker failure notification"
+                                //                     );
+                                //                 }
+                                //             }
+                                //         });
+                                //     }
+                                // }
                             }
                             ProcessEvent::BranchResult {
                                 branch_id,
@@ -513,6 +593,25 @@ impl ApiState {
                                         steps.push(step);
                                     }
                                 }
+                                // Accumulate channel-level tool calls in memory,
+                                // skipping conversation/routing tools.
+                                if let ProcessId::Channel(ch_id) = process_id {
+                                    if is_hidden_channel_tool(tool_name) {
+                                        // skip
+                                    } else {
+                                        let entry = ChannelToolCallEntry {
+                                            id: uuid::Uuid::new_v4().to_string(),
+                                            tool_name: tool_name.clone(),
+                                            args: args.clone(),
+                                            result: None,
+                                            status: "running".into(),
+                                            started_at: chrono::Utc::now().to_rfc3339(),
+                                            completed_at: None,
+                                        };
+                                        let mut guard = live_channel_tools.write().await;
+                                        guard.entry(ch_id.to_string()).or_default().push(entry);
+                                    }
+                                }
                                 api_tx
                                     .send(ApiEvent::ToolStarted {
                                         agent_id: agent_id.clone(),
@@ -544,6 +643,19 @@ impl ApiState {
                                         steps.push(step);
                                     }
                                 }
+                                // Complete channel-level tool call in memory (FIFO).
+                                if let ProcessId::Channel(ch_id) = process_id {
+                                    let mut guard = live_channel_tools.write().await;
+                                    if let Some(calls) = guard.get_mut(&ch_id.to_string())
+                                        && let Some(entry) = calls.iter_mut().find(|c| {
+                                            c.tool_name == *tool_name && c.status == "running"
+                                        })
+                                    {
+                                        entry.result = Some(result.clone());
+                                        entry.status = "completed".into();
+                                        entry.completed_at = Some(chrono::Utc::now().to_rfc3339());
+                                    }
+                                }
                                 api_tx
                                     .send(ApiEvent::ToolCompleted {
                                         agent_id: agent_id.clone(),
@@ -749,9 +861,38 @@ impl ApiState {
         self.task_store.store(Arc::new(Some(store)));
     }
 
-    /// Set the project stores for all agents.
-    pub fn set_project_stores(&self, stores: HashMap<String, Arc<ProjectStore>>) {
-        self.project_stores.store(Arc::new(stores));
+    /// Set the instance-wide wiki store.
+    pub fn set_wiki_store(&self, store: Arc<crate::wiki::WikiStore>) {
+        self.wiki_store.store(Arc::new(Some(store)));
+    }
+
+    /// Set the shared project store.
+    pub fn set_project_store(&self, store: Arc<ProjectStore>) {
+        self.project_store.store(Arc::new(Some(store)));
+    }
+
+    /// Set the instance-level notification store.
+    pub fn set_notification_store(&self, store: Arc<NotificationStore>) {
+        self.notification_store.store(Arc::new(Some(store)));
+    }
+
+    /// Insert a notification and broadcast `NotificationCreated` via SSE.
+    /// Fire-and-forget: spawns a task and returns immediately.
+    pub fn emit_notification(&self, n: NewNotification) {
+        let store = self.notification_store.load().as_ref().clone();
+        let event_tx = self.event_tx.clone();
+        let Some(store) = store else { return };
+        tokio::spawn(async move {
+            match store.insert(n).await {
+                Ok(Some(notification)) => {
+                    event_tx
+                        .send(ApiEvent::NotificationCreated { notification })
+                        .ok();
+                }
+                Ok(None) => {} // duplicate suppressed by unique index
+                Err(error) => tracing::warn!(%error, "failed to insert notification"),
+            }
+        });
     }
 
     /// Set the runtime configs for all agents.
@@ -844,12 +985,29 @@ impl ApiState {
         self.agent_humans.store(Arc::new(humans));
     }
 
+    /// Drain accumulated channel tool calls for a channel.
+    ///
+    /// Called when the bot message is about to be persisted so the tool calls
+    /// can be stored in the message metadata.
+    pub async fn take_channel_tool_calls(&self, channel_id: &str) -> Vec<ChannelToolCallEntry> {
+        let mut guard = self.live_channel_tool_calls.write().await;
+        guard.remove(channel_id).unwrap_or_default()
+    }
+
     /// Send an event to all SSE subscribers.
     pub fn send_event(&self, event: ApiEvent) {
         let _ = self.event_tx.send(event);
     }
 }
 
+/// Conversation/routing tools that should not be stored or surfaced as channel tool calls.
+fn is_hidden_channel_tool(name: &str) -> bool {
+    matches!(
+        name,
+        "reply" | "react" | "skip" | "set_outcome" | "spawn_worker" | "branch" | "route" | "cancel"
+    )
+}
+
 /// Extract (process_type, id_string) from a ProcessId.
 fn process_id_info(id: &ProcessId) -> (String, String) {
     match id {
diff --git a/src/api/system.rs b/src/api/system.rs
index 3b49e261c..add2156d3 100644
--- a/src/api/system.rs
+++ b/src/api/system.rs
@@ -133,6 +133,8 @@ pub(super) async fn events_sse(
                             ApiEvent::OpenCodePartUpdated { .. } => "opencode_part_updated",
                             ApiEvent::WorkerText { .. } => "worker_text",
                             ApiEvent::CortexChatMessage { .. } => "cortex_chat_message",
+                            ApiEvent::NotificationCreated { .. } => "notification_created",
+                            ApiEvent::NotificationUpdated { .. } => "notification_updated",
                         };
                         yield Ok(axum::response::sse::Event::default()
                             .event(event_type)
diff --git a/src/api/tasks.rs b/src/api/tasks.rs
index 5181c7d14..98d6eadcb 100644
--- a/src/api/tasks.rs
+++ b/src/api/tasks.rs
@@ -1,4 +1,5 @@
 use super::state::ApiState;
+use crate::notifications::{NewNotification, NotificationKind, NotificationSeverity};
 
 use axum::Json;
 use axum::extract::{Path, Query, State};
@@ -42,8 +43,6 @@ pub(super) struct CreateTaskRequest {
     #[serde(default)]
     description: Option<String>,
     #[serde(default)]
-    status: Option<String>,
-    #[serde(default)]
     priority: Option<String>,
     #[serde(default)]
     subtasks: Vec<crate::tasks::TaskSubtask>,
@@ -154,6 +153,24 @@ fn emit_task_event(state: &ApiState, task: &crate::tasks::Task, action: &str) {
         .ok();
 }
 
+/// Emit a task_approval notification when a task enters the pending_approval state.
+fn maybe_emit_approval_notification(state: &ApiState, task: &crate::tasks::Task) {
+    if task.status != crate::tasks::TaskStatus::PendingApproval {
+        return;
+    }
+    state.emit_notification(NewNotification {
+        kind: NotificationKind::TaskApproval,
+        severity: NotificationSeverity::Info,
+        title: task.title.clone(),
+        body: task.description.clone(),
+        agent_id: Some(task.assigned_agent_id.clone()),
+        related_entity_type: Some("task".to_string()),
+        related_entity_id: Some(task.task_number.to_string()),
+        action_url: Some(format!("/tasks/{}", task.task_number)),
+        metadata: None,
+    });
+}
+
 // ---------------------------------------------------------------------------
 // Handlers
 // ---------------------------------------------------------------------------
@@ -247,8 +264,7 @@ pub(super) async fn create_task(
 ) -> Result<Json<TaskResponse>, StatusCode> {
     let store = get_task_store(&state)?;
 
-    let status =
-        parse_status(request.status.as_deref())?.unwrap_or(crate::tasks::TaskStatus::Backlog);
+    let status = crate::tasks::TaskStatus::PendingApproval;
     let priority =
         parse_priority(request.priority.as_deref())?.unwrap_or(crate::tasks::TaskPriority::Medium);
 
@@ -276,6 +292,7 @@ pub(super) async fn create_task(
         })?;
 
     emit_task_event(&state, &task, "created");
+    maybe_emit_approval_notification(&state, &task);
     Ok(Json(TaskResponse { task }))
 }
 
@@ -330,6 +347,7 @@ pub(super) async fn update_task(
         .ok_or(StatusCode::NOT_FOUND)?;
 
     emit_task_event(&state, &task, "updated");
+    maybe_emit_approval_notification(&state, &task);
     Ok(Json(TaskResponse { task }))
 }
 
@@ -427,6 +445,14 @@ pub(super) async fn approve_task(
         .ok_or(StatusCode::NOT_FOUND)?;
 
     emit_task_event(&state, &task, "updated");
+    // Auto-dismiss any pending task_approval notification for this task.
+    if let Some(store) = state.notification_store.load().as_ref().clone()
+        && let Err(error) = store
+            .dismiss_by_entity("task_approval", "task", &number.to_string())
+            .await
+    {
+        tracing::warn!(%error, task_number = number, "failed to auto-dismiss approval notification");
+    }
     Ok(Json(TaskResponse { task }))
 }
 
diff --git a/src/api/usage.rs b/src/api/usage.rs
new file mode 100644
index 000000000..68d9904b8
--- /dev/null
+++ b/src/api/usage.rs
@@ -0,0 +1,527 @@
+//! Token usage API endpoints.
+
+use super::state::ApiState;
+
+use axum::Json;
+use axum::extract::{Path, Query, State};
+use axum::http::StatusCode;
+use serde::{Deserialize, Serialize};
+use sqlx::Row as _;
+use std::sync::Arc;
+
+// ── Response types ──
+
+#[derive(Debug, Serialize, utoipa::ToSchema)]
+pub(super) struct UsageTotals {
+    input_tokens: i64,
+    output_tokens: i64,
+    cache_read_tokens: i64,
+    cache_write_tokens: i64,
+    reasoning_tokens: i64,
+    request_count: i64,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    estimated_cost_usd: Option<f64>,
+    cost_status: String,
+}
+
+#[derive(Debug, Serialize, utoipa::ToSchema)]
+pub(super) struct UsageByModel {
+    model: String,
+    input_tokens: i64,
+    output_tokens: i64,
+    cache_read_tokens: i64,
+    cache_write_tokens: i64,
+    reasoning_tokens: i64,
+    request_count: i64,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    estimated_cost_usd: Option<f64>,
+}
+
+#[derive(Debug, Serialize, utoipa::ToSchema)]
+pub(super) struct UsageByDay {
+    date: String,
+    input_tokens: i64,
+    output_tokens: i64,
+    cache_read_tokens: i64,
+    cache_write_tokens: i64,
+    reasoning_tokens: i64,
+    request_count: i64,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    estimated_cost_usd: Option<f64>,
+}
+
+#[derive(Debug, Serialize, utoipa::ToSchema)]
+pub(super) struct UsageByAgent {
+    agent_id: String,
+    input_tokens: i64,
+    output_tokens: i64,
+    cache_read_tokens: i64,
+    cache_write_tokens: i64,
+    reasoning_tokens: i64,
+    request_count: i64,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    estimated_cost_usd: Option<f64>,
+}
+
+#[derive(Debug, Serialize, utoipa::ToSchema)]
+pub(super) struct UsageResponse {
+    total: UsageTotals,
+    #[serde(skip_serializing_if = "Vec::is_empty")]
+    by_model: Vec<UsageByModel>,
+    #[serde(skip_serializing_if = "Vec::is_empty")]
+    by_day: Vec<UsageByDay>,
+    #[serde(skip_serializing_if = "Vec::is_empty")]
+    by_agent: Vec<UsageByAgent>,
+}
+
+// ── Query params ──
+
+#[derive(Debug, Deserialize, utoipa::IntoParams)]
+pub(super) struct UsageQuery {
+    /// Filter to one agent.
+    #[serde(default)]
+    agent_id: Option<String>,
+    /// ISO 8601 lower bound (default: 30 days ago).
+    #[serde(default)]
+    since: Option<String>,
+    /// ISO 8601 upper bound.
+    #[serde(default)]
+    until: Option<String>,
+    /// Group by: day, agent, model (comma-separated for multiple).
+    #[serde(default)]
+    group_by: Option<String>,
+}
+
+#[derive(Debug, Deserialize, utoipa::IntoParams)]
+pub(super) struct ConversationUsageQuery {
+    /// Filter to one agent.
+    #[serde(default)]
+    agent_id: Option<String>,
+}
+
+// ── Helpers ──
+
+fn default_since() -> String {
+    let thirty_days_ago = chrono::Utc::now() - chrono::Duration::days(30);
+    thirty_days_ago.format("%Y-%m-%dT%H:%M:%S%.3fZ").to_string()
+}
+
+/// Aggregate cost_status: most conservative across all rows.
+fn aggregate_cost_status(rows: &[sqlx::sqlite::SqliteRow]) -> String {
+    let mut has_unknown = false;
+    let mut has_estimated = false;
+    for row in rows {
+        let status: String = row.get("cost_status");
+        match status.as_str() {
+            "unknown" => has_unknown = true,
+            "estimated" => has_estimated = true,
+            _ => {}
+        }
+    }
+    if has_unknown {
+        "unknown".to_string()
+    } else if has_estimated {
+        "estimated".to_string()
+    } else {
+        "included".to_string()
+    }
+}
+
+// ── Endpoints ──
+
+/// Aggregated token usage for the instance.
+#[utoipa::path(
+    get,
+    path = "/usage",
+    params(UsageQuery),
+    responses(
+        (status = 200, body = UsageResponse),
+        (status = 500, description = "Internal server error"),
+    ),
+    tag = "usage",
+)]
+pub(super) async fn get_usage(
+    State(state): State<Arc<ApiState>>,
+    Query(query): Query<UsageQuery>,
+) -> Result<Json<UsageResponse>, StatusCode> {
+    let pools = state.agent_pools.load();
+    let since = query
+        .since
+        .as_deref()
+        .unwrap_or(&default_since())
+        .to_string();
+    let until = query.until.clone();
+    let group_by = query
+        .group_by
+        .as_deref()
+        .unwrap_or("")
+        .split(',')
+        .map(str::trim)
+        .filter(|s| !s.is_empty())
+        .collect::<Vec<_>>();
+
+    // Determine which pools to query.
+    let target_pools: Vec<(&str, &sqlx::SqlitePool)> = if let Some(ref agent_id) = query.agent_id {
+        pools
+            .get(agent_id.as_str())
+            .map(|pool| vec![(agent_id.as_str(), pool)])
+            .unwrap_or_default()
+    } else {
+        pools.iter().map(|(k, v)| (k.as_str(), v)).collect()
+    };
+
+    if target_pools.is_empty() {
+        return Ok(Json(UsageResponse {
+            total: UsageTotals {
+                input_tokens: 0,
+                output_tokens: 0,
+                cache_read_tokens: 0,
+                cache_write_tokens: 0,
+                reasoning_tokens: 0,
+                request_count: 0,
+                estimated_cost_usd: None,
+                cost_status: "unknown".to_string(),
+            },
+            by_model: vec![],
+            by_day: vec![],
+            by_agent: vec![],
+        }));
+    }
+
+    // Collect totals across all agent pools.
+    let mut total_input: i64 = 0;
+    let mut total_output: i64 = 0;
+    let mut total_cache_read: i64 = 0;
+    let mut total_cache_write: i64 = 0;
+    let mut total_reasoning: i64 = 0;
+    let mut total_requests: i64 = 0;
+    let mut total_cost: f64 = 0.0;
+    let mut has_unknown = false;
+    let mut has_estimated = false;
+
+    let mut all_by_model: std::collections::HashMap<String, UsageByModel> =
+        std::collections::HashMap::new();
+    let mut all_by_day: std::collections::HashMap<String, UsageByDay> =
+        std::collections::HashMap::new();
+    let mut all_by_agent: Vec<UsageByAgent> = Vec::new();
+
+    for (agent_id, pool) in &target_pools {
+        // Total query
+        let mut total_sql = String::from(
+            "SELECT COALESCE(SUM(input_tokens), 0) as input_tokens, \
+             COALESCE(SUM(output_tokens), 0) as output_tokens, \
+             COALESCE(SUM(cache_read_tokens), 0) as cache_read_tokens, \
+             COALESCE(SUM(cache_write_tokens), 0) as cache_write_tokens, \
+             COALESCE(SUM(reasoning_tokens), 0) as reasoning_tokens, \
+             COALESCE(SUM(request_count), 0) as request_count, \
+             COALESCE(SUM(estimated_cost_usd), 0.0) as estimated_cost_usd \
+             FROM token_usage WHERE recorded_at >= ?",
+        );
+        let mut bind_values: Vec<String> = vec![since.clone()];
+
+        if let Some(ref u) = until {
+            total_sql.push_str(" AND recorded_at <= ?");
+            bind_values.push(u.clone());
+        }
+
+        let mut q = sqlx::query(&total_sql);
+        for v in &bind_values {
+            q = q.bind(v);
+        }
+
+        let row = q.fetch_one(*pool).await.map_err(|error| {
+            tracing::error!(%error, agent_id, "failed to query token usage totals");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?;
+
+        let input: i64 = row.get("input_tokens");
+        let output: i64 = row.get("output_tokens");
+        let cache_read: i64 = row.get("cache_read_tokens");
+        let cache_write: i64 = row.get("cache_write_tokens");
+        let reasoning: i64 = row.get("reasoning_tokens");
+        let requests: i64 = row.get("request_count");
+        let cost: f64 = row.get("estimated_cost_usd");
+
+        total_input += input;
+        total_output += output;
+        total_cache_read += cache_read;
+        total_cache_write += cache_write;
+        total_reasoning += reasoning;
+        total_requests += requests;
+        total_cost += cost;
+
+        // Check cost status
+        let status_rows =
+            sqlx::query("SELECT DISTINCT cost_status FROM token_usage WHERE recorded_at >= ?")
+                .bind(&since)
+                .fetch_all(*pool)
+                .await
+                .map_err(|error| {
+                    tracing::error!(%error, agent_id, "failed to query cost status");
+                    StatusCode::INTERNAL_SERVER_ERROR
+                })?;
+        let status = aggregate_cost_status(&status_rows);
+        if status == "unknown" {
+            has_unknown = true;
+        } else if status == "estimated" {
+            has_estimated = true;
+        }
+
+        // Collect per-agent data
+        if group_by.contains(&"agent") && requests > 0 {
+            all_by_agent.push(UsageByAgent {
+                agent_id: agent_id.to_string(),
+                input_tokens: input,
+                output_tokens: output,
+                cache_read_tokens: cache_read,
+                cache_write_tokens: cache_write,
+                reasoning_tokens: reasoning,
+                request_count: requests,
+                estimated_cost_usd: Some(cost),
+            });
+        }
+
+        // By model
+        if group_by.contains(&"model") {
+            let mut model_sql = String::from(
+                "SELECT model, \
+                 COALESCE(SUM(input_tokens), 0) as input_tokens, \
+                 COALESCE(SUM(output_tokens), 0) as output_tokens, \
+                 COALESCE(SUM(cache_read_tokens), 0) as cache_read_tokens, \
+                 COALESCE(SUM(cache_write_tokens), 0) as cache_write_tokens, \
+                 COALESCE(SUM(reasoning_tokens), 0) as reasoning_tokens, \
+                 COALESCE(SUM(request_count), 0) as request_count, \
+                 COALESCE(SUM(estimated_cost_usd), 0.0) as estimated_cost_usd \
+                 FROM token_usage WHERE recorded_at >= ?",
+            );
+            if until.is_some() {
+                model_sql.push_str(" AND recorded_at <= ?");
+            }
+            model_sql.push_str(" GROUP BY model ORDER BY request_count DESC");
+
+            let mut q = sqlx::query(&model_sql).bind(&since);
+            if let Some(ref u) = until {
+                q = q.bind(u);
+            }
+
+            let rows = q.fetch_all(*pool).await.map_err(|error| {
+                tracing::error!(%error, agent_id, "failed to query usage by model");
+                StatusCode::INTERNAL_SERVER_ERROR
+            })?;
+            for row in rows {
+                let model: String = row.get("model");
+                let entry = all_by_model.entry(model.clone()).or_insert(UsageByModel {
+                    model,
+                    input_tokens: 0,
+                    output_tokens: 0,
+                    cache_read_tokens: 0,
+                    cache_write_tokens: 0,
+                    reasoning_tokens: 0,
+                    request_count: 0,
+                    estimated_cost_usd: Some(0.0),
+                });
+                entry.input_tokens += row.get::<i64, _>("input_tokens");
+                entry.output_tokens += row.get::<i64, _>("output_tokens");
+                entry.cache_read_tokens += row.get::<i64, _>("cache_read_tokens");
+                entry.cache_write_tokens += row.get::<i64, _>("cache_write_tokens");
+                entry.reasoning_tokens += row.get::<i64, _>("reasoning_tokens");
+                entry.request_count += row.get::<i64, _>("request_count");
+                if let Some(cost) = entry.estimated_cost_usd.as_mut() {
+                    *cost += row.get::<f64, _>("estimated_cost_usd");
+                }
+            }
+        }
+
+        // By day
+        if group_by.contains(&"day") {
+            let mut day_sql = String::from(
+                "SELECT date(recorded_at) as date, \
+                 COALESCE(SUM(input_tokens), 0) as input_tokens, \
+                 COALESCE(SUM(output_tokens), 0) as output_tokens, \
+                 COALESCE(SUM(cache_read_tokens), 0) as cache_read_tokens, \
+                 COALESCE(SUM(cache_write_tokens), 0) as cache_write_tokens, \
+                 COALESCE(SUM(reasoning_tokens), 0) as reasoning_tokens, \
+                 COALESCE(SUM(request_count), 0) as request_count, \
+                 COALESCE(SUM(estimated_cost_usd), 0.0) as estimated_cost_usd \
+                 FROM token_usage WHERE recorded_at >= ?",
+            );
+            if until.is_some() {
+                day_sql.push_str(" AND recorded_at <= ?");
+            }
+            day_sql.push_str(" GROUP BY date ORDER BY date");
+
+            let mut q = sqlx::query(&day_sql).bind(&since);
+            if let Some(ref u) = until {
+                q = q.bind(u);
+            }
+
+            let rows = q.fetch_all(*pool).await.map_err(|error| {
+                tracing::error!(%error, agent_id, "failed to query usage by day");
+                StatusCode::INTERNAL_SERVER_ERROR
+            })?;
+            for row in rows {
+                let date: String = row.get("date");
+                let entry = all_by_day.entry(date.clone()).or_insert(UsageByDay {
+                    date,
+                    input_tokens: 0,
+                    output_tokens: 0,
+                    cache_read_tokens: 0,
+                    cache_write_tokens: 0,
+                    reasoning_tokens: 0,
+                    request_count: 0,
+                    estimated_cost_usd: Some(0.0),
+                });
+                entry.input_tokens += row.get::<i64, _>("input_tokens");
+                entry.output_tokens += row.get::<i64, _>("output_tokens");
+                entry.cache_read_tokens += row.get::<i64, _>("cache_read_tokens");
+                entry.cache_write_tokens += row.get::<i64, _>("cache_write_tokens");
+                entry.reasoning_tokens += row.get::<i64, _>("reasoning_tokens");
+                entry.request_count += row.get::<i64, _>("request_count");
+                if let Some(cost) = entry.estimated_cost_usd.as_mut() {
+                    *cost += row.get::<f64, _>("estimated_cost_usd");
+                }
+            }
+        }
+    }
+
+    let cost_status = if has_unknown {
+        "unknown"
+    } else if has_estimated {
+        "estimated"
+    } else {
+        "included"
+    };
+
+    let mut by_model: Vec<UsageByModel> = all_by_model.into_values().collect();
+    by_model.sort_by(|a, b| b.request_count.cmp(&a.request_count));
+
+    let mut by_day: Vec<UsageByDay> = all_by_day.into_values().collect();
+    by_day.sort_by(|a, b| a.date.cmp(&b.date));
+
+    Ok(Json(UsageResponse {
+        total: UsageTotals {
+            input_tokens: total_input,
+            output_tokens: total_output,
+            cache_read_tokens: total_cache_read,
+            cache_write_tokens: total_cache_write,
+            reasoning_tokens: total_reasoning,
+            request_count: total_requests,
+            estimated_cost_usd: if cost_status == "unknown" {
+                None
+            } else {
+                Some(total_cost)
+            },
+            cost_status: cost_status.to_string(),
+        },
+        by_model,
+        by_day,
+        by_agent: all_by_agent,
+    }))
+}
+
+/// Aggregated token usage for a single conversation.
+#[utoipa::path(
+    get,
+    path = "/usage/conversation/{conversation_id}",
+    params(
+        ("conversation_id" = String, Path, description = "Conversation ID"),
+        ConversationUsageQuery,
+    ),
+    responses(
+        (status = 200, body = UsageTotals),
+        (status = 500, description = "Internal server error"),
+    ),
+    tag = "usage",
+)]
+pub(super) async fn get_conversation_usage(
+    State(state): State<Arc<ApiState>>,
+    Path(conversation_id): Path<String>,
+    Query(query): Query<ConversationUsageQuery>,
+) -> Result<Json<UsageTotals>, StatusCode> {
+    let pools = state.agent_pools.load();
+
+    let target_pools: Vec<&sqlx::SqlitePool> = if let Some(ref agent_id) = query.agent_id {
+        pools.get(agent_id.as_str()).into_iter().collect()
+    } else {
+        pools.values().collect()
+    };
+
+    let mut total_input: i64 = 0;
+    let mut total_output: i64 = 0;
+    let mut total_cache_read: i64 = 0;
+    let mut total_cache_write: i64 = 0;
+    let mut total_reasoning: i64 = 0;
+    let mut total_requests: i64 = 0;
+    let mut total_cost: f64 = 0.0;
+    let mut has_unknown = false;
+    let mut has_estimated = false;
+
+    for pool in &target_pools {
+        let row = sqlx::query(
+            "SELECT COALESCE(SUM(input_tokens), 0) as input_tokens, \
+             COALESCE(SUM(output_tokens), 0) as output_tokens, \
+             COALESCE(SUM(cache_read_tokens), 0) as cache_read_tokens, \
+             COALESCE(SUM(cache_write_tokens), 0) as cache_write_tokens, \
+             COALESCE(SUM(reasoning_tokens), 0) as reasoning_tokens, \
+             COALESCE(SUM(request_count), 0) as request_count, \
+             COALESCE(SUM(estimated_cost_usd), 0.0) as estimated_cost_usd \
+             FROM token_usage WHERE conversation_id = ?",
+        )
+        .bind(&conversation_id)
+        .fetch_one(*pool)
+        .await
+        .map_err(|error| {
+            tracing::warn!(%error, "failed to query conversation usage");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?;
+
+        total_input += row.get::<i64, _>("input_tokens");
+        total_output += row.get::<i64, _>("output_tokens");
+        total_cache_read += row.get::<i64, _>("cache_read_tokens");
+        total_cache_write += row.get::<i64, _>("cache_write_tokens");
+        total_reasoning += row.get::<i64, _>("reasoning_tokens");
+        total_requests += row.get::<i64, _>("request_count");
+        total_cost += row.get::<f64, _>("estimated_cost_usd");
+
+        let status_rows = sqlx::query(
+            "SELECT DISTINCT cost_status FROM token_usage WHERE conversation_id = ?",
+        )
+        .bind(&conversation_id)
+        .fetch_all(*pool)
+        .await
+        .map_err(|error| {
+            tracing::error!(%error, %conversation_id, "failed to query conversation cost status");
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?;
+
+        let status = aggregate_cost_status(&status_rows);
+        if status == "unknown" {
+            has_unknown = true;
+        } else if status == "estimated" {
+            has_estimated = true;
+        }
+    }
+
+    let cost_status = if has_unknown {
+        "unknown"
+    } else if has_estimated {
+        "estimated"
+    } else {
+        "included"
+    };
+
+    Ok(Json(UsageTotals {
+        input_tokens: total_input,
+        output_tokens: total_output,
+        cache_read_tokens: total_cache_read,
+        cache_write_tokens: total_cache_write,
+        reasoning_tokens: total_reasoning,
+        request_count: total_requests,
+        estimated_cost_usd: if cost_status == "unknown" {
+            None
+        } else {
+            Some(total_cost)
+        },
+        cost_status: cost_status.to_string(),
+    }))
+}
diff --git a/src/api/wiki.rs b/src/api/wiki.rs
new file mode 100644
index 000000000..841cda7b6
--- /dev/null
+++ b/src/api/wiki.rs
@@ -0,0 +1,384 @@
+use super::state::ApiState;
+use crate::error::{Error as CrateError, WikiError};
+use crate::wiki::{CreateWikiPageInput, EditWikiPageInput, WikiPageType, WikiStore};
+use axum::Json;
+use axum::extract::{Path, Query, State};
+use axum::http::StatusCode;
+use serde::{Deserialize, Serialize};
+use std::sync::Arc;
+
+/// Map a crate-level wiki error to an HTTP status.
+fn wiki_error_status(error: CrateError) -> StatusCode {
+    match error {
+        CrateError::Wiki(wiki) => match *wiki {
+            WikiError::NotFound { .. } | WikiError::VersionNotFound { .. } => StatusCode::NOT_FOUND,
+            WikiError::EditFailed(_) => StatusCode::BAD_REQUEST,
+            WikiError::Database(inner) => {
+                tracing::error!(%inner, "wiki database error");
+                StatusCode::INTERNAL_SERVER_ERROR
+            }
+            WikiError::Other(inner) => {
+                tracing::error!(%inner, "wiki store error");
+                StatusCode::INTERNAL_SERVER_ERROR
+            }
+        },
+        other => {
+            tracing::error!(error = %other, "wiki handler error");
+            StatusCode::INTERNAL_SERVER_ERROR
+        }
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Request / response types
+// ---------------------------------------------------------------------------
+
+#[derive(Deserialize, utoipa::ToSchema, utoipa::IntoParams)]
+pub(super) struct WikiListQuery {
+    #[serde(default)]
+    page_type: Option<String>,
+}
+
+#[derive(Deserialize, utoipa::ToSchema, utoipa::IntoParams)]
+pub(super) struct WikiSearchQuery {
+    query: String,
+    #[serde(default)]
+    page_type: Option<String>,
+}
+
+#[derive(Deserialize, utoipa::ToSchema, utoipa::IntoParams)]
+pub(super) struct WikiHistoryQuery {
+    #[serde(default = "default_history_limit")]
+    limit: i64,
+}
+
+fn default_history_limit() -> i64 {
+    20
+}
+
+#[derive(Deserialize, utoipa::ToSchema, utoipa::IntoParams)]
+pub(super) struct WikiVersionQuery {
+    #[serde(default)]
+    version: Option<i64>,
+}
+
+#[derive(Deserialize, utoipa::ToSchema)]
+pub(super) struct CreatePageRequest {
+    title: String,
+    page_type: String,
+    #[serde(default)]
+    content: String,
+    #[serde(default)]
+    related: Vec<String>,
+    #[serde(default)]
+    edit_summary: Option<String>,
+    /// Who is creating this page: agent_id or user identifier.
+    #[serde(default = "default_author")]
+    author_id: String,
+    #[serde(default = "default_author_type")]
+    author_type: String,
+}
+
+#[derive(Deserialize, utoipa::ToSchema)]
+pub(super) struct EditPageRequest {
+    old_string: String,
+    new_string: String,
+    #[serde(default)]
+    replace_all: bool,
+    #[serde(default)]
+    edit_summary: Option<String>,
+    #[serde(default = "default_author")]
+    author_id: String,
+    #[serde(default = "default_author_type")]
+    author_type: String,
+}
+
+#[derive(Deserialize, utoipa::ToSchema)]
+pub(super) struct RestoreVersionRequest {
+    version: i64,
+    #[serde(default = "default_author")]
+    author_id: String,
+    #[serde(default = "default_author_type")]
+    author_type: String,
+}
+
+fn default_author() -> String {
+    "user".to_string()
+}
+
+fn default_author_type() -> String {
+    "user".to_string()
+}
+
+#[derive(Serialize, utoipa::ToSchema)]
+pub(super) struct WikiListResponse {
+    pages: Vec<crate::wiki::WikiPageSummary>,
+    total: usize,
+}
+
+#[derive(Serialize, utoipa::ToSchema)]
+pub(super) struct WikiPageResponse {
+    page: crate::wiki::WikiPage,
+}
+
+#[derive(Serialize, utoipa::ToSchema)]
+pub(super) struct WikiHistoryResponse {
+    versions: Vec<crate::wiki::WikiPageVersion>,
+}
+
+#[derive(Serialize, utoipa::ToSchema)]
+pub(super) struct WikiActionResponse {
+    success: bool,
+    message: String,
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+fn get_wiki_store(state: &ApiState) -> Result<Arc<WikiStore>, StatusCode> {
+    state
+        .wiki_store
+        .load()
+        .as_ref()
+        .clone()
+        .ok_or(StatusCode::SERVICE_UNAVAILABLE)
+}
+
+fn parse_page_type(s: Option<&str>) -> Result<Option<WikiPageType>, StatusCode> {
+    match s {
+        None => Ok(None),
+        Some(v) => Ok(Some(WikiPageType::parse(v).ok_or(StatusCode::BAD_REQUEST)?)),
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Handlers
+// ---------------------------------------------------------------------------
+
+/// GET /wiki — list all wiki pages
+#[utoipa::path(
+    get,
+    path = "/wiki",
+    params(WikiListQuery),
+    responses(
+        (status = 200, body = WikiListResponse),
+        (status = 503, description = "Wiki store not initialized"),
+    ),
+    tag = "wiki",
+)]
+pub(super) async fn list_pages(
+    State(state): State<Arc<ApiState>>,
+    Query(query): Query<WikiListQuery>,
+) -> Result<Json<WikiListResponse>, StatusCode> {
+    let store = get_wiki_store(&state)?;
+    let page_type = parse_page_type(query.page_type.as_deref())?;
+    let pages = store.list(page_type).await.map_err(wiki_error_status)?;
+    let total = pages.len();
+    Ok(Json(WikiListResponse { pages, total }))
+}
+
+/// GET /wiki/search — search wiki pages
+#[utoipa::path(
+    get,
+    path = "/wiki/search",
+    params(WikiSearchQuery),
+    responses(
+        (status = 200, body = WikiListResponse),
+        (status = 503, description = "Wiki store not initialized"),
+    ),
+    tag = "wiki",
+)]
+pub(super) async fn search_pages(
+    State(state): State<Arc<ApiState>>,
+    Query(query): Query<WikiSearchQuery>,
+) -> Result<Json<WikiListResponse>, StatusCode> {
+    let store = get_wiki_store(&state)?;
+    let page_type = parse_page_type(query.page_type.as_deref())?;
+    let pages = store
+        .search(&query.query, page_type)
+        .await
+        .map_err(wiki_error_status)?;
+    let total = pages.len();
+    Ok(Json(WikiListResponse { pages, total }))
+}
+
+/// POST /wiki — create a new wiki page
+#[utoipa::path(
+    post,
+    path = "/wiki",
+    request_body = CreatePageRequest,
+    responses(
+        (status = 200, body = WikiPageResponse),
+        (status = 400, description = "Invalid page_type"),
+        (status = 503, description = "Wiki store not initialized"),
+    ),
+    tag = "wiki",
+)]
+pub(super) async fn create_page(
+    State(state): State<Arc<ApiState>>,
+    Json(request): Json<CreatePageRequest>,
+) -> Result<Json<WikiPageResponse>, StatusCode> {
+    let store = get_wiki_store(&state)?;
+    let page_type = WikiPageType::parse(&request.page_type).ok_or(StatusCode::BAD_REQUEST)?;
+
+    let page = store
+        .create(CreateWikiPageInput {
+            title: request.title,
+            page_type,
+            content: request.content,
+            related: request.related,
+            author_type: request.author_type,
+            author_id: request.author_id,
+            edit_summary: request.edit_summary,
+        })
+        .await
+        .map_err(wiki_error_status)?;
+
+    Ok(Json(WikiPageResponse { page }))
+}
+
+/// GET /wiki/:slug — read a wiki page
+#[utoipa::path(
+    get,
+    path = "/wiki/{slug}",
+    params(
+        ("slug" = String, Path, description = "Page slug"),
+        WikiVersionQuery,
+    ),
+    responses(
+        (status = 200, body = WikiPageResponse),
+        (status = 404, description = "Page not found"),
+        (status = 503, description = "Wiki store not initialized"),
+    ),
+    tag = "wiki",
+)]
+pub(super) async fn get_page(
+    State(state): State<Arc<ApiState>>,
+    Path(slug): Path<String>,
+    Query(query): Query<WikiVersionQuery>,
+) -> Result<Json<WikiPageResponse>, StatusCode> {
+    let store = get_wiki_store(&state)?;
+    let page = store
+        .read(&slug, query.version)
+        .await
+        .map_err(wiki_error_status)?
+        .ok_or(StatusCode::NOT_FOUND)?;
+    Ok(Json(WikiPageResponse { page }))
+}
+
+/// POST /wiki/:slug/edit — apply a partial edit
+#[utoipa::path(
+    post,
+    path = "/wiki/{slug}/edit",
+    params(("slug" = String, Path, description = "Page slug")),
+    request_body = EditPageRequest,
+    responses(
+        (status = 200, body = WikiPageResponse),
+        (status = 400, description = "Edit match failed"),
+        (status = 404, description = "Page not found"),
+        (status = 503, description = "Wiki store not initialized"),
+    ),
+    tag = "wiki",
+)]
+pub(super) async fn edit_page(
+    State(state): State<Arc<ApiState>>,
+    Path(slug): Path<String>,
+    Json(request): Json<EditPageRequest>,
+) -> Result<Json<WikiPageResponse>, StatusCode> {
+    let store = get_wiki_store(&state)?;
+    let page = store
+        .edit(EditWikiPageInput {
+            slug,
+            old_string: request.old_string,
+            new_string: request.new_string,
+            replace_all: request.replace_all,
+            edit_summary: request.edit_summary,
+            author_type: request.author_type,
+            author_id: request.author_id,
+        })
+        .await
+        .map_err(wiki_error_status)?;
+    Ok(Json(WikiPageResponse { page }))
+}
+
+/// GET /wiki/:slug/history — list version history
+#[utoipa::path(
+    get,
+    path = "/wiki/{slug}/history",
+    params(
+        ("slug" = String, Path, description = "Page slug"),
+        WikiHistoryQuery,
+    ),
+    responses(
+        (status = 200, body = WikiHistoryResponse),
+        (status = 503, description = "Wiki store not initialized"),
+    ),
+    tag = "wiki",
+)]
+pub(super) async fn get_history(
+    State(state): State<Arc<ApiState>>,
+    Path(slug): Path<String>,
+    Query(query): Query<WikiHistoryQuery>,
+) -> Result<Json<WikiHistoryResponse>, StatusCode> {
+    let store = get_wiki_store(&state)?;
+    let versions = store
+        .history(&slug, query.limit)
+        .await
+        .map_err(wiki_error_status)?;
+    Ok(Json(WikiHistoryResponse { versions }))
+}
+
+/// POST /wiki/:slug/restore — restore to a historical version
+#[utoipa::path(
+    post,
+    path = "/wiki/{slug}/restore",
+    params(("slug" = String, Path, description = "Page slug")),
+    request_body = RestoreVersionRequest,
+    responses(
+        (status = 200, body = WikiPageResponse),
+        (status = 404, description = "Page or version not found"),
+        (status = 503, description = "Wiki store not initialized"),
+    ),
+    tag = "wiki",
+)]
+pub(super) async fn restore_version(
+    State(state): State<Arc<ApiState>>,
+    Path(slug): Path<String>,
+    Json(request): Json<RestoreVersionRequest>,
+) -> Result<Json<WikiPageResponse>, StatusCode> {
+    let store = get_wiki_store(&state)?;
+    let page = store
+        .restore(
+            &slug,
+            request.version,
+            &request.author_type,
+            &request.author_id,
+        )
+        .await
+        .map_err(wiki_error_status)?;
+    Ok(Json(WikiPageResponse { page }))
+}
+
+/// DELETE /wiki/:slug — archive a page
+#[utoipa::path(
+    delete,
+    path = "/wiki/{slug}",
+    params(("slug" = String, Path, description = "Page slug")),
+    responses(
+        (status = 200, body = WikiActionResponse),
+        (status = 503, description = "Wiki store not initialized"),
+    ),
+    tag = "wiki",
+)]
+pub(super) async fn archive_page(
+    State(state): State<Arc<ApiState>>,
+    Path(slug): Path<String>,
+) -> Result<Json<WikiActionResponse>, StatusCode> {
+    let store = get_wiki_store(&state)?;
+    store.archive(&slug).await.map_err(wiki_error_status)?;
+    Ok(Json(WikiActionResponse {
+        success: true,
+        message: format!("Page '{slug}' archived"),
+    }))
+}
diff --git a/src/api/workers.rs b/src/api/workers.rs
index 20c531004..9ca0dc0ff 100644
--- a/src/api/workers.rs
+++ b/src/api/workers.rs
@@ -124,6 +124,28 @@ pub(super) async fn list_workers(
             StatusCode::INTERNAL_SERVER_ERROR
         })?;
 
+    // Resolve project names from the global ProjectStore (projects live in the
+    // instance DB, not in per-agent DBs, so history.rs can't JOIN them in SQL).
+    let project_names: std::collections::HashMap<String, String> = {
+        let mut names = std::collections::HashMap::new();
+        let mut seen = std::collections::HashSet::new();
+        let store_guard = state.project_store.load();
+        if let Some(store) = store_guard.as_ref() {
+            for row in &rows {
+                let Some(project_id) = row.project_id.as_deref() else {
+                    continue;
+                };
+                if !seen.insert(project_id.to_string()) {
+                    continue;
+                }
+                if let Ok(Some(project)) = store.get_project(project_id).await {
+                    names.insert(project_id.to_string(), project.name);
+                }
+            }
+        }
+        names
+    };
+
     // Build a live status lookup from all channel StatusBlocks
     let live_statuses = {
         let blocks = state.channel_status_blocks.read().await;
@@ -171,8 +193,11 @@ pub(super) async fn list_workers(
                 opencode_session_id: row.opencode_session_id,
                 directory: row.directory,
                 interactive: row.interactive,
+                project_name: row
+                    .project_id
+                    .as_deref()
+                    .and_then(|id| project_names.get(id).cloned()),
                 project_id: row.project_id,
-                project_name: row.project_name,
             }
         })
         .collect();
diff --git a/src/config/load.rs b/src/config/load.rs
index 1e6997515..e7779f54d 100644
--- a/src/config/load.rs
+++ b/src/config/load.rs
@@ -137,7 +137,9 @@ fn parse_response_mode(
     // Backwards compat: listen_only_mode maps to response_mode
     match listen_only_mode {
         Some(true) => {
-            tracing::warn!("listen_only_mode is deprecated, use response_mode = \"observe\" instead");
+            tracing::warn!(
+                "listen_only_mode is deprecated, use response_mode = \"observe\" instead"
+            );
             Some(ResponseMode::Observe)
         }
         Some(false) => Some(ResponseMode::Active),
diff --git a/src/config/types.rs b/src/config/types.rs
index 1cbd07501..74d11b1d1 100644
--- a/src/config/types.rs
+++ b/src/config/types.rs
@@ -940,7 +940,7 @@ impl Default for BrowserConfig {
 }
 
 /// Channel behavior configuration.
-#[derive(Debug, Clone, Copy, Default)]
+#[derive(Debug, Clone, Copy)]
 pub struct ChannelConfig {
     /// Deprecated: use `response_mode` instead. Kept for backwards compatibility.
     pub listen_only_mode: bool,
@@ -952,6 +952,16 @@ pub struct ChannelConfig {
     pub save_attachments: bool,
 }
 
+impl Default for ChannelConfig {
+    fn default() -> Self {
+        Self {
+            listen_only_mode: false,
+            response_mode: None,
+            save_attachments: true,
+        }
+    }
+}
+
 /// OpenCode subprocess worker configuration.
 #[derive(Debug, Clone, PartialEq, Eq)]
 pub struct OpenCodeConfig {
@@ -1027,7 +1037,7 @@ impl Default for CortexConfig {
         Self {
             tick_interval_secs: 30,
             worker_timeout_secs: 600,
-            branch_timeout_secs: 60,
+            branch_timeout_secs: 600,
             detached_worker_timeout_retry_limit: 2,
             supervisor_kill_budget_per_tick: 8,
             circuit_breaker_threshold: 3,
diff --git a/src/conversation/history.rs b/src/conversation/history.rs
index cf42e188c..f0f29b0e0 100644
--- a/src/conversation/history.rs
+++ b/src/conversation/history.rs
@@ -107,6 +107,17 @@ impl ConversationLogger {
         channel_id: &ChannelId,
         content: &str,
         sender_name: Option<&str>,
+    ) {
+        self.log_bot_message_with_metadata(channel_id, content, sender_name, None);
+    }
+
+    /// Log a bot message with optional tool calls packed into metadata. Fire-and-forget.
+    pub fn log_bot_message_with_metadata(
+        &self,
+        channel_id: &ChannelId,
+        content: &str,
+        sender_name: Option<&str>,
+        tool_calls_json: Option<String>,
     ) {
         let pool = self.pool.clone();
         let id = uuid::Uuid::new_v4().to_string();
@@ -114,15 +125,19 @@ impl ConversationLogger {
         let content = content.to_string();
         let sender_name = sender_name.map(String::from);
 
+        // Pack tool_calls into the metadata JSON if present.
+        let metadata_json = tool_calls_json.map(|tc| format!(r#"{{"tool_calls":{tc}}}"#));
+
         tokio::spawn(async move {
             if let Err(error) = sqlx::query(
-                "INSERT INTO conversation_messages (id, channel_id, role, sender_name, content) \
-                 VALUES (?, ?, 'assistant', ?, ?)",
+                "INSERT INTO conversation_messages (id, channel_id, role, sender_name, content, metadata) \
+                 VALUES (?, ?, 'assistant', ?, ?, ?)",
             )
             .bind(&id)
             .bind(&channel_id)
             .bind(&sender_name)
             .bind(&content)
+            .bind(&metadata_json)
             .execute(&pool)
             .await
             {
@@ -254,6 +269,8 @@ pub enum TimelineItem {
         sender_id: Option<String>,
         content: String,
         created_at: String,
+        #[serde(default, skip_serializing_if = "Vec::is_empty")]
+        attachments: Vec<crate::agent::channel_attachments::SavedAttachmentMeta>,
     },
     BranchRun {
         id: String,
@@ -270,6 +287,15 @@ pub enum TimelineItem {
         started_at: String,
         completed_at: Option<String>,
     },
+    ToolCallRun {
+        id: String,
+        tool_name: String,
+        args: String,
+        result: Option<String>,
+        status: String,
+        started_at: String,
+        completed_at: Option<String>,
+    },
 }
 
 /// Persists branch and worker run records for channel timeline history.
@@ -738,17 +764,17 @@ impl ProcessRunLogger {
 
         let query_str = format!(
             "SELECT * FROM ( \
-                SELECT 'message' AS item_type, id, role, sender_name, sender_id, content, \
+                SELECT 'message' AS item_type, id, role, sender_name, sender_id, content, metadata, \
                        NULL AS description, NULL AS conclusion, NULL AS task, NULL AS result, NULL AS status, \
                        created_at AS timestamp, NULL AS completed_at \
                 FROM conversation_messages WHERE channel_id = ?1 \
                 UNION ALL \
-                SELECT 'branch_run' AS item_type, id, NULL, NULL, NULL, NULL, \
+                SELECT 'branch_run' AS item_type, id, NULL, NULL, NULL, NULL, NULL AS metadata, \
                        description, conclusion, NULL, NULL, NULL, \
                        started_at AS timestamp, completed_at \
                 FROM branch_runs WHERE channel_id = ?1 \
                 UNION ALL \
-                SELECT 'worker_run' AS item_type, id, NULL, NULL, NULL, NULL, \
+                SELECT 'worker_run' AS item_type, id, NULL, NULL, NULL, NULL, NULL AS metadata, \
                        NULL, NULL, task, result, status, \
                        started_at AS timestamp, completed_at \
                 FROM worker_runs WHERE channel_id = ?1 \
@@ -768,21 +794,67 @@ impl ProcessRunLogger {
 
         let mut items: Vec<TimelineItem> = rows
             .into_iter()
-            .filter_map(|row| {
+            .filter_map(|row| -> Option<Vec<TimelineItem>> {
                 let item_type: String = row.try_get("item_type").ok()?;
                 match item_type.as_str() {
-                    "message" => Some(TimelineItem::Message {
-                        id: row.try_get("id").unwrap_or_default(),
-                        role: row.try_get("role").unwrap_or_default(),
-                        sender_name: row.try_get("sender_name").ok(),
-                        sender_id: row.try_get("sender_id").ok(),
-                        content: row.try_get("content").unwrap_or_default(),
-                        created_at: row
-                            .try_get::<chrono::DateTime<chrono::Utc>, _>("timestamp")
-                            .map(|t| t.to_rfc3339())
-                            .unwrap_or_default(),
-                    }),
-                    "branch_run" => Some(TimelineItem::BranchRun {
+                    "message" => {
+                        let metadata_json: Option<String> = row.try_get("metadata").ok().flatten();
+                        let metadata_value = metadata_json
+                            .as_deref()
+                            .and_then(|json| serde_json::from_str::<serde_json::Value>(json).ok());
+                        let attachments = metadata_value
+                            .as_ref()
+                            .and_then(|v| v.get("attachments").cloned())
+                            .and_then(|a| {
+                                serde_json::from_value::<
+                                    Vec<crate::agent::channel_attachments::SavedAttachmentMeta>,
+                                >(a)
+                                .ok()
+                            })
+                            .unwrap_or_default();
+
+                        // Expand tool calls stored in message metadata into ToolCallRun items.
+                        let tool_call_items: Vec<TimelineItem> = metadata_value
+                            .as_ref()
+                            .and_then(|v| v.get("tool_calls"))
+                            .and_then(|tc| {
+                                serde_json::from_value::<Vec<crate::api::ChannelToolCallEntry>>(
+                                    tc.clone(),
+                                )
+                                .ok()
+                            })
+                            .unwrap_or_default()
+                            .into_iter()
+                            .map(|tc| TimelineItem::ToolCallRun {
+                                id: tc.id,
+                                tool_name: tc.tool_name,
+                                args: tc.args,
+                                result: tc.result,
+                                status: tc.status,
+                                started_at: tc.started_at,
+                                completed_at: tc.completed_at,
+                            })
+                            .collect();
+
+                        let message = TimelineItem::Message {
+                            id: row.try_get("id").unwrap_or_default(),
+                            role: row.try_get("role").unwrap_or_default(),
+                            sender_name: row.try_get("sender_name").ok().flatten(),
+                            sender_id: row.try_get("sender_id").ok().flatten(),
+                            content: row.try_get("content").unwrap_or_default(),
+                            created_at: row
+                                .try_get::<chrono::DateTime<chrono::Utc>, _>("timestamp")
+                                .map(|t| t.to_rfc3339())
+                                .unwrap_or_default(),
+                            attachments,
+                        };
+
+                        // Tool calls come before the message they belong to.
+                        let mut result = tool_call_items;
+                        result.push(message);
+                        Some(result)
+                    }
+                    "branch_run" => Some(vec![TimelineItem::BranchRun {
                         id: row.try_get("id").unwrap_or_default(),
                         description: row.try_get("description").unwrap_or_default(),
                         conclusion: row.try_get("conclusion").ok(),
@@ -794,8 +866,8 @@ impl ProcessRunLogger {
                             .try_get::<chrono::DateTime<chrono::Utc>, _>("completed_at")
                             .ok()
                             .map(|t| t.to_rfc3339()),
-                    }),
-                    "worker_run" => Some(TimelineItem::WorkerRun {
+                    }]),
+                    "worker_run" => Some(vec![TimelineItem::WorkerRun {
                         id: row.try_get("id").unwrap_or_default(),
                         task: row.try_get("task").unwrap_or_default(),
                         result: row.try_get("result").ok(),
@@ -808,10 +880,11 @@ impl ProcessRunLogger {
                             .try_get::<chrono::DateTime<chrono::Utc>, _>("completed_at")
                             .ok()
                             .map(|t| t.to_rfc3339()),
-                    }),
+                    }]),
                     _ => None,
                 }
             })
+            .flatten()
             .collect();
 
         // Reverse to chronological order
@@ -841,16 +914,19 @@ impl ProcessRunLogger {
 
         let count_query =
             format!("SELECT COUNT(*) as total FROM worker_runs w {count_where_clause}");
+        // NOTE: The `projects` table lives in the global instance DB (spacebot.db),
+        // not in the per-agent DB, as of migration 20260404120000. Worker rows keep
+        // their `project_id` column locally, but project names must be resolved by
+        // the caller via the global `ProjectStore`.
         let list_query = format!(
             "SELECT w.id, w.task, w.status, w.worker_type, w.channel_id, w.started_at, \
                     w.completed_at, w.transcript IS NOT NULL as has_transcript, \
                     w.tool_calls, w.opencode_port, w.opencode_session_id, w.directory, \
                     w.interactive, \
                     c.display_name as channel_name, \
-                    w.project_id, p.name as project_name \
+                    w.project_id \
              FROM worker_runs w \
              LEFT JOIN channels c ON w.channel_id = c.id \
-             LEFT JOIN projects p ON w.project_id = p.id \
              {list_where_clause} \
              ORDER BY w.started_at DESC \
              LIMIT ?2 OFFSET ?3"
@@ -905,7 +981,8 @@ impl ProcessRunLogger {
                 directory: row.try_get("directory").ok().flatten(),
                 interactive: row.try_get::<bool, _>("interactive").unwrap_or(false),
                 project_id: row.try_get("project_id").ok().flatten(),
-                project_name: row.try_get("project_name").ok().flatten(),
+                // Resolved by caller via the global `ProjectStore` — see module note.
+                project_name: None,
             })
             .collect();
 
diff --git a/src/conversation/settings.rs b/src/conversation/settings.rs
index a2d8b8615..ca15c78df 100644
--- a/src/conversation/settings.rs
+++ b/src/conversation/settings.rs
@@ -5,6 +5,10 @@
 
 use serde::{Deserialize, Serialize};
 
+fn default_true() -> bool {
+    true
+}
+
 /// Memory mode controls how memory is used in a conversation.
 #[derive(Debug, Clone, Copy, Default, PartialEq, Eq, Serialize, Deserialize, utoipa::ToSchema)]
 #[serde(rename_all = "snake_case")]
@@ -141,6 +145,10 @@ pub struct WorkerContextMode {
     pub history: WorkerHistoryMode,
     /// What memory context the worker gets.
     pub memory: WorkerMemoryMode,
+    /// Whether the worker gets wiki tools (wiki_create, wiki_edit, wiki_read, wiki_list,
+    /// wiki_search, wiki_history). Defaults to true so all workers can access the wiki.
+    #[serde(default = "default_true")]
+    pub wiki_write: bool,
 }
 
 /// Per-process model overrides. Each field, when set, overrides the
@@ -331,7 +339,7 @@ impl Default for ResolvedConversationSettings {
             memory: MemoryMode::Full,
             delegation: DelegationMode::Standard,
             response_mode: ResponseMode::Active,
-            save_attachments: false,
+            save_attachments: true,
             worker_context: WorkerContextMode::default(),
         }
     }
@@ -427,6 +435,7 @@ mod tests {
             worker_context: WorkerContextMode {
                 history: WorkerHistoryMode::Recent(20),
                 memory: WorkerMemoryMode::Tools,
+                wiki_write: false,
             },
             ..Default::default()
         };
diff --git a/src/cron.rs b/src/cron.rs
index e926af5af..619e49472 100644
--- a/src/cron.rs
+++ b/src/cron.rs
@@ -3,5 +3,5 @@
 pub mod scheduler;
 pub mod store;
 
-pub use scheduler::{CronConfig, CronContext, Scheduler};
+pub use scheduler::{CronConfig, CronContext, CronOutcome, Scheduler};
 pub use store::{CronExecutionEntry, CronExecutionStats, CronStore};
diff --git a/src/cron/scheduler.rs b/src/cron/scheduler.rs
index 0567bb106..cd4dfb12d 100644
--- a/src/cron/scheduler.rs
+++ b/src/cron/scheduler.rs
@@ -16,8 +16,8 @@ use chrono_tz::Tz;
 use cron::Schedule;
 use std::collections::HashMap;
 use std::str::FromStr;
-use std::sync::Arc;
-use tokio::sync::{RwLock, mpsc};
+use std::sync::{Arc, Mutex};
+use tokio::sync::RwLock;
 use tokio::time::Duration;
 
 /// A cron job definition loaded from the database.
@@ -39,6 +39,51 @@ pub struct CronJob {
     pub timeout_secs: Option<u64>,
 }
 
+/// Reply buffer for cron job outcome delivery.
+///
+/// When a cron job has a delivery target, replies are accumulated in this buffer
+/// during execution and flushed as a single consolidated message on completion.
+/// This prevents "spam" delivery where multiple messages are sent progressively.
+/// Stores the final delivery outcome for a cron job.
+///
+/// Written by the `SetOutcomeTool` during execution, read by the scheduler
+/// after the channel exits. This replaces the old `CronReplyBuffer` approach:
+/// the cron channel is now a normal channel where `reply()` posts visibly,
+/// and only an explicit `set_outcome()` call determines what gets delivered.
+#[derive(Debug, Clone)]
+pub struct CronOutcome {
+    content: Arc<Mutex<Option<String>>>,
+}
+
+impl CronOutcome {
+    pub fn new() -> Self {
+        Self {
+            content: Arc::new(Mutex::new(None)),
+        }
+    }
+
+    /// Store the outcome content. Overwrites any previous value.
+    pub fn set(&self, content: String) {
+        *self.content.lock().unwrap() = Some(content);
+    }
+
+    /// Take the outcome, leaving None.
+    pub fn take(&self) -> Option<String> {
+        self.content.lock().unwrap().take()
+    }
+
+    /// Check if an outcome has been set.
+    pub fn is_some(&self) -> bool {
+        self.content.lock().unwrap().is_some()
+    }
+}
+
+impl Default for CronOutcome {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
 /// Serializable cron job config (for storage and TOML parsing).
 #[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 pub struct CronConfig {
@@ -1270,11 +1315,13 @@ async fn run_cron_job(
     let channel_id: crate::ChannelId = Arc::from(format!("cron:{}", job.id).as_str());
 
     // Create the outbound response channel to collect whatever the channel produces
-    let (response_tx, mut response_rx) = tokio::sync::mpsc::channel::<RoutedResponse>(32);
+    let (response_tx, _response_rx) = tokio::sync::mpsc::channel::<RoutedResponse>(32);
 
     // Subscribe to the agent's event bus (the channel needs this for branch/worker events)
     let event_rx = context.deps.event_tx.subscribe();
 
+    let cron_outcome = CronOutcome::new();
+
     let (channel, channel_tx) = Channel::new(
         channel_id.clone(),
         context.deps.clone(),
@@ -1285,10 +1332,15 @@ async fn run_cron_job(
         None, // cron channels don't capture prompt snapshots
         None, // cron channels don't share live transcript cache
         crate::conversation::settings::ResolvedConversationSettings::default(),
+        Some(cron_outcome.clone()),
     );
 
+    // Hold a control handle so we can cancel outstanding workers on timeout,
+    // giving the LLM a chance to synthesize partial results before we give up.
+    let _control_handle = channel.control_handle();
+
     // Spawn the channel's event loop
-    let channel_handle = tokio::spawn(async move { channel.run().await });
+    let mut channel_handle = tokio::spawn(async move { channel.run().await });
 
     // Send the cron job prompt as a synthetic message
     // Derive source from the delivery target's adapter so adapter_selector() can extract
@@ -1332,96 +1384,33 @@ async fn run_cron_job(
         ));
     }
 
-    let timeout = Duration::from_secs(job.timeout_secs.unwrap_or(120));
-
-    // Drop the sender so the cron channel behaves as a one-shot conversation.
-    drop(channel_tx);
+    let timeout = Duration::from_secs(job.timeout_secs.unwrap_or(1500));
 
-    let delivery_response = match await_cron_delivery_response(&job.id, &mut response_rx, timeout)
-        .await
-    {
-        CronResponseWaitOutcome::Delivered(response) => {
-            if !channel_handle.is_finished() {
-                channel_handle.abort();
-            }
+    // Keep channel_tx alive — on timeout we send a "synthesize now" message
+    // so the LLM gets a direct turn to compose the final reply.
 
-            match channel_handle.await {
-                Ok(Ok(())) => {}
-                Ok(Err(error)) => {
-                    tracing::warn!(cron_id = %job.id, %error, "cron channel returned an error after emitting a delivery response");
-                }
-                Err(join_error) if !join_error.is_cancelled() => {
-                    tracing::warn!(cron_id = %job.id, %join_error, "cron channel join failed after emitting a delivery response");
-                }
-                Err(_) => {}
-            }
-
-            Some(response)
+    let timed_out = match tokio::time::timeout(timeout, &mut channel_handle).await {
+        Ok(Ok(Ok(()))) => false,
+        Ok(Ok(Err(error))) => {
+            let error_message = format!("cron channel failed: {error}");
+            persist_cron_execution(
+                context,
+                &job.id,
+                CronExecutionRecord {
+                    execution_succeeded: false,
+                    delivery_attempted: false,
+                    delivery_succeeded: None,
+                    result_summary: None,
+                    execution_error: Some(error_message.clone()),
+                    delivery_error: None,
+                },
+            );
+            return Err(CronRunError::Execution(
+                anyhow::anyhow!(error_message).into(),
+            ));
         }
-        CronResponseWaitOutcome::ChannelClosed => match channel_handle.await {
-            Ok(Ok(())) => None,
-            Ok(Err(error)) => {
-                let error_message = format!("cron channel failed: {error}");
-                persist_cron_execution(
-                    context,
-                    &job.id,
-                    CronExecutionRecord {
-                        execution_succeeded: false,
-                        delivery_attempted: false,
-                        delivery_succeeded: None,
-                        result_summary: None,
-                        execution_error: Some(error_message.clone()),
-                        delivery_error: None,
-                    },
-                );
-                return Err(CronRunError::Execution(
-                    anyhow::anyhow!(error_message).into(),
-                ));
-            }
-            Err(join_error) => {
-                let error_message = format!("cron channel join failed: {join_error}");
-                persist_cron_execution(
-                    context,
-                    &job.id,
-                    CronExecutionRecord {
-                        execution_succeeded: false,
-                        delivery_attempted: false,
-                        delivery_succeeded: None,
-                        result_summary: None,
-                        execution_error: Some(error_message.clone()),
-                        delivery_error: None,
-                    },
-                );
-                return Err(CronRunError::Execution(
-                    anyhow::anyhow!(error_message).into(),
-                ));
-            }
-        },
-        CronResponseWaitOutcome::TimedOut => {
-            if !channel_handle.is_finished() {
-                channel_handle.abort();
-            }
-
-            match channel_handle.await {
-                Ok(Ok(())) => {}
-                Ok(Err(error)) => {
-                    tracing::warn!(
-                        cron_id = %job.id,
-                        %error,
-                        "cron channel returned an error after timing out"
-                    );
-                }
-                Err(join_error) if !join_error.is_cancelled() => {
-                    tracing::warn!(
-                        cron_id = %job.id,
-                        %join_error,
-                        "cron channel join failed after timing out"
-                    );
-                }
-                Err(_) => {}
-            }
-
-            let error_message = format!("cron job timed out after {timeout:?}");
+        Ok(Err(join_error)) => {
+            let error_message = format!("cron channel join failed: {join_error}");
             persist_cron_execution(
                 context,
                 &job.id,
@@ -1434,15 +1423,63 @@ async fn run_cron_job(
                     delivery_error: None,
                 },
             );
-
             return Err(CronRunError::Execution(
                 anyhow::anyhow!(error_message).into(),
             ));
         }
+        Err(_elapsed) => true,
     };
 
+    if timed_out {
+        // Send a direct "wrap up" message so the LLM gets a turn to synthesize
+        // whatever worker results have already landed in context.
+        // This is more reliable than cancelling workers and waiting for retrigger
+        // events, because cancel_worker removes from worker_handles before the
+        // event handler sees the WorkerComplete — the guard clause drops it.
+        tracing::warn!(
+            cron_id = %job.id,
+            "cron job timed out, sending synthesis prompt"
+        );
+        let wrap_up = InboundMessage {
+            id: uuid::Uuid::new_v4().to_string(),
+            source: "system".into(),
+            adapter: Some(job.delivery_target.adapter.clone()),
+            conversation_id: format!("cron:{}", job.id),
+            sender_id: "system".into(),
+            agent_id: Some(context.deps.agent_id.clone()),
+            content: MessageContent::Text(
+                "Time is up. Some workers may not have finished. \
+                 Synthesize your response NOW using whatever results you have. \
+                 Call set_outcome() immediately with the best output you can produce \
+                 from the available data. Do not spawn more workers."
+                    .to_string(),
+            ),
+            timestamp: chrono::Utc::now(),
+            metadata: HashMap::new(),
+            formatted_author: None,
+        };
+        let _ = channel_tx.send(wrap_up).await;
+        // Drop sender so the channel exits after processing this message.
+        drop(channel_tx);
+
+        // Grace period for the LLM to synthesize and call reply().
+        let grace = Duration::from_secs(120);
+        match tokio::time::timeout(grace, &mut channel_handle).await {
+            Ok(_) => {}
+            Err(_) => {
+                channel_handle.abort();
+                let _ = channel_handle.await;
+            }
+        }
+    } else {
+        drop(channel_tx);
+    }
+
+    // Channel has fully exited. Deliver the outcome if set_outcome() was called.
+    let final_response = cron_outcome.take().map(OutboundResponse::Text);
+
     // Deliver result to target (only if there's something to say)
-    if let Some(response) = delivery_response {
+    if let Some(response) = final_response {
         let summary = cron_response_summary(&response);
         if let Err(error) = context
             .messaging_manager
@@ -1549,6 +1586,46 @@ fn record_cron_metrics(agent_id: &str, cron_id: &str, record: &CronExecutionReco
         .inc();
 }
 
+fn cron_response_summary(response: &OutboundResponse) -> Option<String> {
+    match response {
+        OutboundResponse::Text(text) => {
+            let text = text.trim();
+            (!text.is_empty()).then(|| text.to_string())
+        }
+        OutboundResponse::RichMessage { text, cards, .. } => {
+            let text = text.trim();
+            if !text.is_empty() {
+                Some(text.to_string())
+            } else {
+                let derived = OutboundResponse::text_from_cards(cards);
+                let derived = derived.trim();
+                (!derived.is_empty()).then(|| derived.to_string())
+            }
+        }
+        OutboundResponse::ThreadReply { text, .. }
+        | OutboundResponse::Ephemeral { text, .. }
+        | OutboundResponse::ScheduledMessage { text, .. } => {
+            let text = text.trim();
+            (!text.is_empty()).then(|| text.to_string())
+        }
+        OutboundResponse::File {
+            filename, caption, ..
+        } => caption
+            .as_deref()
+            .map(str::trim)
+            .filter(|caption| !caption.is_empty())
+            .map(ToOwned::to_owned)
+            .or_else(|| Some(format!("Attached file: {filename}"))),
+        OutboundResponse::Status(_)
+        | OutboundResponse::Reaction(_)
+        | OutboundResponse::RemoveReaction(_)
+        | OutboundResponse::StreamStart
+        | OutboundResponse::StreamChunk(_)
+        | OutboundResponse::StreamEnd => None,
+    }
+}
+
+#[cfg(test)]
 #[derive(Debug)]
 enum CronResponseWaitOutcome {
     Delivered(OutboundResponse),
@@ -1556,9 +1633,10 @@ enum CronResponseWaitOutcome {
     TimedOut,
 }
 
+#[cfg(test)]
 async fn await_cron_delivery_response(
     cron_id: &str,
-    response_rx: &mut mpsc::Receiver<RoutedResponse>,
+    response_rx: &mut tokio::sync::mpsc::Receiver<RoutedResponse>,
     timeout: Duration,
 ) -> CronResponseWaitOutcome {
     let deadline = tokio::time::Instant::now() + timeout;
@@ -1585,6 +1663,7 @@ async fn await_cron_delivery_response(
     }
 }
 
+#[cfg(test)]
 fn normalize_cron_delivery_response(response: OutboundResponse) -> Option<OutboundResponse> {
     match response {
         OutboundResponse::Text(text) => {
@@ -1648,45 +1727,6 @@ fn normalize_cron_delivery_response(response: OutboundResponse) -> Option<Outbou
     }
 }
 
-fn cron_response_summary(response: &OutboundResponse) -> Option<String> {
-    match response {
-        OutboundResponse::Text(text) => {
-            let text = text.trim();
-            (!text.is_empty()).then(|| text.to_string())
-        }
-        OutboundResponse::RichMessage { text, cards, .. } => {
-            let text = text.trim();
-            if !text.is_empty() {
-                Some(text.to_string())
-            } else {
-                let derived = OutboundResponse::text_from_cards(cards);
-                let derived = derived.trim();
-                (!derived.is_empty()).then(|| derived.to_string())
-            }
-        }
-        OutboundResponse::ThreadReply { text, .. }
-        | OutboundResponse::Ephemeral { text, .. }
-        | OutboundResponse::ScheduledMessage { text, .. } => {
-            let text = text.trim();
-            (!text.is_empty()).then(|| text.to_string())
-        }
-        OutboundResponse::File {
-            filename, caption, ..
-        } => caption
-            .as_deref()
-            .map(str::trim)
-            .filter(|caption| !caption.is_empty())
-            .map(ToOwned::to_owned)
-            .or_else(|| Some(format!("Attached file: {filename}"))),
-        OutboundResponse::Status(_)
-        | OutboundResponse::Reaction(_)
-        | OutboundResponse::RemoveReaction(_)
-        | OutboundResponse::StreamStart
-        | OutboundResponse::StreamChunk(_)
-        | OutboundResponse::StreamEnd => None,
-    }
-}
-
 #[cfg(test)]
 mod tests {
     use super::{
diff --git a/src/db.rs b/src/db.rs
index 3596adc9c..522ae023e 100644
--- a/src/db.rs
+++ b/src/db.rs
@@ -23,8 +23,20 @@ pub struct Db {
 impl Db {
     /// Connect to all databases and run migrations.
     pub async fn connect(data_dir: &Path) -> Result<Self> {
-        // SQLite
-        let sqlite_url = format!("sqlite:{}?mode=rwc", data_dir.join("spacebot.db").display());
+        // SQLite — per-agent agent.db. If an old spacebot.db exists from
+        // before the rename, move it to agent.db.
+        let agent_db = data_dir.join("agent.db");
+        let legacy_db = data_dir.join("spacebot.db");
+        if legacy_db.exists() && !agent_db.exists() {
+            std::fs::rename(&legacy_db, &agent_db).with_context(|| {
+                format!(
+                    "failed to rename legacy per-agent DB {} -> {}",
+                    legacy_db.display(),
+                    agent_db.display()
+                )
+            })?;
+        }
+        let sqlite_url = format!("sqlite:{}?mode=rwc", agent_db.display());
         let sqlite = SqlitePool::connect(&sqlite_url)
             .await
             .with_context(|| "failed to connect to SQLite")?;
@@ -68,21 +80,33 @@ impl Db {
     }
 }
 
-/// Connect to the instance-level global task database and run its migrations.
+/// Connect to the instance-level spacebot database and run its migrations.
 ///
-/// The global task database lives at `{instance_dir}/data/tasks.db` and holds
-/// a single `tasks` table shared across all agents with globally unique task
-/// numbers. This replaces per-agent task tables.
-pub async fn connect_global_tasks(data_dir: &Path) -> Result<SqlitePool> {
+/// The instance database lives at `{instance_dir}/data/spacebot.db` and holds
+/// data shared across all agents: tasks, projects, repos, worktrees. This
+/// replaces per-agent task and project tables.
+///
+/// If an old `tasks.db` exists from before the rename, it is moved to
+/// `spacebot.db` first.
+pub async fn connect_instance_db(data_dir: &Path) -> Result<SqlitePool> {
     std::fs::create_dir_all(data_dir)
         .with_context(|| format!("failed to create data directory: {}", data_dir.display()))?;
 
-    let db_path = data_dir.join("tasks.db");
+    let db_path = data_dir.join("spacebot.db");
+    let legacy_tasks_db = data_dir.join("tasks.db");
+    if legacy_tasks_db.exists() && !db_path.exists() {
+        std::fs::rename(&legacy_tasks_db, &db_path).with_context(|| {
+            format!(
+                "failed to rename legacy tasks.db -> spacebot.db at {}",
+                data_dir.display()
+            )
+        })?;
+    }
     let url = format!("sqlite:{}?mode=rwc", db_path.display());
 
     let pool = SqlitePool::connect(&url).await.with_context(|| {
         format!(
-            "failed to connect to global task database: {}",
+            "failed to connect to instance database: {}",
             db_path.display()
         )
     })?;
@@ -90,7 +114,7 @@ pub async fn connect_global_tasks(data_dir: &Path) -> Result<SqlitePool> {
     sqlx::migrate!("./migrations/global")
         .run(&pool)
         .await
-        .with_context(|| "failed to run global task database migrations")?;
+        .with_context(|| "failed to run instance database migrations")?;
 
     Ok(pool)
 }
diff --git a/src/error.rs b/src/error.rs
index 9ae5b503c..1c0d95a73 100644
--- a/src/error.rs
+++ b/src/error.rs
@@ -29,6 +29,9 @@ pub enum Error {
     #[error(transparent)]
     Settings(Box<SettingsError>),
 
+    #[error(transparent)]
+    Wiki(Box<WikiError>),
+
     #[error("database error: {0}")]
     Sqlx(#[from] sqlx::Error),
 
@@ -74,6 +77,11 @@ impl From<SettingsError> for Error {
         Error::Settings(Box::new(e))
     }
 }
+impl From<WikiError> for Error {
+    fn from(e: WikiError) -> Self {
+        Error::Wiki(Box::new(e))
+    }
+}
 
 /// Configuration loading errors.
 #[derive(Debug, thiserror::Error)]
@@ -245,3 +253,22 @@ pub enum SettingsError {
     #[error("settings error: {0}")]
     Other(String),
 }
+
+/// Wiki storage and edit errors.
+#[derive(Debug, thiserror::Error)]
+pub enum WikiError {
+    #[error("wiki page '{slug}' not found")]
+    NotFound { slug: String },
+
+    #[error("wiki page version {version} not found for '{slug}'")]
+    VersionNotFound { slug: String, version: i64 },
+
+    #[error("wiki edit failed: {0}")]
+    EditFailed(String),
+
+    #[error("database error: {0}")]
+    Database(#[from] sqlx::Error),
+
+    #[error(transparent)]
+    Other(#[from] anyhow::Error),
+}
diff --git a/src/hooks/spacebot.rs b/src/hooks/spacebot.rs
index 9fbe084d3..7589e84b7 100644
--- a/src/hooks/spacebot.rs
+++ b/src/hooks/spacebot.rs
@@ -586,6 +586,20 @@ impl SpacebotHook {
                                     )
                                     .await
                                 {
+                                    // Flush the current tool call (and any prior
+                                    // accumulated ones from this stream iteration)
+                                    // into chat_history so apply_history_after_turn
+                                    // can extract the reply content from the
+                                    // PromptCancelled error variant.  Without this,
+                                    // the reply tool call is never visible in
+                                    // chat_history and every cancelled turn loses
+                                    // the assistant reply from state.history.
+                                    tool_calls.push(AssistantContent::ToolCall(tool_call.clone()));
+                                    if let Ok(content) =
+                                        rig::OneOrMany::many(std::mem::take(&mut tool_calls))
+                                    {
+                                        chat_history.push(Message::Assistant { id: None, content });
+                                    }
                                     return Err(PromptError::PromptCancelled {
                                         chat_history: Box::new(chat_history),
                                         reason,
diff --git a/src/lib.rs b/src/lib.rs
index fe50ef2fa..af03a2833 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -18,6 +18,7 @@ pub mod llm;
 pub mod mcp;
 pub mod memory;
 pub mod messaging;
+pub mod notifications;
 pub mod openai_auth;
 pub mod opencode;
 pub mod projects;
@@ -32,6 +33,7 @@ pub mod tasks;
 pub mod telemetry;
 pub mod tools;
 pub mod update;
+pub mod wiki;
 
 pub use error::{Error, Result};
 
@@ -419,6 +421,10 @@ pub struct AgentDeps {
     pub injection_tx: tokio::sync::mpsc::Sender<ChannelInjection>,
     /// Working memory event log for temporal situational awareness.
     pub working_memory: Arc<memory::WorkingMemoryStore>,
+    /// Optional API state for tools that need to emit notifications/SSE events.
+    pub api_state: Option<Arc<api::ApiState>>,
+    /// Instance-wide wiki store.
+    pub wiki_store: Option<Arc<wiki::WikiStore>>,
 }
 
 impl AgentDeps {
@@ -598,6 +604,11 @@ pub struct Attachment {
     /// Excluded from serialization to prevent credential leakage.
     #[serde(skip)]
     pub auth_header: Option<String>,
+    /// ID of a pre-saved attachment in `saved_attachments`. When set, the file
+    /// is already on disk — skip download and DB insert. The actual path is
+    /// re-derived from the DB row + workspace `saved/` dir at read time.
+    #[serde(skip)]
+    pub pre_saved_id: Option<String>,
 }
 
 /// An outbound response paired with the inbound message that triggered it.
diff --git a/src/llm.rs b/src/llm.rs
index 68776ebf3..44f138eb3 100644
--- a/src/llm.rs
+++ b/src/llm.rs
@@ -6,6 +6,7 @@ pub mod model;
 pub mod pricing;
 pub mod providers;
 pub mod routing;
+pub mod usage;
 
 pub use manager::LlmManager;
 pub use model::SpacebotModel;
diff --git a/src/llm/model.rs b/src/llm/model.rs
index 55f1b2745..32c54b10b 100644
--- a/src/llm/model.rs
+++ b/src/llm/model.rs
@@ -24,6 +24,7 @@ use rig::streaming::{RawStreamingChoice, RawStreamingToolCall, StreamingCompleti
 use serde::{Deserialize, Serialize};
 use std::collections::BTreeMap;
 use std::sync::Arc;
+use tokio::sync::Mutex;
 
 const STREAM_REQUEST_TIMEOUT_SECS: u64 = 30 * 60;
 
@@ -60,6 +61,7 @@ pub struct SpacebotModel {
     agent_id: Option<String>,
     process_type: Option<String>,
     worker_type: Option<String>,
+    usage_accumulator: Option<Arc<Mutex<crate::llm::usage::UsageAccumulator>>>,
 }
 
 impl SpacebotModel {
@@ -96,6 +98,15 @@ impl SpacebotModel {
         self
     }
 
+    /// Attach a shared usage accumulator for token tracking.
+    pub fn with_accumulator(
+        mut self,
+        accumulator: Arc<Mutex<crate::llm::usage::UsageAccumulator>>,
+    ) -> Self {
+        self.usage_accumulator = Some(accumulator);
+        self
+    }
+
     async fn provider_config_for_current_model(&self) -> Result<ProviderConfig, CompletionError> {
         let provider_id = self
             .full_model_name
@@ -355,6 +366,7 @@ impl CompletionModel for SpacebotModel {
             agent_id: None,
             process_type: None,
             worker_type: None,
+            usage_accumulator: None,
         }
     }
 
@@ -570,6 +582,24 @@ impl CompletionModel for SpacebotModel {
             }
         }
 
+        // Record usage in the accumulator (if attached).
+        if let Some(ref accumulator) = self.usage_accumulator
+            && let Ok(ref response) = result
+        {
+            let body = &response.raw_response.body;
+            let extended = if self.provider == "anthropic" {
+                crate::llm::usage::ExtendedUsage::from_anthropic_body(body)
+            } else {
+                crate::llm::usage::ExtendedUsage::from_openai_body(body)
+            };
+            let cost =
+                crate::llm::pricing::estimate_cost_extended(&self.full_model_name, &extended);
+            accumulator
+                .lock()
+                .await
+                .add(extended, &self.full_model_name, &self.provider, cost);
+        }
+
         result
     }
 
@@ -1127,6 +1157,9 @@ impl SpacebotModel {
         }
 
         let provider_label = provider_label.to_string();
+        let stream_accumulator = self.usage_accumulator.clone();
+        let stream_model_name = self.full_model_name.clone();
+        let stream_provider = self.provider.clone();
         let stream = async_stream::stream! {
             let mut stream = response.bytes_stream();
             let mut block_buffer = String::new();
@@ -1253,6 +1286,7 @@ impl SpacebotModel {
                     }
                 };
 
+                record_streaming_usage(&stream_accumulator, &response_body, &stream_model_name, &stream_provider).await;
                 yield Ok(RawStreamingChoice::FinalResponse(RawStreamingResponse {
                     body: response_body,
                     usage: Some(parsed_response.usage),
@@ -1285,6 +1319,7 @@ impl SpacebotModel {
             if let Some(message_id) = parsed_response.message_id {
                 yield Ok(RawStreamingChoice::MessageId(message_id));
             }
+            record_streaming_usage(&stream_accumulator, &response_body, &stream_model_name, &stream_provider).await;
             yield Ok(RawStreamingChoice::FinalResponse(RawStreamingResponse {
                 body: response_body,
                 usage: Some(parsed_response.usage),
@@ -1538,6 +1573,9 @@ impl SpacebotModel {
         }
 
         let provider_label = provider_label.to_string();
+        let stream_accumulator = self.usage_accumulator.clone();
+        let stream_model_name = self.full_model_name.clone();
+        let stream_provider = self.provider.clone();
         let stream = async_stream::stream! {
             let mut stream = response.bytes_stream();
             let mut block_buffer = String::new();
@@ -1650,6 +1688,7 @@ impl SpacebotModel {
                     }
                 };
 
+                record_streaming_usage(&stream_accumulator, &response_body, &stream_model_name, &stream_provider).await;
                 yield Ok(RawStreamingChoice::FinalResponse(RawStreamingResponse {
                     body: response_body,
                     usage: Some(parsed_response.usage),
@@ -1683,6 +1722,7 @@ impl SpacebotModel {
                 yield Ok(RawStreamingChoice::MessageId(message_id));
             }
 
+            record_streaming_usage(&stream_accumulator, &response_body, &stream_model_name, &stream_provider).await;
             yield Ok(RawStreamingChoice::FinalResponse(RawStreamingResponse {
                 body: response_body,
                 usage: Some(parsed_response.usage),
@@ -1694,6 +1734,24 @@ impl SpacebotModel {
 }
 // --- Helpers ---
 
+/// Record usage from a streaming response's raw body into the accumulator.
+async fn record_streaming_usage(
+    accumulator: &Option<Arc<Mutex<crate::llm::usage::UsageAccumulator>>>,
+    body: &serde_json::Value,
+    model_name: &str,
+    provider: &str,
+) {
+    if let Some(acc) = accumulator {
+        let extended = if provider == "anthropic" {
+            crate::llm::usage::ExtendedUsage::from_anthropic_body(body)
+        } else {
+            crate::llm::usage::ExtendedUsage::from_openai_body(body)
+        };
+        let cost = crate::llm::pricing::estimate_cost_extended(model_name, &extended);
+        acc.lock().await.add(extended, model_name, provider, cost);
+    }
+}
+
 /// Reverse-map Claude Code canonical tool names back to the original names
 /// from the request's tool definitions.
 fn reverse_map_tool_names(
@@ -3438,6 +3496,15 @@ fn parse_openai_responses_response(
         .as_array()
         .ok_or_else(|| CompletionError::ResponseError("missing output array".into()))?;
 
+    if output_items.is_empty() {
+        tracing::warn!(
+            provider = %provider_label,
+            status = body["status"].as_str().unwrap_or("unknown"),
+            body = %serde_json::to_string_pretty(&body).unwrap_or_default(),
+            "responses API returned empty output array — dumping full body"
+        );
+    }
+
     let mut assistant_content = Vec::new();
     let mut fallback_text_parts = Vec::new();
 
@@ -3547,6 +3614,28 @@ fn parse_openai_responses_sse_response(
     response_text: &str,
     provider_label: &str,
 ) -> Result<serde_json::Value, CompletionError> {
+    // The `response.completed` event may have an empty `output` array when the
+    // ChatGPT Responses API streams content incrementally.  We accumulate
+    // output items from the delta events and patch them into the completed
+    // response if needed.
+    use serde_json::Value;
+    use std::collections::BTreeMap;
+
+    // output_index → { item skeleton + accumulated text parts keyed by content_index }
+    struct OutputItemAcc {
+        /// The full item snapshot from `response.output_item.done`, if received.
+        done_snapshot: Option<Value>,
+        /// Accumulated text per content_index from delta events.
+        text_parts: BTreeMap<usize, String>,
+        /// Item type from `response.output_item.added`.
+        item_type: Option<String>,
+        /// The skeleton from `response.output_item.added`.
+        added_skeleton: Option<Value>,
+    }
+
+    let mut output_acc: BTreeMap<usize, OutputItemAcc> = BTreeMap::new();
+    let mut completed_response: Option<Value> = None;
+
     for line in response_text.lines() {
         let Some(data) = line.strip_prefix("data: ") else {
             continue;
@@ -3556,21 +3645,101 @@ fn parse_openai_responses_sse_response(
             continue;
         }
 
-        let Ok(event_body) = serde_json::from_str::<serde_json::Value>(data) else {
+        let Ok(event_body) = serde_json::from_str::<Value>(data) else {
             continue;
         };
 
-        if event_body["type"].as_str() == Some("response.completed")
-            && let Some(response) = event_body.get("response")
-        {
-            return Ok(response.clone());
+        match event_body["type"].as_str() {
+            Some("response.output_item.added") => {
+                let idx = event_body["output_index"].as_u64().unwrap_or(0) as usize;
+                let item = &event_body["item"];
+                let entry = output_acc.entry(idx).or_insert_with(|| OutputItemAcc {
+                    done_snapshot: None,
+                    text_parts: BTreeMap::new(),
+                    item_type: None,
+                    added_skeleton: None,
+                });
+                entry.item_type = item["type"].as_str().map(String::from);
+                entry.added_skeleton = Some(item.clone());
+            }
+            Some("response.output_text.delta") => {
+                let idx = event_body["output_index"].as_u64().unwrap_or(0) as usize;
+                let content_idx = event_body["content_index"].as_u64().unwrap_or(0) as usize;
+                let delta = event_body["delta"].as_str().unwrap_or("");
+                let entry = output_acc.entry(idx).or_insert_with(|| OutputItemAcc {
+                    done_snapshot: None,
+                    text_parts: BTreeMap::new(),
+                    item_type: None,
+                    added_skeleton: None,
+                });
+                entry
+                    .text_parts
+                    .entry(content_idx)
+                    .or_default()
+                    .push_str(delta);
+            }
+            Some("response.output_item.done") => {
+                let idx = event_body["output_index"].as_u64().unwrap_or(0) as usize;
+                let entry = output_acc.entry(idx).or_insert_with(|| OutputItemAcc {
+                    done_snapshot: None,
+                    text_parts: BTreeMap::new(),
+                    item_type: None,
+                    added_skeleton: None,
+                });
+                entry.done_snapshot = event_body.get("item").cloned();
+            }
+            Some("response.function_call_arguments.delta") => {
+                // Function call deltas are handled by output_item.done snapshot
+            }
+            Some("response.completed") => {
+                completed_response = event_body.get("response").cloned();
+            }
+            _ => {}
         }
     }
 
-    Err(CompletionError::ProviderError(format!(
-        "{provider_label} Responses SSE stream missing response.completed event.\nBody: {}",
-        truncate_body(response_text)
-    )))
+    let mut response = completed_response.ok_or_else(|| {
+        CompletionError::ProviderError(format!(
+            "{provider_label} Responses SSE stream missing response.completed event.\nBody: {}",
+            truncate_body(response_text)
+        ))
+    })?;
+
+    // If the completed response has an empty output array, reconstruct from
+    // accumulated SSE events.
+    let output_is_empty = response["output"]
+        .as_array()
+        .is_none_or(|arr| arr.is_empty());
+
+    if output_is_empty && !output_acc.is_empty() {
+        let mut reconstructed: Vec<Value> = Vec::new();
+
+        for (_idx, acc) in output_acc {
+            // Prefer the done snapshot (complete item); fall back to
+            // reconstructing from deltas.
+            if let Some(snapshot) = acc.done_snapshot {
+                reconstructed.push(snapshot);
+            } else if !acc.text_parts.is_empty() {
+                // Build a message output item from accumulated text
+                let full_text: String = acc.text_parts.into_values().collect();
+                let content = serde_json::json!([{
+                    "type": "output_text",
+                    "text": full_text,
+                }]);
+                let mut item = acc
+                    .added_skeleton
+                    .unwrap_or_else(|| serde_json::json!({"type": "message", "role": "assistant"}));
+                item["content"] = content;
+                reconstructed.push(item);
+            }
+        }
+
+        if !reconstructed.is_empty() {
+            response["output"] = Value::Array(reconstructed);
+        }
+    }
+
+    Ok(response)
 }
 
 fn parse_openai_error_message(response_text: &str) -> Option<String> {
diff --git a/src/llm/pricing.rs b/src/llm/pricing.rs
index 721772fd1..0a95916f7 100644
--- a/src/llm/pricing.rs
+++ b/src/llm/pricing.rs
@@ -10,8 +10,10 @@ struct ModelPricing {
     input: f64,
     /// Cost per output token in USD.
     output: f64,
-    /// Cost per cached input token in USD (typically discounted).
+    /// Cost per cache-read input token in USD (typically discounted).
     cached_input: f64,
+    /// Cost per cache-write input token in USD. Same as input if not separately priced.
+    cache_write: f64,
 }
 
 /// Look up pricing for a model name. Matches on the model portion
@@ -25,79 +27,94 @@ fn lookup_pricing(model_name: &str) -> ModelPricing {
 
     let per_m = |price: f64| price / 1_000_000.0;
 
+    // Anthropic cache-write pricing is 1.25× input. OpenAI cache-write is same as input.
     match model {
         m if m.starts_with("claude-opus-4") => ModelPricing {
             input: per_m(15.0),
             output: per_m(75.0),
             cached_input: per_m(1.5),
+            cache_write: per_m(18.75),
         },
         m if m.starts_with("claude-sonnet-4") => ModelPricing {
             input: per_m(3.0),
             output: per_m(15.0),
             cached_input: per_m(0.30),
+            cache_write: per_m(3.75),
         },
         m if m.starts_with("claude-3-5-sonnet") => ModelPricing {
             input: per_m(3.0),
             output: per_m(15.0),
             cached_input: per_m(0.30),
+            cache_write: per_m(3.75),
         },
         m if m.starts_with("claude-3-5-haiku") || m.starts_with("claude-haiku-4") => ModelPricing {
             input: per_m(0.80),
             output: per_m(4.0),
             cached_input: per_m(0.08),
+            cache_write: per_m(1.0),
         },
 
         m if m.starts_with("claude-3-opus") => ModelPricing {
             input: per_m(15.0),
             output: per_m(75.0),
             cached_input: per_m(1.5),
+            cache_write: per_m(18.75),
         },
         m if m.starts_with("claude-3-sonnet") => ModelPricing {
             input: per_m(3.0),
             output: per_m(15.0),
             cached_input: per_m(0.30),
+            cache_write: per_m(3.75),
         },
         m if m.starts_with("claude-3-haiku") => ModelPricing {
             input: per_m(0.25),
             output: per_m(1.25),
             cached_input: per_m(0.03),
+            cache_write: per_m(0.3125),
         },
 
         m if m.starts_with("gpt-4o-mini") => ModelPricing {
             input: per_m(0.15),
             output: per_m(0.60),
             cached_input: per_m(0.075),
+            cache_write: per_m(0.15),
         },
         m if m.starts_with("gpt-4o") => ModelPricing {
             input: per_m(2.50),
             output: per_m(10.0),
             cached_input: per_m(1.25),
+            cache_write: per_m(2.50),
         },
         m if m.starts_with("gpt-4-turbo") => ModelPricing {
             input: per_m(10.0),
             output: per_m(30.0),
             cached_input: per_m(5.0),
+            cache_write: per_m(10.0),
         },
 
         m if m.starts_with("o3-mini") => ModelPricing {
             input: per_m(1.10),
             output: per_m(4.40),
             cached_input: per_m(0.55),
+            cache_write: per_m(1.10),
         },
         m if m.starts_with("o3") => ModelPricing {
             input: per_m(10.0),
             output: per_m(40.0),
             cached_input: per_m(5.0),
+            cache_write: per_m(10.0),
         },
         m if m.starts_with("o1-mini") => ModelPricing {
             input: per_m(3.0),
             output: per_m(12.0),
             cached_input: per_m(1.5),
+            cache_write: per_m(3.0),
         },
         m if m.starts_with("o1") => ModelPricing {
             input: per_m(15.0),
             output: per_m(60.0),
             cached_input: per_m(7.5),
+            cache_write: per_m(15.0),
         },
 
         m if m.starts_with("gemini-2.0-flash") || m.starts_with("gemini-2.5-flash") => {
@@ -105,39 +122,46 @@ fn lookup_pricing(model_name: &str) -> ModelPricing {
                 input: per_m(0.075),
                 output: per_m(0.30),
                 cached_input: per_m(0.01875),
+                cache_write: per_m(0.075),
             }
         }
         m if m.starts_with("gemini-2.5-pro") || m.starts_with("gemini-2.0-pro") => ModelPricing {
             input: per_m(1.25),
             output: per_m(10.0),
             cached_input: per_m(0.3125),
+            cache_write: per_m(1.25),
         },
         m if m.starts_with("gemini-1.5-pro") => ModelPricing {
             input: per_m(1.25),
             output: per_m(5.0),
             cached_input: per_m(0.3125),
+            cache_write: per_m(1.25),
         },
         m if m.starts_with("gemini-1.5-flash") => ModelPricing {
             input: per_m(0.075),
             output: per_m(0.30),
             cached_input: per_m(0.01875),
+            cache_write: per_m(0.075),
         },
 
         m if m.starts_with("deepseek-chat") || m.starts_with("deepseek-v3") => ModelPricing {
             input: per_m(0.27),
             output: per_m(1.10),
             cached_input: per_m(0.07),
+            cache_write: per_m(0.27),
         },
         m if m.starts_with("deepseek-reasoner") || m.starts_with("deepseek-r1") => ModelPricing {
             input: per_m(0.55),
             output: per_m(2.19),
             cached_input: per_m(0.14),
+            cache_write: per_m(0.55),
         },
 
         _ => ModelPricing {
             input: per_m(3.0),
             output: per_m(15.0),
             cached_input: per_m(0.30),
+            cache_write: per_m(3.75),
         },
     }
 }
@@ -160,6 +184,16 @@ pub fn estimate_cost(
         + (cached_input_tokens as f64 * pricing.cached_input)
 }
 
+/// Estimate cost using the full extended usage breakdown.
+pub fn estimate_cost_extended(model_name: &str, usage: &super::usage::ExtendedUsage) -> f64 {
+    let pricing = lookup_pricing(model_name);
+
+    (usage.input_tokens as f64 * pricing.input)
+        + (usage.output_tokens as f64 * pricing.output)
+        + (usage.cache_read_tokens as f64 * pricing.cached_input)
+        + (usage.cache_write_tokens as f64 * pricing.cache_write)
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
diff --git a/src/llm/usage.rs b/src/llm/usage.rs
new file mode 100644
index 000000000..850374092
--- /dev/null
+++ b/src/llm/usage.rs
@@ -0,0 +1,314 @@
+//! Token usage tracking: extended usage extraction, in-memory accumulation,
+//! and database persistence.
+
+use serde::{Deserialize, Serialize};
+use sqlx::SqlitePool;
+
+/// Extended token usage extracted from raw provider responses.
+/// Captures fields that rig's `completion::Usage` does not carry.
+#[derive(Debug, Clone, Copy, Default)]
+pub struct ExtendedUsage {
+    pub input_tokens: u64,
+    pub output_tokens: u64,
+    pub cache_read_tokens: u64,
+    pub cache_write_tokens: u64,
+    pub reasoning_tokens: u64,
+}
+
+impl ExtendedUsage {
+    /// Extract extended usage from an Anthropic response body.
+    pub fn from_anthropic_body(body: &serde_json::Value) -> Self {
+        let usage = &body["usage"];
+        let input_tokens = usage["input_tokens"].as_u64().unwrap_or(0);
+        let output_tokens = usage["output_tokens"].as_u64().unwrap_or(0);
+        let cache_read_tokens = usage["cache_read_input_tokens"].as_u64().unwrap_or(0);
+        let cache_write_tokens = usage["cache_creation_input_tokens"].as_u64().unwrap_or(0);
+        // Anthropic doesn't have reasoning_tokens in the same way, but check anyway.
+        let reasoning_tokens = usage["reasoning_tokens"].as_u64().unwrap_or(0);
+
+        Self {
+            input_tokens,
+            output_tokens,
+            cache_read_tokens,
+            cache_write_tokens,
+            reasoning_tokens,
+        }
+    }
+
+    /// Extract extended usage from an OpenAI-compatible response body.
+    pub fn from_openai_body(body: &serde_json::Value) -> Self {
+        let usage = &body["usage"];
+        let prompt_tokens = usage["prompt_tokens"].as_u64().unwrap_or(0);
+        let output_tokens = usage["completion_tokens"].as_u64().unwrap_or(0);
+
+        let cache_read_tokens = usage["prompt_tokens_details"]["cached_tokens"]
+            .as_u64()
+            .unwrap_or(0);
+        let cache_write_tokens = usage["prompt_tokens_details"]["cache_write_tokens"]
+            .as_u64()
+            .unwrap_or(0);
+        // Non-cached input = total prompt minus cached portions.
+        let input_tokens = prompt_tokens
+            .saturating_sub(cache_read_tokens)
+            .saturating_sub(cache_write_tokens);
+
+        let reasoning_tokens = usage["completion_tokens_details"]["reasoning_tokens"]
+            .as_u64()
+            .unwrap_or(0);
+
+        Self {
+            input_tokens,
+            output_tokens,
+            cache_read_tokens,
+            cache_write_tokens,
+            reasoning_tokens,
+        }
+    }
+}
+
+/// Cost classification for a usage record.
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "snake_case")]
+pub enum CostStatus {
+    Estimated,
+    #[default]
+    Included,
+    Unknown,
+}
+
+impl CostStatus {
+    fn as_str(&self) -> &'static str {
+        match self {
+            CostStatus::Estimated => "estimated",
+            CostStatus::Included => "included",
+            CostStatus::Unknown => "unknown",
+        }
+    }
+
+    /// Return the more conservative of two statuses.
+    /// Unknown > Estimated > Included.
+    fn most_conservative(self, other: CostStatus) -> CostStatus {
+        match (self, other) {
+            (CostStatus::Unknown, _) | (_, CostStatus::Unknown) => CostStatus::Unknown,
+            (CostStatus::Estimated, _) | (_, CostStatus::Estimated) => CostStatus::Estimated,
+            _ => CostStatus::Included,
+        }
+    }
+}
+
+impl std::fmt::Display for CostStatus {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.write_str(self.as_str())
+    }
+}
+
+/// Accumulates token usage across multiple API calls within a single process
+/// invocation. Thread-safe interior mutability via the `Mutex` wrapper on the
+/// caller side.
+#[derive(Debug, Default)]
+pub struct UsageAccumulator {
+    pub input_tokens: u64,
+    pub output_tokens: u64,
+    pub cache_read_tokens: u64,
+    pub cache_write_tokens: u64,
+    pub reasoning_tokens: u64,
+    pub request_count: u32,
+    pub estimated_cost_usd: f64,
+    pub cost_status: CostStatus,
+    /// Track per-model usage for the `model` column. We record the most-used
+    /// model (by request count) when flushing.
+    model_requests: std::collections::HashMap<String, u32>,
+    provider: Option<String>,
+}
+
+impl UsageAccumulator {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// Record one API call's usage.
+    pub fn add(&mut self, usage: ExtendedUsage, model: &str, provider: &str, cost: f64) {
+        self.input_tokens += usage.input_tokens;
+        self.output_tokens += usage.output_tokens;
+        self.cache_read_tokens += usage.cache_read_tokens;
+        self.cache_write_tokens += usage.cache_write_tokens;
+        self.reasoning_tokens += usage.reasoning_tokens;
+        self.request_count += 1;
+        self.estimated_cost_usd += cost;
+
+        // Determine cost status for this call.
+        let call_status = if cost > 0.0 {
+            CostStatus::Estimated
+        } else {
+            // Zero cost could mean included or unknown. We mark as estimated
+            // when we have pricing info (cost == 0 is valid for zero-token calls).
+            CostStatus::Estimated
+        };
+        self.cost_status = self.cost_status.most_conservative(call_status);
+
+        *self.model_requests.entry(model.to_string()).or_insert(0) += 1;
+        if self.provider.is_none() {
+            self.provider = Some(provider.to_string());
+        }
+    }
+
+    /// Returns true if any usage was recorded.
+    pub fn has_usage(&self) -> bool {
+        self.request_count > 0
+    }
+
+    /// The most-used model name across all calls.
+    fn primary_model(&self) -> String {
+        self.model_requests
+            .iter()
+            .max_by_key(|(_, count)| *count)
+            .map(|(model, _)| model.clone())
+            .unwrap_or_else(|| "unknown".to_string())
+    }
+
+    /// Flush accumulated usage to the database.
+    pub async fn flush(
+        &self,
+        pool: &SqlitePool,
+        agent_id: &str,
+        process_type: &str,
+        conversation_id: Option<&str>,
+    ) -> Result<(), sqlx::Error> {
+        if !self.has_usage() {
+            return Ok(());
+        }
+
+        let model = self.primary_model();
+        let provider = self.provider.as_deref().unwrap_or("unknown");
+        let cost_status = self.cost_status.as_str();
+        let cost = if self.cost_status == CostStatus::Unknown {
+            None
+        } else {
+            Some(self.estimated_cost_usd)
+        };
+
+        sqlx::query(
+            "INSERT INTO token_usage (
+                agent_id, process_type, conversation_id, model, provider,
+                input_tokens, output_tokens, cache_read_tokens, cache_write_tokens,
+                reasoning_tokens, request_count, estimated_cost_usd, cost_status
+            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)",
+        )
+        .bind(agent_id)
+        .bind(process_type)
+        .bind(conversation_id)
+        .bind(&model)
+        .bind(provider)
+        .bind(self.input_tokens as i64)
+        .bind(self.output_tokens as i64)
+        .bind(self.cache_read_tokens as i64)
+        .bind(self.cache_write_tokens as i64)
+        .bind(self.reasoning_tokens as i64)
+        .bind(self.request_count as i32)
+        .bind(cost)
+        .bind(cost_status)
+        .execute(pool)
+        .await?;
+
+        Ok(())
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_accumulator_add() {
+        let mut acc = UsageAccumulator::new();
+        let usage = ExtendedUsage {
+            input_tokens: 1000,
+            output_tokens: 500,
+            cache_read_tokens: 200,
+            cache_write_tokens: 100,
+            reasoning_tokens: 50,
+        };
+        acc.add(usage, "claude-sonnet-4", "anthropic", 0.01);
+        acc.add(usage, "claude-sonnet-4", "anthropic", 0.01);
+
+        assert_eq!(acc.input_tokens, 2000);
+        assert_eq!(acc.output_tokens, 1000);
+        assert_eq!(acc.cache_read_tokens, 400);
+        assert_eq!(acc.cache_write_tokens, 200);
+        assert_eq!(acc.reasoning_tokens, 100);
+        assert_eq!(acc.request_count, 2);
+        assert!((acc.estimated_cost_usd - 0.02).abs() < 1e-10);
+    }
+
+    #[test]
+    fn test_accumulator_no_usage_skips_flush() {
+        let acc = UsageAccumulator::new();
+        assert!(!acc.has_usage());
+    }
+
+    #[test]
+    fn test_primary_model() {
+        let mut acc = UsageAccumulator::new();
+        let usage = ExtendedUsage::default();
+        acc.add(usage, "claude-sonnet-4", "anthropic", 0.0);
+        acc.add(usage, "claude-sonnet-4", "anthropic", 0.0);
+        acc.add(usage, "gpt-4o", "openai", 0.0);
+        assert_eq!(acc.primary_model(), "claude-sonnet-4");
+    }
+
+    #[test]
+    fn test_cost_status_conservatism() {
+        assert_eq!(
+            CostStatus::Estimated.most_conservative(CostStatus::Unknown),
+            CostStatus::Unknown
+        );
+        assert_eq!(
+            CostStatus::Included.most_conservative(CostStatus::Estimated),
+            CostStatus::Estimated
+        );
+        assert_eq!(
+            CostStatus::Included.most_conservative(CostStatus::Included),
+            CostStatus::Included
+        );
+    }
+
+    #[test]
+    fn test_anthropic_body_extraction() {
+        let body = serde_json::json!({
+            "usage": {
+                "input_tokens": 1000,
+                "output_tokens": 500,
+                "cache_read_input_tokens": 200,
+                "cache_creation_input_tokens": 100
+            }
+        });
+        let usage = ExtendedUsage::from_anthropic_body(&body);
+        assert_eq!(usage.input_tokens, 1000);
+        assert_eq!(usage.output_tokens, 500);
+        assert_eq!(usage.cache_read_tokens, 200);
+        assert_eq!(usage.cache_write_tokens, 100);
+    }
+
+    #[test]
+    fn test_openai_body_extraction() {
+        let body = serde_json::json!({
+            "usage": {
+                "prompt_tokens": 1500,
+                "completion_tokens": 500,
+                "prompt_tokens_details": {
+                    "cached_tokens": 300,
+                    "cache_write_tokens": 200
+                },
+                "completion_tokens_details": {
+                    "reasoning_tokens": 100
+                }
+            }
+        });
+        let usage = ExtendedUsage::from_openai_body(&body);
+        assert_eq!(usage.input_tokens, 1000); // 1500 - 300 - 200
+        assert_eq!(usage.output_tokens, 500);
+        assert_eq!(usage.cache_read_tokens, 300);
+        assert_eq!(usage.cache_write_tokens, 200);
+        assert_eq!(usage.reasoning_tokens, 100);
+    }
+}
diff --git a/src/main.rs b/src/main.rs
index aae7974e0..f97ba2f15 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -1195,6 +1195,7 @@ fn cmd_skill(
 
                 for info in skills.list() {
                     let source_label = match info.source {
+                        spacebot::skills::SkillSource::Builtin => "builtin",
                         spacebot::skills::SkillSource::Instance => "instance",
                         spacebot::skills::SkillSource::Workspace => "workspace",
                     };
@@ -1238,6 +1239,7 @@ fn cmd_skill(
                 };
 
                 let source_label = match skill.source {
+                    spacebot::skills::SkillSource::Builtin => "builtin",
                     spacebot::skills::SkillSource::Instance => "instance",
                     spacebot::skills::SkillSource::Workspace => "workspace",
                 };
@@ -1617,16 +1619,33 @@ async fn run(
 
     // Instance-level global task database. Shared across all agents with globally
     // unique task numbers. Lives alongside secrets.redb in the instance data dir.
-    let global_task_pool = spacebot::db::connect_global_tasks(&config.instance_dir.join("data"))
+    let instance_pool = spacebot::db::connect_instance_db(&config.instance_dir.join("data"))
         .await
-        .context("failed to initialize global task database")?;
+        .context("failed to initialize instance database")?;
 
     // Migrate legacy per-agent tasks to the global database on first run.
-    spacebot::tasks::migration::migrate_legacy_tasks(&config.instance_dir, &global_task_pool)
+    spacebot::tasks::migration::migrate_legacy_tasks(&config.instance_dir, &instance_pool)
         .await
         .context("failed to migrate legacy tasks to global database")?;
 
-    let global_task_store = Arc::new(spacebot::tasks::TaskStore::new(global_task_pool));
+    let global_task_store = Arc::new(spacebot::tasks::TaskStore::new(instance_pool.clone()));
+
+    // Instance-wide wiki knowledge base.
+    let global_wiki_store = Arc::new(spacebot::wiki::WikiStore::new(instance_pool.clone()));
+
+    // Instance-level notification store for the dashboard inbox.
+    let global_notification_store = Arc::new(spacebot::notifications::NotificationStore::new(
+        instance_pool.clone(),
+    ));
+
+    // Instance-level shared project store. Replaces per-agent project stores.
+    let global_project_store =
+        Arc::new(spacebot::projects::ProjectStore::new(instance_pool.clone()));
+
+    // Migrate per-agent projects into the instance database on first run.
+    spacebot::projects::migration::migrate_legacy_projects(&config.instance_dir, &instance_pool)
+        .await
+        .context("failed to migrate legacy projects to instance database")?;
 
     // Start HTTP API server if enabled
     let mut api_state = spacebot::api::ApiState::new_with_provider_sender(
@@ -1637,6 +1656,8 @@ async fn run(
     );
     api_state.auth_token = config.api.auth_token.clone();
     api_state.set_task_store(global_task_store.clone());
+    api_state.set_wiki_store(global_wiki_store.clone());
+    api_state.set_notification_store(global_notification_store.clone());
     let api_state = Arc::new(api_state);
 
     // Keep the secrets API available in setup mode so encrypted stores can be
@@ -1803,6 +1824,9 @@ async fn run(
             agent_humans.clone(),
             injection_tx.clone(),
             global_task_store.clone(),
+            global_wiki_store.clone(),
+            global_project_store.clone(),
+            global_notification_store.clone(),
             &bootstrapped_store,
         )
         .await?;
@@ -2019,6 +2043,7 @@ async fn run(
                         snapshot_store,
                         Some(api_state.live_worker_transcripts.clone()),
                         resolved_settings,
+                        None, // no cron outcome for normal channels
                     );
                     let channel_registration_id = agent
                         .deps
@@ -2302,6 +2327,7 @@ async fn run(
                         snapshot_store,
                         Some(api_state.live_worker_transcripts.clone()),
                         resolved_settings,
+                        None, // no cron outcome for normal channels
                     );
                     let channel_registration_id = agent
                         .deps
@@ -2444,12 +2470,18 @@ async fn run(
                             .and_then(|v| v.as_str())
                             .map(|s| s.to_string())
                     });
+                    let inbound_attachments: Vec<spacebot::agent::channel_attachments::SavedAttachmentMeta> =
+                        message.metadata
+                            .get("portal_attachment_metas")
+                            .and_then(|v| serde_json::from_value(v.clone()).ok())
+                            .unwrap_or_default();
                     api_state.event_tx.send(spacebot::api::ApiEvent::InboundMessage {
                         agent_id: agent_id.to_string(),
                         channel_id: conversation_id.clone(),
                         sender_name,
                         sender_id: message.sender_id.clone(),
                         text: message.content.to_string(),
+                        attachments: inbound_attachments,
                     }).ok();
 
                     if let Err(error) = message_tx.send(message).await {
@@ -2577,6 +2609,9 @@ async fn run(
                                     agent_humans.clone(),
                                     injection_tx.clone(),
                                     global_task_store.clone(),
+                                    global_wiki_store.clone(),
+                                    global_project_store.clone(),
+                                    global_notification_store.clone(),
                                     &bootstrapped_store,
                                 ).await {
                                     Ok(()) => {
@@ -2720,6 +2755,9 @@ async fn initialize_agents(
     agent_humans: Arc<ArcSwap<Vec<spacebot::config::HumanDef>>>,
     injection_tx: tokio::sync::mpsc::Sender<spacebot::ChannelInjection>,
     global_task_store: Arc<spacebot::tasks::TaskStore>,
+    global_wiki_store: Arc<spacebot::wiki::WikiStore>,
+    global_project_store: Arc<spacebot::projects::ProjectStore>,
+    global_notification_store: Arc<spacebot::notifications::NotificationStore>,
     bootstrapped_store: &Option<Arc<spacebot::secrets::store::SecretsStore>>,
 ) -> anyhow::Result<()> {
     let resolved_agents = config.resolve_agents();
@@ -2838,7 +2876,7 @@ async fn initialize_agents(
         // Per-agent memory system
         let memory_store =
             spacebot::memory::MemoryStore::with_agent_id(db.sqlite.clone(), &agent_config.id);
-        let project_store = Arc::new(spacebot::projects::ProjectStore::new(db.sqlite.clone()));
+        let project_store = global_project_store.clone();
         let embedding_table = spacebot::memory::EmbeddingTable::open_or_create(&db.lance)
             .await
             .with_context(|| {
@@ -2942,8 +2980,7 @@ async fn initialize_agents(
 
         // Inject active project root paths into the sandbox allowlist so
         // workers can access project directories even outside the workspace.
-        spacebot::projects::refresh_sandbox_project_paths(&project_store, &agent_id, &sandbox)
-            .await;
+        spacebot::projects::refresh_sandbox_project_paths(&project_store, &sandbox).await;
 
         let deps = spacebot::AgentDeps {
             agent_id: agent_id.clone(),
@@ -2967,6 +3004,8 @@ async fn initialize_agents(
             ),
             injection_tx: injection_tx.clone(),
             working_memory,
+            api_state: Some(api_state.clone()),
+            wiki_store: Some(global_wiki_store.clone()),
         };
 
         let agent = spacebot::Agent {
@@ -3026,7 +3065,6 @@ async fn initialize_agents(
         let mut agent_configs = Vec::new();
         let mut memory_searches = std::collections::HashMap::new();
         let mut mcp_managers = std::collections::HashMap::new();
-        let mut project_stores = std::collections::HashMap::new();
         let mut agent_workspaces = std::collections::HashMap::new();
         let mut agent_identity_dirs = std::collections::HashMap::new();
         let mut agent_data_dirs = std::collections::HashMap::new();
@@ -3038,7 +3076,6 @@ async fn initialize_agents(
             agent_pools.insert(agent_id.to_string(), agent.db.sqlite.clone());
             memory_searches.insert(agent_id.to_string(), agent.deps.memory_search.clone());
             mcp_managers.insert(agent_id.to_string(), agent.deps.mcp_manager.clone());
-            project_stores.insert(agent_id.to_string(), agent.deps.project_store.clone());
             agent_workspaces.insert(agent_id.to_string(), agent.config.workspace.clone());
             agent_identity_dirs.insert(agent_id.to_string(), agent.config.identity_dir.clone());
             agent_data_dirs.insert(agent_id.to_string(), agent.config.data_dir.clone());
@@ -3061,7 +3098,7 @@ async fn initialize_agents(
         api_state.set_agent_configs(agent_configs);
         api_state.set_memory_searches(memory_searches);
         api_state.set_mcp_managers(mcp_managers);
-        api_state.set_project_stores(project_stores);
+        api_state.set_project_store(global_project_store.clone());
         api_state.set_runtime_configs(runtime_configs);
         api_state.set_agent_workspaces(agent_workspaces);
         api_state.set_agent_identity_dirs(agent_identity_dirs);
@@ -3691,7 +3728,8 @@ async fn initialize_agents(
 
     // Start cortex warmup, runtime, and association loops for each agent
     for (agent_id, agent) in agents.iter() {
-        let cortex_logger = spacebot::agent::cortex::CortexLogger::new(agent.db.sqlite.clone());
+        let cortex_logger = spacebot::agent::cortex::CortexLogger::new(agent.db.sqlite.clone())
+            .with_notifications(global_notification_store.clone(), agent_id.to_string());
         let warmup_handle =
             spacebot::agent::cortex::spawn_warmup_loop(agent.deps.clone(), cortex_logger.clone());
         cortex_handles.push(warmup_handle);
@@ -3709,7 +3747,8 @@ async fn initialize_agents(
 
         let ready_task_handle = spacebot::agent::cortex::spawn_ready_task_loop(
             agent.deps.clone(),
-            spacebot::agent::cortex::CortexLogger::new(agent.db.sqlite.clone()),
+            spacebot::agent::cortex::CortexLogger::new(agent.db.sqlite.clone())
+                .with_notifications(global_notification_store.clone(), agent_id.to_string()),
         );
         cortex_handles.push(ready_task_handle);
         tracing::info!(agent_id = %agent_id, "cortex ready-task loop started");
@@ -3726,6 +3765,7 @@ async fn initialize_agents(
             let channel_store = spacebot::conversation::ChannelStore::new(agent.db.sqlite.clone());
             let run_logger = spacebot::conversation::ProcessRunLogger::new(agent.db.sqlite.clone());
             let cortex_ctx = spacebot::agent::cortex_chat::CortexChatSession::create_context();
+            #[allow(deprecated)] // Cortex chat is legacy — being replaced by Channel Settings
             let tool_server = spacebot::tools::create_cortex_chat_tool_server(
                 agent.deps.agent_id.clone(),
                 agent.deps.clone(),
diff --git a/src/messaging/discord.rs b/src/messaging/discord.rs
index ef9c7c13f..a8ced37c3 100644
--- a/src/messaging/discord.rs
+++ b/src/messaging/discord.rs
@@ -835,6 +835,7 @@ fn extract_content(message: &Message) -> MessageContent {
                 url: attachment.url.clone(),
                 size_bytes: Some(attachment.size as u64),
                 auth_header: None,
+                pre_saved_id: None,
             })
             .collect();
 
diff --git a/src/messaging/slack.rs b/src/messaging/slack.rs
index d3ace875d..4aad68c77 100644
--- a/src/messaging/slack.rs
+++ b/src/messaging/slack.rs
@@ -1390,6 +1390,7 @@ fn extract_message_content(
                     url: url.to_string(),
                     size_bytes: None,
                     auth_header: Some(format!("Bearer {}", bot_token)),
+                    pre_saved_id: None,
                 })
             })
             .collect();
diff --git a/src/messaging/telegram.rs b/src/messaging/telegram.rs
index dc6f762d1..747d40c45 100644
--- a/src/messaging/telegram.rs
+++ b/src/messaging/telegram.rs
@@ -680,6 +680,7 @@ fn extract_attachments(message: &teloxide::types::Message) -> Vec<Attachment> {
                     url: largest.file.id.to_string(),
                     size_bytes: Some(largest.file.size as u64),
                     auth_header: None,
+                    pre_saved_id: None,
                 });
             }
         }
@@ -699,6 +700,7 @@ fn extract_attachments(message: &teloxide::types::Message) -> Vec<Attachment> {
                 url: doc.document.file.id.to_string(),
                 size_bytes: Some(doc.document.file.size as u64),
                 auth_header: None,
+                pre_saved_id: None,
             });
         }
         MediaKind::Video(video) => {
@@ -717,6 +719,7 @@ fn extract_attachments(message: &teloxide::types::Message) -> Vec<Attachment> {
                 url: video.video.file.id.to_string(),
                 size_bytes: Some(video.video.file.size as u64),
                 auth_header: None,
+                pre_saved_id: None,
             });
         }
         MediaKind::Voice(voice) => {
@@ -731,6 +734,7 @@ fn extract_attachments(message: &teloxide::types::Message) -> Vec<Attachment> {
                 url: voice.voice.file.id.to_string(),
                 size_bytes: Some(voice.voice.file.size as u64),
                 auth_header: None,
+                pre_saved_id: None,
             });
         }
         MediaKind::Audio(audio) => {
@@ -749,6 +753,7 @@ fn extract_attachments(message: &teloxide::types::Message) -> Vec<Attachment> {
                 url: audio.audio.file.id.to_string(),
                 size_bytes: Some(audio.audio.file.size as u64),
                 auth_header: None,
+                pre_saved_id: None,
             });
         }
         _ => {}
diff --git a/src/notifications.rs b/src/notifications.rs
new file mode 100644
index 000000000..5d10596de
--- /dev/null
+++ b/src/notifications.rs
@@ -0,0 +1,321 @@
+//! Instance-level notification store.
+//!
+//! Persists actionable events (task approvals, worker failures, cortex
+//! observations) to the global spacebot.db so the dashboard Inbox card always
+//! has up-to-date data, even after a page reload or reconnect.
+
+use crate::error::Result;
+
+use anyhow::Context as _;
+use serde::{Deserialize, Serialize};
+use sqlx::{Row as _, SqlitePool};
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/// The class of event that triggered the notification.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize, utoipa::ToSchema)]
+#[serde(rename_all = "snake_case")]
+pub enum NotificationKind {
+    TaskApproval,
+    WorkerFailed,
+    CortexObservation,
+}
+
+impl NotificationKind {
+    pub fn as_str(self) -> &'static str {
+        match self {
+            NotificationKind::TaskApproval => "task_approval",
+            NotificationKind::WorkerFailed => "worker_failed",
+            NotificationKind::CortexObservation => "cortex_observation",
+        }
+    }
+}
+
+/// Urgency level of the notification.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize, utoipa::ToSchema)]
+#[serde(rename_all = "snake_case")]
+pub enum NotificationSeverity {
+    Info,
+    Warn,
+    Error,
+}
+
+impl NotificationSeverity {
+    pub fn as_str(self) -> &'static str {
+        match self {
+            NotificationSeverity::Info => "info",
+            NotificationSeverity::Warn => "warn",
+            NotificationSeverity::Error => "error",
+        }
+    }
+}
+
+/// A persisted notification row.
+#[derive(Debug, Clone, Serialize, Deserialize, utoipa::ToSchema)]
+pub struct Notification {
+    pub id: String,
+    pub kind: String,
+    pub severity: String,
+    pub title: String,
+    pub body: Option<String>,
+    pub agent_id: Option<String>,
+    pub related_entity_type: Option<String>,
+    pub related_entity_id: Option<String>,
+    pub action_url: Option<String>,
+    pub metadata: Option<String>,
+    pub created_at: String,
+    pub read_at: Option<String>,
+    pub dismissed_at: Option<String>,
+}
+
+/// Input for creating a notification.
+#[derive(Debug, Clone)]
+pub struct NewNotification {
+    pub kind: NotificationKind,
+    pub severity: NotificationSeverity,
+    pub title: String,
+    pub body: Option<String>,
+    pub agent_id: Option<String>,
+    pub related_entity_type: Option<String>,
+    pub related_entity_id: Option<String>,
+    pub action_url: Option<String>,
+    pub metadata: Option<serde_json::Value>,
+}
+
+/// Filters for listing notifications.
+#[derive(Debug, Default)]
+pub struct NotificationFilter {
+    /// If true, only return notifications where `read_at IS NULL`.
+    pub unread_only: bool,
+    /// If false (default), exclude dismissed notifications.
+    pub include_dismissed: bool,
+    pub agent_id: Option<String>,
+    pub kind: Option<NotificationKind>,
+    pub limit: Option<i64>,
+    pub offset: Option<i64>,
+}
+
+// ---------------------------------------------------------------------------
+// Store
+// ---------------------------------------------------------------------------
+
+#[derive(Debug, Clone)]
+pub struct NotificationStore {
+    pool: SqlitePool,
+}
+
+const SELECT_COLUMNS: &str = "SELECT id, kind, severity, title, body, agent_id, \
+    related_entity_type, related_entity_id, action_url, metadata, \
+    created_at, read_at, dismissed_at";
+
+impl NotificationStore {
+    pub fn new(pool: SqlitePool) -> Self {
+        Self { pool }
+    }
+
+    /// Insert a notification. Returns the new row, or `None` if a duplicate
+    /// undismissed notification for the same entity already exists.
+    pub async fn insert(&self, n: NewNotification) -> Result<Option<Notification>> {
+        let id = uuid::Uuid::new_v4().to_string();
+        let metadata_json = n.metadata.as_ref().map(|m| m.to_string());
+
+        let affected = sqlx::query(
+            r#"
+            INSERT OR IGNORE INTO notifications
+                (id, kind, severity, title, body, agent_id,
+                 related_entity_type, related_entity_id, action_url, metadata)
+            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+            "#,
+        )
+        .bind(&id)
+        .bind(n.kind.as_str())
+        .bind(n.severity.as_str())
+        .bind(&n.title)
+        .bind(&n.body)
+        .bind(&n.agent_id)
+        .bind(&n.related_entity_type)
+        .bind(&n.related_entity_id)
+        .bind(&n.action_url)
+        .bind(&metadata_json)
+        .execute(&self.pool)
+        .await
+        .context("failed to insert notification")?
+        .rows_affected();
+
+        if affected == 0 {
+            return Ok(None);
+        }
+
+        self.get_by_id(&id).await.map(Some)
+    }
+
+    pub async fn get_by_id(&self, id: &str) -> Result<Notification> {
+        let row = sqlx::query(&format!("{SELECT_COLUMNS} FROM notifications WHERE id = ?"))
+            .bind(id)
+            .fetch_one(&self.pool)
+            .await
+            .context("failed to fetch notification by id")?;
+
+        notification_from_row(row)
+    }
+
+    pub async fn list(&self, filter: NotificationFilter) -> Result<Vec<Notification>> {
+        let mut query = format!("{SELECT_COLUMNS} FROM notifications WHERE 1=1");
+
+        if filter.unread_only {
+            query.push_str(" AND read_at IS NULL");
+        }
+        if !filter.include_dismissed {
+            query.push_str(" AND dismissed_at IS NULL");
+        }
+        if filter.agent_id.is_some() {
+            query.push_str(" AND agent_id = ?");
+        }
+        if filter.kind.is_some() {
+            query.push_str(" AND kind = ?");
+        }
+        query.push_str(" ORDER BY created_at DESC LIMIT ? OFFSET ?");
+
+        let mut sql = sqlx::query(&query);
+        if let Some(ref agent_id) = filter.agent_id {
+            sql = sql.bind(agent_id);
+        }
+        if let Some(kind) = filter.kind {
+            sql = sql.bind(kind.as_str());
+        }
+        sql = sql.bind(filter.limit.unwrap_or(50).clamp(1, 500));
+        sql = sql.bind(filter.offset.unwrap_or(0));
+
+        let rows = sql
+            .fetch_all(&self.pool)
+            .await
+            .context("failed to list notifications")?;
+
+        rows.into_iter().map(notification_from_row).collect()
+    }
+
+    pub async fn unread_count(&self) -> Result<i64> {
+        let count: i64 = sqlx::query_scalar(
+            "SELECT COUNT(*) FROM notifications WHERE read_at IS NULL AND dismissed_at IS NULL",
+        )
+        .fetch_one(&self.pool)
+        .await
+        .context("failed to count unread notifications")?;
+        Ok(count)
+    }
+
+    /// Mark a single notification as read. Returns true if it was updated.
+    pub async fn mark_read(&self, id: &str) -> Result<bool> {
+        let affected = sqlx::query(
+            "UPDATE notifications SET read_at = strftime('%Y-%m-%dT%H:%M:%SZ', 'now') \
+             WHERE id = ? AND read_at IS NULL",
+        )
+        .bind(id)
+        .execute(&self.pool)
+        .await
+        .context("failed to mark notification read")?
+        .rows_affected();
+        Ok(affected > 0)
+    }
+
+    /// Mark all undismissed notifications as read. Returns the count updated.
+    pub async fn mark_all_read(&self) -> Result<u64> {
+        let affected = sqlx::query(
+            "UPDATE notifications SET read_at = strftime('%Y-%m-%dT%H:%M:%SZ', 'now') \
+             WHERE read_at IS NULL AND dismissed_at IS NULL",
+        )
+        .execute(&self.pool)
+        .await
+        .context("failed to mark all notifications read")?
+        .rows_affected();
+        Ok(affected)
+    }
+
+    /// Dismiss a single notification. Returns true if it was updated.
+    pub async fn dismiss(&self, id: &str) -> Result<bool> {
+        let affected = sqlx::query(
+            "UPDATE notifications SET \
+             dismissed_at = strftime('%Y-%m-%dT%H:%M:%SZ', 'now'), \
+             read_at = COALESCE(read_at, strftime('%Y-%m-%dT%H:%M:%SZ', 'now')) \
+             WHERE id = ? AND dismissed_at IS NULL",
+        )
+        .bind(id)
+        .execute(&self.pool)
+        .await
+        .context("failed to dismiss notification")?
+        .rows_affected();
+        Ok(affected > 0)
+    }
+
+    /// Dismiss all active (undismissed) notifications for a given entity.
+    /// Used to automatically clean up e.g. task_approval notifications when a task is approved.
+    pub async fn dismiss_by_entity(
+        &self,
+        kind: &str,
+        entity_type: &str,
+        entity_id: &str,
+    ) -> Result<u64> {
+        let affected = sqlx::query(
+            "UPDATE notifications SET \
+             dismissed_at = strftime('%Y-%m-%dT%H:%M:%SZ', 'now'), \
+             read_at = COALESCE(read_at, strftime('%Y-%m-%dT%H:%M:%SZ', 'now')) \
+             WHERE kind = ? AND related_entity_type = ? AND related_entity_id = ? \
+             AND dismissed_at IS NULL",
+        )
+        .bind(kind)
+        .bind(entity_type)
+        .bind(entity_id)
+        .execute(&self.pool)
+        .await
+        .context("failed to dismiss notifications by entity")?
+        .rows_affected();
+        Ok(affected)
+    }
+
+    /// Dismiss all already-read notifications. Returns the count updated.
+    pub async fn dismiss_read(&self) -> Result<u64> {
+        let affected = sqlx::query(
+            "UPDATE notifications SET dismissed_at = strftime('%Y-%m-%dT%H:%M:%SZ', 'now') \
+             WHERE read_at IS NOT NULL AND dismissed_at IS NULL",
+        )
+        .execute(&self.pool)
+        .await
+        .context("failed to dismiss read notifications")?
+        .rows_affected();
+        Ok(affected)
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Row mapping
+// ---------------------------------------------------------------------------
+
+fn notification_from_row(row: sqlx::sqlite::SqliteRow) -> Result<Notification> {
+    Ok(Notification {
+        id: row
+            .try_get("id")
+            .context("failed to read notification id")?,
+        kind: row
+            .try_get("kind")
+            .context("failed to read notification kind")?,
+        severity: row
+            .try_get("severity")
+            .context("failed to read notification severity")?,
+        title: row
+            .try_get("title")
+            .context("failed to read notification title")?,
+        body: row.try_get("body").ok(),
+        agent_id: row.try_get("agent_id").ok(),
+        related_entity_type: row.try_get("related_entity_type").ok(),
+        related_entity_id: row.try_get("related_entity_id").ok(),
+        action_url: row.try_get("action_url").ok(),
+        metadata: row.try_get("metadata").ok(),
+        created_at: row
+            .try_get("created_at")
+            .context("failed to read notification created_at")?,
+        read_at: row.try_get("read_at").ok(),
+        dismissed_at: row.try_get("dismissed_at").ok(),
+    })
+}
diff --git a/src/projects.rs b/src/projects.rs
index 498f17831..7e8407441 100644
--- a/src/projects.rs
+++ b/src/projects.rs
@@ -1,25 +1,25 @@
 //! Project workspace tracking: repos, worktrees, and project-level configuration.
 
 pub mod git;
+pub mod migration;
 pub mod store;
 
 pub use store::{
     CreateProjectInput, CreateRepoInput, CreateWorktreeInput, Project, ProjectRepo, ProjectStatus,
-    ProjectStore, ProjectWorktree, UpdateProjectInput,
+    ProjectStore, ProjectWorktree, UpdateProjectInput, detect_logo,
 };
 
 /// Refresh the sandbox allowlist with all active project root paths.
 ///
-/// Queries all active projects for the agent and injects their root paths
-/// into the sandbox config. Takes effect immediately for subsequent subprocess
-/// calls. Should be called after project create/delete/scan.
+/// Queries all active projects and injects their root paths into the sandbox
+/// config. Takes effect immediately for subsequent subprocess calls. Should be
+/// called after project create/delete/scan.
 pub async fn refresh_sandbox_project_paths(
     project_store: &ProjectStore,
-    agent_id: &str,
     sandbox: &crate::sandbox::Sandbox,
 ) {
     let projects = match project_store
-        .list_projects(agent_id, Some(ProjectStatus::Active))
+        .list_projects(Some(ProjectStatus::Active))
         .await
     {
         Ok(projects) => projects,
diff --git a/src/projects/migration.rs b/src/projects/migration.rs
new file mode 100644
index 000000000..45a02d6da
--- /dev/null
+++ b/src/projects/migration.rs
@@ -0,0 +1,284 @@
+//! One-time migration of per-agent project data to the instance database.
+//!
+//! Scans each agent's per-agent DB for rows in the `projects`,
+//! `project_repos`, and `project_worktrees` tables and inserts them into the
+//! shared instance database. Deduplicates projects by `root_path` — the first
+//! agent encountered for a given path wins. Migration is idempotent via a
+//! marker file.
+
+use anyhow::Context as _;
+use sqlx::{Row as _, SqlitePool};
+
+use std::path::{Path, PathBuf};
+
+const MIGRATION_MARKER: &str = ".projects_migrated";
+
+/// Migrate all per-agent projects/repos/worktrees to the instance database.
+pub async fn migrate_legacy_projects(
+    instance_dir: &Path,
+    instance_pool: &SqlitePool,
+) -> anyhow::Result<()> {
+    let data_dir = instance_dir.join("data");
+    let marker_path = data_dir.join(MIGRATION_MARKER);
+
+    if marker_path.exists() {
+        tracing::debug!("instance project migration already completed, skipping");
+        return Ok(());
+    }
+
+    let agents_dir = instance_dir.join("agents");
+    if !agents_dir.exists() {
+        tracing::debug!("no agents directory found, skipping project migration");
+        write_marker(&marker_path)?;
+        return Ok(());
+    }
+
+    let mut total_projects = 0u64;
+    let mut total_repos = 0u64;
+    let mut total_worktrees = 0u64;
+
+    let entries = std::fs::read_dir(&agents_dir)
+        .with_context(|| format!("failed to read agents directory: {}", agents_dir.display()))?;
+
+    for entry in entries {
+        let entry = entry.context("failed to read agents directory entry")?;
+        let agent_dir = entry.path();
+        if !agent_dir.is_dir() {
+            continue;
+        }
+
+        let agent_id = agent_dir
+            .file_name()
+            .and_then(|name| name.to_str())
+            .unwrap_or("unknown")
+            .to_string();
+
+        // Try new name first (agent.db), fall back to legacy (spacebot.db).
+        let db_path = find_agent_db(&agent_dir);
+        let Some(db_path) = db_path else { continue };
+
+        match migrate_agent_projects(&db_path, instance_pool).await {
+            Ok((projects, repos, worktrees)) => {
+                if projects + repos + worktrees > 0 {
+                    tracing::info!(
+                        agent_id,
+                        projects,
+                        repos,
+                        worktrees,
+                        "migrated legacy projects to instance database"
+                    );
+                }
+                total_projects += projects;
+                total_repos += repos;
+                total_worktrees += worktrees;
+            }
+            Err(error) => {
+                tracing::error!(
+                    agent_id,
+                    %error,
+                    "failed to migrate projects for agent — migration incomplete"
+                );
+                return Err(error);
+            }
+        }
+    }
+
+    write_marker(&marker_path)?;
+
+    if total_projects + total_repos + total_worktrees > 0 {
+        tracing::info!(
+            total_projects,
+            total_repos,
+            total_worktrees,
+            "legacy project migration complete"
+        );
+    }
+
+    Ok(())
+}
+
+fn find_agent_db(agent_dir: &Path) -> Option<PathBuf> {
+    let data_dir = agent_dir.join("data");
+    let new_db = data_dir.join("agent.db");
+    if new_db.exists() {
+        return Some(new_db);
+    }
+    let legacy_db = data_dir.join("spacebot.db");
+    if legacy_db.exists() {
+        return Some(legacy_db);
+    }
+    None
+}
+
+async fn migrate_agent_projects(
+    db_path: &Path,
+    instance_pool: &SqlitePool,
+) -> anyhow::Result<(u64, u64, u64)> {
+    let url = format!("sqlite:{}?mode=ro", db_path.display());
+    let agent_pool = SqlitePool::connect(&url)
+        .await
+        .with_context(|| format!("failed to connect to agent database: {}", db_path.display()))?;
+
+    let table_exists: bool = sqlx::query_scalar(
+        "SELECT COUNT(*) > 0 FROM sqlite_master WHERE type = 'table' AND name = 'projects'",
+    )
+    .fetch_one(&agent_pool)
+    .await
+    .unwrap_or(false);
+
+    if !table_exists {
+        agent_pool.close().await;
+        return Ok((0, 0, 0));
+    }
+
+    // Read columns — handle both old schema (agent_id) and new schema (post-migration).
+    let rows = sqlx::query("SELECT * FROM projects")
+        .fetch_all(&agent_pool)
+        .await
+        .context("failed to read legacy projects")?;
+
+    let mut migrated_projects = 0u64;
+    let mut migrated_repos = 0u64;
+    let mut migrated_worktrees = 0u64;
+
+    for row in &rows {
+        let id: String = row.try_get("id").context("missing project id")?;
+        let root_path: String = row.try_get("root_path").context("missing root_path")?;
+
+        // Skip if this project (by id) or root_path already exists in instance DB.
+        let already_exists: bool =
+            sqlx::query_scalar("SELECT COUNT(*) > 0 FROM projects WHERE id = ? OR root_path = ?")
+                .bind(&id)
+                .bind(&root_path)
+                .fetch_one(instance_pool)
+                .await
+                .unwrap_or(false);
+
+        if already_exists {
+            continue;
+        }
+
+        let name: String = row.try_get("name").unwrap_or_default();
+        let description: String = row.try_get("description").unwrap_or_default();
+        let icon: String = row.try_get("icon").unwrap_or_default();
+        let tags: String = row.try_get("tags").unwrap_or_else(|_| "[]".to_string());
+        let logo_path: Option<String> = row.try_get("logo_path").unwrap_or(None);
+        let settings: String = row.try_get("settings").unwrap_or_else(|_| "{}".to_string());
+        let status: String = row
+            .try_get("status")
+            .unwrap_or_else(|_| "active".to_string());
+        let created_at: String = row.try_get("created_at").unwrap_or_default();
+        let updated_at: String = row.try_get("updated_at").unwrap_or_default();
+
+        sqlx::query(
+            "INSERT INTO projects (id, name, description, icon, tags, root_path, logo_path, settings, status, created_at, updated_at)
+             VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)",
+        )
+        .bind(&id)
+        .bind(&name)
+        .bind(&description)
+        .bind(&icon)
+        .bind(&tags)
+        .bind(&root_path)
+        .bind(&logo_path)
+        .bind(&settings)
+        .bind(&status)
+        .bind(&created_at)
+        .bind(&updated_at)
+        .execute(instance_pool)
+        .await
+        .with_context(|| format!("failed to insert migrated project: {id}"))?;
+
+        migrated_projects += 1;
+
+        // Copy repos for this project.
+        let repo_rows = sqlx::query("SELECT * FROM project_repos WHERE project_id = ?")
+            .bind(&id)
+            .fetch_all(&agent_pool)
+            .await
+            .context("failed to read legacy repos")?;
+
+        for rr in &repo_rows {
+            let repo_id: String = rr.try_get("id").context("missing repo id")?;
+            let exists: bool =
+                sqlx::query_scalar("SELECT COUNT(*) > 0 FROM project_repos WHERE id = ?")
+                    .bind(&repo_id)
+                    .fetch_one(instance_pool)
+                    .await
+                    .unwrap_or(false);
+            if exists {
+                continue;
+            }
+
+            sqlx::query(
+                "INSERT INTO project_repos (id, project_id, name, path, remote_url, default_branch, current_branch, description, disk_usage_bytes, created_at, updated_at)
+                 VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)",
+            )
+            .bind(&repo_id)
+            .bind(&id)
+            .bind(rr.try_get::<String, _>("name").unwrap_or_default())
+            .bind(rr.try_get::<String, _>("path").unwrap_or_default())
+            .bind(rr.try_get::<String, _>("remote_url").unwrap_or_default())
+            .bind(rr.try_get::<String, _>("default_branch").unwrap_or_else(|_| "main".to_string()))
+            .bind(rr.try_get::<Option<String>, _>("current_branch").unwrap_or(None))
+            .bind(rr.try_get::<String, _>("description").unwrap_or_default())
+            .bind(rr.try_get::<Option<i64>, _>("disk_usage_bytes").unwrap_or(None))
+            .bind(rr.try_get::<String, _>("created_at").unwrap_or_default())
+            .bind(rr.try_get::<String, _>("updated_at").unwrap_or_default())
+            .execute(instance_pool)
+            .await
+            .with_context(|| format!("failed to insert migrated repo: {repo_id}"))?;
+
+            migrated_repos += 1;
+        }
+
+        // Copy worktrees for this project.
+        let wt_rows = sqlx::query("SELECT * FROM project_worktrees WHERE project_id = ?")
+            .bind(&id)
+            .fetch_all(&agent_pool)
+            .await
+            .context("failed to read legacy worktrees")?;
+
+        for wr in &wt_rows {
+            let wt_id: String = wr.try_get("id").context("missing worktree id")?;
+            let exists: bool =
+                sqlx::query_scalar("SELECT COUNT(*) > 0 FROM project_worktrees WHERE id = ?")
+                    .bind(&wt_id)
+                    .fetch_one(instance_pool)
+                    .await
+                    .unwrap_or(false);
+            if exists {
+                continue;
+            }
+
+            sqlx::query(
+                "INSERT INTO project_worktrees (id, project_id, repo_id, name, path, branch, created_by, disk_usage_bytes, created_at, updated_at)
+                 VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)",
+            )
+            .bind(&wt_id)
+            .bind(&id)
+            .bind(wr.try_get::<String, _>("repo_id").unwrap_or_default())
+            .bind(wr.try_get::<String, _>("name").unwrap_or_default())
+            .bind(wr.try_get::<String, _>("path").unwrap_or_default())
+            .bind(wr.try_get::<String, _>("branch").unwrap_or_default())
+            .bind(wr.try_get::<String, _>("created_by").unwrap_or_else(|_| "user".to_string()))
+            .bind(wr.try_get::<Option<i64>, _>("disk_usage_bytes").unwrap_or(None))
+            .bind(wr.try_get::<String, _>("created_at").unwrap_or_default())
+            .bind(wr.try_get::<String, _>("updated_at").unwrap_or_default())
+            .execute(instance_pool)
+            .await
+            .with_context(|| format!("failed to insert migrated worktree: {wt_id}"))?;
+
+            migrated_worktrees += 1;
+        }
+    }
+
+    agent_pool.close().await;
+
+    Ok((migrated_projects, migrated_repos, migrated_worktrees))
+}
+
+fn write_marker(path: &Path) -> anyhow::Result<()> {
+    std::fs::write(path, "migrated")
+        .with_context(|| format!("failed to write migration marker: {}", path.display()))
+}
diff --git a/src/projects/store.rs b/src/projects/store.rs
index 2749406da..39671b213 100644
--- a/src/projects/store.rs
+++ b/src/projects/store.rs
@@ -6,6 +6,7 @@ use anyhow::Context as _;
 use serde::{Deserialize, Serialize};
 use serde_json::Value;
 use sqlx::{Row as _, SqlitePool};
+use std::path::Path;
 
 // Enums
 
@@ -63,14 +64,15 @@ pub struct ProjectSettings {
 #[derive(Debug, Clone, Serialize, Deserialize, utoipa::ToSchema)]
 pub struct Project {
     pub id: String,
-    pub agent_id: String,
     pub name: String,
     pub description: String,
     pub icon: String,
     pub tags: Vec<String>,
     pub root_path: String,
+    pub logo_path: Option<String>,
     pub settings: Value,
     pub status: ProjectStatus,
+    pub sort_order: i64,
     pub created_at: String,
     pub updated_at: String,
 }
@@ -134,7 +136,6 @@ pub struct ProjectWorktreeWithRepo {
 
 #[derive(Debug, Clone)]
 pub struct CreateProjectInput {
-    pub agent_id: String,
     pub name: String,
     pub description: String,
     pub icon: String,
@@ -149,6 +150,7 @@ pub struct UpdateProjectInput {
     pub description: Option<String>,
     pub icon: Option<String>,
     pub tags: Option<Vec<String>>,
+    pub logo_path: Option<String>,
     pub settings: Option<Value>,
     pub status: Option<ProjectStatus>,
 }
@@ -196,12 +198,11 @@ impl ProjectStore {
 
         sqlx::query(
             r#"
-            INSERT INTO projects (id, agent_id, name, description, icon, tags, root_path, settings, status)
-            VALUES (?, ?, ?, ?, ?, ?, ?, ?, 'active')
+            INSERT INTO projects (id, name, description, icon, tags, root_path, settings, status)
+            VALUES (?, ?, ?, ?, ?, ?, ?, 'active')
             "#,
         )
         .bind(&id)
-        .bind(&input.agent_id)
         .bind(&input.name)
         .bind(&input.description)
         .bind(&input.icon)
@@ -213,15 +214,14 @@ impl ProjectStore {
         .context("failed to insert project")?;
 
         Ok(self
-            .get_project(&input.agent_id, &id)
+            .get_project(&id)
             .await?
             .context("project not found after insert")?)
     }
 
-    pub async fn get_project(&self, agent_id: &str, project_id: &str) -> Result<Option<Project>> {
-        let row = sqlx::query("SELECT * FROM projects WHERE id = ? AND agent_id = ?")
+    pub async fn get_project(&self, project_id: &str) -> Result<Option<Project>> {
+        let row = sqlx::query("SELECT * FROM projects WHERE id = ?")
             .bind(project_id)
-            .bind(agent_id)
             .fetch_optional(&self.pool)
             .await
             .context("failed to fetch project")?;
@@ -229,23 +229,17 @@ impl ProjectStore {
         row.map(|r| row_to_project(&r)).transpose()
     }
 
-    pub async fn list_projects(
-        &self,
-        agent_id: &str,
-        status: Option<ProjectStatus>,
-    ) -> Result<Vec<Project>> {
+    pub async fn list_projects(&self, status: Option<ProjectStatus>) -> Result<Vec<Project>> {
         let rows = if let Some(status) = status {
             sqlx::query(
-                "SELECT * FROM projects WHERE agent_id = ? AND status = ? ORDER BY updated_at DESC",
+                "SELECT * FROM projects WHERE status = ? ORDER BY sort_order ASC, updated_at DESC",
             )
-            .bind(agent_id)
             .bind(status.as_str())
             .fetch_all(&self.pool)
             .await
             .context("failed to list projects")?
         } else {
-            sqlx::query("SELECT * FROM projects WHERE agent_id = ? ORDER BY updated_at DESC")
-                .bind(agent_id)
+            sqlx::query("SELECT * FROM projects ORDER BY sort_order ASC, updated_at DESC")
                 .fetch_all(&self.pool)
                 .await
                 .context("failed to list projects")?
@@ -254,13 +248,37 @@ impl ProjectStore {
         rows.iter().map(row_to_project).collect()
     }
 
+    /// Update the sort_order for a list of projects in a single transaction.
+    /// The caller passes IDs in the desired order; each gets sequential order values.
+    pub async fn reorder_projects(&self, ids: &[String]) -> Result<()> {
+        let mut tx = self
+            .pool
+            .begin()
+            .await
+            .context("failed to begin reorder transaction")?;
+
+        for (order, id) in ids.iter().enumerate() {
+            sqlx::query("UPDATE projects SET sort_order = ? WHERE id = ?")
+                .bind(order as i64)
+                .bind(id)
+                .execute(&mut *tx)
+                .await
+                .context("failed to update project sort_order")?;
+        }
+
+        tx.commit()
+            .await
+            .context("failed to commit reorder transaction")?;
+
+        Ok(())
+    }
+
     pub async fn update_project(
         &self,
-        agent_id: &str,
         project_id: &str,
         input: UpdateProjectInput,
     ) -> Result<Option<Project>> {
-        let existing = self.get_project(agent_id, project_id).await?;
+        let existing = self.get_project(project_id).await?;
         let Some(existing) = existing else {
             return Ok(None);
         };
@@ -270,6 +288,7 @@ impl ProjectStore {
         let icon = input.icon.unwrap_or(existing.icon);
         let tags = input.tags.unwrap_or(existing.tags);
         let tags_json = serde_json::to_string(&tags).context("failed to serialize tags")?;
+        let logo_path = input.logo_path.or(existing.logo_path);
         let settings = input.settings.unwrap_or(existing.settings);
         let settings_json =
             serde_json::to_string(&settings).context("failed to serialize settings")?;
@@ -278,30 +297,29 @@ impl ProjectStore {
         sqlx::query(
             r#"
             UPDATE projects
-            SET name = ?, description = ?, icon = ?, tags = ?, settings = ?,
-                status = ?, updated_at = CURRENT_TIMESTAMP
-            WHERE id = ? AND agent_id = ?
+            SET name = ?, description = ?, icon = ?, tags = ?, logo_path = ?,
+                settings = ?, status = ?, updated_at = CURRENT_TIMESTAMP
+            WHERE id = ?
             "#,
         )
         .bind(&name)
         .bind(&description)
         .bind(&icon)
         .bind(&tags_json)
+        .bind(&logo_path)
         .bind(&settings_json)
         .bind(status.as_str())
         .bind(project_id)
-        .bind(agent_id)
         .execute(&self.pool)
         .await
         .context("failed to update project")?;
 
-        self.get_project(agent_id, project_id).await
+        self.get_project(project_id).await
     }
 
-    pub async fn delete_project(&self, agent_id: &str, project_id: &str) -> Result<bool> {
-        let result = sqlx::query("DELETE FROM projects WHERE id = ? AND agent_id = ?")
+    pub async fn delete_project(&self, project_id: &str) -> Result<bool> {
+        let result = sqlx::query("DELETE FROM projects WHERE id = ?")
             .bind(project_id)
-            .bind(agent_id)
             .execute(&self.pool)
             .await
             .context("failed to delete project")?;
@@ -312,10 +330,9 @@ impl ProjectStore {
     /// Load a project with all its repos and worktrees.
     pub async fn get_project_with_relations(
         &self,
-        agent_id: &str,
         project_id: &str,
     ) -> Result<Option<ProjectWithRelations>> {
-        let Some(project) = self.get_project(agent_id, project_id).await? else {
+        let Some(project) = self.get_project(project_id).await? else {
             return Ok(None);
         };
         let repos = self.list_repos(project_id).await?;
@@ -548,6 +565,19 @@ impl ProjectStore {
         Ok(())
     }
 
+    /// Set the detected logo path for a project.
+    pub async fn set_logo_path(&self, project_id: &str, logo_path: Option<&str>) -> Result<()> {
+        sqlx::query(
+            "UPDATE projects SET logo_path = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?",
+        )
+        .bind(logo_path)
+        .bind(project_id)
+        .execute(&self.pool)
+        .await
+        .context("failed to update project logo_path")?;
+        Ok(())
+    }
+
     /// List worktrees belonging to a specific repo.
     pub async fn list_worktrees_for_repo(&self, repo_id: &str) -> Result<Vec<ProjectWorktree>> {
         let rows =
@@ -576,14 +606,15 @@ fn row_to_project(row: &sqlx::sqlite::SqliteRow) -> Result<Project> {
 
     Ok(Project {
         id: row.try_get("id").context("missing id")?,
-        agent_id: row.try_get("agent_id").context("missing agent_id")?,
         name: row.try_get("name").context("missing name")?,
         description: row.try_get("description").context("missing description")?,
         icon: row.try_get("icon").context("missing icon")?,
         tags,
         root_path: row.try_get("root_path").context("missing root_path")?,
+        logo_path: row.try_get("logo_path").unwrap_or(None),
         settings,
         status,
+        sort_order: row.try_get("sort_order").unwrap_or(0),
         created_at: row.try_get("created_at").context("missing created_at")?,
         updated_at: row.try_get("updated_at").context("missing updated_at")?,
     })
@@ -622,6 +653,76 @@ fn row_to_worktree(row: &sqlx::sqlite::SqliteRow) -> Result<ProjectWorktree> {
     })
 }
 
+// Logo detection
+
+/// File names we recognise as a project logo, in priority order.
+const LOGO_NAMES: &[&str] = &[
+    "logo.png",
+    "logo.svg",
+    "logo.webp",
+    "icon.png",
+    "icon.svg",
+    "icon.ico",
+    "favicon.png",
+    "favicon.ico",
+    "favicon.svg",
+];
+
+/// Detect a project logo by scanning for well-known file names up to 3 levels
+/// deep. Returns the relative path (relative to project root) of the first
+/// match. Skips hidden directories (except `.github`), `node_modules`, and
+/// `target` to keep it fast.
+pub fn detect_logo(root: &Path) -> Option<String> {
+    scan_for_logo(root, root, 0)
+}
+
+fn scan_for_logo(root: &Path, dir: &Path, depth: u8) -> Option<String> {
+    if depth > 3 {
+        return None;
+    }
+
+    // Check for logo files in this directory
+    for name in LOGO_NAMES {
+        let candidate = dir.join(name);
+        if candidate.is_file() {
+            let rel = candidate.strip_prefix(root).ok()?;
+            return Some(rel.to_string_lossy().to_string());
+        }
+    }
+
+    // Recurse into subdirectories
+    let entries = match std::fs::read_dir(dir) {
+        Ok(entries) => entries,
+        Err(_) => return None,
+    };
+
+    for entry in entries.flatten() {
+        let path = entry.path();
+        if !path.is_dir() {
+            continue;
+        }
+        let name = entry.file_name();
+        let name = name.to_string_lossy();
+        // Skip heavy/irrelevant dirs, but allow .github
+        if name == "node_modules"
+            || name == "target"
+            || name == ".git"
+            || name == "dist"
+            || name == "build"
+        {
+            continue;
+        }
+        if name.starts_with('.') && name != ".github" {
+            continue;
+        }
+        if let Some(found) = scan_for_logo(root, &path, depth + 1) {
+            return Some(found);
+        }
+    }
+
+    None
+}
+
 // Tests
 
 #[cfg(test)]
@@ -632,7 +733,7 @@ mod tests {
         let pool = SqlitePool::connect("sqlite::memory:")
             .await
             .expect("failed to create in-memory pool");
-        sqlx::migrate!("./migrations")
+        sqlx::migrate!("./migrations/global")
             .run(&pool)
             .await
             .expect("failed to run migrations");
@@ -646,7 +747,6 @@ mod tests {
 
         let project = store
             .create_project(CreateProjectInput {
-                agent_id: "agent-1".into(),
                 name: "Spacebot".into(),
                 description: "The Spacebot monorepo".into(),
                 icon: "".into(),
@@ -662,7 +762,7 @@ mod tests {
         assert_eq!(project.status, ProjectStatus::Active);
 
         let projects = store
-            .list_projects("agent-1", None)
+            .list_projects(None)
             .await
             .expect("failed to list projects");
         assert_eq!(projects.len(), 1);
@@ -676,7 +776,6 @@ mod tests {
 
         let project = store
             .create_project(CreateProjectInput {
-                agent_id: "agent-1".into(),
                 name: "Test".into(),
                 description: String::new(),
                 icon: String::new(),
@@ -732,7 +831,6 @@ mod tests {
 
         let project = store
             .create_project(CreateProjectInput {
-                agent_id: "agent-1".into(),
                 name: "Test".into(),
                 description: String::new(),
                 icon: String::new(),
@@ -745,7 +843,6 @@ mod tests {
 
         let updated = store
             .update_project(
-                "agent-1",
                 &project.id,
                 UpdateProjectInput {
                     status: Some(ProjectStatus::Archived),
@@ -760,7 +857,7 @@ mod tests {
 
         // Filtering by active should return empty.
         let active = store
-            .list_projects("agent-1", Some(ProjectStatus::Active))
+            .list_projects(Some(ProjectStatus::Active))
             .await
             .expect("failed to list");
         assert!(active.is_empty());
@@ -773,7 +870,6 @@ mod tests {
 
         let project = store
             .create_project(CreateProjectInput {
-                agent_id: "agent-1".into(),
                 name: "Test".into(),
                 description: String::new(),
                 icon: String::new(),
@@ -810,7 +906,7 @@ mod tests {
             .expect("failed to create worktree");
 
         let deleted = store
-            .delete_project("agent-1", &project.id)
+            .delete_project(&project.id)
             .await
             .expect("failed to delete project");
         assert!(deleted);
@@ -836,7 +932,6 @@ mod tests {
 
         store
             .create_project(CreateProjectInput {
-                agent_id: "agent-1".into(),
                 name: "First".into(),
                 description: String::new(),
                 icon: String::new(),
@@ -849,7 +944,6 @@ mod tests {
 
         let result = store
             .create_project(CreateProjectInput {
-                agent_id: "agent-1".into(),
                 name: "Second".into(),
                 description: String::new(),
                 icon: String::new(),
diff --git a/src/prompts/engine.rs b/src/prompts/engine.rs
index 3a7340ec8..2c10439a8 100644
--- a/src/prompts/engine.rs
+++ b/src/prompts/engine.rs
@@ -310,6 +310,8 @@ impl PromptEngine {
         tool_secret_names: &[String],
         browser_persist_session: bool,
         status_text: Option<String>,
+        wiki_enabled: bool,
+        project_context: Option<String>,
     ) -> Result<String> {
         self.render(
             "worker",
@@ -323,17 +325,25 @@ impl PromptEngine {
                 tool_secret_names => tool_secret_names,
                 browser_persist_session => browser_persist_session,
                 status_text => status_text,
+                wiki_enabled => wiki_enabled,
+                project_context => project_context,
             },
         )
     }
 
     /// Render the branch system prompt with filesystem context.
-    pub fn render_branch_prompt(&self, instance_dir: &str, workspace_dir: &str) -> Result<String> {
+    pub fn render_branch_prompt(
+        &self,
+        instance_dir: &str,
+        workspace_dir: &str,
+        wiki_enabled: bool,
+    ) -> Result<String> {
         self.render(
             "branch",
             context! {
                 instance_dir => instance_dir,
                 workspace_dir => workspace_dir,
+                wiki_enabled => wiki_enabled,
             },
         )
     }
@@ -557,6 +567,7 @@ impl PromptEngine {
             None,
             None,
             None,
+            false,
         )
     }
 
@@ -666,6 +677,7 @@ impl PromptEngine {
         backfill_transcript: Option<String>,
         working_memory: Option<String>,
         channel_activity_map: Option<String>,
+        direct_mode: bool,
     ) -> Result<String> {
         // During the transition, the bulletin is also exposed as knowledge_synthesis
         // so the template can render it under the new heading.
@@ -690,6 +702,7 @@ impl PromptEngine {
                 working_memory => working_memory,
                 channel_activity_map => channel_activity_map,
                 knowledge_synthesis => knowledge_synthesis,
+                direct_mode => direct_mode,
             },
         )
     }
diff --git a/src/prompts/text.rs b/src/prompts/text.rs
index b05b1b10c..d4400dc9d 100644
--- a/src/prompts/text.rs
+++ b/src/prompts/text.rs
@@ -154,6 +154,9 @@ fn lookup(lang: &str, key: &str) -> &'static str {
         ("en", "tools/cancel") => include_str!("../../prompts/en/tools/cancel_description.md.j2"),
         ("en", "tools/skip") => include_str!("../../prompts/en/tools/skip_description.md.j2"),
         ("en", "tools/react") => include_str!("../../prompts/en/tools/react_description.md.j2"),
+        ("en", "tools/set_outcome") => {
+            include_str!("../../prompts/en/tools/set_outcome_description.md.j2")
+        }
         ("en", "tools/set_status") => {
             include_str!("../../prompts/en/tools/set_status_description.md.j2")
         }
@@ -211,6 +214,24 @@ fn lookup(lang: &str, key: &str) -> &'static str {
         ("en", "tools/send_agent_message") => {
             include_str!("../../prompts/en/tools/send_agent_message_description.md.j2")
         }
+        ("en", "tools/wiki_create") => {
+            include_str!("../../prompts/en/tools/wiki_create_description.md.j2")
+        }
+        ("en", "tools/wiki_edit") => {
+            include_str!("../../prompts/en/tools/wiki_edit_description.md.j2")
+        }
+        ("en", "tools/wiki_read") => {
+            include_str!("../../prompts/en/tools/wiki_read_description.md.j2")
+        }
+        ("en", "tools/wiki_list") => {
+            include_str!("../../prompts/en/tools/wiki_list_description.md.j2")
+        }
+        ("en", "tools/wiki_search") => {
+            include_str!("../../prompts/en/tools/wiki_search_description.md.j2")
+        }
+        ("en", "tools/wiki_history") => {
+            include_str!("../../prompts/en/tools/wiki_history_description.md.j2")
+        }
         ("en", "tools/task_create") => {
             include_str!("../../prompts/en/tools/task_create_description.md.j2")
         }
diff --git a/src/skills.rs b/src/skills.rs
index b0c64c3f4..424c1d6e2 100644
--- a/src/skills.rs
+++ b/src/skills.rs
@@ -4,14 +4,16 @@
 //! (name, description, metadata) and a markdown body with instructions.
 //! Compatible with OpenClaw's skill format and skills.sh registry.
 //!
-//! Skills are loaded from two sources (later wins on name conflicts):
-//! 1. Instance-level: `{instance_dir}/skills/`
-//! 2. Agent workspace: `{workspace}/skills/`
+//! Skills are loaded from three sources (later wins on name conflicts):
+//! 1. Built-in: embedded in the binary at compile time
+//! 2. Instance-level: `{instance_dir}/skills/`
+//! 3. Agent workspace: `{workspace}/skills/`
 //!
 //! The channel sees a summary of available skills and is instructed to
 //! delegate skill work to workers. Workers receive the full skill content
 //! in their system prompt.
 
+pub mod builtin;
 mod installer;
 
 pub use installer::{install_from_file, install_from_github};
@@ -42,6 +44,8 @@ pub struct Skill {
 /// Where a skill was loaded from, used for precedence tracking.
 #[derive(Debug, Clone, PartialEq, Eq)]
 pub enum SkillSource {
+    /// Compiled into the binary.
+    Builtin,
     /// Instance-level `{instance_dir}/skills/`.
     Instance,
     /// Agent workspace `{workspace}/skills/`.
@@ -56,13 +60,18 @@ pub struct SkillSet {
 }
 
 impl SkillSet {
-    /// Load skills from instance and workspace directories.
+    /// Load skills from builtin, instance, and workspace sources.
     ///
-    /// Workspace skills override instance skills with the same name.
+    /// Precedence: Builtin < Instance < Workspace (later wins on name conflicts).
     pub async fn load(instance_skills_dir: &Path, workspace_skills_dir: &Path) -> Self {
         let mut set = Self::default();
 
-        // Instance skills (lowest precedence)
+        // Builtin skills (lowest precedence)
+        for skill in builtin::load() {
+            set.skills.insert(skill.name.to_lowercase(), skill);
+        }
+
+        // Instance skills
         if instance_skills_dir.is_dir()
             && let Ok(skills) =
                 load_skills_from_dir(instance_skills_dir, SkillSource::Instance).await
@@ -174,9 +183,8 @@ impl SkillSet {
 
     /// Remove a skill by name.
     ///
-    /// Only workspace-level skills can be removed via this method. Instance-level
-    /// skills are shared across all agents and must not be deleted through the
-    /// per-agent API.
+    /// Only workspace-level skills can be removed via this method. Built-in
+    /// and instance-level skills cannot be deleted through the per-agent API.
     ///
     /// Returns the base directory path if the skill was found and removed.
     pub async fn remove(&mut self, name: &str) -> anyhow::Result<Option<PathBuf>> {
@@ -186,6 +194,14 @@ impl SkillSet {
             None => return Ok(None),
         };
 
+        if skill.source == SkillSource::Builtin {
+            anyhow::bail!(
+                "cannot remove built-in skill '{}'; \
+                 built-in skills are compiled into the binary",
+                name
+            );
+        }
+
         if skill.source == SkillSource::Instance {
             anyhow::bail!(
                 "cannot remove instance-level skill '{}' via the agent API; \
@@ -334,7 +350,9 @@ async fn load_skill(
 ///
 /// Expects `---` delimiters. Returns the frontmatter key-value pairs and
 /// the remaining body. Compatible with OpenClaw's frontmatter format.
-fn parse_frontmatter(content: &str) -> anyhow::Result<(HashMap<String, String>, String)> {
+pub(crate) fn parse_frontmatter(
+    content: &str,
+) -> anyhow::Result<(HashMap<String, String>, String)> {
     let trimmed = content.trim_start();
 
     if !trimmed.starts_with("---") {
@@ -545,6 +563,21 @@ mod tests {
         }
     }
 
+    #[tokio::test]
+    async fn remove_builtin_skill_is_rejected() {
+        let mut set = SkillSet::default();
+        set.skills.insert(
+            "my-skill".into(),
+            make_skill("my-skill", SkillSource::Builtin),
+        );
+
+        let result = set.remove("my-skill").await;
+        assert!(result.is_err());
+        let msg = result.unwrap_err().to_string();
+        assert!(msg.contains("built-in skill"), "unexpected error: {msg}");
+        assert!(set.skills.contains_key("my-skill"));
+    }
+
     #[tokio::test]
     async fn remove_instance_skill_is_rejected() {
         let mut set = SkillSet::default();
diff --git a/src/skills/builtin.rs b/src/skills/builtin.rs
new file mode 100644
index 000000000..8c9a3494e
--- /dev/null
+++ b/src/skills/builtin.rs
@@ -0,0 +1,94 @@
+//! Built-in skills embedded in the binary.
+//!
+//! To add a built-in skill:
+//! 1. Create `skills/builtin/{name}/SKILL.md` with standard frontmatter
+//! 2. Add an entry to `BUILTIN_SKILLS` below with `include_str!`
+
+use std::path::PathBuf;
+
+use super::{Skill, SkillSource, parse_frontmatter};
+
+/// Each entry is `(directory_name, raw SKILL.md content)`.
+const BUILTIN_SKILLS: &[(&str, &str)] = &[(
+    "wiki-writing",
+    include_str!("../../skills/builtin/wiki-writing/SKILL.md"),
+)];
+
+/// Parse all built-in skills from embedded content.
+pub fn load() -> Vec<Skill> {
+    BUILTIN_SKILLS
+        .iter()
+        .filter_map(|(dir_name, raw)| match parse_builtin(dir_name, raw) {
+            Ok(skill) => Some(skill),
+            Err(error) => {
+                tracing::warn!(
+                    skill = %dir_name,
+                    %error,
+                    "failed to parse builtin skill"
+                );
+                None
+            }
+        })
+        .collect()
+}
+
+fn parse_builtin(dir_name: &str, raw: &str) -> anyhow::Result<Skill> {
+    let (frontmatter, body) = parse_frontmatter(raw)?;
+
+    let name = frontmatter
+        .get("name")
+        .cloned()
+        .unwrap_or_else(|| dir_name.to_string());
+
+    let description = frontmatter.get("description").cloned().unwrap_or_default();
+
+    Ok(Skill {
+        name,
+        description,
+        file_path: PathBuf::from(format!("builtin://{dir_name}/SKILL.md")),
+        base_dir: PathBuf::from(format!("builtin://{dir_name}")),
+        content: body,
+        source: SkillSource::Builtin,
+        source_repo: None,
+    })
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn load_returns_builtin_skills() {
+        let skills = load();
+        assert!(!skills.is_empty());
+        assert!(skills.iter().all(|s| s.source == SkillSource::Builtin));
+    }
+
+    #[test]
+    fn wiki_writing_skill_is_loaded() {
+        let skills = load();
+        let wiki = skills.iter().find(|s| s.name == "wiki-writing");
+        assert!(wiki.is_some(), "wiki-writing skill should be present");
+        let wiki = wiki.unwrap();
+        assert!(!wiki.description.is_empty());
+        assert!(wiki.content.contains("## Language"));
+    }
+
+    #[test]
+    fn parse_builtin_skill() {
+        let raw = "---\nname: test-skill\ndescription: A test skill.\n---\n\n# Test\n\nBody here.";
+        let skill = parse_builtin("test-skill", raw).unwrap();
+        assert_eq!(skill.name, "test-skill");
+        assert_eq!(skill.description, "A test skill.");
+        assert_eq!(skill.source, SkillSource::Builtin);
+        assert!(skill.content.contains("# Test"));
+        assert!(skill.file_path.to_string_lossy().contains("builtin://"));
+    }
+
+    #[test]
+    fn parse_builtin_falls_back_to_dir_name() {
+        let raw = "---\ndescription: No name field.\n---\n\nBody.";
+        let skill = parse_builtin("fallback-name", raw).unwrap();
+        assert_eq!(skill.name, "fallback-name");
+    }
+}
diff --git a/src/tasks/migration.rs b/src/tasks/migration.rs
index ea65b5ffb..430f77589 100644
--- a/src/tasks/migration.rs
+++ b/src/tasks/migration.rs
@@ -61,10 +61,16 @@ pub async fn migrate_legacy_tasks(
             .unwrap_or("unknown")
             .to_string();
 
-        let db_path = agent_dir.join("data").join("spacebot.db");
-        if !db_path.exists() {
+        // Try new per-agent name first, fall back to legacy.
+        let new_db = agent_dir.join("data").join("agent.db");
+        let legacy_db = agent_dir.join("data").join("spacebot.db");
+        let db_path = if new_db.exists() {
+            new_db
+        } else if legacy_db.exists() {
+            legacy_db
+        } else {
             continue;
-        }
+        };
 
         match migrate_agent_tasks(&agent_id, &db_path, global_pool).await {
             Ok(count) => {
diff --git a/src/tasks/store.rs b/src/tasks/store.rs
index db3b0d117..159bd13a3 100644
--- a/src/tasks/store.rs
+++ b/src/tasks/store.rs
@@ -542,6 +542,7 @@ pub fn can_transition(current: TaskStatus, next: TaskStatus) -> bool {
             | (TaskStatus::InProgress, TaskStatus::Done)
             | (TaskStatus::InProgress, TaskStatus::Ready)
             | (TaskStatus::Backlog, TaskStatus::Ready)
+            | (TaskStatus::Done, TaskStatus::Ready)
     )
 }
 
diff --git a/src/tools.rs b/src/tools.rs
index 7eb953b24..f00fdcbc4 100644
--- a/src/tools.rs
+++ b/src/tools.rs
@@ -52,6 +52,7 @@ pub mod secret_set;
 pub mod send_agent_message;
 pub mod send_file;
 pub mod send_message_to_another_channel;
+pub mod set_outcome;
 pub mod set_status;
 pub mod shell;
 pub mod skills_search;
@@ -62,6 +63,12 @@ pub mod task_create;
 pub mod task_list;
 pub mod task_update;
 pub mod web_search;
+pub mod wiki_create;
+pub mod wiki_edit;
+pub mod wiki_history;
+pub mod wiki_list;
+pub mod wiki_read;
+pub mod wiki_search;
 pub mod worker_inspect;
 
 pub mod factory_create_agent;
@@ -116,7 +123,9 @@ pub use project_manage::{
 };
 pub use react::{ReactArgs, ReactError, ReactOutput, ReactTool};
 pub use read_skill::{ReadSkillArgs, ReadSkillError, ReadSkillOutput, ReadSkillTool};
-pub use reply::{RepliedFlag, ReplyArgs, ReplyError, ReplyOutput, ReplyTool, new_replied_flag};
+pub use reply::{
+    RepliedFlag, ReplyArgs, ReplyError, ReplyOutput, ReplyTarget, ReplyTool, new_replied_flag,
+};
 pub use route::{RouteArgs, RouteError, RouteOutput, RouteTool};
 pub use secret_set::{SecretSetArgs, SecretSetError, SecretSetOutput, SecretSetTool};
 pub use send_agent_message::{
@@ -126,6 +135,7 @@ pub use send_file::{SendFileArgs, SendFileError, SendFileOutput, SendFileTool};
 pub use send_message_to_another_channel::{
     SendMessageArgs, SendMessageError, SendMessageOutput, SendMessageTool,
 };
+pub use set_outcome::{SetOutcomeArgs, SetOutcomeError, SetOutcomeOutput, SetOutcomeTool};
 pub use set_status::{SetStatusArgs, SetStatusError, SetStatusOutput, SetStatusTool, StatusKind};
 pub use shell::{EnvVar, ShellArgs, ShellError, ShellOutput, ShellResult, ShellTool};
 pub use skills_search::{
@@ -142,6 +152,12 @@ pub use task_create::{TaskCreateArgs, TaskCreateError, TaskCreateOutput, TaskCre
 pub use task_list::{TaskListArgs, TaskListError, TaskListOutput, TaskListTool};
 pub use task_update::{TaskUpdateArgs, TaskUpdateError, TaskUpdateOutput, TaskUpdateTool};
 pub use web_search::{SearchResult, WebSearchArgs, WebSearchError, WebSearchOutput, WebSearchTool};
+pub use wiki_create::{WikiCreateArgs, WikiCreateError, WikiCreateOutput, WikiCreateTool};
+pub use wiki_edit::{WikiEditArgs, WikiEditError, WikiEditOutput, WikiEditTool};
+pub use wiki_history::{WikiHistoryArgs, WikiHistoryError, WikiHistoryOutput, WikiHistoryTool};
+pub use wiki_list::{WikiListArgs, WikiListError, WikiListOutput, WikiListTool};
+pub use wiki_read::{WikiReadArgs, WikiReadError, WikiReadOutput, WikiReadTool};
+pub use wiki_search::{WikiSearchArgs, WikiSearchError, WikiSearchOutput, WikiSearchTool};
 pub use worker_inspect::{
     WorkerInspectArgs, WorkerInspectError, WorkerInspectOutput, WorkerInspectTool,
 };
@@ -352,6 +368,7 @@ pub async fn add_channel_tools(
     handle: &ToolServerHandle,
     state: ChannelState,
     response_tx: RoutedSender,
+    reply_target: ReplyTarget,
     conversation_id: impl Into<String>,
     skip_flag: SkipFlag,
     replied_flag: RepliedFlag,
@@ -360,6 +377,7 @@ pub async fn add_channel_tools(
     allow_direct_reply: bool,
     current_adapter: Option<String>,
     slack_thread_ts: Option<&str>,
+    cron_outcome: Option<crate::cron::CronOutcome>,
 ) -> Result<(), rig::tool::server::ToolServerError> {
     let conversation_id = conversation_id.into();
 
@@ -372,12 +390,13 @@ pub async fn add_channel_tools(
             .unwrap_or_else(|| state.deps.agent_id.to_string());
         handle
             .add_tool(ReplyTool::new(
-                response_tx.clone(),
+                reply_target,
                 conversation_id.clone(),
                 state.conversation_logger.clone(),
                 state.channel_id.clone(),
                 replied_flag.clone(),
                 agent_display_name,
+                state.deps.api_state.clone(),
             ))
             .await?;
     }
@@ -409,10 +428,7 @@ pub async fn add_channel_tools(
         ))
         .await?;
     handle
-        .add_tool(ProjectManageTool::new(
-            state.deps.project_store.clone(),
-            state.deps.agent_id.to_string(),
-        ))
+        .add_tool(ProjectManageTool::new(state.deps.project_store.clone()))
         .await?;
     // Add attachment recall tool when save_attachments is enabled
     if state
@@ -447,6 +463,11 @@ pub async fn add_channel_tools(
         agent_msg = agent_msg.with_skip_flag(skip_flag.clone());
         handle.add_tool(agent_msg).await?;
     }
+    if let Some(outcome) = cron_outcome {
+        handle
+            .add_tool(SetOutcomeTool::new(outcome, conversation_id.clone()))
+            .await?;
+    }
     Ok(())
 }
 
@@ -457,6 +478,7 @@ pub async fn add_direct_mode_tools(
     handle: &ToolServerHandle,
     state: ChannelState,
     response_tx: RoutedSender,
+    reply_target: ReplyTarget,
     conversation_id: impl Into<String>,
     skip_flag: SkipFlag,
     replied_flag: RepliedFlag,
@@ -465,12 +487,14 @@ pub async fn add_direct_mode_tools(
     allow_direct_reply: bool,
     current_adapter: Option<String>,
     slack_thread_ts: Option<&str>,
+    cron_outcome: Option<crate::cron::CronOutcome>,
 ) -> Result<(), rig::tool::server::ToolServerError> {
     // First add all standard channel tools
     add_channel_tools(
         handle,
         state.clone(),
         response_tx.clone(),
+        reply_target,
         conversation_id,
         skip_flag.clone(),
         replied_flag.clone(),
@@ -479,21 +503,145 @@ pub async fn add_direct_mode_tools(
         allow_direct_reply,
         current_adapter.clone(),
         slack_thread_ts,
+        cron_outcome,
     )
     .await?;
 
-    // Then add memory tools (normally only available to branches)
+    // Memory tools (normally only available to branches)
     handle
         .add_tool(MemoryRecallTool::new(state.deps.memory_search.clone()))
         .await?;
-
     handle
         .add_tool(MemorySaveTool::new(state.deps.memory_search.clone()))
         .await?;
 
-    // Add shell and file tools (normally only available to workers)
-    // These need careful implementation - for now, add basic versions
-    // Note: The actual shell/file tools might need adaptation for channel context
+    let rc = &state.deps.runtime_config;
+    let workspace = rc.workspace_dir.clone();
+    let sandbox = state.deps.sandbox.clone();
+
+    // Shell
+    handle
+        .add_tool(ShellTool::new(workspace.clone(), sandbox.clone()))
+        .await?;
+
+    // File tools
+    handle
+        .add_tool(FileReadTool::new(workspace.clone(), sandbox.clone()))
+        .await?;
+    handle
+        .add_tool(FileWriteTool::new(workspace.clone(), sandbox.clone()))
+        .await?;
+    handle
+        .add_tool(FileEditTool::new(workspace.clone(), sandbox.clone()))
+        .await?;
+    handle
+        .add_tool(FileListTool::new(workspace, sandbox))
+        .await?;
+
+    // Browser tools
+    let browser_config = rc.browser_config.load();
+    if browser_config.enabled {
+        let screenshot_dir = state.screenshot_dir.clone();
+        let context = browser::BrowserContext::new(
+            if let Some(shared) = rc
+                .shared_browser
+                .as_ref()
+                .filter(|_| browser_config.persist_session)
+            {
+                shared.clone()
+            } else {
+                browser::new_shared_browser_handle()
+            },
+            BrowserConfig::clone(&browser_config),
+            screenshot_dir,
+            rc.secrets.load().as_ref().as_ref().cloned(),
+        );
+        handle
+            .add_tool(browser::BrowserLaunchTool {
+                context: context.clone(),
+            })
+            .await?;
+        handle
+            .add_tool(browser::BrowserNavigateTool {
+                context: context.clone(),
+            })
+            .await?;
+        handle
+            .add_tool(browser::BrowserSnapshotTool {
+                context: context.clone(),
+            })
+            .await?;
+        handle
+            .add_tool(browser::BrowserClickTool {
+                context: context.clone(),
+            })
+            .await?;
+        handle
+            .add_tool(browser::BrowserTypeTool {
+                context: context.clone(),
+            })
+            .await?;
+        handle
+            .add_tool(browser::BrowserPressKeyTool {
+                context: context.clone(),
+            })
+            .await?;
+        handle
+            .add_tool(browser::BrowserScreenshotTool {
+                context: context.clone(),
+            })
+            .await?;
+        handle
+            .add_tool(browser::BrowserEvaluateTool {
+                context: context.clone(),
+            })
+            .await?;
+        handle
+            .add_tool(browser::BrowserTabOpenTool {
+                context: context.clone(),
+            })
+            .await?;
+        handle
+            .add_tool(browser::BrowserTabListTool {
+                context: context.clone(),
+            })
+            .await?;
+        handle
+            .add_tool(browser::BrowserTabCloseTool {
+                context: context.clone(),
+            })
+            .await?;
+        handle
+            .add_tool(browser::BrowserCloseTool { context })
+            .await?;
+    }
+
+    // Web search
+    if let Some(key) = rc.brave_search_key.load().as_ref().clone() {
+        handle.add_tool(WebSearchTool::new(key)).await?;
+    }
+
+    // Skill reader
+    handle.add_tool(ReadSkillTool::new(rc.clone())).await?;
+
+    // Wiki tools
+    if let Some(store) = &state.deps.wiki_store {
+        let author_id = state.deps.agent_id.to_string();
+        handle
+            .add_tool(WikiCreateTool::new(
+                store.clone(),
+                "agent".to_string(),
+                author_id.clone(),
+            ))
+            .await?;
+        handle
+            .add_tool(WikiEditTool::new(store.clone(), "agent", author_id))
+            .await?;
+        handle.add_tool(WikiReadTool::new(store.clone())).await?;
+        handle.add_tool(WikiListTool::new(store.clone())).await?;
+        handle.add_tool(WikiSearchTool::new(store.clone())).await?;
+        handle.add_tool(WikiHistoryTool::new(store.clone())).await?;
+    }
 
     Ok(())
 }
@@ -548,6 +696,57 @@ pub async fn remove_channel_tools(
     let _ = handle.remove_tool(SendMessageTool::NAME).await;
     let _ = handle.remove_tool(SendAgentMessageTool::NAME).await;
     let _ = handle.remove_tool(AttachmentRecallTool::NAME).await;
+    let _ = handle.remove_tool(SetOutcomeTool::NAME).await;
+    Ok(())
+}
+
+/// Remove direct-mode tools (channel tools + execution tools) from a running ToolServer.
+pub async fn remove_direct_mode_tools(
+    handle: &ToolServerHandle,
+    allow_direct_reply: bool,
+) -> Result<(), rig::tool::server::ToolServerError> {
+    // Remove standard channel tools first
+    remove_channel_tools(handle, allow_direct_reply).await?;
+
+    // Memory tools
+    let _ = handle.remove_tool(MemoryRecallTool::NAME).await;
+    let _ = handle.remove_tool(MemorySaveTool::NAME).await;
+
+    // Shell + file tools
+    let _ = handle.remove_tool(ShellTool::NAME).await;
+    let _ = handle.remove_tool(FileReadTool::NAME).await;
+    let _ = handle.remove_tool(FileWriteTool::NAME).await;
+    let _ = handle.remove_tool(FileEditTool::NAME).await;
+    let _ = handle.remove_tool(FileListTool::NAME).await;
+
+    // Browser tools (best-effort, may not have been registered)
+    let _ = handle.remove_tool(browser::BrowserLaunchTool::NAME).await;
+    let _ = handle.remove_tool(browser::BrowserNavigateTool::NAME).await;
+    let _ = handle.remove_tool(browser::BrowserSnapshotTool::NAME).await;
+    let _ = handle.remove_tool(browser::BrowserClickTool::NAME).await;
+    let _ = handle.remove_tool(browser::BrowserTypeTool::NAME).await;
+    let _ = handle.remove_tool(browser::BrowserPressKeyTool::NAME).await;
+    let _ = handle
+        .remove_tool(browser::BrowserScreenshotTool::NAME)
+        .await;
+    let _ = handle.remove_tool(browser::BrowserEvaluateTool::NAME).await;
+    let _ = handle.remove_tool(browser::BrowserTabOpenTool::NAME).await;
+    let _ = handle.remove_tool(browser::BrowserTabListTool::NAME).await;
+    let _ = handle.remove_tool(browser::BrowserTabCloseTool::NAME).await;
+    let _ = handle.remove_tool(browser::BrowserCloseTool::NAME).await;
+
+    // Web search + skill reader (best-effort)
+    let _ = handle.remove_tool(WebSearchTool::NAME).await;
+    let _ = handle.remove_tool(ReadSkillTool::NAME).await;
+
+    // Wiki tools (best-effort)
+    let _ = handle.remove_tool(WikiCreateTool::NAME).await;
+    let _ = handle.remove_tool(WikiEditTool::NAME).await;
+    let _ = handle.remove_tool(WikiReadTool::NAME).await;
+    let _ = handle.remove_tool(WikiListTool::NAME).await;
+    let _ = handle.remove_tool(WikiSearchTool::NAME).await;
+    let _ = handle.remove_tool(WikiHistoryTool::NAME).await;
+
     Ok(())
 }
 
@@ -581,6 +780,9 @@ pub fn create_branch_tool_server(
     channel_store: crate::conversation::ChannelStore,
     run_logger: crate::conversation::history::ProcessRunLogger,
     profile: BranchToolProfile,
+    api_state: Option<Arc<crate::api::ApiState>>,
+    wiki_store: Option<Arc<crate::wiki::WikiStore>>,
+    sandbox: Arc<crate::sandbox::Sandbox>,
 ) -> ToolServerHandle {
     let mut memory_save = memory_save_with_events(
         memory_search.clone(),
@@ -592,21 +794,41 @@ pub fn create_branch_tool_server(
         memory_save = memory_save.with_contract_state(contract_state.clone());
     }
 
+    let mut task_create = TaskCreateTool::new(task_store.clone(), agent_id.to_string(), "branch");
+    if let Some(ref api) = api_state {
+        task_create = task_create.with_api_state(api.clone());
+    }
+
     let mut server = ToolServer::new()
         .tool(memory_save)
         .tool(MemoryRecallTool::new(memory_search.clone()))
         .tool(MemoryDeleteTool::new(memory_search))
         .tool(ChannelRecallTool::new(conversation_logger, channel_store))
         .tool(SpacebotDocsTool::new())
-        .tool(EmailSearchTool::new(runtime_config))
+        .tool(EmailSearchTool::new(runtime_config.clone()))
         .tool(WorkerInspectTool::new(run_logger, agent_id.to_string()))
-        .tool(TaskCreateTool::new(
-            task_store.clone(),
-            agent_id.to_string(),
-            "branch",
-        ))
+        .tool(task_create)
         .tool(TaskListTool::new(task_store.clone(), agent_id.to_string()))
-        .tool(TaskUpdateTool::for_branch(task_store, agent_id.clone()));
+        .tool(TaskUpdateTool::for_branch(task_store, agent_id.clone()))
+        .tool(FileReadTool::new(
+            runtime_config.workspace_dir.clone(),
+            sandbox,
+        ));
+
+    if let Some(wiki) = wiki_store {
+        let author_id = agent_id.to_string();
+        server = server
+            .tool(WikiCreateTool::new(
+                wiki.clone(),
+                "agent",
+                author_id.clone(),
+            ))
+            .tool(WikiEditTool::new(wiki.clone(), "agent", author_id.clone()))
+            .tool(WikiReadTool::new(wiki.clone()))
+            .tool(WikiListTool::new(wiki.clone()))
+            .tool(WikiSearchTool::new(wiki.clone()))
+            .tool(WikiHistoryTool::new(wiki));
+    }
 
     if let BranchToolProfile::MemoryPersistence {
         contract_state,
@@ -652,6 +874,8 @@ pub fn create_worker_tool_server(
     runtime_config: Arc<RuntimeConfig>,
     worker_memory_mode: WorkerMemoryMode,
     memory_search: Arc<MemorySearch>,
+    wiki_write: bool,
+    wiki_store: Option<Arc<crate::wiki::WikiStore>>,
 ) -> ToolServerHandle {
     let mut server = ToolServer::new()
         .tool(ShellTool::new(workspace.clone(), sandbox.clone()))
@@ -692,13 +916,32 @@ pub fn create_worker_tool_server(
         server = server
             .tool(memory_save_with_events(
                 memory_search.clone(),
-                agent_id,
+                agent_id.clone(),
                 event_tx,
                 None,
             ))
             .tool(MemoryDeleteTool::new(memory_search));
     }
 
+    // Conditionally add wiki tools when wiki_write is enabled.
+    if wiki_write && let Some(store) = wiki_store {
+        server = server
+            .tool(WikiCreateTool::new(
+                store.clone(),
+                "agent".to_string(),
+                agent_id.to_string(),
+            ))
+            .tool(WikiEditTool::new(
+                store.clone(),
+                "agent".to_string(),
+                agent_id.to_string(),
+            ))
+            .tool(WikiReadTool::new(store.clone()))
+            .tool(WikiListTool::new(store.clone()))
+            .tool(WikiSearchTool::new(store.clone()))
+            .tool(WikiHistoryTool::new(store));
+    }
+
     for mcp_tool in mcp_tools {
         server = server.tool(mcp_tool);
     }
@@ -733,7 +976,14 @@ pub fn create_cortex_tool_server(
 /// tools (reply, react, skip) since the cortex chat doesn't talk to platforms.
 /// Adds `config_inspect` for live runtime config introspection and
 /// `spacebot_docs` for embedded docs/changelog retrieval.
+///
+/// **DEPRECATED:** Cortex chat is being replaced by Channel Settings.
+/// Remaining unique tools here (skills_search, install_skill, config_inspect)
+/// need to be ported to channel/worker toolsets before removal.
 #[allow(clippy::too_many_arguments)]
+#[deprecated(
+    note = "Cortex chat is being replaced by Channel Settings. Port remaining tools before removing."
+)]
 pub fn create_cortex_chat_tool_server(
     agent_id: AgentId,
     deps: crate::AgentDeps,
@@ -778,14 +1028,16 @@ pub fn create_cortex_chat_tool_server(
             runtime_config.clone(),
         ))
         .tool(SkillsSearchTool::new(runtime_config.clone()))
-        .tool(InstallSkillTool::new(runtime_config.clone(), api_state))
+        .tool(InstallSkillTool::new(
+            runtime_config.clone(),
+            api_state.clone(),
+        ))
         .tool(WorkerInspectTool::new(run_logger, agent_id.to_string()))
         .tool(spawn_tool)
-        .tool(TaskCreateTool::new(
-            task_store.clone(),
-            agent_id.to_string(),
-            "cortex",
-        ))
+        .tool(
+            TaskCreateTool::new(task_store.clone(), agent_id.to_string(), "cortex")
+                .with_api_state(api_state),
+        )
         .tool(TaskListTool::new(task_store.clone(), agent_id.to_string()))
         .tool(TaskUpdateTool::for_branch(task_store, agent_id.clone()))
         .tool(ShellTool::new(workspace.clone(), sandbox.clone()));
diff --git a/src/tools/browser.rs b/src/tools/browser.rs
index e218131cc..bcd0ed7be 100644
--- a/src/tools/browser.rs
+++ b/src/tools/browser.rs
@@ -797,7 +797,7 @@ pub(crate) struct BrowserContext {
 }
 
 impl BrowserContext {
-    fn new(
+    pub(crate) fn new(
         state: Arc<Mutex<BrowserState>>,
         config: BrowserConfig,
         screenshot_dir: PathBuf,
@@ -1276,7 +1276,7 @@ impl BrowserContext {
 
 #[derive(Debug, Clone)]
 pub struct BrowserLaunchTool {
-    context: BrowserContext,
+    pub(crate) context: BrowserContext,
 }
 
 #[derive(Debug, Deserialize, JsonSchema)]
@@ -1307,7 +1307,7 @@ impl Tool for BrowserLaunchTool {
 
 #[derive(Debug, Clone)]
 pub struct BrowserNavigateTool {
-    context: BrowserContext,
+    pub(crate) context: BrowserContext,
 }
 
 #[derive(Debug, Deserialize, JsonSchema)]
@@ -1368,7 +1368,7 @@ impl Tool for BrowserNavigateTool {
 
 #[derive(Debug, Clone)]
 pub struct BrowserSnapshotTool {
-    context: BrowserContext,
+    pub(crate) context: BrowserContext,
 }
 
 #[derive(Debug, Deserialize, JsonSchema)]
@@ -1470,7 +1470,7 @@ impl ElementTarget {
 
 #[derive(Debug, Clone)]
 pub struct BrowserClickTool {
-    context: BrowserContext,
+    pub(crate) context: BrowserContext,
 }
 
 #[derive(Debug, Deserialize, JsonSchema)]
@@ -1529,7 +1529,7 @@ impl Tool for BrowserClickTool {
 
 #[derive(Debug, Clone)]
 pub struct BrowserTypeTool {
-    context: BrowserContext,
+    pub(crate) context: BrowserContext,
 }
 
 #[derive(Debug, Deserialize, JsonSchema)]
@@ -1646,7 +1646,7 @@ impl Tool for BrowserTypeTool {
 
 #[derive(Debug, Clone)]
 pub struct BrowserPressKeyTool {
-    context: BrowserContext,
+    pub(crate) context: BrowserContext,
 }
 
 #[derive(Debug, Deserialize, JsonSchema)]
@@ -1690,7 +1690,7 @@ impl Tool for BrowserPressKeyTool {
 
 #[derive(Debug, Clone)]
 pub struct BrowserScreenshotTool {
-    context: BrowserContext,
+    pub(crate) context: BrowserContext,
 }
 
 #[derive(Debug, Deserialize, JsonSchema)]
@@ -1773,7 +1773,7 @@ impl Tool for BrowserScreenshotTool {
 
 #[derive(Debug, Clone)]
 pub struct BrowserEvaluateTool {
-    context: BrowserContext,
+    pub(crate) context: BrowserContext,
 }
 
 #[derive(Debug, Deserialize, JsonSchema)]
@@ -1838,7 +1838,7 @@ impl Tool for BrowserEvaluateTool {
 
 #[derive(Debug, Clone)]
 pub struct BrowserTabOpenTool {
-    context: BrowserContext,
+    pub(crate) context: BrowserContext,
 }
 
 #[derive(Debug, Deserialize, JsonSchema)]
@@ -1910,7 +1910,7 @@ impl Tool for BrowserTabOpenTool {
 
 #[derive(Debug, Clone)]
 pub struct BrowserTabListTool {
-    context: BrowserContext,
+    pub(crate) context: BrowserContext,
 }
 
 #[derive(Debug, Deserialize, JsonSchema)]
@@ -1965,7 +1965,7 @@ impl Tool for BrowserTabListTool {
 
 #[derive(Debug, Clone)]
 pub struct BrowserTabCloseTool {
-    context: BrowserContext,
+    pub(crate) context: BrowserContext,
 }
 
 #[derive(Debug, Deserialize, JsonSchema)]
@@ -2024,7 +2024,7 @@ impl Tool for BrowserTabCloseTool {
 
 #[derive(Debug, Clone)]
 pub struct BrowserCloseTool {
-    context: BrowserContext,
+    pub(crate) context: BrowserContext,
 }
 
 #[derive(Debug, Deserialize, JsonSchema)]
diff --git a/src/tools/file.rs b/src/tools/file.rs
index 035089145..f8e13ec5c 100644
--- a/src/tools/file.rs
+++ b/src/tools/file.rs
@@ -171,7 +171,15 @@ pub struct FileEntryOutput {
 
 #[derive(Debug, Clone)]
 pub struct FileReadTool {
-    context: FileContext,
+    pub(crate) context: FileContext,
+}
+
+impl FileReadTool {
+    pub fn new(workspace: std::path::PathBuf, sandbox: Arc<crate::sandbox::Sandbox>) -> Self {
+        Self {
+            context: FileContext::new(workspace, sandbox),
+        }
+    }
 }
 
 /// Arguments for file_read.
@@ -275,6 +283,14 @@ pub struct FileWriteTool {
     context: FileContext,
 }
 
+impl FileWriteTool {
+    pub fn new(workspace: std::path::PathBuf, sandbox: Arc<crate::sandbox::Sandbox>) -> Self {
+        Self {
+            context: FileContext::new(workspace, sandbox),
+        }
+    }
+}
+
 /// Arguments for file_write.
 #[derive(Debug, Deserialize, JsonSchema)]
 pub struct FileWriteArgs {
@@ -358,6 +374,14 @@ pub struct FileEditTool {
     context: FileContext,
 }
 
+impl FileEditTool {
+    pub fn new(workspace: std::path::PathBuf, sandbox: Arc<crate::sandbox::Sandbox>) -> Self {
+        Self {
+            context: FileContext::new(workspace, sandbox),
+        }
+    }
+}
+
 /// Arguments for file_edit.
 #[derive(Debug, Deserialize, JsonSchema)]
 pub struct FileEditArgs {
@@ -471,6 +495,14 @@ pub struct FileListTool {
     context: FileContext,
 }
 
+impl FileListTool {
+    pub fn new(workspace: std::path::PathBuf, sandbox: Arc<crate::sandbox::Sandbox>) -> Self {
+        Self {
+            context: FileContext::new(workspace, sandbox),
+        }
+    }
+}
+
 /// Arguments for file_list.
 #[derive(Debug, Deserialize, JsonSchema)]
 pub struct FileListArgs {
diff --git a/src/tools/project_manage.rs b/src/tools/project_manage.rs
index 22053c99c..c400c8235 100644
--- a/src/tools/project_manage.rs
+++ b/src/tools/project_manage.rs
@@ -18,15 +18,11 @@ use std::sync::Arc;
 #[derive(Debug, Clone)]
 pub struct ProjectManageTool {
     project_store: Arc<ProjectStore>,
-    agent_id: String,
 }
 
 impl ProjectManageTool {
-    pub fn new(project_store: Arc<ProjectStore>, agent_id: impl Into<String>) -> Self {
-        Self {
-            project_store,
-            agent_id: agent_id.into(),
-        }
+    pub fn new(project_store: Arc<ProjectStore>) -> Self {
+        Self { project_store }
     }
 }
 
@@ -156,7 +152,7 @@ impl ProjectManageTool {
     async fn handle_list(&self) -> Result<ProjectManageOutput, ProjectManageError> {
         let projects = self
             .project_store
-            .list_projects(&self.agent_id, Some(ProjectStatus::Active))
+            .list_projects(Some(ProjectStatus::Active))
             .await
             .map_err(|error| ProjectManageError(format!("failed to list projects: {error}")))?;
 
@@ -231,7 +227,6 @@ impl ProjectManageTool {
         let project = self
             .project_store
             .create_project(CreateProjectInput {
-                agent_id: self.agent_id.clone(),
                 name: name.clone(),
                 description: String::new(),
                 icon: String::new(),
@@ -335,7 +330,7 @@ impl ProjectManageTool {
 
         let project = self
             .project_store
-            .get_project(&self.agent_id, &project_id)
+            .get_project(&project_id)
             .await
             .map_err(|error| ProjectManageError(format!("failed to get project: {error}")))?
             .ok_or_else(|| ProjectManageError(format!("project not found: {project_id}")))?;
@@ -478,7 +473,7 @@ impl ProjectManageTool {
 
         let project = self
             .project_store
-            .get_project(&self.agent_id, &project_id)
+            .get_project(&project_id)
             .await
             .map_err(|error| ProjectManageError(format!("failed to get project: {error}")))?
             .ok_or_else(|| ProjectManageError(format!("project not found: {project_id}")))?;
@@ -593,7 +588,7 @@ impl ProjectManageTool {
 
         let project = self
             .project_store
-            .get_project(&self.agent_id, &project_id)
+            .get_project(&project_id)
             .await
             .map_err(|error| ProjectManageError(format!("failed to get project: {error}")))?
             .ok_or_else(|| ProjectManageError(format!("project not found: {project_id}")))?;
@@ -704,7 +699,7 @@ impl ProjectManageTool {
 
         let project = self
             .project_store
-            .get_project(&self.agent_id, &project_id)
+            .get_project(&project_id)
             .await
             .map_err(|error| ProjectManageError(format!("failed to get project: {error}")))?
             .ok_or_else(|| ProjectManageError(format!("project not found: {project_id}")))?;
@@ -780,7 +775,7 @@ impl ProjectManageTool {
 
         let project = self
             .project_store
-            .get_project(&self.agent_id, &project_id)
+            .get_project(&project_id)
             .await
             .map_err(|error| ProjectManageError(format!("failed to get project: {error}")))?
             .ok_or_else(|| ProjectManageError(format!("project not found: {project_id}")))?;
diff --git a/src/tools/reply.rs b/src/tools/reply.rs
index c38159cfd..ad8db9d78 100644
--- a/src/tools/reply.rs
+++ b/src/tools/reply.rs
@@ -1,7 +1,7 @@
 //! Reply tool for sending messages to users (channel only).
 
+use crate::api::ApiState;
 use crate::conversation::ConversationLogger;
-
 use crate::{ChannelId, OutboundResponse, RoutedSender};
 use regex::Regex;
 use rig::completion::ToolDefinition;
@@ -31,39 +31,59 @@ pub fn new_replied_flag() -> RepliedFlag {
     Arc::new(AtomicBool::new(false))
 }
 
+/// Target for reply delivery.
+#[derive(Debug, Clone)]
+pub enum ReplyTarget {
+    /// Live delivery via the messaging adapter.
+    Live(Box<RoutedSender>),
+}
+
 /// Tool for replying to users.
 ///
-/// Holds a sender channel rather than a specific InboundMessage. The channel
-/// process creates a response sender per conversation turn and the tool routes
-/// replies through it. This is compatible with Rig's ToolServer which registers
-/// tools once and shares them across calls.
-#[derive(Debug, Clone)]
+/// Holds a reply target which is either a live sender channel or a buffered
+/// accumulator for cron jobs. The channel process creates a response sender per
+/// conversation turn and the tool routes replies through it. This is compatible
+/// with Rig's ToolServer which registers tools once and shares them across calls.
+#[derive(Clone)]
 pub struct ReplyTool {
-    response_tx: RoutedSender,
+    target: ReplyTarget,
     conversation_id: String,
     conversation_logger: ConversationLogger,
     channel_id: ChannelId,
     replied_flag: RepliedFlag,
     agent_display_name: String,
+    api_state: Option<Arc<ApiState>>,
+}
+
+impl std::fmt::Debug for ReplyTool {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("ReplyTool")
+            .field("conversation_id", &self.conversation_id)
+            .field("channel_id", &self.channel_id)
+            .field("agent_display_name", &self.agent_display_name)
+            .finish()
+    }
 }
 
 impl ReplyTool {
     /// Create a new reply tool bound to a conversation's response channel.
     pub fn new(
-        response_tx: RoutedSender,
+        target: ReplyTarget,
         conversation_id: impl Into<String>,
         conversation_logger: ConversationLogger,
         channel_id: ChannelId,
         replied_flag: RepliedFlag,
         agent_display_name: impl Into<String>,
+        api_state: Option<Arc<ApiState>>,
     ) -> Self {
         Self {
-            response_tx,
+            target,
             conversation_id: conversation_id.into(),
             conversation_logger,
             channel_id,
             replied_flag,
             agent_display_name: agent_display_name.into(),
+            api_state,
         }
     }
 }
@@ -471,26 +491,43 @@ impl Tool for ReplyTool {
             OutboundResponse::Text(converted_content.clone())
         };
 
-        self.response_tx
-            .send(response)
-            .await
-            .map_err(|e| ReplyError(format!("failed to send reply: {e}")))?;
-
-        self.conversation_logger.log_bot_message_with_name(
-            &self.channel_id,
-            &converted_content,
-            Some(&self.agent_display_name),
-        );
+        // Branch on reply target: live delivery or buffered staging
+        match &self.target {
+            ReplyTarget::Live(sender) => {
+                sender
+                    .send(response)
+                    .await
+                    .map_err(|e| ReplyError(format!("failed to send reply: {e}")))?;
+
+                // Drain accumulated channel tool calls and pack into message metadata.
+                let tool_calls_json = if let Some(ref api_state) = self.api_state {
+                    let calls = api_state.take_channel_tool_calls(&self.channel_id).await;
+                    if calls.is_empty() {
+                        None
+                    } else {
+                        serde_json::to_string(&calls).ok()
+                    }
+                } else {
+                    None
+                };
+                self.conversation_logger.log_bot_message_with_metadata(
+                    &self.channel_id,
+                    &converted_content,
+                    Some(&self.agent_display_name),
+                    tool_calls_json,
+                );
+
+                tracing::debug!(conversation_id = %self.conversation_id, "reply sent to outbound channel");
+            }
+        }
 
         // Mark the turn as handled so handle_agent_result skips the fallback send.
         self.replied_flag.store(true, Ordering::Relaxed);
 
-        tracing::debug!(conversation_id = %self.conversation_id, "reply sent to outbound channel");
-
         Ok(ReplyOutput {
             success: true,
             conversation_id: self.conversation_id.clone(),
-            content: converted_content,
+            content: "Message sent.".to_string(),
         })
     }
 }
diff --git a/src/tools/set_outcome.rs b/src/tools/set_outcome.rs
new file mode 100644
index 000000000..510897d9a
--- /dev/null
+++ b/src/tools/set_outcome.rs
@@ -0,0 +1,96 @@
+//! SetOutcome tool: stores the final delivery outcome for a cron job.
+//!
+//! The cron channel works like a normal channel — `reply()` posts messages
+//! visibly in the channel UI. When the LLM is ready to deliver the final
+//! result to the configured target (e.g. Telegram), it calls `set_outcome()`
+//! with the polished content. The scheduler reads this after channel exit.
+
+use crate::cron::CronOutcome;
+use rig::completion::ToolDefinition;
+use rig::tool::Tool;
+use schemars::JsonSchema;
+use serde::{Deserialize, Serialize};
+
+/// Tool for setting the cron job's delivery outcome.
+#[derive(Debug, Clone)]
+pub struct SetOutcomeTool {
+    outcome: CronOutcome,
+    conversation_id: String,
+}
+
+impl SetOutcomeTool {
+    pub fn new(outcome: CronOutcome, conversation_id: impl Into<String>) -> Self {
+        Self {
+            outcome,
+            conversation_id: conversation_id.into(),
+        }
+    }
+}
+
+#[derive(Debug, thiserror::Error)]
+#[error("SetOutcome failed: {0}")]
+pub struct SetOutcomeError(String);
+
+/// Arguments for the set_outcome tool.
+#[derive(Debug, Deserialize, JsonSchema)]
+pub struct SetOutcomeArgs {
+    /// The final synthesized content to deliver to the cron job's target.
+    pub content: String,
+}
+
+/// Output from the set_outcome tool.
+#[derive(Debug, Serialize)]
+pub struct SetOutcomeOutput {
+    pub success: bool,
+}
+
+impl Tool for SetOutcomeTool {
+    const NAME: &'static str = "set_outcome";
+
+    type Error = SetOutcomeError;
+    type Args = SetOutcomeArgs;
+    type Output = SetOutcomeOutput;
+
+    async fn definition(&self, _prompt: String) -> ToolDefinition {
+        ToolDefinition {
+            name: Self::NAME.to_string(),
+            description: crate::prompts::text::get("tools/set_outcome").to_string(),
+            parameters: serde_json::json!({
+                "type": "object",
+                "properties": {
+                    "content": {
+                        "type": "string",
+                        "description": "The final synthesized content to deliver to the cron job's target channel when the run completes."
+                    }
+                },
+                "required": ["content"]
+            }),
+        }
+    }
+
+    async fn call(&self, args: Self::Args) -> Result<Self::Output, Self::Error> {
+        let content = args.content.trim().to_string();
+
+        if content.is_empty() {
+            return Err(SetOutcomeError("content cannot be empty".into()));
+        }
+
+        if let Some(leak) = crate::secrets::scrub::scan_for_leaks(&content) {
+            tracing::error!(
+                conversation_id = %self.conversation_id,
+                leak_prefix = %&leak[..leak.len().min(8)],
+                "set_outcome blocked content matching secret pattern"
+            );
+            return Err(SetOutcomeError("blocked: potential secret detected".into()));
+        }
+
+        self.outcome.set(content);
+
+        tracing::info!(
+            conversation_id = %self.conversation_id,
+            "cron outcome set, will be delivered when run completes"
+        );
+
+        Ok(SetOutcomeOutput { success: true })
+    }
+}
diff --git a/src/tools/skills_search.rs b/src/tools/skills_search.rs
index 032e0d504..7d21b3be4 100644
--- a/src/tools/skills_search.rs
+++ b/src/tools/skills_search.rs
@@ -259,6 +259,7 @@ impl Tool for SkillsSearchTool {
                         name: skill.name,
                         description: skill.description,
                         source: match skill.source {
+                            crate::skills::SkillSource::Builtin => "builtin".to_string(),
                             crate::skills::SkillSource::Instance => "instance".to_string(),
                             crate::skills::SkillSource::Workspace => "workspace".to_string(),
                         },
diff --git a/src/tools/spawn_worker.rs b/src/tools/spawn_worker.rs
index fbb90a3c8..1aacc5bc0 100644
--- a/src/tools/spawn_worker.rs
+++ b/src/tools/spawn_worker.rs
@@ -425,6 +425,8 @@ impl Tool for DetachedSpawnWorkerTool {
             .resolve(crate::ProcessType::Worker, None)
             .to_string();
         let tool_use_enforcement = rc.tool_use_enforcement.load();
+        let project_context =
+            crate::agent::channel_dispatch::build_project_context(&self.deps, &prompt_engine).await;
         let worker_system_prompt = prompt_engine
             .render_worker_prompt(
                 &rc.instance_dir.display().to_string(),
@@ -436,6 +438,8 @@ impl Tool for DetachedSpawnWorkerTool {
                 &tool_secret_names,
                 browser_config.persist_session,
                 worker_status_text,
+                self.deps.wiki_store.is_some(),
+                project_context,
             )
             .and_then(|prompt| {
                 prompt_engine.maybe_append_tool_use_enforcement(
@@ -461,6 +465,7 @@ impl Tool for DetachedSpawnWorkerTool {
             self.logs_dir.clone(),
             Vec::new(), // no initial history for detached workers
             crate::conversation::settings::WorkerMemoryMode::None,
+            self.deps.wiki_store.is_some(),
             None, // No model override for detached workers
         );
 
@@ -564,7 +569,6 @@ async fn resolve_directory_from_project(
     }
 
     let store = &deps.project_store;
-    let agent_id = &deps.agent_id;
 
     // Worktree resolution: look up the worktree, derive absolute path from project root.
     if let Some(worktree_id) = worktree_id
@@ -582,7 +586,7 @@ async fn resolve_directory_from_project(
                 "project_id/worktree_id mismatch — using worktree's project"
             );
         }
-        if let Ok(Some(project)) = store.get_project(agent_id, &worktree.project_id).await {
+        if let Ok(Some(project)) = store.get_project(&worktree.project_id).await {
             let abs_path = std::path::Path::new(&project.root_path).join(&worktree.path);
             return Some(abs_path.to_string_lossy().to_string());
         }
@@ -590,7 +594,7 @@ async fn resolve_directory_from_project(
 
     // Project root resolution.
     if let Some(project_id) = project_id
-        && let Ok(Some(project)) = store.get_project(agent_id, project_id).await
+        && let Ok(Some(project)) = store.get_project(project_id).await
     {
         return Some(project.root_path.clone());
     }
diff --git a/src/tools/task_create.rs b/src/tools/task_create.rs
index dabc7ead6..d8e10fee4 100644
--- a/src/tools/task_create.rs
+++ b/src/tools/task_create.rs
@@ -1,5 +1,6 @@
 //! Task creation tool for branch processes.
 
+use crate::notifications::{NewNotification, NotificationKind, NotificationSeverity};
 use crate::tasks::{CreateTaskInput, TaskPriority, TaskStatus, TaskStore, TaskSubtask};
 use rig::completion::ToolDefinition;
 use rig::tool::Tool;
@@ -7,12 +8,22 @@ use schemars::JsonSchema;
 use serde::{Deserialize, Serialize};
 use std::sync::Arc;
 
-#[derive(Debug, Clone)]
+#[derive(Clone)]
 pub struct TaskCreateTool {
     task_store: Arc<TaskStore>,
     agent_id: String,
     created_by: String,
     working_memory: Option<Arc<crate::memory::WorkingMemoryStore>>,
+    api_state: Option<Arc<crate::api::ApiState>>,
+}
+
+impl std::fmt::Debug for TaskCreateTool {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("TaskCreateTool")
+            .field("agent_id", &self.agent_id)
+            .field("created_by", &self.created_by)
+            .finish()
+    }
 }
 
 impl TaskCreateTool {
@@ -26,6 +37,7 @@ impl TaskCreateTool {
             agent_id: agent_id.into(),
             created_by: created_by.into(),
             working_memory: None,
+            api_state: None,
         }
     }
 
@@ -33,6 +45,11 @@ impl TaskCreateTool {
         self.working_memory = Some(store);
         self
     }
+
+    pub fn with_api_state(mut self, state: Arc<crate::api::ApiState>) -> Self {
+        self.api_state = Some(state);
+        self
+    }
 }
 
 #[derive(Debug, thiserror::Error)]
@@ -49,8 +66,6 @@ pub struct TaskCreateArgs {
     pub subtasks: Vec<String>,
     #[serde(default)]
     pub metadata: Option<serde_json::Value>,
-    #[serde(default)]
-    pub status: Option<String>,
 }
 
 fn default_priority() -> String {
@@ -94,11 +109,6 @@ impl Tool for TaskCreateTool {
                     "metadata": {
                         "type": "object",
                         "description": "Optional metadata object"
-                    },
-                    "status": {
-                        "type": "string",
-                        "enum": crate::tasks::TaskStatus::ALL.iter().map(|s| s.to_string()).collect::<Vec<_>>(),
-                        "description": "Optional initial status"
                     }
                 },
                 "required": ["title"]
@@ -109,11 +119,7 @@ impl Tool for TaskCreateTool {
     async fn call(&self, args: Self::Args) -> Result<Self::Output, Self::Error> {
         let priority = TaskPriority::parse(&args.priority)
             .ok_or_else(|| TaskCreateError(format!("invalid priority: {}", args.priority)))?;
-        let status = match args.status.as_deref() {
-            None => TaskStatus::Backlog,
-            Some(value) => TaskStatus::parse(value)
-                .ok_or_else(|| TaskCreateError(format!("invalid status: {value}")))?,
-        };
+        let status = TaskStatus::PendingApproval;
 
         let subtasks = args
             .subtasks
@@ -141,6 +147,32 @@ impl Tool for TaskCreateTool {
             .await
             .map_err(|error| TaskCreateError(format!("{error}")))?;
 
+        // Emit SSE event + notification so the dashboard updates in real time.
+        if let Some(api_state) = &self.api_state {
+            api_state
+                .event_tx
+                .send(crate::api::ApiEvent::TaskUpdated {
+                    agent_id: task.assigned_agent_id.clone(),
+                    task_number: task.task_number,
+                    status: task.status.to_string(),
+                    action: "created".to_string(),
+                })
+                .ok();
+            if task.status == TaskStatus::PendingApproval {
+                api_state.emit_notification(NewNotification {
+                    kind: NotificationKind::TaskApproval,
+                    severity: NotificationSeverity::Info,
+                    title: task.title.clone(),
+                    body: task.description.clone(),
+                    agent_id: Some(task.assigned_agent_id.clone()),
+                    related_entity_type: Some("task".to_string()),
+                    related_entity_id: Some(task.task_number.to_string()),
+                    action_url: Some(format!("/tasks/{}", task.task_number)),
+                    metadata: None,
+                });
+            }
+        }
+
         if let Some(working_memory) = &self.working_memory {
             working_memory
                 .emit(
diff --git a/src/tools/wiki_create.rs b/src/tools/wiki_create.rs
new file mode 100644
index 000000000..1b2d46fdf
--- /dev/null
+++ b/src/tools/wiki_create.rs
@@ -0,0 +1,116 @@
+//! wiki_create tool — create a new wiki page.
+
+use crate::wiki::{CreateWikiPageInput, WikiPageType, WikiStore};
+use rig::completion::ToolDefinition;
+use rig::tool::Tool;
+use schemars::JsonSchema;
+use serde::{Deserialize, Serialize};
+use std::sync::Arc;
+
+#[derive(Clone)]
+pub struct WikiCreateTool {
+    wiki_store: Arc<WikiStore>,
+    author_type: String,
+    author_id: String,
+}
+
+impl std::fmt::Debug for WikiCreateTool {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("WikiCreateTool")
+            .field("author_id", &self.author_id)
+            .finish()
+    }
+}
+
+impl WikiCreateTool {
+    pub fn new(
+        wiki_store: Arc<WikiStore>,
+        author_type: impl Into<String>,
+        author_id: impl Into<String>,
+    ) -> Self {
+        Self {
+            wiki_store,
+            author_type: author_type.into(),
+            author_id: author_id.into(),
+        }
+    }
+}
+
+#[derive(Debug, thiserror::Error)]
+#[error("wiki_create failed: {0}")]
+pub struct WikiCreateError(String);
+
+#[derive(Debug, Deserialize, JsonSchema)]
+pub struct WikiCreateArgs {
+    pub title: String,
+    pub page_type: String,
+    pub content: String,
+    #[serde(default)]
+    pub related: Vec<String>,
+    #[serde(default)]
+    pub edit_summary: Option<String>,
+}
+
+#[derive(Debug, Serialize)]
+pub struct WikiCreateOutput {
+    pub slug: String,
+    pub version: i64,
+    pub message: String,
+}
+
+impl Tool for WikiCreateTool {
+    const NAME: &'static str = "wiki_create";
+    type Error = WikiCreateError;
+    type Args = WikiCreateArgs;
+    type Output = WikiCreateOutput;
+
+    async fn definition(&self, _prompt: String) -> ToolDefinition {
+        ToolDefinition {
+            name: Self::NAME.to_string(),
+            description: crate::prompts::text::get("tools/wiki_create").to_string(),
+            parameters: serde_json::json!({
+                "type": "object",
+                "properties": {
+                    "title": { "type": "string" },
+                    "page_type": {
+                        "type": "string",
+                        "enum": WikiPageType::ALL.iter().map(|t| t.as_str()).collect::<Vec<_>>()
+                    },
+                    "content": { "type": "string", "description": "Full markdown body" },
+                    "related": {
+                        "type": "array",
+                        "items": { "type": "string" },
+                        "description": "Slugs of related pages"
+                    },
+                    "edit_summary": { "type": "string" }
+                },
+                "required": ["title", "page_type", "content"]
+            }),
+        }
+    }
+
+    async fn call(&self, args: Self::Args) -> Result<Self::Output, Self::Error> {
+        let page_type = WikiPageType::parse(&args.page_type)
+            .ok_or_else(|| WikiCreateError(format!("invalid page_type: {}", args.page_type)))?;
+
+        let page = self
+            .wiki_store
+            .create(CreateWikiPageInput {
+                title: args.title,
+                page_type,
+                content: args.content,
+                related: args.related,
+                author_type: self.author_type.clone(),
+                author_id: self.author_id.clone(),
+                edit_summary: args.edit_summary,
+            })
+            .await
+            .map_err(|e| WikiCreateError(e.to_string()))?;
+
+        Ok(WikiCreateOutput {
+            message: format!("Created wiki page '{}' (slug: {})", page.title, page.slug),
+            slug: page.slug,
+            version: page.version,
+        })
+    }
+}
diff --git a/src/tools/wiki_edit.rs b/src/tools/wiki_edit.rs
new file mode 100644
index 000000000..3d07d2932
--- /dev/null
+++ b/src/tools/wiki_edit.rs
@@ -0,0 +1,106 @@
+//! wiki_edit tool — partial edit on an existing wiki page with tolerant matching.
+
+use crate::wiki::{EditWikiPageInput, WikiStore};
+use rig::completion::ToolDefinition;
+use rig::tool::Tool;
+use schemars::JsonSchema;
+use serde::{Deserialize, Serialize};
+use std::sync::Arc;
+
+#[derive(Clone)]
+pub struct WikiEditTool {
+    wiki_store: Arc<WikiStore>,
+    author_type: String,
+    author_id: String,
+}
+
+impl std::fmt::Debug for WikiEditTool {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("WikiEditTool")
+            .field("author_id", &self.author_id)
+            .finish()
+    }
+}
+
+impl WikiEditTool {
+    pub fn new(
+        wiki_store: Arc<WikiStore>,
+        author_type: impl Into<String>,
+        author_id: impl Into<String>,
+    ) -> Self {
+        Self {
+            wiki_store,
+            author_type: author_type.into(),
+            author_id: author_id.into(),
+        }
+    }
+}
+
+#[derive(Debug, thiserror::Error)]
+#[error("wiki_edit failed: {0}")]
+pub struct WikiEditError(String);
+
+#[derive(Debug, Deserialize, JsonSchema)]
+pub struct WikiEditArgs {
+    pub slug: String,
+    pub old_string: String,
+    pub new_string: String,
+    #[serde(default)]
+    pub replace_all: bool,
+    #[serde(default)]
+    pub edit_summary: Option<String>,
+}
+
+#[derive(Debug, Serialize)]
+pub struct WikiEditOutput {
+    pub slug: String,
+    pub version: i64,
+    pub message: String,
+}
+
+impl Tool for WikiEditTool {
+    const NAME: &'static str = "wiki_edit";
+    type Error = WikiEditError;
+    type Args = WikiEditArgs;
+    type Output = WikiEditOutput;
+
+    async fn definition(&self, _prompt: String) -> ToolDefinition {
+        ToolDefinition {
+            name: Self::NAME.to_string(),
+            description: crate::prompts::text::get("tools/wiki_edit").to_string(),
+            parameters: serde_json::json!({
+                "type": "object",
+                "properties": {
+                    "slug": { "type": "string" },
+                    "old_string": { "type": "string", "description": "Text to find and replace" },
+                    "new_string": { "type": "string", "description": "Replacement text" },
+                    "replace_all": { "type": "boolean", "description": "Replace all occurrences (default false)" },
+                    "edit_summary": { "type": "string" }
+                },
+                "required": ["slug", "old_string", "new_string"]
+            }),
+        }
+    }
+
+    async fn call(&self, args: Self::Args) -> Result<Self::Output, Self::Error> {
+        let page = self
+            .wiki_store
+            .edit(EditWikiPageInput {
+                slug: args.slug,
+                old_string: args.old_string,
+                new_string: args.new_string,
+                replace_all: args.replace_all,
+                edit_summary: args.edit_summary,
+                author_type: self.author_type.clone(),
+                author_id: self.author_id.clone(),
+            })
+            .await
+            .map_err(|e| WikiEditError(e.to_string()))?;
+
+        Ok(WikiEditOutput {
+            message: format!("Updated '{}' — now at version {}", page.title, page.version),
+            slug: page.slug,
+            version: page.version,
+        })
+    }
+}
diff --git a/src/tools/wiki_history.rs b/src/tools/wiki_history.rs
new file mode 100644
index 000000000..3f7f174f4
--- /dev/null
+++ b/src/tools/wiki_history.rs
@@ -0,0 +1,78 @@
+//! wiki_history tool — list version history for a wiki page.
+
+use crate::wiki::{WikiPageVersion, WikiStore};
+use rig::completion::ToolDefinition;
+use rig::tool::Tool;
+use schemars::JsonSchema;
+use serde::{Deserialize, Serialize};
+use std::sync::Arc;
+
+#[derive(Clone)]
+pub struct WikiHistoryTool {
+    wiki_store: Arc<WikiStore>,
+}
+
+impl std::fmt::Debug for WikiHistoryTool {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("WikiHistoryTool").finish()
+    }
+}
+
+impl WikiHistoryTool {
+    pub fn new(wiki_store: Arc<WikiStore>) -> Self {
+        Self { wiki_store }
+    }
+}
+
+#[derive(Debug, thiserror::Error)]
+#[error("wiki_history failed: {0}")]
+pub struct WikiHistoryError(String);
+
+#[derive(Debug, Deserialize, JsonSchema)]
+pub struct WikiHistoryArgs {
+    pub slug: String,
+    #[serde(default)]
+    pub limit: Option<i64>,
+}
+
+#[derive(Debug, Serialize)]
+pub struct WikiHistoryOutput {
+    pub slug: String,
+    pub versions: Vec<WikiPageVersion>,
+}
+
+impl Tool for WikiHistoryTool {
+    const NAME: &'static str = "wiki_history";
+    type Error = WikiHistoryError;
+    type Args = WikiHistoryArgs;
+    type Output = WikiHistoryOutput;
+
+    async fn definition(&self, _prompt: String) -> ToolDefinition {
+        ToolDefinition {
+            name: Self::NAME.to_string(),
+            description: crate::prompts::text::get("tools/wiki_history").to_string(),
+            parameters: serde_json::json!({
+                "type": "object",
+                "properties": {
+                    "slug": { "type": "string" },
+                    "limit": { "type": "integer", "description": "Max versions to return (default 20)" }
+                },
+                "required": ["slug"]
+            }),
+        }
+    }
+
+    async fn call(&self, args: Self::Args) -> Result<Self::Output, Self::Error> {
+        let limit = args.limit.unwrap_or(20);
+        let versions = self
+            .wiki_store
+            .history(&args.slug, limit)
+            .await
+            .map_err(|e| WikiHistoryError(e.to_string()))?;
+
+        Ok(WikiHistoryOutput {
+            slug: args.slug,
+            versions,
+        })
+    }
+}
diff --git a/src/tools/wiki_list.rs b/src/tools/wiki_list.rs
new file mode 100644
index 000000000..9e1f183a2
--- /dev/null
+++ b/src/tools/wiki_list.rs
@@ -0,0 +1,85 @@
+//! wiki_list tool — list all wiki pages, optionally filtered by type.
+
+use crate::wiki::{WikiPageSummary, WikiPageType, WikiStore};
+use rig::completion::ToolDefinition;
+use rig::tool::Tool;
+use schemars::JsonSchema;
+use serde::{Deserialize, Serialize};
+use std::sync::Arc;
+
+#[derive(Clone)]
+pub struct WikiListTool {
+    wiki_store: Arc<WikiStore>,
+}
+
+impl std::fmt::Debug for WikiListTool {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("WikiListTool").finish()
+    }
+}
+
+impl WikiListTool {
+    pub fn new(wiki_store: Arc<WikiStore>) -> Self {
+        Self { wiki_store }
+    }
+}
+
+#[derive(Debug, thiserror::Error)]
+#[error("wiki_list failed: {0}")]
+pub struct WikiListError(String);
+
+#[derive(Debug, Deserialize, JsonSchema)]
+pub struct WikiListArgs {
+    #[serde(default)]
+    pub page_type: Option<String>,
+}
+
+#[derive(Debug, Serialize)]
+pub struct WikiListOutput {
+    pub pages: Vec<WikiPageSummary>,
+    pub total: usize,
+}
+
+impl Tool for WikiListTool {
+    const NAME: &'static str = "wiki_list";
+    type Error = WikiListError;
+    type Args = WikiListArgs;
+    type Output = WikiListOutput;
+
+    async fn definition(&self, _prompt: String) -> ToolDefinition {
+        ToolDefinition {
+            name: Self::NAME.to_string(),
+            description: crate::prompts::text::get("tools/wiki_list").to_string(),
+            parameters: serde_json::json!({
+                "type": "object",
+                "properties": {
+                    "page_type": {
+                        "type": "string",
+                        "enum": WikiPageType::ALL.iter().map(|t| t.as_str()).collect::<Vec<_>>(),
+                        "description": "Optional filter"
+                    }
+                }
+            }),
+        }
+    }
+
+    async fn call(&self, args: Self::Args) -> Result<Self::Output, Self::Error> {
+        let page_type = args
+            .page_type
+            .as_deref()
+            .map(|s| {
+                WikiPageType::parse(s)
+                    .ok_or_else(|| WikiListError(format!("invalid page_type: {s}")))
+            })
+            .transpose()?;
+
+        let pages = self
+            .wiki_store
+            .list(page_type)
+            .await
+            .map_err(|e| WikiListError(e.to_string()))?;
+
+        let total = pages.len();
+        Ok(WikiListOutput { pages, total })
+    }
+}
diff --git a/src/tools/wiki_read.rs b/src/tools/wiki_read.rs
new file mode 100644
index 000000000..23f031c8c
--- /dev/null
+++ b/src/tools/wiki_read.rs
@@ -0,0 +1,117 @@
+//! wiki_read tool — read a wiki page and resolve inline wiki: links.
+
+use crate::wiki::{WikiStore, extract_wiki_links};
+use rig::completion::ToolDefinition;
+use rig::tool::Tool;
+use schemars::JsonSchema;
+use serde::{Deserialize, Serialize};
+use std::sync::Arc;
+
+#[derive(Clone)]
+pub struct WikiReadTool {
+    wiki_store: Arc<WikiStore>,
+}
+
+impl std::fmt::Debug for WikiReadTool {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("WikiReadTool").finish()
+    }
+}
+
+impl WikiReadTool {
+    pub fn new(wiki_store: Arc<WikiStore>) -> Self {
+        Self { wiki_store }
+    }
+}
+
+#[derive(Debug, thiserror::Error)]
+#[error("wiki_read failed: {0}")]
+pub struct WikiReadError(String);
+
+#[derive(Debug, Deserialize, JsonSchema)]
+pub struct WikiReadArgs {
+    pub slug: String,
+    #[serde(default)]
+    pub version: Option<i64>,
+}
+
+#[derive(Debug, Serialize)]
+pub struct ResolvedLink {
+    pub slug: String,
+    pub title: String,
+}
+
+#[derive(Debug, Serialize)]
+pub struct WikiReadOutput {
+    pub slug: String,
+    pub title: String,
+    pub page_type: String,
+    pub content: String,
+    pub related: Vec<String>,
+    pub version: i64,
+    pub updated_at: String,
+    pub updated_by: String,
+    /// Inline wiki: links resolved to their current titles (one hop, no content).
+    pub links: Vec<ResolvedLink>,
+}
+
+impl Tool for WikiReadTool {
+    const NAME: &'static str = "wiki_read";
+    type Error = WikiReadError;
+    type Args = WikiReadArgs;
+    type Output = WikiReadOutput;
+
+    async fn definition(&self, _prompt: String) -> ToolDefinition {
+        ToolDefinition {
+            name: Self::NAME.to_string(),
+            description: crate::prompts::text::get("tools/wiki_read").to_string(),
+            parameters: serde_json::json!({
+                "type": "object",
+                "properties": {
+                    "slug": { "type": "string" },
+                    "version": { "type": "integer", "description": "Historical version number. Omit for current." }
+                },
+                "required": ["slug"]
+            }),
+        }
+    }
+
+    async fn call(&self, args: Self::Args) -> Result<Self::Output, Self::Error> {
+        let page = self
+            .wiki_store
+            .read(&args.slug, args.version)
+            .await
+            .map_err(|e| WikiReadError(e.to_string()))?
+            .ok_or_else(|| WikiReadError(format!("wiki page '{}' not found", args.slug)))?;
+
+        // Resolve inline wiki: links (titles only, no content fetch)
+        let linked_slugs = extract_wiki_links(&page.content);
+        let mut links = Vec::new();
+        for slug in linked_slugs {
+            if let Ok(Some(linked)) = self.wiki_store.load_by_slug(&slug).await {
+                links.push(ResolvedLink {
+                    slug: linked.slug,
+                    title: linked.title,
+                });
+            } else {
+                // Broken link — include with a marker so the agent notices
+                links.push(ResolvedLink {
+                    slug: slug.clone(),
+                    title: format!("[broken: {slug}]"),
+                });
+            }
+        }
+
+        Ok(WikiReadOutput {
+            slug: page.slug,
+            title: page.title,
+            page_type: page.page_type,
+            content: page.content,
+            related: page.related,
+            version: page.version,
+            updated_at: page.updated_at,
+            updated_by: page.updated_by,
+            links,
+        })
+    }
+}
diff --git a/src/tools/wiki_search.rs b/src/tools/wiki_search.rs
new file mode 100644
index 000000000..318e3429f
--- /dev/null
+++ b/src/tools/wiki_search.rs
@@ -0,0 +1,88 @@
+//! wiki_search tool — FTS search across all wiki pages.
+
+use crate::wiki::{WikiPageSummary, WikiPageType, WikiStore};
+use rig::completion::ToolDefinition;
+use rig::tool::Tool;
+use schemars::JsonSchema;
+use serde::{Deserialize, Serialize};
+use std::sync::Arc;
+
+#[derive(Clone)]
+pub struct WikiSearchTool {
+    wiki_store: Arc<WikiStore>,
+}
+
+impl std::fmt::Debug for WikiSearchTool {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("WikiSearchTool").finish()
+    }
+}
+
+impl WikiSearchTool {
+    pub fn new(wiki_store: Arc<WikiStore>) -> Self {
+        Self { wiki_store }
+    }
+}
+
+#[derive(Debug, thiserror::Error)]
+#[error("wiki_search failed: {0}")]
+pub struct WikiSearchError(String);
+
+#[derive(Debug, Deserialize, JsonSchema)]
+pub struct WikiSearchArgs {
+    pub query: String,
+    #[serde(default)]
+    pub page_type: Option<String>,
+}
+
+#[derive(Debug, Serialize)]
+pub struct WikiSearchOutput {
+    pub results: Vec<WikiPageSummary>,
+    pub total: usize,
+}
+
+impl Tool for WikiSearchTool {
+    const NAME: &'static str = "wiki_search";
+    type Error = WikiSearchError;
+    type Args = WikiSearchArgs;
+    type Output = WikiSearchOutput;
+
+    async fn definition(&self, _prompt: String) -> ToolDefinition {
+        ToolDefinition {
+            name: Self::NAME.to_string(),
+            description: crate::prompts::text::get("tools/wiki_search").to_string(),
+            parameters: serde_json::json!({
+                "type": "object",
+                "properties": {
+                    "query": { "type": "string" },
+                    "page_type": {
+                        "type": "string",
+                        "enum": WikiPageType::ALL.iter().map(|t| t.as_str()).collect::<Vec<_>>(),
+                        "description": "Optional filter"
+                    }
+                },
+                "required": ["query"]
+            }),
+        }
+    }
+
+    async fn call(&self, args: Self::Args) -> Result<Self::Output, Self::Error> {
+        let page_type = args
+            .page_type
+            .as_deref()
+            .map(|s| {
+                WikiPageType::parse(s)
+                    .ok_or_else(|| WikiSearchError(format!("invalid page_type: {s}")))
+            })
+            .transpose()?;
+
+        let results = self
+            .wiki_store
+            .search(&args.query, page_type)
+            .await
+            .map_err(|e| WikiSearchError(e.to_string()))?;
+
+        let total = results.len();
+        Ok(WikiSearchOutput { results, total })
+    }
+}
diff --git a/src/wiki.rs b/src/wiki.rs
new file mode 100644
index 000000000..3dba0c4be
--- /dev/null
+++ b/src/wiki.rs
@@ -0,0 +1,8 @@
+//! Instance-wide wiki knowledge base.
+
+mod store;
+
+pub use store::{
+    CreateWikiPageInput, EditWikiPageInput, WikiPage, WikiPageSummary, WikiPageType,
+    WikiPageVersion, WikiStore, extract_wiki_links, slugify, tolerant_replace,
+};
diff --git a/src/wiki/store.rs b/src/wiki/store.rs
new file mode 100644
index 000000000..7b738203a
--- /dev/null
+++ b/src/wiki/store.rs
@@ -0,0 +1,885 @@
+//! Instance-wide wiki storage (SQLite).
+
+use crate::error::{Result, WikiError};
+use anyhow::Context as _;
+use schemars::JsonSchema;
+use serde::{Deserialize, Serialize};
+use sqlx::{Row as _, SqlitePool};
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+#[derive(
+    Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize, JsonSchema, utoipa::ToSchema,
+)]
+#[serde(rename_all = "snake_case")]
+pub enum WikiPageType {
+    Entity,
+    Concept,
+    Decision,
+    Project,
+    Reference,
+}
+
+impl WikiPageType {
+    pub const ALL: [WikiPageType; 5] = [
+        WikiPageType::Entity,
+        WikiPageType::Concept,
+        WikiPageType::Decision,
+        WikiPageType::Project,
+        WikiPageType::Reference,
+    ];
+
+    pub fn as_str(self) -> &'static str {
+        match self {
+            WikiPageType::Entity => "entity",
+            WikiPageType::Concept => "concept",
+            WikiPageType::Decision => "decision",
+            WikiPageType::Project => "project",
+            WikiPageType::Reference => "reference",
+        }
+    }
+
+    pub fn parse(value: &str) -> Option<Self> {
+        match value {
+            "entity" => Some(WikiPageType::Entity),
+            "concept" => Some(WikiPageType::Concept),
+            "decision" => Some(WikiPageType::Decision),
+            "project" => Some(WikiPageType::Project),
+            "reference" => Some(WikiPageType::Reference),
+            _ => None,
+        }
+    }
+}
+
+impl std::fmt::Display for WikiPageType {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "{}", self.as_str())
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, utoipa::ToSchema)]
+pub struct WikiPage {
+    pub id: String,
+    pub slug: String,
+    pub title: String,
+    pub page_type: String,
+    pub content: String,
+    pub related: Vec<String>,
+    pub created_by: String,
+    pub updated_by: String,
+    pub version: i64,
+    pub archived: bool,
+    pub created_at: String,
+    pub updated_at: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, utoipa::ToSchema)]
+pub struct WikiPageVersion {
+    pub id: String,
+    pub page_id: String,
+    pub version: i64,
+    pub content: String,
+    pub edit_summary: Option<String>,
+    pub author_type: String,
+    pub author_id: String,
+    pub created_at: String,
+}
+
+#[derive(Debug, Clone)]
+pub struct CreateWikiPageInput {
+    pub title: String,
+    pub page_type: WikiPageType,
+    pub content: String,
+    pub related: Vec<String>,
+    pub author_type: String,
+    pub author_id: String,
+    pub edit_summary: Option<String>,
+}
+
+#[derive(Debug, Clone)]
+pub struct EditWikiPageInput {
+    pub slug: String,
+    pub old_string: String,
+    pub new_string: String,
+    pub replace_all: bool,
+    pub edit_summary: Option<String>,
+    pub author_type: String,
+    pub author_id: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, utoipa::ToSchema)]
+pub struct WikiPageSummary {
+    pub id: String,
+    pub slug: String,
+    pub title: String,
+    pub page_type: String,
+    pub version: i64,
+    pub updated_at: String,
+    pub updated_by: String,
+}
+
+// ---------------------------------------------------------------------------
+// Slug generation
+// ---------------------------------------------------------------------------
+
+/// Derive a URL-safe slug from a title.
+pub fn slugify(title: &str) -> String {
+    title
+        .to_lowercase()
+        .chars()
+        .map(|c| if c.is_alphanumeric() { c } else { '-' })
+        .collect::<String>()
+        .split('-')
+        .filter(|s| !s.is_empty())
+        .collect::<Vec<_>>()
+        .join("-")
+}
+
+// ---------------------------------------------------------------------------
+// Tolerant matching for wiki_edit
+// ---------------------------------------------------------------------------
+
+/// Apply a tolerant string replacement to `content`.
+/// Returns the new content if a match was found, or an error describing the failure.
+pub fn tolerant_replace(
+    content: &str,
+    old_string: &str,
+    new_string: &str,
+    replace_all: bool,
+) -> std::result::Result<String, String> {
+    // Pass 1: exact match
+    if content.contains(old_string) {
+        return Ok(if replace_all {
+            content.replace(old_string, new_string)
+        } else {
+            let count = content.matches(old_string).count();
+            if count > 1 {
+                return Err(format!(
+                    "old_string matches {count} locations. Set replace_all=true or provide more surrounding context to make it unique."
+                ));
+            }
+            content.replacen(old_string, new_string, 1)
+        });
+    }
+
+    // Pass 2: line-trimmed match — trim each line, then compare
+    let trim_lines =
+        |s: &str| -> String { s.lines().map(|l| l.trim()).collect::<Vec<_>>().join("\n") };
+    let content_trimmed = trim_lines(content);
+    let old_trimmed = trim_lines(old_string);
+    if content_trimmed.contains(&old_trimmed) {
+        // Find the original span by scanning line by line
+        let old_lines: Vec<&str> = old_string.lines().collect();
+        let content_lines: Vec<&str> = content.lines().collect();
+        if let Some(start) = find_trimmed_block(&content_lines, &old_lines) {
+            let end = start + old_lines.len();
+            let prefix = content_lines[..start].join("\n");
+            let suffix = content_lines[end..].join("\n");
+            let sep_pre = if prefix.is_empty() { "" } else { "\n" };
+            let sep_suf = if suffix.is_empty() { "" } else { "\n" };
+            let result = format!("{prefix}{sep_pre}{new_string}{sep_suf}{suffix}");
+            return Ok(result);
+        }
+    }
+
+    // Pass 3: whitespace-normalised match
+    let normalise = |s: &str| -> String { s.split_whitespace().collect::<Vec<_>>().join(" ") };
+    let content_norm = normalise(content);
+    let old_norm = normalise(old_string);
+    if content_norm.contains(&old_norm) {
+        // Best-effort: rebuild with a rough positional replacement
+        // For normalised matches we fall back to a targeted line-block scan
+        let old_lines: Vec<&str> = old_string.lines().collect();
+        let content_lines: Vec<&str> = content.lines().collect();
+        if let Some(start) = find_normalised_block(&content_lines, &old_lines) {
+            let end = start + old_lines.len();
+            let prefix = content_lines[..start].join("\n");
+            let suffix = content_lines[end..].join("\n");
+            let sep_pre = if prefix.is_empty() { "" } else { "\n" };
+            let sep_suf = if suffix.is_empty() { "" } else { "\n" };
+            return Ok(format!("{prefix}{sep_pre}{new_string}{sep_suf}{suffix}"));
+        }
+    }
+
+    // Pass 4: indentation-flexible — strip leading whitespace from each line
+    let strip_indent = |s: &str| -> String {
+        s.lines()
+            .map(|l| l.trim_start())
+            .collect::<Vec<_>>()
+            .join("\n")
+    };
+    let content_stripped = strip_indent(content);
+    let old_stripped = strip_indent(old_string);
+    if content_stripped.contains(&old_stripped) {
+        let old_lines: Vec<&str> = old_string.lines().collect();
+        let content_lines: Vec<&str> = content.lines().collect();
+        if let Some(start) = find_stripped_block(&content_lines, &old_lines) {
+            let end = start + old_lines.len();
+            let prefix = content_lines[..start].join("\n");
+            let suffix = content_lines[end..].join("\n");
+            let sep_pre = if prefix.is_empty() { "" } else { "\n" };
+            let sep_suf = if suffix.is_empty() { "" } else { "\n" };
+            return Ok(format!("{prefix}{sep_pre}{new_string}{sep_suf}{suffix}"));
+        }
+    }
+
+    // Pass 5: block anchor match — anchor on first/last lines, score interior
+    let old_lines: Vec<&str> = old_string.lines().collect();
+    if old_lines.len() >= 2 {
+        let content_lines: Vec<&str> = content.lines().collect();
+        if let Some(start) = find_anchor_block(&content_lines, &old_lines) {
+            let end = start + old_lines.len();
+            if end <= content_lines.len() {
+                let prefix = content_lines[..start].join("\n");
+                let suffix = content_lines[end..].join("\n");
+                let sep_pre = if prefix.is_empty() { "" } else { "\n" };
+                let sep_suf = if suffix.is_empty() { "" } else { "\n" };
+                return Ok(format!("{prefix}{sep_pre}{new_string}{sep_suf}{suffix}"));
+            }
+        }
+    }
+
+    Err(
+        "old_string not found. Try providing more surrounding context, or read the page first to confirm the exact text."
+            .to_string(),
+    )
+}
+
+fn find_trimmed_block(content_lines: &[&str], old_lines: &[&str]) -> Option<usize> {
+    let n = old_lines.len();
+    'outer: for i in 0..content_lines.len().saturating_sub(n - 1) {
+        for (j, old_line) in old_lines.iter().enumerate() {
+            if content_lines[i + j].trim() != old_line.trim() {
+                continue 'outer;
+            }
+        }
+        return Some(i);
+    }
+    None
+}
+
+fn find_normalised_block(content_lines: &[&str], old_lines: &[&str]) -> Option<usize> {
+    let norm = |s: &str| -> String { s.split_whitespace().collect::<Vec<_>>().join(" ") };
+    let n = old_lines.len();
+    'outer: for i in 0..content_lines.len().saturating_sub(n - 1) {
+        for (j, old_line) in old_lines.iter().enumerate() {
+            if norm(content_lines[i + j]) != norm(old_line) {
+                continue 'outer;
+            }
+        }
+        return Some(i);
+    }
+    None
+}
+
+fn find_stripped_block(content_lines: &[&str], old_lines: &[&str]) -> Option<usize> {
+    let n = old_lines.len();
+    'outer: for i in 0..content_lines.len().saturating_sub(n - 1) {
+        for (j, old_line) in old_lines.iter().enumerate() {
+            if content_lines[i + j].trim_start() != old_line.trim_start() {
+                continue 'outer;
+            }
+        }
+        return Some(i);
+    }
+    None
+}
+
+/// Levenshtein distance for anchor scoring.
+fn levenshtein(a: &str, b: &str) -> usize {
+    let a: Vec<char> = a.chars().collect();
+    let b: Vec<char> = b.chars().collect();
+    let m = a.len();
+    let n = b.len();
+    let mut dp = vec![vec![0usize; n + 1]; m + 1];
+    for (i, row) in dp.iter_mut().enumerate().take(m + 1) {
+        row[0] = i;
+    }
+    for (j, cell) in dp[0].iter_mut().enumerate().take(n + 1) {
+        *cell = j;
+    }
+    for i in 1..=m {
+        for j in 1..=n {
+            dp[i][j] = if a[i - 1] == b[j - 1] {
+                dp[i - 1][j - 1]
+            } else {
+                1 + dp[i - 1][j - 1].min(dp[i - 1][j]).min(dp[i][j - 1])
+            };
+        }
+    }
+    dp[m][n]
+}
+
+fn line_similarity(a: &str, b: &str) -> f64 {
+    let a = a.trim();
+    let b = b.trim();
+    if a == b {
+        return 1.0;
+    }
+    let max_len = a.len().max(b.len());
+    if max_len == 0 {
+        return 1.0;
+    }
+    let dist = levenshtein(a, b);
+    1.0 - (dist as f64 / max_len as f64)
+}
+
+fn find_anchor_block(content_lines: &[&str], old_lines: &[&str]) -> Option<usize> {
+    let n = old_lines.len();
+    if n == 0 || content_lines.len() < n {
+        return None;
+    }
+
+    let first = old_lines[0].trim();
+    let last = old_lines[n - 1].trim();
+
+    let mut best_start = None;
+    let mut best_score = 0.6_f64; // minimum threshold
+
+    for i in 0..=content_lines.len().saturating_sub(n) {
+        let end = i + n - 1;
+        if end >= content_lines.len() {
+            break;
+        }
+
+        let first_sim = line_similarity(content_lines[i], first);
+        let last_sim = line_similarity(content_lines[end], last);
+
+        if first_sim < 0.6 || last_sim < 0.6 {
+            continue;
+        }
+
+        // Score interior lines
+        let interior_score: f64 = if n > 2 {
+            old_lines[1..n - 1]
+                .iter()
+                .zip(content_lines[i + 1..end].iter())
+                .map(|(o, c)| line_similarity(c, o))
+                .sum::<f64>()
+                / (n - 2) as f64
+        } else {
+            1.0
+        };
+
+        let score = (first_sim + last_sim + interior_score) / 3.0;
+        if score > best_score {
+            best_score = score;
+            best_start = Some(i);
+        }
+    }
+
+    best_start
+}
+
+// ---------------------------------------------------------------------------
+// wiki: link parsing
+// ---------------------------------------------------------------------------
+
+/// Extract all `wiki:slug` references from markdown content.
+pub fn extract_wiki_links(content: &str) -> Vec<String> {
+    let mut slugs = Vec::new();
+    let mut chars = content.char_indices().peekable();
+    while let Some((i, c)) = chars.next() {
+        // Look for ](wiki:
+        if c == ']'
+            && let Some((_, '(')) = chars.peek().copied()
+        {
+            chars.next();
+            let rest = &content[i + 2..];
+            if let Some(end) = rest.find(')') {
+                let href = &rest[..end];
+                if let Some(slug) = href.strip_prefix("wiki:") {
+                    slugs.push(slug.to_string());
+                }
+            }
+        }
+    }
+    slugs
+}
+
+// ---------------------------------------------------------------------------
+// Store
+// ---------------------------------------------------------------------------
+
+#[derive(Debug, Clone)]
+pub struct WikiStore {
+    pool: SqlitePool,
+}
+
+impl WikiStore {
+    pub fn new(pool: SqlitePool) -> Self {
+        Self { pool }
+    }
+
+    pub fn pool(&self) -> &SqlitePool {
+        &self.pool
+    }
+
+    /// Create a new wiki page (version 1).
+    pub async fn create(&self, input: CreateWikiPageInput) -> Result<WikiPage> {
+        let id = lower_hex_id();
+        let slug = slugify(&input.title);
+        let related_json =
+            serde_json::to_string(&input.related).context("failed to serialize related slugs")?;
+
+        // Check slug uniqueness; append suffix if needed
+        let slug = self.unique_slug(&slug).await?;
+
+        let mut tx = self
+            .pool
+            .begin()
+            .await
+            .context("failed to begin transaction")?;
+
+        sqlx::query(
+            r#"INSERT INTO wiki_pages
+               (id, slug, title, page_type, content, related, created_by, updated_by, version, archived)
+               VALUES (?, ?, ?, ?, ?, ?, ?, ?, 1, 0)"#,
+        )
+        .bind(&id)
+        .bind(&slug)
+        .bind(&input.title)
+        .bind(input.page_type.as_str())
+        .bind(&input.content)
+        .bind(&related_json)
+        .bind(&input.author_id)
+        .bind(&input.author_id)
+        .execute(&mut *tx)
+        .await
+        .context("failed to insert wiki page")?;
+
+        // Write version 1
+        let version_id = lower_hex_id();
+        sqlx::query(
+            r#"INSERT INTO wiki_page_versions (id, page_id, version, content, edit_summary, author_type, author_id)
+               VALUES (?, ?, 1, ?, ?, ?, ?)"#,
+        )
+        .bind(&version_id)
+        .bind(&id)
+        .bind(&input.content)
+        .bind(&input.edit_summary)
+        .bind(&input.author_type)
+        .bind(&input.author_id)
+        .execute(&mut *tx)
+        .await
+        .context("failed to insert wiki page version")?;
+
+        tx.commit()
+            .await
+            .context("failed to commit wiki page creation")?;
+
+        self.load_by_id(&id)
+            .await?
+            .context("page not found after insert")
+            .map_err(crate::error::Error::from)
+    }
+
+    /// Apply a tolerant edit to an existing page, creating a new version.
+    pub async fn edit(&self, input: EditWikiPageInput) -> Result<WikiPage> {
+        let page = self
+            .load_by_slug(&input.slug)
+            .await?
+            .ok_or_else(|| WikiError::NotFound {
+                slug: input.slug.clone(),
+            })?;
+
+        let new_content = tolerant_replace(
+            &page.content,
+            &input.old_string,
+            &input.new_string,
+            input.replace_all,
+        )
+        .map_err(|e| WikiError::EditFailed(e.to_string()))?;
+
+        let new_version = page.version + 1;
+
+        sqlx::query(
+            r#"UPDATE wiki_pages SET content = ?, version = ?, updated_by = ?,
+               updated_at = strftime('%Y-%m-%dT%H:%M:%fZ', 'now')
+               WHERE id = ?"#,
+        )
+        .bind(&new_content)
+        .bind(new_version)
+        .bind(&input.author_id)
+        .bind(&page.id)
+        .execute(&self.pool)
+        .await
+        .context("failed to update wiki page")?;
+
+        let version_id = lower_hex_id();
+        sqlx::query(
+            r#"INSERT INTO wiki_page_versions (id, page_id, version, content, edit_summary, author_type, author_id)
+               VALUES (?, ?, ?, ?, ?, ?, ?)"#,
+        )
+        .bind(&version_id)
+        .bind(&page.id)
+        .bind(new_version)
+        .bind(&new_content)
+        .bind(&input.edit_summary)
+        .bind(&input.author_type)
+        .bind(&input.author_id)
+        .execute(&self.pool)
+        .await
+        .context("failed to insert wiki page version")?;
+
+        self.load_by_id(&page.id)
+            .await?
+            .ok_or_else(|| WikiError::Other(anyhow::anyhow!("page not found after edit")))
+            .map_err(crate::error::Error::from)
+    }
+
+    /// Read a page, optionally at a specific version.
+    pub async fn read(&self, slug: &str, version: Option<i64>) -> Result<Option<WikiPage>> {
+        if let Some(v) = version {
+            // Return page with historical content
+            let page = self.load_by_slug(slug).await?;
+            let Some(mut page) = page else {
+                return Ok(None);
+            };
+            let historical: Option<String> = sqlx::query_scalar(
+                "SELECT content FROM wiki_page_versions WHERE page_id = ? AND version = ?",
+            )
+            .bind(&page.id)
+            .bind(v)
+            .fetch_optional(&self.pool)
+            .await
+            .context("failed to fetch historical version")?;
+
+            if let Some(content) = historical {
+                page.content = content;
+                page.version = v;
+            } else {
+                return Ok(None);
+            }
+            Ok(Some(page))
+        } else {
+            self.load_by_slug(slug).await
+        }
+    }
+
+    /// List all pages, optionally filtered by type. Excludes archived pages.
+    pub async fn list(&self, page_type: Option<WikiPageType>) -> Result<Vec<WikiPageSummary>> {
+        let rows = if let Some(pt) = page_type {
+            sqlx::query(
+                r#"SELECT id, slug, title, page_type, version, updated_at, updated_by
+                   FROM wiki_pages WHERE archived = 0 AND page_type = ?
+                   ORDER BY updated_at DESC"#,
+            )
+            .bind(pt.as_str())
+            .fetch_all(&self.pool)
+            .await
+        } else {
+            sqlx::query(
+                r#"SELECT id, slug, title, page_type, version, updated_at, updated_by
+                   FROM wiki_pages WHERE archived = 0
+                   ORDER BY updated_at DESC"#,
+            )
+            .fetch_all(&self.pool)
+            .await
+        }
+        .context("failed to list wiki pages")?;
+
+        rows.into_iter()
+            .map(|row| {
+                Ok(WikiPageSummary {
+                    id: row.try_get("id")?,
+                    slug: row.try_get("slug")?,
+                    title: row.try_get("title")?,
+                    page_type: row.try_get("page_type")?,
+                    version: row.try_get("version")?,
+                    updated_at: row.try_get("updated_at")?,
+                    updated_by: row.try_get("updated_by")?,
+                })
+            })
+            .collect()
+    }
+
+    /// Full-text search across title and content.
+    pub async fn search(
+        &self,
+        query: &str,
+        page_type: Option<WikiPageType>,
+    ) -> Result<Vec<WikiPageSummary>> {
+        let fts_query = sanitize_fts_query(query);
+        if fts_query.is_empty() {
+            return Ok(Vec::new());
+        }
+        let rows = if let Some(pt) = page_type {
+            sqlx::query(
+                r#"SELECT p.id, p.slug, p.title, p.page_type, p.version, p.updated_at, p.updated_by
+                   FROM wiki_pages_fts f
+                   JOIN wiki_pages p ON p.rowid = f.rowid
+                   WHERE f.wiki_pages_fts MATCH ? AND p.archived = 0 AND p.page_type = ?
+                   ORDER BY rank"#,
+            )
+            .bind(&fts_query)
+            .bind(pt.as_str())
+            .fetch_all(&self.pool)
+            .await
+        } else {
+            sqlx::query(
+                r#"SELECT p.id, p.slug, p.title, p.page_type, p.version, p.updated_at, p.updated_by
+                   FROM wiki_pages_fts f
+                   JOIN wiki_pages p ON p.rowid = f.rowid
+                   WHERE f.wiki_pages_fts MATCH ? AND p.archived = 0
+                   ORDER BY rank"#,
+            )
+            .bind(&fts_query)
+            .fetch_all(&self.pool)
+            .await
+        }
+        .context("failed to search wiki pages")?;
+
+        rows.into_iter()
+            .map(|row| {
+                Ok(WikiPageSummary {
+                    id: row.try_get("id")?,
+                    slug: row.try_get("slug")?,
+                    title: row.try_get("title")?,
+                    page_type: row.try_get("page_type")?,
+                    version: row.try_get("version")?,
+                    updated_at: row.try_get("updated_at")?,
+                    updated_by: row.try_get("updated_by")?,
+                })
+            })
+            .collect()
+    }
+
+    /// List version history for a page.
+    pub async fn history(&self, slug: &str, limit: i64) -> Result<Vec<WikiPageVersion>> {
+        let page = self.load_by_slug(slug).await?;
+        let Some(page) = page else { return Ok(vec![]) };
+
+        let rows = sqlx::query(
+            r#"SELECT id, page_id, version, content, edit_summary, author_type, author_id, created_at
+               FROM wiki_page_versions WHERE page_id = ? ORDER BY version DESC LIMIT ?"#,
+        )
+        .bind(&page.id)
+        .bind(limit)
+        .fetch_all(&self.pool)
+        .await
+        .context("failed to fetch wiki page history")?;
+
+        rows.into_iter()
+            .map(|row| {
+                Ok(WikiPageVersion {
+                    id: row.try_get("id")?,
+                    page_id: row.try_get("page_id")?,
+                    version: row.try_get("version")?,
+                    content: row.try_get("content")?,
+                    edit_summary: row.try_get("edit_summary")?,
+                    author_type: row.try_get("author_type")?,
+                    author_id: row.try_get("author_id")?,
+                    created_at: row.try_get("created_at")?,
+                })
+            })
+            .collect()
+    }
+
+    /// Restore a page to a historical version (creates a new version with old content).
+    pub async fn restore(
+        &self,
+        slug: &str,
+        version: i64,
+        author_type: &str,
+        author_id: &str,
+    ) -> Result<WikiPage> {
+        let content = self
+            .read(slug, Some(version))
+            .await?
+            .ok_or_else(|| WikiError::VersionNotFound {
+                slug: slug.to_string(),
+                version,
+            })?
+            .content;
+
+        let page = self
+            .load_by_slug(slug)
+            .await?
+            .ok_or_else(|| WikiError::NotFound {
+                slug: slug.to_string(),
+            })?;
+
+        let edit_summary = format!("Restored to version {version}");
+        let restored_content = content;
+        let new_version = page.version + 1;
+
+        sqlx::query(
+            r#"UPDATE wiki_pages SET content = ?, version = ?, updated_by = ?,
+               updated_at = strftime('%Y-%m-%dT%H:%M:%fZ', 'now')
+               WHERE id = ?"#,
+        )
+        .bind(&restored_content)
+        .bind(new_version)
+        .bind(author_id)
+        .bind(&page.id)
+        .execute(&self.pool)
+        .await
+        .context("failed to restore wiki page")?;
+
+        let version_id = lower_hex_id();
+        sqlx::query(
+            r#"INSERT INTO wiki_page_versions (id, page_id, version, content, edit_summary, author_type, author_id)
+               VALUES (?, ?, ?, ?, ?, ?, ?)"#,
+        )
+        .bind(&version_id)
+        .bind(&page.id)
+        .bind(new_version)
+        .bind(&restored_content)
+        .bind(&edit_summary)
+        .bind(author_type)
+        .bind(author_id)
+        .execute(&self.pool)
+        .await
+        .context("failed to insert restored version")?;
+
+        self.load_by_id(&page.id)
+            .await?
+            .ok_or_else(|| WikiError::Other(anyhow::anyhow!("page not found after restore")))
+            .map_err(crate::error::Error::from)
+    }
+
+    /// Archive a page (soft delete).
+    pub async fn archive(&self, slug: &str) -> Result<()> {
+        sqlx::query("UPDATE wiki_pages SET archived = 1 WHERE slug = ?")
+            .bind(slug)
+            .execute(&self.pool)
+            .await
+            .context("failed to archive wiki page")?;
+        Ok(())
+    }
+
+    // ------------------------------------------------------------------
+    // Internal helpers
+    // ------------------------------------------------------------------
+
+    async fn load_by_id(&self, id: &str) -> Result<Option<WikiPage>> {
+        let row = sqlx::query(
+            "SELECT id, slug, title, page_type, content, related, created_by, updated_by, version, archived, created_at, updated_at FROM wiki_pages WHERE id = ?"
+        )
+        .bind(id)
+        .fetch_optional(&self.pool)
+        .await
+        .context("failed to load wiki page by id")?;
+        row.map(parse_wiki_page).transpose()
+    }
+
+    pub async fn load_by_slug(&self, slug: &str) -> Result<Option<WikiPage>> {
+        let row = sqlx::query(
+            "SELECT id, slug, title, page_type, content, related, created_by, updated_by, version, archived, created_at, updated_at FROM wiki_pages WHERE slug = ?"
+        )
+        .bind(slug)
+        .fetch_optional(&self.pool)
+        .await
+        .context("failed to load wiki page by slug")?;
+        row.map(parse_wiki_page).transpose()
+    }
+
+    async fn unique_slug(&self, base: &str) -> Result<String> {
+        let exists: bool =
+            sqlx::query_scalar("SELECT EXISTS(SELECT 1 FROM wiki_pages WHERE slug = ?)")
+                .bind(base)
+                .fetch_one(&self.pool)
+                .await
+                .context("failed to check slug uniqueness")?;
+
+        if !exists {
+            return Ok(base.to_string());
+        }
+
+        for i in 2..=999 {
+            let candidate = format!("{base}-{i}");
+            let exists: bool =
+                sqlx::query_scalar("SELECT EXISTS(SELECT 1 FROM wiki_pages WHERE slug = ?)")
+                    .bind(&candidate)
+                    .fetch_one(&self.pool)
+                    .await
+                    .context("failed to check slug uniqueness")?;
+            if !exists {
+                return Ok(candidate);
+            }
+        }
+
+        Err(anyhow::anyhow!("failed to find unique slug for '{base}'").into())
+    }
+}
+
+fn parse_wiki_page(row: sqlx::sqlite::SqliteRow) -> Result<WikiPage> {
+    let related_json: String = row.try_get("related")?;
+    let related: Vec<String> = serde_json::from_str(&related_json).unwrap_or_default();
+    let archived: i64 = row.try_get("archived")?;
+    Ok(WikiPage {
+        id: row.try_get("id")?,
+        slug: row.try_get("slug")?,
+        title: row.try_get("title")?,
+        page_type: row.try_get("page_type")?,
+        content: row.try_get("content")?,
+        related,
+        created_by: row.try_get("created_by")?,
+        updated_by: row.try_get("updated_by")?,
+        version: row.try_get("version")?,
+        archived: archived != 0,
+        created_at: row.try_get("created_at")?,
+        updated_at: row.try_get("updated_at")?,
+    })
+}
+
+fn lower_hex_id() -> String {
+    uuid::Uuid::new_v4().simple().to_string()
+}
+
+/// Escape user input for use as an FTS5 MATCH query.
+///
+/// FTS5 treats characters like `"`, `*`, `:`, `(`, `)` and bareword operators
+/// (`AND`, `OR`, `NOT`, `NEAR`) as syntax. We strip the input down to
+/// alphanumeric tokens (plus `_` and `-`) and append `*` to the last token for
+/// prefix matching. Returns an empty string when no usable tokens remain, in
+/// which case the caller should short-circuit instead of issuing the query.
+fn sanitize_fts_query(input: &str) -> String {
+    let tokens: Vec<String> = input
+        .split_whitespace()
+        .map(|token| {
+            token
+                .chars()
+                .filter(|c| c.is_alphanumeric() || *c == '_' || *c == '-')
+                .collect::<String>()
+        })
+        .filter(|token| !token.is_empty())
+        .collect();
+
+    if tokens.is_empty() {
+        return String::new();
+    }
+
+    let mut parts: Vec<String> = tokens
+        .iter()
+        .take(tokens.len() - 1)
+        .map(|t| format!("\"{t}\""))
+        .collect();
+    let last = tokens.last().expect("tokens is non-empty");
+    parts.push(format!("\"{last}\"*"));
+    parts.join(" ")
+}
+
+#[cfg(test)]
+mod tests {
+    use super::sanitize_fts_query;
+
+    #[test]
+    fn sanitizes_fts_operators() {
+        assert_eq!(sanitize_fts_query("hello"), "\"hello\"*");
+        assert_eq!(sanitize_fts_query("hello world"), "\"hello\" \"world\"*");
+        assert_eq!(sanitize_fts_query(""), "");
+        assert_eq!(sanitize_fts_query("   "), "");
+        // Special characters are stripped so they cannot break the query.
+        assert_eq!(
+            sanitize_fts_query("foo AND bar"),
+            "\"foo\" \"AND\" \"bar\"*"
+        );
+        assert_eq!(sanitize_fts_query("col:val"), "\"colval\"*");
+        assert_eq!(sanitize_fts_query("\"phrase\""), "\"phrase\"*");
+        assert_eq!(sanitize_fts_query("a*b"), "\"ab\"*");
+    }
+}
diff --git a/tests/bulletin.rs b/tests/bulletin.rs
index 6ed5aa5ea..73bc6fa8e 100644
--- a/tests/bulletin.rs
+++ b/tests/bulletin.rs
@@ -131,6 +131,8 @@ async fn bootstrap_deps() -> anyhow::Result<spacebot::AgentDeps> {
             db.sqlite.clone(),
             chrono_tz::Tz::UTC,
         ),
+        api_state: None,
+        wiki_store: None,
     })
 }
 
diff --git a/tests/context_dump.rs b/tests/context_dump.rs
index bee401ea6..40c75ee12 100644
--- a/tests/context_dump.rs
+++ b/tests/context_dump.rs
@@ -130,6 +130,8 @@ async fn bootstrap_deps() -> anyhow::Result<(spacebot::AgentDeps, spacebot::conf
             db.sqlite.clone(),
             chrono_tz::Tz::UTC,
         ),
+        api_state: None,
+        wiki_store: None,
     };
 
     Ok((deps, config))
@@ -252,15 +254,18 @@ async fn dump_channel_context() {
         )),
         worker_context_settings: Arc::new(tokio::sync::RwLock::new(Default::default())),
         model_overrides: Arc::new(Default::default()),
+        cron_outcome: None,
     };
 
     let tool_server = rig::tool::server::ToolServer::new().run();
     let skip_flag = spacebot::tools::new_skip_flag();
     let replied_flag = spacebot::tools::new_replied_flag();
+    let reply_target = spacebot::tools::ReplyTarget::Live(Box::new(response_tx.clone()));
     spacebot::tools::add_channel_tools(
         &tool_server,
         state,
         response_tx,
+        reply_target,
         "test-conversation",
         skip_flag,
         replied_flag,
@@ -269,6 +274,7 @@ async fn dump_channel_context() {
         true,
         None,
         None,
+        None,
     )
     .await
     .expect("failed to add channel tools");
@@ -311,7 +317,7 @@ async fn dump_branch_context() {
     let instance_dir = rc.instance_dir.to_string_lossy();
     let workspace_dir = rc.workspace_dir.to_string_lossy();
     let branch_prompt = prompt_engine
-        .render_branch_prompt(&instance_dir, &workspace_dir)
+        .render_branch_prompt(&instance_dir, &workspace_dir, false)
         .expect("failed to render branch prompt");
     print_section("BRANCH SYSTEM PROMPT", &branch_prompt);
     print_stats("System prompt", &branch_prompt);
@@ -332,6 +338,9 @@ async fn dump_branch_context() {
         channel_store,
         run_logger,
         spacebot::tools::BranchToolProfile::Default,
+        None,
+        None,
+        deps.sandbox.clone(),
     );
 
     let tool_defs = branch_tool_server
@@ -383,6 +392,8 @@ async fn dump_worker_context() {
             &[],
             browser_config.persist_session,
             None,
+            false,
+            None,
         )
         .expect("failed to render worker prompt");
     print_section("WORKER SYSTEM PROMPT", &worker_prompt);
@@ -405,6 +416,8 @@ async fn dump_worker_context() {
         deps.runtime_config.clone(),
         Default::default(),
         deps.memory_search.clone(),
+        false,
+        None,
     );
 
     let tool_defs = worker_tool_server
@@ -496,14 +509,17 @@ async fn dump_all_contexts() {
         )),
         worker_context_settings: Arc::new(tokio::sync::RwLock::new(Default::default())),
         model_overrides: Arc::new(Default::default()),
+        cron_outcome: None,
     };
     let channel_tool_server = rig::tool::server::ToolServer::new().run();
     let skip_flag = spacebot::tools::new_skip_flag();
     let replied_flag = spacebot::tools::new_replied_flag();
+    let reply_target = spacebot::tools::ReplyTarget::Live(Box::new(response_tx.clone()));
     spacebot::tools::add_channel_tools(
         &channel_tool_server,
         state,
         response_tx,
+        reply_target,
         "test",
         skip_flag,
         replied_flag,
@@ -512,6 +528,7 @@ async fn dump_all_contexts() {
         true,
         None,
         None,
+        None,
     )
     .await
     .expect("failed to add channel tools");
@@ -530,7 +547,7 @@ async fn dump_all_contexts() {
 
     // ── Branch ──
     let branch_prompt = prompt_engine
-        .render_branch_prompt(&instance_dir, &workspace_dir)
+        .render_branch_prompt(&instance_dir, &workspace_dir, false)
         .expect("failed to render branch prompt");
     let run_logger = spacebot::conversation::ProcessRunLogger::new(deps.sqlite_pool.clone());
     let branch_tool_server = spacebot::tools::create_branch_tool_server(
@@ -544,6 +561,9 @@ async fn dump_all_contexts() {
         channel_store,
         run_logger,
         spacebot::tools::BranchToolProfile::Default,
+        None,
+        None,
+        deps.sandbox.clone(),
     );
     let branch_tool_defs = branch_tool_server.get_tool_defs(None).await.unwrap();
     let branch_tools_text = format_tool_defs(&branch_tool_defs);
@@ -571,6 +591,8 @@ async fn dump_all_contexts() {
             &[],
             browser_config.persist_session,
             None,
+            false,
+            None,
         )
         .expect("failed to render worker prompt");
     let brave_search_key = (**rc.brave_search_key.load()).clone();
@@ -589,6 +611,8 @@ async fn dump_all_contexts() {
         deps.runtime_config.clone(),
         Default::default(),
         deps.memory_search.clone(),
+        false,
+        None,
     );
     let worker_tool_defs = worker_tool_server.get_tool_defs(None).await.unwrap();
     let worker_tools_text = format_tool_defs(&worker_tool_defs);