diff --git a/README.md b/README.md
index 15ad8f9..af2660f 100644
--- a/README.md
+++ b/README.md
@@ -33,14 +33,17 @@ One origin means no CORS, no double auth, and SSE streaming included. **It works
 | --- | --- |
 | 🗂️ **Project picker** | Start page with known projects and recents. Open any folder by path or browse the server filesystem. Everything is scoped per project via opencode's `?directory=` API. |
 | 💬 **Live chat** | SSE streaming with markdown, collapsible thinking, tool calls with input/output, per-step tokens & cost, timestamps, abort, a prompt queue, and permission and question prompts that survive reloads. Message actions: copy, read aloud, edit & resend, fork. |
-| ⌨️ **Autocomplete like opencode** | `@` mentions files, folders and subagents (attached the way opencode does), `/` runs commands, `!` switches to shell mode. On phones the options row hides while the keyboard is open. |
-| 🧠 **Model + think level** | Model picker across all providers with pricing & context details, think-level selector for reasoning models, agent picker. Persisted per project. |
+| ⌨️ **Input like opencode's TUI** | `@` mentions files, folders and subagents (attached the way opencode does), `/` runs commands, `!` switches to shell mode, **Tab** cycles agents, **↑/↓** recall earlier prompts, **Esc Esc** stops a reply. **Paste screenshots or drop files** anywhere on the chat. Every option has a **?** that explains it and links to its settings. On phones the options row hides while the keyboard is open. |
+| 🧠 **Model + think level** | Model picker across all providers with pricing & context details (long lists open a roomy searchable grid), think-level selector for reasoning models, agent picker. Persisted per project. Chat width: comfortable, wide or full. |
+| 🧑‍🔧 **Agents** | View, create and edit agents: description, mode, model, prompt (drafted by AI if you like), built-in tools and **which MCP servers each agent may use**. [More →](docs/mcp.md#agents) |
+| 🎓 **Skills** | Every skill opencode can load, with what it says, where it comes from, **quality checks**, and auto / ask / off per skill. Write new skills or **improve** any of them with AI; a **skill library** served by the web app overrides a skill of the same name. Also from the API and agent control. [More →](docs/mcp.md#skills) |
+| 📊 **Usage & cost** | Group usage by session, day, hour, weekday, model, provider or agent; **real cost** next to the **list-price estimate**, so promotions and free tiers show what they save. |
 | 🔌 **MCP manager** | Per-project and global MCP status, off / ask / auto modes per server and per tool, presets, and add remote or local servers from a catalog, a URL, a command line, pasted JSON or a form. **Per-conversation MCP selection** in the prompt box. Tool lists are discovered from the servers themselves over **Streamable HTTP, legacy SSE or stdio**. Every server has a **details view**: why it fails and how to fix it, its tools with full descriptions and parameters, an **editor** that never exposes stored secrets, and a step-by-step **connection test**. [More →](docs/mcp.md) |
-| 🤖 **Agent control** | One click registers this app's MCP server with opencode, so **the chat can manage opencode itself**: test, add and reconnect MCP servers, reload the config (after running replies finish), read and prompt other chats, see task lists, and manage schedules. State-changing tools ask first. [More →](docs/mcp.md#agent-control) |
+| 🤖 **Agent control** | On by default: this app's MCP server is registered with opencode, so **the chat can manage opencode itself**: test, add, switch and reconnect MCP servers (applied at once), reload the config and **continue the chat afterwards**, run any agent in a **sub-chat**, read and prompt other chats, see task lists, and manage schedules. State-changing tools ask first. [More →](docs/mcp.md#agent-control) |
 | ⏰ **Scheduled prompts** | Cron-timed prompts per project (every weekday at 08:00, every 30 minutes…), in a new session each run or always the same one, with run history and links to the chats. [More →](docs/mcp.md#scheduled-prompts) |
 | 🧩 **MCP UI apps** | Tool results render live in sandboxed iframes: **MCP Apps** (SEP-1865 JSON-RPC host, theme & display-mode aware), mcp-ui **raw HTML**, **external URLs** and **remote-dom** components. Apps can move to a side panel or fullscreen, with shareable `?app=` links. Tools aren't re-run silently: only read-only ones are, and the rest get a **Render UI** button. A built-in demo server (`/mcp-demo`) showcases every flavour. [More →](docs/mcp.md#mcp-ui-apps) |
 | 🔑 **Provider config from the UI** | "Configure providers…" right inside the model dropdown adds or updates API keys without touching the server. Keys are never sent back to the browser. |
-| 📱 **Mobile first** | The desktop sidebar (resizable, collapsible to an icon rail, optional projects panel) becomes a slideover on phones. There are touch-sized controls, safe-area aware layouts and a prompt box that stays above the keyboard, so you can continue any session from your phone. Installable as a PWA. |
+| 📱 **Mobile first** | The desktop sidebar (resizable, collapsible to an icon rail, optional projects panel that lists each project's starred, recent, unread and running chats, all configurable) becomes a slideover on phones. There are touch-sized controls, safe-area aware layouts and a prompt box that stays above the keyboard, so you can continue any session from your phone. Installable as a PWA. |
 | 🔄 **Any opencode version** | Works with every opencode 1.x server (1.0 → 1.19) and with **opencode 2.x** (`@opencode/cli`), which only speaks the new **v2 API** (`/api/*`): the web app detects which one it talks to and translates, so the UI behaves the same, MCP, config and subagents included. Features a server lacks are hidden instead of failing. [More →](docs/compatibility.md) |
 | 🕸️ **Subagent per MCP** | One switch creates a specialist subagent per MCP server (only that server's tools) and an `@orchestrator` that knows what to send each one, keeping its own context free of MCP tools. Summaries are editable and stay in sync as servers change. [More →](docs/mcp.md#subagent-per-mcp) |
 | 🤖 **Subagents** | When the agent hands work to a subagent, the chat shows a live card (agent, steps, result) with a link into the subagent's own conversation and back; the sidebar nests subagent sessions under their parent. |
@@ -196,8 +199,9 @@ Tools:
 | area | tools |
 | --- | --- |
 | overview | `server_info` (version, protocol, features, busy sessions, schedules, last reload) |
-| chats | `list_projects`, `create_project`, `list_sessions`, `session_status`, `read_session`, `get_messages`, `create_session`, `send_prompt` (waits for the reply, or `wait: false`), `abort_session`, `fork_session`, `list_tasks` |
-| opencode | `list_models`, `list_agents`, `list_commands`, `list_skills`, `get_config` (redacted), `reload_opencode` |
+| chats | `list_projects`, `create_project`, `list_sessions`, `session_status`, `current_session`, `read_session`, `get_messages`, `create_session`, `send_prompt` (waits for the reply, or `wait: false`), `run_subagent` (any agent in a sub-chat), `abort_session`, `fork_session`, `list_tasks` |
+| opencode | `list_models`, `list_agents`, `list_commands`, `get_config` (redacted), `reload_opencode` |
+| skills | `list_skills`, `get_skill` (content + checks), `save_skill` (library), `delete_skill`, `set_skill_permission`, `improve_skill` (AI) |
 | MCP | `list_mcp` (status, errors with a fix, tools), `mcp_status`, `test_mcp`, `add_mcp`, `connect_mcp`, `disconnect_mcp`, `set_mcp_mode`, `set_tool_mode`, `mcp_subagents`, `configure_mcp_subagents` |
 | schedules | `list_schedules`, `create_schedule`, `update_schedule`, `delete_schedule`, `run_schedule` |
 
@@ -220,6 +224,7 @@ Read-only tools carry `readOnlyHint`. Register the same server **with opencode i
 | `NUXT_PUBLIC_DEMO_MCP_URL` | *(browser origin)* | URL at which opencode reaches the built-in `/mcp-demo` server (`http://web:3000/mcp-demo` in compose) |
 | `NUXT_MCP_LOCAL_DISCOVERY` | `always` | `always` / `same-host` / `never`: whether the web app spawns local MCP servers to list their tools |
 | `NUXT_SELF_URL` | *(origin of the demo URL, else the request)* | URL at which opencode reaches this app; agent control registers `<url>/mcp` (`http://web:3000` in compose) |
+| `NUXT_AGENT_CONTROL` | `auto` | `auto` registers agent control in opencode's global config once (switching it off is respected); `off` never does |
 | `NUXT_SCHEDULER` | `on` | `off` stops firing scheduled prompts (e.g. a second replica on the same data volume) |
 | `TZ` | *(container default, UTC)* | time zone of scheduled prompts, e.g. `Europe/Madrid` |
 
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index d2357ea..c87d793 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -106,18 +106,29 @@ body {
 
 /* ---- motion system ---- */
 
-/* page transitions */
-.oc-page-enter-active,
+/* page transitions: a short fade only. The project shell (sidebar, header)
+   stays mounted while its content changes, so nothing around the content
+   moves; old content leaves fast so the new one isn't kept waiting */
+.oc-page-enter-active {
+  transition: opacity 0.14s ease-out;
+}
 .oc-page-leave-active {
-  transition: opacity 0.15s ease, transform 0.15s ease;
+  transition: opacity 0.08s ease-in;
 }
-.oc-page-enter-from {
+.oc-page-enter-from,
+.oc-page-leave-to {
   opacity: 0;
-  transform: translateY(6px);
 }
-.oc-page-leave-to {
+
+/* cross-fade of two contents stacked in the same box (sidebar <-> rail):
+   both are absolutely positioned by their parent, so no layout shift */
+.oc-xfade-enter-active,
+.oc-xfade-leave-active {
+  transition: opacity 0.16s ease;
+}
+.oc-xfade-enter-from,
+.oc-xfade-leave-to {
   opacity: 0;
-  transform: translateY(-4px);
 }
 
 /* vertical collapse (options panels, tool details, reasoning) */
@@ -222,9 +233,6 @@ body {
 .oc-tile {
   transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
 }
-.oc-tile:hover {
-  transform: translateY(-1px);
-}
 .oc-tile:active {
   transform: scale(0.96);
 }
@@ -262,17 +270,17 @@ body {
   animation: oc-send-up 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
-/* interactive rows/buttons: smooth hover feedback */
+/* interactive rows/buttons: smooth hover feedback (colour only: rows that
+   shift sideways under the pointer read as jitter in long lists) */
 .oc-row {
-  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
-}
-.oc-row:hover {
-  transform: translateX(2px);
+  transition: background-color 0.15s ease, color 0.15s ease;
 }
 
 @media (prefers-reduced-motion: reduce) {
   .oc-page-enter-active,
   .oc-page-leave-active,
+  .oc-xfade-enter-active,
+  .oc-xfade-leave-active,
   .oc-collapse-enter-active,
   .oc-collapse-leave-active,
   .oc-slide-enter-active,
@@ -406,3 +414,51 @@ body {
   color: var(--ui-text-highlighted);
   border-color: var(--ui-border-inverted);
 }
+
+/* filled variant of an outline (lucide) icon, e.g. a favourite star */
+.oc-filled path,
+.oc-filled polygon,
+.oc-filled circle {
+  fill: currentColor;
+}
+
+/* long-press label on touch screens (plugins/longpress-tip.client.ts) */
+.oc-touch-tip {
+  position: fixed;
+  z-index: 100;
+  max-width: min(18rem, calc(100vw - 1rem));
+  padding: 0.3rem 0.55rem;
+  border-radius: 0.25rem;
+  background: var(--ui-bg-inverted);
+  color: var(--ui-bg);
+  font-size: 0.75rem;
+  line-height: 1.3;
+  pointer-events: none;
+  animation: oc-fade-up 0.14s ease both;
+}
+@media (pointer: coarse) {
+  /* a long press shows the label above instead of iOS's link preview */
+  button,
+  a[aria-label] {
+    -webkit-touch-callout: none;
+  }
+}
+
+/* brief highlight when a value changes from the keyboard (Tab → agent) */
+@keyframes oc-flash {
+  0% { background-color: var(--ui-bg-inverted); color: var(--ui-bg); }
+  100% { background-color: var(--ui-bg-elevated); }
+}
+.oc-flash {
+  animation: oc-flash 0.6s ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .oc-flash { animation: none; }
+}
+
+/* MCP apps and data tables in the chat: when the column is narrower than the
+   scroller (@container), they grow into the free space on both sides, 1rem
+   from its edges; never narrower than the column */
+.oc-wide-apps .oc-breakout {
+  margin-inline: min(0px, calc(50% - 50cqw + 1rem));
+}
diff --git a/app/components/AgentControlCard.vue b/app/components/AgentControlCard.vue
index f171bc8..47132ad 100644
--- a/app/components/AgentControlCard.vue
+++ b/app/components/AgentControlCard.vue
@@ -53,9 +53,10 @@ async function install(enabled = true) {
 }
 
 const TOOLS = [
-  ['MCP', 'list, test, add, reconnect, set modes'],
-  ['Reload', 'one project or all of opencode, after replies finish'],
+  ['MCP', 'list, test, add, switch on/off at once, set modes'],
+  ['Reload', 'one project or all of opencode; the chat continues by itself afterwards'],
   ['Chats', 'list, read and prompt other sessions, abort'],
+  ['Sub-chats', 'run any agent on a task in a sub-chat (run_subagent)'],
   ['Tasks', 'todo lists of busy and recent sessions'],
   ['Schedules', 'create, run and manage scheduled prompts'],
   ['Info', 'version, models, agents, commands, skills, config']
@@ -81,7 +82,7 @@ const TOOLS = [
     </button>
     <CollapseTransition>
       <div v-if="expanded" class="px-3 pb-3 space-y-2.5">
-        <div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
+        <div class="grid grid-cols-2 sm:grid-cols-4 gap-1.5">
           <div v-for="[title, text] in TOOLS" :key="title" class="rounded-sm bg-elevated/70 px-2 py-1.5">
             <div class="text-[11px] font-medium">{{ title }}</div>
             <div class="text-[10px] text-dimmed leading-tight">{{ text }}</div>
@@ -123,7 +124,7 @@ const TOOLS = [
             label="Tools"
             @click="emit('details', state.name)"
           />
-          <span class="oc-note text-[10px] text-dimmed">Saved in the global config; new chats get the tools.</span>
+          <span class="oc-note text-[10px] text-dimmed">On by default, saved in the global config: every chat lists it among its MCP servers. Switching it off here is remembered.</span>
         </div>
       </div>
     </CollapseTransition>
diff --git a/app/components/HScroll.vue b/app/components/HScroll.vue
index cdb8ef9..65797f3 100644
--- a/app/components/HScroll.vue
+++ b/app/components/HScroll.vue
@@ -11,6 +11,13 @@ function update() {
   canRight.value = node.scrollLeft + node.clientWidth < node.scrollWidth - 4
 }
 
+const mask = computed(() => {
+  if (!canLeft.value && !canRight.value) return undefined
+  const left = canLeft.value ? 'transparent 0, #000 2.5rem' : '#000 0'
+  const right = canRight.value ? '#000 calc(100% - 2.5rem), transparent 100%' : '#000 100%'
+  return `linear-gradient(to right, ${left}, ${right})`
+})
+
 function scrollBy(direction: 1 | -1) {
   el.value?.scrollBy({ left: direction * el.value.clientWidth * 0.8, behavior: 'smooth' })
 }
@@ -56,9 +63,11 @@ onBeforeUnmount(() => observer?.disconnect())
 
 <template>
   <div class="relative group/scroll">
+    <!-- edges fade out where more cards hide, so the overflow is visible -->
     <div
       ref="el"
       class="flex gap-2 overflow-x-auto select-none"
+      :style="{ maskImage: mask, WebkitMaskImage: mask }"
       @scroll.passive="update"
       @pointerdown="onPointerDown"
     >
diff --git a/app/components/HelpTip.vue b/app/components/HelpTip.vue
new file mode 100644
index 0000000..d116c49
--- /dev/null
+++ b/app/components/HelpTip.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+// A small "?" next to a setting: opens a short explanation with buttons to
+// the place where the setting is managed (providers, agents, MCP servers…).
+export interface HelpAction {
+  label: string
+  icon?: string
+  to?: string
+  onClick?: () => void
+}
+
+const props = defineProps<{
+  title: string
+  /** markdown */
+  text: string
+  actions?: HelpAction[]
+}>()
+
+const open = ref(false)
+
+function run(action: HelpAction) {
+  open.value = false
+  action.onClick?.()
+}
+</script>
+
+<template>
+  <UButton
+    icon="i-lucide-circle-help"
+    size="xs"
+    color="neutral"
+    variant="link"
+    class="p-0 align-middle text-dimmed hover:text-highlighted relative oc-tap-zone"
+    :aria-label="`About: ${props.title}`"
+    @click.stop.prevent="open = true"
+  />
+  <UModal v-model:open="open" :title="title">
+    <template #body>
+      <Markdown :text="text" class="text-sm" />
+    </template>
+    <template v-if="actions?.length" #footer>
+      <div class="oc-actions">
+        <UButton variant="ghost" color="neutral" label="Close" @click="open = false" />
+        <span class="flex-1 oc-spacer" />
+        <UButton
+          v-for="action in actions"
+          :key="action.label"
+          color="primary"
+          variant="soft"
+          :icon="action.icon"
+          :label="action.label"
+          :to="action.to"
+          @click="run(action)"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>
diff --git a/app/components/McpNestCard.vue b/app/components/McpNestCard.vue
index 0a29b31..18e0810 100644
--- a/app/components/McpNestCard.vue
+++ b/app/components/McpNestCard.vue
@@ -22,12 +22,14 @@ interface Plan {
     exclude: string[]
     summaries: Record<string, string>
     instructions?: string
+    delegate?: boolean
     lastSync?: { at: number; agents: string[]; error?: string }
   }
   servers: ServerPlan[]
   orchestratorPrompt: string
 }
 
+const props = defineProps<{ directory?: string }>()
 const caps = useCapabilities()
 const toast = useToast()
 const plan = ref<Plan | null>(null)
@@ -40,7 +42,8 @@ const draft = reactive({
   enabled: false,
   exclude: [] as string[],
   summaries: {} as Record<string, string>,
-  instructions: ''
+  instructions: '',
+  delegate: true
 })
 const dirty = ref(false)
 
@@ -51,9 +54,53 @@ async function load() {
     draft.exclude = [...plan.value.settings.exclude]
     draft.summaries = { ...plan.value.settings.summaries }
     draft.instructions = plan.value.settings.instructions || ''
+    draft.delegate = plan.value.settings.delegate !== false
     dirty.value = false
   } catch { /* opencode down: the card stays collapsed */ }
 }
+
+// ---- summaries written by an AI model ----
+const catalog = useModelCatalog(() => props.directory)
+const AI_MODEL_KEY = 'opencode-web.ai-model'
+const aiModel = ref('')
+onMounted(() => {
+  try { aiModel.value = localStorage.getItem(AI_MODEL_KEY) || '' } catch { /* private mode */ }
+})
+watch(aiModel, (value) => {
+  try { localStorage.setItem(AI_MODEL_KEY, value) } catch { /* private mode */ }
+})
+watch(expanded, (open) => { if (open && !catalog.items.value.length) catalog.load() })
+
+const generating = ref<string[]>([])
+
+async function generate(s: ServerPlan) {
+  generating.value = [...generating.value, s.server]
+  try {
+    const { summary } = await $fetch<{ summary: string }>('/api/v1/mcp-nest-summary', {
+      method: 'POST',
+      body: { server: s.server, model: aiModel.value || undefined, directory: props.directory },
+      timeout: 5 * 60_000
+    })
+    setSummary(s, summary)
+    return true
+  } catch (e) {
+    const data = (e as { data?: { message?: string } })?.data
+    toast.add({ title: `Could not write a summary for ${s.server}`, description: data?.message || String(e), color: 'error' })
+    return false
+  } finally {
+    generating.value = generating.value.filter((n) => n !== s.server)
+  }
+}
+
+async function generateAll() {
+  // a few at a time: each one is a model call
+  const queue = [...specialists.value]
+  const worker = async () => {
+    for (let s = queue.shift(); s; s = queue.shift()) await generate(s)
+  }
+  await Promise.all([worker(), worker(), worker()])
+  toast.add({ title: 'Summaries written', description: 'Check them, then Save & apply.', color: 'success' })
+}
 onMounted(load)
 defineExpose({ load })
 
@@ -87,7 +134,7 @@ async function save(enabled = draft.enabled) {
     const summaries = Object.fromEntries(Object.entries(draft.summaries).filter(([, t]) => t.trim()))
     plan.value = await $fetch<Plan>('/api/v1/mcp-nest', {
       method: 'PUT',
-      body: { enabled, exclude: draft.exclude, summaries, instructions: draft.instructions },
+      body: { enabled, exclude: draft.exclude, summaries, instructions: draft.instructions, delegate: draft.delegate },
       timeout: 150_000
     })
     draft.enabled = plan.value.settings.enabled
@@ -164,6 +211,41 @@ function fmt(ts?: number) {
           </TransitionGroup>
         </div>
 
+        <!-- how the specialists work together -->
+        <div class="flex items-start gap-2.5 rounded-sm bg-elevated/40 px-2.5 py-2">
+          <USwitch
+            :model-value="draft.delegate"
+            size="sm"
+            aria-label="Specialists can call each other"
+            @update:model-value="(v) => { draft.delegate = Boolean(v); dirty = true }"
+          />
+          <div class="min-w-0">
+            <div class="text-xs font-medium">Specialists can call each other</div>
+            <p class="text-[10px] text-dimmed leading-snug">
+              Each specialist gets the subagent (task) tool and the list of the others, so a job that spans two servers is handed on as a sub-chat instead of failing.
+              The orchestrator and every other agent can also start any agent in a sub-chat through agent control's <span class="font-mono">run_subagent</span>.
+            </p>
+          </div>
+        </div>
+
+        <!-- AI-written summaries -->
+        <div class="flex flex-wrap items-end gap-1.5">
+          <UFormField label="AI model for summaries" size="xs" class="flex-1 min-w-48">
+            <ModelSelect v-model="aiModel" :items="catalog.items.value" :loading="catalog.loading.value" size="xs" empty-label="opencode default model" />
+          </UFormField>
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="soft"
+            icon="i-lucide-sparkles"
+            label="Write all summaries"
+            class="oc-tap"
+            :loading="generating.length > 0"
+            :disabled="!specialists.length"
+            @click="generateAll"
+          />
+        </div>
+
         <!-- per server: include + what the orchestrator reads -->
         <div class="space-y-2">
           <div v-for="s in plan.servers" :key="s.server" class="rounded-sm bg-elevated/40 px-2.5 py-2">
@@ -189,9 +271,19 @@ function fmt(ts?: number) {
                   class="w-full text-xs"
                   @update:model-value="(v) => setSummary(s, String(v))"
                 />
-                <div class="flex items-center gap-2 text-[10px] text-dimmed">
-                  <span>{{ summaryOf(s).trim() ? 'Your summary' : 'Generated from its tools: write your own to steer the orchestrator' }}</span>
+                <div class="flex flex-wrap items-center gap-2 text-[10px] text-dimmed">
+                  <span class="flex-1 min-w-40">{{ summaryOf(s).trim() ? 'Your summary' : 'Generated from its tools: write your own to steer the orchestrator' }}</span>
                   <button v-if="summaryOf(s).trim()" type="button" class="underline hover:text-highlighted" @click="resetSummary(s)">use generated</button>
+                  <UButton
+                    size="xs"
+                    color="neutral"
+                    variant="ghost"
+                    icon="i-lucide-sparkles"
+                    label="Write with AI"
+                    class="oc-tap -my-1"
+                    :loading="generating.includes(s.server)"
+                    @click="generate(s)"
+                  />
                 </div>
               </div>
             </CollapseTransition>
diff --git a/app/components/McpServerList.vue b/app/components/McpServerList.vue
index 5dd9ade..7c0dcd4 100644
--- a/app/components/McpServerList.vue
+++ b/app/components/McpServerList.vue
@@ -319,6 +319,9 @@ function toolsHint(server: McpListServer) {
           />
         </div>
 
+        <!-- page-provided notice for this server (e.g. "reload to apply") -->
+        <slot name="notice" :server="server" />
+
         <!-- tools -->
         <CollapseTransition>
           <div
diff --git a/app/components/ModelSelect.vue b/app/components/ModelSelect.vue
new file mode 100644
index 0000000..de815fd
--- /dev/null
+++ b/app/components/ModelSelect.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+// Model selector: a searchable dropdown, plus a roomy picker modal when the
+// list is long (more than 10 models), so small screens don't scroll forever.
+import type { ModelItem } from '~/composables/useModelCatalog'
+
+const props = withDefaults(defineProps<{
+  items: ModelItem[]
+  loading?: boolean
+  placeholder?: string
+  size?: 'xs' | 'sm' | 'md'
+  /** offer an empty choice with this label ("opencode default") */
+  emptyLabel?: string
+}>(), { size: 'sm', placeholder: 'Select model' })
+
+const model = defineModel<string>({ default: '' })
+const pickerOpen = ref(false)
+const selectOpen = ref(false)
+const EMPTY = '__default__'
+
+const selectItems = computed(() => [
+  ...(props.emptyLabel ? [{ label: props.emptyLabel, value: EMPTY, provider: '', providerID: '', reasoning: false, ctx: 0, cost: '', attachment: false } as ModelItem] : []),
+  ...props.items
+])
+const value = computed({
+  get: () => model.value || (props.emptyLabel ? EMPTY : ''),
+  set: (v: string) => { model.value = v === EMPTY ? '' : v }
+})
+
+const pickerItems = computed(() => [
+  ...(props.emptyLabel ? [{ value: EMPTY, label: props.emptyLabel, group: 'Default', icon: 'i-lucide-sparkles' }] : []),
+  ...props.items.map((m) => ({
+    value: m.value,
+    label: m.label,
+    group: m.provider,
+    detail: m.value,
+    icon: m.reasoning ? 'i-lucide-brain' : 'i-lucide-cpu',
+    tags: [
+      ...(m.ctx ? [`${m.ctx}k ctx`] : []),
+      ...(m.cost ? [m.cost] : []),
+      ...(m.reasoning ? ['thinking'] : []),
+      ...(m.attachment ? ['files'] : [])
+    ]
+  }))
+])
+
+function browseAll() {
+  selectOpen.value = false
+  pickerOpen.value = true
+}
+
+defineExpose({ browseAll })
+</script>
+
+<template>
+  <USelectMenu
+    v-model="value"
+    v-model:open="selectOpen"
+    :items="selectItems"
+    value-key="value"
+    :filter-fields="['label', 'provider', 'value']"
+    :search-input="{ placeholder: 'Search models or providers…' }"
+    :virtualize="{ estimateSize: () => 44 }"
+    :loading="loading"
+    :placeholder="loading ? 'Loading models…' : placeholder"
+    :size="size"
+    :ui="{ content: 'max-h-[min(24rem,60dvh)]' }"
+    class="w-full min-w-0"
+    icon="i-lucide-cpu"
+  >
+    <template #item="{ item }">
+      <div class="flex items-center gap-2 w-full min-w-0">
+        <div class="min-w-0 flex-1">
+          <div class="truncate text-sm">{{ item.label }}</div>
+          <div v-if="item.provider" class="text-[10px] text-dimmed font-mono truncate">
+            {{ item.provider }}<template v-if="item.ctx"> · {{ item.ctx }}k ctx</template><template v-if="item.cost"> · {{ item.cost }}</template>
+          </div>
+        </div>
+        <UIcon v-if="item.reasoning" name="i-lucide-brain" class="size-3.5 text-dimmed shrink-0" />
+      </div>
+    </template>
+    <template #empty>
+      <div class="flex items-center gap-2 px-2 py-3 text-sm" :class="!loading && serverDegraded ? 'text-error' : 'text-muted'">
+        <UIcon v-if="loading" name="i-lucide-loader-circle" class="size-4 animate-spin" />
+        <UIcon v-else-if="serverDegraded" name="i-lucide-plug-zap" class="size-4" />
+        {{ loading ? 'Loading models…' : (serverDegraded ? 'Server not responding' : 'No models found') }}
+      </div>
+    </template>
+    <!-- always visible, unaffected by the search filter -->
+    <template #content-bottom>
+      <div class="flex">
+        <button
+          v-if="items.length > 10"
+          class="flex flex-1 items-center gap-2 px-2.5 py-2 text-sm text-highlighted bg-elevated hover:bg-accented cursor-pointer"
+          @mousedown.prevent="browseAll"
+        >
+          <UIcon name="i-lucide-layout-grid" class="size-4 shrink-0" />
+          Show all {{ items.length }} models…
+        </button>
+        <slot name="bottom" />
+      </div>
+    </template>
+  </USelectMenu>
+  <PickerModal
+    v-model:open="pickerOpen"
+    v-model="value"
+    :items="pickerItems"
+    title="Choose a model"
+    :description="`${items.length} models from ${new Set(items.map((i) => i.providerID)).size} providers`"
+    placeholder="Search by name, provider or id…"
+  />
+</template>
diff --git a/app/components/PickerModal.vue b/app/components/PickerModal.vue
new file mode 100644
index 0000000..7af88c5
--- /dev/null
+++ b/app/components/PickerModal.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+// Roomy chooser for long lists (models, agents): a search field and a grid of
+// cards grouped by section, using the screen's width instead of a tall
+// dropdown with a long scroll. Arrow keys move, Enter picks.
+
+export interface PickerItem {
+  value: string
+  label: string
+  /** section heading (provider, agent mode…) */
+  group?: string
+  /** second line */
+  detail?: string
+  icon?: string
+  /** small tags on the right (e.g. "128k", "$3/15") */
+  tags?: string[]
+  /** extra text matched by the search */
+  keywords?: string
+}
+
+const props = defineProps<{
+  items: PickerItem[]
+  title: string
+  description?: string
+  placeholder?: string
+}>()
+
+const open = defineModel<boolean>('open', { default: false })
+const model = defineModel<string>({ default: '' })
+const emit = defineEmits<{ pick: [value: string] }>()
+
+const query = ref('')
+const active = ref(0)
+const searchRef = ref<{ inputRef?: HTMLInputElement } | null>(null)
+
+const filtered = computed(() => {
+  const words = query.value.trim().toLowerCase().split(/\s+/).filter(Boolean)
+  if (!words.length) return props.items
+  return props.items.filter((item) => {
+    const hay = `${item.label} ${item.value} ${item.group || ''} ${item.detail || ''} ${item.keywords || ''}`.toLowerCase()
+    return words.every((w) => hay.includes(w))
+  })
+})
+
+const groups = computed(() => {
+  const map = new Map<string, Array<PickerItem & { index: number }>>()
+  filtered.value.forEach((item, index) => {
+    const key = item.group || ''
+    if (!map.has(key)) map.set(key, [])
+    map.get(key)!.push({ ...item, index })
+  })
+  return [...map.entries()].map(([name, list]) => ({ name, list }))
+})
+
+watch(open, (now) => {
+  if (!now) return
+  query.value = ''
+  active.value = Math.max(0, props.items.findIndex((i) => i.value === model.value))
+  nextTick(() => {
+    searchRef.value?.inputRef?.focus()
+    document.querySelector(`[data-picker-index="${active.value}"]`)?.scrollIntoView({ block: 'center' })
+  })
+})
+watch(query, () => { active.value = 0 })
+
+function pick(value: string) {
+  model.value = value
+  emit('pick', value)
+  open.value = false
+}
+
+// grid navigation: left/right step, up/down jump a row of the current grid
+function columns() {
+  const grid = document.querySelector('[data-picker-grid]') as HTMLElement | null
+  if (!grid) return 1
+  return getComputedStyle(grid).gridTemplateColumns.split(' ').length || 1
+}
+
+function onKeydown(e: KeyboardEvent) {
+  const n = filtered.value.length
+  if (!n) return
+  const step = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: columns(), ArrowUp: -columns() }[e.key]
+  if (step) {
+    e.preventDefault()
+    active.value = Math.min(n - 1, Math.max(0, active.value + step))
+    nextTick(() => document.querySelector(`[data-picker-index="${active.value}"]`)?.scrollIntoView({ block: 'nearest' }))
+  } else if (e.key === 'Enter') {
+    e.preventDefault()
+    const item = filtered.value[active.value]
+    if (item) pick(item.value)
+  }
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    :title="title"
+    :description="description"
+    :ui="{ content: 'sm:max-w-5xl', body: 'p-0 sm:p-0' }"
+  >
+    <template #body>
+      <div class="flex flex-col max-h-[75dvh]" @keydown="onKeydown">
+        <div class="p-3 sm:px-4 shrink-0">
+          <UInput
+            ref="searchRef"
+            v-model="query"
+            icon="i-lucide-search"
+            :placeholder="placeholder || 'Search…'"
+            class="w-full"
+            autofocus
+          >
+            <template #trailing>
+              <span class="text-[11px] text-dimmed font-mono">{{ filtered.length }}/{{ items.length }}</span>
+            </template>
+          </UInput>
+        </div>
+        <div class="flex-1 overflow-y-auto overscroll-contain px-3 sm:px-4 pb-4 space-y-4">
+          <section v-for="g in groups" :key="g.name">
+            <h3 v-if="g.name" class="sticky top-0 z-10 bg-default/95 backdrop-blur py-1 text-[10px] uppercase tracking-widest text-dimmed">
+              {{ g.name }} <span class="normal-case tracking-normal">· {{ g.list.length }}</span>
+            </h3>
+            <div data-picker-grid class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-1.5">
+              <button
+                v-for="item in g.list"
+                :key="item.value"
+                type="button"
+                :data-picker-index="item.index"
+                class="flex items-start gap-2 rounded-sm px-2.5 py-2 text-left transition-colors cursor-pointer min-w-0"
+                :class="[
+                  item.value === model ? 'bg-accented text-highlighted ring-1 ring-inset ring-(--ui-border-inverted)/40' : 'bg-muted hover:bg-elevated',
+                  item.index === active ? 'outline outline-1 outline-(--ui-border-inverted)/60' : ''
+                ]"
+                @click="pick(item.value)"
+                @mouseenter="active = item.index"
+              >
+                <UIcon :name="item.value === model ? 'i-lucide-circle-check' : (item.icon || 'i-lucide-circle')" class="size-4 mt-0.5 shrink-0" :class="item.value === model ? 'text-highlighted' : 'text-dimmed'" />
+                <div class="min-w-0 flex-1">
+                  <div class="text-sm truncate">{{ item.label }}</div>
+                  <div v-if="item.detail" class="text-[11px] text-dimmed font-mono truncate">{{ item.detail }}</div>
+                  <div v-if="item.tags?.length" class="flex flex-wrap gap-1 mt-1">
+                    <span v-for="tag in item.tags" :key="tag" class="rounded-sm bg-elevated px-1 text-[10px] font-mono text-muted">{{ tag }}</span>
+                  </div>
+                </div>
+              </button>
+            </div>
+          </section>
+          <p v-if="!filtered.length" class="py-10 text-center text-sm text-dimmed">Nothing matches “{{ query }}”.</p>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>
diff --git a/app/components/ProjectSidebar.vue b/app/components/ProjectSidebar.vue
index 987d387..5379818 100644
--- a/app/components/ProjectSidebar.vue
+++ b/app/components/ProjectSidebar.vue
@@ -18,6 +18,7 @@ function toggleSubagents(parentID: string) {
   subagentToggles.value = { ...subagentToggles.value, [parentID]: !subagentsOpen(parentID) }
 }
 const { busy: busySessions } = useBusySessions()
+const { isUnread } = useSeenSessions()
 const projectMeta = useProjectMeta()
 const globalSearch = useGlobalSearch()
 
@@ -38,7 +39,8 @@ const sortedSessions = computed(() => {
 const api = useOpencodeApi(() => props.directory)
 const toast = useToast()
 
-onMounted(refresh)
+// the shell stays mounted while switching projects: follow the directory
+watch(() => props.directory, refresh, { immediate: true })
 
 async function newSession() {
   try {
@@ -82,11 +84,13 @@ async function deleteSession(id: string) {
 // ---- tool tiles ----
 const { reloading, menuItems } = useReload()
 const scheduleCount = ref(0)
-onMounted(() => {
-  $fetch<Array<{ enabled: boolean }>>('/api/v1/schedules', { query: { directory: props.directory }, timeout: 10000 })
-    .then((list) => { scheduleCount.value = list.filter((s) => s.enabled).length })
+watch(() => props.directory, (directory) => {
+  if (!import.meta.client) return
+  scheduleCount.value = 0
+  $fetch<Array<{ enabled: boolean }>>('/api/v1/schedules', { query: { directory }, timeout: 10000 })
+    .then((list) => { if (directory === props.directory) scheduleCount.value = list.filter((s) => s.enabled).length })
     .catch(() => {})
-})
+}, { immediate: true })
 
 interface Tile {
   key: string
@@ -101,7 +105,10 @@ interface Tile {
 }
 
 const tiles = computed<Tile[]>(() => [
+  { key: 'overview', label: 'Project', tip: 'Project overview', icon: 'i-lucide-layout-dashboard', to: `/p/${dirParam.value}` },
   ...(caps.value.mcp ? [{ key: 'mcp', label: 'MCP', tip: 'MCP servers', icon: 'i-lucide-server-cog', to: `/p/${dirParam.value}/mcp` }] : []),
+  { key: 'agents', label: 'Agents', tip: 'Agents: models, prompts, MCP access', icon: 'i-lucide-bot', to: `/p/${dirParam.value}/agents` },
+  { key: 'skills', label: 'Skills', tip: 'Skills: view, check, allow, write and improve', icon: 'i-lucide-graduation-cap', to: `/p/${dirParam.value}/skills` },
   {
     key: 'schedules',
     label: 'Schedules',
@@ -154,7 +161,7 @@ function fmtTime(ts?: number) {
         @click="newSession"
       />
       <!-- project tools: one row of labelled tiles -->
-      <nav class="grid gap-1" :style="{ gridTemplateColumns: `repeat(${tiles.length}, minmax(0, 1fr))` }" aria-label="Project tools">
+      <nav class="grid gap-0.5" :style="{ gridTemplateColumns: `repeat(${tiles.length > 5 ? Math.ceil(tiles.length / 2) : tiles.length}, minmax(0, 1fr))` }" aria-label="Project tools">
         <template v-for="tile in tiles" :key="tile.key">
           <UDropdownMenu v-if="tile.menu" :items="tile.menu" :content="{ align: 'start' }">
             <UTooltip :text="tile.tip">
@@ -203,13 +210,13 @@ function fmtTime(ts?: number) {
       Sessions
       <UIcon v-if="refreshing" name="i-lucide-loader-circle" class="size-3 animate-spin" />
     </div>
-    <div class="px-2 pb-1.5">
+    <div class="flex items-center gap-1 px-2 pb-1.5">
       <UInput
         v-model="sessionFilter"
         size="xs"
         icon="i-lucide-search"
         placeholder="Search sessions…"
-        class="w-full"
+        class="flex-1 min-w-0"
         :ui="{ trailing: 'pe-1' }"
       >
         <template v-if="sessionFilter" #trailing>
@@ -228,7 +235,9 @@ function fmtTime(ts?: number) {
           </div>
         </div>
       </div>
-      <TransitionGroup name="oc-list">
+      <!-- keyed by project: switching projects swaps the list at once instead
+           of sliding every row out and the new ones in -->
+      <TransitionGroup :key="directory" name="oc-list">
       <div
         v-for="s in sortedSessions"
         :key="s.id"
@@ -247,7 +256,9 @@ function fmtTime(ts?: number) {
             :class="busySessions[s.id] ? 'animate-spin text-highlighted' : 'text-dimmed'"
           />
           <div class="min-w-0 flex-1">
-            <div class="truncate pr-11 pointer-coarse:pr-20">{{ s.title || 'Untitled session' }}</div>
+            <div class="truncate pr-11 pointer-coarse:pr-20" :class="isUnread(s) && route.params.id !== s.id ? 'text-highlighted font-medium' : ''">
+              <span v-if="isUnread(s) && route.params.id !== s.id" class="inline-block size-1.5 rounded-full bg-primary align-middle mr-1" title="New activity since you last opened it" />{{ s.title || 'Untitled session' }}
+            </div>
             <div class="text-[10px] text-dimmed font-mono">
               {{ busySessions[s.id] ? 'working…' : fmtTime(s.time?.updated || s.time?.created) }}
             </div>
@@ -258,10 +269,11 @@ function fmtTime(ts?: number) {
           v-if="confirmingDelete !== s.id"
           icon="i-lucide-star"
           size="xs"
-          :color="projectMeta.isFavorite(directory, s.id) ? 'primary' : 'neutral'"
+          color="neutral"
           variant="ghost"
           class="oc-tap absolute right-7 top-1.5 pointer-coarse:right-12 pointer-coarse:top-1"
-          :class="projectMeta.isFavorite(directory, s.id) ? '' : 'oc-hover-only opacity-0 group-hover:opacity-100'"
+          :class="projectMeta.isFavorite(directory, s.id) ? 'text-amber-400 hover:text-amber-300' : 'oc-hover-only opacity-0 group-hover:opacity-100'"
+          :ui="{ leadingIcon: projectMeta.isFavorite(directory, s.id) ? 'oc-filled' : '' }"
           :aria-label="projectMeta.isFavorite(directory, s.id) ? 'Unfavorite session' : 'Favorite session'"
           @click.stop.prevent="projectMeta.toggleFavorite(directory, s.id)"
         />
@@ -329,16 +341,18 @@ function fmtTime(ts?: number) {
       <div v-else-if="!sessions.length && !refreshing" class="px-2.5 py-4 text-xs text-dimmed">No sessions yet</div>
     </div>
 
-    <div class="p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]">
+    <!-- desktop has "All projects" in the header; the phone menu needs it here -->
+    <div class="md:hidden p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]">
       <UButton
         block
         color="neutral"
         variant="ghost"
         class="justify-start"
         :ui="{ leadingIcon: 'size-4' }"
-        icon="i-lucide-arrow-left"
+        icon="i-lucide-layout-grid"
         label="All projects"
         to="/"
+        @click="emit('navigate')"
       />
     </div>
   </div>
diff --git a/app/components/ProjectSwitcher.vue b/app/components/ProjectSwitcher.vue
new file mode 100644
index 0000000..6973240
--- /dev/null
+++ b/app/components/ProjectSwitcher.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+// The current project's name as a menu: jump to another recent project,
+// to the list of all projects, or open a new folder. Keeps "this project"
+// and "all projects" apart in the sidebar and the mobile header.
+const props = defineProps<{ directory: string }>()
+const emit = defineEmits<{ navigate: [] }>()
+const route = useRoute()
+const { recents } = useRecentProjects()
+
+// same sub-page in the other project when it has one (MCP, usage…), else its overview
+function targetFor(dir: string) {
+  const sub = route.path.split('/').slice(3)
+  const keep = ['mcp', 'agents', 'skills', 'schedules', 'stats'].includes(sub[0] || '') ? `/${sub[0]}` : ''
+  return `/p/${encodeDir(dir)}${keep}`
+}
+
+const items = computed(() => {
+  const others = recents.value
+    .filter((r) => r.directory !== props.directory)
+    .slice(0, 8)
+    .map((r) => ({
+      label: dirName(r.directory),
+      description: r.directory,
+      icon: 'i-lucide-folder-git-2',
+      onSelect: () => { emit('navigate'); navigateTo(targetFor(r.directory)) }
+    }))
+  return [
+    [{ type: 'label' as const, label: 'Switch project' }],
+    others.length ? others : [{ label: 'No other recent projects', disabled: true }],
+    [
+      { label: 'All projects', icon: 'i-lucide-layout-grid', onSelect: () => { emit('navigate'); navigateTo('/') } }
+    ]
+  ]
+})
+</script>
+
+<template>
+  <UDropdownMenu :items="items" :content="{ align: 'start' }" :ui="{ content: 'w-72 max-w-[calc(100vw-2rem)]', itemDescription: 'font-mono truncate' }">
+    <button
+      type="button"
+      class="flex items-center gap-1.5 min-w-0 rounded-sm px-1.5 py-1 -mx-1.5 text-left hover:bg-elevated transition-colors cursor-pointer"
+      :aria-label="`Project ${dirName(directory)}: switch project`"
+    >
+      <UIcon name="i-lucide-folder-git-2" class="size-4 text-primary shrink-0" />
+      <span class="text-sm font-semibold truncate">{{ dirName(directory) }}</span>
+      <UIcon name="i-lucide-chevrons-up-down" class="size-3.5 text-dimmed shrink-0" />
+    </button>
+  </UDropdownMenu>
+</template>
diff --git a/app/components/ProjectsPanel.vue b/app/components/ProjectsPanel.vue
new file mode 100644
index 0000000..3b9bef2
--- /dev/null
+++ b/app/components/ProjectsPanel.vue
@@ -0,0 +1,284 @@
+<script setup lang="ts">
+// Desktop projects panel: every project, and under each one the chats worth
+// coming back to: starred ones, then the recent ones (used in the last hours,
+// unread ones a few days longer, running ones always). "More" lists up to
+// N chats; everything is configurable (gear button).
+import type { Project, SessionInfo } from '#shared/types/opencode'
+import { pickRecentChats, shortAge, type ChatPick, type RecentChatsSettings } from '~/utils/recentChats'
+
+const props = defineProps<{ directory: string }>()
+const emit = defineEmits<{ close: [] }>()
+
+const route = useRoute()
+const api = useOpencodeApi()
+const { recents } = useRecentProjects()
+const projectMeta = useProjectMeta()
+const { settings, save, reset } = useRecentChatsSettings()
+const { isUnread } = useSeenSessions()
+const { busy: liveBusy } = useBusySessions()
+// the open project's list is live (SSE); others are fetched while the panel shows
+const live = useSessions(() => props.directory)
+
+const projects = ref<Project[]>([])
+const loading = ref(false)
+const filter = ref('')
+
+const projectDirs = computed(() => {
+  const seen = new Set<string>()
+  const list: string[] = []
+  for (const r of recents.value) if (!seen.has(r.directory)) { seen.add(r.directory); list.push(r.directory) }
+  for (const p of projects.value) {
+    if (p.worktree && p.worktree !== '/' && !seen.has(p.worktree)) { seen.add(p.worktree); list.push(p.worktree) }
+  }
+  const q = filter.value.trim().toLowerCase()
+  return q ? list.filter((d) => d.toLowerCase().includes(q)) : list
+})
+
+// ---- chats per project ----
+const chats = ref<Record<string, SessionInfo[]>>({})
+const busyByDir = ref<Record<string, Record<string, boolean>>>({})
+
+const scanned = computed(() => projectDirs.value.slice(0, Math.max(0, settings.value.maxProjects)))
+
+async function loadChats(dir: string) {
+  if (!chats.value[dir]) {
+    const cached = readSessionsCache(dir)
+    if (cached.length) chats.value = { ...chats.value, [dir]: cached }
+  }
+  const scoped = useOpencodeApi(() => dir)
+  const [list, status] = await Promise.all([
+    scoped.sessions().catch(() => null),
+    ocFetch<Record<string, { type?: string }>>('/api/opencode/session/status', { query: { directory: dir }, timeout: 10_000 }).catch(() => null)
+  ])
+  if (list) chats.value = { ...chats.value, [dir]: list }
+  if (status && typeof status === 'object') {
+    busyByDir.value = {
+      ...busyByDir.value,
+      [dir]: Object.fromEntries(Object.entries(status).filter(([, s]) => s?.type && s.type !== 'idle').map(([id]) => [id, true]))
+    }
+  }
+}
+
+async function loadAll() {
+  loading.value = true
+  try {
+    projects.value = await api.projects().catch(() => projects.value)
+    await Promise.all(scanned.value.filter((d) => d !== props.directory).map(loadChats))
+  } finally {
+    loading.value = false
+  }
+}
+
+let poll: ReturnType<typeof setInterval> | undefined
+onMounted(() => {
+  loadAll()
+  // other projects have no live stream here: refresh them now and then
+  poll = setInterval(() => { if (document.visibilityState === 'visible') loadAll() }, 60_000)
+})
+onBeforeUnmount(() => clearInterval(poll))
+watch(() => settings.value.maxProjects, () => loadAll())
+
+function sessionsOf(dir: string): SessionInfo[] {
+  if (dir === props.directory) {
+    const kids = settings.value.includeSubagents ? Object.values(live.children.value).flat() : []
+    return [...live.sessions.value, ...kids]
+  }
+  return chats.value[dir] || []
+}
+
+const expanded = ref<Record<string, boolean>>({})
+const collapsed = useCookie<string[]>('oc-projects-collapsed', { default: () => [] })
+function toggleCollapsed(dir: string) {
+  collapsed.value = collapsed.value.includes(dir) ? collapsed.value.filter((d) => d !== dir) : [...collapsed.value, dir]
+}
+
+function picksOf(dir: string) {
+  return pickRecentChats(sessionsOf(dir), {
+    settings: settings.value,
+    favorites: projectMeta.of(dir).favorites,
+    isUnread,
+    busy: dir === props.directory ? liveBusy.value : (busyByDir.value[dir] || {})
+  })
+}
+const picks = computed(() => Object.fromEntries(scanned.value.map((dir) => [dir, picksOf(dir)])))
+const unreadCount = (dir: string) => {
+  const p = picks.value[dir]
+  return p ? [...p.starred, ...p.recent, ...p.more].filter((c) => c.unread).length : 0
+}
+function visible(dir: string): ChatPick[] {
+  const p = picks.value[dir]
+  if (!p) return []
+  return [...p.starred, ...p.recent, ...(expanded.value[dir] ? p.more : [])]
+}
+
+const chatLink = (dir: string, id: string) => `/p/${encodeDir(dir)}/session/${id}`
+const cleanTitle = (s: SessionInfo) => (s.title || 'Untitled session').replace(/\s*\(@[\w-]+ subagent\)$/, '')
+
+// ---- settings ----
+const settingsOpen = ref(false)
+const draft = reactive<RecentChatsSettings>({ ...settings.value })
+watch(settingsOpen, (open) => { if (open) Object.assign(draft, settings.value) })
+function applySettings() {
+  const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, Math.round(Number(n) || 0)))
+  save({
+    ...draft,
+    recentHours: clamp(draft.recentHours, 1, 24 * 30),
+    maxRecent: clamp(draft.maxRecent, 0, 50),
+    unreadDays: clamp(draft.unreadDays, 0, 90),
+    expandMax: clamp(draft.expandMax, 1, 100),
+    starredMax: clamp(draft.starredMax, 0, 50),
+    maxProjects: clamp(draft.maxProjects, 0, 40)
+  })
+  settingsOpen.value = false
+}
+const NUMBERS: Array<{ key: keyof RecentChatsSettings; label: string; hint: string; unit: string }> = [
+  { key: 'recentHours', label: 'Recent means used within', hint: 'Chats with activity in this window are listed.', unit: 'hours' },
+  { key: 'maxRecent', label: 'Recent chats per project', hint: 'Running and unread ones come first.', unit: 'chats' },
+  { key: 'unreadDays', label: 'Keep unread chats for', hint: 'A chat that changed since you last opened it stays listed this long. 0 = off.', unit: 'days' },
+  { key: 'starredMax', label: 'Starred chats per project', hint: 'Shown above the recent ones. 0 = none.', unit: 'chats' },
+  { key: 'expandMax', label: '"More" shows up to', hint: 'Total chats per project once expanded.', unit: 'chats' },
+  { key: 'maxProjects', label: 'Projects with chats', hint: 'The most recent projects get their chats loaded.', unit: 'projects' }
+]
+const SWITCHES: Array<{ key: keyof RecentChatsSettings; label: string; hint: string }> = [
+  { key: 'showBusy', label: 'Always list running chats', hint: 'A chat generating a reply shows even when it is older.' },
+  { key: 'includeSubagents', label: 'Include subagent chats', hint: 'Sub-chats started by the task tool or run_subagent.' },
+  { key: 'showTime', label: 'Show the time of last activity', hint: '' }
+]
+</script>
+
+<template>
+  <div class="h-full flex flex-col">
+    <div class="flex items-center gap-1 pl-3 pr-1.5 h-12">
+      <span class="text-[10px] uppercase tracking-widest text-dimmed flex-1">Projects</span>
+      <UIcon v-if="loading" name="i-lucide-loader-circle" class="size-3 animate-spin text-dimmed" />
+      <UTooltip text="Which chats are listed">
+        <UButton icon="i-lucide-settings-2" color="neutral" variant="ghost" size="xs" aria-label="Chat list settings" @click="settingsOpen = true" />
+      </UTooltip>
+      <UTooltip text="Hide projects panel">
+        <UButton icon="i-lucide-panel-left-close" color="neutral" variant="ghost" size="xs" aria-label="Hide projects panel" @click="emit('close')" />
+      </UTooltip>
+    </div>
+    <div class="px-1.5 pb-1.5">
+      <UInput v-model="filter" size="xs" icon="i-lucide-search" placeholder="Search projects…" class="w-full" />
+    </div>
+
+    <div class="flex-1 overflow-y-auto overflow-x-hidden px-1.5 pb-2 space-y-1">
+      <div v-if="loading && !projectDirs.length" class="px-2 space-y-2 pt-1">
+        <USkeleton v-for="i in 4" :key="i" class="h-6 w-full" />
+      </div>
+      <div v-else-if="!projectDirs.length && serverDegraded" class="flex items-center gap-1.5 px-2 py-3 text-xs text-error">
+        <UIcon name="i-lucide-plug-zap" class="size-3.5 shrink-0" />
+        Server not responding
+      </div>
+
+      <div v-for="d in projectDirs" :key="d">
+        <!-- project row: chevron folds its chats, the name opens it -->
+        <div
+          class="group flex items-center rounded-sm text-xs"
+          :class="d === directory ? 'bg-accented text-highlighted' : 'text-muted hover:bg-accented/60'"
+        >
+          <button
+            v-if="picks[d] && visible(d).length + picks[d].more.length"
+            type="button"
+            class="p-1.5 pr-0.5 text-dimmed hover:text-highlighted cursor-pointer"
+            :aria-label="collapsed.includes(d) ? `Show chats of ${dirName(d)}` : `Hide chats of ${dirName(d)}`"
+            :aria-expanded="!collapsed.includes(d)"
+            @click="toggleCollapsed(d)"
+          >
+            <UIcon name="i-lucide-chevron-right" class="size-3 transition-transform duration-200" :class="collapsed.includes(d) ? '' : 'rotate-90'" />
+          </button>
+          <span v-else class="w-[1.375rem] shrink-0" />
+          <NuxtLink :to="`/p/${encodeDir(d)}`" class="flex items-center gap-1.5 flex-1 min-w-0 py-1.5 pr-2" :title="d">
+            <UIcon name="i-lucide-folder-git-2" class="size-3.5 shrink-0" />
+            <span class="truncate flex-1 font-medium">{{ dirName(d) }}</span>
+            <span
+              v-if="unreadCount(d) && collapsed.includes(d)"
+              class="min-w-4 h-4 px-1 rounded-full bg-primary text-inverted text-[9px] leading-4 text-center"
+              :title="`${unreadCount(d)} unread`"
+            >{{ unreadCount(d) }}</span>
+          </NuxtLink>
+        </div>
+
+        <!-- its chats -->
+        <CollapseTransition>
+          <div v-if="picks[d] && !collapsed.includes(d) && visible(d).length + picks[d].more.length" class="ml-3 pl-1.5 border-l border-default space-y-px py-0.5">
+            <NuxtLink
+              v-for="c in visible(d)"
+              :key="c.session.id"
+              :to="chatLink(d, c.session.id)"
+              class="oc-row flex items-center gap-1.5 rounded-sm pl-1.5 pr-1.5 py-1 text-[11px] hover:bg-accented"
+              :class="d === directory && route.params.id === c.session.id ? 'bg-accented text-highlighted' : (c.unread ? 'text-highlighted' : 'text-muted')"
+              :title="cleanTitle(c.session)"
+            >
+              <UIcon
+                v-if="c.busy"
+                name="i-lucide-loader-circle"
+                class="size-3 shrink-0 animate-spin text-highlighted"
+              />
+              <UIcon v-else-if="c.starred" name="i-lucide-star" class="size-3 shrink-0 text-amber-400 oc-filled" />
+              <UIcon v-else-if="c.session.parentID" name="i-lucide-bot" class="size-3 shrink-0 text-dimmed" />
+              <span v-else class="size-3 shrink-0 flex items-center justify-center">
+                <span class="size-1.5 rounded-full" :class="c.unread ? 'bg-primary' : 'bg-accented'" />
+              </span>
+              <span class="truncate flex-1" :class="c.unread ? 'font-medium' : ''">{{ cleanTitle(c.session) }}</span>
+              <span v-if="settings.showTime" class="shrink-0 text-[9px] font-mono text-dimmed">
+                {{ c.busy ? '…' : shortAge(c.session.time?.updated || c.session.time?.created || 0) }}
+              </span>
+            </NuxtLink>
+            <button
+              v-if="picks[d].more.length"
+              type="button"
+              class="flex items-center gap-1 w-full rounded-sm pl-1.5 py-0.5 text-[10px] text-dimmed hover:text-highlighted cursor-pointer"
+              @click="expanded = { ...expanded, [d]: !expanded[d] }"
+            >
+              <UIcon :name="expanded[d] ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'" class="size-3" />
+              {{ expanded[d] ? 'Less' : `${picks[d].more.length} more` }}
+            </button>
+          </div>
+        </CollapseTransition>
+      </div>
+
+      <NuxtLink
+        to="/"
+        class="oc-row flex items-center gap-1.5 rounded-sm px-2 py-1.5 text-xs text-dimmed hover:bg-accented"
+      >
+        <UIcon name="i-lucide-layout-grid" class="size-3.5 shrink-0" />
+        <span>All projects…</span>
+      </NuxtLink>
+    </div>
+
+    <UModal v-model:open="settingsOpen" title="Chats in the projects panel" description="Which conversations are listed under each project. Saved in this browser.">
+      <template #body>
+        <div class="space-y-3">
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            <UFormField v-for="n in NUMBERS" :key="n.key" :label="n.label" :description="n.hint" size="sm">
+              <UInput v-model.number="(draft[n.key] as number)" type="number" min="0" class="w-full">
+                <template #trailing><span class="text-[11px] text-dimmed">{{ n.unit }}</span></template>
+              </UInput>
+            </UFormField>
+          </div>
+          <div class="space-y-2">
+            <div v-for="s in SWITCHES" :key="s.key" class="flex items-start gap-2.5">
+              <USwitch v-model="(draft[s.key] as boolean)" size="sm" :aria-label="s.label" />
+              <div>
+                <div class="text-sm">{{ s.label }}</div>
+                <p v-if="s.hint" class="text-[11px] text-dimmed">{{ s.hint }}</p>
+              </div>
+            </div>
+          </div>
+          <p class="text-[11px] text-dimmed">
+            Unread = the chat changed after you last opened it in this browser. Star chats in the sidebar or the chat header to keep them on top.
+          </p>
+        </div>
+      </template>
+      <template #footer>
+        <div class="oc-actions">
+          <UButton variant="ghost" color="neutral" icon="i-lucide-rotate-ccw" label="Defaults" @click="reset(); settingsOpen = false" />
+          <span class="flex-1 oc-spacer" />
+          <UButton variant="ghost" color="neutral" label="Cancel" @click="settingsOpen = false" />
+          <UButton color="primary" label="Save" @click="applySettings" />
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
diff --git a/app/components/chat/McpHtmlFrame.vue b/app/components/chat/McpHtmlFrame.vue
index 3dc5591..9f17fe9 100644
--- a/app/components/chat/McpHtmlFrame.vue
+++ b/app/components/chat/McpHtmlFrame.vue
@@ -22,6 +22,9 @@ const props = defineProps<{
 const frame = ref<HTMLIFrameElement>()
 // small until the app reports its real size: short cards stay short
 const height = ref(props.viewer ? 480 : 160)
+// "fit to screen": as tall as the window allows, for apps that don't report
+// their size or need room (maps, dashboards)
+const tall = ref(false)
 
 // External apps run with allow-same-origin (module scripts, storage). That is
 // only safe for http(s) pages on another origin: javascript:/data: URLs or a
@@ -290,6 +293,16 @@ onBeforeUnmount(() => window.removeEventListener('message', onMessage))
           aria-label="Open in a new tab"
         />
       </UTooltip>
+      <UTooltip v-if="!viewer && !shownElsewhere" :text="tall ? 'Back to its own height' : 'Fit to the screen height'">
+        <UButton
+          :icon="tall ? 'i-lucide-fold-vertical' : 'i-lucide-unfold-vertical'"
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          :aria-label="tall ? 'Back to its own height' : 'Fit to the screen height'"
+          @click="tall = !tall"
+        />
+      </UTooltip>
       <template v-if="appId && !viewer">
         <UTooltip text="Open in side panel">
           <UButton
@@ -332,7 +345,7 @@ onBeforeUnmount(() => window.removeEventListener('message', onMessage))
           : 'allow-scripts allow-forms'"
         class="w-full bg-white dark:bg-neutral-950 transition-opacity duration-300"
         :class="[viewer ? 'flex-1' : '', state === 'ready' ? 'opacity-100' : 'opacity-0']"
-        :style="viewer ? undefined : { height: height + 'px' }"
+        :style="viewer ? undefined : { height: tall ? 'calc(100dvh - 10rem)' : height + 'px' }"
         :title="title || 'MCP app'"
         @load="onFrameLoad"
       />
diff --git a/app/components/chat/PromptBox.vue b/app/components/chat/PromptBox.vue
index a5d41cd..bad154e 100644
--- a/app/components/chat/PromptBox.vue
+++ b/app/components/chat/PromptBox.vue
@@ -41,6 +41,7 @@ const emit = defineEmits<{
   abort: []
   refreshProviders: []
 }>()
+const toast = useToast()
 const caps = useCapabilities()
 
 // NOTE: Reka UI <SelectItem> forbids empty-string values, so "default"
@@ -58,48 +59,49 @@ const forcedTools = ref<string[]>([])
 const optionsOpen = ref(false)
 const providersOpen = ref(false)
 
-interface ModelItem {
-  label: string
-  value: string
-  provider: string
-  reasoning: boolean
-  ctx: number
-  cost: string
-}
+const modelItems = computed(() => modelItemsOf(props.providers))
 
-const modelItems = computed<ModelItem[]>(() => {
-  if (!props.providers) return []
-  const items: ModelItem[] = []
-  for (const provider of props.providers.providers || []) {
-    const providerName = String(provider.name || provider.id)
-    for (const [id, m] of Object.entries(provider.models || {})) {
-      const ctx = Math.round((m.limit?.context || 0) / 1000)
-      const cin = m.cost?.input
-      const cout = m.cost?.output
-      items.push({
-        label: `${m.name || id}`,
-        value: `${provider.id}/${id}`,
-        provider: providerName,
-        reasoning: Boolean(m.reasoning || m.capabilities?.reasoning),
-        ctx,
-        cost: cin != null && cout != null && (cin > 0 || cout > 0)
-          ? `$${cin}/${cout}`
-          : (cin === 0 && cout === 0 ? 'free' : '')
-      })
+const primaryAgents = computed(() => props.agents
+  .filter((a) => (!a.mode || a.mode === 'primary' || a.mode === 'all') && a.name !== DEFAULT && !(a as { hidden?: boolean }).hidden))
+const agentItems = computed(() => [
+  { label: 'default agent', value: DEFAULT, icon: 'i-lucide-bot', description: 'the server default (usually build)' },
+  ...primaryAgents.value.map((a) => ({ label: a.name, value: a.name, icon: 'i-lucide-bot', description: a.description }))
+])
+// long agent lists (MCP subagents, custom agents) get a roomy picker too
+const agentPickerOpen = ref(false)
+const agentPickerItems = computed(() => [
+  ...agentItems.value.map((a) => ({
+    value: a.value,
+    label: a.label,
+    group: a.value === DEFAULT ? 'Default' : 'Primary agents',
+    detail: a.description,
+    icon: 'i-lucide-bot'
+  })),
+  // subagents can't run a chat but can be mentioned: picking one inserts @name
+  ...props.agents.filter((a) => a.mode === 'subagent').map((a) => ({
+    value: `@${a.name}`,
+    label: `@${a.name}`,
+    group: 'Subagents (inserted as an @mention)',
+    detail: a.description,
+    icon: 'i-lucide-bot-message-square'
+  }))
+])
+const agentModel = computed({
+  get: () => agent.value,
+  set: (value: string) => {
+    if (!value.startsWith('@')) {
+      agent.value = value
+      return
+    }
+    const name = value.slice(1)
+    text.value = `${text.value.replace(/\s*$/, '')}${text.value.trim() ? ' ' : ''}@${name} `
+    if (!picked.value.some((m) => m.kind === 'agent' && m.value === name)) {
+      picked.value = [...picked.value, { kind: 'agent', value: name }]
     }
+    nextTick(() => textareaEl()?.focus())
   }
-  return items.sort((a, b) =>
-    a.provider.localeCompare(b.provider) || a.label.localeCompare(b.label)
-  )
 })
 
-const agentItems = computed(() => [
-  { label: 'default agent', value: DEFAULT, icon: 'i-lucide-bot' },
-  ...props.agents
-    .filter((a) => (!a.mode || a.mode === 'primary' || a.mode === 'all') && a.name !== DEFAULT)
-    .map((a) => ({ label: a.name, value: a.name, icon: 'i-lucide-bot' }))
-])
-
 const selectedModel = computed(() => modelItems.value.find((m) => m.value === model.value))
 
 const variantItems = [
@@ -297,6 +299,7 @@ function send() {
   const modelID = rest.join('/')
   // shell and slash commands carry no mentions
   const mentioned = /^[!/]/.test(value) ? [] : mentionParts(value, picked.value, props.directory)
+  rememberHistory(value)
   emit('send', {
     text: value,
     model: providerID && modelID ? { providerID, modelID } : undefined,
@@ -314,32 +317,62 @@ function send() {
 }
 
 // ---- attachments (sent as opencode file parts, data URLs) ----
+// from the paperclip, pasted (screenshots, copied files) or dropped on the chat
 const attachments = ref<Array<{ mime: string; filename: string; url: string; size: number }>>([])
 const fileInput = ref<HTMLInputElement>()
-const MAX_FILE = 4 * 1024 * 1024
+const MAX_FILE = 10 * 1024 * 1024
 
 function pickFiles() {
   fileInput.value?.click()
 }
 
-function onFiles(e: Event) {
-  const input = e.target as HTMLInputElement
-  for (const file of Array.from(input.files || [])) {
-    if (file.size > MAX_FILE) continue
+function fmtSize(bytes: number) {
+  return bytes >= 1024 * 1024 ? `${(bytes / 1024 / 1024).toFixed(1)} MB` : `${Math.max(1, Math.round(bytes / 1024))} KB`
+}
+
+/** Read files into attachments; pasted screenshots get a readable name. */
+function addFiles(files: Iterable<File>) {
+  const tooBig: string[] = []
+  for (const file of files) {
+    if (file.size > MAX_FILE) {
+      tooBig.push(file.name)
+      continue
+    }
+    const stamp = new Date().toISOString().slice(0, 19).replace('T', ' ').replace(/:/g, '-')
+    const filename = file.name && file.name !== 'image.png'
+      ? file.name
+      : `pasted ${stamp}.${(file.type.split('/')[1] || 'png').replace('jpeg', 'jpg')}`
     const reader = new FileReader()
     reader.onload = () => {
-      attachments.value.push({
-        mime: file.type || 'application/octet-stream',
-        filename: file.name,
-        url: String(reader.result),
-        size: file.size
-      })
+      attachments.value.push({ mime: file.type || 'application/octet-stream', filename, url: String(reader.result), size: file.size })
     }
     reader.readAsDataURL(file)
   }
+  if (tooBig.length) {
+    toast.add({ title: `Too large to attach (max ${fmtSize(MAX_FILE)})`, description: tooBig.join(', '), color: 'warning' })
+  }
+}
+
+function onFiles(e: Event) {
+  const input = e.target as HTMLInputElement
+  addFiles(Array.from(input.files || []))
   input.value = ''
 }
 
+// a pasted screenshot or copied file becomes an attachment; pasted text
+// still lands in the input as usual
+function onPaste(e: ClipboardEvent) {
+  const files = Array.from(e.clipboardData?.files || [])
+  if (!files.length) return
+  if (!e.clipboardData?.getData('text/plain')) e.preventDefault()
+  addFiles(files)
+}
+
+const isImage = (mime: string) => mime.startsWith('image/')
+const preview = ref<{ url: string; filename: string } | null>(null)
+
+defineExpose({ addFiles })
+
 // ---- slash-command autocomplete ----
 const slashMatches = computed(() => {
   const value = text.value
@@ -440,6 +473,128 @@ function onBlur() {
 onBeforeUnmount(() => clearTimeout(blurTimer))
 const keyboardOpen = computed(() => coarsePointer.value && inputFocused.value)
 
+// ---- terminal-like keys ----
+// Tab / Shift+Tab cycle the primary agents (like opencode's TUI), up/down walk
+// through earlier prompts, Esc twice stops a running reply
+const agentFlash = ref(0)
+function cycleAgent(step: 1 | -1) {
+  const values = agentItems.value.map((a) => a.value)
+  if (values.length < 2) return
+  const i = Math.max(0, values.indexOf(agent.value))
+  agent.value = values[(i + step + values.length) % values.length]!
+  agentFlash.value++
+}
+
+const historyKey = computed(() => `opencode-web.history.${props.directory}`)
+const history = ref<string[]>([])
+const historyIndex = ref(-1)
+let historyDraft = ''
+onMounted(() => {
+  try { history.value = JSON.parse(localStorage.getItem(historyKey.value) || '[]') } catch { history.value = [] }
+})
+function rememberHistory(value: string) {
+  history.value = [value, ...history.value.filter((h) => h !== value)].slice(0, 100)
+  historyIndex.value = -1
+  try { localStorage.setItem(historyKey.value, JSON.stringify(history.value)) } catch { /* full */ }
+}
+function walkHistory(step: 1 | -1) {
+  const next = historyIndex.value + step
+  if (next < -1 || next >= history.value.length) return false
+  if (historyIndex.value === -1) historyDraft = text.value
+  historyIndex.value = next
+  text.value = next === -1 ? historyDraft : history.value[next]!
+  nextTick(() => textareaEl()?.setSelectionRange(text.value.length, text.value.length))
+  return true
+}
+watch(text, (value) => {
+  if (historyIndex.value >= 0 && value !== history.value[historyIndex.value]) historyIndex.value = -1
+})
+
+const stopArmed = ref(false)
+let stopTimer: ReturnType<typeof setTimeout> | undefined
+onBeforeUnmount(() => clearTimeout(stopTimer))
+
+const projectBase = computed(() => `/p/${encodeDir(props.directory)}`)
+const help = computed(() => ({
+  model: {
+    title: 'Model',
+    text: [
+      'The AI model that writes the reply. Every message can use a different one; the choice is remembered per project.',
+      '',
+      '- **ctx**: how much text (in thousands of tokens) the model can keep in mind at once.',
+      '- **$in/$out**: list price per million input / output tokens. `free` models cost nothing.',
+      '- The brain icon marks models that can *think* before answering (see Think level).',
+      '',
+      'Models come from the providers configured in opencode. Add a provider (API key) to get more.'
+    ].join('\n'),
+    actions: [
+      { label: 'Configure providers', icon: 'i-lucide-plug', onClick: () => { providersOpen.value = true } },
+      { label: 'Usage & cost', icon: 'i-lucide-chart-column', to: `${projectBase.value}/stats` }
+    ]
+  },
+  think: {
+    title: 'Think level',
+    text: [
+      'How much the model reasons before it answers (only for models with thinking support).',
+      '',
+      '- **default**: what the model or opencode config uses.',
+      '- **none / low**: fast and cheap, good for small edits and questions.',
+      '- **medium / high**: better plans and fewer mistakes on harder tasks.',
+      '- **max**: the most reasoning the model allows: slowest and most expensive.',
+      '',
+      'Thinking tokens are billed as output tokens.'
+    ].join('\n'),
+    actions: [{ label: 'Usage & cost', icon: 'i-lucide-chart-column', to: `${projectBase.value}/stats` }]
+  },
+  agent: {
+    title: 'Agent',
+    text: [
+      'The agent decides how the model works: its instructions, which tools it may use and which MCP servers it sees.',
+      '',
+      '- **build**: the default, can edit files and run commands.',
+      '- **plan**: read-only, for exploring and planning.',
+      '- **orchestrator** (Subagent per MCP): delegates MCP work to one specialist subagent per server.',
+      '',
+      'Press **Tab** in the input to switch agents. Subagents can be called with **@name**.',
+      '',
+      'Agents can also load **skills**: instructions for specific tasks, used when their description matches (`/skills` lists them).'
+    ].join('\n'),
+    actions: [
+      { label: 'Skills', icon: 'i-lucide-graduation-cap', to: `${projectBase.value}/skills` },
+      { label: 'Edit agents', icon: 'i-lucide-bot', to: `${projectBase.value}/agents` }
+    ]
+  },
+  mcp: {
+    title: 'MCP for this chat',
+    text: [
+      'MCP servers give the agent extra tools (Home Assistant, browsers, docs...). Here you choose which ones this chat may use, without changing the project settings:',
+      '',
+      '- **project default**: what the MCP page configured.',
+      '- **all enabled / all disabled**: every server on or off for these messages.',
+      '- **custom**: pick servers and single tools; save the selection as a preset.',
+      '',
+      'Adding servers, fixing broken ones and the default modes live on the MCP page.'
+    ].join('\n'),
+    actions: [{ label: 'MCP servers', icon: 'i-lucide-server-cog', to: `${projectBase.value}/mcp` }]
+  }
+}))
+
+const keysHelp = [
+  '| Key | Does |',
+  '| --- | --- |',
+  '| `Enter` | send (queued while the agent works) |',
+  '| `Shift+Enter` | new line |',
+  '| `Tab` / `Shift+Tab` | next / previous agent (when no list is open) |',
+  '| `Up` / `Down` | earlier prompts (at the start / end of the input) |',
+  '| `Esc` `Esc` | stop the running reply |',
+  '| `/` | commands: `/reload`, `/mcp`, `/compact`, `/undo`... |',
+  '| `@` | mention files, folders and agents |',
+  '| `!` | run a shell command in the project |',
+  '| `Ctrl+K` | search everything |',
+  '',
+  'Paste a screenshot, or drop files anywhere on the chat, to attach them.'
+].join('\n')
+
 function onKeydown(e: KeyboardEvent) {
   if (mentionOpen.value && mentionItems.value.length) {
     if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
@@ -464,6 +619,32 @@ function onKeydown(e: KeyboardEvent) {
     pickCommand(slashMatches.value[0]!.name)
     return
   }
+  if (e.key === 'Tab' && !e.altKey && !e.ctrlKey && !e.metaKey) {
+    e.preventDefault()
+    cycleAgent(e.shiftKey ? -1 : 1)
+    return
+  }
+  if (e.key === 'Escape' && props.busy) {
+    e.preventDefault()
+    clearTimeout(stopTimer)
+    if (stopArmed.value) {
+      stopArmed.value = false
+      emit('abort')
+    } else {
+      stopArmed.value = true
+      stopTimer = setTimeout(() => { stopArmed.value = false }, 2000)
+    }
+    return
+  }
+  const el = e.target as HTMLTextAreaElement
+  if (e.key === 'ArrowUp' && !e.shiftKey && el.selectionStart === 0 && el.selectionEnd === 0 && walkHistory(1)) {
+    e.preventDefault()
+    return
+  }
+  if (e.key === 'ArrowDown' && !e.shiftKey && historyIndex.value >= 0 && el.selectionStart === text.value.length && walkHistory(-1)) {
+    e.preventDefault()
+    return
+  }
   // `repeat`: a held Enter fires keydown again and again - one send is enough
   if (e.key === 'Enter' && !e.shiftKey && !e.isComposing && !e.repeat) {
     e.preventDefault()
@@ -477,7 +658,7 @@ function onKeydown(e: KeyboardEvent) {
        room only the options panel gives way and scrolls, so the input and
        the Send row always stay on screen -->
   <div class="bg-muted px-3 sm:px-4 py-2 sm:py-3 pb-[max(0.5rem,env(safe-area-inset-bottom))] flex flex-col min-h-0">
-    <div class="max-w-4xl w-full mx-auto space-y-2 relative flex flex-col min-h-0">
+    <div class="max-w-(--oc-chat-max,56rem) w-full mx-auto space-y-2 relative flex flex-col min-h-0">
       <!-- slash command autocomplete -->
       <CollapseTransition>
         <div
@@ -550,6 +731,7 @@ function onKeydown(e: KeyboardEvent) {
         @click="syncCaret"
         @focus="onFocus"
         @blur="onBlur"
+        @paste="onPaste"
       />
 
       <!-- collapsible options; the only part of the box that shrinks and
@@ -559,57 +741,23 @@ function onKeydown(e: KeyboardEvent) {
         <!-- one row on wide screens: model / think / agent -->
         <!-- phones pair think level + agent so the panel stays short -->
         <div class="grid grid-cols-2 sm:flex sm:flex-row gap-1.5">
-          <UFormField label="Model" size="xs" class="col-span-2 flex-1 min-w-0">
+          <UFormField size="xs" class="col-span-2 flex-1 min-w-0">
+            <template #label>
+              <span class="inline-flex items-center gap-1">Model <HelpTip v-bind="help.model" /></span>
+            </template>
             <div class="flex gap-1">
-              <USelectMenu
-                v-model="model"
-                :items="modelItems"
-                value-key="value"
-                :filter-fields="['label', 'provider']"
-                :search-input="{ placeholder: 'Search models or providers…' }"
-                :virtualize="{ estimateSize: () => 44 }"
-                :loading="metaLoading"
-                :placeholder="metaLoading ? 'Loading models…' : 'Select model'"
-                size="sm"
-                class="w-full min-w-0"
-                icon="i-lucide-cpu"
-              >
-                <template #item="{ item }">
-                  <div class="flex items-center gap-2 w-full min-w-0">
-                    <div class="min-w-0 flex-1">
-                      <div class="truncate text-sm">{{ item.label }}</div>
-                      <div class="text-[10px] text-dimmed font-mono truncate">
-                        {{ item.provider }}<template v-if="item.ctx"> · {{ item.ctx }}k ctx</template><template v-if="item.cost"> · {{ item.cost }}</template>
-                      </div>
-                    </div>
-                    <UIcon
-                      v-if="item.reasoning"
-                      name="i-lucide-brain"
-                      class="size-3.5 text-dimmed shrink-0"
-                    />
-                  </div>
-                </template>
-                <template #empty>
-                  <div
-                    class="flex items-center gap-2 px-2 py-3 text-sm"
-                    :class="!metaLoading && serverDegraded ? 'text-error' : 'text-muted'"
-                  >
-                    <UIcon v-if="metaLoading" name="i-lucide-loader-circle" class="size-4 animate-spin" />
-                    <UIcon v-else-if="serverDegraded" name="i-lucide-plug-zap" class="size-4" />
-                    {{ metaLoading ? 'Loading models…' : (serverDegraded ? 'Server not responding' : 'No models found') }}
-                  </div>
-                </template>
-                <!-- always visible, unaffected by the search filter -->
-                <template #content-bottom>
+              <ModelSelect v-model="model" :items="modelItems" :loading="metaLoading">
+                <template #bottom>
                   <button
-                    class="flex w-full items-center gap-2 px-2.5 py-2 text-sm text-highlighted bg-elevated hover:bg-accented cursor-pointer"
+                    class="flex items-center gap-2 px-2.5 py-2 text-sm text-highlighted bg-elevated hover:bg-accented cursor-pointer"
+                    :class="modelItems.length > 10 ? 'border-l border-default' : 'flex-1'"
                     @mousedown.prevent="providersOpen = true"
                   >
                     <UIcon name="i-lucide-settings-2" class="size-4 shrink-0" />
                     Configure providers…
                   </button>
                 </template>
-              </USelectMenu>
+              </ModelSelect>
               <UTooltip text="Configure providers">
                 <UButton
                   color="neutral"
@@ -623,7 +771,10 @@ function onKeydown(e: KeyboardEvent) {
               </UTooltip>
             </div>
           </UFormField>
-          <UFormField label="Think level" size="xs" class="min-w-0 sm:w-36 shrink-0">
+          <UFormField size="xs" class="min-w-0 sm:w-36 shrink-0">
+            <template #label>
+              <span class="inline-flex items-center gap-1">Think level <HelpTip v-bind="help.think" /></span>
+            </template>
             <UTooltip
               :text="selectedModel && !selectedModel.reasoning ? 'This model has no thinking support' : undefined"
               :disabled="!selectedModel || selectedModel.reasoning"
@@ -639,20 +790,42 @@ function onKeydown(e: KeyboardEvent) {
               />
             </UTooltip>
           </UFormField>
-          <UFormField label="Agent" size="xs" class="min-w-0 sm:w-40 shrink-0">
-            <USelect
-              v-model="agent"
+          <UFormField size="xs" class="min-w-0 sm:w-40 shrink-0">
+            <template #label>
+              <span class="inline-flex items-center gap-1">Agent <HelpTip v-bind="help.agent" /></span>
+            </template>
+            <USelectMenu
+              v-model="agentModel"
               :items="agentItems"
               value-key="value"
+              :search-input="agentItems.length > 10 ? { placeholder: 'Search agents…' } : false"
               :loading="metaLoading"
               size="sm"
               class="w-full"
               icon="i-lucide-bot"
-            />
+              :ui="{ content: 'max-h-[min(24rem,60dvh)] min-w-56' }"
+            >
+              <template #item-label="{ item }">
+                <span class="block truncate">{{ item.label }}</span>
+                <span v-if="item.description" class="block text-[10px] text-dimmed truncate">{{ item.description }}</span>
+              </template>
+              <template v-if="agentPickerItems.length > 10" #content-bottom>
+                <button
+                  class="flex w-full items-center gap-2 px-2.5 py-2 text-sm text-highlighted bg-elevated hover:bg-accented cursor-pointer"
+                  @mousedown.prevent="agentPickerOpen = true"
+                >
+                  <UIcon name="i-lucide-layout-grid" class="size-4 shrink-0" />
+                  Show all {{ agentPickerItems.length }} agents…
+                </button>
+              </template>
+            </USelectMenu>
           </UFormField>
 
           <!-- MCP shares the same row -->
-          <UFormField v-if="caps.mcp" label="MCP" size="xs" class="col-span-2 sm:w-44 shrink-0">
+          <UFormField v-if="caps.mcp" size="xs" class="col-span-2 sm:w-44 shrink-0">
+            <template #label>
+              <span class="inline-flex items-center gap-1">MCP <HelpTip v-bind="help.mcp" /></span>
+            </template>
             <USelect
               v-if="mcpLoading"
               disabled
@@ -770,25 +943,37 @@ function onKeydown(e: KeyboardEvent) {
 
       <!-- attachment chips -->
       <CollapseTransition>
-      <div v-if="attachments.length" class="flex flex-wrap gap-1 shrink-0">
-        <UBadge
+      <div v-if="attachments.length" class="flex flex-wrap items-end gap-1.5 shrink-0">
+        <div
           v-for="(file, i) in attachments"
-          :key="i"
-          color="neutral"
-          variant="subtle"
-          size="sm"
-          class="oc-appear font-mono"
+          :key="`${file.filename}-${i}`"
+          class="oc-appear group/att relative flex items-center gap-1.5 rounded-sm bg-elevated max-w-56"
+          :class="isImage(file.mime) ? 'p-0.5' : 'pl-2 pr-1 py-1'"
+          :title="`${file.filename} · ${fmtSize(file.size)}`"
         >
-          <UIcon name="i-lucide-paperclip" class="size-3 mr-1" />
-          {{ file.filename }}
           <button
-            class="relative oc-tap-zone ml-1 cursor-pointer hover:text-error"
+            v-if="isImage(file.mime)"
+            type="button"
+            class="block cursor-zoom-in"
+            :aria-label="`Preview ${file.filename}`"
+            @click="preview = { url: file.url, filename: file.filename }"
+          >
+            <img :src="file.url" :alt="file.filename" class="h-14 w-auto max-w-40 rounded-sm object-cover">
+          </button>
+          <template v-else>
+            <UIcon :name="file.mime === 'application/pdf' ? 'i-lucide-file-text' : 'i-lucide-paperclip'" class="size-3.5 shrink-0 text-dimmed" />
+            <span class="text-[11px] font-mono truncate">{{ file.filename }}</span>
+            <span class="text-[10px] text-dimmed shrink-0">{{ fmtSize(file.size) }}</span>
+          </template>
+          <button
+            class="cursor-pointer hover:text-error"
+            :class="isImage(file.mime) ? 'absolute -top-1.5 -right-1.5 size-5 rounded-full bg-accented flex items-center justify-center shadow oc-tap-zone' : 'relative oc-tap-zone'"
             :aria-label="`Remove ${file.filename}`"
             @click="attachments.splice(i, 1)"
           >
             <UIcon name="i-lucide-x" class="size-3" />
           </button>
-        </UBadge>
+        </div>
       </div>
       </CollapseTransition>
 
@@ -797,11 +982,11 @@ function onKeydown(e: KeyboardEvent) {
           ref="fileInput"
           type="file"
           multiple
-          accept="image/*,application/pdf,text/*,.md,.json,.csv"
+          accept="image/*,application/pdf,text/*,.md,.json,.csv,.log,.yaml,.yml,.xml,.html,.ts,.js,.py"
           class="hidden"
           @change="onFiles"
         >
-        <UTooltip text="Attach files">
+        <UTooltip text="Attach files (or paste / drop them)">
           <UButton
             color="neutral"
             variant="ghost"
@@ -839,9 +1024,14 @@ function onKeydown(e: KeyboardEvent) {
             <UIcon name="i-lucide-brain" class="size-3" />
             {{ variantLabel }}
           </span>
-          <span v-if="agent !== DEFAULT" class="hidden sm:flex items-center gap-1 shrink-0">
+          <span
+            :key="agentFlash"
+            class="flex items-center gap-1 shrink-0 rounded-sm px-1"
+            :class="[agent !== DEFAULT ? 'text-muted bg-elevated' : 'hidden sm:flex', agentFlash ? 'oc-flash' : '']"
+            title="Tab switches the agent"
+          >
             <UIcon name="i-lucide-bot" class="size-3" />
-            {{ agent }}
+            {{ agent === DEFAULT ? 'default' : agent }}
           </span>
           <span v-if="mcpLoading" class="hidden sm:flex items-center gap-1 shrink-0">
             <UIcon name="i-lucide-loader-circle" class="size-3 animate-spin" />
@@ -858,6 +1048,12 @@ function onKeydown(e: KeyboardEvent) {
         </div>
         </Transition>
         <span class="flex-1" />
+        <Transition name="oc-fade">
+          <span v-if="stopArmed" class="text-[11px] text-warning shrink-0">Esc again to stop</span>
+        </Transition>
+        <span class="hidden pointer-fine:inline-flex shrink-0">
+          <HelpTip title="Keyboard & input" :text="keysHelp" />
+        </span>
         <UBadge v-if="queueLength" color="neutral" variant="subtle" size="sm">
           {{ queueLength }} queued
         </UBadge>
@@ -889,6 +1085,19 @@ function onKeydown(e: KeyboardEvent) {
       </div>
     </div>
 
+    <PickerModal
+      v-model:open="agentPickerOpen"
+      v-model="agentModel"
+      :items="agentPickerItems"
+      title="Choose an agent"
+      description="Primary agents run the chat; subagents are inserted as an @mention."
+      placeholder="Search agents…"
+    />
+    <UModal :open="Boolean(preview)" :title="preview?.filename" :ui="{ content: 'sm:max-w-4xl' }" @update:open="(v: boolean) => { if (!v) preview = null }">
+      <template #body>
+        <img v-if="preview" :src="preview.url" :alt="preview.filename" class="max-h-[70dvh] mx-auto rounded-sm">
+      </template>
+    </UModal>
     <ProvidersModal
       v-model:open="providersOpen"
       :providers="providers"
diff --git a/app/components/chat/StructuredData.vue b/app/components/chat/StructuredData.vue
new file mode 100644
index 0000000..0a8c779
--- /dev/null
+++ b/app/components/chat/StructuredData.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+// Readable view of structured tool data: some MCP servers return JSON meant
+// for their own front-end components (e.g. `{ __componentType, message, data }`)
+// instead of an HTML/ui:// app. Objects become labelled fields, lists of
+// records become tables, nested parts become sub-sections.
+defineOptions({ name: 'ChatStructuredData' })
+
+const props = withDefaults(defineProps<{
+  value: unknown
+  /** heading shown above (e.g. the payload's `message`) */
+  title?: string
+  depth?: number
+}>(), { depth: 0 })
+
+type Rec = Record<string, unknown>
+const isRec = (v: unknown): v is Rec => Boolean(v) && typeof v === 'object' && !Array.isArray(v)
+const isScalar = (v: unknown) => v === null || ['string', 'number', 'boolean'].includes(typeof v)
+
+/** camelCase / snake_case -> "Camel case" */
+function label(key: string) {
+  const words = key.replace(/^_+/, '').replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ').trim().toLowerCase()
+  return words.charAt(0).toUpperCase() + words.slice(1)
+}
+
+const DATE = /^\d{4}-\d{2}-\d{2}(T[\d:.]+(Z|[+-]\d{2}:?\d{2})?)?$/
+function fmt(v: unknown) {
+  if (v === null || v === undefined || v === '') return '—'
+  if (typeof v === 'string' && DATE.test(v)) {
+    const d = new Date(v)
+    if (!Number.isNaN(d.getTime())) {
+      return v.length > 10
+        ? d.toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' })
+        : d.toLocaleDateString([], { dateStyle: 'medium', timeZone: 'UTC' })
+    }
+  }
+  if (typeof v === 'number') return v.toLocaleString()
+  return String(v)
+}
+
+const STATUS = /status|state/i
+function badgeColor(key: string, v: unknown): 'success' | 'error' | 'warning' | 'neutral' | undefined {
+  if (typeof v === 'boolean') return v ? 'success' : 'neutral'
+  if (!STATUS.test(key) || typeof v !== 'string') return undefined
+  if (/paid|confirm|checked.?in|active|ok|success|done|complete/i.test(v)) return 'success'
+  if (/cancel|fail|error|unpaid|declin|no.?show/i.test(v)) return 'error'
+  return 'warning'
+}
+
+const isLink = (v: unknown) => typeof v === 'string' && /^https?:\/\/\S+$/.test(v)
+
+// fields: scalars first (a grid), then nested records / lists as sections
+const fields = computed(() => {
+  if (!isRec(props.value)) return { scalars: [] as Array<[string, unknown]>, nested: [] as Array<[string, unknown]> }
+  const entries = Object.entries(props.value).filter(([k]) => !k.startsWith('__'))
+  return {
+    scalars: entries.filter(([, v]) => isScalar(v)),
+    nested: entries.filter(([, v]) => !isScalar(v) && !(Array.isArray(v) && !v.length))
+  }
+})
+
+/** a list of records: columns are their scalar keys (first 8) */
+const table = computed(() => {
+  const list = props.value
+  if (!Array.isArray(list) || !list.length || !list.every(isRec)) return null
+  const keys: string[] = []
+  for (const row of list as Rec[]) {
+    for (const [k, v] of Object.entries(row)) if (isScalar(v) && !k.startsWith('__') && !keys.includes(k)) keys.push(k)
+  }
+  return { keys: keys.slice(0, 8), rows: list as Rec[] }
+})
+</script>
+
+<template>
+  <div class="min-w-0" :class="depth === 0 ? 'rounded-md bg-elevated/60 p-3 space-y-3' : 'space-y-2'">
+    <div v-if="title" class="text-sm font-medium text-highlighted">{{ title }}</div>
+
+    <!-- list of records -> table -->
+    <div v-if="table" class="overflow-x-auto rounded-sm bg-default/40">
+      <table class="w-full text-xs">
+        <thead>
+          <tr class="text-left text-[10px] uppercase tracking-wide text-dimmed">
+            <th v-for="k in table.keys" :key="k" class="px-2 py-1.5 font-medium whitespace-nowrap">{{ label(k) }}</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-default">
+          <tr v-for="(row, i) in table.rows" :key="i">
+            <td v-for="k in table.keys" :key="k" class="px-2 py-1.5 whitespace-nowrap">
+              <UBadge v-if="badgeColor(k, row[k])" size="sm" variant="subtle" :color="badgeColor(k, row[k])">{{ typeof row[k] === 'boolean' ? (row[k] ? 'yes' : 'no') : fmt(row[k]) }}</UBadge>
+              <span v-else>{{ fmt(row[k]) }}</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- list of plain values -> chips -->
+    <div v-else-if="Array.isArray(value)" class="flex flex-wrap gap-1">
+      <template v-for="(item, i) in value" :key="i">
+        <span v-if="isScalar(item)" class="rounded-sm bg-accented/70 px-1.5 py-0.5 text-xs">{{ fmt(item) }}</span>
+        <ChatStructuredData v-else :value="item" :depth="depth + 1" class="w-full" />
+      </template>
+    </div>
+
+    <!-- record -> label/value grid + sub-sections -->
+    <template v-else-if="isRec(value)">
+      <dl v-if="fields.scalars.length" class="grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-x-4 gap-y-2">
+        <div v-for="[k, v] in fields.scalars" :key="k" class="min-w-0">
+          <dt class="text-[10px] uppercase tracking-wide text-dimmed truncate">{{ label(k) }}</dt>
+          <dd class="text-sm break-words">
+            <UBadge v-if="badgeColor(k, v)" size="sm" variant="subtle" :color="badgeColor(k, v)">{{ typeof v === 'boolean' ? (v ? 'yes' : 'no') : fmt(v) }}</UBadge>
+            <a v-else-if="isLink(v)" :href="String(v)" target="_blank" rel="noopener noreferrer" class="underline underline-offset-2 break-all">{{ v }}</a>
+            <span v-else>{{ fmt(v) }}</span>
+          </dd>
+        </div>
+      </dl>
+      <section v-for="[k, v] in fields.nested" :key="k" class="space-y-1.5">
+        <h4 class="text-[10px] uppercase tracking-widest text-muted">{{ label(k) }}</h4>
+        <ChatStructuredData :value="v" :depth="depth + 1" />
+      </section>
+    </template>
+
+    <span v-else class="text-sm">{{ fmt(value) }}</span>
+  </div>
+</template>
diff --git a/app/components/chat/ToolPart.vue b/app/components/chat/ToolPart.vue
index d2c367f..24791fb 100644
--- a/app/components/chat/ToolPart.vue
+++ b/app/components/chat/ToolPart.vue
@@ -30,8 +30,42 @@ const canRerun = (tool: string) => uiTools.isReadOnly(tool)
 // UI-looking tools that may have side effects are re-run on demand only
 const offerRerun = computed(() =>
   status.value === 'completed' && looksLikeUi(props.part.tool) && !canRerun(props.part.tool) &&
-  !fetchingUi.value && !fetchedResources.value.length && !htmlResources.value.length
+  !fetchingUi.value && !fetchedResources.value.length && !htmlResources.value.length &&
+  !structured.value && !noUi.value
 )
+// a re-run that brought back no app: say so instead of doing nothing
+const noUi = ref(false)
+
+/**
+ * Structured data some servers return for their own front-end components
+ * (`{ "__componentType": "...", "message": "...", "data": {...} }`), or any
+ * JSON from a UI-looking MCP tool: shown as cards/tables, no re-run needed.
+ */
+function structuredOf(text: unknown, uiTool: boolean) {
+  if (typeof text !== 'string') return null
+  const trimmed = text.trim()
+  if (!/^[[{]/.test(trimmed) || trimmed.length > 500_000) return null
+  try {
+    const parsed = JSON.parse(trimmed) as unknown
+    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed) && '__componentType' in parsed) {
+      const { message, data, __componentType: kind, meta: _meta, ...rest } = parsed as Record<string, unknown>
+      return {
+        kind: String(kind),
+        title: typeof message === 'string' ? message : undefined,
+        value: data ?? rest
+      }
+    }
+    if (uiTool && parsed && typeof parsed === 'object') return { kind: 'data', title: undefined, value: parsed }
+  } catch { /* not JSON */ }
+  return null
+}
+const rerunText = ref<string | null>(null)
+const structured = computed(() => {
+  if (status.value !== 'completed' || !props.part.tool.includes('_')) return null
+  const out = (props.part.state as { output?: unknown })?.output
+  return structuredOf(rerunText.value ?? out, looksLikeUi(props.part.tool))
+})
+const showStructured = ref(true)
 
 async function fetchUi(mode: 'template' | 'call') {
   if (fetchingUi.value || fetchedResources.value.length) return
@@ -44,6 +78,7 @@ async function fetchUi(mode: 'template' | 'call') {
       structuredContent?: unknown
       app?: { resourceUri: string; html: string } | null
       called?: boolean
+      text?: string
     }>(
       '/api/v1/mcp-call',
       {
@@ -73,8 +108,14 @@ async function fetchUi(mode: 'template' | 'call') {
       }]
     } else {
       fetchedResources.value = res.resources || []
+      if (!fetchedResources.value.length) {
+        // no app at all: show the data the tool returned, or say why nothing renders
+        if (res.text && structuredOf(res.text, true)) rerunText.value = res.text
+        else noUi.value = true
+      }
     }
   } catch {
+    noUi.value = true
     // local server, auth or non-MCP tool: nothing to render
   } finally {
     fetchingUi.value = false
@@ -255,6 +296,23 @@ watch(htmlResources, () => {
     </div>
     </CollapseTransition>
 
+    <!-- structured data for a component this app doesn't have: cards & tables -->
+    <div v-if="structured" class="oc-breakout px-2.5 pb-2" :class="{ 'pt-1': !open }">
+      <div class="flex items-center gap-1.5 mb-1 text-[10px] uppercase tracking-widest text-dimmed">
+        <UIcon name="i-lucide-layout-panel-top" class="size-3" />
+        <span class="truncate">{{ structured.kind }}</span>
+        <button type="button" class="ml-auto normal-case tracking-normal hover:text-highlighted cursor-pointer" @click="showStructured = !showStructured">
+          {{ showStructured ? 'hide' : 'show' }}
+        </button>
+      </div>
+      <CollapseTransition>
+        <ChatStructuredData v-if="showStructured" :value="structured.value" :title="structured.title" />
+      </CollapseTransition>
+    </div>
+    <div v-if="noUi" class="px-2.5 pb-2 text-[11px] text-dimmed flex items-center gap-1.5" :class="{ 'pt-1': !open }">
+      <UIcon name="i-lucide-info" class="size-3.5 shrink-0" />
+      The server sent no app UI for this tool (no HTML or ui:// resource), only the text above.
+    </div>
     <div v-if="offerRerun" class="px-2.5 pb-2" :class="{ 'pt-1': !open }">
       <UButton
         size="xs"
@@ -271,7 +329,7 @@ watch(htmlResources, () => {
       <UIcon name="i-lucide-loader-circle" class="size-3.5 animate-spin" />
       Loading app UI…
     </div>
-    <div v-if="fetchedResources.length" class="px-2.5 pb-2 space-y-2" :class="{ 'pt-2': !open && !htmlResources.length }">
+    <div v-if="fetchedResources.length" class="oc-breakout px-2.5 pb-2 space-y-2" :class="{ 'pt-2': !open && !htmlResources.length }">
       <template v-for="(res, i) in fetchedResources" :key="`f${i}`">
         <div
           v-if="res.remoteDom && !res.script"
@@ -294,7 +352,7 @@ watch(htmlResources, () => {
         />
       </template>
     </div>
-    <div v-if="htmlResources.length" class="px-2.5 pb-2 space-y-2" :class="{ 'pt-2': !open }">
+    <div v-if="htmlResources.length" class="oc-breakout px-2.5 pb-2 space-y-2" :class="{ 'pt-2': !open }">
       <ChatMcpHtmlFrame
         v-for="(res, i) in htmlResources"
         :key="i"
diff --git a/app/composables/useChatWidth.ts b/app/composables/useChatWidth.ts
new file mode 100644
index 0000000..4a6abd2
--- /dev/null
+++ b/app/composables/useChatWidth.ts
@@ -0,0 +1,46 @@
+// Width of the conversation column, chosen in the chat header and kept in a
+// cookie (SSR renders the same width, no jump on load):
+//   comfortable - readable line length (the default)
+//   wide        - more room for code, tables and apps
+//   full        - the whole window
+// MCP apps and data tables can break out of a narrower column and use the
+// width that is available (`wideApps`).
+export type ChatWidth = 'comfortable' | 'wide' | 'full'
+
+const MAX: Record<ChatWidth, string> = {
+  comfortable: '56rem',
+  wide: '80rem',
+  full: '100%'
+}
+
+export function useChatWidth() {
+  const width = useCookie<ChatWidth>('oc-chat-width', { default: () => 'comfortable', maxAge: 60 * 60 * 24 * 365 })
+  const wideApps = useCookie<boolean>('oc-wide-apps', { default: () => true, maxAge: 60 * 60 * 24 * 365 })
+  const maxWidth = computed(() => MAX[width.value] || MAX.comfortable)
+
+  const menu = computed(() => [
+    [{ type: 'label' as const, label: 'Chat width' }],
+    ([
+      ['comfortable', 'Comfortable', 'i-lucide-align-center'],
+      ['wide', 'Wide', 'i-lucide-move-horizontal'],
+      ['full', 'Full width', 'i-lucide-maximize-2']
+    ] as const).map(([value, label, icon]) => ({
+      label,
+      icon,
+      type: 'checkbox' as const,
+      checked: width.value === value,
+      onUpdateChecked: () => { width.value = value },
+      onSelect: (e: Event) => e.preventDefault()
+    })),
+    [{
+      label: 'Apps & tables use all the width',
+      icon: 'i-lucide-app-window',
+      type: 'checkbox' as const,
+      checked: wideApps.value,
+      onUpdateChecked: (on: boolean) => { wideApps.value = on },
+      onSelect: (e: Event) => e.preventDefault()
+    }]
+  ])
+
+  return { width, wideApps, maxWidth, menu }
+}
diff --git a/app/composables/useModelCatalog.ts b/app/composables/useModelCatalog.ts
new file mode 100644
index 0000000..2b8ed0b
--- /dev/null
+++ b/app/composables/useModelCatalog.ts
@@ -0,0 +1,77 @@
+import type { ProvidersResponse } from '#shared/types/opencode'
+
+export interface ModelItem {
+  label: string
+  /** "providerID/modelID" */
+  value: string
+  provider: string
+  providerID: string
+  reasoning: boolean
+  /** context window in thousands of tokens */
+  ctx: number
+  /** "$in/$out" per million tokens, "free" or "" */
+  cost: string
+  attachment: boolean
+}
+
+/** Flat, sorted model list from opencode's /config/providers answer. */
+export function modelItemsOf(providers: ProvidersResponse | null | undefined): ModelItem[] {
+  if (!providers) return []
+  const items: ModelItem[] = []
+  for (const provider of providers.providers || []) {
+    const providerName = String(provider.name || provider.id)
+    for (const [id, m] of Object.entries(provider.models || {})) {
+      const cin = m.cost?.input
+      const cout = m.cost?.output
+      items.push({
+        label: `${m.name || id}`,
+        value: `${provider.id}/${id}`,
+        provider: providerName,
+        providerID: provider.id,
+        reasoning: Boolean(m.reasoning || m.capabilities?.reasoning),
+        ctx: Math.round((m.limit?.context || 0) / 1000),
+        cost: cin != null && cout != null && (cin > 0 || cout > 0)
+          ? `$${cin}/${cout}`
+          : (cin === 0 && cout === 0 ? 'free' : ''),
+        attachment: Boolean(m.attachment)
+      })
+    }
+  }
+  return items.sort((a, b) => a.provider.localeCompare(b.provider) || a.label.localeCompare(b.label))
+}
+
+/**
+ * Providers and models of a project, painted from the local cache first
+ * (same cache as the chat) and refreshed from the server.
+ */
+export function useModelCatalog(directory: MaybeRefOrGetter<string | undefined>) {
+  const api = useOpencodeApi(directory)
+  const providers = ref<ProvidersResponse | null>(null)
+  const defaultModel = ref('')
+  const loading = ref(false)
+  const cacheKey = () => `opencode-web.providers.${toValue(directory) || ''}`
+
+  async function load() {
+    loading.value = true
+    try {
+      const cached = JSON.parse(localStorage.getItem(cacheKey()) || 'null')
+      if (cached && !providers.value) providers.value = cached
+    } catch { /* ignore */ }
+    try {
+      const [prov, cfg] = await Promise.all([
+        api.providers().catch(() => null),
+        api.config().catch(() => null)
+      ])
+      if (prov) {
+        providers.value = prov
+        try { localStorage.setItem(cacheKey(), JSON.stringify(prov)) } catch { /* full */ }
+      }
+      if (typeof cfg?.model === 'string') defaultModel.value = cfg.model
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const items = computed(() => modelItemsOf(providers.value))
+  return { providers, items, defaultModel, loading, load }
+}
diff --git a/app/composables/useProjectMeta.ts b/app/composables/useProjectMeta.ts
index b463778..d358478 100644
--- a/app/composables/useProjectMeta.ts
+++ b/app/composables/useProjectMeta.ts
@@ -3,6 +3,8 @@
 interface ProjectMeta {
   description?: string
   favorites: string[]
+  /** starred project: listed first on the home page */
+  starred?: boolean
 }
 
 const KEY = 'opencode-web.project-meta'
@@ -59,5 +61,15 @@ export function useProjectMeta() {
     persist()
   }
 
-  return { meta, load, of, setDescription, isFavorite, toggleFavorite }
+  function isStarred(directory: string) {
+    return Boolean(of(directory).starred)
+  }
+
+  function toggleStar(directory: string) {
+    const current = of(directory)
+    meta.value = { ...meta.value, [directory]: { ...current, starred: !current.starred || undefined } }
+    persist()
+  }
+
+  return { meta, load, of, setDescription, isFavorite, toggleFavorite, isStarred, toggleStar }
 }
diff --git a/app/composables/useRecentChats.ts b/app/composables/useRecentChats.ts
new file mode 100644
index 0000000..f858b2b
--- /dev/null
+++ b/app/composables/useRecentChats.ts
@@ -0,0 +1,73 @@
+import type { SessionInfo } from '#shared/types/opencode'
+import { RECENT_CHATS_DEFAULTS, type RecentChatsSettings } from '~/utils/recentChats'
+
+// Settings of the projects panel's chat lists, and which chats this browser
+// has seen (a chat is unread when it changed after you last looked at it).
+// Both live in localStorage: they describe this browser's reading, not the
+// server's state.
+
+const SETTINGS_KEY = 'opencode-web.recent-chats'
+const SEEN_KEY = 'opencode-web.seen-sessions'
+
+export function useRecentChatsSettings() {
+  const settings = useState<RecentChatsSettings>('oc-recent-chats', () => ({ ...RECENT_CHATS_DEFAULTS }))
+  const loaded = useState('oc-recent-chats-loaded', () => false)
+  if (import.meta.client && !loaded.value) {
+    loaded.value = true
+    try {
+      settings.value = { ...RECENT_CHATS_DEFAULTS, ...JSON.parse(localStorage.getItem(SETTINGS_KEY) || '{}') }
+    } catch { /* defaults */ }
+  }
+  function save(next: Partial<RecentChatsSettings>) {
+    settings.value = { ...settings.value, ...next }
+    try { localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings.value)) } catch { /* full */ }
+  }
+  function reset() {
+    save({ ...RECENT_CHATS_DEFAULTS })
+  }
+  return { settings, save, reset }
+}
+
+interface SeenStore {
+  /** chats changed before this time count as read (first use of the feature) */
+  since: number
+  seen: Record<string, number>
+}
+
+export function useSeenSessions() {
+  const store = useState<SeenStore>('oc-seen-sessions', () => ({ since: 0, seen: {} }))
+  const loaded = useState('oc-seen-loaded', () => false)
+  if (import.meta.client && !loaded.value) {
+    loaded.value = true
+    try {
+      const saved = JSON.parse(localStorage.getItem(SEEN_KEY) || 'null') as SeenStore | null
+      store.value = saved?.since ? saved : { since: Date.now(), seen: {} }
+      if (!saved?.since) localStorage.setItem(SEEN_KEY, JSON.stringify(store.value))
+    } catch { /* private mode: nothing is unread */ }
+  }
+
+  let timer: ReturnType<typeof setTimeout> | undefined
+  function persist() {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      // keep the newest 500 marks
+      const entries = Object.entries(store.value.seen).sort((a, b) => b[1] - a[1]).slice(0, 500)
+      store.value = { ...store.value, seen: Object.fromEntries(entries) }
+      try { localStorage.setItem(SEEN_KEY, JSON.stringify(store.value)) } catch { /* full */ }
+    }, 300)
+  }
+
+  function markSeen(id: string, at = Date.now()) {
+    if ((store.value.seen[id] || 0) >= at) return
+    store.value = { ...store.value, seen: { ...store.value.seen, [id]: at } }
+    persist()
+  }
+
+  function isUnread(s: SessionInfo) {
+    const updated = s.time?.updated || s.time?.created || 0
+    if (!store.value.since || updated <= store.value.since) return false
+    return updated > (store.value.seen[s.id] || 0) + 1000
+  }
+
+  return { markSeen, isUnread }
+}
diff --git a/app/composables/useReload.ts b/app/composables/useReload.ts
index 2183d94..c6c314c 100644
--- a/app/composables/useReload.ts
+++ b/app/composables/useReload.ts
@@ -7,14 +7,31 @@ interface ReloadState {
   when: 'now' | 'idle'
   state: 'waiting' | 'done' | 'failed' | 'gave-up'
   message?: string
+  resumed?: string[]
 }
 
 export function useReload() {
   const toast = useToast()
   const caps = useCapabilities()
   const reloading = useState('oc-reloading', () => false)
+  // changes saved to the config that opencode only picks up after a reload,
+  // by project directory ('*' = global): pages show a "reload to apply" notice
+  const pendingReload = useState<Record<string, string[]>>('oc-pending-reload', () => ({}))
 
-  async function reload(opts: { scope: 'project' | 'all'; directory?: string; when?: 'now' | 'idle' }) {
+  function markPending(directory: string | '*', what: string) {
+    const list = pendingReload.value[directory] || []
+    if (!list.includes(what)) pendingReload.value = { ...pendingReload.value, [directory]: [...list, what] }
+  }
+
+  function pendingFor(directory: string) {
+    return [...new Set([...(pendingReload.value['*'] || []), ...(pendingReload.value[directory] || [])])]
+  }
+
+  /**
+   * `resume`: chats (of `directory`) to continue once the reload is done;
+   * `resumeBusy`: continue every chat that is busy when the reload starts.
+   */
+  async function reload(opts: { scope: 'project' | 'all'; directory?: string; when?: 'now' | 'idle'; resume?: string[]; resumeBusy?: boolean }) {
     if (!caps.value.config) {
       toast.add({ title: 'Not available on this server', description: 'Restart the opencode server process to reload its config.', color: 'warning' })
       return
@@ -34,7 +51,9 @@ export function useReload() {
         state = await $fetch<ReloadState>('/api/v1/reload', { timeout: 10000 }).catch(() => state)
       }
       if (state?.state === 'done') {
-        toast.add({ title: `Reloaded ${label}`, description: 'opencode re-read its config. New sessions use it.', color: 'success' })
+        pendingReload.value = {}
+        const resumed = state.resumed?.length ? ` ${state.resumed.length} chat(s) continue where they stopped.` : ''
+        toast.add({ title: `Reloaded ${label}`, description: `opencode re-read its config. New messages use it.${resumed}`, color: 'success' })
       } else {
         toast.add({ title: `Reload of ${label}: ${state?.state || 'unknown'}`, description: state?.message, color: 'warning' })
       }
@@ -52,9 +71,10 @@ export function useReload() {
       { label: 'Reload this project', description: 'when its sessions are idle', icon: 'i-lucide-folder-sync', onSelect: () => reload({ scope: 'project', directory }) },
       { label: 'Reload all projects', description: 'like restarting opencode serve', icon: 'i-lucide-server-cog', onSelect: () => reload({ scope: 'all' }) }
     ], [
-      { label: 'Reload this project now', description: 'interrupts running replies', icon: 'i-lucide-zap', color: 'warning' as const, onSelect: () => reload({ scope: 'project', directory, when: 'now' }) }
+      { label: 'Reload now & continue', description: 'interrupts running replies, then resumes them', icon: 'i-lucide-zap', color: 'warning' as const, onSelect: () => reload({ scope: 'project', directory, when: 'now', resumeBusy: true }) },
+      { label: 'Reload this project now', description: 'interrupts running replies', icon: 'i-lucide-zap-off', color: 'warning' as const, onSelect: () => reload({ scope: 'project', directory, when: 'now' }) }
     ]]
   }
 
-  return { reload, reloading, menuItems }
+  return { reload, reloading, menuItems, pendingReload, markPending, pendingFor }
 }
diff --git a/app/composables/useSessions.ts b/app/composables/useSessions.ts
index f685afb..62e6044 100644
--- a/app/composables/useSessions.ts
+++ b/app/composables/useSessions.ts
@@ -26,14 +26,28 @@ function writeCache(directory: string, sessions: SessionInfo[]) {
 /**
  * Shared session list per project, updated live from SSE session.updated
  * events and cached in localStorage so the list paints instantly on reload.
+ * Follows `directory` when it changes (the project shell stays mounted while
+ * switching projects).
  */
 export function useSessions(directory: MaybeRefOrGetter<string>) {
-  const dir = toValue(directory)
-  const sessions = useState<SessionInfo[]>(`sessions.${dir}`, () => [])
-  const refreshing = useState<boolean>(`sessions-loading.${dir}`, () => false)
+  const lists = useState<Record<string, SessionInfo[]>>('sessions', () => ({}))
+  const loadingByDir = useState<Record<string, boolean>>('sessions-loading', () => ({}))
   // subagent sessions (task tool), keyed by the conversation that started them
-  const children = useState<Record<string, SessionInfo[]>>(`sessions-children.${dir}`, () => ({}))
-  const api = useOpencodeApi(directory)
+  const childrenByDir = useState<Record<string, Record<string, SessionInfo[]>>>('sessions-children', () => ({}))
+  const dir = () => toValue(directory)
+
+  const sessions = computed<SessionInfo[]>({
+    get: () => lists.value[dir()] || [],
+    set: (list) => { lists.value = { ...lists.value, [dir()]: list } }
+  })
+  const refreshing = computed<boolean>({
+    get: () => Boolean(loadingByDir.value[dir()]),
+    set: (on) => { loadingByDir.value = { ...loadingByDir.value, [dir()]: on } }
+  })
+  const children = computed<Record<string, SessionInfo[]>>({
+    get: () => childrenByDir.value[dir()] || {},
+    set: (map) => { childrenByDir.value = { ...childrenByDir.value, [dir()]: map } }
+  })
 
   function addChild(info: SessionInfo) {
     const parent = info.parentID!
@@ -46,31 +60,37 @@ export function useSessions(directory: MaybeRefOrGetter<string>) {
 
   // paint from cache after hydration (doing it during setup makes the client
   // vdom diverge from the server-rendered empty list -> hydration mismatch)
+  function paintCache() {
+    if (sessions.value.length === 0) {
+      const cached = readCache(dir())
+      if (cached.length) sessions.value = cached
+    }
+  }
   if (import.meta.client && getCurrentInstance()) {
     onMounted(() => {
-      if (sessions.value.length === 0) {
-        const cached = readCache(dir)
-        if (cached.length) sessions.value = cached
-      }
+      paintCache()
+      watch(dir, paintCache)
     })
   }
 
   async function refresh() {
-    refreshing.value = true
+    const target = dir()
+    loadingByDir.value = { ...loadingByDir.value, [target]: true }
     try {
-      const list = await api.sessions()
+      const list = await useOpencodeApi(target).sessions()
       const kids: Record<string, SessionInfo[]> = {}
       for (const s of list) if (s.parentID) (kids[s.parentID] ||= []).push(s)
       for (const k of Object.values(kids)) k.sort((a, b) => (a.time?.created || 0) - (b.time?.created || 0))
-      children.value = kids
-      sessions.value = [...list]
+      const top = [...list]
         .filter((s) => !s.parentID)
         .sort((a, b) => (b.time?.updated || 0) - (a.time?.updated || 0))
-      writeCache(dir, sessions.value)
+      childrenByDir.value = { ...childrenByDir.value, [target]: kids }
+      lists.value = { ...lists.value, [target]: top }
+      writeCache(target, top)
     } catch {
       // server unreachable; keep cached list
     } finally {
-      refreshing.value = false
+      loadingByDir.value = { ...loadingByDir.value, [target]: false }
     }
   }
 
@@ -79,22 +99,18 @@ export function useSessions(directory: MaybeRefOrGetter<string>) {
       addChild(info)
       return
     }
-    const idx = sessions.value.findIndex((s) => s.id === info.id)
-    if (idx >= 0) sessions.value.splice(idx, 1, info)
-    else sessions.value.unshift(info)
-    sessions.value = [...sessions.value].sort(
-      (a, b) => (b.time?.updated || 0) - (a.time?.updated || 0)
-    )
-    writeCache(dir, sessions.value)
+    const next = sessions.value.filter((s) => s.id !== info.id)
+    next.unshift(info)
+    sessions.value = next.sort((a, b) => (b.time?.updated || 0) - (a.time?.updated || 0))
+    writeCache(dir(), sessions.value)
   }
 
   function remove(id: string) {
-    const kids = Object.fromEntries(Object.entries(children.value)
+    children.value = Object.fromEntries(Object.entries(children.value)
       .filter(([parent]) => parent !== id)
       .map(([parent, list]) => [parent, list.filter((s) => s.id !== id)]))
-    children.value = kids
     sessions.value = sessions.value.filter((s) => s.id !== id)
-    writeCache(dir, sessions.value)
+    writeCache(dir(), sessions.value)
   }
 
   return { sessions, children, refreshing, refresh, upsert, remove }
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 7f702d5..b16b292 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -67,7 +67,11 @@ const knownDirs = computed(() => {
       list.push({ directory: p.worktree, source: 'server' })
     }
   }
+  // starred projects first, each group keeps its recency order
   return list
+    .map((item, i) => ({ item, i }))
+    .sort((a, b) => Number(projectMeta.isStarred(b.item.directory)) - Number(projectMeta.isStarred(a.item.directory)) || a.i - b.i)
+    .map(({ item }) => item)
 })
 
 function carouselSessions(dir: string): SessionInfo[] {
@@ -184,6 +188,18 @@ function saveEdit() {
                 {{ projectMeta.of(item.directory).description }}
               </p>
             </div>
+            <UButton
+              icon="i-lucide-star"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              class="oc-tap"
+              :class="projectMeta.isStarred(item.directory) ? 'text-amber-400 hover:text-amber-300' : 'oc-hover-only opacity-0 group-hover:opacity-100'"
+              :ui="{ leadingIcon: projectMeta.isStarred(item.directory) ? 'oc-filled' : '' }"
+              :aria-label="projectMeta.isStarred(item.directory) ? 'Unstar project' : 'Star project (listed first)'"
+              :aria-pressed="projectMeta.isStarred(item.directory)"
+              @click.stop="projectMeta.toggleStar(item.directory)"
+            />
             <UButton
               icon="i-lucide-pencil"
               size="xs"
@@ -205,11 +221,13 @@ function saveEdit() {
             />
           </div>
 
-          <!-- carousel breaks out to the full viewport width, but its first card
-               stays aligned with the project row above (container = max-w-3xl + px-4) -->
+          <!-- carousel breaks out of the column (full width on phones and
+               tablets, 90% of the page on wide screens, so its scroll arrows sit
+               at a sensible place), but its first card stays aligned with the
+               project row above (container = max-w-3xl + px-4) -->
           <HScroll
             v-if="index < CAROUSEL_PROJECTS && carouselSessions(item.directory).length"
-            class="relative left-1/2 -translate-x-1/2 w-screen px-[max(1rem,calc((100vw-48rem)/2+1rem))] pt-2 pb-1"
+            class="relative left-1/2 -translate-x-1/2 [--oc-cw:100vw] lg:[--oc-cw:90vw] w-(--oc-cw) px-[max(1rem,calc((var(--oc-cw)_-_48rem)/2_+_1rem))] pt-2 pb-1"
           >
             <NuxtLink
               v-for="s in carouselSessions(item.directory)"
@@ -221,7 +239,7 @@ function saveEdit() {
                 <UIcon
                   :name="projectMeta.isFavorite(item.directory, s.id) ? 'i-lucide-star' : 'i-lucide-message-square'"
                   class="size-3.5 shrink-0 mt-0.5"
-                  :class="projectMeta.isFavorite(item.directory, s.id) ? 'text-primary' : 'text-dimmed'"
+                  :class="projectMeta.isFavorite(item.directory, s.id) ? 'text-amber-400 oc-filled' : 'text-dimmed'"
                 />
                 <span class="text-xs leading-snug line-clamp-2 flex-1">{{ s.title || 'Untitled session' }}</span>
               </div>
diff --git a/app/pages/p/[dir].vue b/app/pages/p/[dir].vue
index 275dd6b..2f82148 100644
--- a/app/pages/p/[dir].vue
+++ b/app/pages/p/[dir].vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import type { MessageInfo, Project, SessionInfo } from '#shared/types/opencode'
+import type { MessageInfo, SessionInfo } from '#shared/types/opencode'
+
+// one shell for every project: switching projects keeps the sidebar in place
+// and only the content area changes (the child pages have their own keys)
+definePageMeta({ key: 'project-shell' })
 
 const route = useRoute()
 const caps = useCapabilities()
@@ -14,7 +18,7 @@ if (!directory.value) {
 }
 
 const { upsert, remove } = useSessions(directory)
-const { remember, recents, load: loadRecents } = useRecentProjects()
+const { remember, load: loadRecents } = useRecentProjects()
 const busySessions = useBusySessions()
 const mobileMenuOpen = ref(false)
 const chime = useChime()
@@ -25,53 +29,22 @@ const sidebarOpen = useCookie<boolean>('oc-sidebar', { default: () => true })
 const sidebarWidth = useCookie<number>('oc-sidebar-w', { default: () => 272 })
 const projectsPanel = useCookie<boolean>('oc-projects-panel', { default: () => false })
 
-onMounted(() => {
-  remember(directory.value)
-  loadRecents()
-})
-
-// ---- projects panel ----
-const api = useOpencodeApi()
-const projects = ref<Project[]>([])
-const projectsLoading = ref(false)
-
-async function loadProjects() {
-  projectsLoading.value = true
-  try {
-    projects.value = await api.projects()
-  } catch { /* keep empty */ } finally {
-    projectsLoading.value = false
-  }
-}
-
-watch(projectsPanel, (open) => { if (open) loadProjects() }, { immediate: true })
-
-const projectFilter = ref('')
-const projectDirs = computed(() => {
-  const seen = new Set<string>()
-  const list: string[] = []
-  for (const r of recents.value) {
-    if (!seen.has(r.directory)) { seen.add(r.directory); list.push(r.directory) }
-  }
-  for (const p of projects.value) {
-    if (p.worktree && p.worktree !== '/' && !seen.has(p.worktree)) {
-      seen.add(p.worktree)
-      list.push(p.worktree)
-    }
-  }
-  const q = projectFilter.value.trim().toLowerCase()
-  return q ? list.filter((d) => d.toLowerCase().includes(q)) : list
-})
+onMounted(loadRecents)
+watch(directory, (dir) => { if (import.meta.client && dir) remember(dir) }, { immediate: true })
 
 // ---- sidebar resize (desktop) ----
+// the width animates when the sidebar opens or closes, never while dragging
+const resizing = ref(false)
 function startResize(e: PointerEvent) {
   e.preventDefault()
+  resizing.value = true
   const startX = e.clientX
   const startW = sidebarWidth.value
   const move = (ev: PointerEvent) => {
     sidebarWidth.value = Math.min(480, Math.max(200, startW + ev.clientX - startX))
   }
   const up = () => {
+    resizing.value = false
     window.removeEventListener('pointermove', move)
     window.removeEventListener('pointerup', up)
   }
@@ -79,6 +52,26 @@ function startResize(e: PointerEvent) {
   window.addEventListener('pointerup', up)
 }
 
+const toast = useToast()
+async function newChat() {
+  try {
+    const session = await useOpencodeApi(directory).createSession()
+    navigateTo(`/p/${route.params.dir}/session/${session.id}`)
+  } catch {
+    toast.add({ title: 'Could not create session', color: 'error' })
+  }
+}
+
+// collapsed rail: the same destinations as the sidebar tiles, icon only
+const railLinks = computed(() => [
+  { icon: 'i-lucide-layout-dashboard', label: 'Project overview', to: `/p/${route.params.dir}` },
+  ...(caps.value.mcp ? [{ icon: 'i-lucide-server-cog', label: 'MCP servers', to: `/p/${route.params.dir}/mcp` }] : []),
+  { icon: 'i-lucide-bot', label: 'Agents', to: `/p/${route.params.dir}/agents` },
+  { icon: 'i-lucide-graduation-cap', label: 'Skills', to: `/p/${route.params.dir}/skills` },
+  { icon: 'i-lucide-alarm-clock', label: 'Scheduled prompts', to: `/p/${route.params.dir}/schedules` },
+  { icon: 'i-lucide-chart-column', label: 'Usage & cost', to: `/p/${route.params.dir}/stats` }
+])
+
 // ---- live updates: session list + per-session progress ----
 useOpencodeEvents(directory, (event) => {
   const props = (event.properties || {}) as Record<string, any>
@@ -117,104 +110,122 @@ useHead(() => ({ title: `${dirName(directory.value)} · opencode web` }))
   <!-- md+: clear the status bar of an installed iPad app; phones handle it in
        the mobile header so its background reaches the top edge -->
   <div class="flex-1 flex min-h-0 md:pt-[env(safe-area-inset-top)]">
-    <!-- projects panel (desktop, toggleable) -->
-    <Transition name="oc-slide">
-    <aside v-if="projectsPanel" class="hidden md:flex w-48 shrink-0 flex-col bg-elevated/60">
-      <div class="flex items-center gap-2 pl-3 pr-1.5 h-12">
-        <span class="text-[10px] uppercase tracking-widest text-dimmed flex-1">Projects</span>
-        <UTooltip text="Hide projects panel">
-          <UButton
-            icon="i-lucide-panel-left-close"
-            color="neutral"
-            variant="ghost"
-            size="xs"
-            aria-label="Hide projects panel"
-            @click="projectsPanel = false"
-          />
-        </UTooltip>
-      </div>
-      <div class="px-1.5 pb-1.5">
-        <UInput
-          v-model="projectFilter"
-          size="xs"
-          icon="i-lucide-search"
-          placeholder="Search projects…"
-          class="w-full"
-        />
-      </div>
-      <div class="flex-1 overflow-y-auto px-1.5 pb-2 space-y-0.5">
-        <div v-if="projectsLoading && !projectDirs.length" class="px-2 space-y-2 pt-1">
-          <USkeleton v-for="i in 4" :key="i" class="h-6 w-full" />
-        </div>
-        <div v-else-if="!projectDirs.length && serverDegraded" class="flex items-center gap-1.5 px-2 py-3 text-xs text-error">
-          <UIcon name="i-lucide-plug-zap" class="size-3.5 shrink-0" />
-          Server not responding
-        </div>
-        <NuxtLink
-          v-for="d in projectDirs"
-          :key="d"
-          :to="`/p/${encodeDir(d)}`"
-          class="oc-row flex items-center gap-1.5 rounded-sm px-2 py-1.5 text-xs hover:bg-accented"
-          :class="d === directory ? 'bg-accented text-highlighted' : 'text-muted'"
-        >
-          <UIcon name="i-lucide-folder-git-2" class="size-3.5 shrink-0" />
-          <span class="truncate">{{ dirName(d) }}</span>
-        </NuxtLink>
-        <NuxtLink
-          to="/"
-          class="oc-row flex items-center gap-1.5 rounded-sm px-2 py-1.5 text-xs text-dimmed hover:bg-accented"
-        >
-          <UIcon name="i-lucide-plus" class="size-3.5 shrink-0" />
-          <span>Open another…</span>
-        </NuxtLink>
-      </div>
+    <!-- projects panel (desktop, toggleable): every project with its starred,
+         recent, unread and running chats. Its width animates, the content
+         keeps its own width so nothing reflows while it slides -->
+    <aside
+      class="hidden md:block relative shrink-0 overflow-hidden bg-elevated/60 transition-[width] duration-200 ease-out motion-reduce:transition-none"
+      :style="{ width: projectsPanel ? '15rem' : '0px' }"
+      :inert="!projectsPanel"
+      aria-label="Projects"
+    >
+      <Transition name="oc-xfade">
+        <ProjectsPanel v-if="projectsPanel" :directory="directory" class="absolute inset-y-0 left-0 w-60" @close="projectsPanel = false" />
+      </Transition>
     </aside>
-    </Transition>
 
-    <!-- desktop sidebar (collapsible + resizable) -->
-    <Transition name="oc-slide">
+    <!-- desktop sidebar: one panel whose width animates between the full
+         sidebar and the icon rail; both contents keep their own width and
+         cross-fade, so neither squeezes nor reflows during the move -->
     <aside
-      v-if="sidebarOpen"
-      class="hidden md:flex shrink-0 flex-col bg-muted"
-      :style="{ width: sidebarWidth + 'px' }"
+      class="hidden md:block relative shrink-0 overflow-hidden bg-muted motion-reduce:transition-none"
+      :class="resizing ? '' : 'transition-[width] duration-200 ease-out'"
+      :style="{ width: (sidebarOpen ? sidebarWidth : 48) + 'px' }"
     >
-      <div class="flex items-center gap-1 pl-3 pr-2 h-12">
-        <UTooltip v-if="!projectsPanel" text="Show projects panel">
-          <UButton
-            icon="i-lucide-folder-tree"
-            color="neutral"
-            variant="ghost"
-            size="xs"
-            aria-label="Show projects panel"
-            @click="projectsPanel = true"
-          />
-        </UTooltip>
-        <UIcon name="i-lucide-terminal" class="size-4 text-primary shrink-0" />
-        <span class="text-sm font-semibold truncate flex-1">{{ dirName(directory) }}</span>
-        <UTooltip text="All projects (home)">
-          <UButton
-            icon="i-lucide-house"
-            color="neutral"
-            variant="ghost"
-            size="xs"
-            aria-label="All projects"
-            to="/"
-          />
-        </UTooltip>
-        <UTooltip text="Hide sidebar">
-          <UButton
-            icon="i-lucide-panel-left-close"
-            color="neutral"
-            variant="ghost"
-            size="xs"
-            aria-label="Hide sidebar"
-            @click="sidebarOpen = false"
-          />
-        </UTooltip>
-      </div>
-      <ProjectSidebar :directory="directory" class="flex-1 min-h-0" />
+      <Transition name="oc-xfade">
+        <div
+          v-if="sidebarOpen"
+          key="full"
+          class="absolute inset-y-0 left-0 flex flex-col"
+          :style="{ width: sidebarWidth + 'px' }"
+        >
+          <div class="flex items-center gap-1 pl-2 pr-2 h-12">
+            <UTooltip v-if="!projectsPanel" text="Show projects panel">
+              <UButton
+                icon="i-lucide-folder-tree"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                aria-label="Show projects panel"
+                @click="projectsPanel = true"
+              />
+            </UTooltip>
+            <div class="min-w-0 flex-1 flex pl-1">
+              <ProjectSwitcher :directory="directory" />
+            </div>
+            <UTooltip text="All projects">
+              <UButton
+                icon="i-lucide-layout-grid"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                aria-label="All projects"
+                to="/"
+              />
+            </UTooltip>
+            <UTooltip text="Collapse sidebar">
+              <UButton
+                icon="i-lucide-panel-left-close"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                aria-label="Collapse sidebar"
+                @click="sidebarOpen = false"
+              />
+            </UTooltip>
+          </div>
+          <ProjectSidebar :directory="directory" class="flex-1 min-h-0" />
+        </div>
+        <nav
+          v-else
+          key="rail"
+          class="absolute inset-y-0 left-0 w-12 flex flex-col items-center gap-1 py-2"
+          aria-label="Project"
+        >
+          <UTooltip text="Expand sidebar" :content="{ side: 'right' }">
+            <UButton
+              icon="i-lucide-panel-left-open"
+              color="neutral"
+              variant="ghost"
+              aria-label="Expand sidebar"
+              @click="sidebarOpen = true"
+            />
+          </UTooltip>
+          <UTooltip text="New chat" :content="{ side: 'right' }">
+            <UButton icon="i-lucide-plus" color="primary" variant="soft" aria-label="New chat" @click="newChat" />
+          </UTooltip>
+          <UTooltip text="Search everything (Ctrl+K)" :content="{ side: 'right' }">
+            <UButton
+              icon="i-lucide-search"
+              color="neutral"
+              variant="ghost"
+              aria-label="Search everything"
+              @click="globalSearch.open.value = true"
+            />
+          </UTooltip>
+          <span class="w-6 h-px bg-accented my-1" />
+          <UTooltip v-for="link in railLinks" :key="link.to" :text="link.label" :content="{ side: 'right' }">
+            <UButton
+              :icon="link.icon"
+              color="neutral"
+              :variant="route.path === link.to ? 'soft' : 'ghost'"
+              :aria-label="link.label"
+              :to="link.to"
+            />
+          </UTooltip>
+          <span class="flex-1" />
+          <UTooltip text="All projects" :content="{ side: 'right' }">
+            <UButton
+              icon="i-lucide-layout-grid"
+              color="neutral"
+              variant="ghost"
+              aria-label="All projects"
+              to="/"
+            />
+          </UTooltip>
+        </nav>
+      </Transition>
     </aside>
-    </Transition>
 
     <!-- resize handle -->
     <div
@@ -224,76 +235,6 @@ useHead(() => ({ title: `${dirName(directory.value)} · opencode web` }))
       @pointerdown="startResize"
     />
 
-    <!-- desktop mini rail when collapsed -->
-    <Transition name="oc-slide">
-    <aside v-if="!sidebarOpen" class="hidden md:flex w-12 shrink-0 flex-col items-center gap-1 bg-muted py-2">
-      <UTooltip text="Show sidebar" :content="{ side: 'right' }">
-        <UButton
-          icon="i-lucide-panel-left-open"
-          color="neutral"
-          variant="ghost"
-          aria-label="Show sidebar"
-          @click="sidebarOpen = true"
-        />
-      </UTooltip>
-      <UTooltip text="Search everything (Ctrl+K)" :content="{ side: 'right' }">
-        <UButton
-          icon="i-lucide-search"
-          color="neutral"
-          variant="ghost"
-          aria-label="Search everything"
-          @click="globalSearch.open.value = true"
-        />
-      </UTooltip>
-      <UTooltip text="Sessions" :content="{ side: 'right' }">
-        <UButton
-          icon="i-lucide-messages-square"
-          color="neutral"
-          variant="ghost"
-          aria-label="Sessions"
-          :to="`/p/${route.params.dir}`"
-        />
-      </UTooltip>
-      <UTooltip v-if="caps.mcp" text="MCP servers" :content="{ side: 'right' }">
-        <UButton
-          icon="i-lucide-server-cog"
-          color="neutral"
-          variant="ghost"
-          aria-label="MCP servers"
-          :to="`/p/${route.params.dir}/mcp`"
-        />
-      </UTooltip>
-      <UTooltip text="Scheduled prompts" :content="{ side: 'right' }">
-        <UButton
-          icon="i-lucide-alarm-clock"
-          color="neutral"
-          variant="ghost"
-          aria-label="Scheduled prompts"
-          :to="`/p/${route.params.dir}/schedules`"
-        />
-      </UTooltip>
-      <UTooltip text="Usage & cost" :content="{ side: 'right' }">
-        <UButton
-          icon="i-lucide-chart-column"
-          color="neutral"
-          variant="ghost"
-          aria-label="Usage & cost"
-          :to="`/p/${route.params.dir}/stats`"
-        />
-      </UTooltip>
-      <span class="flex-1" />
-      <UTooltip text="All projects (home)" :content="{ side: 'right' }">
-        <UButton
-          icon="i-lucide-house"
-          color="neutral"
-          variant="ghost"
-          aria-label="All projects"
-          to="/"
-        />
-      </UTooltip>
-    </aside>
-    </Transition>
-
     <!-- mobile slideover (header clears the status bar / notch) -->
     <USlideover
       v-model:open="mobileMenuOpen"
@@ -304,6 +245,9 @@ useHead(() => ({ title: `${dirName(directory.value)} · opencode web` }))
         close: 'top-[max(1rem,env(safe-area-inset-top))] oc-tap-zone'
       }"
     >
+      <template #title>
+        <ProjectSwitcher :directory="directory" @navigate="mobileMenuOpen = false" />
+      </template>
       <template #body>
         <ProjectSidebar :directory="directory" class="-m-4 h-[calc(100%+2rem)]" @navigate="mobileMenuOpen = false" />
       </template>
@@ -320,10 +264,11 @@ useHead(() => ({ title: `${dirName(directory.value)} · opencode web` }))
           aria-label="Open menu"
           @click="mobileMenuOpen = true"
         />
-        <UIcon name="i-lucide-terminal" class="size-4 text-primary" />
-        <span class="text-sm font-semibold truncate flex-1">{{ dirName(directory) }}</span>
+        <div class="min-w-0 flex-1 flex">
+          <ProjectSwitcher :directory="directory" />
+        </div>
         <UButton
-          icon="i-lucide-house"
+          icon="i-lucide-layout-grid"
           color="neutral"
           variant="ghost"
           size="xs"
diff --git a/app/pages/p/[dir]/agents.vue b/app/pages/p/[dir]/agents.vue
new file mode 100644
index 0000000..d035f0b
--- /dev/null
+++ b/app/pages/p/[dir]/agents.vue
@@ -0,0 +1,1111 @@
+<script setup lang="ts">
+import type { AgentInfo, McpStatus } from '#shared/types/opencode'
+
+const route = useRoute()
+const caps = useCapabilities()
+const directory = computed(() => decodeDir(route.params.dir as string))
+const api = useOpencodeApi(directory)
+const toast = useToast()
+const catalog = useModelCatalog(directory)
+
+type Mode = 'primary' | 'subagent' | 'all'
+type McpMode = 'inherit' | 'allow' | 'block'
+type Where = 'project' | 'global' | 'built-in' | 'file'
+
+/** One entry of the `agent` map in opencode.json. */
+interface AgentConfig {
+  description?: string
+  mode?: Mode
+  model?: string
+  prompt?: string
+  temperature?: number
+  tools?: Record<string, boolean>
+  disable?: boolean
+  [key: string]: unknown
+}
+
+interface AgentRow {
+  name: string
+  description: string
+  mode: Mode
+  model: string
+  prompt: string
+  temperature?: number
+  /** effective tool rules: what opencode reports, then the config overrides */
+  tools: Record<string, boolean>
+  /** the tool rules written in the config itself */
+  configTools: Record<string, boolean>
+  builtIn: boolean
+  managed: boolean
+  disabled: boolean
+  definedIn: Where[]
+  /** written to the config but not loaded by opencode yet */
+  pending: boolean
+}
+
+// opencode's own agents: editable (only overrides are written), never deletable
+const BUILT_IN = ['build', 'plan', 'general', 'explore']
+// internal helpers some versions list without a `hidden` flag
+const INTERNAL = ['compaction', 'title', 'summary']
+
+const BUILTIN_TOOLS = [
+  { id: 'bash', label: 'Run shell commands' },
+  { id: 'edit', label: 'Edit files' },
+  { id: 'write', label: 'Write new files' },
+  { id: 'patch', label: 'Apply patches' },
+  { id: 'read', label: 'Read files' },
+  { id: 'grep', label: 'Search file contents' },
+  { id: 'glob', label: 'Find files by name' },
+  { id: 'list', label: 'List folders' },
+  { id: 'webfetch', label: 'Fetch web pages' },
+  { id: 'websearch', label: 'Search the web' },
+  { id: 'todowrite', label: 'Write the todo list' },
+  { id: 'todoread', label: 'Read the todo list' },
+  { id: 'task', label: 'Invoke subagents (task)' },
+  { id: 'skill', label: 'Load skills' }
+]
+
+const MODES: Array<{ label: string; value: Mode }> = [
+  { label: 'Primary: pick it in the chat', value: 'primary' },
+  { label: 'Subagent: other agents delegate to it', value: 'subagent' },
+  { label: 'Both', value: 'all' }
+]
+
+// ---- raw data ----
+const apiAgents = ref<AgentInfo[]>([])
+/** `agent` map of the project's merged config (global + project) */
+const mergedAgents = ref<Record<string, AgentConfig>>({})
+/** `agent` map of the global config alone */
+const globalAgents = ref<Record<string, AgentConfig>>({})
+const mcpServers = ref<string[]>([])
+const managedNames = ref<Set<string>>(new Set())
+const nestOrchestrator = ref('orchestrator')
+const nestKnown = ref(false)
+const loading = ref(true)
+const loadError = ref('')
+
+function errorMessage(e: unknown) {
+  const data = (e as { data?: { message?: string; data?: { message?: string } } })?.data
+  return data?.data?.message || data?.message || (e instanceof Error ? e.message : String(e))
+}
+
+const isMap = (v: unknown): v is Record<string, unknown> => Boolean(v) && typeof v === 'object' && !Array.isArray(v)
+
+async function refresh() {
+  loading.value = true
+  loadError.value = ''
+  try {
+    const [agents, merged, global, status] = await Promise.all([
+      api.agents().catch((e) => { loadError.value = errorMessage(e); return [] as AgentInfo[] }),
+      api.config().catch(() => ({} as Record<string, unknown>)),
+      api.globalConfig().catch(() => ({} as Record<string, unknown>)),
+      caps.value.mcp ? api.mcpStatus().catch(() => ({} as Record<string, McpStatus>)) : Promise.resolve({} as Record<string, McpStatus>)
+    ])
+    apiAgents.value = Array.isArray(agents) ? agents.filter((a) => a && typeof a.name === 'string') : []
+    mergedAgents.value = (isMap(merged.agent) ? merged.agent : {}) as Record<string, AgentConfig>
+    globalAgents.value = (isMap(global.agent) ? global.agent : {}) as Record<string, AgentConfig>
+    const mcpConfig = isMap(merged.mcp) ? merged.mcp : {}
+    mcpServers.value = [...new Set([...Object.keys(status || {}), ...Object.keys(mcpConfig)])].sort()
+    if (apiAgents.value.length || Object.keys(mergedAgents.value).length) loadError.value = ''
+  } finally {
+    loading.value = false
+  }
+}
+
+// the "Subagent per MCP" agents are rewritten by the web app: read-only here.
+// Planning the nest can be slow (tool discovery), so it never blocks the list.
+interface NestPlan {
+  settings?: { enabled?: boolean; orchestrator?: string; lastSync?: { agents?: string[] } }
+  servers?: Array<{ agent: string; included?: boolean }>
+}
+function loadNest() {
+  $fetch<NestPlan>('/api/v1/mcp-nest', { timeout: 130_000 })
+    .then((plan) => {
+      const names = new Set(plan?.settings?.lastSync?.agents || [])
+      if (plan?.settings?.orchestrator) nestOrchestrator.value = plan.settings.orchestrator
+      if (plan?.settings?.enabled) {
+        names.add(nestOrchestrator.value)
+        for (const s of plan.servers || []) if (s.included) names.add(s.agent)
+      }
+      managedNames.value = names
+      nestKnown.value = true
+    })
+    .catch(() => { /* older server or opencode down */ })
+}
+
+onMounted(() => {
+  refresh()
+  loadNest()
+  catalog.load()
+  try { aiModel.value = localStorage.getItem('opencode-web.ai-model') || '' } catch { /* private mode */ }
+})
+watch(directory, () => { refresh(); catalog.load() })
+
+// ---- tool rules ----
+
+function globMatch(pattern: string, id: string) {
+  const re = pattern.replace(/[.+^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '.*').replace(/\?/g, '.')
+  return new RegExp(`^${re}$`).test(id)
+}
+
+/** Like opencode's wildcard rules: the most specific (longest) matching key wins. */
+function toolOn(tools: Record<string, boolean>, id: string) {
+  let on = true
+  const keys = Object.keys(tools).sort((a, b) => a.length - b.length || a.localeCompare(b))
+  for (const key of keys) if (globMatch(key, id)) on = tools[key] !== false
+  return on
+}
+
+const ns = (server: string) => server.replace(/[^a-zA-Z0-9_-]/g, '_')
+
+/** Tool rules opencode reports for an agent: a `tools` map, or (newer) a permission ruleset. */
+function apiTools(info?: AgentInfo): Record<string, boolean> {
+  const out: Record<string, boolean> = {}
+  const perm = info?.permission
+  if (Array.isArray(perm)) {
+    for (const rule of perm as Array<Record<string, unknown>>) {
+      if (typeof rule?.permission !== 'string' || (rule.pattern && rule.pattern !== '*')) continue
+      out[rule.permission] = rule.action !== 'deny'
+    }
+  }
+  if (isMap(info?.tools)) {
+    for (const [k, v] of Object.entries(info!.tools as Record<string, unknown>)) {
+      if (typeof v === 'boolean') out[k] = v
+    }
+  }
+  return out
+}
+
+// ---- the list ----
+
+const rows = computed<AgentRow[]>(() => {
+  const byName = new Map(apiAgents.value.map((a) => [a.name, a]))
+  const names = new Set([...byName.keys(), ...Object.keys(mergedAgents.value)])
+  const out: AgentRow[] = []
+  for (const name of names) {
+    const info = byName.get(name)
+    const cfg = mergedAgents.value[name] || {}
+    const builtIn = BUILT_IN.includes(name) || info?.builtIn === true || info?.native === true
+    if (info?.hidden === true || (builtIn && INTERNAL.includes(name))) continue
+    const inGlobal = name in globalAgents.value
+    const inProject = name in mergedAgents.value
+      && (!inGlobal || JSON.stringify(mergedAgents.value[name]) !== JSON.stringify(globalAgents.value[name]))
+    const definedIn: Where[] = [
+      ...(inProject ? ['project' as const] : []),
+      ...(inGlobal ? ['global' as const] : []),
+      ...(builtIn ? ['built-in' as const] : [])
+    ]
+    if (!definedIn.length) definedIn.push('file')
+    const apiModel = info?.model?.providerID && info.model.modelID ? `${info.model.providerID}/${info.model.modelID}` : ''
+    const apiPrompt = info?.prompt
+    const apiTemperature = info?.temperature
+    const configTools = (isMap(cfg.tools) ? cfg.tools : {}) as Record<string, boolean>
+    const nestLike = name === nestOrchestrator.value || (name.startsWith('mcp-') && configTools['*'] === false)
+    const disabled = cfg.disable === true
+    out.push({
+      name,
+      description: String(cfg.description ?? info?.description ?? ''),
+      mode: (cfg.mode || info?.mode || 'all') as Mode,
+      model: typeof cfg.model === 'string' ? cfg.model : apiModel,
+      prompt: typeof cfg.prompt === 'string' ? cfg.prompt : (typeof apiPrompt === 'string' ? apiPrompt : ''),
+      temperature: typeof cfg.temperature === 'number' ? cfg.temperature : (typeof apiTemperature === 'number' ? apiTemperature : undefined),
+      tools: { ...apiTools(info), ...configTools },
+      configTools,
+      builtIn,
+      managed: managedNames.value.has(name) || (disabled && nestLike && nestKnown.value),
+      disabled,
+      definedIn,
+      pending: !info && !disabled
+    })
+  }
+  return out.sort((a, b) =>
+    Number(b.builtIn) - Number(a.builtIn)
+    || (a.name === 'build' ? -1 : b.name === 'build' ? 1 : 0)
+    || a.name.localeCompare(b.name))
+})
+
+const primaryRows = computed(() => rows.value.filter((r) => !r.disabled && r.mode !== 'subagent'))
+const subagentRows = computed(() => rows.value.filter((r) => !r.disabled && r.mode === 'subagent'))
+const disabledRows = computed(() => rows.value.filter((r) => r.disabled))
+const showDisabled = ref(false)
+const groups = computed(() => [
+  { key: 'primary', title: 'Primary agents', hint: 'pick them in the chat', rows: primaryRows.value },
+  { key: 'subagent', title: 'Subagents', hint: 'other agents delegate to them', rows: subagentRows.value }
+])
+
+function mcpSummary(row: AgentRow) {
+  const total = mcpServers.value.length
+  if (!total) return ''
+  const allowed = mcpServers.value.filter((s) => toolOn(row.tools, `${ns(s)}_tool`)).length
+  if (allowed === total) return 'all MCP'
+  if (!allowed) return 'no MCP'
+  return `${allowed} of ${total} MCP`
+}
+
+const canDelegate = (row: AgentRow) => toolOn(row.tools, 'task')
+
+const whereLabel: Record<Where, string> = { project: 'project config', global: 'global config', 'built-in': 'built-in', file: 'agent file' }
+const whereIcon: Record<Where, string> = { project: 'i-lucide-folder-git-2', global: 'i-lucide-globe', 'built-in': 'i-lucide-box', file: 'i-lucide-file-text' }
+
+// ---- saving ----
+
+// scope: where new and edited agents are saved
+const scope = ref<'project' | 'global'>('project')
+
+/**
+ * Save to a config through the web app, which checks the change took
+ * effect: opencode 1.19 writes project changes to a file it never reads,
+ * so those land in the global config instead (and the user is told).
+ */
+async function patchScoped(body: Record<string, unknown>, target: 'project' | 'global' = scope.value) {
+  const result = await $fetch<{ scope: 'project' | 'global'; fallback?: boolean }>('/api/v1/config-patch', {
+    method: 'POST',
+    body: { scope: target, directory: directory.value, patch: body },
+    timeout: 60_000
+  })
+  if (result.fallback) {
+    toast.add({
+      title: 'Saved in the global config',
+      description: 'This opencode version ignores per-project config written through its API, so the change applies to every project.',
+      color: 'info'
+    })
+  }
+  return result
+}
+
+// agents are read when opencode loads its config: remember per project that a reload is due
+const { reload, reloading, menuItems, markPending, pendingFor } = useReload()
+const needsReload = computed(() => pendingFor(directory.value).includes('agents'))
+const reloadMenu = computed(() => menuItems(directory.value))
+
+function reloadNow() {
+  reload({ scope: 'project', directory: directory.value })
+}
+
+// any reload (this page's buttons or the menu) loads the saved agents
+watch(reloading, (now, before) => {
+  if (before && !now) {
+    refresh()
+  }
+})
+
+function savedToast(title: string, where: string) {
+  markPending(directory.value, 'agents')
+  toast.add({
+    title,
+    description: `Saved to the ${where} config. Agents change once opencode reloads its config.`,
+    color: 'success',
+    actions: [{ label: 'Reload now', icon: 'i-lucide-rotate-ccw', onClick: reloadNow }]
+  })
+}
+
+const toggling = ref('')
+
+/** Enable/disable: the config API cannot delete keys, so "delete" is `disable: true`. */
+async function setDisabled(row: AgentRow, disable: boolean) {
+  toggling.value = row.name
+  try {
+    // re-enabling must win over every config that disables it
+    const targets = new Set<'project' | 'global'>()
+    if (!disable) {
+      if (globalAgents.value[row.name]?.disable === true) targets.add('global')
+      if (row.definedIn.includes('project')) targets.add('project')
+    }
+    if (!targets.size) targets.add(scope.value)
+    let where = ''
+    for (const target of targets) {
+      const result = await patchScoped({ agent: { [row.name]: { disable } } }, target)
+      where = where ? `${where} and ${result.scope}` : result.scope
+    }
+    savedToast(`@${row.name} ${disable ? 'disabled' : 'enabled'}`, where)
+    await refresh()
+    return true
+  } catch (e) {
+    toast.add({ title: `Could not ${disable ? 'disable' : 'enable'} @${row.name}`, description: errorMessage(e), color: 'error' })
+    return false
+  } finally {
+    toggling.value = ''
+  }
+}
+
+// ---- editor ----
+
+interface EditorForm {
+  name: string
+  description: string
+  mode: Mode
+  model: string
+  /** text of the number input (asText() also copes with a number) */
+  temperature: string
+  prompt: string
+  /** effective on/off of the built-in tools */
+  tools: Record<string, boolean>
+  mcp: Record<string, McpMode>
+}
+
+type EditorTab = 'general' | 'prompt' | 'mcp' | 'tools'
+const editor = reactive({
+  open: false,
+  creating: false,
+  tab: 'general' as EditorTab,
+  row: null as AgentRow | null,
+  confirmDisable: false,
+  saving: false
+})
+const form = reactive<EditorForm>({ name: '', description: '', mode: 'all', model: '', temperature: '', prompt: '', tools: {}, mcp: {} })
+const initial = shallowRef<EditorForm>(structuredClone(toRaw(form)))
+const asText = (v: string | number) => String(v ?? '').trim()
+
+const tabs = computed(() => [
+  { label: 'General', value: 'general', icon: 'i-lucide-settings-2' },
+  { label: 'Prompt', value: 'prompt', icon: 'i-lucide-scroll-text' },
+  {
+    label: 'MCP',
+    value: 'mcp',
+    icon: 'i-lucide-plug',
+    badge: mcpServers.value.length ? String(mcpServers.value.filter((s) => mcpAllowed(s)).length) : undefined
+  },
+  { label: 'Tools', value: 'tools', icon: 'i-lucide-wrench' }
+])
+
+function mcpModeOf(tools: Record<string, boolean>, server: string): McpMode {
+  const explicit = tools[`${ns(server)}_*`]
+  return explicit === true ? 'allow' : explicit === false ? 'block' : 'inherit'
+}
+
+/** effective access to a server with the editor's current choices */
+function mcpAllowed(server: string) {
+  const mode = form.mcp[server]
+  if (mode === 'allow') return true
+  if (mode === 'block') return false
+  const rules = { ...(editor.row?.tools || {}) }
+  delete rules[`${ns(server)}_*`]
+  return toolOn(rules, `${ns(server)}_tool`)
+}
+
+function openEditor(row: AgentRow | null) {
+  editor.creating = !row
+  editor.row = row
+  editor.tab = 'general'
+  editor.confirmDisable = false
+  const tools = row?.tools || {}
+  Object.assign(form, {
+    name: row?.name || '',
+    description: row?.description || '',
+    mode: row?.mode || 'all',
+    model: row?.model || '',
+    temperature: row?.temperature != null ? String(row.temperature) : '',
+    prompt: row?.prompt || '',
+    tools: Object.fromEntries(BUILTIN_TOOLS.map((t) => [t.id, toolOn(tools, t.id)])),
+    mcp: Object.fromEntries(mcpServers.value.map((s) => [s, mcpModeOf(tools, s)]))
+  })
+  initial.value = structuredClone(toRaw(form))
+  promptUndo.value = null
+  editor.open = true
+  loadMcpTools()
+}
+
+// other rules from the config (globs, single MCP tools): shown, not edited
+const otherRules = computed(() => {
+  const known = new Set([...BUILTIN_TOOLS.map((t) => t.id), ...mcpServers.value.map((s) => `${ns(s)}_*`)])
+  return Object.entries(editor.row?.tools || {}).filter(([k]) => !known.has(k))
+})
+
+const NAME_RE = /^[a-z0-9][\w-]*$/
+const nameError = computed(() => {
+  if (!editor.creating) return ''
+  const name = form.name.trim()
+  if (!name) return ''
+  if (!NAME_RE.test(name)) return 'Lowercase letter or digit first, then letters, digits, "-" or "_".'
+  if (name.length > 64) return 'At most 64 characters.'
+  const existing = rows.value.find((r) => r.name === name)
+  if (existing) return existing.disabled ? 'A disabled agent has this name: enable it instead.' : 'An agent with this name exists.'
+  return ''
+})
+
+const temperatureError = computed(() => {
+  const t = asText(form.temperature)
+  if (!t) return ''
+  const n = Number(t)
+  return Number.isFinite(n) && n >= 0 && n <= 2 ? '' : 'A number from 0 to 2.'
+})
+
+// the config API merges and cannot remove keys: a cleared value stays set
+const modelCleared = computed(() => !editor.creating && !form.model && Boolean(initial.value.model))
+const temperatureCleared = computed(() => !editor.creating && !asText(form.temperature) && Boolean(asText(initial.value.temperature)))
+const mcpResetToInherit = computed(() =>
+  Object.entries(form.mcp).some(([s, m]) => m === 'inherit' && initial.value.mcp[s] && initial.value.mcp[s] !== 'inherit'))
+
+/** Only what changed (all of it for a new agent): built-ins keep their defaults. */
+function buildEntry(): AgentConfig {
+  const entry: AgentConfig = {}
+  const before = initial.value
+  const description = form.description.trim()
+  if (description !== before.description.trim()) entry.description = description
+  if (editor.creating || form.mode !== before.mode) entry.mode = form.mode
+  if (form.model && form.model !== before.model) entry.model = form.model
+  const t = asText(form.temperature)
+  if (t && t !== asText(before.temperature)) entry.temperature = Number(t)
+  if (form.prompt !== before.prompt) entry.prompt = form.prompt
+  const tools: Record<string, boolean> = {}
+  for (const tool of BUILTIN_TOOLS) {
+    if (form.tools[tool.id] !== before.tools[tool.id]) tools[tool.id] = Boolean(form.tools[tool.id])
+  }
+  for (const [server, mode] of Object.entries(form.mcp)) {
+    if (mode === before.mcp[server]) continue
+    // back to "inherit": the key cannot be removed, so it becomes the default (allowed)
+    tools[`${ns(server)}_*`] = mode !== 'block'
+  }
+  if (Object.keys(tools).length) entry.tools = tools
+  return entry
+}
+
+const canSave = computed(() =>
+  caps.value.config
+  && !nameError.value
+  && !temperatureError.value
+  && (!editor.creating || Boolean(form.name.trim())))
+
+async function save() {
+  if (!canSave.value) return
+  const name = editor.creating ? form.name.trim() : editor.row!.name
+  const entry = buildEntry()
+  if (!Object.keys(entry).length) {
+    toast.add({ title: 'Nothing changed', color: 'neutral' })
+    editor.open = false
+    return
+  }
+  editor.saving = true
+  try {
+    const result = await patchScoped({ agent: { [name]: entry } })
+    savedToast(editor.creating ? `Created @${name}` : `Saved @${name}`, result.scope)
+    editor.open = false
+    await refresh()
+  } catch (e) {
+    toast.add({ title: `Could not save @${name}`, description: errorMessage(e), color: 'error' })
+  } finally {
+    editor.saving = false
+  }
+}
+
+async function confirmDisable() {
+  if (!editor.row) return
+  if (await setDisabled(editor.row, true)) editor.open = false
+}
+
+function setAllMcp(mode: McpMode) {
+  for (const server of mcpServers.value) form.mcp[server] = mode
+}
+
+const MCP_CHOICES: Array<{ value: McpMode; label: string; icon: string }> = [
+  { value: 'inherit', label: 'Inherit', icon: 'i-lucide-corner-left-up' },
+  { value: 'allow', label: 'Allow', icon: 'i-lucide-check' },
+  { value: 'block', label: 'Block', icon: 'i-lucide-ban' }
+]
+
+// tool counts per server (optional: discovery can be slow)
+const mcpTools = ref<Record<string, { tools?: unknown[] }>>({})
+let mcpToolsLoaded = ''
+function loadMcpTools() {
+  if (!caps.value.mcp || mcpToolsLoaded === directory.value) return
+  mcpToolsLoaded = directory.value
+  $fetch<Record<string, { tools?: unknown[] }>>('/api/v1/mcp-tools', { query: { directory: directory.value }, timeout: 90_000 })
+    .then((found) => { mcpTools.value = found || {} })
+    .catch(() => { mcpToolsLoaded = '' })
+}
+
+// ---- writing with AI ----
+
+const aiModel = ref('')
+watch(aiModel, (v) => {
+  try { localStorage.setItem('opencode-web.ai-model', v) } catch { /* private mode */ }
+})
+const generating = ref<'' | 'description' | 'prompt'>('')
+const promptUndo = ref<string | null>(null)
+
+function cleanAi(text: string) {
+  return text.trim()
+    .replace(/^```[\w-]*\n([\s\S]*?)\n```$/, '$1')
+    .replace(/^(["'`])([\s\S]*)\1$/, '$2')
+    .trim()
+}
+
+/** What the model gets to know about the agent being edited. */
+function agentBrief() {
+  const name = editor.creating ? form.name.trim() : editor.row?.name
+  const off = BUILTIN_TOOLS.filter((t) => !form.tools[t.id]).map((t) => t.id)
+  const mcp = mcpServers.value.filter((s) => mcpAllowed(s))
+  return [
+    `Name: ${name || '(unnamed)'}`,
+    `Mode: ${form.mode} (${MODES.find((m) => m.value === form.mode)?.label})`,
+    form.description.trim() ? `Description: ${form.description.trim()}` : '',
+    `Built-in tools: all except ${off.length ? off.join(', ') : 'none'}`,
+    `MCP servers it can use: ${mcp.length ? mcp.join(', ') : 'none'}`,
+    form.prompt.trim() ? `Current system prompt:\n${form.prompt.trim().slice(0, 6000)}` : ''
+  ].filter(Boolean).join('\n')
+}
+
+async function aiText(prompt: string, system: string) {
+  const result = await $fetch<{ text: string }>('/api/v1/ai-text', {
+    method: 'POST',
+    body: { prompt, system, model: aiModel.value || undefined, directory: directory.value },
+    timeout: 180_000
+  })
+  return cleanAi(result.text || '')
+}
+
+async function generateDescription() {
+  generating.value = 'description'
+  try {
+    const text = await aiText(
+      `Write the description of this opencode agent.\n\n${agentBrief()}`,
+      'You write the description field of an opencode agent. Other agents read it to decide when to delegate to this one, and people read it in a picker. Reply with the description only: one sentence, at most 25 words, starting with what to use the agent for. No quotes, no markdown.'
+    )
+    if (text) form.description = text
+  } catch (e) {
+    toast.add({ title: 'Could not generate a description', description: errorMessage(e), color: 'error' })
+  } finally {
+    generating.value = ''
+  }
+}
+
+async function generatePrompt() {
+  generating.value = 'prompt'
+  const improving = Boolean(form.prompt.trim())
+  try {
+    const text = await aiText(
+      improving
+        ? `Improve the system prompt of this opencode agent. Keep its intent and any specific rules; make it clear, specific and well structured.\n\n${agentBrief()}`
+        : `Write a system prompt for this opencode agent.\n\n${agentBrief()}`,
+      'You write system prompts for opencode agents (AI coding assistants with tools). Write in the second person ("You are…"), state the role, how to work, what to deliver and when to stop; mention the tools and MCP servers it has only where it helps. Reply with the system prompt only, no preamble, no code fences.'
+    )
+    if (text) {
+      promptUndo.value = form.prompt
+      form.prompt = text
+    }
+  } catch (e) {
+    toast.add({ title: `Could not ${improving ? 'improve' : 'generate'} the prompt`, description: errorMessage(e), color: 'error' })
+  } finally {
+    generating.value = ''
+  }
+}
+
+function undoPrompt() {
+  if (promptUndo.value == null) return
+  form.prompt = promptUndo.value
+  promptUndo.value = null
+}
+
+const editorTitle = computed(() => editor.creating ? 'New agent' : `@${editor.row?.name}`)
+const editorDescription = computed(() => {
+  if (editor.creating) return 'A new agent in opencode\'s config. It is available after a reload.'
+  if (editor.row?.builtIn) return 'A built-in agent: only your changes are written, the rest keeps opencode\'s defaults.'
+  return `Defined in the ${editor.row?.definedIn.map((w) => whereLabel[w]).join(' and ') || 'config'}.`
+})
+
+useHead(() => ({ title: `Agents · ${dirName(directory.value)} · opencode web` }))
+</script>
+
+<template>
+  <div class="flex-1 overflow-y-auto pb-[env(safe-area-inset-bottom)]">
+    <div class="max-w-2xl mx-auto px-4 py-6">
+      <!-- phones: title row + a full-width action row; desktop: one row -->
+      <div class="flex flex-wrap items-center gap-2 mb-1">
+        <h1 class="text-lg font-semibold">Agents</h1>
+        <span class="flex-1" />
+        <UTooltip text="Reload the list">
+          <UButton
+            size="xs"
+            variant="soft"
+            icon="i-lucide-refresh-cw"
+            class="oc-tap"
+            :loading="loading"
+            aria-label="Reload the list"
+            @click="refresh(); loadNest()"
+          />
+        </UTooltip>
+        <div class="basis-full sm:basis-auto grid gap-1.5 sm:flex" :class="caps.config ? 'grid-cols-2' : 'grid-cols-1'">
+          <UDropdownMenu v-if="caps.config" :items="reloadMenu" :content="{ align: 'end' }">
+            <UButton
+              size="xs"
+              variant="soft"
+              color="neutral"
+              icon="i-lucide-rotate-ccw"
+              label="Reload opencode"
+              class="oc-tap w-full sm:w-auto justify-center"
+              :loading="reloading"
+              aria-label="Reload opencode config"
+            />
+          </UDropdownMenu>
+          <UButton
+            size="xs"
+            color="primary"
+            icon="i-lucide-plus"
+            label="New agent"
+            class="oc-tap w-full sm:w-auto justify-center"
+            :disabled="!caps.config"
+            @click="openEditor(null)"
+          />
+        </div>
+      </div>
+      <p class="text-sm text-muted mb-4">
+        Primary agents are picked in the chat; subagents are called by other agents. Set each one's prompt, model,
+        tools and which MCP servers it may use.
+      </p>
+
+      <UAlert
+        v-if="!caps.config"
+        class="mb-3"
+        color="warning"
+        variant="subtle"
+        icon="i-lucide-lock"
+        title="Read-only on this server"
+        description="This opencode server has no config API, so agents cannot be changed from here. Edit opencode.json and restart it."
+      />
+
+      <!-- saved but not loaded: stays until opencode reloads -->
+      <UAlert
+        v-if="needsReload"
+        class="mb-3 oc-appear"
+        color="info"
+        variant="subtle"
+        icon="i-lucide-info"
+        title="Changes saved — reload opencode to apply"
+        description="opencode reads agents when it loads its config. Reloading waits for running replies to finish."
+        :actions="[{ label: 'Reload', icon: 'i-lucide-rotate-ccw', color: 'info', variant: 'solid', size: 'xs', loading: reloading, onClick: reloadNow }]"
+      />
+
+      <!-- scope: where new and edited agents are saved -->
+      <div class="text-xs text-muted mb-1.5">Save changes to</div>
+      <div class="grid grid-cols-2 gap-0.5 p-0.5 mb-4 rounded-sm bg-muted" role="tablist" aria-label="Where changes are saved">
+        <UButton
+          size="xs"
+          :variant="scope === 'project' ? 'solid' : 'ghost'"
+          :color="scope === 'project' ? 'primary' : 'neutral'"
+          icon="i-lucide-folder-git-2"
+          :label="dirName(directory)"
+          class="oc-tap w-full justify-center transition-colors"
+          role="tab"
+          :aria-selected="scope === 'project'"
+          @click="scope = 'project'"
+        />
+        <UButton
+          size="xs"
+          :variant="scope === 'global' ? 'solid' : 'ghost'"
+          :color="scope === 'global' ? 'primary' : 'neutral'"
+          icon="i-lucide-globe"
+          label="Global"
+          class="oc-tap w-full justify-center transition-colors"
+          role="tab"
+          :aria-selected="scope === 'global'"
+          @click="scope = 'global'"
+        />
+      </div>
+
+      <div v-if="loading && !rows.length" class="bg-muted rounded-sm p-4 space-y-3">
+        <div v-for="i in 4" :key="i" class="flex items-center gap-3">
+          <USkeleton class="size-4 rounded-full" />
+          <div class="flex-1 space-y-1.5">
+            <USkeleton class="h-3.5 w-1/4" />
+            <USkeleton class="h-3 w-2/3" />
+          </div>
+          <USkeleton class="h-6 w-14 rounded-sm" />
+        </div>
+      </div>
+      <UAlert
+        v-else-if="loadError && !rows.length"
+        color="error"
+        variant="subtle"
+        icon="i-lucide-plug-zap"
+        title="Could not load the agents"
+        :description="loadError"
+        :actions="[{ label: 'Retry', icon: 'i-lucide-refresh-cw', color: 'error', variant: 'soft', size: 'xs', onClick: () => refresh() }]"
+      />
+      <div v-else-if="!rows.length" class="flex flex-col items-center gap-2 rounded-sm bg-muted px-4 py-8 text-sm text-muted">
+        <UIcon name="i-lucide-bot" class="size-5" />
+        No agents reported by this server.
+        <UButton v-if="caps.config" size="xs" variant="soft" icon="i-lucide-plus" label="New agent" class="oc-tap" @click="openEditor(null)" />
+      </div>
+
+      <template v-else>
+        <section v-for="group in groups" :key="group.key" class="mb-5">
+          <h2 class="flex items-baseline gap-2 text-xs font-medium text-muted mb-2">
+            {{ group.title }}
+            <span class="text-dimmed font-normal">{{ group.hint }} · {{ group.rows.length }}</span>
+          </h2>
+          <p v-if="!group.rows.length" class="rounded-sm bg-muted px-3 py-3 text-xs text-dimmed">None.</p>
+          <div class="space-y-1.5">
+            <div
+              v-for="row in group.rows"
+              :key="row.name"
+              class="oc-row flex items-start gap-3 rounded-sm bg-muted px-3 py-2.5"
+            >
+              <UIcon
+                :name="row.managed ? 'i-lucide-network' : row.builtIn ? 'i-lucide-box' : 'i-lucide-bot'"
+                class="size-4 text-muted shrink-0 mt-0.5"
+              />
+              <div class="min-w-0 flex-1">
+                <div class="flex flex-wrap items-center gap-1.5">
+                  <span class="text-sm font-medium font-mono">{{ row.name }}</span>
+                  <UBadge v-if="row.mode === 'all'" size="sm" variant="subtle" color="neutral">also subagent</UBadge>
+                  <UBadge v-if="row.builtIn" size="sm" variant="subtle" color="neutral">built-in</UBadge>
+                  <UBadge v-if="row.managed" size="sm" variant="subtle" color="primary">managed · Subagent per MCP</UBadge>
+                  <UTooltip v-if="row.pending" text="Saved in the config; opencode loads it on the next reload">
+                    <UBadge size="sm" variant="subtle" color="info">not loaded yet</UBadge>
+                  </UTooltip>
+                </div>
+                <p class="text-xs text-dimmed truncate" :title="row.description">{{ row.description || 'No description' }}</p>
+                <div class="flex flex-wrap items-center gap-x-3 gap-y-0.5 mt-1 text-[11px] text-muted">
+                  <span v-if="row.model" class="inline-flex items-center gap-1 min-w-0 max-w-full">
+                    <UIcon name="i-lucide-cpu" class="size-3 shrink-0" />
+                    <span class="font-mono truncate">{{ row.model }}</span>
+                  </span>
+                  <span v-if="mcpSummary(row)" class="inline-flex items-center gap-1">
+                    <UIcon name="i-lucide-plug" class="size-3" />{{ mcpSummary(row) }}
+                  </span>
+                  <UTooltip v-if="canDelegate(row)" text="Can delegate: invokes subagents (task)">
+                    <span class="inline-flex items-center gap-1">
+                      <UIcon name="i-lucide-git-fork" class="size-3" />delegates
+                    </span>
+                  </UTooltip>
+                  <span v-for="w in row.definedIn" :key="w" class="inline-flex items-center gap-1 text-dimmed">
+                    <UIcon :name="whereIcon[w]" class="size-3" />{{ whereLabel[w] }}
+                  </span>
+                </div>
+              </div>
+              <UTooltip v-if="row.managed" text="Written by Subagent per MCP: change it on the MCP page">
+                <UButton
+                  size="xs"
+                  variant="soft"
+                  color="neutral"
+                  icon="i-lucide-external-link"
+                  label="MCP page"
+                  class="oc-tap shrink-0"
+                  :to="`/p/${route.params.dir}/mcp`"
+                />
+              </UTooltip>
+              <UButton
+                v-else
+                size="xs"
+                variant="soft"
+                color="neutral"
+                icon="i-lucide-pencil"
+                label="Edit"
+                class="oc-tap shrink-0"
+                :disabled="!caps.config"
+                :aria-label="`Edit ${row.name}`"
+                @click="openEditor(row)"
+              />
+            </div>
+          </div>
+        </section>
+
+        <!-- disabled agents: "deleting" is disable: true, so they can come back -->
+        <section v-if="disabledRows.length" class="mb-5">
+          <UButton
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            :icon="showDisabled ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+            :label="`Disabled · ${disabledRows.length}`"
+            class="oc-tap -ml-2 mb-1"
+            :aria-expanded="showDisabled"
+            @click="showDisabled = !showDisabled"
+          />
+          <div v-if="showDisabled" class="space-y-1.5 oc-appear">
+            <div
+              v-for="row in disabledRows"
+              :key="row.name"
+              class="flex items-center gap-3 rounded-sm bg-muted px-3 py-2 opacity-80"
+            >
+              <UIcon name="i-lucide-circle-off" class="size-4 text-dimmed shrink-0" />
+              <div class="min-w-0 flex-1">
+                <div class="flex flex-wrap items-center gap-1.5">
+                  <span class="text-sm font-mono text-muted">{{ row.name }}</span>
+                  <UBadge size="sm" variant="subtle" color="neutral">disabled</UBadge>
+                  <UBadge v-if="row.builtIn" size="sm" variant="subtle" color="neutral">built-in</UBadge>
+                  <UBadge v-if="row.managed" size="sm" variant="subtle" color="primary">managed · Subagent per MCP</UBadge>
+                </div>
+                <p v-if="row.description" class="text-xs text-dimmed truncate">{{ row.description }}</p>
+              </div>
+              <UButton
+                v-if="row.managed"
+                size="xs"
+                variant="soft"
+                color="neutral"
+                icon="i-lucide-external-link"
+                label="MCP page"
+                class="oc-tap shrink-0"
+                :to="`/p/${route.params.dir}/mcp`"
+              />
+              <UButton
+                v-else
+                size="xs"
+                variant="soft"
+                color="primary"
+                icon="i-lucide-power"
+                label="Enable"
+                class="oc-tap shrink-0"
+                :loading="toggling === row.name"
+                :disabled="!caps.config"
+                @click="setDisabled(row, false)"
+              />
+            </div>
+          </div>
+        </section>
+      </template>
+    </div>
+
+    <UModal
+      v-model:open="editor.open"
+      :title="editorTitle"
+      :description="editorDescription"
+      :ui="{ content: 'sm:max-w-2xl', body: 'p-0 sm:p-0' }"
+    >
+      <template #body>
+        <div class="flex flex-col min-h-0">
+          <div class="px-4 pt-2">
+            <UTabs v-model="editor.tab" :items="tabs" :content="false" size="xs" variant="link" class="w-full" />
+          </div>
+
+          <div class="px-4 py-3 min-h-72 space-y-4">
+            <UAlert
+              v-if="editor.confirmDisable && editor.row"
+              :color="editor.row.name === 'build' ? 'error' : 'warning'"
+              variant="subtle"
+              icon="i-lucide-triangle-alert"
+              :title="`Disable @${editor.row.name}?`"
+              :description="editor.row.name === 'build'
+                ? 'build is opencode\'s default agent: new chats need another primary agent picked. The config API cannot delete agents; it can be enabled again from the Disabled list.'
+                : 'The config API cannot delete agents: it is disabled and can be enabled again from the Disabled list.'"
+              :actions="[
+                { label: 'Cancel', color: 'neutral', variant: 'ghost', size: 'xs', onClick: () => { editor.confirmDisable = false } },
+                { label: 'Disable', icon: 'i-lucide-power-off', color: 'error', variant: 'solid', size: 'xs', loading: toggling === editor.row.name, onClick: confirmDisable }
+              ]"
+            />
+
+            <!-- ================= general ================= -->
+            <div v-if="editor.tab === 'general'" class="space-y-4">
+              <UFormField
+                v-if="editor.creating"
+                label="Name"
+                size="sm"
+                required
+                :error="nameError || undefined"
+                description="Used as @name in the chat. Lowercase letters, digits, - and _."
+              >
+                <UInput v-model="form.name" placeholder="reviewer" class="w-full font-mono" autofocus />
+              </UFormField>
+
+              <UFormField label="Description" size="sm" description="Other agents read it to decide when to delegate here.">
+                <template #hint>
+                  <UButton
+                    size="xs"
+                    variant="ghost"
+                    icon="i-lucide-sparkles"
+                    label="Generate"
+                    class="oc-tap"
+                    :loading="generating === 'description'"
+                    :disabled="Boolean(generating) || (editor.creating && !form.name.trim())"
+                    @click="generateDescription"
+                  />
+                </template>
+                <UTextarea
+                  v-model="form.description"
+                  :rows="2"
+                  autoresize
+                  :maxrows="5"
+                  placeholder="Reviews code changes for bugs and risky patterns"
+                  class="w-full"
+                />
+              </UFormField>
+
+              <UFormField label="AI model for generating" size="xs" description="Used by the ✨ buttons; remembered on this device.">
+                <ModelSelect v-model="aiModel" :items="catalog.items.value" :loading="catalog.loading.value" size="xs" empty-label="opencode's default model" />
+              </UFormField>
+
+              <div class="grid gap-4 sm:grid-cols-2">
+                <UFormField label="Mode" size="sm">
+                  <USelect v-model="form.mode" :items="MODES" class="w-full" />
+                </UFormField>
+                <UFormField
+                  label="Temperature"
+                  size="sm"
+                  :error="temperatureError || undefined"
+                  :help="temperatureCleared ? 'The config API cannot remove a value: the old one stays. Edit opencode.json to clear it.' : undefined"
+                >
+                  <UInput v-model="form.temperature" type="number" inputmode="decimal" step="0.1" min="0" max="2" placeholder="model default" class="w-full" />
+                </UFormField>
+              </div>
+
+              <UFormField
+                label="Model"
+                size="sm"
+                :help="modelCleared ? 'The config API cannot remove a value: the model stays set. Edit opencode.json to inherit again.' : undefined"
+              >
+                <ModelSelect v-model="form.model" :items="catalog.items.value" :loading="catalog.loading.value" empty-label="Inherit (session's model)" />
+              </UFormField>
+            </div>
+
+            <!-- ================= prompt ================= -->
+            <div v-else-if="editor.tab === 'prompt'" class="space-y-3">
+              <UFormField label="System prompt" size="sm" description="How the agent works. Empty: opencode's default prompt for the model.">
+                <template #hint>
+                  <div class="flex items-center gap-1">
+                    <UButton
+                      v-if="promptUndo !== null"
+                      size="xs"
+                      variant="ghost"
+                      color="neutral"
+                      icon="i-lucide-undo-2"
+                      label="Undo"
+                      class="oc-tap"
+                      @click="undoPrompt"
+                    />
+                    <UButton
+                      size="xs"
+                      variant="ghost"
+                      icon="i-lucide-sparkles"
+                      :label="form.prompt.trim() ? 'Improve' : 'Generate'"
+                      class="oc-tap"
+                      :loading="generating === 'prompt'"
+                      :disabled="Boolean(generating) || (editor.creating && !form.name.trim())"
+                      @click="generatePrompt"
+                    />
+                  </div>
+                </template>
+                <UTextarea
+                  v-model="form.prompt"
+                  :rows="10"
+                  autoresize
+                  :maxrows="22"
+                  placeholder="You are a careful code reviewer…"
+                  class="w-full font-mono text-xs"
+                />
+              </UFormField>
+              <UFormField label="AI model for generating" size="xs">
+                <ModelSelect v-model="aiModel" :items="catalog.items.value" :loading="catalog.loading.value" size="xs" empty-label="opencode's default model" />
+              </UFormField>
+              <p v-if="generating === 'prompt'" class="text-xs text-muted">
+                <UIcon name="i-lucide-loader-circle" class="size-3 animate-spin align-[-2px]" /> Writing… this can take up to a minute.
+              </p>
+            </div>
+
+            <!-- ================= MCP servers ================= -->
+            <div v-else-if="editor.tab === 'mcp'" class="space-y-3">
+              <div v-if="!mcpServers.length" class="flex flex-col items-center gap-2 rounded-sm bg-muted px-4 py-6 text-sm text-muted">
+                <UIcon name="i-lucide-plug" class="size-5" />
+                No MCP servers configured.
+                <UButton size="xs" variant="soft" icon="i-lucide-plus" label="Add one on the MCP page" class="oc-tap" :to="`/p/${route.params.dir}/mcp`" />
+              </div>
+              <template v-else>
+                <div class="flex flex-wrap items-center gap-1.5">
+                  <p class="text-xs text-muted flex-1 min-w-48">
+                    Inherit follows the agent's other rules and the global tool settings.
+                  </p>
+                  <UButton size="xs" variant="soft" color="neutral" icon="i-lucide-check-check" label="Allow all" class="oc-tap" @click="setAllMcp('allow')" />
+                  <UButton size="xs" variant="soft" color="neutral" icon="i-lucide-ban" label="Block all" class="oc-tap" @click="setAllMcp('block')" />
+                </div>
+                <div class="space-y-1.5">
+                  <div
+                    v-for="server in mcpServers"
+                    :key="server"
+                    class="flex flex-wrap items-center gap-x-3 gap-y-1.5 rounded-sm bg-muted px-3 py-2"
+                  >
+                    <div class="min-w-0 flex-1">
+                      <div class="flex items-center gap-1.5">
+                        <UIcon
+                          :name="mcpAllowed(server) ? 'i-lucide-plug' : 'i-lucide-unplug'"
+                          class="size-3.5 shrink-0"
+                          :class="mcpAllowed(server) ? 'text-primary' : 'text-dimmed'"
+                        />
+                        <span class="text-sm font-mono truncate">{{ server }}</span>
+                      </div>
+                      <p class="text-[11px] text-dimmed">
+                        <template v-if="mcpTools[server]?.tools">{{ mcpTools[server]!.tools!.length }} tools · </template>
+                        {{ mcpAllowed(server) ? 'allowed' : 'blocked' }}<template v-if="form.mcp[server] === 'inherit'"> (inherited)</template>
+                      </p>
+                    </div>
+                    <div class="grid grid-cols-3 gap-0.5 p-0.5 rounded-sm bg-elevated w-full sm:w-auto" role="radiogroup" :aria-label="`${server} access`">
+                      <UButton
+                        v-for="choice in MCP_CHOICES"
+                        :key="choice.value"
+                        size="xs"
+                        :variant="form.mcp[server] === choice.value ? 'solid' : 'ghost'"
+                        :color="form.mcp[server] === choice.value ? (choice.value === 'block' ? 'error' : choice.value === 'allow' ? 'primary' : 'neutral') : 'neutral'"
+                        :icon="choice.icon"
+                        :label="choice.label"
+                        class="oc-tap justify-center"
+                        role="radio"
+                        :aria-checked="form.mcp[server] === choice.value"
+                        @click="form.mcp[server] = choice.value"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <p v-if="mcpResetToInherit" class="text-xs text-warning">
+                  The config API cannot remove a rule: a server set back to Inherit is saved as Allow.
+                </p>
+              </template>
+            </div>
+
+            <!-- ================= built-in tools ================= -->
+            <div v-else-if="editor.tab === 'tools'" class="space-y-3">
+              <p class="text-xs text-muted">
+                Off = the agent cannot use the tool. Untouched tools keep opencode's defaults and permissions; a tool you
+                switch back on is saved as <code class="font-mono">true</code>, since the config API cannot remove a rule.
+              </p>
+              <div class="rounded-sm bg-muted divide-y divide-default/40">
+                <label
+                  v-for="tool in BUILTIN_TOOLS"
+                  :key="tool.id"
+                  class="flex items-center gap-3 px-3 py-2 cursor-pointer"
+                >
+                  <div class="min-w-0 flex-1">
+                    <div class="text-sm" :class="tool.id === 'task' ? 'font-medium' : ''">{{ tool.label }}</div>
+                    <div class="text-[11px] text-dimmed font-mono">
+                      {{ tool.id }}
+                      <span v-if="form.tools[tool.id] !== initial.tools[tool.id]" class="text-primary font-sans"> · changed</span>
+                      <span v-else-if="editor.row?.configTools[tool.id] !== undefined" class="font-sans"> · set in config</span>
+                    </div>
+                  </div>
+                  <USwitch v-model="form.tools[tool.id]" size="sm" :aria-label="tool.label" />
+                </label>
+              </div>
+              <div v-if="otherRules.length" class="text-xs text-muted">
+                Other rules (edit in opencode.json):
+                <span v-for="[key, on] in otherRules" :key="key" class="inline-block font-mono text-[11px] bg-muted rounded-sm px-1.5 py-0.5 mr-1 mt-1">
+                  {{ key }}: {{ on }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #footer>
+        <div class="oc-actions">
+          <UButton
+            v-if="!editor.creating && editor.row"
+            variant="ghost"
+            color="error"
+            icon="i-lucide-power-off"
+            label="Disable agent"
+            :disabled="!caps.config || editor.confirmDisable"
+            @click="editor.confirmDisable = true"
+          />
+          <span class="flex-1 oc-spacer" />
+          <UButton variant="ghost" color="neutral" label="Cancel" @click="editor.open = false" />
+          <UButton
+            color="primary"
+            icon="i-lucide-save"
+            :label="editor.creating ? 'Create agent' : 'Save'"
+            :loading="editor.saving"
+            :disabled="!canSave"
+            @click="save"
+          />
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
diff --git a/app/pages/p/[dir]/index.vue b/app/pages/p/[dir]/index.vue
index 9c6f092..f74fdf1 100644
--- a/app/pages/p/[dir]/index.vue
+++ b/app/pages/p/[dir]/index.vue
@@ -142,7 +142,7 @@ useHead(() => ({ title: `${dirName(directory.value)} · opencode web` }))
               <UIcon
                 :name="projectMeta.isFavorite(directory, s.id) ? 'i-lucide-star' : 'i-lucide-message-square'"
                 class="size-3.5 shrink-0"
-                :class="projectMeta.isFavorite(directory, s.id) ? 'text-primary' : 'text-dimmed'"
+                :class="projectMeta.isFavorite(directory, s.id) ? 'text-amber-400 oc-filled' : 'text-dimmed'"
               />
               <span class="text-sm truncate flex-1">{{ s.title || 'Untitled session' }}</span>
               <span class="text-[10px] text-dimmed font-mono shrink-0">{{ fmtTime(s.time?.updated || s.time?.created) }}</span>
diff --git a/app/pages/p/[dir]/mcp.vue b/app/pages/p/[dir]/mcp.vue
index c5eef6b..160fa05 100644
--- a/app/pages/p/[dir]/mcp.vue
+++ b/app/pages/p/[dir]/mcp.vue
@@ -73,9 +73,63 @@ function reportBroken(name: string, action: string) {
 // the subagent-per-MCP card re-plans after servers change
 const nestCard = ref<{ load: () => void } | null>(null)
 
-const { reloading, menuItems } = useReload()
+const { reload, reloading, menuItems } = useReload()
 const reloadMenu = computed(() => menuItems(directory.value))
 
+// ---- config vs running opencode ----
+// opencode reads `enabled` when an instance starts: a server switched on or
+// off through the config can disagree with what is running. Such rows get a
+// notice with a one-click fix (connect / disconnect now, or reload).
+const LIVE = ['connected', 'running', 'ok', 'success']
+interface Drift { kind: 'load' | 'unload'; text: string }
+function driftOf(name: string): Drift | undefined {
+  const entry = entries.value.find((e) => e.name === name)
+  if (!entry?.config) return undefined
+  const configOn = entry.config.enabled !== false
+  if (configOn && ['disabled', 'unknown'].includes(entry.status)) {
+    return { kind: 'load', text: 'Switched on in the config, but the running opencode has not loaded it yet.' }
+  }
+  if (!configOn && LIVE.includes(entry.status)) {
+    return { kind: 'unload', text: 'Switched off in the config, but still connected in the running opencode.' }
+  }
+  return undefined
+}
+const driftCount = computed(() => entries.value.filter((e) => driftOf(e.name)).length)
+const applying = ref<string | null>(null)
+
+/** Connect or disconnect a server in the running opencode to match its config. */
+async function applyLive(name: string, enabled?: boolean, quiet = false) {
+  applying.value = name
+  try {
+    const result = await $fetch<{ status?: { status: string; error?: string } }>('/api/v1/mcp-apply', {
+      method: 'POST',
+      body: { name, directory: directory.value, ...(typeof enabled === 'boolean' ? { enabled } : {}) },
+      timeout: 90_000
+    })
+    if (!quiet) {
+      const status = result.status?.status || 'unknown'
+      toast.add({ title: `${name}: ${status}`, color: LIVE.includes(status) || status === 'disabled' ? 'success' : 'warning' })
+    }
+    return result.status
+  } catch (e) {
+    if (!quiet) toast.add({ title: `Could not apply ${name}`, description: errorMessage(e), color: 'error' })
+  } finally {
+    applying.value = null
+  }
+}
+
+async function applyAndRefresh(name: string) {
+  const drift = driftOf(name)
+  await applyLive(name, drift ? drift.kind === 'load' : undefined)
+  await refresh(true)
+  reportBroken(name, 'connected')
+}
+
+async function reloadAndContinue() {
+  await reload({ scope: 'project', directory: directory.value, resumeBusy: true })
+  await refresh(true)
+}
+
 function errorMessage(e: unknown) {
   const data = (e as { data?: { message?: string; data?: { message?: string } } })?.data
   return data?.data?.message || data?.message || (e instanceof Error ? e.message : String(e))
@@ -313,12 +367,17 @@ async function setServerMode(entry: McpEntry, mode: ServerMode) {
       })
       configPermission.value = { ...configPermission.value, [`${entry.name}_*`]: mode }
     }
+    // make the running opencode follow at once: no reload needed
+    const live = await applyLive(entry.name, mode !== 'off', true)
     await refresh()
     if (mode === 'off' || !reportBroken(entry.name, 'enabled')) {
+      const drift = driftOf(entry.name)
       toast.add({
         title: `${entry.name}: ${mode === 'off' ? 'disabled' : mode === 'ask' ? 'enabled (asks first)' : 'enabled (no ask)'}`,
-        description: 'Applies to new sessions.',
-        color: 'success'
+        description: drift
+          ? 'Saved. The running opencode still needs a reload: see the notice on the server.'
+          : `Saved and applied${live?.status ? ` (${live.status})` : ''}. Chats use it from their next message.`,
+        color: drift ? 'warning' : 'success'
       })
     }
   } catch (e) {
@@ -703,7 +762,7 @@ useHead(() => ({ title: `MCP · ${dirName(directory.value)} · opencode web` }))
       </p>
 
       <AgentControlCard v-if="caps.mcp" @changed="refresh(true)" @details="(n) => openDetails(n, 'tools')" />
-      <McpNestCard v-if="caps.mcp" ref="nestCard" />
+      <McpNestCard v-if="caps.mcp" ref="nestCard" :directory="directory" />
 
       <!-- scope: project vs global, a full-width segmented control -->
       <div class="grid grid-cols-2 gap-0.5 p-0.5 mb-3 rounded-sm bg-muted" role="tablist" aria-label="Configuration scope">
@@ -743,6 +802,23 @@ useHead(() => ({ title: `MCP · ${dirName(directory.value)} · opencode web` }))
           + 'directory is missing. Open a project path that exists on the opencode host.'"
       />
 
+      <!-- config and running opencode disagree: say so once, with the fix -->
+      <CollapseTransition>
+        <div v-if="driftCount && !loading" class="mb-3">
+          <UAlert
+            color="warning"
+            variant="subtle"
+            icon="i-lucide-rotate-ccw"
+            :title="`${driftCount} server${driftCount === 1 ? '' : 's'} not applied yet`"
+            description="The config changed but the running opencode still uses the old state. Apply each one below, or reload this project (running chats continue afterwards)."
+          >
+            <template #actions>
+              <UButton size="xs" color="warning" variant="solid" icon="i-lucide-rotate-ccw" label="Reload & continue" class="oc-tap" :loading="reloading" @click="reloadAndContinue" />
+            </template>
+          </UAlert>
+        </div>
+      </CollapseTransition>
+
       <div v-if="loading && !entries.length" class="bg-muted rounded-sm p-4 space-y-3">
         <div v-for="i in 3" :key="i" class="flex items-center gap-3">
           <USkeleton class="size-4 rounded-full" />
@@ -773,6 +849,35 @@ useHead(() => ({ title: `MCP · ${dirName(directory.value)} · opencode web` }))
         @authenticate="startAuth"
         @details="openDetails"
       >
+        <template #notice="{ server }">
+          <div
+            v-if="driftOf(server.name)"
+            class="mx-2.5 mb-2 ml-8 flex flex-wrap items-center gap-1.5 rounded-sm bg-warning/10 px-2 py-1.5 oc-appear"
+          >
+            <UIcon name="i-lucide-info" class="size-3.5 text-warning shrink-0" />
+            <span class="text-[11px] text-muted flex-1 min-w-40">{{ driftOf(server.name)!.text }}</span>
+            <UButton
+              size="xs"
+              color="warning"
+              variant="soft"
+              :icon="driftOf(server.name)!.kind === 'load' ? 'i-lucide-plug' : 'i-lucide-unplug'"
+              :label="driftOf(server.name)!.kind === 'load' ? 'Connect now' : 'Disconnect now'"
+              class="oc-tap"
+              :loading="applying === server.name"
+              @click="applyAndRefresh(server.name)"
+            />
+            <UButton
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              icon="i-lucide-rotate-ccw"
+              label="Reload"
+              class="oc-tap"
+              :loading="reloading"
+              @click="reloadAndContinue"
+            />
+          </div>
+        </template>
         <!-- saved presets share the filter row -->
         <template #actions>
           <div v-for="g in groups" :key="g.name" class="flex items-center rounded-sm overflow-hidden">
diff --git a/app/pages/p/[dir]/session/[id].vue b/app/pages/p/[dir]/session/[id].vue
index cdca7b0..8abc995 100644
--- a/app/pages/p/[dir]/session/[id].vue
+++ b/app/pages/p/[dir]/session/[id].vue
@@ -55,6 +55,16 @@ const scroller = ref<HTMLElement>()
 const pinnedToBottom = ref(true)
 
 const chime = useChime()
+const chatWidth = useChatWidth()
+// an open chat is read: whatever it does while on screen doesn't make it unread
+const { markSeen } = useSeenSessions()
+watch(() => [sessionId.value, session.value?.time?.updated, messages.value.length, busy.value] as const, ([id]) => {
+  if (import.meta.client && id && document.visibilityState === 'visible') markSeen(id)
+})
+const onVisible = () => { if (document.visibilityState === 'visible') markSeen(sessionId.value) }
+onMounted(() => document.addEventListener('visibilitychange', onVisible))
+onBeforeUnmount(() => document.removeEventListener('visibilitychange', onVisible))
+const { reload } = useReload()
 const projectMeta = useProjectMeta()
 onMounted(projectMeta.load)
 
@@ -159,7 +169,12 @@ async function runMcpCommand(input: string) {
       case 'disable': {
         if (!name) return note(`Usage: \`/mcp ${sub} <name>\``)
         await api.patchConfig({ mcp: { [name]: { enabled: sub === 'enable' } } })
-        note(`**${name}** ${sub}d. Applies to new sessions.`)
+        // connect / disconnect it in the running opencode right away
+        const applied = await $fetch<{ status?: { status: string; error?: string } }>('/api/v1/mcp-apply', {
+          method: 'POST', body: { name, directory: directory.value, enabled: sub === 'enable' }, timeout: 90_000
+        }).catch(() => null)
+        note(`**${name}** ${sub}d${applied?.status ? ` — now **${applied.status.status}**${applied.status.error ? `: ${applied.status.error}` : ''}` : ''}. `
+          + `Its tools ${sub === 'enable' ? 'are available' : 'are gone'} from your next message${applied ? '' : ' (if not, run `/reload`)'}.`)
         loadMeta()
         break
       }
@@ -193,9 +208,11 @@ async function runMcpCommand(input: string) {
           '',
           '- `/mcp list` — servers and status',
           '- `/mcp add <name> <url|command…>` — register a server',
-          '- `/mcp enable|disable <name>` — toggle for this project',
+          '- `/mcp enable|disable <name>` — switch on/off for this project (applied at once)',
           '- `/mcp remove <name>` — delete from the project config',
-          '- `/mcp test <name>` — connect and list its tools'
+          '- `/mcp test <name>` — connect and list its tools',
+          '',
+          '`/reload [all] [now] [stay]` re-reads the config and continues this chat afterwards.'
         ].join('\n'))
     }
   } catch (e) {
@@ -301,6 +318,11 @@ const sessionMenu = computed(() => {
       label: fav ? 'Unfavorite' : 'Favorite',
       icon: 'i-lucide-star',
       onSelect: () => projectMeta.toggleFavorite(directory.value, sessionId.value)
+    },
+    {
+      label: chatWidth.wideApps.value ? 'Apps: keep in the column' : 'Apps: use all the width',
+      icon: 'i-lucide-app-window',
+      onSelect: () => { chatWidth.wideApps.value = !chatWidth.wideApps.value }
     }
   ]]
 })
@@ -707,11 +729,13 @@ const BUILTIN_COMMANDS: Array<{ name: string; description: string }> = [
   { name: 'undo', description: 'Revert the last change' },
   { name: 'redo', description: 'Restore the reverted change' },
   { name: 'mcp', description: 'Manage MCP servers (list, add, test…)' },
+  { name: 'reload', description: 'Reload opencode config (project, all, now), then continue this chat' },
+  { name: 'skills', description: 'List the skills the agent can load (manage them on the Skills page)' },
   { name: 'test', description: 'UI demos, e.g. /test question' }
 ]
 
 // built-ins the connected server can't run are not offered
-const UNSUPPORTED_BUILTIN: Record<string, keyof Capabilities> = { share: 'share', mcp: 'mcp' }
+const UNSUPPORTED_BUILTIN: Record<string, keyof Capabilities> = { share: 'share', mcp: 'mcp', reload: 'config' }
 const allCommands = computed(() => [
   ...BUILTIN_COMMANDS.filter((c) => !UNSUPPORTED_BUILTIN[c.name] || caps.value[UNSUPPORTED_BUILTIN[c.name]!]),
   ...commands.value.map((c) => ({
@@ -755,6 +779,36 @@ async function runSlashCommand(text: string) {
         note('Restored the reverted change.')
         loadAll()
         return
+      case 'skills': {
+        const res = await $fetch<{ skills: Array<{ name: string; description?: string; source: string; permission: string }> }>(
+          '/api/v1/skills', { query: { directory: directory.value }, timeout: 60_000 })
+        const rows = res.skills.map((s) => `| \`${s.name}\` | ${s.source} | ${s.permission === 'allow' ? 'auto' : s.permission === 'deny' ? 'off' : 'ask'} | ${(s.description || '').replace(/\|/g, '/').slice(0, 140)} |`)
+        note([
+          `**Skills** (${res.skills.length}) — [manage them](/p/${route.params.dir}/skills)`,
+          '',
+          '| skill | source | mode | when it is used |',
+          '| --- | --- | --- | --- |',
+          ...(rows.length ? rows : ['| _none_ | | | |']),
+          '',
+          'Ask for one by name ("use the release-notes skill…") or let the agent pick it from its description.'
+        ].join('\n'))
+        return
+      }
+      case 'reload': {
+        // /reload [all] [now] [stay]: re-read opencode's config (new MCP
+        // servers, agents…) and, unless "stay", continue this chat afterwards
+        const words = args.toLowerCase().split(/\s+/)
+        const scope = words.includes('all') ? 'all' : 'project'
+        const now = words.includes('now')
+        const resume = !words.includes('stay')
+        note(`Reloading ${scope === 'all' ? 'every project' : 'this project'}${now ? ' now' : ' once its chats are idle'}${resume ? ' — this chat continues afterwards' : ''}…`)
+        const state = await reload({ scope, directory: directory.value, when: now ? 'now' : 'idle', resume: resume ? [sessionId.value] : undefined })
+        if (state?.state === 'done') {
+          note(resume ? '✅ Reloaded. Continuing the chat…' : '✅ Reloaded. New messages use the new config.')
+          loadMeta()
+        }
+        return
+      }
       default: {
         if (commands.value.some((c) => c.name === name)) {
           busy.value = true
@@ -898,15 +952,67 @@ async function respondPermission(perm: PermissionRequest, response: 'once' | 'al
   }
 }
 
+// ---- drop files anywhere on the chat to attach them ----
+const promptBox = ref<{ addFiles: (files: Iterable<File>) => void } | null>(null)
+const dragDepth = ref(0)
+const hasFiles = (e: DragEvent) => Array.from(e.dataTransfer?.types || []).includes('Files')
+function onDragEnter(e: DragEvent) {
+  if (!hasFiles(e)) return
+  e.preventDefault()
+  dragDepth.value++
+}
+function onDragOver(e: DragEvent) {
+  if (!hasFiles(e)) return
+  e.preventDefault()
+  if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
+}
+function onDragLeave(e: DragEvent) {
+  if (!hasFiles(e)) return
+  dragDepth.value = Math.max(0, dragDepth.value - 1)
+}
+function onDrop(e: DragEvent) {
+  if (!hasFiles(e)) return
+  e.preventDefault()
+  dragDepth.value = 0
+  const files = Array.from(e.dataTransfer?.files || [])
+  if (!files.length) return
+  if (!promptBox.value) {
+    toast.add({ title: 'Answer the question first', description: 'Files can be attached once the chat input is back.', color: 'warning' })
+    return
+  }
+  promptBox.value.addFiles(files)
+}
+
 useHead(() => ({ title: `${session.value?.title || 'Chat'} · opencode web` }))
 </script>
 
 <template>
   <div
     class="flex-1 flex min-h-0 transition-[margin] duration-300"
-    :style="effectiveView === 'side' && !isSmallScreen ? { marginRight: 'min(42vw, 42rem)' } : {}"
+    :class="chatWidth.wideApps.value ? 'oc-wide-apps' : ''"
+    :style="{
+      '--oc-chat-max': chatWidth.maxWidth.value,
+      ...(effectiveView === 'side' && !isSmallScreen ? { marginRight: 'min(42vw, 42rem)' } : {})
+    }"
+  >
+  <div
+    class="relative flex-1 flex flex-col min-h-0 min-w-0"
+    @dragenter="onDragEnter"
+    @dragover="onDragOver"
+    @dragleave="onDragLeave"
+    @drop="onDrop"
   >
-  <div class="flex-1 flex flex-col min-h-0 min-w-0">
+    <!-- drop target overlay while files are dragged over the chat -->
+    <Transition name="oc-fade">
+      <div
+        v-if="dragDepth > 0"
+        class="absolute inset-2 z-30 flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed border-(--ui-border-inverted)/50 bg-default/85 backdrop-blur-sm pointer-events-none"
+      >
+        <UIcon name="i-lucide-image-up" class="size-10 text-highlighted" />
+        <p class="text-sm text-highlighted">Drop to attach</p>
+        <p class="text-xs text-dimmed">Images, PDFs and text files up to 10 MB</p>
+      </div>
+    </Transition>
     <!-- session header: title + actions; phones get a compact row with the
          actions in an overflow menu (sound toggle is in the mobile app bar) -->
     <div class="flex items-center gap-2 h-10 md:h-12 pl-3 pr-1 md:px-4 bg-muted/50 shrink-0">
@@ -971,14 +1077,28 @@ useHead(() => ({ title: `${session.value?.title || 'Chat'} · opencode web` }))
         <UTooltip :text="projectMeta.isFavorite(directory, sessionId) ? 'Unfavorite' : 'Favorite'">
           <UButton
             icon="i-lucide-star"
-            :color="projectMeta.isFavorite(directory, sessionId) ? 'primary' : 'neutral'"
+            color="neutral"
             variant="ghost"
             size="xs"
             class="oc-tap"
+            :class="projectMeta.isFavorite(directory, sessionId) ? 'text-amber-400 hover:text-amber-300' : ''"
+            :ui="{ leadingIcon: projectMeta.isFavorite(directory, sessionId) ? 'oc-filled' : '' }"
             :aria-label="projectMeta.isFavorite(directory, sessionId) ? 'Unfavorite conversation' : 'Favorite conversation'"
             @click="projectMeta.toggleFavorite(directory, sessionId)"
           />
         </UTooltip>
+        <UDropdownMenu :items="chatWidth.menu.value" :content="{ align: 'end' }">
+          <UTooltip text="Chat width">
+            <UButton
+              icon="i-lucide-move-horizontal"
+              color="neutral"
+              variant="ghost"
+              size="xs"
+              class="oc-tap"
+              aria-label="Chat width"
+            />
+          </UTooltip>
+        </UDropdownMenu>
         <UTooltip :text="chime.enabled.value ? 'Disable reply sound' : 'Enable reply sound'">
           <UButton
             :icon="chime.enabled.value ? 'i-lucide-bell-ring' : 'i-lucide-bell-off'"
@@ -1019,7 +1139,7 @@ useHead(() => ({ title: `${session.value?.title || 'Chat'} · opencode web` }))
     <!-- live todo list from the agent -->
     <CollapseTransition>
       <div v-if="todos.length" class="bg-muted/40 px-3 sm:px-4 py-1.5 shrink-0">
-        <div class="max-w-4xl mx-auto">
+        <div class="max-w-(--oc-chat-max) mx-auto">
           <button
             class="flex items-center gap-1.5 text-[10px] uppercase tracking-widest text-dimmed cursor-pointer"
             @click="todosOpen = !todosOpen"
@@ -1052,12 +1172,14 @@ useHead(() => ({ title: `${session.value?.title || 'Chat'} · opencode web` }))
       </div>
     </CollapseTransition>
 
+    <!-- @container: apps and tables measure the scroller to break out of a
+         narrower column (.oc-breakout) -->
     <div
       ref="scroller"
-      class="flex-1 overflow-y-auto min-h-0 py-2"
+      class="@container flex-1 overflow-y-auto min-h-0 py-2"
       @scroll.passive="onScroll"
     >
-      <div class="max-w-4xl mx-auto">
+      <div class="max-w-(--oc-chat-max) mx-auto">
         <div v-if="loading" class="px-3 sm:px-4 py-4 space-y-4">
           <div class="space-y-2">
             <USkeleton class="h-9 w-2/3" />
@@ -1146,7 +1268,7 @@ useHead(() => ({ title: `${session.value?.title || 'Chat'} · opencode web` }))
 
     <!-- a pending agent question replaces the chat input (TUI-style focus) -->
     <div v-if="questions[0]" class="bg-muted px-3 sm:px-4 py-2 sm:py-3 pb-[max(0.5rem,env(safe-area-inset-bottom))]">
-      <div class="max-w-4xl mx-auto">
+      <div class="max-w-(--oc-chat-max) mx-auto">
         <ChatQuestionPrompt
           :key="questions[0].id"
           :request="questions[0]"
@@ -1162,6 +1284,7 @@ useHead(() => ({ title: `${session.value?.title || 'Chat'} · opencode web` }))
 
     <ChatPromptBox
       v-else
+      ref="promptBox"
       :providers="providers"
       :default-model="serverDefaultModel"
       :agents="agents"
diff --git a/app/pages/p/[dir]/skills.vue b/app/pages/p/[dir]/skills.vue
new file mode 100644
index 0000000..aa1a6c6
--- /dev/null
+++ b/app/pages/p/[dir]/skills.vue
@@ -0,0 +1,659 @@
+<script setup lang="ts">
+// Skills: every skill opencode can load in this project, where it comes from,
+// whether the agent may use it (permission.skill), what it says and how good
+// it is. Skills of this app's library are edited here (and written or
+// improved by a model); others can be copied into the library to change them.
+const route = useRoute()
+const caps = useCapabilities()
+const directory = computed(() => decodeDir(route.params.dir as string))
+const toast = useToast()
+
+type Source = 'built-in' | 'library' | 'project' | 'global' | 'remote'
+type Mode = 'allow' | 'ask' | 'deny'
+interface Check { level: 'error' | 'warning' | 'tip'; message: string }
+interface Skill {
+  name: string
+  description?: string
+  location?: string
+  source: Source
+  content?: string
+  permission: Mode
+  permissionRule?: string
+  library?: { version: number; updatedAt: number; loaded: boolean; origin?: string }
+  checks: Check[]
+}
+interface Catalog { rev: number; count: number; url: string | null; registered: string | null; upToDate: boolean; supported: boolean }
+
+const skills = ref<Skill[]>([])
+const catalog = ref<Catalog | null>(null)
+const available = ref(true)
+const loading = ref(true)
+const loadError = ref('')
+
+function errorMessage(e: unknown) {
+  const data = (e as { data?: { message?: string } })?.data
+  return data?.message || (e instanceof Error ? e.message : String(e))
+}
+
+async function refresh() {
+  loading.value = true
+  loadError.value = ''
+  try {
+    const res = await $fetch<{ skills: Skill[]; available: boolean; catalog: Catalog }>('/api/v1/skills', {
+      query: { directory: directory.value },
+      timeout: 60_000
+    })
+    skills.value = res.skills
+    available.value = res.available
+    catalog.value = res.catalog
+  } catch (e) {
+    loadError.value = errorMessage(e)
+  } finally {
+    loading.value = false
+  }
+}
+onMounted(refresh)
+
+// ---- reload: skills, permissions and the catalog are read when opencode loads ----
+const { reload, reloading, menuItems, markPending, pendingFor } = useReload()
+const reloadMenu = computed(() => menuItems(directory.value))
+const needsReload = computed(() => pendingFor(directory.value).includes('skills'))
+watch(reloading, (now, before) => { if (before && !now) refresh() })
+function changed(title: string, description: string) {
+  markPending(directory.value, 'skills')
+  toast.add({
+    title,
+    description: `${description} opencode picks it up after a reload.`,
+    color: 'success',
+    actions: [{ label: 'Reload now', icon: 'i-lucide-rotate-ccw', onClick: () => { reload({ scope: 'all', resumeBusy: false }) } }]
+  })
+}
+
+// ---- filters ----
+const filter = ref('')
+const sourceFilter = ref<Source | 'all'>('all')
+const SOURCES: Array<{ value: Source; label: string; icon: string; tip: string }> = [
+  { value: 'library', label: 'Library', icon: 'i-lucide-library', tip: 'Kept by this web app and served to opencode; editable here' },
+  { value: 'project', label: 'Project', icon: 'i-lucide-folder-git-2', tip: '.opencode/skills, .claude/skills or .agents/skills in the project' },
+  { value: 'global', label: 'Global', icon: 'i-lucide-globe', tip: '~/.config/opencode/skills (and ~/.claude, ~/.agents) on the opencode host' },
+  { value: 'remote', label: 'Remote', icon: 'i-lucide-cloud-download', tip: 'Downloaded from a skill URL in the config' },
+  { value: 'built-in', label: 'Built-in', icon: 'i-lucide-package', tip: 'Ships with opencode' }
+]
+const sourceOf = (s: Source) => SOURCES.find((x) => x.value === s)!
+const counts = computed(() => Object.fromEntries(SOURCES.map((s) => [s.value, skills.value.filter((k) => k.source === s.value).length])))
+const filtered = computed(() => {
+  const q = filter.value.trim().toLowerCase()
+  return skills.value.filter((s) =>
+    (sourceFilter.value === 'all' || s.source === sourceFilter.value) &&
+    (!q || `${s.name} ${s.description || ''}`.toLowerCase().includes(q)))
+})
+
+const problems = (s: Skill) => s.checks.filter((c) => c.level !== 'tip')
+const errors = (s: Skill) => s.checks.filter((c) => c.level === 'error')
+
+// ---- permissions (allow / ask / deny per skill, project or global config) ----
+const scope = ref<'project' | 'global'>('project')
+const settingPermission = ref('')
+async function setPermission(skill: Skill, mode: Mode) {
+  settingPermission.value = skill.name
+  try {
+    const result = await $fetch<{ scope: string; fallback?: boolean }>('/api/v1/config-patch', {
+      method: 'POST',
+      body: { scope: scope.value, directory: directory.value, patch: { permission: { skill: { [skill.name]: mode } } } },
+      timeout: 60_000
+    })
+    skill.permission = mode
+    skill.permissionRule = skill.name
+    changed(`${skill.name}: ${mode}`, `Saved in the ${result.scope} config.`)
+  } catch (e) {
+    toast.add({ title: `Could not change ${skill.name}`, description: errorMessage(e), color: 'error' })
+  } finally {
+    settingPermission.value = ''
+  }
+}
+const MODES: Array<{ value: Mode; label: string; tip: string }> = [
+  { value: 'deny', label: 'off', tip: 'Hidden from the agent' },
+  { value: 'ask', label: 'ask', tip: 'The chat asks before the skill is loaded' },
+  { value: 'allow', label: 'auto', tip: 'Loaded whenever the agent needs it' }
+]
+
+// ---- catalog (the library as a skill URL in the opencode config) ----
+const registering = ref(false)
+async function registerCatalog() {
+  registering.value = true
+  try {
+    catalog.value = await $fetch<Catalog>('/api/v1/skills/catalog', { method: 'POST', body: { enabled: true }, timeout: 60_000 })
+    changed('Skill library registered', 'Its URL is in the global config.')
+  } catch (e) {
+    toast.add({ title: 'Could not register the skill library', description: errorMessage(e), color: 'error' })
+  } finally {
+    registering.value = false
+  }
+}
+
+// ---- editor ----
+const AI_MODEL_KEY = 'opencode-web.ai-model'
+const models = useModelCatalog(directory)
+const aiModel = ref('')
+onMounted(() => { try { aiModel.value = localStorage.getItem(AI_MODEL_KEY) || '' } catch { /* private mode */ } })
+watch(aiModel, (v) => { try { localStorage.setItem(AI_MODEL_KEY, v) } catch { /* private mode */ } })
+
+const editor = reactive({
+  open: false,
+  tab: 'preview' as 'preview' | 'edit' | 'checks' | 'ai',
+  skill: null as Skill | null,
+  name: '',
+  content: '',
+  original: '',
+  isNew: false,
+  saving: false,
+  brief: '',
+  generating: false,
+  proposal: '',
+  proposalChecks: [] as Check[]
+})
+const editable = computed(() => editor.isNew || editor.skill?.source === 'library')
+const dirty = computed(() => editor.content !== editor.original)
+
+function openSkill(skill: Skill, tab: typeof editor.tab = 'preview') {
+  editor.skill = skill
+  editor.name = skill.name
+  editor.content = skill.content || ''
+  editor.original = editor.content
+  editor.isNew = false
+  editor.tab = tab
+  editor.brief = ''
+  editor.proposal = ''
+  editor.open = true
+  if (!models.items.value.length) models.load()
+}
+
+const TEMPLATE = (name: string) => `---
+name: ${name}
+description: Use when the user asks to … (say what it does AND when to use it; front-load keywords)
+---
+
+# ${name}
+
+## When to use
+
+## Steps
+
+1. …
+
+## Examples
+`
+
+const newOpen = ref(false)
+const newName = ref('')
+const newBrief = ref('')
+function startNew() {
+  newName.value = ''
+  newBrief.value = ''
+  newOpen.value = true
+  if (!models.items.value.length) models.load()
+}
+const nameValid = computed(() => /^[a-z0-9]+(-[a-z0-9]+)*$/.test(newName.value) && newName.value.length <= 64)
+
+async function createSkill(withAi: boolean) {
+  const name = newName.value.trim()
+  let content = TEMPLATE(name)
+  if (withAi) {
+    editor.generating = true
+    try {
+      content = (await $fetch<{ content: string }>('/api/v1/skills/ai', {
+        method: 'POST',
+        body: { mode: 'create', name, brief: newBrief.value, model: aiModel.value || undefined, directory: directory.value },
+        timeout: 5 * 60_000
+      })).content
+    } catch (e) {
+      toast.add({ title: 'The model could not write it', description: errorMessage(e), color: 'error' })
+      return
+    } finally {
+      editor.generating = false
+    }
+  }
+  newOpen.value = false
+  editor.skill = null
+  editor.isNew = true
+  editor.name = name
+  editor.content = content
+  editor.original = ''
+  editor.tab = 'edit'
+  editor.proposal = ''
+  editor.brief = ''
+  editor.open = true
+}
+
+/** Built-in, global, project and remote skills are edited as a library copy (it takes precedence). */
+function copyToLibrary() {
+  if (!editor.skill) return
+  editor.isNew = true
+  editor.original = ''
+  editor.tab = 'edit'
+  toast.add({
+    title: 'Editing a library copy',
+    description: `Saving stores ${editor.name} in the skill library, which opencode prefers over the ${editor.skill.source} one.`,
+    color: 'info'
+  })
+}
+
+async function save() {
+  editor.saving = true
+  try {
+    const res = await $fetch<{ skill: { name: string; version: number }; catalog: Catalog | { error: string } }>('/api/v1/skills/library', {
+      method: 'PUT',
+      body: {
+        name: editor.name,
+        content: editor.content,
+        origin: editor.skill && editor.skill.source !== 'library' ? editor.skill.source : undefined
+      },
+      timeout: 60_000
+    })
+    editor.original = editor.content
+    editor.isNew = false
+    if ('error' in res.catalog) {
+      toast.add({ title: `${res.skill.name} saved, but opencode can't load the library yet`, description: res.catalog.error, color: 'warning' })
+    } else {
+      catalog.value = res.catalog
+      changed(`${res.skill.name} saved (v${res.skill.version})`, 'Stored in the skill library.')
+    }
+    await refresh()
+    editor.skill = skills.value.find((s) => s.name === res.skill.name) || editor.skill
+  } catch (e) {
+    toast.add({ title: 'Could not save the skill', description: errorMessage(e), color: 'error' })
+  } finally {
+    editor.saving = false
+  }
+}
+
+const confirmDelete = ref(false)
+async function removeSkill() {
+  if (!editor.skill) return
+  if (!confirmDelete.value) {
+    confirmDelete.value = true
+    setTimeout(() => { confirmDelete.value = false }, 3500)
+    return
+  }
+  confirmDelete.value = false
+  try {
+    await $fetch('/api/v1/skills/library', { method: 'DELETE', query: { name: editor.skill.name }, timeout: 60_000 })
+    changed(`${editor.skill.name} deleted`, 'Removed from the skill library.')
+    editor.open = false
+    await refresh()
+  } catch (e) {
+    toast.add({ title: 'Could not delete the skill', description: errorMessage(e), color: 'error' })
+  }
+}
+
+async function improve() {
+  editor.generating = true
+  editor.proposal = ''
+  try {
+    const res = await $fetch<{ content: string; checks: Check[] }>('/api/v1/skills/ai', {
+      method: 'POST',
+      body: { mode: 'improve', name: editor.name, content: editor.content, brief: editor.brief || undefined, model: aiModel.value || undefined, directory: directory.value },
+      timeout: 5 * 60_000
+    })
+    editor.proposal = res.content
+    editor.proposalChecks = res.checks
+  } catch (e) {
+    toast.add({ title: 'The model could not improve it', description: errorMessage(e), color: 'error' })
+  } finally {
+    editor.generating = false
+  }
+}
+
+function acceptProposal() {
+  if (!editable.value) copyToLibrary()
+  editor.content = editor.proposal
+  editor.proposal = ''
+  editor.tab = 'edit'
+}
+
+// live checks while editing
+const liveChecks = ref<Check[]>([])
+let checkTimer: ReturnType<typeof setTimeout> | undefined
+watch(() => [editor.content, editor.open] as const, ([content, open]) => {
+  clearTimeout(checkTimer)
+  if (!open) return
+  checkTimer = setTimeout(() => {
+    $fetch<{ checks: Check[] }>('/api/v1/skills/check', { method: 'POST', body: { content, name: editor.name }, timeout: 10_000 })
+      .then((r) => { liveChecks.value = r.checks })
+      .catch(() => { liveChecks.value = editor.skill?.checks || [] })
+  }, 300)
+})
+onBeforeUnmount(() => clearTimeout(checkTimer))
+
+// preview: frontmatter fields + rendered body
+const preview = computed(() => {
+  const m = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/.exec(editor.content || '')
+  const fields: Array<[string, string]> = []
+  for (const line of (m?.[1] || '').split(/\r?\n/)) {
+    const kv = /^([A-Za-z0-9_-]+):\s*(.*)$/.exec(line)
+    if (kv) fields.push([kv[1]!, kv[2]!.replace(/^(['"])([\s\S]*)\1$/, '$2')])
+  }
+  const body = m ? m[2]! : editor.content
+  const words = body.split(/\s+/).filter(Boolean).length
+  return { fields, body, words, tokens: Math.round((editor.content || '').length / 4) }
+})
+
+const checkIcon = (level: Check['level']) => level === 'error' ? 'i-lucide-circle-x' : level === 'warning' ? 'i-lucide-triangle-alert' : 'i-lucide-lightbulb'
+const checkColor = (level: Check['level']) => level === 'error' ? 'text-error' : level === 'warning' ? 'text-warning' : 'text-muted'
+
+const helpText = [
+  'A **skill** is a set of instructions (a `SKILL.md`) the agent loads only when it needs it. Its **description** is always in the agent\'s context and decides *when* the skill is used; the body is read on demand, so skills add knowledge without filling every prompt.',
+  '',
+  '- **Where they come from**: built into opencode, `~/.config/opencode/skills` (global), `.opencode/skills` / `.claude/skills` / `.agents/skills` in the project, skill URLs, and this app\'s **library**.',
+  '- **Library**: skills kept by this web app and served to opencode as a skill URL. A library skill overrides a same-name skill from elsewhere, so *Edit a copy* lets you change any skill.',
+  '- **auto / ask / off**: `permission.skill` in the opencode config: load freely, ask in the chat first, or hide it.',
+  '- Which agents may load skills at all is set per agent on the Agents page (tool `skill`).',
+  '- Changes apply after opencode reloads its config.'
+].join('\n')
+
+useHead(() => ({ title: `Skills · ${dirName(directory.value)} · opencode web` }))
+</script>
+
+<template>
+  <div class="flex-1 overflow-y-auto pb-[env(safe-area-inset-bottom)]">
+    <div class="max-w-3xl mx-auto px-4 py-6">
+      <div class="flex flex-wrap items-center gap-2 mb-1">
+        <h1 class="text-lg font-semibold flex items-center gap-1.5">Skills <HelpTip title="How skills work" :text="helpText" :actions="[{ label: 'Agents', icon: 'i-lucide-bot', to: `/p/${route.params.dir}/agents` }]" /></h1>
+        <span class="flex-1" />
+        <UTooltip text="Rescan">
+          <UButton size="xs" variant="soft" icon="i-lucide-refresh-cw" class="oc-tap" :loading="loading" aria-label="Rescan skills" @click="refresh" />
+        </UTooltip>
+        <div class="basis-full sm:basis-auto grid gap-1.5 sm:flex" :class="caps.config ? 'grid-cols-2' : 'grid-cols-1'">
+          <UDropdownMenu v-if="caps.config" :items="reloadMenu" :content="{ align: 'end' }">
+            <UButton size="xs" variant="soft" color="neutral" icon="i-lucide-rotate-ccw" label="Reload opencode" class="oc-tap w-full sm:w-auto justify-center" :loading="reloading" />
+          </UDropdownMenu>
+          <UButton size="xs" color="primary" icon="i-lucide-plus" label="New skill" class="oc-tap w-full sm:w-auto justify-center" @click="startNew" />
+        </div>
+      </div>
+      <p class="text-sm text-muted mb-4">Instructions the agent loads on demand. See what each one says, check its quality, choose which ones the agent may use, and write or improve skills with AI.</p>
+
+      <CollapseTransition>
+        <UAlert
+          v-if="needsReload"
+          class="mb-3"
+          color="warning"
+          variant="subtle"
+          icon="i-lucide-rotate-ccw"
+          title="Skill changes are saved"
+          description="opencode loads skills, their permissions and the library when it reads its config."
+        >
+          <template #actions>
+            <UButton size="xs" color="warning" icon="i-lucide-rotate-ccw" label="Reload all projects" :loading="reloading" @click="reload({ scope: 'all' })" />
+          </template>
+        </UAlert>
+      </CollapseTransition>
+
+      <!-- the library and its catalog URL -->
+      <div class="rounded-sm bg-muted px-3 py-2.5 mb-3 flex flex-wrap items-center gap-2">
+        <UIcon name="i-lucide-library" class="size-4 shrink-0" :class="catalog?.registered ? 'text-success' : 'text-muted'" />
+        <div class="min-w-0 flex-1">
+          <div class="text-sm font-medium">Skill library <span class="text-dimmed font-normal">· {{ catalog?.count ?? 0 }} skill{{ catalog?.count === 1 ? '' : 's' }}</span></div>
+          <p class="text-[11px] text-dimmed truncate">
+            <template v-if="!catalog">Loading…</template>
+            <template v-else-if="!catalog.supported">This opencode server's config can't be read: the library can't be registered.</template>
+            <template v-else-if="catalog.registered && catalog.upToDate">Served to opencode at <span class="font-mono">{{ catalog.registered }}</span></template>
+            <template v-else-if="catalog.registered">Registered at an older revision: saving a skill or registering again updates it.</template>
+            <template v-else>Not registered yet: saving the first skill does it, or register now.</template>
+          </p>
+        </div>
+        <UButton
+          v-if="catalog && catalog.count && !catalog.upToDate && catalog.supported"
+          size="xs"
+          variant="soft"
+          icon="i-lucide-link"
+          label="Register"
+          class="oc-tap"
+          :loading="registering"
+          @click="registerCatalog"
+        />
+      </div>
+
+      <!-- permissions scope -->
+      <div class="flex items-center gap-2 mb-2">
+        <span class="text-[11px] text-dimmed">Permissions saved to</span>
+        <div class="grid grid-cols-2 gap-0.5 p-0.5 rounded-sm bg-muted flex-1 max-w-80" role="tablist" aria-label="Permission scope">
+          <UButton size="xs" :variant="scope === 'project' ? 'solid' : 'ghost'" :color="scope === 'project' ? 'primary' : 'neutral'" icon="i-lucide-folder-git-2" :label="dirName(directory)" class="justify-center" role="tab" :aria-selected="scope === 'project'" @click="scope = 'project'" />
+          <UButton size="xs" :variant="scope === 'global' ? 'solid' : 'ghost'" :color="scope === 'global' ? 'primary' : 'neutral'" icon="i-lucide-globe" label="Global" class="justify-center" role="tab" :aria-selected="scope === 'global'" @click="scope = 'global'" />
+        </div>
+      </div>
+
+      <!-- filters -->
+      <div class="flex flex-wrap items-center gap-1 mb-2">
+        <UInput v-model="filter" size="xs" icon="i-lucide-search" placeholder="Filter skills…" class="w-44" />
+        <UButton size="xs" :variant="sourceFilter === 'all' ? 'soft' : 'ghost'" color="neutral" :label="`All ${skills.length}`" @click="sourceFilter = 'all'" />
+        <UTooltip v-for="s in SOURCES" :key="s.value" :text="s.tip">
+          <UButton
+            v-if="counts[s.value]"
+            size="xs"
+            :variant="sourceFilter === s.value ? 'soft' : 'ghost'"
+            color="neutral"
+            :icon="s.icon"
+            :label="`${s.label} ${counts[s.value]}`"
+            @click="sourceFilter = sourceFilter === s.value ? 'all' : s.value"
+          />
+        </UTooltip>
+      </div>
+
+      <UAlert v-if="loadError" color="error" variant="subtle" icon="i-lucide-plug-zap" title="Cannot load skills" :description="loadError" class="mb-3">
+        <template #actions>
+          <UButton size="xs" color="error" variant="soft" icon="i-lucide-refresh-cw" label="Retry" @click="refresh" />
+        </template>
+      </UAlert>
+      <UAlert
+        v-else-if="!available && !loading"
+        color="warning"
+        variant="subtle"
+        icon="i-lucide-info"
+        title="This opencode server lists no skills"
+        description="Its API has no /skill route (older version). Library skills are still kept here and served once opencode supports skill URLs."
+        class="mb-3"
+      />
+
+      <div class="rounded-sm bg-elevated/60 divide-y divide-default">
+        <template v-if="loading && !skills.length">
+          <div v-for="i in 4" :key="i" class="flex items-center gap-2 px-3 py-2.5">
+            <USkeleton class="size-4 rounded-full" />
+            <div class="flex-1 space-y-1.5">
+              <USkeleton class="h-3.5 w-1/3" />
+              <USkeleton class="h-3 w-3/4" />
+            </div>
+            <USkeleton class="h-5 w-28" />
+          </div>
+        </template>
+        <div v-else-if="!filtered.length" class="px-3 py-8 text-sm text-dimmed text-center">
+          {{ skills.length ? 'No skill matches.' : 'No skills yet: create one, or add SKILL.md files to the project.' }}
+        </div>
+        <TransitionGroup name="oc-list">
+          <div v-for="s in filtered" :key="s.name" class="flex items-start gap-2.5 px-3 py-2.5">
+            <UTooltip :text="sourceOf(s.source).tip">
+              <UIcon :name="sourceOf(s.source).icon" class="size-4 mt-0.5 shrink-0 text-dimmed" />
+            </UTooltip>
+            <button type="button" class="min-w-0 flex-1 text-left cursor-pointer group" @click="openSkill(s)">
+              <div class="flex flex-wrap items-center gap-1.5">
+                <span class="text-sm font-mono group-hover:underline underline-offset-2">{{ s.name }}</span>
+                <UBadge size="sm" variant="subtle" color="neutral">{{ sourceOf(s.source).label }}</UBadge>
+                <UBadge v-if="s.library && !s.library.loaded" size="sm" variant="subtle" color="warning">not loaded yet</UBadge>
+                <UBadge v-else-if="s.library" size="sm" variant="subtle" color="neutral">v{{ s.library.version }}</UBadge>
+                <UBadge v-if="errors(s).length" size="sm" variant="subtle" color="error">{{ errors(s).length }} error{{ errors(s).length === 1 ? '' : 's' }}</UBadge>
+                <UBadge v-else-if="problems(s).length" size="sm" variant="subtle" color="warning">{{ problems(s).length }} to improve</UBadge>
+              </div>
+              <p class="text-xs text-muted line-clamp-2 mt-0.5">{{ s.description || 'No description: opencode hides skills without one.' }}</p>
+            </button>
+            <!-- auto / ask / off -->
+            <div class="flex shrink-0 rounded-sm bg-muted p-0.5" role="radiogroup" :aria-label="`Permission for ${s.name}`">
+              <UTooltip v-for="m in MODES" :key="m.value" :text="`${m.tip}${s.permissionRule && s.permissionRule !== s.name && s.permission === m.value ? ` (from rule ${s.permissionRule})` : ''}`">
+                <button
+                  type="button"
+                  role="radio"
+                  :aria-checked="s.permission === m.value"
+                  class="px-2 py-0.5 text-[11px] rounded-sm transition-colors cursor-pointer disabled:opacity-50"
+                  :class="s.permission === m.value ? (m.value === 'deny' ? 'bg-accented text-highlighted' : 'bg-inverted text-inverted') : 'text-dimmed hover:text-highlighted'"
+                  :disabled="settingPermission === s.name || !caps.config"
+                  @click="s.permission !== m.value && setPermission(s, m.value)"
+                >{{ m.label }}</button>
+              </UTooltip>
+            </div>
+          </div>
+        </TransitionGroup>
+      </div>
+    </div>
+
+    <!-- new skill -->
+    <UModal v-model:open="newOpen" title="New skill" description="Lowercase name with hyphens. Describe what it is for and let a model draft it, or start from a template.">
+      <template #body>
+        <div class="space-y-3">
+          <UFormField label="Name" size="sm" :error="newName && !nameValid ? 'lowercase letters, digits and single hyphens' : undefined">
+            <UInput v-model="newName" placeholder="release-notes" class="w-full font-mono" />
+          </UFormField>
+          <UFormField label="What is it for?" size="sm" description="Used by the AI draft: the task, conventions, commands, examples you want it to follow.">
+            <UTextarea v-model="newBrief" :rows="4" autoresize :maxrows="10" placeholder="Write release notes from the git log since the last tag, grouped by feat/fix, in our CHANGELOG style…" class="w-full" />
+          </UFormField>
+          <UFormField label="AI model" size="sm">
+            <ModelSelect v-model="aiModel" :items="models.items.value" :loading="models.loading.value" empty-label="opencode default model" />
+          </UFormField>
+        </div>
+      </template>
+      <template #footer>
+        <div class="oc-actions">
+          <UButton variant="ghost" color="neutral" label="Cancel" @click="newOpen = false" />
+          <span class="flex-1 oc-spacer" />
+          <UButton variant="soft" color="neutral" icon="i-lucide-file-plus" label="From template" :disabled="!nameValid" @click="createSkill(false)" />
+          <UButton color="primary" icon="i-lucide-sparkles" label="Write with AI" :loading="editor.generating" :disabled="!nameValid || !newBrief.trim()" @click="createSkill(true)" />
+        </div>
+      </template>
+    </UModal>
+
+    <!-- view / edit / check / improve -->
+    <UModal v-model:open="editor.open" :title="editor.name" :ui="{ content: 'sm:max-w-4xl' }">
+      <template #description>
+        <span class="flex flex-wrap items-center gap-1.5 text-xs">
+          <UBadge size="sm" variant="subtle" color="neutral">{{ editor.isNew ? 'Library (unsaved)' : editor.skill ? sourceOf(editor.skill.source).label : '' }}</UBadge>
+          <span v-if="editor.skill?.location" class="font-mono text-dimmed truncate max-w-full">{{ editor.skill.location }}</span>
+          <span class="text-dimmed">{{ preview.words }} words · ~{{ preview.tokens }} tokens when loaded</span>
+        </span>
+      </template>
+      <template #body>
+        <div class="space-y-3">
+          <div class="flex gap-0.5 p-0.5 rounded-sm bg-muted" role="tablist">
+            <UButton
+              v-for="t in ([['preview', 'Overview', 'i-lucide-eye'], ['edit', editable ? 'Edit' : 'Source', 'i-lucide-pencil'], ['checks', `Checks${liveChecks.filter((c) => c.level !== 'tip').length ? ` (${liveChecks.filter((c) => c.level !== 'tip').length})` : ''}`, 'i-lucide-list-checks'], ['ai', 'Improve with AI', 'i-lucide-sparkles']] as const)"
+              :key="t[0]"
+              size="xs"
+              :variant="editor.tab === t[0] ? 'solid' : 'ghost'"
+              :color="editor.tab === t[0] ? 'primary' : 'neutral'"
+              :icon="t[2]"
+              :label="t[1]"
+              class="flex-1 justify-center"
+              role="tab"
+              :aria-selected="editor.tab === t[0]"
+              @click="editor.tab = t[0]"
+            />
+          </div>
+
+          <Transition name="oc-fade" mode="out-in">
+            <!-- overview: what triggers it, what it says -->
+            <div v-if="editor.tab === 'preview'" key="preview" class="space-y-3">
+              <div class="rounded-sm bg-muted p-3">
+                <div class="text-[10px] uppercase tracking-widest text-dimmed mb-1">When the agent uses it (description, always in context)</div>
+                <p class="text-sm">{{ preview.fields.find(([k]) => k === 'description')?.[1] || 'No description.' }}</p>
+                <dl v-if="preview.fields.length > 2" class="flex flex-wrap gap-x-4 gap-y-1 mt-2 text-xs">
+                  <div v-for="[k, v] in preview.fields.filter(([k]) => k !== 'name' && k !== 'description')" :key="k">
+                    <dt class="inline text-dimmed">{{ k }}:</dt> <dd class="inline font-mono">{{ v }}</dd>
+                  </div>
+                </dl>
+              </div>
+              <div class="text-[10px] uppercase tracking-widest text-dimmed">Instructions (loaded on demand)</div>
+              <div class="rounded-sm bg-muted p-3 max-h-[50dvh] overflow-y-auto">
+                <Markdown :text="preview.body.trim() || '_No instructions yet._'" />
+              </div>
+            </div>
+
+            <div v-else-if="editor.tab === 'edit'" key="edit" class="space-y-2">
+              <UAlert
+                v-if="!editable"
+                color="info"
+                variant="subtle"
+                icon="i-lucide-copy"
+                :title="`This ${editor.skill?.source} skill is read-only here`"
+                description="Edit a copy in the skill library: it overrides this one once opencode reloads."
+              >
+                <template #actions>
+                  <UButton size="xs" color="info" variant="soft" icon="i-lucide-copy" label="Edit a copy" @click="copyToLibrary" />
+                </template>
+              </UAlert>
+              <UTextarea
+                v-model="editor.content"
+                :rows="18"
+                :maxrows="30"
+                autoresize
+                :readonly="!editable"
+                class="w-full font-mono text-xs"
+                :ui="{ base: 'text-xs leading-relaxed' }"
+              />
+            </div>
+
+            <div v-else-if="editor.tab === 'checks'" key="checks" class="space-y-1.5">
+              <p v-if="!liveChecks.length" class="flex items-center gap-2 text-sm text-success py-4 justify-center">
+                <UIcon name="i-lucide-circle-check" class="size-4" /> Looks good: valid frontmatter, a when-to-use description and real instructions.
+              </p>
+              <div v-for="(c, i) in liveChecks" :key="i" class="flex items-start gap-2 rounded-sm bg-muted px-3 py-2 text-sm">
+                <UIcon :name="checkIcon(c.level)" class="size-4 mt-0.5 shrink-0" :class="checkColor(c.level)" />
+                <span>{{ c.message }}</span>
+              </div>
+              <UButton v-if="liveChecks.length" size="xs" variant="soft" icon="i-lucide-sparkles" label="Fix these with AI" @click="editor.brief = liveChecks.map((c) => c.message).join(' '); editor.tab = 'ai'" />
+            </div>
+
+            <div v-else key="ai" class="space-y-2">
+              <div class="flex flex-wrap items-end gap-2">
+                <UFormField label="AI model" size="xs" class="flex-1 min-w-48">
+                  <ModelSelect v-model="aiModel" :items="models.items.value" :loading="models.loading.value" size="xs" empty-label="opencode default model" />
+                </UFormField>
+              </div>
+              <UTextarea v-model="editor.brief" :rows="2" autoresize :maxrows="6" placeholder="Optional: what to change (e.g. add an example for monorepos, make it stricter about tests)…" class="w-full" />
+              <UButton size="sm" color="primary" icon="i-lucide-sparkles" :label="editor.proposal ? 'Try again' : 'Improve'" :loading="editor.generating" :disabled="!editor.content" @click="improve" />
+              <CollapseTransition>
+                <div v-if="editor.proposal" class="space-y-2">
+                  <div class="text-[10px] uppercase tracking-widest text-dimmed">Proposal</div>
+                  <pre class="text-xs font-mono bg-muted rounded-sm p-2.5 whitespace-pre-wrap max-h-[40dvh] overflow-y-auto">{{ editor.proposal }}</pre>
+                  <div v-if="editor.proposalChecks.length" class="text-[11px] text-dimmed">Still to check: {{ editor.proposalChecks.map((c) => c.message).join(' · ') }}</div>
+                  <div class="flex gap-1.5">
+                    <UButton size="xs" color="primary" icon="i-lucide-check" :label="editable ? 'Use it' : 'Use it as a library copy'" @click="acceptProposal" />
+                    <UButton size="xs" variant="ghost" color="neutral" label="Discard" @click="editor.proposal = ''" />
+                  </div>
+                </div>
+              </CollapseTransition>
+            </div>
+          </Transition>
+        </div>
+      </template>
+      <template #footer>
+        <div class="oc-actions">
+          <UButton
+            v-if="editor.skill?.source === 'library' && !editor.isNew"
+            :color="confirmDelete ? 'error' : 'neutral'"
+            :variant="confirmDelete ? 'solid' : 'ghost'"
+            icon="i-lucide-trash-2"
+            :label="confirmDelete ? 'Delete?' : 'Delete'"
+            @click="removeSkill"
+          />
+          <span class="flex-1 oc-spacer" />
+          <UButton variant="ghost" color="neutral" label="Close" @click="editor.open = false" />
+          <UButton
+            v-if="editable"
+            color="primary"
+            icon="i-lucide-save"
+            :label="editor.isNew ? 'Save to library' : 'Save'"
+            :loading="editor.saving"
+            :disabled="!dirty || liveChecks.some((c) => c.level === 'error')"
+            @click="save"
+          />
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
diff --git a/app/pages/p/[dir]/stats.vue b/app/pages/p/[dir]/stats.vue
index 2f019b8..b4ba3b2 100644
--- a/app/pages/p/[dir]/stats.vue
+++ b/app/pages/p/[dir]/stats.vue
@@ -1,39 +1,295 @@
 <script setup lang="ts">
-import type { SessionInfo } from '#shared/types/opencode'
-
+// Usage & cost: every assistant reply of the period (from /api/v1/usage),
+// grouped client-side by session, time or model, with the real cost opencode
+// recorded next to the same tokens at the model's list price.
 const route = useRoute()
 const directory = computed(() => decodeDir(route.params.dir as string))
-const api = useOpencodeApi(directory)
 
-interface SessionStats extends SessionInfo {
-  cost?: number
-  tokens?: { input?: number; output?: number; reasoning?: number; cache?: { read?: number; write?: number } }
+interface UsageTokens { input: number; output: number; reasoning: number; cacheRead: number; cacheWrite: number }
+interface UsageRow {
+  sessionID: string
+  parentID?: string
+  title?: string
+  parentTitle?: string
+  time: number
+  completed?: number
+  providerID: string
+  modelID: string
+  agent?: string
+  cost: number
+  tokens: UsageTokens
 }
+interface ModelPrice { input: number; output: number; cacheRead: number; cacheWrite: number }
+interface Usage { generatedAt: number; days: number; rows: UsageRow[]; prices: Record<string, ModelPrice> }
+
+type GroupBy = 'session' | 'day' | 'hour' | 'weekday' | 'model' | 'provider' | 'agent'
+type Metric = 'cost' | 'tokens' | 'messages'
+
+const PERIODS = [
+  { value: 7, label: '7d' },
+  { value: 30, label: '30d' },
+  { value: 90, label: '90d' },
+  { value: 365, label: 'All' }
+]
+const GROUPS: Array<{ value: GroupBy; label: string }> = [
+  { value: 'session', label: 'Session' },
+  { value: 'day', label: 'Day' },
+  { value: 'hour', label: 'Hour of day' },
+  { value: 'weekday', label: 'Weekday' },
+  { value: 'model', label: 'Model' },
+  { value: 'provider', label: 'Provider' },
+  { value: 'agent', label: 'Agent' }
+]
+const METRICS: Array<{ value: Metric; label: string }> = [
+  { value: 'cost', label: 'Cost' },
+  { value: 'tokens', label: 'Tokens' },
+  { value: 'messages', label: 'Replies' }
+]
 
-const sessions = ref<SessionStats[]>([])
+const days = ref(30)
+const groupBy = ref<GroupBy>('day')
+const metric = ref<Metric>('cost')
+const includeSubagents = ref(true)
+
+const usage = ref<Usage | null>(null)
 const loading = ref(true)
+const error = ref('')
 
-onMounted(async () => {
+async function load() {
+  loading.value = true
+  error.value = ''
   try {
-    sessions.value = (await api.sessions() as SessionStats[])
-      .filter((s) => !s.parentID)
-      .sort((a, b) => (b.cost || 0) - (a.cost || 0))
+    usage.value = await $fetch<Usage>('/api/v1/usage', {
+      query: { directory: directory.value, days: days.value },
+      timeout: 60000
+    })
+  } catch (e: unknown) {
+    const err = e as { data?: { message?: string }; message?: string }
+    error.value = err?.data?.message || err?.message || 'Request failed'
   } finally {
     loading.value = false
   }
+}
+
+onMounted(load)
+watch([days, directory], load)
+
+// ---- pricing ----
+
+/** The same tokens at list price, USD (prices are per 1M tokens; reasoning billed as output). */
+function listCost(t: UsageTokens, p: ModelPrice) {
+  return (t.input * p.input + (t.output + t.reasoning) * p.output + t.cacheRead * p.cacheRead + t.cacheWrite * p.cacheWrite) / 1_000_000
+}
+
+interface PricedRow extends UsageRow {
+  /** list-price cost, null when the model has no price */
+  est: number | null
+}
+
+const rows = computed<PricedRow[]>(() => {
+  const prices = usage.value?.prices || {}
+  return (usage.value?.rows || [])
+    .filter((r) => includeSubagents.value || !r.parentID)
+    .map((r) => {
+      const price = prices[`${r.providerID}/${r.modelID}`]
+      return { ...r, est: price ? listCost(r.tokens, price) : null }
+    })
+})
+
+const totals = computed(() => {
+  const t = { real: 0, est: 0, unknown: 0, messages: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, sessions: 0 }
+  const sessions = new Set<string>()
+  for (const r of rows.value) {
+    t.real += r.cost
+    if (r.est === null) t.unknown++
+    else t.est += r.est
+    t.messages++
+    t.input += r.tokens.input
+    t.output += r.tokens.output + r.tokens.reasoning
+    t.cacheRead += r.tokens.cacheRead
+    t.cacheWrite += r.tokens.cacheWrite
+    sessions.add(r.parentID && includeSubagents.value ? r.parentID : r.sessionID)
+  }
+  t.sessions = sessions.size
+  return t
+})
+
+/** Models with no list price: their replies are left out of the estimate. */
+const unknownModels = computed(() => {
+  const m = new Map<string, number>()
+  for (const r of rows.value) if (r.est === null) m.set(`${r.providerID}/${r.modelID}`, (m.get(`${r.providerID}/${r.modelID}`) || 0) + 1)
+  return [...m].map(([model, count]) => ({ model, count })).sort((a, b) => b.count - a.count)
+})
+
+const savings = computed(() => totals.value.est - totals.value.real)
+
+// ---- grouping ----
+
+interface Bucket {
+  key: string
+  label: string
+  sub?: string
+  order: number
+  to?: string
+  real: number
+  est: number
+  /** replies whose model has no list price */
+  unknown: number
+  messages: number
+  subagent: number
+  input: number
+  output: number
+  cacheRead: number
+  cacheWrite: number
+}
+
+const isTimeGroup = computed(() => ['day', 'hour', 'weekday'].includes(groupBy.value))
+
+const pad = (n: number) => String(n).padStart(2, '0')
+function dayKey(ts: number) {
+  const d = new Date(ts)
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+}
+function startOfDay(ts: number) {
+  const d = new Date(ts)
+  d.setHours(0, 0, 0, 0)
+  return d.getTime()
+}
+// 2024-01-01 was a Monday: weekday i (0 = Mon) is Jan 1 + i
+const weekdayName = (i: number, style: 'short' | 'long' = 'short') =>
+  new Date(2024, 0, 1 + i).toLocaleDateString([], { weekday: style })
+
+function newBucket(key: string, label: string, order = 0, extra: Partial<Bucket> = {}): Bucket {
+  return { key, label, order, real: 0, est: 0, unknown: 0, messages: 0, subagent: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, ...extra }
+}
+
+const buckets = computed<Bucket[]>(() => {
+  const map = new Map<string, Bucket>()
+  const get = (key: string, make: () => Bucket) => {
+    let b = map.get(key)
+    if (!b) map.set(key, (b = make()))
+    return b
+  }
+  const g = groupBy.value
+
+  // time groupings show every slot, empty ones included
+  if (g === 'day') {
+    const first = rows.value.length ? startOfDay(rows.value[0]!.time) : Date.now()
+    let start = first
+    if ((usage.value?.days || days.value) <= 90) {
+      start = Math.min(first, startOfDay(Date.now() - ((usage.value?.days || days.value) - 1) * 86400_000))
+    }
+    const end = Date.now()
+    for (const d = new Date(start); d.getTime() <= end; d.setDate(d.getDate() + 1)) {
+      const ts = d.getTime()
+      map.set(dayKey(ts), newBucket(dayKey(ts), d.toLocaleDateString([], { month: 'short', day: 'numeric' }), ts))
+    }
+  } else if (g === 'hour') {
+    for (let h = 0; h < 24; h++) map.set(String(h), newBucket(String(h), `${pad(h)}:00`, h))
+  } else if (g === 'weekday') {
+    for (let i = 0; i < 7; i++) map.set(String(i), newBucket(String(i), weekdayName(i), i))
+  }
+
+  for (const r of rows.value) {
+    let b: Bucket
+    if (g === 'session') {
+      const key = includeSubagents.value && r.parentID ? r.parentID : r.sessionID
+      const own = key === r.sessionID
+      b = get(key, () => newBucket(key, (own ? r.title : r.parentTitle) || 'Untitled session', 0, {
+        to: `/p/${route.params.dir}/session/${key}`
+      }))
+      if (own && r.title) b.label = r.title
+      if (!own) b.subagent++
+    } else if (g === 'day') {
+      const key = dayKey(r.time)
+      b = get(key, () => newBucket(key, new Date(r.time).toLocaleDateString([], { month: 'short', day: 'numeric' }), startOfDay(r.time)))
+    } else if (g === 'hour') {
+      b = map.get(String(new Date(r.time).getHours()))!
+    } else if (g === 'weekday') {
+      b = map.get(String((new Date(r.time).getDay() + 6) % 7))!
+    } else if (g === 'model') {
+      const key = `${r.providerID}/${r.modelID}`
+      b = get(key, () => newBucket(key, r.modelID, 0, { sub: r.providerID }))
+    } else if (g === 'provider') {
+      b = get(r.providerID, () => newBucket(r.providerID, r.providerID))
+    } else {
+      const key = r.agent || '(none)'
+      b = get(key, () => newBucket(key, key))
+    }
+    add(b, r)
+  }
+  return [...map.values()]
+})
+
+function add(b: Bucket, r: PricedRow) {
+  b.real += r.cost
+  if (r.est === null) b.unknown++
+  else b.est += r.est
+  b.messages++
+  b.input += r.tokens.input
+  b.output += r.tokens.output + r.tokens.reasoning
+  b.cacheRead += r.tokens.cacheRead
+  b.cacheWrite += r.tokens.cacheWrite
+}
+
+const freshTokens = (b: Bucket) => b.input + b.output
+const allTokens = (b: Bucket) => b.input + b.output + b.cacheRead + b.cacheWrite
+
+/** [front, back] bar values for the chosen metric: real vs estimated cost, in+out vs all tokens. */
+function barValues(b: Bucket): [number, number] {
+  if (metric.value === 'cost') return [b.real, b.est]
+  if (metric.value === 'tokens') return [freshTokens(b), allTokens(b)]
+  return [b.messages, 0]
+}
+const metricValue = (b: Bucket) => Math.max(...barValues(b))
+
+/** Chart order: time groupings in time order, the rest ranked by the metric. */
+const chartBuckets = computed(() => {
+  const list = [...buckets.value]
+  if (isTimeGroup.value) return list.sort((a, b) => a.order - b.order)
+  return list.sort((a, b) => metricValue(b) - metricValue(a))
 })
+const chartMax = computed(() => Math.max(...chartBuckets.value.map(metricValue), 0) || 1)
+const RANKED_LIMIT = 12
 
-const totals = computed(() => sessions.value.reduce(
-  (acc, s) => {
-    acc.cost += s.cost || 0
-    acc.input += s.tokens?.input || 0
-    acc.output += s.tokens?.output || 0
-    acc.reasoning += s.tokens?.reasoning || 0
-    acc.cacheRead += s.tokens?.cache?.read || 0
-    return acc
-  },
-  { cost: 0, input: 0, output: 0, reasoning: 0, cacheRead: 0 }
-))
+/** Table: non-empty buckets; newest day first, hours/weekdays in order, others by value. */
+const tableBuckets = computed(() => {
+  const list = chartBuckets.value.filter((b) => b.messages > 0)
+  return groupBy.value === 'day' ? list.reverse() : list
+})
+
+const pct = (v: number) => (v > 0 ? Math.max(1.5, (v / chartMax.value) * 100) : 0)
+
+// tap/hover readout for the vertical chart (bars are too thin for labels)
+const active = ref<string | null>(null)
+watch([groupBy, days], () => { active.value = null })
+const activeBucket = computed(() => chartBuckets.value.find((b) => b.key === active.value) || null)
+
+function longLabel(b: Bucket) {
+  if (groupBy.value === 'day') return new Date(b.order).toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' })
+  if (groupBy.value === 'hour') return `${pad(b.order)}:00–${pad((b.order + 1) % 24)}:00`
+  if (groupBy.value === 'weekday') return weekdayName(b.order, 'long')
+  return b.label
+}
+
+/** ~5 evenly spaced axis labels under the vertical chart. */
+const axisTicks = computed(() => {
+  const n = chartBuckets.value.length
+  if (!n) return []
+  if (n <= 7) return chartBuckets.value.map((b, i) => ({ i, label: b.label, n }))
+  const step = Math.ceil((n - 1) / 4)
+  const out: Array<{ i: number; label: string; n: number }> = []
+  for (let i = 0; i < n; i += step) out.push({ i, label: chartBuckets.value[i]!.label, n })
+  if (out[out.length - 1]!.i !== n - 1 && n - 1 - out[out.length - 1]!.i >= step / 2) out.push({ i: n - 1, label: chartBuckets.value[n - 1]!.label, n })
+  return out
+})
+function tickStyle(t: { i: number; n: number }) {
+  const left = ((t.i + 0.5) / t.n) * 100
+  const shift = t.i === 0 && t.n > 7 ? '0' : t.i === t.n - 1 && t.n > 7 ? '-100%' : '-50%'
+  return { left: `${left}%`, transform: `translateX(${shift})` }
+}
+
+// ---- formatting ----
 
 function fmtTokens(n: number) {
   if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
@@ -43,78 +299,337 @@ function fmtTokens(n: number) {
 
 /** Costs: 2 decimals normally; sub-cent amounts keep 4 so they don't all read "$0.00". */
 function fmtCost(v: number | undefined) {
-  const n = v || 0
+  const n = Math.abs(v || 0)
+  const sign = (v || 0) < 0 ? '-' : ''
   if (n === 0) return '$0.00'
-  return n < 0.01 ? `$${n.toFixed(4)}` : `$${n.toFixed(2)}`
+  return n < 0.01 ? `${sign}$${n.toFixed(4)}` : `${sign}$${n.toFixed(2)}`
 }
 
-function fmtDate(ts?: number) {
-  return ts ? new Date(ts).toLocaleDateString([], { month: 'short', day: 'numeric' }) : ''
+/** Estimated cost of a bucket; "—" when none of its replies have a price. */
+function fmtEst(b: { est: number; unknown: number; messages: number }) {
+  if (b.unknown && b.unknown === b.messages) return '—'
+  return fmtCost(b.est) + (b.unknown ? '*' : '')
+}
+
+function fmtMetric(b: Bucket) {
+  if (metric.value === 'cost') return fmtCost(b.real)
+  if (metric.value === 'tokens') return fmtTokens(allTokens(b))
+  return String(b.messages)
+}
+function fmtMetricSub(b: Bucket) {
+  if (metric.value === 'cost') return `est. ${fmtEst(b)} · ${b.messages} repl${b.messages === 1 ? 'y' : 'ies'}`
+  if (metric.value === 'tokens') return `${fmtTokens(freshTokens(b))} in+out · ${b.messages} repl${b.messages === 1 ? 'y' : 'ies'}`
+  return `${fmtCost(b.real)} · ${fmtTokens(allTokens(b))} tok`
 }
 
-const maxCost = computed(() => Math.max(...sessions.value.map((s) => s.cost || 0), 0.0001))
+const periodLabel = computed(() => (days.value >= 365 ? 'the last year' : `the last ${days.value} days`))
+const hasRows = computed(() => rows.value.length > 0)
 
 useHead(() => ({ title: `Stats · ${dirName(directory.value)} · opencode web` }))
 </script>
 
 <template>
-  <div class="flex-1 overflow-y-auto pb-[env(safe-area-inset-bottom)]">
-    <div class="max-w-3xl mx-auto px-4 py-6">
-      <h1 class="text-lg font-semibold mb-1">Usage & cost</h1>
-      <p class="text-sm text-muted mb-6">
-        Totals for <span class="font-mono">{{ dirName(directory) }}</span> across all sessions.
+  <div class="flex-1 overflow-y-auto overflow-x-hidden pb-[env(safe-area-inset-bottom)]">
+    <div class="max-w-4xl mx-auto px-4 py-6">
+      <div class="flex items-start gap-2 mb-1">
+        <h1 class="text-lg font-semibold flex-1">Usage & cost</h1>
+        <UButton
+          icon="i-lucide-refresh-cw"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          :loading="loading && !!usage"
+          :disabled="loading"
+          aria-label="Refresh"
+          @click="load"
+        />
+      </div>
+      <p class="text-sm text-muted mb-4">
+        Every assistant reply in <span class="font-mono">{{ dirName(directory) }}</span> over {{ periodLabel }}.
       </p>
 
-      <div v-if="loading" class="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-6">
-        <USkeleton v-for="i in 4" :key="i" class="h-20 w-full" />
-      </div>
-      <div v-else class="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-6">
-        <div class="bg-muted rounded-sm p-3">
-          <div class="text-[10px] uppercase tracking-widest text-dimmed">Total cost</div>
-          <div class="text-xl font-semibold font-mono mt-1">{{ fmtCost(totals.cost) }}</div>
+      <!-- toolbar -->
+      <div class="flex flex-wrap items-center gap-x-4 gap-y-2 mb-4">
+        <div class="flex items-center gap-1">
+          <UButton
+            v-for="p in PERIODS"
+            :key="p.value"
+            :label="p.label"
+            size="xs"
+            color="neutral"
+            :variant="days === p.value ? 'soft' : 'ghost'"
+            :class="days === p.value ? 'text-highlighted' : 'text-muted'"
+            @click="days = p.value"
+          />
         </div>
-        <div class="bg-muted rounded-sm p-3">
-          <div class="text-[10px] uppercase tracking-widest text-dimmed">Sessions</div>
-          <div class="text-xl font-semibold font-mono mt-1">{{ sessions.length }}</div>
+        <USwitch v-model="includeSubagents" size="xs" label="Include subagents" />
+      </div>
+      <div class="flex flex-wrap items-center gap-1 mb-6">
+        <span class="text-[10px] uppercase tracking-widest text-dimmed mr-1">Group by</span>
+        <UButton
+          v-for="g in GROUPS"
+          :key="g.value"
+          :label="g.label"
+          size="xs"
+          color="neutral"
+          :variant="groupBy === g.value ? 'soft' : 'ghost'"
+          :class="groupBy === g.value ? 'text-highlighted' : 'text-muted'"
+          @click="groupBy = g.value"
+        />
+      </div>
+
+      <UAlert
+        v-if="error"
+        class="mb-6"
+        color="error"
+        variant="subtle"
+        icon="i-lucide-circle-alert"
+        title="Couldn't load usage"
+        :description="error"
+        :actions="[{ label: 'Retry', icon: 'i-lucide-rotate-ccw', color: 'error', variant: 'soft', size: 'xs', onClick: load }]"
+      />
+
+      <!-- first load -->
+      <template v-if="loading && !usage">
+        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-6">
+          <USkeleton v-for="i in 6" :key="i" class="h-20 w-full" />
         </div>
-        <div class="bg-muted rounded-sm p-3">
-          <div class="text-[10px] uppercase tracking-widest text-dimmed">Tokens in / out</div>
-          <div class="text-xl font-semibold font-mono mt-1">{{ fmtTokens(totals.input) }} / {{ fmtTokens(totals.output) }}</div>
+        <USkeleton class="h-48 w-full mb-6" />
+        <USkeleton class="h-32 w-full" />
+      </template>
+
+      <template v-else-if="usage">
+        <!-- KPI tiles -->
+        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-2">
+          <div class="bg-muted rounded-sm p-3 min-w-0">
+            <div class="text-[10px] uppercase tracking-widest text-dimmed">Real cost</div>
+            <div class="text-xl font-semibold font-mono mt-1 truncate">{{ fmtCost(totals.real) }}</div>
+            <div class="text-[11px] text-dimmed mt-0.5 truncate">as recorded by opencode</div>
+          </div>
+          <div class="bg-muted rounded-sm p-3 min-w-0">
+            <div class="flex items-center gap-1 text-[10px] uppercase tracking-widest text-dimmed">
+              Estimated
+              <UTooltip text="The same tokens at the model's list price (input, output + reasoning, cache read and write, per 1M tokens): what it would cost without a promotion.">
+                <UIcon name="i-lucide-info" class="size-3" />
+              </UTooltip>
+            </div>
+            <div class="text-xl font-semibold font-mono mt-1 truncate">{{ fmtCost(totals.est) }}</div>
+            <div class="text-[11px] text-dimmed mt-0.5 truncate">
+              {{ totals.unknown ? `${totals.unknown} replies without a price` : 'at list price' }}
+            </div>
+          </div>
+          <div class="bg-muted rounded-sm p-3 min-w-0">
+            <div class="text-[10px] uppercase tracking-widest text-dimmed">
+              {{ savings > 0.00005 ? 'Saved' : savings < -0.00005 ? 'Over list price' : 'Difference' }}
+            </div>
+            <div
+              class="text-xl font-semibold font-mono mt-1 truncate"
+              :class="savings > 0.00005 ? 'text-success' : savings < -0.00005 ? 'text-warning' : ''"
+            >
+              {{ fmtCost(Math.abs(savings)) }}
+            </div>
+            <div class="text-[11px] text-dimmed mt-0.5 truncate">
+              <template v-if="savings > 0.00005 && totals.est > 0">{{ Math.round((savings / totals.est) * 100) }}% below list price</template>
+              <template v-else-if="savings < -0.00005">real cost above the estimate</template>
+              <template v-else>real matches list price</template>
+            </div>
+          </div>
+          <div class="bg-muted rounded-sm p-3 min-w-0">
+            <div class="text-[10px] uppercase tracking-widest text-dimmed">Replies</div>
+            <div class="text-xl font-semibold font-mono mt-1 truncate">{{ totals.messages }}</div>
+            <div class="text-[11px] text-dimmed mt-0.5 truncate">{{ totals.sessions }} session{{ totals.sessions === 1 ? '' : 's' }}</div>
+          </div>
+          <div class="bg-muted rounded-sm p-3 min-w-0">
+            <div class="text-[10px] uppercase tracking-widest text-dimmed">Tokens in / out</div>
+            <div class="text-xl font-semibold font-mono mt-1 truncate">{{ fmtTokens(totals.input) }} / {{ fmtTokens(totals.output) }}</div>
+            <div class="text-[11px] text-dimmed mt-0.5 truncate">out includes reasoning</div>
+          </div>
+          <div class="bg-muted rounded-sm p-3 min-w-0">
+            <div class="text-[10px] uppercase tracking-widest text-dimmed">Cache read</div>
+            <div class="text-xl font-semibold font-mono mt-1 truncate">{{ fmtTokens(totals.cacheRead) }}</div>
+            <div class="text-[11px] text-dimmed mt-0.5 truncate">{{ fmtTokens(totals.cacheWrite) }} written</div>
+          </div>
         </div>
-        <div class="bg-muted rounded-sm p-3">
-          <div class="text-[10px] uppercase tracking-widest text-dimmed">Cache read</div>
-          <div class="text-xl font-semibold font-mono mt-1">{{ fmtTokens(totals.cacheRead) }}</div>
+        <p class="flex gap-1.5 text-xs text-dimmed mb-1">
+          <UIcon name="i-lucide-info" class="size-3.5 shrink-0 mt-0.5" />
+          <span>
+            Real = what opencode recorded (promotions, free tiers and your own pricing included).
+            Estimated = the same tokens at the model's list price — what it would cost without a promotion.
+          </span>
+        </p>
+        <p v-if="unknownModels.length" class="text-xs text-dimmed mb-1 pl-5">
+          No list price for
+          <template v-for="(m, i) in unknownModels" :key="m.model">
+            <span class="font-mono text-muted">{{ m.model }}</span> ({{ m.count }}){{ i < unknownModels.length - 1 ? ', ' : '' }}
+          </template>
+          — left out of the estimate.
+        </p>
+
+        <div v-if="!hasRows" class="bg-muted rounded-sm px-3 py-10 mt-6 text-sm text-dimmed text-center">
+          No assistant replies in {{ periodLabel }}{{ includeSubagents ? '' : ' (subagents hidden)' }}.
         </div>
-      </div>
 
-      <h2 class="text-xs uppercase tracking-widest text-dimmed mb-2">By session</h2>
-      <div class="bg-muted rounded-sm divide-y divide-default">
-        <NuxtLink
-          v-for="s in sessions"
-          :key="s.id"
-          :to="`/p/${route.params.dir}/session/${s.id}`"
-          class="oc-row flex items-center gap-3 px-3 py-2.5 hover:bg-elevated"
-        >
-          <div class="min-w-0 flex-1">
-            <div class="text-sm truncate">{{ s.title || 'Untitled session' }}</div>
-            <div class="mt-1 h-1 rounded-full bg-accented overflow-hidden">
-              <div
-                class="h-full bg-primary/60"
-                :style="{ width: `${Math.max(2, ((s.cost || 0) / maxCost) * 100)}%` }"
+        <template v-else>
+          <!-- chart -->
+          <div class="flex flex-wrap items-center gap-2 mt-6 mb-2">
+            <h2 class="text-xs uppercase tracking-widest text-dimmed flex-1">
+              {{ GROUPS.find((g) => g.value === groupBy)?.label }}
+            </h2>
+            <div class="flex items-center gap-1">
+              <UButton
+                v-for="m in METRICS"
+                :key="m.value"
+                :label="m.label"
+                size="xs"
+                color="neutral"
+                :variant="metric === m.value ? 'soft' : 'ghost'"
+                :class="metric === m.value ? 'text-highlighted' : 'text-muted'"
+                @click="metric = m.value"
               />
             </div>
           </div>
-          <div class="text-right shrink-0">
-            <div class="text-sm font-mono">{{ fmtCost(s.cost) }}</div>
-            <div class="text-[10px] text-dimmed font-mono">
-              {{ fmtTokens((s.tokens?.input || 0) + (s.tokens?.output || 0)) }} tok · {{ fmtDate(s.time?.updated) }}
+
+          <div class="bg-muted rounded-sm p-3 mb-2">
+            <!-- vertical bars over ordered time slots -->
+            <template v-if="isTimeGroup">
+              <div class="text-xs font-mono min-h-5 mb-2 truncate">
+                <template v-if="activeBucket">
+                  <span class="text-highlighted">{{ longLabel(activeBucket) }}</span>
+                  <span class="text-muted">
+                    · {{ fmtCost(activeBucket.real) }} real · est. {{ fmtEst(activeBucket) }}
+                    · {{ fmtTokens(allTokens(activeBucket)) }} tok · {{ activeBucket.messages }} repl{{ activeBucket.messages === 1 ? 'y' : 'ies' }}
+                  </span>
+                </template>
+                <span v-else class="text-dimmed">Hover or tap a bar for details</span>
+              </div>
+              <div
+                class="flex items-end h-40"
+                :class="chartBuckets.length > 60 ? 'gap-0' : chartBuckets.length > 31 ? 'gap-px' : 'gap-0.5 sm:gap-1'"
+                @mouseleave="active = null"
+              >
+                <button
+                  v-for="b in chartBuckets"
+                  :key="b.key"
+                  type="button"
+                  class="relative flex-1 min-w-0 h-full rounded-t-[1px] focus:outline-none"
+                  :class="active === b.key ? 'bg-white/5' : ''"
+                  :aria-label="`${longLabel(b)}: ${fmtMetric(b)}`"
+                  @mouseenter="active = b.key"
+                  @focus="active = b.key"
+                  @click="active = b.key"
+                >
+                  <div class="absolute bottom-0 inset-x-0 bg-primary/20" :style="{ height: `${pct(barValues(b)[1])}%` }" />
+                  <div
+                    class="absolute bottom-0 inset-x-0"
+                    :class="active === b.key ? 'bg-primary' : 'bg-primary/65'"
+                    :style="{ height: `${pct(barValues(b)[0])}%` }"
+                  />
+                </button>
+              </div>
+              <div class="relative h-4 mt-1 text-[10px] text-dimmed font-mono">
+                <span
+                  v-for="t in axisTicks"
+                  :key="t.i"
+                  class="absolute top-0 whitespace-nowrap"
+                  :style="tickStyle(t)"
+                >{{ t.label }}</span>
+              </div>
+            </template>
+
+            <!-- ranked horizontal bars -->
+            <div v-else class="space-y-2.5">
+              <div v-for="b in chartBuckets.slice(0, RANKED_LIMIT)" :key="b.key" class="flex items-center gap-3 min-w-0">
+                <div class="min-w-0 flex-1">
+                  <div class="flex items-baseline gap-1.5 min-w-0">
+                    <NuxtLink v-if="b.to" :to="b.to" class="text-sm truncate hover:underline">{{ b.label }}</NuxtLink>
+                    <span v-else class="text-sm truncate" :class="b.key.startsWith('(') ? 'text-dimmed' : ''">{{ b.label }}</span>
+                    <span v-if="b.sub" class="text-[10px] text-dimmed font-mono shrink-0">{{ b.sub }}</span>
+                  </div>
+                  <div class="relative mt-1 h-1.5 rounded-full bg-accented overflow-hidden">
+                    <div class="absolute inset-y-0 left-0 bg-primary/25" :style="{ width: `${pct(barValues(b)[1])}%` }" />
+                    <div class="absolute inset-y-0 left-0 bg-primary/70" :style="{ width: `${pct(barValues(b)[0])}%` }" />
+                  </div>
+                </div>
+                <div class="text-right shrink-0">
+                  <div class="text-sm font-mono">{{ fmtMetric(b) }}</div>
+                  <div class="text-[10px] text-dimmed font-mono">{{ fmtMetricSub(b) }}</div>
+                </div>
+              </div>
+              <div v-if="chartBuckets.length > RANKED_LIMIT" class="text-xs text-dimmed">
+                +{{ chartBuckets.length - RANKED_LIMIT }} more in the table below
+              </div>
             </div>
           </div>
-        </NuxtLink>
-        <div v-if="!loading && !sessions.length" class="px-3 py-6 text-sm text-dimmed text-center">
-          No sessions yet.
-        </div>
-      </div>
+
+          <!-- legend -->
+          <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-dimmed mb-6">
+            <template v-if="metric === 'cost'">
+              <span class="flex items-center gap-1.5"><span class="size-2.5 rounded-[1px] bg-primary/65" />Real cost</span>
+              <span class="flex items-center gap-1.5"><span class="size-2.5 rounded-[1px] bg-primary/20" />Estimated at list price</span>
+            </template>
+            <template v-else-if="metric === 'tokens'">
+              <span class="flex items-center gap-1.5"><span class="size-2.5 rounded-[1px] bg-primary/65" />Input + output</span>
+              <span class="flex items-center gap-1.5"><span class="size-2.5 rounded-[1px] bg-primary/20" />Incl. cache read/write</span>
+            </template>
+            <span v-else class="flex items-center gap-1.5"><span class="size-2.5 rounded-[1px] bg-primary/65" />Assistant replies</span>
+            <span v-if="groupBy === 'session' && includeSubagents">Subagent replies count toward their parent session.</span>
+          </div>
+
+          <!-- detail table -->
+          <h2 class="text-xs uppercase tracking-widest text-dimmed mb-2">Details</h2>
+          <div class="bg-muted rounded-sm overflow-x-auto">
+            <table class="w-full min-w-[640px] text-xs">
+              <thead>
+                <tr class="text-[10px] uppercase tracking-widest text-dimmed text-right">
+                  <th class="text-left font-normal px-3 py-2">{{ GROUPS.find((g) => g.value === groupBy)?.label }}</th>
+                  <th class="font-normal px-2 py-2">Replies</th>
+                  <th class="font-normal px-2 py-2">In</th>
+                  <th class="font-normal px-2 py-2">Out</th>
+                  <th class="font-normal px-2 py-2">Cache R</th>
+                  <th class="font-normal px-2 py-2">Cache W</th>
+                  <th class="font-normal px-2 py-2">Real</th>
+                  <th class="font-normal px-3 py-2">Est.</th>
+                </tr>
+              </thead>
+              <tbody class="font-mono">
+                <tr v-for="b in tableBuckets" :key="b.key" class="text-right hover:bg-elevated">
+                  <td class="text-left font-sans px-3 py-1.5 max-w-64">
+                    <NuxtLink v-if="b.to" :to="b.to" class="block truncate hover:underline">{{ b.label }}</NuxtLink>
+                    <span v-else class="block truncate">{{ isTimeGroup ? longLabel(b) : b.label }}</span>
+                    <span v-if="b.sub || b.subagent" class="block text-[10px] text-dimmed truncate">
+                      {{ b.sub || `incl. ${b.subagent} subagent repl${b.subagent === 1 ? 'y' : 'ies'}` }}
+                    </span>
+                  </td>
+                  <td class="px-2 py-1.5">{{ b.messages }}</td>
+                  <td class="px-2 py-1.5">{{ fmtTokens(b.input) }}</td>
+                  <td class="px-2 py-1.5">{{ fmtTokens(b.output) }}</td>
+                  <td class="px-2 py-1.5 text-muted">{{ fmtTokens(b.cacheRead) }}</td>
+                  <td class="px-2 py-1.5 text-muted">{{ fmtTokens(b.cacheWrite) }}</td>
+                  <td class="px-2 py-1.5 text-highlighted">{{ fmtCost(b.real) }}</td>
+                  <td class="px-3 py-1.5 text-muted" :title="b.unknown ? `${b.unknown} replies on models without a list price` : undefined">
+                    {{ fmtEst(b) }}
+                  </td>
+                </tr>
+              </tbody>
+              <tfoot>
+                <tr class="text-right font-mono text-highlighted">
+                  <td class="text-left font-sans px-3 py-2 text-[10px] uppercase tracking-widest text-dimmed">Total</td>
+                  <td class="px-2 py-2">{{ totals.messages }}</td>
+                  <td class="px-2 py-2">{{ fmtTokens(totals.input) }}</td>
+                  <td class="px-2 py-2">{{ fmtTokens(totals.output) }}</td>
+                  <td class="px-2 py-2">{{ fmtTokens(totals.cacheRead) }}</td>
+                  <td class="px-2 py-2">{{ fmtTokens(totals.cacheWrite) }}</td>
+                  <td class="px-2 py-2">{{ fmtCost(totals.real) }}</td>
+                  <td class="px-3 py-2">{{ fmtEst(totals) }}</td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+          <p v-if="tableBuckets.some((b) => b.unknown)" class="text-[11px] text-dimmed mt-1.5">
+            * part of these replies used a model without a list price.
+          </p>
+        </template>
+      </template>
     </div>
   </div>
 </template>
diff --git a/app/plugins/longpress-tip.client.ts b/app/plugins/longpress-tip.client.ts
new file mode 100644
index 0000000..a250588
--- /dev/null
+++ b/app/plugins/longpress-tip.client.ts
@@ -0,0 +1,94 @@
+// Touch screens have no hover, so icon-only buttons never show their tooltip.
+// A long press (~0.45 s) on any button or link shows its label in a small
+// bubble instead (data-tip, else aria-label, else title) and swallows the
+// tap that would follow, so a long press explains without acting.
+
+const DELAY = 450
+const MOVE_TOLERANCE = 10
+
+export default defineNuxtPlugin(() => {
+  let timer: ReturnType<typeof setTimeout> | undefined
+  let hideTimer: ReturnType<typeof setTimeout> | undefined
+  let start: { x: number; y: number } | null = null
+  let shownFor: Element | null = null
+  let bubble: HTMLDivElement | null = null
+
+  function labelOf(el: Element) {
+    const text = el.getAttribute('data-tip') || el.getAttribute('aria-label') || el.getAttribute('title') || ''
+    return text.trim()
+  }
+
+  function hide() {
+    clearTimeout(hideTimer)
+    bubble?.remove()
+    bubble = null
+  }
+
+  function show(el: Element, text: string) {
+    hide()
+    const rect = el.getBoundingClientRect()
+    bubble = document.createElement('div')
+    bubble.className = 'oc-touch-tip'
+    bubble.setAttribute('role', 'tooltip')
+    bubble.textContent = text
+    document.body.appendChild(bubble)
+    const width = bubble.offsetWidth
+    const height = bubble.offsetHeight
+    const left = Math.min(window.innerWidth - width - 8, Math.max(8, rect.left + rect.width / 2 - width / 2))
+    // above the finger's target when there is room, else below it
+    const top = rect.top - height - 10 > 8 ? rect.top - height - 10 : rect.bottom + 10
+    bubble.style.left = `${left}px`
+    bubble.style.top = `${top}px`
+    navigator.vibrate?.(8)
+  }
+
+  function cancel() {
+    clearTimeout(timer)
+    timer = undefined
+    start = null
+  }
+
+  document.addEventListener('pointerdown', (e) => {
+    if (e.pointerType !== 'touch') return
+    hide()
+    shownFor = null
+    const el = (e.target as Element | null)?.closest('button, a, [role="button"], [role="tab"], [data-tip]')
+    if (!el) return
+    const text = labelOf(el)
+    if (!text) return
+    start = { x: e.clientX, y: e.clientY }
+    timer = setTimeout(() => {
+      timer = undefined
+      shownFor = el
+      show(el, text)
+    }, DELAY)
+  }, { capture: true, passive: true })
+
+  document.addEventListener('pointermove', (e) => {
+    if (!start || e.pointerType !== 'touch') return
+    if (Math.abs(e.clientX - start.x) > MOVE_TOLERANCE || Math.abs(e.clientY - start.y) > MOVE_TOLERANCE) cancel()
+  }, { capture: true, passive: true })
+
+  const release = () => {
+    cancel()
+    if (bubble) hideTimer = setTimeout(hide, 1400)
+  }
+  document.addEventListener('pointerup', release, { capture: true, passive: true })
+  document.addEventListener('pointercancel', release, { capture: true, passive: true })
+  window.addEventListener('scroll', () => { cancel(); hide() }, { capture: true, passive: true })
+
+  // the tap that ends a long press must not activate the button
+  document.addEventListener('click', (e) => {
+    if (!shownFor) return
+    const target = e.target as Node | null
+    if (target && shownFor.contains(target)) {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+    shownFor = null
+  }, { capture: true })
+  // nor open the browser's link/context menu
+  document.addEventListener('contextmenu', (e) => {
+    if (shownFor || timer) e.preventDefault()
+  }, { capture: true })
+})
diff --git a/app/utils/recentChats.ts b/app/utils/recentChats.ts
new file mode 100644
index 0000000..aac046a
--- /dev/null
+++ b/app/utils/recentChats.ts
@@ -0,0 +1,102 @@
+// Which chats the projects panel lists under each project: starred ones, then
+// "recent" ones (used within a window, unread ones a bit longer, running ones
+// always), capped and expandable. Pure so it can be unit-tested.
+import type { SessionInfo } from '#shared/types/opencode'
+
+export interface RecentChatsSettings {
+  /** chats used within this many hours count as recent */
+  recentHours: number
+  /** at most this many recent chats per project (collapsed) */
+  maxRecent: number
+  /** unread chats stay listed this many days */
+  unreadDays: number
+  /** "Show more" lists up to this many chats */
+  expandMax: number
+  /** starred chats shown first (0 = none) */
+  starredMax: number
+  /** running chats are always listed */
+  showBusy: boolean
+  /** subagent sessions too (normally only top-level conversations) */
+  includeSubagents: boolean
+  /** projects whose chats are loaded (most recent first) */
+  maxProjects: number
+  /** time of the last activity next to each chat */
+  showTime: boolean
+}
+
+export const RECENT_CHATS_DEFAULTS: RecentChatsSettings = {
+  recentHours: 24,
+  maxRecent: 5,
+  unreadDays: 3,
+  expandMax: 20,
+  starredMax: 3,
+  showBusy: true,
+  includeSubagents: false,
+  maxProjects: 8,
+  showTime: true
+}
+
+export interface ChatPick {
+  session: SessionInfo
+  starred: boolean
+  unread: boolean
+  busy: boolean
+}
+
+export interface ChatPicks {
+  starred: ChatPick[]
+  recent: ChatPick[]
+  /** chats "Show more" would add (up to expandMax) */
+  more: ChatPick[]
+}
+
+const updatedAt = (s: SessionInfo) => s.time?.updated || s.time?.created || 0
+
+export function pickRecentChats(
+  sessions: SessionInfo[],
+  opts: {
+    settings: RecentChatsSettings
+    favorites: string[]
+    isUnread: (s: SessionInfo) => boolean
+    busy: Record<string, boolean>
+    now?: number
+  }
+): ChatPicks {
+  const { settings, favorites, isUnread, busy } = opts
+  const now = opts.now ?? Date.now()
+  const pick = (s: SessionInfo): ChatPick => ({ session: s, starred: favorites.includes(s.id), unread: isUnread(s), busy: Boolean(busy[s.id]) })
+  const all = sessions
+    .filter((s) => settings.includeSubagents || !s.parentID)
+    .sort((a, b) => updatedAt(b) - updatedAt(a))
+    .map(pick)
+
+  const starred = all.filter((c) => c.starred).slice(0, Math.max(0, settings.starredMax))
+  const taken = new Set(starred.map((c) => c.session.id))
+  const recentCut = now - settings.recentHours * 3600_000
+  const unreadCut = now - settings.unreadDays * 86400_000
+  const candidates = all.filter((c) => !taken.has(c.session.id))
+  const qualifies = (c: ChatPick) =>
+    (settings.showBusy && c.busy) ||
+    updatedAt(c.session) >= recentCut ||
+    (c.unread && updatedAt(c.session) >= unreadCut)
+  // running chats first, then unread, then by last use; capped
+  const recent = candidates
+    .filter(qualifies)
+    .sort((a, b) => Number(b.busy) - Number(a.busy) || Number(b.unread) - Number(a.unread) || updatedAt(b.session) - updatedAt(a.session))
+    .slice(0, Math.max(0, settings.maxRecent))
+  recent.forEach((c) => taken.add(c.session.id))
+  const room = Math.max(0, settings.expandMax - starred.length - recent.length)
+  const more = candidates.filter((c) => !taken.has(c.session.id)).slice(0, room)
+  return { starred, recent, more }
+}
+
+/** "5m", "3h", "2d", or a date for older ones. */
+export function shortAge(ts: number, now = Date.now()) {
+  if (!ts) return ''
+  const diff = Math.max(0, now - ts)
+  if (diff < 60_000) return 'now'
+  if (diff < 3600_000) return `${Math.round(diff / 60_000)}m`
+  if (diff < 86400_000) return `${Math.round(diff / 3600_000)}h`
+  if (diff < 7 * 86400_000) return `${Math.round(diff / 86400_000)}d`
+  return new Date(ts).toLocaleDateString([], { month: 'short', day: 'numeric' })
+}
diff --git a/demo/backend.ts b/demo/backend.ts
index 824af98..03f5957 100644
--- a/demo/backend.ts
+++ b/demo/backend.ts
@@ -356,11 +356,39 @@ const AGENTS = [
   { name: 'explore', description: 'Fast read-only codebase exploration', mode: 'subagent', builtIn: true }
 ]
 
+// like opencode: config entries override the built-ins field by field, disabled ones are left out
 function agentList(directory?: string) {
-  const extra = Object.entries(mergedConfig(directory).agent || {})
-    .filter(([, a]: [string, Json]) => !a?.disable)
-    .map(([name, a]: [string, Json]) => ({ name, description: a.description, mode: a.mode || 'all' }))
-  return [...AGENTS.filter((a) => !extra.some((e) => e.name === a.name)), ...extra]
+  const config: Record<string, Json> = mergedConfig(directory).agent || {}
+  const names = [...new Set([...AGENTS.map((a) => a.name), ...Object.keys(config)])]
+  return names.filter((name) => !config[name]?.disable).map((name) => {
+    const a: Json = config[name] || {}
+    const [providerID, ...modelID] = typeof a.model === 'string' ? a.model.split('/') : []
+    return {
+      ...(AGENTS.find((b) => b.name === name) || { name, mode: 'all' }),
+      ...(a.description ? { description: a.description } : {}),
+      ...(a.mode ? { mode: a.mode } : {}),
+      ...(modelID.length ? { model: { providerID, modelID: modelID.join('/') } } : {}),
+      ...(typeof a.prompt === 'string' ? { prompt: a.prompt } : {}),
+      ...(typeof a.temperature === 'number' ? { temperature: a.temperature } : {}),
+      ...(a.tools ? { tools: a.tools } : {})
+    }
+  })
+}
+
+/** Stand-in for /api/v1/ai-text: canned agent descriptions and prompts. */
+function demoAiText(body: Json) {
+  const name = /Name: (\S+)/.exec(String(body?.prompt || ''))?.[1] || 'this agent'
+  if (/system prompt/i.test(String(body?.system || ''))) {
+    return `You are @${name}, a focused assistant in this project.
+
+- Read the relevant files before changing anything.
+- Keep changes small and explain them briefly.
+- When the task is done, report what you did and anything left open.
+
+(Written by the demo's scripted AI.)`
+  }
+  if (/description/i.test(String(body?.system || ''))) return `Use @${name} for focused tasks in this project (written by the demo's scripted AI).`
+  return "A short text written by the demo's scripted AI."
 }
 
 const PROVIDERS = {
@@ -503,7 +531,57 @@ route('GET', 'lsp', () => [])
 route('GET', 'formatter', () => [])
 
 // web app API (/api/v1/*)
+// ---- skills (a library kept in memory for the session) ----
+const demoLibrary: Record<string, { content: string; version: number }> = {}
+const RELEASE_NOTES = `---
+name: release-notes
+description: Use when the user asks for release notes or a changelog entry: summarizes the git log since the last tag, grouped by feat/fix.
+---
+
+# Release notes
+
+1. Find the last tag with \`git describe --tags --abbrev=0\`.
+2. List commits since then: \`git log <tag>..HEAD --oneline\`.
+3. Group them by type (feat, fix, docs) and write one line per change for users, not developers.
+`
+function demoSkillChecks(content: string) {
+  const checks: Array<{ level: string; message: string }> = []
+  if (!/^---\n[\s\S]*?description:/.test(content)) checks.push({ level: 'error', message: 'description is missing: opencode never shows the skill to the model without one.' })
+  if (content.split(/\s+/).length < 40) checks.push({ level: 'warning', message: 'The body is almost empty: add the instructions, steps and examples the model should follow.' })
+  return checks
+}
+function demoSkills() {
+  const desc = (c: string) => /description:\s*(.*)/.exec(c)?.[1] || ''
+  const list = [
+    { name: 'release-notes', description: desc(RELEASE_NOTES), location: '/home/demo/.config/opencode/skills/release-notes/SKILL.md', source: 'global', content: RELEASE_NOTES, permission: 'allow', checks: demoSkillChecks(RELEASE_NOTES) }
+  ]
+  for (const [name, own] of Object.entries(demoLibrary)) {
+    const entry = { name, description: desc(own.content), source: 'library', content: own.content, permission: 'allow', library: { version: own.version, updatedAt: Date.now(), loaded: true }, checks: demoSkillChecks(own.content) }
+    const at = list.findIndex((x) => x.name === name)
+    if (at >= 0) list.splice(at, 1, entry as never)
+    else list.push(entry as never)
+  }
+  return list
+}
+const demoCatalog = () => ({ rev: Object.keys(demoLibrary).length, count: Object.keys(demoLibrary).length, url: 'http://web:3000/skills/r1/', registered: Object.keys(demoLibrary).length ? 'http://web:3000/skills/r1/' : null, upToDate: true, supported: true })
+
 const v1: Array<[string, string, Handler]> = [
+  ['GET', 'skills', () => ({ skills: demoSkills(), available: true, permissions: null, catalog: demoCatalog() })],
+  ['PUT', 'skills/library', ({ body }) => {
+    const name = String(body?.name || '')
+    demoLibrary[name] = { content: String(body?.content || ''), version: (demoLibrary[name]?.version || 0) + 1 }
+    return { skill: { name, version: demoLibrary[name].version }, catalog: demoCatalog() }
+  }],
+  ['DELETE', 'skills/library', ({ query }) => { delete demoLibrary[query.get('name') || '']; return { deleted: query.get('name'), catalog: demoCatalog() } }],
+  ['POST', 'skills/catalog', () => demoCatalog()],
+  ['POST', 'skills/check', ({ body }) => ({ checks: demoSkillChecks(String(body?.content || '')) })],
+  ['POST', 'skills/ai', ({ body }) => new Promise((resolve) => setTimeout(() => {
+    const name = String(body?.name || 'new-skill')
+    const content = body?.mode === 'create'
+      ? `---\nname: ${name}\ndescription: Use when ${String(body?.brief || 'the user asks for it').slice(0, 160)}\n---\n\n# ${name}\n\n## Steps\n\n1. Understand the request and the files involved.\n2. Follow the project conventions.\n3. Report what changed.\n`
+      : String(body?.content || '').replace(/^# (.*)$/m, '# $1\n\n> Improved by the demo AI: clearer steps, sharper description.')
+    resolve({ content, checks: demoSkillChecks(content) })
+  }, 900))],
   ['GET', 'capabilities', () => ({
     protocol: 'legacy', version: VERSION, mcp: true, config: true, sessionRename: true, sessionDelete: true, fork: true, share: true,
     diff: true, shell: true, compact: true, revert: true, questions: true, permissions: true, todos: true, cost: true
@@ -565,6 +643,7 @@ const v1: Array<[string, string, Handler]> = [
     save()
     return { scope: body.scope === 'project' && body.directory ? 'project' : 'global' }
   }],
+  ['POST', 'ai-text', ({ body }) => new Promise((resolve) => setTimeout(() => resolve({ text: demoAiText(body) }), 900))],
   ['GET', 'mcp-presets', ({ query }) => state.presets[query.get('key') || ''] || []],
   ['PUT', 'mcp-presets', ({ query, body }) => { state.presets[query.get('key') || ''] = body; save(); return true }],
   ['GET', 'mcp-nest', () => nestPlan()],
@@ -634,6 +713,32 @@ const v1: Array<[string, string, Handler]> = [
       models: { count: 2, default: 'demo/demo-model' }
     }
   }],
+  // same shape as server/api/v1/usage.get.ts: one row per assistant reply + list prices
+  ['GET', 'usage', ({ query }) => {
+    const dir = dirOf(query)
+    const days = Math.min(365, Math.max(1, Math.round(Number(query.get('days')) || 30)))
+    const since = Date.now() - days * 86400_000
+    const titles = new Map(state.sessions.map((s) => [s.id, s.title]))
+    const rows = state.sessions.filter((s) => s.directory === dir).flatMap((s) => messagesOf(s.id)
+      .filter((m) => m.info.role === 'assistant' && (m.info.time?.created || 0) >= since)
+      .map((m) => {
+        const t = m.info.tokens || {}
+        return {
+          sessionID: s.id, parentID: s.parentID, title: s.title, parentTitle: s.parentID ? titles.get(s.parentID) : undefined,
+          time: m.info.time.created, completed: m.info.time?.completed,
+          providerID: m.info.providerID || 'demo', modelID: m.info.modelID || 'demo-model', agent: m.info.agent || m.info.mode,
+          cost: m.info.cost || 0,
+          tokens: { input: t.input || 0, output: t.output || 0, reasoning: t.reasoning || 0, cacheRead: t.cache?.read || 0, cacheWrite: t.cache?.write || 0 }
+        }
+      }))
+      .sort((a, b) => a.time - b.time)
+    // list prices above what the demo "charges", so the page shows a promotion saving
+    const prices = {
+      'demo/demo-model': { input: 3, output: 15, cacheRead: 0.3, cacheWrite: 3.75 },
+      'demo/demo-fast': { input: 0.8, output: 4, cacheRead: 0.08, cacheWrite: 1 }
+    }
+    return { generatedAt: Date.now(), days, rows, prices }
+  }],
   ['GET', 'status', ({ query }) => ({
     opencode: { protocol: 'legacy', version: VERSION, reachable: true, hybrid: false },
     busy: [...busy.keys()].map((sid) => ({ directory: sessionOf(sid)?.directory, sessionID: sid, status: 'busy', title: sessionOf(sid)?.title }))
diff --git a/docs/mcp.md b/docs/mcp.md
index 6b5d149..8b1d7d1 100644
--- a/docs/mcp.md
+++ b/docs/mcp.md
@@ -117,16 +117,19 @@ Home Assistant's *MCP Server* integration answers unauthenticated requests with
 
 ## Agent control
 
-The web app is itself an MCP server (`POST /mcp`, see the README for the tool list). The **Agent control** card on the MCP page registers it in opencode's **global** config, so the agent in every new chat can manage opencode:
+The web app is itself an MCP server (`POST /mcp`, see the README for the tool list). It is registered in opencode's **global** config **by default** (once, as `opencode-web`), so it shows up in every chat's MCP list and the agent can manage opencode, and the chat itself:
 
-- list, **test**, add, reconnect and switch MCP servers (with the same plain-language fixes as the UI)
-- **reload opencode's config** for one project or all of them, the API's equivalent of restarting `opencode serve`
+- list, **test**, add, reconnect and switch MCP servers (with the same plain-language fixes as the UI); switching a server on or off is **applied to the running opencode at once**, no reload needed
+- **reload opencode's config** for one project or all of them, the API's equivalent of restarting `opencode serve`. The chats that were busy when the reload was asked for, **the asking chat included**, get a "continue" message afterwards, so the work carries on by itself with the new config (`resume: "none"` skips that; a chat is not resumed twice within three minutes)
 - see which sessions are busy, **read other chats**, prompt them (`wait: false` to dispatch work), abort them
+- **sub-chats**: `run_subagent` runs any agent (a subagent like `@mcp-home-assistant` or `explore`, or a primary one) on a task in a child session listed under the calling chat, so agents without the `task` tool can delegate too; `current_session` tells an agent which chat it runs in
 - read the **task lists** (todos) of busy and recent sessions
 - create, run and change **scheduled prompts**
 - version, models, agents, commands, skills, git/LSP status and the (redacted) config
 
-The URL must be reachable **from the opencode host**: `http://web:3000/mcp` in the bundled compose file (`NUXT_SELF_URL`), editable in the card. When `NUXT_API_TOKEN` is set, the token is added as a header automatically.
+The URL must be reachable **from the opencode host**: `http://web:3000/mcp` in the bundled compose file (`NUXT_SELF_URL`), editable in the card. When `NUXT_API_TOKEN` is set, the token is added as a header automatically. The automatic registration happens once, at startup (with `NUXT_SELF_URL`) or on the first page load; switching it off in the card is remembered, and `NUXT_AGENT_CONTROL=off` never registers it.
+
+In the chat, the same things are a slash command away: `/mcp enable|disable <server>` (applied at once) and `/reload [all] [now] [stay]` (reloads, then continues the chat unless `stay`).
 
 Safety:
 
@@ -142,12 +145,32 @@ With many MCP servers, every tool description sits in the agent's context on eve
 
 - every server of the **global** config gets a specialist subagent `@mcp-<server>` that only has that server's tools (`tools: { "*": false, "<server>_*": true }`)
 - a primary agent `@orchestrator` gets **none** of those tools; its prompt lists every specialist with a summary of what to send it, and it delegates through the subagent (`task`) tool
-- the summary of each specialist is generated from its tools; edit it in the card to steer the orchestrator (it is also the subagent's description opencode shows to the model). Servers can be left out, and the orchestrator can get extra instructions
+- the summary of each specialist is generated from its tools; edit it in the card to steer the orchestrator (it is also the subagent's description opencode shows to the model), or let **a model of your choice write it** (*Write with AI* per server, *Write all summaries*). Servers can be left out, and the orchestrator can get extra instructions
+- **specialists can call each other** (on by default): each one gets the `task` tool and the list of the other specialists, so a job that spans two servers is handed on as a sub-chat instead of failing
 
 Pick `@orchestrator` in the chat's agent selector to use it. The agents are written to the global opencode config and opencode reloads once no session is busy. The nest stays in sync on its own: adding, removing or switching off a server (or a change in its tools) regenerates it within a few minutes. Turning it off disables the agents (`disable: true`; the config API cannot delete keys). On opencode 2.x, nested servers get `codemode: false` so their tools are offered directly instead of through the `execute` code tool.
 
 The agent can manage it too: `mcp_subagents` and `configure_mcp_subagents` in agent control.
 
+## Agents
+
+The **Agents** page (`/p/<project>/agents`) lists every primary agent and subagent, with where it is defined (project config, global config, built-in), its model, how many MCP servers it may use and whether it can delegate (`task`). The editor sets the description, mode, model, temperature and prompt (the ✨ buttons draft them with a model of your choice), the built-in tools, and **per-agent MCP access**: each server is *inherit*, *allow* (`"<server>_*": true` in the agent's `tools`) or *block* (`false`). Only changed fields are written, to the project or global config; built-in agents keep their defaults otherwise.
+
+The config API merges and cannot delete keys: "deleting" an agent writes `disable: true` (it can be enabled again), and a rule set back to *inherit* is saved as `true`. Agents change after opencode reloads its config; the page keeps a reload reminder until then. The `orchestrator` and `mcp-*` agents of Subagent per MCP are shown read-only: change them on the MCP page.
+
+## Skills
+
+The **Skills** page (`/p/<project>/skills`) shows every skill opencode can load in the project: built-in, global (`~/.config/opencode/skills`, `~/.claude/skills`, `~/.agents/skills`), project (`.opencode/skills`, `.claude/skills`, `.agents/skills`), downloaded from skill URLs, and the web app's own **skill library**. For each one:
+
+- **Overview**: the description (always in the agent's context: it decides *when* the skill is used), the other frontmatter fields, and the instructions rendered, with their size in words and tokens
+- **Checks**: opencode's rules (frontmatter, lowercase name matching its folder, a description, or the skill is never shown) plus advice that makes skills trigger well (say when to use it, third person, real instructions, headings, not too long)
+- **auto / ask / off**: `permission.skill` in the project or global config
+- **Improve with AI**: a model of your choice rewrites it (optionally following your brief); the proposal is shown first
+
+**The library.** opencode and the web app usually run in different containers, so skills written here are not put into opencode's folders: the app keeps them in its data volume and serves them as an HTTP skill catalog (`<NUXT_SELF_URL>/skills/r<revision>/index.json`, files at `…/<name>/<file>`), registered in the global config (`skills.urls` on 1.x, the `skills` array on 2.x). Every change bumps the revision in the URL and the skill's `version`, so opencode downloads the new copy on the next reload. Library skills are read last and win over a same-name skill from elsewhere: **Edit a copy** changes any skill, even a built-in one, without touching its file. With `NUXT_API_TOKEN` set, the catalog path carries a secret derived from the token instead (opencode sends no credentials).
+
+New skills start from a template or are drafted by a model from a short brief. The chat's `/skills` lists them. Through the API (`/api/v1/skills`, `/api/v1/skills/library`, `/api/v1/skills/ai`, `/api/v1/skills/check`) and agent control (`list_skills`, `get_skill`, `save_skill`, `delete_skill`, `set_skill_permission`, `improve_skill`), the agent can do the same: read a skill, improve it and save it, then `reload_opencode`. Which agents may load skills at all is the `skill` tool on the Agents page.
+
 ## Scheduled prompts
 
 The **Schedules** tile in the project sidebar manages prompts that the web app sends on a timetable: every N minutes, hourly, daily, on weekdays, weekly on chosen days, or any 5-field cron expression (`minute hour day month weekday`, plus `@hourly`, `@daily`, `@weekly`, `@monthly`).
@@ -188,7 +211,15 @@ opencode keeps only the text content of an MCP tool result: embedded `ui://` res
 2. **MCP Apps tools** that are not read-only only get their template read (`resources/read`). Nothing is executed; the app receives the original text output.
 3. **Anything else that looks like a UI tool** shows a **Render UI (runs the tool again)** button instead of re-running it silently.
 
-Results are cached for five minutes, so reloading a session doesn't repeat calls. If you write MCP servers with UIs, mark pure tools with `readOnlyHint` so they render without a click.
+Results are cached for five minutes, so reloading a session doesn't repeat calls. If you write MCP servers with UIs, mark pure tools with `readOnlyHint` so they render without a click. When a re-run brings back no app at all, the tool says so instead of doing nothing.
+
+### Structured data without an app
+
+Some servers return JSON meant for their own front-end components instead of an HTML or `ui://` app, e.g. `{ "__componentType": "reservation-details", "message": "…", "data": { … } }`. The chat renders such results (and JSON from tools whose name marks them as UI tools) as cards and tables straight from the text opencode kept: labelled fields, sub-sections for nested objects, tables for lists of records, status badges. Nothing is run again.
+
+### Width
+
+The chat header's width menu sets the conversation column to *comfortable*, *wide* or *full width* (remembered in a cookie). With *Apps & tables use all the width* (on by default) MCP apps and data views grow beyond a narrower column into the free space; each app also has *Fit to the screen height*.
 
 ### Security of rendered apps
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 27a2a61..a8fae0c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -64,6 +64,9 @@ export default defineNuxtConfig(withDemo({
     // register the control MCP server (`<selfUrl>/mcp`) with opencode.
     // Empty: the origin of NUXT_PUBLIC_DEMO_MCP_URL, else the request's own
     selfUrl: '',
+    // agent control (the /mcp control server in opencode's global config) is
+    // registered once by default (NUXT_AGENT_CONTROL): 'auto' or 'off'
+    agentControl: 'auto',
     public: {
       // URL at which *opencode* reaches this app's demo MCP server, used when
       // adding it from the MCP page (NUXT_PUBLIC_DEMO_MCP_URL). Empty: the
diff --git a/playwright.compat.config.ts b/playwright.compat.config.ts
index 47934b2..8331b0b 100644
--- a/playwright.compat.config.ts
+++ b/playwright.compat.config.ts
@@ -38,6 +38,7 @@ export default defineConfig({
         NITRO_PORT: String(APP_PORT),
         NUXT_OPENCODE_URL: `http://127.0.0.1:${OPENCODE_PORT}`,
         NUXT_OPENCODE_PASSWORD: PASSWORD,
+        NUXT_AGENT_CONTROL: 'off',
         NUXT_OPENCODE_PROTOCOL: process.env.COMPAT_PROTOCOL || 'auto',
         // agent control: opencode reaches this app's MCP server here
         NUXT_SELF_URL: `http://127.0.0.1:${APP_PORT}`
diff --git a/playwright.config.ts b/playwright.config.ts
index 87232f6..6c2dffa 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -27,7 +27,9 @@ export default defineConfig({
       env: {
         NITRO_PORT: String(APP_PORT),
         NUXT_OPENCODE_URL: `http://127.0.0.1:${MOCK_PORT}`,
-        NUXT_OPENCODE_PASSWORD: ''
+        NUXT_OPENCODE_PASSWORD: '',
+        // tests register agent control themselves
+        NUXT_AGENT_CONTROL: 'off'
       }
     }
   ]
diff --git a/server/api/v1/ai-text.post.ts b/server/api/v1/ai-text.post.ts
new file mode 100644
index 0000000..4aeb7f6
--- /dev/null
+++ b/server/api/v1/ai-text.post.ts
@@ -0,0 +1,21 @@
+// Generate a short text with one of opencode's models (see utils/ai.ts).
+import type { AiTextRequest } from '../../utils/ai'
+export default defineEventHandler(async (event) => {
+  requireApiToken(event)
+  assertBodySize(event, 256 * 1024)
+  const body = await readBody<Partial<AiTextRequest>>(event)
+  if (!body?.prompt || typeof body.prompt !== 'string') {
+    throw createError({ statusCode: 400, message: 'prompt is required' })
+  }
+  try {
+    const text = await aiText({
+      prompt: body.prompt,
+      system: typeof body.system === 'string' ? body.system : undefined,
+      model: typeof body.model === 'string' ? body.model : undefined,
+      directory: typeof body.directory === 'string' ? body.directory : undefined
+    })
+    return { text }
+  } catch (error) {
+    throw createError({ statusCode: 502, message: error instanceof Error ? error.message : String(error) })
+  }
+})
diff --git a/server/api/v1/capabilities.get.ts b/server/api/v1/capabilities.get.ts
index 3a2492e..750877c 100644
--- a/server/api/v1/capabilities.get.ts
+++ b/server/api/v1/capabilities.get.ts
@@ -1,5 +1,7 @@
 // What the connected opencode server supports: the UI hides the rest.
 export default defineEventHandler(async (event) => {
   requireApiToken(event)
+  // every page load asks: a good moment to register agent control once
+  ensureControlMcp(event)
   return getCapabilities()
 })
diff --git a/server/api/v1/control-mcp.get.ts b/server/api/v1/control-mcp.get.ts
index 8d816c6..860ee18 100644
--- a/server/api/v1/control-mcp.get.ts
+++ b/server/api/v1/control-mcp.get.ts
@@ -1,5 +1,6 @@
 // Is this app's control MCP server registered with opencode, and at which URL?
 export default defineEventHandler(async (event) => {
   requireApiToken(event)
+  await ensureControlMcp(event)
   return controlMcpState(event)
 })
diff --git a/server/api/v1/control-mcp.post.ts b/server/api/v1/control-mcp.post.ts
index c84b8dd..008df7b 100644
--- a/server/api/v1/control-mcp.post.ts
+++ b/server/api/v1/control-mcp.post.ts
@@ -8,16 +8,7 @@ export default defineEventHandler(async (event) => {
   if (!/^https?:\/\//.test(url)) {
     throw createError({ statusCode: 400, message: 'Set the URL at which opencode reaches this app (NUXT_SELF_URL), e.g. http://web:3000/mcp' })
   }
-  const result = await saveMcpServer({
-    name: CONTROL_MCP_NAME,
-    scope: 'global',
-    config: { ...await controlMcpConfig(url), enabled: body?.enabled !== false }
-  })
-  await opencodeFetch('/global/config', {
-    method: 'PATCH',
-    body: { permission: Object.fromEntries(CONTROL_ASK_TOOLS.map((tool) => [`${CONTROL_MCP_NAME}_${tool}`, 'ask'])) },
-    timeoutMs: 30000
-  }).catch(() => { /* older servers without per-tool permissions */ })
-  await forgetMcpTools()
-  return result
+  // a manual choice ends the "on by default" registration for good
+  await useStorage('data').setItem('control-mcp-auto.json', { done: true, at: Date.now() })
+  return installControlMcp(url, body?.enabled !== false)
 })
diff --git a/server/api/v1/mcp-apply.post.ts b/server/api/v1/mcp-apply.post.ts
new file mode 100644
index 0000000..000321a
--- /dev/null
+++ b/server/api/v1/mcp-apply.post.ts
@@ -0,0 +1,10 @@
+// Apply one MCP server's config to the running opencode now (connect or
+// disconnect it), so switching a server on or off needs no reload.
+import { mcpErrorHint } from '#shared/utils/mcp-hints'
+export default defineEventHandler(async (event) => {
+  requireApiToken(event)
+  const body = await readBody<{ name?: string; directory?: string; enabled?: boolean }>(event)
+  if (!body?.name) throw createError({ statusCode: 400, message: 'name is required' })
+  const status = await applyMcpLive(body.name, body.directory, typeof body.enabled === 'boolean' ? body.enabled : undefined)
+  return { name: body.name, status, hint: mcpErrorHint(status?.error, status?.status) }
+})
diff --git a/server/api/v1/mcp-nest-summary.post.ts b/server/api/v1/mcp-nest-summary.post.ts
new file mode 100644
index 0000000..467da5d
--- /dev/null
+++ b/server/api/v1/mcp-nest-summary.post.ts
@@ -0,0 +1,18 @@
+// Write a specialist's summary with an AI model (MCP page -> Subagent per MCP).
+import { loopbackOrigin } from '../../utils/mcp-client'
+
+export default defineEventHandler(async (event) => {
+  requireApiToken(event)
+  const body = await readBody<{ server?: string; model?: string; directory?: string }>(event)
+  if (!body?.server) throw createError({ statusCode: 400, message: 'server is required' })
+  try {
+    const summary = await aiSummary(body.server, {
+      model: typeof body.model === 'string' ? body.model : undefined,
+      directory: typeof body.directory === 'string' ? body.directory : undefined,
+      selfOrigin: loopbackOrigin(event.node.req.socket) ?? getRequestURL(event).origin
+    })
+    return { server: body.server, summary }
+  } catch (error) {
+    throw createError({ statusCode: 502, message: error instanceof Error ? error.message : String(error) })
+  }
+})
diff --git a/server/api/v1/mcp-nest.put.ts b/server/api/v1/mcp-nest.put.ts
index b9de069..e517195 100644
--- a/server/api/v1/mcp-nest.put.ts
+++ b/server/api/v1/mcp-nest.put.ts
@@ -13,6 +13,7 @@ export default defineEventHandler(async (event) => {
   if (Array.isArray(body?.exclude)) patch.exclude = body.exclude.map(String)
   if (body?.summaries && typeof body.summaries === 'object') patch.summaries = body.summaries
   if (typeof body?.instructions === 'string') patch.instructions = body.instructions.slice(0, 4000)
+  if (typeof body?.delegate === 'boolean') patch.delegate = body.delegate
   await saveNestSettings(patch)
   const selfOrigin = loopbackOrigin(event.node.req.socket) ?? getRequestURL(event).origin
   const result = await syncNest(selfOrigin, { force: true })
diff --git a/server/api/v1/openapi.json.get.ts b/server/api/v1/openapi.json.get.ts
index bf868af..2e9ac27 100644
--- a/server/api/v1/openapi.json.get.ts
+++ b/server/api/v1/openapi.json.get.ts
@@ -145,7 +145,9 @@ export default defineEventHandler(() => ({
                 properties: {
                   scope: { type: 'string', enum: ['project', 'all'] },
                   directory: { type: 'string' },
-                  when: { type: 'string', enum: ['idle', 'now'] }
+                  when: { type: 'string', enum: ['idle', 'now'] },
+                  resume: { type: 'array', items: { type: 'string' }, description: 'session ids (in directory) prompted to continue after the reload' },
+                  resumeBusy: { type: 'boolean', description: 'also continue every chat busy when the reload starts' }
                 }
               }
             }
@@ -154,6 +156,75 @@ export default defineEventHandler(() => ({
         responses: { 200: { description: 'ReloadState' }, 501: { description: 'v2 servers cannot reload' } }
       }
     },
+    '/api/v1/usage': {
+      get: {
+        summary: 'Usage per assistant reply over a time window (real cost, tokens) plus the models\' list prices',
+        parameters: [
+          { $ref: '#/components/parameters/directory' },
+          { name: 'days', in: 'query', schema: { type: 'integer', minimum: 1, maximum: 365, default: 30 } }
+        ],
+        responses: { 200: { description: '{ generatedAt, days, rows: [{ sessionID, parentID?, title, time, providerID, modelID, agent, cost, tokens }], prices }' } }
+      }
+    },
+    '/api/v1/mcp-apply': {
+      post: {
+        summary: 'Connect or disconnect an MCP server in the running opencode to match its config (no reload)',
+        requestBody: {
+          required: true,
+          content: { 'application/json': { schema: { type: 'object', required: ['name'], properties: { name: { type: 'string' }, directory: { type: 'string' }, enabled: { type: 'boolean' } } } } }
+        },
+        responses: { 200: { description: '{ name, status, hint }' } }
+      }
+    },
+    '/api/v1/skills': {
+      get: {
+        summary: 'Skills opencode can load (built-in, global, project, remote, library) with content, permission and quality checks, plus the library catalog state',
+        parameters: [{ $ref: '#/components/parameters/directory' }],
+        responses: { 200: { description: '{ skills, available, permissions, catalog }' } }
+      }
+    },
+    '/api/v1/skills/library': {
+      put: {
+        summary: 'Create or update a skill in the web app\'s library (served to opencode as a skill catalog)',
+        requestBody: {
+          required: true,
+          content: { 'application/json': { schema: { type: 'object', required: ['name', 'content'], properties: { name: { type: 'string' }, content: { type: 'string', description: 'whole SKILL.md' }, files: { type: 'object', additionalProperties: { type: 'string' } } } } } }
+        },
+        responses: { 200: { description: '{ skill, catalog }' }, 400: { description: 'invalid name or SKILL.md' } }
+      },
+      delete: {
+        summary: 'Delete a library skill',
+        parameters: [{ name: 'name', in: 'query', required: true, schema: { type: 'string' } }],
+        responses: { 200: { description: '{ deleted, catalog }' } }
+      }
+    },
+    '/api/v1/skills/ai': {
+      post: {
+        summary: 'Draft (mode create, from a brief) or improve (mode improve, from content) a SKILL.md with a model; nothing is saved',
+        requestBody: {
+          required: true,
+          content: { 'application/json': { schema: { type: 'object', properties: { mode: { type: 'string', enum: ['create', 'improve'] }, name: { type: 'string' }, content: { type: 'string' }, brief: { type: 'string' }, model: { type: 'string' }, directory: { type: 'string' } } } } }
+        },
+        responses: { 200: { description: '{ content, checks }' } }
+      }
+    },
+    '/api/v1/skills/check': {
+      post: {
+        summary: 'Quality checks for a SKILL.md text',
+        requestBody: { required: true, content: { 'application/json': { schema: { type: 'object', properties: { content: { type: 'string' }, name: { type: 'string' } } } } } },
+        responses: { 200: { description: '{ checks, parsed }' } }
+      }
+    },
+    '/api/v1/ai-text': {
+      post: {
+        summary: 'One-shot text from one of opencode\'s models (no tools, throwaway session)',
+        requestBody: {
+          required: true,
+          content: { 'application/json': { schema: { type: 'object', required: ['prompt'], properties: { prompt: { type: 'string' }, system: { type: 'string' }, model: { type: 'string', description: '"provider/model"' }, directory: { type: 'string' } } } } }
+        },
+        responses: { 200: { description: '{ text }' }, 502: { description: 'the model failed' } }
+      }
+    },
     '/api/v1/mcp-server': {
       get: {
         summary: 'One MCP server: config (secrets redacted), where it is defined, status and a fix for errors',
diff --git a/server/api/v1/reload.post.ts b/server/api/v1/reload.post.ts
index c945ba0..1f17756 100644
--- a/server/api/v1/reload.post.ts
+++ b/server/api/v1/reload.post.ts
@@ -1,13 +1,26 @@
+import type { SessionRef } from '../../utils/control'
+
 // Make opencode re-read its config: one project's instance or all of them.
 // `when: "idle"` (default) waits until no session there is busy.
 export default defineEventHandler(async (event) => {
   requireApiToken(event)
   await assertReloadable()
-  const body = await readBody<{ scope?: 'project' | 'all'; directory?: string; when?: 'now' | 'idle' }>(event)
-    .catch(() => ({} as { scope?: 'project' | 'all'; directory?: string; when?: 'now' | 'idle' }))
+  type Body = { scope?: 'project' | 'all'; directory?: string; when?: 'now' | 'idle'; resume?: string[]; resumeBusy?: boolean }
+  const body = await readBody<Body>(event).catch(() => ({} as Body))
+  const scope = body?.scope === 'all' ? 'all' : 'project'
+  // chats to continue afterwards: the given ones (in `directory`), and with
+  // resumeBusy every chat that is busy right now (a "now" reload cuts them)
+  const resume: SessionRef[] = (Array.isArray(body?.resume) ? body.resume : [])
+    .filter((id): id is string => typeof id === 'string' && Boolean(id))
+    .map((sessionID) => ({ directory: body?.directory, sessionID }))
+  if (body?.resumeBusy) {
+    const busy = await busySessions(scope === 'project' ? body?.directory : undefined).catch(() => [])
+    for (const b of busy) if (!resume.some((r) => r.sessionID === b.sessionID)) resume.push({ directory: b.directory, sessionID: b.sessionID })
+  }
   return requestReload({
-    scope: body?.scope === 'all' ? 'all' : 'project',
+    scope,
     directory: body?.directory,
-    when: body?.when === 'now' ? 'now' : 'idle'
+    when: body?.when === 'now' ? 'now' : 'idle',
+    resume
   })
 })
diff --git a/server/api/v1/skills.get.ts b/server/api/v1/skills.get.ts
new file mode 100644
index 0000000..74d06db
--- /dev/null
+++ b/server/api/v1/skills.get.ts
@@ -0,0 +1,9 @@
+// Every skill opencode sees in a project (built-in, global, project, remote
+// and this app's library), with its content, permission and quality checks,
+// plus the state of the library's catalog in the opencode config.
+export default defineEventHandler(async (event) => {
+  requireApiToken(event)
+  const { directory } = getQuery(event) as { directory?: string }
+  const [view, catalog] = await Promise.all([listSkillViews(directory), catalogState(event)])
+  return { skills: view.skills, available: view.available, permissions: view.permissions ?? null, catalog }
+})
diff --git a/server/api/v1/skills/ai.post.ts b/server/api/v1/skills/ai.post.ts
new file mode 100644
index 0000000..cf3c0cd
--- /dev/null
+++ b/server/api/v1/skills/ai.post.ts
@@ -0,0 +1,16 @@
+// Draft a new skill or improve one with a model (returns SKILL.md text,
+// nothing is saved).
+export default defineEventHandler(async (event) => {
+  requireApiToken(event)
+  assertBodySize(event, 512 * 1024)
+  const body = await readBody<{ mode?: 'improve' | 'create'; name?: string; content?: string; brief?: string; model?: string; directory?: string }>(event)
+  const mode = body?.mode === 'create' ? 'create' : 'improve'
+  if (mode === 'improve' && !body?.content) throw createError({ statusCode: 400, message: 'content is required to improve a skill' })
+  if (mode === 'create' && !body?.brief) throw createError({ statusCode: 400, message: 'brief is required to write a skill' })
+  try {
+    const content = await aiSkill({ mode, name: body.name, content: body.content, brief: body.brief, model: body.model, directory: body.directory })
+    return { content, checks: lintSkill(content, body.name) }
+  } catch (error) {
+    throw createError({ statusCode: 502, message: error instanceof Error ? error.message : String(error) })
+  }
+})
diff --git a/server/api/v1/skills/catalog.post.ts b/server/api/v1/skills/catalog.post.ts
new file mode 100644
index 0000000..820c920
--- /dev/null
+++ b/server/api/v1/skills/catalog.post.ts
@@ -0,0 +1,6 @@
+// Register (or remove) the library's catalog URL in opencode's global config.
+export default defineEventHandler(async (event) => {
+  requireApiToken(event)
+  const body = await readBody<{ enabled?: boolean }>(event).catch(() => ({} as { enabled?: boolean }))
+  return registerCatalog(event, body?.enabled !== false)
+})
diff --git a/server/api/v1/skills/check.post.ts b/server/api/v1/skills/check.post.ts
new file mode 100644
index 0000000..cda5daf
--- /dev/null
+++ b/server/api/v1/skills/check.post.ts
@@ -0,0 +1,7 @@
+// Quality checks for a SKILL.md text (opencode's rules + advice).
+export default defineEventHandler(async (event) => {
+  requireApiToken(event)
+  assertBodySize(event, 512 * 1024)
+  const body = await readBody<{ content?: string; name?: string }>(event)
+  return { checks: lintSkill(String(body?.content || ''), body?.name), parsed: parseSkillMd(String(body?.content || '')) }
+})
diff --git a/server/api/v1/skills/library.delete.ts b/server/api/v1/skills/library.delete.ts
new file mode 100644
index 0000000..e20ad47
--- /dev/null
+++ b/server/api/v1/skills/library.delete.ts
@@ -0,0 +1,7 @@
+// Remove a skill from this app's library.
+export default defineEventHandler(async (event) => {
+  requireApiToken(event)
+  const { name } = getQuery(event) as { name?: string }
+  if (!name) throw createError({ statusCode: 400, message: 'name is required' })
+  return deleteLibrarySkill(event, name)
+})
diff --git a/server/api/v1/skills/library.put.ts b/server/api/v1/skills/library.put.ts
new file mode 100644
index 0000000..13de7d2
--- /dev/null
+++ b/server/api/v1/skills/library.put.ts
@@ -0,0 +1,9 @@
+// Create or update a skill in this app's library; opencode loads it from the
+// catalog after a reload.
+export default defineEventHandler(async (event) => {
+  requireApiToken(event)
+  assertBodySize(event, 512 * 1024)
+  const body = await readBody<{ name?: string; content?: string; files?: Record<string, string>; origin?: string }>(event)
+  if (!body?.name || typeof body.content !== 'string') throw createError({ statusCode: 400, message: 'name and content are required' })
+  return saveLibrarySkill(event, { name: body.name, content: body.content, files: body.files, origin: body.origin })
+})
diff --git a/server/api/v1/usage.get.ts b/server/api/v1/usage.get.ts
new file mode 100644
index 0000000..62da033
--- /dev/null
+++ b/server/api/v1/usage.get.ts
@@ -0,0 +1,61 @@
+// Usage & cost over a time window: one compact row per assistant reply (real
+// cost as opencode recorded it + tokens) and the models' list prices, so the
+// page can group any way it likes and estimate the no-promotion cost.
+// Messages are cached per session until its `time.updated` changes.
+import type { UsageRow, UsageSession } from '../../utils/usage'
+import { UsageRowCache, mapLimit, priceTable, usageRowsFromMessages } from '../../utils/usage'
+
+interface SessionLite extends UsageSession {
+  time?: { created?: number; updated?: number }
+}
+
+const cache = new UsageRowCache(2000)
+
+export default defineEventHandler(async (event) => {
+  requireApiToken(event)
+  const query = getQuery(event) as { directory?: string; days?: string }
+  const directory = query.directory
+  if (!directory) throw createError({ statusCode: 400, statusMessage: 'directory is required' })
+  const days = Math.min(365, Math.max(1, Math.round(Number(query.days) || 30)))
+  const since = Date.now() - days * 86400_000
+
+  const [sessions, providers] = await Promise.all([
+    opencodeFetch<SessionLite[]>('/session', { query: { directory } }),
+    opencodeFetch('/config/providers', { query: { directory } }).catch(() => null)
+  ])
+  const all = (Array.isArray(sessions) ? sessions : []).filter((s) => s?.id)
+  const inWindow = all.filter((s) => (s.time?.updated ?? s.time?.created ?? 0) >= since)
+  const titles = new Map(all.map((s) => [s.id, s.title]))
+
+  const perSession = await mapLimit(inWindow, 6, async (s) => {
+    const updated = s.time?.updated ?? 0
+    const key = `${directory}\n${s.id}`
+    const hit = cache.get(key, updated)
+    if (hit) return hit
+    try {
+      const messages = await opencodeFetch(`/session/${encodeURIComponent(s.id)}/message`, {
+        query: { directory },
+        timeoutMs: 20000
+      })
+      const rows = usageRowsFromMessages(s, messages)
+      cache.set(key, updated, rows)
+      return rows
+    } catch {
+      return [] as UsageRow[] // one unreadable session shouldn't sink the page; not cached
+    }
+  })
+
+  const rows: UsageRow[] = []
+  for (const list of perSession) {
+    for (const r of list) {
+      if (!r.time || r.time < since) continue
+      // titles change (auto-titling), so take them from the fresh session list
+      const row = { ...r, title: titles.get(r.sessionID) ?? r.title }
+      if (r.parentID) row.parentTitle = titles.get(r.parentID)
+      rows.push(row)
+    }
+  }
+  rows.sort((a, b) => a.time - b.time)
+
+  return { generatedAt: Date.now(), days, rows, prices: providers ? priceTable(providers) : {} }
+})
diff --git a/server/middleware/security.ts b/server/middleware/security.ts
index 064fb73..c3f1552 100644
--- a/server/middleware/security.ts
+++ b/server/middleware/security.ts
@@ -22,7 +22,7 @@ export default defineEventHandler((event) => {
 
   const token = useRuntimeConfig().apiToken
   const path = event.path || ''
-  if (token && method === 'GET' && !/^\/(api|mcp|_nuxt|_ipx|__nuxt)/.test(path)) {
+  if (token && method === 'GET' && !/^\/(api|mcp|skills|_nuxt|_ipx|__nuxt)/.test(path)) {
     setCookie(event, UI_COOKIE, uiCookieValue(token), {
       httpOnly: true,
       sameSite: 'strict',
diff --git a/server/plugins/control-mcp.ts b/server/plugins/control-mcp.ts
new file mode 100644
index 0000000..1b5cd55
--- /dev/null
+++ b/server/plugins/control-mcp.ts
@@ -0,0 +1,6 @@
+// Agent control is on by default: register it once at startup when the app
+// knows the URL opencode reaches it at (NUXT_SELF_URL); otherwise the first
+// page load does it (see ensureControlMcp).
+export default defineNitroPlugin(() => {
+  setTimeout(() => { ensureControlMcp() }, 5000).unref?.()
+})
diff --git a/server/routes/skills/[...path].get.ts b/server/routes/skills/[...path].get.ts
new file mode 100644
index 0000000..3c3c884
--- /dev/null
+++ b/server/routes/skills/[...path].get.ts
@@ -0,0 +1,19 @@
+// The skill library as an HTTP skill catalog for opencode (see utils/skills.ts):
+//   GET /skills/[k<secret>/]r<rev>/index.json
+//   GET /skills/[k<secret>/]r<rev>/<name>/<file>
+// opencode fetches it without credentials, so with NUXT_API_TOKEN set the
+// path carries a secret derived from the token instead.
+export default defineEventHandler(async (event) => {
+  const segments = (event.context.params?.path || '').split('/').filter(Boolean).map(decodeURIComponent)
+  const parsed = parseCatalogPath(segments)
+  if (!parsed) throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+  const library = await readLibrary()
+  const [first, ...file] = parsed.rest
+  if (first === 'index.json' && !file.length) return catalogIndex(library)
+  const skill = first ? library.skills[first] : undefined
+  const text = skill?.files[file.join('/')]
+  if (typeof text !== 'string') throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+  setHeader(event, 'content-type', 'text/markdown; charset=utf-8')
+  setHeader(event, 'cache-control', 'no-store')
+  return text
+})
diff --git a/server/utils/ai.ts b/server/utils/ai.ts
new file mode 100644
index 0000000..8821a66
--- /dev/null
+++ b/server/utils/ai.ts
@@ -0,0 +1,57 @@
+// One-shot text generation with a model the opencode server already knows:
+// a throwaway session gets the prompt (no tools), the reply text comes back
+// and the session is deleted. Used to write MCP summaries and agent
+// descriptions with "Generate with AI".
+
+export interface AiTextRequest {
+  /** "provider/model"; omit for opencode's default model */
+  model?: string
+  /** project the throwaway session runs in; default: opencode's own */
+  directory?: string
+  /** instructions placed before the task */
+  system?: string
+  prompt: string
+}
+
+function parseModel(model?: string) {
+  if (!model || !model.includes('/')) return undefined
+  const [providerID, ...rest] = model.split('/')
+  return providerID && rest.length ? { providerID, modelID: rest.join('/') } : undefined
+}
+
+export async function aiText(req: AiTextRequest): Promise<string> {
+  const query = { directory: req.directory || undefined }
+  const session = await opencodeFetch<{ id: string }>('/session', {
+    method: 'POST',
+    body: { title: 'opencode-web helper (deleted when done)' },
+    query,
+    timeoutMs: 20_000
+  })
+  try {
+    const reply = await opencodeFetch<{ info?: { error?: { data?: { message?: string }; name?: string } }; parts?: Array<{ type: string; text?: string; synthetic?: boolean }> }>(
+      `/session/${encodeURIComponent(session.id)}/message`,
+      {
+        method: 'POST',
+        query,
+        timeoutMs: 5 * 60_000,
+        body: {
+          model: parseModel(req.model),
+          // a plain completion: no file edits, no MCP calls
+          tools: { '*': false },
+          parts: [{ type: 'text', text: [req.system?.trim(), req.prompt.trim()].filter(Boolean).join('\n\n') }]
+        }
+      }
+    )
+    const error = reply?.info?.error
+    if (error) throw new Error(error.data?.message || error.name || 'the model returned an error')
+    const text = (reply?.parts || [])
+      .filter((p) => p.type === 'text' && p.text && !p.synthetic)
+      .map((p) => p.text!.trim())
+      .join('\n\n')
+      .trim()
+    if (!text) throw new Error('the model returned no text')
+    return text
+  } finally {
+    opencodeFetch(`/session/${encodeURIComponent(session.id)}`, { method: 'DELETE', query }).catch(() => {})
+  }
+}
diff --git a/server/utils/control-tools.ts b/server/utils/control-tools.ts
index 1f66d80..2096b38 100644
--- a/server/utils/control-tools.ts
+++ b/server/utils/control-tools.ts
@@ -206,6 +206,57 @@ export const CONTROL_TOOLS: ControlTool[] = [
       return `[session ${sessionID}]\n${replyText(reply) || '(no text reply)'}`
     }
   },
+  {
+    name: 'current_session',
+    description: 'Find the chat you are running in: the sessions of a project that are generating a reply right now (yours is one of them; with one result it is yours). Use its id as parent_session_id for run_subagent, or to read your own task list.',
+    inputSchema: obj({ directory: dirProp }, ['directory']),
+    annotations: read,
+    run: async (args) => {
+      const busy = await busySessions(args.directory)
+      return {
+        busy,
+        likelyYours: busy.length === 1 ? busy[0]!.sessionID : null,
+        note: busy.length > 1 ? 'several chats are busy: pick yours by its title' : undefined
+      }
+    }
+  },
+  {
+    name: 'run_subagent',
+    description: 'Run any agent (a subagent like @mcp-home-assistant or explore, or a primary one like build/plan) on a task in a sub-chat and get its answer. The sub-chat is listed under the parent chat in the UI. Use it to delegate work, including from agents that have no task tool. By default it waits for the reply; wait=false returns at once (follow it with read_session). Without parent_session_id the busy chat of the project is used as parent when there is exactly one.',
+    inputSchema: obj({
+      directory: dirProp,
+      agent: { type: 'string', description: 'agent name, e.g. "explore" or "mcp-home-assistant"' },
+      prompt: { type: 'string', description: 'a self-contained task: the sub-chat does not see your conversation' },
+      parent_session_id: { type: 'string' },
+      title: { type: 'string' },
+      model: { type: 'string', description: '"provider/model"; omit for the agent\'s own model' },
+      wait: { type: 'boolean', description: 'wait for the reply (default true)' }
+    }, ['directory', 'agent', 'prompt']),
+    run: async (args) => {
+      let parentID = args.parent_session_id as string | undefined
+      if (!parentID) {
+        const busy = await busySessions(args.directory).catch(() => [])
+        if (busy.length === 1) parentID = busy[0]!.sessionID
+      }
+      const agent = String(args.agent).replace(/^@/, '')
+      const session = await opencodeFetch<{ id: string }>('/session', {
+        method: 'POST',
+        body: { ...(parentID ? { parentID } : {}), title: args.title || `${String(args.prompt).slice(0, 60)} (@${agent} subagent)` },
+        query: q(args.directory)
+      })
+      const body = { agent, model: parseModel(args), parts: [{ type: 'text', text: String(args.prompt) }] }
+      const path = `/session/${encodeURIComponent(session.id)}`
+      if (args.wait === false) {
+        await opencodeFetch(`${path}/prompt_async`, { method: 'POST', query: q(args.directory), body, timeoutMs: 30000 })
+          .catch(() => { opencodeFetch(`${path}/message`, { method: 'POST', query: q(args.directory), body, timeoutMs: 1000 * 60 * 60 }).catch(() => {}) })
+        return `[sub-chat ${session.id} with @${agent}] started; follow it with read_session`
+      }
+      const reply = await opencodeFetch<{ parts?: Array<{ type: string; text?: string }> }>(`${path}/message`, {
+        method: 'POST', query: q(args.directory), timeoutMs: 1000 * 60 * 30, body
+      })
+      return `[sub-chat ${session.id} with @${agent}]\n${replyText(reply) || '(no text reply)'}`
+    }
+  },
   {
     name: 'abort_session',
     description: 'Stop the reply a session is generating.',
@@ -263,15 +314,104 @@ export const CONTROL_TOOLS: ControlTool[] = [
     run: async (args) => (await opencodeFetch<Array<{ name: string; description?: string }>>('/command', { query: q(args.directory) }))
       .map((c) => ({ name: c.name, description: c.description }))
   },
+  // ---- skills ----
   {
     name: 'list_skills',
-    description: 'List the skills opencode can load in a project.',
+    description: 'List the skills opencode can load in a project: name, description, where it comes from (built-in, global, project, remote, or this app\'s skill library), its permission (allow/ask/deny) and quality problems.',
     inputSchema: obj({ directory: dirProp }),
     annotations: read,
     run: async (args) => {
-      const skills = await opencodeFetch<Array<{ name: string; description?: string; location?: string }>>('/skill', { query: q(args.directory) })
-        .catch(() => { throw new Error('this opencode server has no skills API') })
-      return skills.map((s) => ({ name: s.name, description: s.description, location: s.location }))
+      const { skills, available } = await listSkillViews(args.directory)
+      if (!available && !skills.length) throw new Error('this opencode server has no skills API')
+      return skills.map((s) => ({
+        name: s.name,
+        description: s.description,
+        source: s.source,
+        location: s.location,
+        permission: s.permission,
+        ...(s.library ? { library: s.library } : {}),
+        problems: s.checks.filter((c) => c.level !== 'tip').map((c) => c.message)
+      }))
+    }
+  },
+  {
+    name: 'get_skill',
+    description: 'Read one skill: its full SKILL.md (frontmatter + instructions), source, permission and quality checks with tips to improve it.',
+    inputSchema: obj({ directory: dirProp, name: { type: 'string' } }, ['name']),
+    annotations: read,
+    run: async (args) => {
+      const { skills } = await listSkillViews(args.directory)
+      const skill = skills.find((s) => s.name === args.name)
+      if (!skill) throw new Error(`no skill named ${args.name}; list_skills shows the available ones`)
+      return skill
+    }
+  },
+  {
+    name: 'save_skill',
+    description: 'Create or update a skill in this app\'s skill library (served to opencode as a skill catalog; a library skill overrides a same-name skill from elsewhere). content is the whole SKILL.md: frontmatter with name + description, then the instructions. Applies after reload_opencode.',
+    inputSchema: obj({
+      name: { type: 'string', description: 'lowercase-hyphen, max 64 chars' },
+      content: { type: 'string', description: 'complete SKILL.md' },
+      files: { type: 'object', description: 'optional extra files the skill references: { "reference.md": "…" }' }
+    }, ['name', 'content']),
+    run: async (args) => {
+      const result = await saveLibrarySkill(undefined, { name: String(args.name), content: String(args.content), files: args.files })
+      const checks = lintSkill(result.skill.files['SKILL.md'] || '', result.skill.name)
+      return {
+        saved: result.skill.name,
+        version: result.skill.version,
+        catalog: result.catalog,
+        tips: checks.map((c) => c.message),
+        next: 'call reload_opencode so opencode loads it'
+      }
+    }
+  },
+  {
+    name: 'delete_skill',
+    description: 'Delete a skill from this app\'s skill library (other skills live in opencode\'s folders and are not touched; use set_skill_permission deny to hide them).',
+    inputSchema: obj({ name: { type: 'string' } }, ['name']),
+    annotations: { destructiveHint: true },
+    run: (args) => deleteLibrarySkill(undefined, String(args.name))
+  },
+  {
+    name: 'set_skill_permission',
+    description: 'Allow, ask before loading, or deny (hide) a skill or a pattern of skills ("internal-*", "*") in the project or global config.',
+    inputSchema: obj({
+      directory: dirProp,
+      skill: { type: 'string', description: 'skill name or wildcard pattern' },
+      mode: { type: 'string', enum: ['allow', 'ask', 'deny'] },
+      global: { type: 'boolean' }
+    }, ['skill', 'mode']),
+    run: async (args) => {
+      await requireConfigApi('Changing skill permissions')
+      const applied = await patchConfig(args.global ? 'global' : 'project', args.directory, { permission: { skill: { [String(args.skill)]: args.mode } } })
+      return `skill ${args.skill}: ${args.mode} in the ${applied.scope} config; applies after reload_opencode`
+    }
+  },
+  {
+    name: 'improve_skill',
+    description: 'Have a model rewrite a skill (or write a new one from a brief) following opencode\'s skill rules: a sharper when-to-use description and clearer instructions. Returns the proposed SKILL.md; save=true also stores it in the skill library.',
+    inputSchema: obj({
+      directory: dirProp,
+      name: { type: 'string' },
+      brief: { type: 'string', description: 'what to change, or what a new skill is for' },
+      model: { type: 'string', description: '"provider/model"; omit for the default model' },
+      save: { type: 'boolean' }
+    }, ['name']),
+    run: async (args) => {
+      const { skills } = await listSkillViews(args.directory)
+      const current = skills.find((s) => s.name === args.name)
+      const content = await aiSkill({
+        mode: current?.content ? 'improve' : 'create',
+        name: String(args.name),
+        content: current?.content,
+        brief: args.brief,
+        model: args.model,
+        directory: args.directory
+      })
+      if (!args.save) return { proposal: content, checks: lintSkill(content, String(args.name)) }
+      const saved = await saveLibrarySkill(undefined, { name: String(args.name), content, origin: current && current.source !== 'library' ? current.source : undefined })
+      return { saved: saved.skill.name, version: saved.skill.version, content, next: 'call reload_opencode so opencode loads it' }
     }
   },
   {
@@ -286,18 +426,30 @@ export const CONTROL_TOOLS: ControlTool[] = [
   },
   {
     name: 'reload_opencode',
-    description: 'Make opencode re-read its config (MCP servers, agents, providers, permissions). scope "project" reloads one project, "all" every project (like restarting opencode serve). Replies running in a reloaded project are cut off, so by default (when="idle") the reload waits until no session there is busy, including your own reply: it happens right after you finish. Check the result with server_info.',
+    description: 'Make opencode re-read its config (MCP servers, agents, providers, permissions): the "restart" of opencode. scope "project" reloads one project, "all" every project (like restarting opencode serve). Replies running in a reloaded project are cut off, so by default (when="idle") the reload waits until no session there is busy, including your own reply: it happens right after you finish. Afterwards the chats that were busy when you asked (yours included) get a "continue" message, so you carry on automatically with the new config: finish your reply after calling this. resume="none" skips that. Check the result with server_info.',
     inputSchema: obj({
       directory: dirProp,
       scope: { type: 'string', enum: ['project', 'all'], description: 'default: project when a directory is given, else all' },
-      when: { type: 'string', enum: ['idle', 'now'], description: 'default idle' }
+      when: { type: 'string', enum: ['idle', 'now'], description: 'default idle' },
+      resume: { type: 'string', enum: ['busy', 'none'], description: 'continue the chats busy right now (incl. yours) after the reload; default busy' },
+      session_ids: { type: 'array', items: { type: 'string' }, description: 'extra chats (of directory) to continue afterwards' }
     }),
     annotations: { destructiveHint: true },
     run: async (args) => {
       await assertReloadable()
       const scope = args.scope === 'all' || (!args.scope && !args.directory) ? 'all' : 'project'
-      const state = requestReload({ scope, directory: args.directory, when: args.when === 'now' ? 'now' : 'idle' })
-      return `Reload of ${scope === 'all' ? 'every opencode instance' : state.directory} scheduled (${state.when === 'now' ? 'in ~2 seconds' : 'as soon as no session is busy'}). New sessions use the reloaded config.`
+      const resume: Array<{ directory?: string; sessionID: string }> = []
+      if (args.resume !== 'none') {
+        for (const b of await busySessions(scope === 'project' ? args.directory : undefined).catch(() => [])) {
+          resume.push({ directory: b.directory, sessionID: b.sessionID })
+        }
+      }
+      for (const id of Array.isArray(args.session_ids) ? args.session_ids : []) {
+        if (!resume.some((r) => r.sessionID === id)) resume.push({ directory: args.directory, sessionID: String(id) })
+      }
+      const state = requestReload({ scope, directory: args.directory, when: args.when === 'now' ? 'now' : 'idle', resume })
+      return `Reload of ${scope === 'all' ? 'every opencode instance' : state.directory} scheduled (${state.when === 'now' ? 'in ~2 seconds' : 'as soon as no session is busy'}). `
+        + (resume.length ? `Afterwards ${resume.length} chat(s), yours included, get a "continue" message: end your reply now and pick up from there.` : 'New sessions use the reloaded config.')
     }
   },
 
@@ -431,9 +583,13 @@ export const CONTROL_TOOLS: ControlTool[] = [
         ? { mcp: { [args.server]: { enabled: false } } }
         : { mcp: { [args.server]: { enabled: true } }, permission: { [`${args.server}_*`]: args.mode === 'ask' ? 'ask' : 'allow' } }
       const applied = await patchConfig(args.global ? 'global' : 'project', args.directory, body)
-      await forgetMcpTools()
+      // connect / disconnect it in the running opencode: no reload needed
+      const status = await applyMcpLive(String(args.server), args.directory, args.mode !== 'off').catch(() => undefined)
       autoSyncNest(ctx.selfOrigin)
-      return `${args.server} set to ${args.mode} in the ${applied.scope} config${applied.fallback ? ' (this opencode ignores project config written through its API)' : ''}; applies to new sessions`
+      const hint = mcpErrorHint(status?.error, status?.status)
+      return `${args.server} set to ${args.mode} in the ${applied.scope} config${applied.fallback ? ' (this opencode ignores project config written through its API)' : ''}; `
+        + `now ${status?.status || 'unknown'}${status?.error ? ` (${status.error})` : ''}${hint ? `. Fix: ${hint.title}. ${hint.fix}` : ''}. `
+        + 'Tools of a server switched on mid-chat become available from your next message.'
     }
   },
   {
diff --git a/server/utils/control.ts b/server/utils/control.ts
index 5d3d2c7..19383d3 100644
--- a/server/utils/control.ts
+++ b/server/utils/control.ts
@@ -63,6 +63,8 @@ export async function busySessions(directory?: string) {
 
 // ---- reload ----
 
+export interface SessionRef { directory?: string; sessionID: string }
+
 export interface ReloadState {
   scope: 'project' | 'all'
   directory?: string
@@ -71,6 +73,55 @@ export interface ReloadState {
   state: 'waiting' | 'done' | 'failed' | 'gave-up'
   doneAt?: number
   message?: string
+  /** chats prompted to continue once the reload is done */
+  resume?: SessionRef[]
+  resumed?: string[]
+}
+
+const RESUME_TEXT = 'opencode was reloaded (its config was re-read: MCP servers, agents, permissions). '
+  + 'Continue where you left off; if the task is already finished, just say so briefly. '
+  + 'Do not reload opencode again unless something new requires it.'
+
+// a chat that reloads again right after being resumed is not resumed twice
+// in a row: no reload -> continue -> reload loops
+const lastResumed = new Map<string, number>()
+const RESUME_COOLDOWN_MS = 3 * 60_000
+
+/**
+ * Prompt chats to carry on after a reload, with the agent and model of
+ * their last message (a reload cuts running replies, and a chat that asked
+ * for the reload itself should pick up the thread on its own).
+ */
+export async function resumeSessions(refs: SessionRef[]) {
+  const resumed: string[] = []
+  const now = Date.now()
+  for (const [id, at] of lastResumed) if (now - at > RESUME_COOLDOWN_MS) lastResumed.delete(id)
+  await Promise.all(refs.map(async ({ directory, sessionID }) => {
+    if (lastResumed.has(sessionID)) return
+    lastResumed.set(sessionID, now)
+    const query = { directory }
+    const path = `/session/${encodeURIComponent(sessionID)}`
+    try {
+      const messages = await opencodeFetch<Array<{ info?: { role?: string; agent?: string; mode?: string; model?: { providerID?: string; modelID?: string }; providerID?: string; modelID?: string } }>>(
+        `${path}/message`, { query, timeoutMs: 20_000 }
+      ).catch(() => [])
+      const lastUser = [...messages].reverse().find((m) => m.info?.role === 'user')?.info
+      const lastReply = [...messages].reverse().find((m) => m.info?.role === 'assistant')?.info
+      const model = lastUser?.model?.providerID && lastUser.model.modelID
+        ? { providerID: lastUser.model.providerID, modelID: lastUser.model.modelID }
+        : lastReply?.providerID && lastReply.modelID ? { providerID: lastReply.providerID, modelID: lastReply.modelID } : undefined
+      const body = { agent: lastUser?.agent || lastReply?.agent || lastReply?.mode, model, parts: [{ type: 'text', text: RESUME_TEXT }] }
+      await opencodeFetch(`${path}/prompt_async`, { method: 'POST', query, body, timeoutMs: 30_000 })
+        .catch(() => {
+          // servers without prompt_async: fire the blocking route, don't await it
+          opencodeFetch(`${path}/message`, { method: 'POST', query, body, timeoutMs: 1000 * 60 * 60 }).catch(() => {})
+        })
+      resumed.push(sessionID)
+    } catch (error) {
+      console.warn(`[reload] could not resume ${sessionID}: ${error instanceof Error ? error.message : error}`)
+    }
+  }))
+  return resumed
 }
 
 let lastReload: ReloadState | undefined
@@ -119,7 +170,14 @@ async function dispose(scope: 'project' | 'all', directory?: string) {
  * and finish its own reply first. `now` still waits ~1.5 s so the caller's
  * response gets out before the instance goes away.
  */
-export function requestReload(opts: { scope: 'project' | 'all'; directory?: string; when?: 'now' | 'idle'; maxWaitMs?: number }): ReloadState {
+export function requestReload(opts: {
+  scope: 'project' | 'all'
+  directory?: string
+  when?: 'now' | 'idle'
+  maxWaitMs?: number
+  /** chats to prompt with "continue" once the reload is done */
+  resume?: SessionRef[]
+}): ReloadState {
   if (opts.scope === 'project' && !opts.directory) {
     throw createError({ statusCode: 400, message: 'directory is required to reload one project' })
   }
@@ -129,7 +187,8 @@ export function requestReload(opts: { scope: 'project' | 'all'; directory?: stri
     directory: opts.directory,
     when: opts.when === 'now' ? 'now' : 'idle',
     requestedAt: Date.now(),
-    state: 'waiting'
+    state: 'waiting',
+    ...(opts.resume?.length ? { resume: opts.resume } : {})
   }
   lastReload = state
   const deadline = Date.now() + (opts.maxWaitMs ?? 15 * 60_000)
@@ -154,6 +213,12 @@ export function requestReload(opts: { scope: 'project' | 'all'; directory?: stri
       state.state = 'done'
       state.doneAt = Date.now()
       await forgetMcpTools()
+      if (state.resume?.length) {
+        // give the fresh instance a moment to load its MCP servers first
+        await new Promise((resolve) => setTimeout(resolve, 1500))
+        state.resumed = await resumeSessions(state.resume)
+        if (state.resumed.length) state.message += `; ${state.resumed.length} chat(s) continued`
+      }
     } catch (error) {
       state.state = 'failed'
       state.message = error instanceof Error ? error.message : String(error)
@@ -233,7 +298,7 @@ export const CONTROL_MCP_NAME = 'opencode-web'
 export const CONTROL_ASK_TOOLS = [
   'reload_opencode', 'add_mcp', 'test_mcp', 'set_mcp_mode', 'set_tool_mode', 'disconnect_mcp',
   'send_prompt', 'abort_session', 'delete_schedule', 'create_schedule', 'update_schedule', 'run_schedule',
-  'configure_mcp_subagents'
+  'configure_mcp_subagents', 'save_skill', 'delete_skill', 'set_skill_permission'
 ]
 
 /** Base URL at which opencode can reach this app. */
@@ -277,3 +342,67 @@ export async function controlMcpState(event?: H3Event) {
     tokenProtected: Boolean(useRuntimeConfig().apiToken)
   }
 }
+
+/**
+ * Register (or update / switch off) the control server in the global config
+ * and set its state-changing tools to "ask".
+ */
+export async function installControlMcp(url: string, enabled = true) {
+  const result = await saveMcpServer({
+    name: CONTROL_MCP_NAME,
+    scope: 'global',
+    config: { ...await controlMcpConfig(url), enabled }
+  })
+  await opencodeFetch('/global/config', {
+    method: 'PATCH',
+    body: { permission: Object.fromEntries(CONTROL_ASK_TOOLS.map((tool) => [`${CONTROL_MCP_NAME}_${tool}`, 'ask'])) },
+    timeoutMs: 30000
+  }).catch(() => { /* older servers without per-tool permissions */ })
+  await forgetMcpTools()
+  return result
+}
+
+// ---- on by default ----
+
+const AUTO_KEY = 'control-mcp-auto.json'
+let ensuring: Promise<void> | undefined
+let retryAt = 0
+
+/**
+ * Agent control is on by default (NUXT_AGENT_CONTROL=auto): the first time
+ * the app knows a URL at which opencode reaches it (NUXT_SELF_URL, or the
+ * address of a request), the control server is registered in the global
+ * config. Only once: switching it off on the MCP page is respected, and so
+ * is an existing entry. NUXT_AGENT_CONTROL=off never registers it.
+ */
+export function ensureControlMcp(event?: H3Event) {
+  if (String(useRuntimeConfig().agentControl || 'auto') === 'off') return
+  if (ensuring || Date.now() < retryAt) return ensuring
+  const base = selfBaseUrl(event)
+  if (!base) return
+  ensuring = (async () => {
+    const storage = useStorage('data')
+    const flag = await storage.getItem<{ done?: boolean; asks?: number }>(AUTO_KEY)
+    if (flag?.done && (flag.asks || 0) >= CONTROL_ASK_TOOLS.length) return
+    if (!(await getCapabilities()).config) throw new Error('no config API')
+    const global = await rawMcpConfig('global')
+    if (!flag?.done && !global[CONTROL_MCP_NAME]) {
+      const result = await installControlMcp(`${base}/mcp`)
+      console.info(`[control] agent control registered at ${base}/mcp: ${result.status?.status || 'saved'}`)
+    } else if (global[CONTROL_MCP_NAME]) {
+      // tools added in an update: they ask first too
+      await opencodeFetch('/global/config', {
+        method: 'PATCH',
+        body: { permission: Object.fromEntries(CONTROL_ASK_TOOLS.map((tool) => [`${CONTROL_MCP_NAME}_${tool}`, 'ask'])) },
+        timeoutMs: 30000
+      }).catch(() => {})
+    }
+    await storage.setItem(AUTO_KEY, { done: true, at: Date.now(), asks: CONTROL_ASK_TOOLS.length })
+  })()
+    .catch((error) => {
+      retryAt = Date.now() + 60_000
+      console.warn(`[control] could not register agent control yet: ${error instanceof Error ? error.message : error}`)
+    })
+    .finally(() => { ensuring = undefined })
+  return ensuring
+}
diff --git a/server/utils/mcp-admin.ts b/server/utils/mcp-admin.ts
index 493c675..bf4ea7a 100644
--- a/server/utils/mcp-admin.ts
+++ b/server/utils/mcp-admin.ts
@@ -385,3 +385,30 @@ export async function patchConfig(scope: McpScope, directory: string | undefined
   await opencodeFetch('/global/config', { method: 'PATCH', body, timeoutMs: 30000 })
   return { scope: 'global', fallback: true }
 }
+
+// ---- applying a change to the running opencode ----
+
+/**
+ * Make the running opencode match a server's config without a reload:
+ * enabled -> register it with its stored entry and connect, disabled ->
+ * disconnect. opencode reads `enabled` only when an instance starts, so a
+ * server switched on through the config API stays "disabled" until this
+ * (or a reload) happens.
+ */
+export async function applyMcpLive(name: string, directory?: string, enabled?: boolean): Promise<McpStatusInfo | undefined> {
+  const query = { directory }
+  const path = `/mcp/${encodeURIComponent(name)}`
+  const scope = await mcpDefinedIn(name, directory)
+  const stored = scope ? (await rawMcpConfig(scope, directory).catch(() => ({} as Record<string, McpServerConfig>)))[name] : undefined
+  const on = enabled ?? (stored ? stored.enabled !== false : true)
+  if (on) {
+    if (stored) {
+      await opencodeFetch('/mcp', { method: 'POST', body: { name, config: { ...stored, enabled: true } }, query, timeoutMs: 60_000 }).catch(() => {})
+    }
+    await opencodeFetch(`${path}/connect`, { method: 'POST', body: {}, query, timeoutMs: 60_000 }).catch(() => {})
+  } else {
+    await opencodeFetch(`${path}/disconnect`, { method: 'POST', body: {}, query, timeoutMs: 30_000 }).catch(() => {})
+  }
+  await forgetMcpTools()
+  return mcpStatusOf(name, directory)
+}
diff --git a/server/utils/mcp-nest.ts b/server/utils/mcp-nest.ts
index 1b0eb65..def0d20 100644
--- a/server/utils/mcp-nest.ts
+++ b/server/utils/mcp-nest.ts
@@ -25,6 +25,8 @@ export interface NestSettings {
   summaries: Record<string, string>
   /** extra instructions for the orchestrator */
   instructions?: string
+  /** specialists may hand work on to other subagents (the task tool); default on */
+  delegate?: boolean
   lastSync?: { at: number; hash: string; agents: string[]; error?: string }
 }
 
@@ -54,7 +56,7 @@ export interface NestPlan {
 }
 
 const KEY = 'mcp-nest.json'
-const DEFAULTS: NestSettings = { enabled: false, orchestrator: 'orchestrator', exclude: [], summaries: {} }
+const DEFAULTS: NestSettings = { enabled: false, orchestrator: 'orchestrator', exclude: [], summaries: {}, delegate: true }
 
 /** Tool-id prefix opencode gives a server (same rule on 1.x and 2.x). */
 export function toolNamespace(server: string) {
@@ -113,11 +115,17 @@ function orchestratorPrompt(settings: NestSettings, servers: NestServerPlan[]) {
   ].join('\n')
 }
 
-function specialistPrompt(server: string, tools: Array<{ name: string }>) {
+function specialistPrompt(server: string, tools: Array<{ name: string }>, peers: NestServerPlan[], delegate: boolean) {
+  const others = peers.filter((p) => p.server !== server)
   return [
     `You are the specialist for the ${server} MCP server. You only have its tools${tools.length ? ` (${tools.map((t) => t.name).slice(0, 30).join(', ')})` : ''}.`,
     'Do exactly the task you receive with those tools, then report back concisely: what you did, the results the orchestrator asked for (ids, values, links), and anything that failed and why.',
-    'If the task needs something your tools cannot do, say so instead of guessing.'
+    ...(delegate && others.length
+      ? [
+          'When a part of the task needs another MCP server, hand that part to its specialist with the subagent (task) tool instead of giving up:',
+          ...others.map((p) => `- @${p.agent}: ${p.server}`)
+        ]
+      : ['If the task needs something your tools cannot do, say so instead of guessing.'])
   ].join('\n')
 }
 
@@ -158,12 +166,14 @@ export async function planNest(selfOrigin?: string, settingsOverride?: NestSetti
 
   const nested = servers.filter((s) => s.included)
   const agents: Record<string, Record<string, unknown>> = {}
+  const delegate = settings.delegate !== false
   for (const s of nested) {
     agents[s.agent] = {
       mode: 'subagent',
       description: s.summary,
-      prompt: specialistPrompt(s.server, s.tools),
-      tools: { '*': false, [`${toolNamespace(s.server)}_*`]: true },
+      prompt: specialistPrompt(s.server, s.tools, nested, delegate),
+      // `task` lets a specialist call the other specialists (sub-chats)
+      tools: { '*': false, [`${toolNamespace(s.server)}_*`]: true, ...(delegate && nested.length > 1 ? { task: true } : {}) },
       disable: false
     }
   }
@@ -242,3 +252,23 @@ export function autoSyncNest(selfOrigin?: string) {
     .finally(() => { checking = undefined })
   return checking
 }
+
+/** Ask a model for a specialist summary: what the server is for and what to send it. */
+export async function aiSummary(server: string, opts: { model?: string; directory?: string; selfOrigin?: string } = {}) {
+  const discovered = await getAllTools(opts.directory, 'global', opts.selfOrigin || '', false)
+    .catch(() => ({} as Awaited<ReturnType<typeof getAllTools>>))
+  const tools = (discovered[server]?.tools || []).slice(0, 80)
+  const list = tools.map((t) => `- ${t.name}${t.description ? `: ${t.description.replace(/\s+/g, ' ').slice(0, 240)}` : ''}`).join('\n')
+  const text = await aiText({
+    model: opts.model,
+    directory: opts.directory,
+    system: 'You write routing notes for an orchestrator agent that delegates work to one specialist subagent per MCP server. Reply with the note only: no preamble, no markdown headings, no quotes.',
+    prompt: [
+      `MCP server: ${server}`,
+      tools.length ? `Its tools:\n${list}` : 'Its tools are unknown.',
+      '',
+      'Write 2-3 short sentences (max 400 characters) that tell the orchestrator when to delegate to this specialist and what a good task for it looks like (which data to pass, e.g. ids, names, entity ids). Mention the key capabilities, not every tool.'
+    ].join('\n')
+  })
+  return text.replace(/^["'`]+|["'`]+$/g, '').trim().slice(0, 1200)
+}
diff --git a/server/utils/skills.ts b/server/utils/skills.ts
new file mode 100644
index 0000000..0895609
--- /dev/null
+++ b/server/utils/skills.ts
@@ -0,0 +1,379 @@
+// Skills: what opencode loads (built-in, global, project, .claude/.agents
+// compat folders), plus a **skill library** kept by this app. opencode and
+// the web app usually run in different containers, so the library is not
+// written into opencode's folders: the app serves it as an HTTP skill catalog
+// (`<self>/skills/r<rev>/index.json`, files at `<base>/<name>/<file>`) and
+// registers that URL in the global config (`skills.urls` on 1.x, the
+// `skills` array on 2.x). opencode downloads the files once per URL and
+// version, so every change bumps the revision in the URL and the skill's
+// version; a reload then loads the new copy. Same-name library skills win
+// over the others (remote sources are read last).
+//
+// Permissions (`permission.skill`: allow / ask / deny per name or pattern)
+// and per-agent access (`tools.skill`) are plain opencode config.
+
+import { createHmac } from 'node:crypto'
+import type { H3Event } from 'h3'
+
+export interface LibrarySkill {
+  name: string
+  description: string
+  /** relative path -> text; SKILL.md is the entry file */
+  files: Record<string, string>
+  version: number
+  updatedAt: number
+  /** where it was copied from, when it started as a copy */
+  origin?: string
+}
+
+interface Library {
+  rev: number
+  skills: Record<string, LibrarySkill>
+}
+
+const KEY = 'skill-library.json'
+export const SKILL_NAME = /^[a-z0-9]+(-[a-z0-9]+)*$/
+
+export async function readLibrary(): Promise<Library> {
+  const stored = await useStorage('data').getItem<Library>(KEY).catch(() => null)
+  return { rev: stored?.rev || 0, skills: { ...(stored?.skills || {}) } }
+}
+
+async function writeLibrary(library: Library) {
+  await useStorage('data').setItem(KEY, library)
+}
+
+// ---- SKILL.md ----
+
+export interface ParsedSkill {
+  name?: string
+  description?: string
+  /** other frontmatter keys, as written */
+  meta: Record<string, string>
+  body: string
+  hasFrontmatter: boolean
+}
+
+/** Minimal YAML frontmatter reader: top-level `key: value` lines (quotes and folded `>` / `|` blocks). */
+export function parseSkillMd(text: string): ParsedSkill {
+  const match = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/.exec(text || '')
+  if (!match) return { meta: {}, body: text || '', hasFrontmatter: false }
+  const meta: Record<string, string> = {}
+  const lines = match[1]!.split(/\r?\n/)
+  for (let i = 0; i < lines.length; i++) {
+    const kv = /^([A-Za-z0-9_-]+):\s*(.*)$/.exec(lines[i]!)
+    if (!kv) continue
+    let value = kv[2]!.trim()
+    if (value === '>' || value === '|' || value === '>-' || value === '|-') {
+      const block: string[] = []
+      while (i + 1 < lines.length && /^\s+/.test(lines[i + 1]!)) block.push(lines[++i]!.trim())
+      value = block.join(value.startsWith('>') ? ' ' : '\n')
+    }
+    meta[kv[1]!] = value.replace(/^(['"])([\s\S]*)\1$/, '$2')
+  }
+  const { name, description, ...rest } = meta
+  return { name, description, meta: rest, body: match[2] || '', hasFrontmatter: true }
+}
+
+function yamlValue(value: string) {
+  return /^[\w .,()/-]*$/.test(value) && !/^\s|\s$/.test(value) ? value : JSON.stringify(value)
+}
+
+export function buildSkillMd(name: string, description: string, body: string, meta: Record<string, string> = {}) {
+  const extra = Object.entries(meta).filter(([k, v]) => k && v).map(([k, v]) => `${k}: ${yamlValue(v)}`)
+  return ['---', `name: ${name}`, `description: ${yamlValue(description.replace(/\s+/g, ' ').trim())}`, ...extra, '---', '', body.trim(), ''].join('\n')
+}
+
+export interface SkillCheck { level: 'error' | 'warning' | 'tip'; message: string }
+
+/** opencode's own rules for skills, plus advice that makes them trigger well. */
+export function lintSkill(content: string, folderName?: string): SkillCheck[] {
+  const out: SkillCheck[] = []
+  const parsed = parseSkillMd(content)
+  if (!parsed.hasFrontmatter) out.push({ level: 'error', message: 'No frontmatter: start with --- / name / description / ---.' })
+  if (!parsed.name) out.push({ level: 'error', message: 'name is required.' })
+  else {
+    if (!SKILL_NAME.test(parsed.name) || parsed.name.length > 64) out.push({ level: 'error', message: 'name: lowercase letters, digits and single hyphens, up to 64 characters.' })
+    if (folderName && parsed.name !== folderName) out.push({ level: 'error', message: `name "${parsed.name}" must match its folder "${folderName}".` })
+  }
+  const description = parsed.description || ''
+  if (!description) out.push({ level: 'error', message: 'description is missing: opencode never shows the skill to the model without one.' })
+  else {
+    if (description.length < 40) out.push({ level: 'warning', message: 'description is very short: say what the skill does AND when to use it.' })
+    if (description.length > 1024) out.push({ level: 'warning', message: 'description is over 1024 characters: it is in every prompt, keep it tight.' })
+    if (/^(I |I'm|We )/i.test(description)) out.push({ level: 'tip', message: 'Write the description in third person ("Use when…", not "I help with…").' })
+    if (!/\b(use|when|whenever|trigger)\b/i.test(description)) out.push({ level: 'tip', message: 'Say when to use it ("Use when the user asks for…") so the model picks it at the right time.' })
+  }
+  const words = parsed.body.split(/\s+/).filter(Boolean).length
+  if (words < 30) out.push({ level: 'warning', message: 'The body is almost empty: add the instructions, steps and examples the model should follow.' })
+  if (words > 5000) out.push({ level: 'tip', message: `The body has ${words} words: move details into extra files the skill references, so loading it stays cheap.` })
+  if (!/^#{1,3} /m.test(parsed.body) && words > 150) out.push({ level: 'tip', message: 'Use headings to structure longer instructions.' })
+  return out
+}
+
+// ---- the catalog opencode downloads ----
+
+function catalogSecret() {
+  const token = String(useRuntimeConfig().apiToken || '')
+  // with an API token, the catalog URL carries a derived secret instead
+  return token ? createHmac('sha256', token).update('opencode-web-skills-v1').digest('base64url').slice(0, 32) : ''
+}
+
+/** `/skills/[k<secret>/]r<rev>/` -> rev, or undefined when the path is not ours. */
+export function parseCatalogPath(segments: string[]) {
+  const secret = catalogSecret()
+  let rest = segments
+  if (secret) {
+    if (rest[0] !== `k${secret}`) return undefined
+    rest = rest.slice(1)
+  }
+  const rev = /^r(\d+)$/.exec(rest[0] || '')
+  return rev ? { rev: Number(rev[1]), rest: rest.slice(1) } : undefined
+}
+
+export function catalogUrl(base: string, rev: number) {
+  const secret = catalogSecret()
+  return `${base.replace(/\/+$/, '')}/skills/${secret ? `k${secret}/` : ''}r${rev}/`
+}
+
+export function catalogIndex(library: Library) {
+  return {
+    skills: Object.values(library.skills)
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map((s) => ({ name: s.name, description: s.description, version: String(s.version), files: Object.keys(s.files) }))
+  }
+}
+
+const isOurCatalog = (url: unknown) => typeof url === 'string' && /\/skills\/(k[\w-]+\/)?r\d+\/?$/.test(url)
+
+/** The catalog URLs currently in the global config (1.x object or 2.x array form). */
+async function configuredSkillSources() {
+  const global = await opencodeFetch<{ skills?: unknown }>('/global/config', { timeoutMs: 20_000 })
+  const skills = global?.skills
+  const dialect2 = ((await getServerProfile()) as { dialect?: string }).dialect === '2'
+  const urls = Array.isArray(skills)
+    ? skills.filter((s): s is string => typeof s === 'string')
+    : Array.isArray((skills as { urls?: unknown })?.urls) ? ((skills as { urls: unknown[] }).urls.filter((s): s is string => typeof s === 'string')) : []
+  return { urls, dialect2, raw: skills }
+}
+
+export async function catalogState(event?: H3Event) {
+  const library = await readLibrary()
+  const base = selfBaseUrl(event)
+  let registered: string | undefined
+  let supported = true
+  try {
+    registered = (await configuredSkillSources()).urls.find(isOurCatalog)
+  } catch {
+    supported = false
+  }
+  const current = base ? catalogUrl(base, library.rev) : undefined
+  return {
+    rev: library.rev,
+    count: Object.keys(library.skills).length,
+    url: current || null,
+    registered: registered || null,
+    upToDate: Boolean(registered && current && registered === current),
+    supported
+  }
+}
+
+/**
+ * Point opencode at the current catalog revision (or remove it). Other skill
+ * sources in the config are kept. Applies after a reload.
+ */
+export async function registerCatalog(event: H3Event | undefined, enabled = true) {
+  const base = selfBaseUrl(event)
+  if (enabled && !base) throw createError({ statusCode: 400, message: 'Set NUXT_SELF_URL: the URL at which opencode reaches this app' })
+  if (!(await getCapabilities()).config) throw createError({ statusCode: 501, message: 'This opencode server has no config API' })
+  const library = await readLibrary()
+  const { urls, dialect2, raw } = await configuredSkillSources()
+  const others = urls.filter((u) => !isOurCatalog(u))
+  const next = enabled ? [...others, catalogUrl(base!, library.rev)] : others
+  // 2.x: one `skills` array of folders and URLs; 1.x: `skills: { paths, urls }`
+  const kept = Array.isArray(raw) ? raw.filter((s) => !isOurCatalog(s)) : []
+  const body = dialect2
+    ? { skills: enabled ? [...kept, catalogUrl(base!, library.rev)] : kept }
+    : { skills: { ...(raw && typeof raw === 'object' && !Array.isArray(raw) ? raw : {}), urls: next } }
+  try {
+    await opencodeFetch('/global/config', { method: 'PATCH', body, timeoutMs: 30_000 })
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+    throw createError({ statusCode: 502, message: `This opencode version did not accept a skill catalog (${message}). Skill URLs need opencode 1.14 or later.` })
+  }
+  return catalogState(event)
+}
+
+// ---- library changes ----
+
+export async function saveLibrarySkill(event: H3Event | undefined, input: { name: string; content: string; files?: Record<string, string>; origin?: string }) {
+  const name = String(input.name || '').trim()
+  if (!SKILL_NAME.test(name) || name.length > 64) {
+    throw createError({ statusCode: 400, message: 'name: lowercase letters, digits and single hyphens, up to 64 characters' })
+  }
+  const parsed = parseSkillMd(input.content || '')
+  // the folder name is the skill's name: keep the frontmatter in step
+  const content = parsed.hasFrontmatter && parsed.name === name
+    ? input.content
+    : buildSkillMd(name, parsed.description || '', parsed.body, parsed.meta)
+  const errors = lintSkill(content, name).filter((c) => c.level === 'error')
+  if (errors.length) throw createError({ statusCode: 400, message: errors.map((e) => e.message).join(' ') })
+  const extra = Object.fromEntries(Object.entries(input.files || {})
+    .filter(([path, text]) => path !== 'SKILL.md' && typeof text === 'string' && /^[\w.-]+(\/[\w.-]+)*$/.test(path) && !path.split('/').includes('..')))
+  const library = await readLibrary()
+  const previous = library.skills[name]
+  library.rev++
+  library.skills[name] = {
+    name,
+    description: parseSkillMd(content).description || '',
+    files: { 'SKILL.md': content, ...(input.files ? extra : Object.fromEntries(Object.entries(previous?.files || {}).filter(([p]) => p !== 'SKILL.md'))) },
+    version: (previous?.version || 0) + 1,
+    updatedAt: Date.now(),
+    origin: input.origin ?? previous?.origin
+  }
+  await writeLibrary(library)
+  const catalog = await registerCatalog(event, true).catch((error) => ({ error: error instanceof Error ? error.message : String(error) }))
+  return { skill: library.skills[name], catalog }
+}
+
+export async function deleteLibrarySkill(event: H3Event | undefined, name: string) {
+  const library = await readLibrary()
+  if (!library.skills[name]) throw createError({ statusCode: 404, message: `No library skill named ${name}` })
+  delete library.skills[name]
+  library.rev++
+  await writeLibrary(library)
+  const empty = !Object.keys(library.skills).length
+  const catalog = await registerCatalog(event, !empty).catch((error) => ({ error: error instanceof Error ? error.message : String(error) }))
+  return { deleted: name, catalog }
+}
+
+// ---- what opencode sees ----
+
+export type SkillSource = 'built-in' | 'library' | 'project' | 'global' | 'remote'
+
+export interface SkillView {
+  name: string
+  description?: string
+  location?: string
+  source: SkillSource
+  content?: string
+  /** permission.skill rule that applies (exact name or matching pattern) */
+  permission: 'allow' | 'ask' | 'deny'
+  permissionRule?: string
+  library?: { version: number; updatedAt: number; loaded: boolean; origin?: string }
+  checks: SkillCheck[]
+}
+
+function sourceOf(location: string | undefined, home?: string): SkillSource {
+  if (!location || location === '<built-in>') return 'built-in'
+  const l = location.replace(/\\/g, '/')
+  // downloaded from a skill URL (this app's library is told apart by name)
+  if (/\/\.cache\/opencode\/skills\//.test(l)) return 'remote'
+  if ((home && l.startsWith(home.replace(/\\/g, '/'))) || /\/\.config\/opencode\//.test(l)) return 'global'
+  return 'project'
+}
+
+const wildcard = (pattern: string) => new RegExp(`^${pattern.replace(/[.+^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '.*').replace(/\?/g, '.')}$`)
+
+/** opencode's rule: the most specific (longest) matching pattern wins; default allow. */
+export function skillPermission(rules: unknown, name: string): { mode: 'allow' | 'ask' | 'deny'; rule?: string } {
+  if (typeof rules === 'string' && ['allow', 'ask', 'deny'].includes(rules)) return { mode: rules as 'allow', rule: '*' }
+  if (!rules || typeof rules !== 'object') return { mode: 'allow' }
+  const hits = Object.entries(rules as Record<string, unknown>)
+    .filter(([pattern, mode]) => typeof mode === 'string' && wildcard(pattern).test(name))
+    .sort((a, b) => b[0].replace(/\*/g, '').length - a[0].replace(/\*/g, '').length)
+  return hits.length ? { mode: hits[0]![1] as 'allow', rule: hits[0]![0] } : { mode: 'allow' }
+}
+
+export async function listSkillViews(directory?: string): Promise<{ skills: SkillView[]; library: Library; permissions: unknown; available: boolean }> {
+  const query = { directory: directory || undefined }
+  const [loaded, config, library, paths] = await Promise.all([
+    opencodeFetch<Array<{ name: string; description?: string; location?: string; content?: string }>>('/skill', { query, timeoutMs: 20_000 }).then((r) => ({ ok: true, list: Array.isArray(r) ? r : [] })).catch(() => ({ ok: false, list: [] as Array<{ name: string; description?: string; location?: string; content?: string }> })),
+    opencodeFetch<{ permission?: Record<string, unknown> }>('/config', { query, timeoutMs: 20_000 }).catch(() => ({} as { permission?: Record<string, unknown> })),
+    readLibrary(),
+    opencodeFetch<{ home?: string }>('/path', { query, timeoutMs: 10_000 }).catch(() => ({} as { home?: string }))
+  ])
+  const permissions = (config.permission as Record<string, unknown> | undefined)?.skill
+  const views: SkillView[] = []
+  for (const s of loaded.list) {
+    if (!s?.name) continue
+    const source = sourceOf(s.location, paths.home)
+    const own = library.skills[s.name]
+    let content = typeof s.content === 'string' ? s.content : undefined
+    // older servers return no content: project skills can be read through the file API
+    if (content === undefined && source === 'project' && s.location && directory) {
+      const relative = s.location.replace(/\\/g, '/').replace(`${directory.replace(/\\/g, '/').replace(/\/+$/, '')}/`, '')
+      content = await opencodeFetch<{ content?: string }>('/file/content', { query: { directory, path: relative }, timeoutMs: 10_000 })
+        .then((r) => (typeof r?.content === 'string' ? r.content : undefined)).catch(() => undefined)
+    }
+    // the body opencode returns lacks the frontmatter: show it whole again
+    if (content !== undefined && !/^---\r?\n/.test(content)) content = buildSkillMd(s.name, s.description || '', content)
+    const perm = skillPermission(permissions, s.name)
+    views.push({
+      name: s.name,
+      description: s.description,
+      location: s.location,
+      source: own && source === 'remote' ? 'library' : source,
+      content,
+      permission: perm.mode,
+      permissionRule: perm.rule,
+      ...(own ? { library: { version: own.version, updatedAt: own.updatedAt, loaded: true, origin: own.origin } } : {}),
+      checks: content ? lintSkill(content, s.name) : []
+    })
+  }
+  // library skills opencode has not loaded yet (saved, waiting for a reload)
+  for (const own of Object.values(library.skills)) {
+    if (views.some((v) => v.name === own.name)) continue
+    const perm = skillPermission(permissions, own.name)
+    views.push({
+      name: own.name,
+      description: own.description,
+      source: 'library',
+      content: own.files['SKILL.md'],
+      permission: perm.mode,
+      permissionRule: perm.rule,
+      library: { version: own.version, updatedAt: own.updatedAt, loaded: false, origin: own.origin },
+      checks: lintSkill(own.files['SKILL.md'] || '', own.name)
+    })
+  }
+  // a library copy shows the library's current text (opencode may hold an older one)
+  for (const view of views) {
+    const own = library.skills[view.name]
+    if (own) {
+      view.content = own.files['SKILL.md']
+      view.checks = lintSkill(view.content || '', view.name)
+    }
+  }
+  views.sort((a, b) => a.name.localeCompare(b.name))
+  return { skills: views, library, permissions, available: loaded.ok }
+}
+
+// ---- writing and improving with a model ----
+
+const SKILL_GUIDE = [
+  'You write opencode skills: a SKILL.md with YAML frontmatter and a markdown body the agent loads on demand.',
+  'Rules: frontmatter has `name` (lowercase-hyphen, max 64 chars) and `description`.',
+  'The description is always visible to the model, the body only when loaded: the description says WHAT the skill does AND WHEN to use it,',
+  'in third person ("Use when…"), front-loading the keywords and file names a user would say; add "Use ONLY when…" if it must stay quiet on nearby topics.',
+  'The body gives concrete, ordered instructions, conventions, commands and short examples; no filler, no marketing.',
+  'Reply with the complete SKILL.md only, starting with ---, no code fences around it, no commentary.'
+].join('\n')
+
+function stripFences(text: string) {
+  return text.trim().replace(/^```(?:markdown|md)?\s*\n/i, '').replace(/\n```\s*$/, '').trim() + '\n'
+}
+
+export async function aiSkill(opts: { mode: 'improve' | 'create'; name?: string; content?: string; brief?: string; model?: string; directory?: string }) {
+  const prompt = opts.mode === 'improve'
+    ? [
+        `Improve this skill${opts.name ? ` (${opts.name})` : ''}. Keep its name, purpose and every concrete fact; fix the frontmatter, sharpen the description so it triggers at the right time, and make the instructions clearer and better structured.`,
+        opts.brief ? `What the user wants changed: ${opts.brief}` : '',
+        '',
+        opts.content || ''
+      ].join('\n')
+    : [
+        `Write a new skill${opts.name ? ` named "${opts.name}"` : ''}.`,
+        `What it is for: ${opts.brief || '(not given)'}`
+      ].join('\n')
+  return stripFences(await aiText({ model: opts.model, directory: opts.directory, system: SKILL_GUIDE, prompt }))
+}
diff --git a/server/utils/usage.ts b/server/utils/usage.ts
new file mode 100644
index 0000000..86d2170
--- /dev/null
+++ b/server/utils/usage.ts
@@ -0,0 +1,176 @@
+// Usage & cost: turn opencode messages into compact per-reply rows and the
+// providers list into a list-price table. Pure helpers (no Nitro globals) so
+// they unit-test directly; the endpoint is server/api/v1/usage.get.ts.
+
+export interface UsageTokens {
+  input: number
+  output: number
+  reasoning: number
+  cacheRead: number
+  cacheWrite: number
+}
+
+/** One assistant reply: who/when/which model, what opencode charged, the tokens. */
+export interface UsageRow {
+  sessionID: string
+  /** set when the reply belongs to a subagent session */
+  parentID?: string
+  title?: string
+  parentTitle?: string
+  time: number
+  completed?: number
+  providerID: string
+  modelID: string
+  agent?: string
+  cost: number
+  tokens: UsageTokens
+}
+
+/** List price in USD per million tokens. */
+export interface ModelPrice {
+  input: number
+  output: number
+  cacheRead: number
+  cacheWrite: number
+}
+
+export interface UsageSession {
+  id: string
+  title?: string
+  parentID?: string
+}
+
+type Loose = Record<string, any>
+
+const num = (v: unknown) => (typeof v === 'number' && Number.isFinite(v) ? v : 0)
+
+function tokensOf(t: Loose | undefined): UsageTokens {
+  return {
+    input: num(t?.input),
+    output: num(t?.output),
+    reasoning: num(t?.reasoning),
+    cacheRead: num(t?.cache?.read),
+    cacheWrite: num(t?.cache?.write)
+  }
+}
+
+/**
+ * Rows for every assistant message of one session. Older servers keep the
+ * tokens (and sometimes the cost) only on `step-finish` parts: those are
+ * summed when the message itself has none.
+ */
+export function usageRowsFromMessages(session: UsageSession, messages: unknown): UsageRow[] {
+  if (!Array.isArray(messages)) return []
+  const rows: UsageRow[] = []
+  for (const m of messages as Loose[]) {
+    const info = m?.info as Loose | undefined
+    if (!info || info.role !== 'assistant') continue
+    let tokens = info.tokens ? tokensOf(info.tokens) : undefined
+    let cost = num(info.cost)
+    if (!tokens || cost === 0) {
+      const steps = (Array.isArray(m.parts) ? m.parts : []).filter((p: Loose) => p?.type === 'step-finish')
+      if (!tokens) {
+        tokens = { input: 0, output: 0, reasoning: 0, cacheRead: 0, cacheWrite: 0 }
+        for (const p of steps) {
+          const t = tokensOf(p.tokens)
+          tokens.input += t.input
+          tokens.output += t.output
+          tokens.reasoning += t.reasoning
+          tokens.cacheRead += t.cacheRead
+          tokens.cacheWrite += t.cacheWrite
+        }
+      }
+      if (cost === 0) cost = steps.reduce((n: number, p: Loose) => n + num(p.cost), 0)
+    }
+    const row: UsageRow = {
+      sessionID: session.id,
+      title: session.title,
+      time: num(info.time?.created) || num(info.time?.completed),
+      providerID: String(info.providerID || 'unknown'),
+      modelID: String(info.modelID || 'unknown'),
+      cost,
+      tokens
+    }
+    if (session.parentID) row.parentID = session.parentID
+    if (info.time?.completed) row.completed = num(info.time.completed)
+    const agent = info.agent || info.mode
+    if (agent) row.agent = String(agent)
+    rows.push(row)
+  }
+  return rows
+}
+
+/**
+ * `{ "provider/model": price }` from /config/providers. Prices come from
+ * models.dev as `cost: { input, output, cache: { read, write } }` (newer) or
+ * `cost: { input, output, cache_read, cache_write }` (older). Models without a
+ * `cost` object are left out (unknown price); all-zero prices stay (free).
+ */
+export function priceTable(providers: unknown): Record<string, ModelPrice> {
+  const list = Array.isArray(providers)
+    ? providers
+    : (providers as Loose)?.providers ?? (providers as Loose)?.all ?? []
+  const out: Record<string, ModelPrice> = {}
+  for (const p of Array.isArray(list) ? list as Loose[] : []) {
+    if (!p?.id || !p.models || typeof p.models !== 'object') continue
+    for (const [key, model] of Object.entries(p.models as Record<string, Loose>)) {
+      const c = model?.cost
+      if (!c || typeof c !== 'object') continue
+      out[`${p.id}/${model.id || key}`] = {
+        input: num(c.input),
+        output: num(c.output),
+        cacheRead: num(c.cache?.read ?? c.cache_read),
+        cacheWrite: num(c.cache?.write ?? c.cache_write)
+      }
+    }
+  }
+  return out
+}
+
+/** The same tokens at list price (reasoning billed as output, like opencode does). */
+export function estimateCost(tokens: UsageTokens, price: ModelPrice) {
+  return (
+    tokens.input * price.input
+    + (tokens.output + tokens.reasoning) * price.output
+    + tokens.cacheRead * price.cacheRead
+    + tokens.cacheWrite * price.cacheWrite
+  ) / 1_000_000
+}
+
+/** `fn` over `items`, at most `limit` running at once; results keep the input order. */
+export async function mapLimit<T, R>(items: T[], limit: number, fn: (item: T) => Promise<R>): Promise<R[]> {
+  const out = new Array<R>(items.length)
+  let next = 0
+  const worker = async () => {
+    while (next < items.length) {
+      const i = next++
+      out[i] = await fn(items[i]!)
+    }
+  }
+  await Promise.all(Array.from({ length: Math.min(limit, items.length) }, worker))
+  return out
+}
+
+/** Small LRU of per-session rows, valid while the session's `time.updated` is unchanged. */
+export class UsageRowCache {
+  private map = new Map<string, { updated: number; rows: UsageRow[] }>()
+  constructor(private max = 2000) {}
+
+  get(key: string, updated: number) {
+    const hit = this.map.get(key)
+    if (!hit || hit.updated !== updated) return undefined
+    this.map.delete(key) // refresh recency
+    this.map.set(key, hit)
+    return hit.rows
+  }
+
+  set(key: string, updated: number, rows: UsageRow[]) {
+    this.map.delete(key)
+    this.map.set(key, { updated, rows })
+    while (this.map.size > this.max) this.map.delete(this.map.keys().next().value!)
+  }
+
+  get size() {
+    return this.map.size
+  }
+}
diff --git a/tests/compat/chat.spec.ts b/tests/compat/chat.spec.ts
index 69910fd..35a2408 100644
--- a/tests/compat/chat.spec.ts
+++ b/tests/compat/chat.spec.ts
@@ -206,12 +206,15 @@ test('subagent per MCP: the orchestrator delegates, the specialist only has its
       : `call task ${JSON.stringify({ subagent_type: 'mcp-nest-demo', description: 'demo', prompt: 'nest probe' })}`
     await request.post(`/api/v1/sessions/${session.id}/prompt`, { data: { directory: WORK, agent: 'orchestrator', text: call }, timeout: 150_000 })
 
-    // what the mock model was offered: the specialist only nest-demo's tools,
-    // the orchestrator none of them
+    // what the mock model was offered: the specialist only nest-demo's tools
+    // (plus the subagent tool to hand work to the other specialists), the
+    // orchestrator none of them
     const log = readFileSync(MOCK_LOG, 'utf8').trim().split('\n').map((l) => JSON.parse(l) as { userText: string; tools: string[] })
     const specialist = log.filter((l) => l.userText.includes('nest probe') && !l.userText.startsWith('call') && l.tools.length).at(-1)
     expect(specialist?.tools.length).toBeGreaterThan(0)
-    expect(specialist?.tools.every((t) => t.startsWith('nest-demo_'))).toBe(true)
+    const delegation = ['task', 'subagent']
+    expect(specialist?.tools.some((t) => t.startsWith('nest-demo_'))).toBe(true)
+    expect(specialist?.tools.every((t) => t.startsWith('nest-demo_') || delegation.includes(t))).toBe(true)
     const orchestrator = log.filter((l) => l.userText.startsWith('call') && l.userText.includes('nest probe') && l.tools.length).at(-1)
     expect(orchestrator?.tools.some((t) => t.startsWith('nest-demo_'))).toBe(false)
   } finally {
diff --git a/tests/e2e/ux.spec.ts b/tests/e2e/ux.spec.ts
new file mode 100644
index 0000000..e7db9a2
--- /dev/null
+++ b/tests/e2e/ux.spec.ts
@@ -0,0 +1,162 @@
+import { expect, test } from '@playwright/test'
+
+// dir params (base64url) of the mock's two projects
+const DIR = Buffer.from('/projects/space-invaders').toString('base64url')
+const OTHER = Buffer.from('/projects/home-dashboard').toString('base64url')
+
+test('switching projects keeps the sidebar mounted and swaps its sessions', async ({ page }) => {
+  await page.goto(`/p/${OTHER}`)
+  await page.goto(`/p/${DIR}`)
+  await expect(page.getByText('Add power-ups to the game loop').first()).toBeVisible()
+  // mark the live sidebar element: a remount would drop the marker
+  await page.locator('aside', { has: page.getByLabel('Project tools') }).evaluate((el) => { el.dataset.marker = 'kept' })
+
+  await page.getByRole('button', { name: /switch project/ }).first().click()
+  await page.getByRole('menuitem', { name: /home-dashboard/ }).click()
+  await expect(page).toHaveURL(new RegExp(`/p/${OTHER}$`))
+  await expect(page.locator('aside[data-marker="kept"]')).toHaveCount(1)
+  await expect(page.getByRole('button', { name: /^Project home-dashboard/ }).first()).toBeVisible()
+})
+
+test('the sidebar collapses to an icon rail and back', async ({ page }) => {
+  await page.goto(`/p/${DIR}`)
+  await page.getByRole('button', { name: 'Collapse sidebar' }).click()
+  await expect(page.getByRole('button', { name: 'Expand sidebar' })).toBeVisible()
+  await expect(page.getByRole('navigation', { name: 'Project', exact: true }).getByRole('link', { name: 'Usage & cost' })).toBeVisible()
+  await page.getByRole('button', { name: 'Expand sidebar' }).click()
+  await expect(page.getByLabel('Project tools')).toBeVisible()
+})
+
+test('Tab switches the agent and arrow up recalls earlier prompts', async ({ page }) => {
+  await page.goto(`/p/${DIR}/session/ses_mock1`)
+  const box = page.getByPlaceholder(/Ask opencode/)
+  await box.click()
+  await box.press('Tab')
+  await expect(page.getByTestId('prompt-config').getByText('build', { exact: true })).toBeVisible()
+  await box.press('Tab')
+  await expect(page.getByTestId('prompt-config').getByText('plan', { exact: true })).toBeVisible()
+
+  const sent = page.waitForRequest((r) => r.method() === 'POST' && /\/session\/ses_mock1\/message/.test(r.url()))
+  await box.fill('remember this prompt')
+  await box.press('Enter')
+  expect((await sent).postDataJSON().agent).toBe('plan')
+  await expect(box).toHaveValue('')
+  await box.press('ArrowUp')
+  await expect(box).toHaveValue('remember this prompt')
+  await box.press('ArrowDown')
+  await expect(box).toHaveValue('')
+})
+
+test('a pasted screenshot becomes an image attachment', async ({ page }) => {
+  await page.goto(`/p/${DIR}/session/ses_mock1`)
+  const box = page.getByPlaceholder(/Ask opencode/)
+  await box.click()
+  await box.evaluate((el) => {
+    // 1x1 png
+    const bytes = Uint8Array.from(atob('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=='), (c) => c.charCodeAt(0))
+    const data = new DataTransfer()
+    data.items.add(new File([bytes], 'image.png', { type: 'image/png' }))
+    el.dispatchEvent(new ClipboardEvent('paste', { clipboardData: data, bubbles: true, cancelable: true }))
+  })
+  await expect(page.getByRole('button', { name: /Preview pasted .*\.png/ })).toBeVisible()
+  const sent = page.waitForRequest((r) => r.method() === 'POST' && /\/session\/ses_mock1\/message/.test(r.url()))
+  await page.getByRole('button', { name: 'Send', exact: true }).click()
+  const parts = (await sent).postDataJSON().parts as Array<{ type: string; mime?: string; url?: string }>
+  expect(parts[0]).toMatchObject({ type: 'file', mime: 'image/png' })
+  expect(parts[0]!.url).toMatch(/^data:image\/png;base64,/)
+})
+
+test('chat options explain themselves and link to their settings', async ({ page }) => {
+  await page.goto(`/p/${DIR}/session/ses_mock1`)
+  await page.getByRole('button', { name: /Show model, think level/ }).click()
+  await page.getByRole('button', { name: 'About: Agent', exact: true }).click()
+  const dialog = page.getByRole('dialog', { name: 'Agent' })
+  await expect(dialog.getByText('Press Tab in the input')).toBeVisible()
+  await dialog.getByRole('link', { name: 'Edit agents' }).click()
+  await expect(page).toHaveURL(new RegExp(`/p/${DIR}/agents$`))
+  await expect(page.getByRole('heading', { name: 'Agents', exact: true })).toBeVisible()
+  await expect(page.getByText('plan', { exact: true }).first()).toBeVisible()
+})
+
+test('usage groups replies by day and model', async ({ page }) => {
+  await page.goto(`/p/${DIR}/stats`)
+  await expect(page.getByRole('heading', { name: 'Usage & cost' })).toBeVisible()
+  await page.getByRole('button', { name: 'Model', exact: true }).click()
+  await expect(page.getByText(/Estimated/).first()).toBeVisible()
+})
+
+test('projects can be starred on the home page', async ({ page }) => {
+  await page.goto('/')
+  const star = page.getByRole('button', { name: /Star project/ }).nth(1)
+  await star.click()
+  await expect(page.getByRole('button', { name: 'Unstar project' })).toHaveCount(1)
+  await page.getByRole('button', { name: 'Unstar project' }).click()
+  await expect(page.getByRole('button', { name: 'Unstar project' })).toHaveCount(0)
+})
+
+test('JSON for a front-end component renders as cards and tables', async ({ page }) => {
+  const payload = {
+    __componentType: 'reservation-details',
+    message: 'Reservation EXP-1',
+    data: { reservationId: 'EXP-1', status: 'Checked-in', guest: { name: 'Ada Lovelace', country: 'UK' }, rooms: [{ roomName: '303', adults: 2 }] }
+  }
+  await page.route('**/api/opencode/session/ses_mock1/message*', (route) => route.request().method() === 'GET'
+    ? route.fulfill({
+      json: [{
+        info: { id: 'msg_h1', sessionID: 'ses_mock1', role: 'assistant', time: { created: Date.now(), completed: Date.now() } },
+        parts: [{ id: 'prt_h1', messageID: 'msg_h1', sessionID: 'ses_mock1', type: 'tool', tool: 'hotelier-tools_get_reservation_details_ui', state: { status: 'completed', input: {}, output: JSON.stringify(payload), title: 'details' } }]
+      }]
+    })
+    : route.fallback())
+  await page.goto(`/p/${DIR}/session/ses_mock1`)
+  await expect(page.getByText('Reservation EXP-1')).toBeVisible()
+  await expect(page.getByText('Ada Lovelace')).toBeVisible()
+  await expect(page.getByRole('cell', { name: '303' })).toBeVisible()
+  // the data is all there: no "run the tool again" offer
+  await expect(page.getByRole('button', { name: /Render UI/ })).toHaveCount(0)
+
+  await page.getByRole('button', { name: 'Chat width' }).click()
+  await page.getByRole('menuitemcheckbox', { name: 'Full width' }).click()
+  await expect.poll(() => page.evaluate(() => document.cookie)).toContain('oc-chat-width=full')
+})
+
+test('skills: see what they say, write one into the library, delete it', async ({ page }) => {
+  await page.goto(`/p/${DIR}/skills`)
+  await expect(page.getByRole('heading', { name: /Skills/ })).toBeVisible()
+  await page.getByRole('button', { name: /release-notes/ }).click()
+  await expect(page.getByText('When the agent uses it')).toBeVisible()
+  await expect(page.getByText('Write release notes').first()).toBeVisible()
+  await page.getByRole('tab', { name: /Checks/ }).click()
+  await expect(page.getByText(/body is almost empty/)).toBeVisible()
+  await page.keyboard.press('Escape')
+
+  await page.getByRole('button', { name: 'New skill' }).click()
+  await page.getByPlaceholder('release-notes').fill('e2e-skill')
+  await page.getByRole('button', { name: 'From template' }).click()
+  const save = page.getByRole('button', { name: 'Save to library' })
+  await expect(save).toBeEnabled()
+  await save.click()
+  await expect(page.getByText(/e2e-skill saved/).first()).toBeVisible()
+  await page.keyboard.press('Escape')
+  await expect(page.getByRole('button', { name: /e2e-skill/ })).toBeVisible()
+
+  await page.getByRole('button', { name: /e2e-skill/ }).click()
+  await page.getByRole('button', { name: 'Delete' }).click()
+  await page.getByRole('button', { name: 'Delete?' }).click()
+  await expect(page.getByRole('button', { name: /e2e-skill/ })).toHaveCount(0)
+})
+
+test('the projects panel lists recent chats per project, configurable', async ({ page }) => {
+  await page.goto(`/p/${DIR}`)
+  await page.getByRole('button', { name: 'Show projects panel' }).click()
+  const panel = page.getByRole('complementary', { name: 'Projects' })
+  await expect(panel.getByRole('link', { name: /Add power-ups to the game loop/ }).first()).toBeVisible()
+
+  await panel.getByRole('button', { name: 'Chat list settings' }).click()
+  const dialog = page.getByRole('dialog', { name: 'Chats in the projects panel' })
+  await dialog.getByRole('spinbutton').nth(1).fill('1')
+  await dialog.getByRole('button', { name: 'Save' }).click()
+  await expect(panel.getByRole('button', { name: /more$/ }).first()).toBeVisible()
+  await panel.getByRole('button', { name: /more$/ }).first().click()
+  await expect(panel.getByRole('button', { name: 'Less' }).first()).toBeVisible()
+})
diff --git a/tests/unit/recent-chats.test.ts b/tests/unit/recent-chats.test.ts
new file mode 100644
index 0000000..d27f252
--- /dev/null
+++ b/tests/unit/recent-chats.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { RECENT_CHATS_DEFAULTS, pickRecentChats, shortAge } from '../../app/utils/recentChats'
+
+const NOW = Date.UTC(2026, 9, 15, 12)
+const H = 3600_000
+const chat = (id: string, hoursAgo: number, extra: Record<string, unknown> = {}) =>
+  ({ id, title: id, time: { created: NOW - hoursAgo * H, updated: NOW - hoursAgo * H }, ...extra })
+
+const sessions = [
+  chat('fresh1', 1), chat('fresh2', 2), chat('fresh3', 3), chat('fresh4', 5), chat('fresh5', 8), chat('fresh6', 20),
+  chat('unread-2d', 48), chat('unread-5d', 120), chat('old-running', 200), chat('old', 300), chat('starred-old', 400),
+  chat('sub', 1, { parentID: 'fresh1' })
+]
+const unread = new Set(['unread-2d', 'unread-5d'])
+const pick = (settings = {}) => pickRecentChats(sessions, {
+  settings: { ...RECENT_CHATS_DEFAULTS, ...settings },
+  favorites: ['starred-old'],
+  isUnread: (s) => unread.has(s.id),
+  busy: { 'old-running': true },
+  now: NOW
+})
+const ids = (list: Array<{ session: { id: string } }>) => list.map((c) => c.session.id)
+
+describe('recent chats in the projects panel', () => {
+  it('lists starred, then running, unread and recent chats, capped', () => {
+    const p = pick()
+    expect(ids(p.starred)).toEqual(['starred-old'])
+    // running first, then unread within 3 days, then the newest within 24h
+    expect(ids(p.recent)).toEqual(['old-running', 'unread-2d', 'fresh1', 'fresh2', 'fresh3'])
+    expect(ids(p.more)).toContain('fresh4')
+    expect(ids(p.more)).not.toContain('sub')
+    expect(p.starred.length + p.recent.length + p.more.length).toBeLessThanOrEqual(RECENT_CHATS_DEFAULTS.expandMax)
+  })
+
+  it('follows the settings', () => {
+    const p = pick({ maxRecent: 10, showBusy: false, unreadDays: 7, starredMax: 0, includeSubagents: true, expandMax: 12 })
+    expect(p.starred).toEqual([])
+    expect(ids(p.recent)).toEqual(['unread-2d', 'unread-5d', 'fresh1', 'sub', 'fresh2', 'fresh3', 'fresh4', 'fresh5', 'fresh6'])
+    expect(p.recent.length + p.more.length).toBe(12)
+  })
+
+  it('formats short ages', () => {
+    expect(shortAge(NOW - 30_000, NOW)).toBe('now')
+    expect(shortAge(NOW - 5 * 60_000, NOW)).toBe('5m')
+    expect(shortAge(NOW - 3 * H, NOW)).toBe('3h')
+    expect(shortAge(NOW - 50 * H, NOW)).toBe('2d')
+  })
+})
diff --git a/tests/unit/skills.test.ts b/tests/unit/skills.test.ts
new file mode 100644
index 0000000..a8acdfb
--- /dev/null
+++ b/tests/unit/skills.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest'
+import { buildSkillMd, catalogIndex, lintSkill, parseSkillMd, skillPermission } from '../../server/utils/skills'
+
+const GOOD = buildSkillMd(
+  'release-notes',
+  'Use when the user asks for release notes or a changelog entry: summarizes the git log since the last tag.',
+  ['# Release notes', '', ...Array.from({ length: 12 }, (_, i) => `${i + 1}. Step number ${i + 1} of writing good release notes for users.`)].join('\n')
+)
+
+describe('skills', () => {
+  it('reads and writes SKILL.md frontmatter', () => {
+    const parsed = parseSkillMd(GOOD)
+    expect(parsed.name).toBe('release-notes')
+    expect(parsed.description).toMatch(/^Use when/)
+    expect(parsed.body).toMatch(/^\s*# Release notes/)
+    const folded = parseSkillMd('---\nname: x\ndescription: >\n  first line\n  second line\nlicense: "MIT"\n---\nbody')
+    expect(folded.description).toBe('first line second line')
+    expect(folded.meta).toEqual({ license: 'MIT' })
+    expect(parseSkillMd('no frontmatter').hasFrontmatter).toBe(false)
+  })
+
+  it('checks opencode rules and gives advice', () => {
+    expect(lintSkill(GOOD, 'release-notes')).toEqual([])
+    const bad = lintSkill('---\nname: Release_Notes\n---\nshort', 'release-notes')
+    expect(bad.filter((c) => c.level === 'error').map((c) => c.message).join(' ')).toMatch(/lowercase.*must match.*description is missing/s)
+    expect(lintSkill(buildSkillMd('x', 'I help you do things with stuff and more', 'tiny')).map((c) => c.level)).toContain('tip')
+  })
+
+  it('applies the most specific permission rule', () => {
+    expect(skillPermission(undefined, 'a')).toEqual({ mode: 'allow' })
+    expect(skillPermission('deny', 'a')).toEqual({ mode: 'deny', rule: '*' })
+    const rules = { '*': 'ask', 'internal-*': 'deny', 'internal-docs': 'allow' }
+    expect(skillPermission(rules, 'internal-docs')).toEqual({ mode: 'allow', rule: 'internal-docs' })
+    expect(skillPermission(rules, 'internal-tools')).toEqual({ mode: 'deny', rule: 'internal-*' })
+    expect(skillPermission(rules, 'other')).toEqual({ mode: 'ask', rule: '*' })
+  })
+
+  it('serves the library in opencode\'s catalog format', () => {
+    const index = catalogIndex({
+      rev: 3,
+      skills: {
+        b: { name: 'b', description: 'B', files: { 'SKILL.md': '…', 'ref.md': '…' }, version: 2, updatedAt: 0 },
+        a: { name: 'a', description: 'A', files: { 'SKILL.md': '…' }, version: 1, updatedAt: 0 }
+      }
+    })
+    expect(index).toEqual({
+      skills: [
+        { name: 'a', description: 'A', version: '1', files: ['SKILL.md'] },
+        { name: 'b', description: 'B', version: '2', files: ['SKILL.md', 'ref.md'] }
+      ]
+    })
+  })
+})
diff --git a/tests/unit/usage.test.ts b/tests/unit/usage.test.ts
new file mode 100644
index 0000000..39427e1
--- /dev/null
+++ b/tests/unit/usage.test.ts
@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest'
+import { UsageRowCache, estimateCost, mapLimit, priceTable, usageRowsFromMessages } from '../../server/utils/usage'
+
+describe('usageRowsFromMessages', () => {
+  it('keeps assistant replies with their model, agent, cost and tokens', () => {
+    const rows = usageRowsFromMessages({ id: 'ses_child', title: 'Explore', parentID: 'ses_1' }, [
+      { info: { id: 'm1', role: 'user', time: { created: 1 } }, parts: [] },
+      {
+        info: {
+          id: 'm2', role: 'assistant', time: { created: 2, completed: 5 }, providerID: 'anthropic', modelID: 'claude-x',
+          mode: 'build', cost: 0.25, tokens: { input: 100, output: 20, reasoning: 5, cache: { read: 1000, write: 50 } }
+        },
+        parts: [{ type: 'step-finish', cost: 9, tokens: { input: 9 } }]
+      }
+    ])
+    expect(rows).toEqual([{
+      sessionID: 'ses_child', parentID: 'ses_1', title: 'Explore', time: 2, completed: 5,
+      providerID: 'anthropic', modelID: 'claude-x', agent: 'build', cost: 0.25,
+      tokens: { input: 100, output: 20, reasoning: 5, cacheRead: 1000, cacheWrite: 50 }
+    }])
+  })
+
+  it('sums step-finish parts when the message has no tokens or cost (older servers)', () => {
+    const [row] = usageRowsFromMessages({ id: 's' }, [{
+      info: { id: 'm', role: 'assistant', time: { created: 3 }, providerID: 'p', modelID: 'm', agent: 'plan' },
+      parts: [
+        { type: 'step-start' },
+        { type: 'step-finish', cost: 0.1, tokens: { input: 10, output: 2, cache: { read: 4 } } },
+        { type: 'step-finish', cost: 0.2, tokens: { input: 5, output: 1, reasoning: 3 } }
+      ]
+    }])
+    expect(row!.cost).toBeCloseTo(0.3)
+    expect(row!.tokens).toEqual({ input: 15, output: 3, reasoning: 3, cacheRead: 4, cacheWrite: 0 })
+    expect(row!.agent).toBe('plan')
+    expect(row!.parentID).toBeUndefined()
+  })
+
+  it('tolerates junk', () => {
+    expect(usageRowsFromMessages({ id: 's' }, null)).toEqual([])
+    expect(usageRowsFromMessages({ id: 's' }, [null, {}, { info: { role: 'assistant' } }])).toHaveLength(1)
+  })
+})
+
+describe('priceTable', () => {
+  it('reads both cost shapes and skips models without a price', () => {
+    const table = priceTable({
+      providers: [
+        { id: 'anthropic', models: { a: { id: 'a', cost: { input: 3, output: 15, cache: { read: 0.3, write: 3.75 } } } } },
+        { id: 'old', models: { b: { cost: { input: 1, output: 2, cache_read: 0.1, cache_write: 1.25 } }, c: { name: 'no price' } } },
+        { id: 'free', models: { z: { id: 'z', cost: { input: 0, output: 0 } } } }
+      ]
+    })
+    expect(table).toEqual({
+      'anthropic/a': { input: 3, output: 15, cacheRead: 0.3, cacheWrite: 3.75 },
+      'old/b': { input: 1, output: 2, cacheRead: 0.1, cacheWrite: 1.25 },
+      'free/z': { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 }
+    })
+    expect(priceTable(null)).toEqual({})
+  })
+})
+
+describe('estimateCost', () => {
+  it('prices per million tokens, reasoning at the output rate', () => {
+    const cost = estimateCost(
+      { input: 1_000_000, output: 100_000, reasoning: 100_000, cacheRead: 2_000_000, cacheWrite: 0 },
+      { input: 3, output: 15, cacheRead: 0.3, cacheWrite: 3.75 }
+    )
+    expect(cost).toBeCloseTo(3 + 3 + 0.6)
+  })
+})
+
+describe('mapLimit', () => {
+  it('keeps order and never runs more than the limit at once', async () => {
+    let running = 0
+    let peak = 0
+    const out = await mapLimit([1, 2, 3, 4, 5, 6, 7], 3, async (n) => {
+      running++
+      peak = Math.max(peak, running)
+      await new Promise((r) => setTimeout(r, 5 * (8 - n)))
+      running--
+      return n * 2
+    })
+    expect(out).toEqual([2, 4, 6, 8, 10, 12, 14])
+    expect(peak).toBe(3)
+  })
+})
+
+describe('UsageRowCache', () => {
+  it('hits only while updated matches and evicts the least recently used', () => {
+    const cache = new UsageRowCache(2)
+    cache.set('a', 1, [])
+    cache.set('b', 1, [])
+    expect(cache.get('a', 2)).toBeUndefined()
+    expect(cache.get('a', 1)).toEqual([])
+    cache.set('c', 1, [])
+    expect(cache.size).toBe(2)
+    expect(cache.get('b', 1)).toBeUndefined()
+    expect(cache.get('a', 1)).toEqual([])
+  })
+})