From 18d483398ca95d10ca2d9af40ecbac590adb03cc Mon Sep 17 00:00:00 2001
From: "Maksym Hryzodub [DREAM]" <maksym.hryzodub@dreamvention.com>
Date: Thu, 20 Aug 2026 21:06:32 +0300
Subject: [PATCH 1/5] feat(agent): agent workspace with vertical rail and
 settings navigator (CLEAN-36)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Admin: the agents table is gone. /agents resolves to the Ranch admin agent
and redirects to its canonical address. A vertical rail of agents sits on the
left, the chat keeps the pod logs beside it in the middle, and the eight
settings sections move into a narrow navigator on the right — opening one
renders it on the canvas in place of the conversation, at the width it already
had, so none of the eight components changed.

App: the card grid is replaced by the same rail; no settings panel. The last
opened agent is remembered per browser and validated against the visible list.

The conversation is hidden with v-show rather than unmounted, so returning from
a section costs no reconnect and keeps the transcript. The per-agent remount key
sits on the workspace's middle column, not the page, so the rail survives an
agent switch without refetching.

No API change. Admin primary navigation untouched.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .gitignore                                    |   4 +
 .specify/feature.json                         |   2 +-
 .../agent/agent/components/agent/chat/Tab.vue |  21 +-
 .../agent/components/agent/item/Provider.vue  | 291 +-----------
 .../agent/agent/components/agent/item/tabs.ts |  13 -
 .../agent/components/agent/list/Provider.vue  | 276 ------------
 .../components/agent/settings/NavItem.vue     |  46 ++
 .../agent/components/agent/settings/Panel.vue | 216 +++++++++
 .../components/agent/settings/sections.ts     |  95 ++++
 .../components/agent/workspace/Canvas.vue     | 125 +++++
 .../agent/components/agent/workspace/Main.vue | 227 ++++++++++
 .../components/agent/workspace/Provider.vue   | 175 +++++++
 .../agent/components/agent/workspace/Rail.vue |  79 ++++
 .../components/agent/workspace/RailItem.vue   |  61 +++
 .../components/agent/workspace/TopBar.vue     |  51 +++
 .../agent/composables/useAgentRailEntries.ts  | 114 +++++
 .../composables/useAgentSectionCounts.ts      | 132 ++++++
 .../agent/composables/useSettingsPanel.ts     |  94 ++++
 .../agent/agent/pages/agents/[id]/index.vue   |  20 +-
 .../slices/agent/agent/pages/agents/index.vue |  55 ++-
 .../common/components/layout/Provider.vue     |   2 +-
 admin/slices/common/utils/formatDate.ts       |   8 +-
 app/i18n.sync.json                            |  11 +-
 .../agent/components/agentChat/Provider.vue   |  22 +-
 .../agent/components/agentList/Provider.vue   | 177 --------
 .../components/agentWorkspace/Provider.vue    | 157 +++++++
 .../agent/components/agentWorkspace/Rail.vue  |  77 ++++
 .../Card.vue => agentWorkspace/RailItem.vue}  | 102 ++---
 app/slices/agent/composables/useLastAgent.ts  |  49 ++
 app/slices/agent/i18n/locales/en.json         |  15 +-
 app/slices/agent/i18n/locales/ru.json         |  15 +-
 app/slices/agent/pages/agents/[id].vue        |   7 +-
 app/slices/agent/pages/agents/index.vue       |  60 ++-
 .../checklists/requirements.md                | 108 +++++
 .../contracts/components.md                   | 214 +++++++++
 .../contracts/preferences.md                  |  77 ++++
 .../contracts/routes.md                       | 101 +++++
 specs/006-agent-workspace-tabs/data-model.md  | 186 ++++++++
 specs/006-agent-workspace-tabs/plan.md        | 232 ++++++++++
 specs/006-agent-workspace-tabs/quickstart.md  | 231 ++++++++++
 specs/006-agent-workspace-tabs/research.md    | 308 +++++++++++++
 specs/006-agent-workspace-tabs/spec.md        | 426 ++++++++++++++++++
 specs/006-agent-workspace-tabs/tasks.md       | 264 +++++++++++
 43 files changed, 4072 insertions(+), 874 deletions(-)
 delete mode 100644 admin/slices/agent/agent/components/agent/item/tabs.ts
 delete mode 100644 admin/slices/agent/agent/components/agent/list/Provider.vue
 create mode 100644 admin/slices/agent/agent/components/agent/settings/NavItem.vue
 create mode 100644 admin/slices/agent/agent/components/agent/settings/Panel.vue
 create mode 100644 admin/slices/agent/agent/components/agent/settings/sections.ts
 create mode 100644 admin/slices/agent/agent/components/agent/workspace/Canvas.vue
 create mode 100644 admin/slices/agent/agent/components/agent/workspace/Main.vue
 create mode 100644 admin/slices/agent/agent/components/agent/workspace/Provider.vue
 create mode 100644 admin/slices/agent/agent/components/agent/workspace/Rail.vue
 create mode 100644 admin/slices/agent/agent/components/agent/workspace/RailItem.vue
 create mode 100644 admin/slices/agent/agent/components/agent/workspace/TopBar.vue
 create mode 100644 admin/slices/agent/agent/composables/useAgentRailEntries.ts
 create mode 100644 admin/slices/agent/agent/composables/useAgentSectionCounts.ts
 create mode 100644 admin/slices/agent/agent/composables/useSettingsPanel.ts
 delete mode 100644 app/slices/agent/components/agentList/Provider.vue
 create mode 100644 app/slices/agent/components/agentWorkspace/Provider.vue
 create mode 100644 app/slices/agent/components/agentWorkspace/Rail.vue
 rename app/slices/agent/components/{agentList/Card.vue => agentWorkspace/RailItem.vue} (55%)
 create mode 100644 app/slices/agent/composables/useLastAgent.ts
 create mode 100644 specs/006-agent-workspace-tabs/checklists/requirements.md
 create mode 100644 specs/006-agent-workspace-tabs/contracts/components.md
 create mode 100644 specs/006-agent-workspace-tabs/contracts/preferences.md
 create mode 100644 specs/006-agent-workspace-tabs/contracts/routes.md
 create mode 100644 specs/006-agent-workspace-tabs/data-model.md
 create mode 100644 specs/006-agent-workspace-tabs/plan.md
 create mode 100644 specs/006-agent-workspace-tabs/quickstart.md
 create mode 100644 specs/006-agent-workspace-tabs/research.md
 create mode 100644 specs/006-agent-workspace-tabs/spec.md
 create mode 100644 specs/006-agent-workspace-tabs/tasks.md

diff --git a/.gitignore b/.gitignore
index 013c1908..ba59b57e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,7 @@ api/prisma/schema.prisma
 .terraform.lock.hcl
 k3s_kubeconfig.yaml
 k3s_kustomization_backup.yaml
+
+# Python bytecode from .specify scripts
+__pycache__/
+export-1a/
diff --git a/.specify/feature.json b/.specify/feature.json
index 4be0e807..126b2cb2 100644
--- a/.specify/feature.json
+++ b/.specify/feature.json
@@ -1,3 +1,3 @@
 {
-  "feature_directory": "specs/002-nuxt4-migration"
+  "feature_directory": "specs/006-agent-workspace-tabs"
 }
diff --git a/admin/slices/agent/agent/components/agent/chat/Tab.vue b/admin/slices/agent/agent/components/agent/chat/Tab.vue
index 0c8f9bd7..f65b689d 100644
--- a/admin/slices/agent/agent/components/agent/chat/Tab.vue
+++ b/admin/slices/agent/agent/components/agent/chat/Tab.vue
@@ -79,11 +79,24 @@ watch(
 </script>
 
 <template>
-  <div class="flex items-center justify-center gap-3">
+  <!-- Height comes from the workspace canvas (h-full) rather than a viewport
+       calc — the chrome above this now varies, and a magic number that has to
+       be re-tuned every time a header or a padding moves is a bug waiting to
+       happen.
+
+       Widths: `max-w-200` and the even 50/50 split are unchanged, so on a wide
+       screen this pair looks exactly as it always did. What changed is the
+       floor. `min-w-100` on both halves meant a hard 812px minimum, and the
+       workspace's rail and settings panel can take the container below that —
+       at which point the row simply overflowed and `overflow-x-clip` ate the
+       chat's right border. The floor is now gated on there being room for it;
+       below that both halves shrink, and the logs can still be collapsed with
+       their own button to give the chat everything back. -->
+  <div class="flex h-full min-h-0 min-w-0 items-stretch justify-center gap-3">
     <div
       v-if="authStore.accessToken"
       ref="chatWrapRef"
-      class="relative h-[calc(100vh-15.5rem)] min-h-120 w-full min-w-100 max-w-200 basis-1/2"
+      class="relative h-full min-h-0 w-full min-w-0 max-w-200 basis-1/2 min-[1400px]:min-w-100"
     >
       <BridleProvider
         :api-url="apiUrl"
@@ -148,7 +161,7 @@ watch(
       </Transition>
     </div>
     <div
-      class="flex h-[calc(100vh-15.5rem)] min-h-120 w-full max-w-200 basis-1/2 flex-col gap-1"
+      class="flex h-full min-h-0 w-full min-w-0 max-w-200 basis-1/2 flex-col gap-1"
     >
       <div v-if="showSideLogs" class="min-h-0 flex-1 overflow-hidden">
         <AgentLogsPanel
@@ -156,7 +169,7 @@ watch(
           closable
           :restarting="restartUnderway"
           :first-start="agent.launchContext === 'initial'"
-          class="h-full min-w-100"
+          class="h-full min-w-0"
           @close="showSideLogs = false"
         />
       </div>
diff --git a/admin/slices/agent/agent/components/agent/item/Provider.vue b/admin/slices/agent/agent/components/agent/item/Provider.vue
index b434d194..ebba2d9f 100644
--- a/admin/slices/agent/agent/components/agent/item/Provider.vue
+++ b/admin/slices/agent/agent/components/agent/item/Provider.vue
@@ -1,289 +1,12 @@
 <script setup lang="ts">
-import {
-  IconAlertTriangle,
-  IconArrowLeft,
-  IconLoader2,
-  IconPlayerPlay,
-  IconPlayerStop,
-  IconRefresh,
-  IconShield,
-  IconX,
-} from '@tabler/icons-vue';
-import { AGENT_TABS, type AgentTab } from './tabs';
-
-const props = defineProps<{ id: string }>();
-const agentStore = useAgentStore();
-const config = useRuntimeConfig();
-
-const apiUrl =
-  (config.public as { apiUrl?: string }).apiUrl ??
-  (typeof process !== 'undefined' ? process.env.API_URL : undefined) ??
-  'http://localhost:3333';
-
-// Loaded lazily so the route transitions immediately and the skeleton renders
-// until the data arrives. Without lazy, top-level awaits in <script setup>
-// block the Vue Router transition until every promise resolves — the user
-// perceives this as a multi-second delay before the page opens.
-const { data: agent, pending, refresh } = useAsyncData(
-  `admin-agent-${props.id}`,
-  () => agentStore.fetchById(props.id),
-  { lazy: true },
-);
-
-const {
-  isRestarting,
-  restartError,
-  restart,
-  canStop,
-  toggling,
-  toggleError,
-  toggleRunning,
-  pendingRestart,
-  dismissRestartBanner,
-  chatOverlay,
-} = useAgentLifecycle(props.id, agent, refresh);
-
-// Tab state — persisted in the URL so deep links + browser back work.
-// `chat` is the default since 99% of the time the user is here to talk to the
-// agent, not to inspect its plumbing.
-const TAB_VALUES = AGENT_TABS.map((t) => t.value);
-const route = useRoute();
-const router = useRouter();
-const activeTab = computed<AgentTab>({
-  get: () => {
-    const q = route.query.tab;
-    return TAB_VALUES.includes(q as AgentTab) ? (q as AgentTab) : 'chat';
-  },
-  set: (v) => {
-    router.replace({ query: { ...route.query, tab: v === 'chat' ? undefined : v } });
-  },
-});
-
-// The status badge on the overview tab renders from the DB row (not the SSE
-// pod stream). Re-fetch on each switch to overview so a stale 'failed' or
-// 'deploying' from initial load doesn't outlive the reconciled state. The
-// per-card data (usage, metrics, …) refetches by itself: cards remount when
-// the tab becomes active.
-watch(activeTab, (tab) => {
-  if (tab === 'overview') refresh();
-});
+// Kept as the slice's entry point for a single agent so existing imports and
+// the page component do not move. Everything it used to do — the header, the
+// nine-tab column and every TabsContent — now lives in the workspace, where
+// the tabs became a settings navigator and the sections render on the canvas
+// (specs/006-agent-workspace-tabs).
+defineProps<{ id: string }>();
 </script>
 
 <template>
-  <div class="flex flex-col gap-6">
-    <NuxtLink to="/agents" class="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground">
-      <IconArrowLeft class="size-4" /> Back to agents
-    </NuxtLink>
-
-    <div
-      v-if="pendingRestart"
-      class="flex flex-wrap items-center gap-3 rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-900 dark:text-amber-200"
-    >
-      <IconAlertTriangle class="size-4 shrink-0" />
-      <p class="flex-1 min-w-56">
-        Agent settings were updated. Restart the agent to apply the changes.
-      </p>
-      <div class="flex items-center gap-2">
-        <Button size="sm" :disabled="isRestarting" @click="restart">
-          <IconRefresh class="size-4" :class="isRestarting && 'animate-spin'" />
-          {{ isRestarting ? 'Restarting…' : 'Restart agent' }}
-        </Button>
-        <Button
-          variant="ghost"
-          size="sm"
-          :disabled="isRestarting"
-          @click="dismissRestartBanner"
-        >
-          <IconX class="size-4" />
-        </Button>
-      </div>
-    </div>
-
-    <!-- Skeleton only on initial load (no agent yet). Subsequent refreshes
-         (status polling every 5s during deploy, post-restart refresh) keep
-         showing the previous data so the page doesn't flash to "Loading…"
-         and back. -->
-    <div v-if="pending && !agent" class="flex flex-col gap-6">
-      <div class="flex items-start justify-between gap-4">
-        <div class="space-y-2">
-          <Skeleton class="h-8 w-64" />
-          <Skeleton class="h-4 w-72" />
-        </div>
-        <div class="flex gap-2">
-          <Skeleton class="h-9 w-16" />
-          <Skeleton class="h-9 w-24" />
-          <Skeleton class="h-9 w-16" />
-        </div>
-      </div>
-      <Skeleton class="h-10 w-96 rounded-md" />
-      <Skeleton class="h-[480px] w-full rounded-lg" />
-    </div>
-
-    <template v-else-if="agent">
-      <div class="flex items-start justify-between gap-4">
-        <div>
-          <div class="flex items-center gap-2">
-            <h1 class="text-2xl font-semibold">{{ agent.name }}</h1>
-            <Badge v-if="agent.isAdmin" variant="default" class="gap-1">
-              <IconShield class="size-3" /> Ranch admin
-            </Badge>
-          </div>
-          <p class="text-sm text-muted-foreground">Agent ID: {{ agent.id }}</p>
-        </div>
-        <div class="flex flex-col items-end gap-1">
-          <div class="flex gap-2">
-            <Button variant="outline" as-child>
-              <NuxtLink :to="`/agents/${agent.id}/edit`">Edit</NuxtLink>
-            </Button>
-            <Button
-              variant="outline"
-              :disabled="toggling || isRestarting"
-              :title="canStop ? 'Cancel the workflow and delete the pod to free cluster resources' : 'Deploy a fresh pod'"
-              @click="toggleRunning"
-            >
-              <IconLoader2 v-if="toggling" class="size-4 animate-spin" />
-              <IconPlayerStop v-else-if="canStop" class="size-4" />
-              <IconPlayerPlay v-else class="size-4" />
-              {{
-                toggling
-                  ? canStop
-                    ? 'Stopping…'
-                    : 'Starting…'
-                  : canStop
-                    ? 'Stop'
-                    : 'Start'
-              }}
-            </Button>
-            <Button
-              variant="outline"
-              :disabled="isRestarting || toggling"
-              @click="restart"
-            >
-              <IconLoader2 v-if="isRestarting" class="size-4 animate-spin" />
-              <IconRefresh v-else class="size-4" />
-              {{ isRestarting ? 'Restarting…' : 'Restart' }}
-            </Button>
-          </div>
-          <p v-if="restartError || toggleError" class="text-xs text-destructive">
-            {{ restartError || toggleError }}
-          </p>
-        </div>
-      </div>
-
-      <!-- Full-width usage strip under the header: visible on every tab,
-           Details jumps to the Overview tab's full usage card. -->
-      <UsagePanel
-        :agent-id="agent.id"
-        agent-only
-        variant="strip"
-        class="-my-1"
-        @details="activeTab = 'overview'"
-      />
-
-      <Tabs
-        orientation="vertical"
-        :model-value="activeTab"
-        class="flex-row gap-8 md:grid md:grid-cols-[16rem_minmax(0,1fr)]"
-        @update:model-value="activeTab = $event as AgentTab"
-      >
-        <TabsList
-          class="flex h-auto flex-col items-stretch gap-1 self-start bg-transparent p-0"
-        >
-          <TabsTrigger
-            v-for="t in AGENT_TABS"
-            :key="t.value"
-            :value="t.value"
-            class="group h-auto flex-none justify-start whitespace-normal rounded-md border border-transparent px-3 py-2 text-left text-sm font-normal transition-colors hover:bg-muted data-[state=active]:border-border data-[state=active]:bg-muted data-[state=active]:shadow-none"
-          >
-            <span class="flex flex-col items-start gap-0.5">
-              <span class="font-medium">{{ t.title }}</span>
-              <span class="text-xs text-muted-foreground">{{ t.desc }}</span>
-            </span>
-          </TabsTrigger>
-        </TabsList>
-
-        <div class="min-w-0">
-          <TabsContent value="chat" class="mt-0">
-            <AgentChatTab
-              :agent="agent"
-              :api-url="apiUrl"
-              :overlay="chatOverlay"
-              :restarting="isRestarting"
-              :toggling="toggling"
-              @restart="restart"
-              @toggle-running="toggleRunning"
-            />
-          </TabsContent>
-
-          <TabsContent value="overview" class="mt-0">
-            <AgentOverviewTab
-              :agent="agent"
-              :api-url="apiUrl"
-              @agent-updated="(updated) => (agent = updated)"
-            />
-          </TabsContent>
-
-          <TabsContent value="knowledge" class="mt-0">
-            <AgentKnowledgeTab :agent="agent" />
-          </TabsContent>
-
-          <TabsContent value="files" class="mt-0">
-            <Card>
-              <CardHeader>
-                <CardTitle>Files</CardTitle>
-                <CardDescription>
-                  Agent data stored in S3 (<code>agents/{{ agent.id }}/</code>).
-                  <code>.md</code> and <code>.json</code> files can be edited;
-                  changes apply on next agent restart.
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <AgentFileProvider :id="agent.id" />
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          <TabsContent value="secrets" class="mt-0">
-            <Card>
-              <CardHeader>
-                <CardTitle>Secrets</CardTitle>
-                <CardDescription>
-                  User-scoped secrets stored by the agent runtime. Source depends
-                  on <code>SECRET_PROVIDER</code>:
-                  <code>aws</code> reads from AWS Secrets Manager
-                  (<code>aws_secret_prefix/&lt;agentId&gt;</code>);
-                  <code>file</code> lists S3 under
-                  <code>agents/{{ agent.id }}/data/secrets/</code>. Values are
-                  masked — click the eye icon to reveal.
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <AgentSecretProvider :id="agent.id" />
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          <TabsContent value="env" class="mt-0">
-            <AgentEnvTab :agent-id="agent.id" />
-          </TabsContent>
-
-          <TabsContent value="channels" class="mt-0">
-            <AgentChannelProvider :agent-id="agent.id" />
-          </TabsContent>
-
-          <TabsContent value="chats" class="mt-0">
-            <ChatListProvider :agent-id="agent.id" />
-          </TabsContent>
-
-          <TabsContent value="paddock" class="mt-0">
-            <AgentPaddockTab :agent-id="agent.id" />
-          </TabsContent>
-        </div>
-      </Tabs>
-    </template>
-
-    <div v-else class="rounded-md border border-dashed p-10 text-center text-sm text-muted-foreground">
-      Agent not found.
-    </div>
-  </div>
+  <AgentWorkspaceProvider :id="id" />
 </template>
diff --git a/admin/slices/agent/agent/components/agent/item/tabs.ts b/admin/slices/agent/agent/components/agent/item/tabs.ts
deleted file mode 100644
index 90638c6a..00000000
--- a/admin/slices/agent/agent/components/agent/item/tabs.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export const AGENT_TABS = [
-  { value: 'chat', title: 'Chat', desc: 'Talk to the agent.' },
-  { value: 'overview', title: 'Overview', desc: 'Usage, runtime, visibility & embed.' },
-  { value: 'knowledge', title: 'Knowledge', desc: 'Knowledge bases the agent can query.' },
-  { value: 'files', title: 'Files', desc: 'Browse and edit S3-stored agent data.' },
-  { value: 'secrets', title: 'Secrets', desc: 'User-scoped secrets the runtime stores.' },
-  { value: 'env', title: 'Environment', desc: 'Env vars injected at deploy time.' },
-  { value: 'channels', title: 'Channels', desc: 'Messaging platforms (Telegram, …) the agent talks on.' },
-  { value: 'chats', title: 'Chats', desc: 'Conversation history across channels.' },
-  { value: 'paddock', title: 'Paddock', desc: 'Run evaluations & manage scenarios.' },
-] as const;
-
-export type AgentTab = (typeof AGENT_TABS)[number]['value'];
diff --git a/admin/slices/agent/agent/components/agent/list/Provider.vue b/admin/slices/agent/agent/components/agent/list/Provider.vue
deleted file mode 100644
index 027df968..00000000
--- a/admin/slices/agent/agent/components/agent/list/Provider.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<script setup lang="ts">
-import type { AgentStatusTypes, IAgentData } from '#agent/stores/agent';
-import {
-  IconDotsVertical,
-  IconLoader2,
-  IconPlayerPlay,
-  IconPlayerStop,
-  IconRefresh,
-  IconShield,
-  IconTrash,
-} from '@tabler/icons-vue';
-
-const agentStore = useAgentStore();
-
-const { data: agents, pending, refresh } = await useAsyncData(
-  'admin-agents',
-  () => agentStore.fetchAll(),
-);
-
-// Cluster headroom for new agents. Store actions (create/remove/restart/
-// stop/start) refetch on their own; the interval catches pods actually
-// scheduling and other operators' changes. The API caches ~15s, so polling
-// is cheap. Null (K8s unreachable) simply hides the badge.
-const capacity = computed(() => agentStore.capacity);
-
-let capacityTimer: ReturnType<typeof setInterval> | null = null;
-onMounted(() => {
-  void agentStore.fetchCapacity();
-  capacityTimer = setInterval(() => void agentStore.fetchCapacity(), 30_000);
-});
-onUnmounted(() => {
-  if (capacityTimer) clearInterval(capacityTimer);
-});
-
-// Per-row "restarting" guard so the button shows a spinner without blocking
-// other rows. The store's restart() does an optimistic status flip, so the
-// row's badge changes immediately even before the API resolves.
-const restartingIds = ref<Set<string>>(new Set());
-
-function isRestarting(id: string): boolean {
-  return restartingIds.value.has(id);
-}
-
-async function onRestart(agent: IAgentData) {
-  if (restartingIds.value.has(agent.id)) return;
-  restartingIds.value = new Set([...restartingIds.value, agent.id]);
-  try {
-    await agentStore.restart(agent.id);
-    await refresh();
-  } finally {
-    const next = new Set(restartingIds.value);
-    next.delete(agent.id);
-    restartingIds.value = next;
-  }
-}
-
-// Statuses that consume cluster resources (a pod is or will be running) — the
-// only states where "Stop" makes sense. Everything else gets "Start".
-const RESOURCE_HOLDING: ReadonlySet<AgentStatusTypes> = new Set([
-  'running',
-  'deploying',
-  'pending',
-]);
-
-function canStop(status: AgentStatusTypes): boolean {
-  return RESOURCE_HOLDING.has(status);
-}
-
-// Per-row busy guard for stop/start so one row's spinner doesn't block others.
-const togglingIds = ref<Set<string>>(new Set());
-
-function isToggling(id: string): boolean {
-  return togglingIds.value.has(id);
-}
-
-async function onToggleRunning(agent: IAgentData) {
-  if (togglingIds.value.has(agent.id)) return;
-  togglingIds.value = new Set([...togglingIds.value, agent.id]);
-  try {
-    if (canStop(agent.status)) {
-      await agentStore.stop(agent.id);
-    } else {
-      await agentStore.start(agent.id);
-    }
-    await refresh();
-  } finally {
-    const next = new Set(togglingIds.value);
-    next.delete(agent.id);
-    togglingIds.value = next;
-  }
-}
-
-const pendingRemoval = ref<IAgentData | null>(null);
-const confirmRemoveOpen = computed({
-  get: () => pendingRemoval.value !== null,
-  set: (v: boolean) => {
-    if (!v) pendingRemoval.value = null;
-  },
-});
-
-async function onRemove() {
-  const agent = pendingRemoval.value;
-  if (!agent) return;
-  pendingRemoval.value = null;
-  await agentStore.remove(agent.id);
-  await refresh();
-}
-</script>
-
-<template>
-  <div class="flex flex-col gap-6">
-    <div class="flex items-center justify-between">
-      <div>
-        <h1 class="text-2xl font-semibold">Agents</h1>
-        <p class="text-sm text-muted-foreground">Manage running agents.</p>
-      </div>
-      <div class="flex items-center gap-3">
-        <div
-          v-if="capacity"
-          class="hidden sm:flex items-center gap-1.5 rounded-full border bg-card px-3 py-1 text-xs text-muted-foreground"
-          title="How many more agents fit on the cluster (by CPU/memory requests on agent nodes)"
-        >
-          <span
-            :class="
-              capacity.freeAgentSlots === 0
-                ? 'font-medium text-amber-600'
-                : 'font-medium text-foreground'
-            "
-          >
-            {{ capacity.freeAgentSlots }}
-          </span>
-          {{ capacity.freeAgentSlots === 1 ? 'slot' : 'slots' }} free
-        </div>
-        <Button as-child>
-          <NuxtLink to="/agents/create">New agent</NuxtLink>
-        </Button>
-      </div>
-    </div>
-
-    <!-- Capacity is a ~15s-stale estimate, so this warns rather than blocks:
-         creating is still legal, the pod just waits Pending for a slot. -->
-    <p
-      v-if="capacity && capacity.freeAgentSlots === 0"
-      class="text-xs text-amber-600"
-    >
-      {{
-        capacity.totalAgentSlots === 0
-          ? 'No agent nodes available in this cluster (no schedulable node labeled node-role=agents) — new agents will stay Pending.'
-          : 'Cluster is full — stop an agent to free a slot before starting a new one.'
-      }}
-    </p>
-
-    <!-- Skeleton on initial load only. Refreshes after Restart/Delete keep
-         the existing rows visible to avoid the page-flash effect. -->
-    <div v-if="pending && !agents" class="rounded-md border bg-card p-2">
-      <div
-        v-for="i in 4"
-        :key="i"
-        class="flex items-center gap-4 px-2 py-3 border-b last:border-b-0"
-      >
-        <Skeleton class="h-4 w-40" />
-        <Skeleton class="h-4 w-24" />
-        <Skeleton class="h-5 w-20 rounded-full" />
-        <Skeleton class="ml-auto h-8 w-32" />
-      </div>
-    </div>
-
-    <div v-else-if="agents?.length" class="rounded-md border bg-card">
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Name</TableHead>
-            <TableHead>Resources</TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead>Created</TableHead>
-            <TableHead class="text-right">Actions</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <TableRow
-            v-for="agent in agents"
-            :key="agent.id"
-            class="cursor-pointer"
-            @click="navigateTo(`/agents/${agent.id}`)"
-          >
-            <TableCell class="font-medium">
-              <div class="flex items-center gap-2">
-                <span>{{ agent.name }}</span>
-                <Badge v-if="agent.isAdmin" variant="default" class="gap-1" title="This agent has the ranch_* admin tools and a service token">
-                  <IconShield class="size-3" /> Admin
-                </Badge>
-              </div>
-            </TableCell>
-            <TableCell class="text-muted-foreground">
-              {{ agent.resources.cpu }} / {{ agent.resources.memory }}
-            </TableCell>
-            <TableCell>
-              <Badge :variant="AGENT_STATUS_VARIANT[agent.status]" class="capitalize">
-                {{ agent.status }}
-              </Badge>
-            </TableCell>
-            <TableCell class="text-muted-foreground">{{ formatDateTime(agent.createdAt) }}</TableCell>
-            <TableCell @click.stop>
-              <div class="flex justify-end gap-2">
-                <Button size="sm" variant="outline" as-child>
-                  <NuxtLink :to="`/agents/${agent.id}/edit`">Edit</NuxtLink>
-                </Button>
-                <DropdownMenu>
-                  <DropdownMenuTrigger as-child>
-                    <Button size="sm" variant="ghost" class="size-8 p-0">
-                      <span class="sr-only">Open menu</span>
-                      <IconDotsVertical class="size-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem
-                      :disabled="isRestarting(agent.id) || isToggling(agent.id)"
-                      @select="onRestart(agent)"
-                    >
-                      <IconLoader2
-                        v-if="isRestarting(agent.id)"
-                        class="size-4 animate-spin"
-                      />
-                      <IconRefresh v-else class="size-4" />
-                      {{ isRestarting(agent.id) ? 'Restarting…' : 'Restart' }}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      :disabled="isToggling(agent.id) || isRestarting(agent.id)"
-                      @select="onToggleRunning(agent)"
-                    >
-                      <IconLoader2
-                        v-if="isToggling(agent.id)"
-                        class="size-4 animate-spin"
-                      />
-                      <IconPlayerStop v-else-if="canStop(agent.status)" class="size-4" />
-                      <IconPlayerPlay v-else class="size-4" />
-                      {{
-                        isToggling(agent.id)
-                          ? canStop(agent.status)
-                            ? 'Stopping…'
-                            : 'Starting…'
-                          : canStop(agent.status)
-                            ? 'Stop'
-                            : 'Start'
-                      }}
-                    </DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem
-                      class="text-destructive focus:text-destructive"
-                      @select="pendingRemoval = agent"
-                    >
-                      <IconTrash class="size-4" />
-                      Delete
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
-            </TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    </div>
-
-    <div v-else class="rounded-md border border-dashed p-10 text-center text-sm text-muted-foreground">
-      No agents yet.
-    </div>
-
-    <ConfirmDialog
-      v-model:open="confirmRemoveOpen"
-      title="Delete agent"
-      :description="pendingRemoval ? `Permanently delete agent “${pendingRemoval.name}”? This cannot be undone.` : ''"
-      confirm-label="Delete agent"
-      @confirm="onRemove"
-    />
-  </div>
-</template>
diff --git a/admin/slices/agent/agent/components/agent/settings/NavItem.vue b/admin/slices/agent/agent/components/agent/settings/NavItem.vue
new file mode 100644
index 00000000..d1f22064
--- /dev/null
+++ b/admin/slices/agent/agent/components/agent/settings/NavItem.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { IconChevronRight } from '@tabler/icons-vue';
+import type { IAgentSettingsSection } from './sections';
+
+defineProps<{
+  section: IAgentSettingsSection;
+  /** null = unknown or still loading. Renders nothing — `0` is a real value
+   *  meaning "none attached" and must stay distinguishable from it. */
+  count: number | null;
+  /** This section is what the canvas is currently showing. */
+  current: boolean;
+}>();
+
+defineEmits<{ select: [] }>();
+</script>
+
+<template>
+  <!-- A row, not a container. Section content renders in the workspace canvas
+       at the width it already has; putting it in here would mean redesigning
+       Files, Environment and Paddock for a 320px column (see research R2). -->
+  <button
+    type="button"
+    class="flex w-full items-center gap-3 rounded-md px-2.5 py-2 text-left transition-colors hover:bg-muted"
+    :class="current && 'bg-muted'"
+    :aria-current="current ? 'true' : undefined"
+    @click="$emit('select')"
+  >
+    <span class="min-w-0 flex-1">
+      <span class="block truncate text-sm font-medium">
+        {{ section.title }}
+      </span>
+      <span class="mt-0.5 block truncate text-xs text-muted-foreground">
+        {{ section.desc }}
+      </span>
+    </span>
+
+    <span
+      v-if="count !== null"
+      class="shrink-0 text-xs tabular-nums text-muted-foreground"
+    >
+      {{ count }}
+    </span>
+
+    <IconChevronRight class="size-4 shrink-0 text-muted-foreground/50" />
+  </button>
+</template>
diff --git a/admin/slices/agent/agent/components/agent/settings/Panel.vue b/admin/slices/agent/agent/components/agent/settings/Panel.vue
new file mode 100644
index 00000000..6bdc925f
--- /dev/null
+++ b/admin/slices/agent/agent/components/agent/settings/Panel.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import {
+  IconLoader2,
+  IconPlayerPlay,
+  IconPlayerStop,
+  IconRefresh,
+  IconShield,
+  IconTrash,
+  IconX,
+} from '@tabler/icons-vue';
+import type { IAgentData } from '#agent/domain';
+import { agentInitials } from '#agent/composables/useAgentRailEntries';
+import {
+  AGENT_SETTINGS_SECTIONS,
+  type AgentSettingsSection,
+  type SectionCounts,
+} from './sections';
+
+const props = defineProps<{
+  agent: IAgentData;
+  /** Which section the canvas is showing, so the list can mark it. */
+  section: AgentSettingsSection | null;
+  counts: SectionCounts;
+  canStop: boolean;
+  toggling: boolean;
+  isRestarting: boolean;
+  lifecycleError: string | null;
+}>();
+
+const emit = defineEmits<{
+  'update:section': [AgentSettingsSection | null];
+  restart: [];
+  toggleRunning: [];
+  close: [];
+  deleted: [];
+}>();
+
+const agentStore = useAgentStore();
+
+const initials = computed(() =>
+  agentInitials(props.agent.name, props.agent.id),
+);
+
+// The lifecycle actions the table's row menu used to carry. They live here
+// rather than in the rail because a rail entry identifies an agent and does
+// not act on one (FR-002, FR-009, FR-017).
+const confirmRemoveOpen = ref(false);
+const removing = ref(false);
+const removeError = ref<string | null>(null);
+
+async function onRemove() {
+  if (removing.value) return;
+  removing.value = true;
+  removeError.value = null;
+  try {
+    await agentStore.remove(props.agent.id);
+    emit('deleted');
+  } catch (err) {
+    removeError.value = (err as Error).message || 'Delete failed';
+  } finally {
+    removing.value = false;
+  }
+}
+
+function countFor(countKey: string | null): number | null {
+  if (!countKey) return null;
+  return props.counts[countKey as keyof SectionCounts] ?? null;
+}
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col">
+    <div
+      class="flex shrink-0 items-center justify-between gap-2 border-b px-4 py-3"
+    >
+      <span class="text-sm font-medium">Agent settings</span>
+      <Button
+        variant="ghost"
+        size="sm"
+        class="-mr-2 size-7 p-0"
+        title="Hide settings"
+        @click="emit('close')"
+      >
+        <IconX class="size-4" />
+        <span class="sr-only">Hide settings</span>
+      </Button>
+    </div>
+
+    <!-- Identity: everything the table row said about an agent besides its
+         name, plus the failure reason when there is one. -->
+    <div class="flex shrink-0 items-start gap-3 border-b px-4 py-3">
+      <span
+        class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-linear-to-br from-primary/20 to-primary/5 text-sm font-semibold text-primary"
+      >
+        {{ initials }}
+      </span>
+      <div class="min-w-0 flex-1">
+        <div class="flex items-center gap-1.5">
+          <span class="truncate text-sm font-medium" :title="agent.name">
+            {{ agent.name }}
+          </span>
+          <IconShield
+            v-if="agent.isAdmin"
+            class="size-3.5 shrink-0 text-primary"
+            title="This agent has the ranch_* admin tools and a service token"
+          />
+        </div>
+        <p class="mt-0.5 truncate text-xs text-muted-foreground" :title="agent.id">
+          {{ agent.id }}
+        </p>
+        <p class="mt-1 text-xs text-muted-foreground">
+          <Badge
+            :variant="AGENT_STATUS_VARIANT[agent.status]"
+            class="capitalize"
+          >
+            {{ agent.status }}
+          </Badge>
+          <span class="ml-1.5">
+            {{ agent.resources.cpu }} / {{ agent.resources.memory }}
+          </span>
+        </p>
+        <p
+          v-if="agent.status === 'failed' && agent.statusReason"
+          class="mt-1 text-xs text-destructive"
+        >
+          {{ agent.statusReason }}
+        </p>
+      </div>
+    </div>
+
+    <!-- Navigator. Rows only — the section itself renders in the canvas. -->
+    <nav class="min-h-0 flex-1 overflow-y-auto p-2">
+      <ul class="flex flex-col gap-0.5">
+        <li v-for="s in AGENT_SETTINGS_SECTIONS" :key="s.value">
+          <AgentSettingsNavItem
+            :section="s"
+            :count="countFor(s.countKey)"
+            :current="section === s.value"
+            @select="emit('update:section', s.value)"
+          />
+        </li>
+      </ul>
+    </nav>
+
+    <div class="shrink-0 border-t p-3">
+      <p
+        v-if="lifecycleError || removeError"
+        class="mb-2 text-xs text-destructive"
+      >
+        {{ lifecycleError || removeError }}
+      </p>
+      <div class="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          class="flex-1"
+          :disabled="toggling || isRestarting"
+          :title="
+            canStop
+              ? 'Cancel the workflow and delete the pod to free cluster resources'
+              : 'Deploy a fresh pod'
+          "
+          @click="emit('toggleRunning')"
+        >
+          <IconLoader2 v-if="toggling" class="size-4 animate-spin" />
+          <IconPlayerStop v-else-if="canStop" class="size-4" />
+          <IconPlayerPlay v-else class="size-4" />
+          {{
+            toggling
+              ? canStop
+                ? 'Stopping…'
+                : 'Starting…'
+              : canStop
+                ? 'Stop'
+                : 'Start'
+          }}
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          class="flex-1"
+          :disabled="isRestarting || toggling"
+          @click="emit('restart')"
+        >
+          <IconLoader2 v-if="isRestarting" class="size-4 animate-spin" />
+          <IconRefresh v-else class="size-4" />
+          {{ isRestarting ? 'Restarting…' : 'Restart' }}
+        </Button>
+        <Button size="sm" class="flex-1" as-child>
+          <NuxtLink :to="`/agents/${agent.id}/edit`">Edit</NuxtLink>
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          class="size-8 shrink-0 p-0 text-destructive hover:text-destructive"
+          title="Delete agent"
+          :disabled="removing"
+          @click="confirmRemoveOpen = true"
+        >
+          <IconLoader2 v-if="removing" class="size-4 animate-spin" />
+          <IconTrash v-else class="size-4" />
+          <span class="sr-only">Delete agent</span>
+        </Button>
+      </div>
+    </div>
+
+    <ConfirmDialog
+      v-model:open="confirmRemoveOpen"
+      title="Delete agent"
+      :description="`Permanently delete agent “${agent.name}”? This cannot be undone.`"
+      confirm-label="Delete agent"
+      :busy="removing"
+      @confirm="onRemove"
+    />
+  </div>
+</template>
diff --git a/admin/slices/agent/agent/components/agent/settings/sections.ts b/admin/slices/agent/agent/components/agent/settings/sections.ts
new file mode 100644
index 00000000..05fa4245
--- /dev/null
+++ b/admin/slices/agent/agent/components/agent/settings/sections.ts
@@ -0,0 +1,95 @@
+/**
+ * The agent's settings sections. Formerly `item/tabs.ts` — the vertical tab
+ * column is gone, the settings panel navigates these and the workspace canvas
+ * renders them (see specs/006-agent-workspace-tabs, R2).
+ *
+ * The `value` strings are a URL contract: `?tab=<value>` deep links predate
+ * this screen and must keep working, so these eight are byte-identical to the
+ * old AGENT_TABS values. The old `chat` entry is gone — the conversation is
+ * the canvas now, not a section.
+ */
+
+/** Sections that can say how much they hold before you open them. */
+export type SectionCountKey = 'knowledge' | 'files' | 'secrets' | 'channels';
+
+/** `null` = not known yet, or the source failed. Distinct from `0`. */
+export type SectionCounts = Record<SectionCountKey, number | null>;
+
+export const AGENT_SETTINGS_SECTIONS = [
+  {
+    value: 'overview',
+    title: 'Overview',
+    desc: 'Usage, runtime, visibility & embed.',
+    countKey: null,
+  },
+  {
+    value: 'knowledge',
+    title: 'Knowledge',
+    desc: 'Knowledge bases the agent can query.',
+    countKey: 'knowledge',
+  },
+  {
+    value: 'files',
+    title: 'Files',
+    desc: 'Browse and edit S3-stored agent data.',
+    countKey: 'files',
+  },
+  {
+    value: 'secrets',
+    title: 'Secrets',
+    desc: 'User-scoped secrets the runtime stores.',
+    countKey: 'secrets',
+  },
+  {
+    value: 'env',
+    title: 'Environment',
+    desc: 'Env vars injected at deploy time.',
+    countKey: null,
+  },
+  {
+    value: 'channels',
+    title: 'Channels',
+    desc: 'Messaging platforms (Telegram, …) the agent talks on.',
+    countKey: 'channels',
+  },
+  {
+    value: 'chats',
+    title: 'Chats',
+    desc: 'Conversation history across channels.',
+    countKey: null,
+  },
+  {
+    value: 'paddock',
+    title: 'Paddock',
+    desc: 'Run evaluations & manage scenarios.',
+    countKey: null,
+  },
+] as const satisfies ReadonlyArray<{
+  value: string;
+  title: string;
+  desc: string;
+  countKey: SectionCountKey | null;
+}>;
+
+export type AgentSettingsSection =
+  (typeof AGENT_SETTINGS_SECTIONS)[number]['value'];
+
+export type IAgentSettingsSection = (typeof AGENT_SETTINGS_SECTIONS)[number];
+
+const SECTION_VALUES: readonly string[] = AGENT_SETTINGS_SECTIONS.map(
+  (s) => s.value,
+);
+
+/**
+ * Normalise whatever arrived in `?tab=`. Legacy `chat` and anything
+ * unrecognised become "no section" — the canvas shows the conversation and
+ * the stale parameter is stripped rather than erroring.
+ */
+export function toSettingsSection(
+  value: unknown,
+): AgentSettingsSection | null {
+  const v = Array.isArray(value) ? value[0] : value;
+  return typeof v === 'string' && SECTION_VALUES.includes(v)
+    ? (v as AgentSettingsSection)
+    : null;
+}
diff --git a/admin/slices/agent/agent/components/agent/workspace/Canvas.vue b/admin/slices/agent/agent/components/agent/workspace/Canvas.vue
new file mode 100644
index 00000000..8faef4e8
--- /dev/null
+++ b/admin/slices/agent/agent/components/agent/workspace/Canvas.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { IconChevronLeft } from '@tabler/icons-vue';
+import type { IAgentData } from '#agent/domain';
+import type { ChatOverlay } from '#agent/composables/useAgentLifecycle';
+import {
+  AGENT_SETTINGS_SECTIONS,
+  type AgentSettingsSection,
+} from '#agent/components/agent/settings/sections';
+
+const props = defineProps<{
+  agent: IAgentData;
+  apiUrl: string;
+  /** null = show the conversation. */
+  section: AgentSettingsSection | null;
+  overlay: ChatOverlay;
+  restarting: boolean;
+  toggling: boolean;
+}>();
+
+const emit = defineEmits<{
+  restart: [];
+  toggleRunning: [];
+  back: [];
+  'agent-updated': [IAgentData];
+}>();
+
+const sectionMeta = computed(() =>
+  AGENT_SETTINGS_SECTIONS.find((s) => s.value === props.section) ?? null,
+);
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col">
+    <!-- Section mode. `v-if` here is deliberate and the opposite of the chat
+         branch below: sections should mount fresh and unmount when left,
+         which is the remount-on-activate refetch behaviour they had as
+         TabsContent. -->
+    <template v-if="section">
+      <div class="flex shrink-0 items-center gap-2 pb-3">
+        <Button variant="ghost" size="sm" class="-ml-2" @click="emit('back')">
+          <IconChevronLeft class="size-4" />
+          Chat
+        </Button>
+        <span class="text-muted-foreground/50">/</span>
+        <span class="text-sm font-medium">{{ sectionMeta?.title }}</span>
+      </div>
+
+      <div class="min-h-0 flex-1 overflow-y-auto">
+        <AgentOverviewTab
+          v-if="section === 'overview'"
+          :agent="agent"
+          :api-url="apiUrl"
+          @agent-updated="(updated: IAgentData) => emit('agent-updated', updated)"
+        />
+
+        <AgentKnowledgeTab
+          v-else-if="section === 'knowledge'"
+          :agent="agent"
+        />
+
+        <Card v-else-if="section === 'files'">
+          <CardHeader>
+            <CardTitle>Files</CardTitle>
+            <CardDescription>
+              Agent data stored in S3 (<code>agents/{{ agent.id }}/</code>).
+              <code>.md</code> and <code>.json</code> files can be edited;
+              changes apply on next agent restart.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AgentFileProvider :id="agent.id" />
+          </CardContent>
+        </Card>
+
+        <Card v-else-if="section === 'secrets'">
+          <CardHeader>
+            <CardTitle>Secrets</CardTitle>
+            <CardDescription>
+              User-scoped secrets stored by the agent runtime. Source depends
+              on <code>SECRET_PROVIDER</code>:
+              <code>aws</code> reads from AWS Secrets Manager
+              (<code>aws_secret_prefix/&lt;agentId&gt;</code>);
+              <code>file</code> lists S3 under
+              <code>agents/{{ agent.id }}/data/secrets/</code>. Values are
+              masked — click the eye icon to reveal.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AgentSecretProvider :id="agent.id" />
+          </CardContent>
+        </Card>
+
+        <AgentEnvTab v-else-if="section === 'env'" :agent-id="agent.id" />
+
+        <AgentChannelProvider
+          v-else-if="section === 'channels'"
+          :agent-id="agent.id"
+        />
+
+        <ChatListProvider v-else-if="section === 'chats'" :agent-id="agent.id" />
+
+        <AgentPaddockTab
+          v-else-if="section === 'paddock'"
+          :agent-id="agent.id"
+        />
+      </div>
+    </template>
+
+    <!-- Chat mode. `v-show`, NEVER `v-if`: unmounting drops the websocket,
+         the transcript, the scroll position and the restart overlay state, so
+         returning from a section would cost a reconnect and a refetch
+         (SC-004a). Hidden, the chat keeps living behind the open section. -->
+    <div v-show="!section" class="min-h-0 flex-1">
+      <AgentChatTab
+        :agent="agent"
+        :api-url="apiUrl"
+        :overlay="overlay"
+        :restarting="restarting"
+        :toggling="toggling"
+        @restart="emit('restart')"
+        @toggle-running="emit('toggleRunning')"
+      />
+    </div>
+  </div>
+</template>
diff --git a/admin/slices/agent/agent/components/agent/workspace/Main.vue b/admin/slices/agent/agent/components/agent/workspace/Main.vue
new file mode 100644
index 00000000..2dec4b3a
--- /dev/null
+++ b/admin/slices/agent/agent/components/agent/workspace/Main.vue
@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import {
+  IconAlertTriangle,
+  IconRefresh,
+  IconSettings,
+  IconX,
+} from '@tabler/icons-vue';
+import { useMediaQuery } from '@vueuse/core';
+import { agentInitials } from '#agent/composables/useAgentRailEntries';
+import { useAgentSectionCounts } from '#agent/composables/useAgentSectionCounts';
+import { useSettingsPanel } from '#agent/composables/useSettingsPanel';
+import type { AgentSettingsSection } from '#agent/components/agent/settings/sections';
+
+const props = defineProps<{ id: string }>();
+
+const emit = defineEmits<{ deleted: [] }>();
+
+const agentStore = useAgentStore();
+const config = useRuntimeConfig();
+
+const apiUrl =
+  (config.public as { apiUrl?: string }).apiUrl ??
+  (typeof process !== 'undefined' ? process.env.API_URL : undefined) ??
+  'http://localhost:3333';
+
+// Loaded lazily so the route transitions immediately and the skeleton renders
+// until the data arrives. Without lazy, top-level awaits in <script setup>
+// block the Vue Router transition until every promise resolves — the user
+// perceives this as a multi-second delay before the page opens.
+const { data: agent, pending, refresh } = useAsyncData(
+  `admin-agent-${props.id}`,
+  () => agentStore.fetchById(props.id),
+  { lazy: true },
+);
+
+const {
+  isRestarting,
+  restartError,
+  restart,
+  canStop,
+  toggling,
+  toggleError,
+  toggleRunning,
+  pendingRestart,
+  dismissRestartBanner,
+  chatOverlay,
+} = useAgentLifecycle(props.id, agent, refresh);
+
+const { section, open: panelOpen, setSection, setOpen, close } =
+  useSettingsPanel();
+
+// ── Where the panel renders ──────────────────────────────────────────
+// One instance, three appearances — docking is pure CSS (see the classes on
+// the <aside> below), so crossing a breakpoint never remounts the panel or
+// duplicates its state.
+//
+// The one thing CSS cannot decide is whether it starts open: on a phone there
+// is no room to have it open beside anything, so it is on-demand there
+// regardless of the stored preference.
+const isNarrow = useMediaQuery('(max-width: 1023px)');
+const narrowPanelOpen = ref(false);
+
+const panelVisible = computed(() =>
+  isNarrow.value ? narrowPanelOpen.value : panelOpen.value,
+);
+
+// Counts stay cold until the navigator is actually visible.
+const { counts } = useAgentSectionCounts(props.id, agent, panelVisible);
+
+function onManage() {
+  if (isNarrow.value) narrowPanelOpen.value = true;
+  else setOpen(true);
+}
+
+function onSelectSection(next: AgentSettingsSection | null) {
+  setSection(next);
+  // On a phone the panel covers the canvas it just navigated to.
+  if (isNarrow.value) narrowPanelOpen.value = false;
+}
+
+function onClosePanel() {
+  if (isNarrow.value) narrowPanelOpen.value = false;
+  else close();
+}
+
+// The status badge in the panel renders from the DB row (not the SSE pod
+// stream). Re-fetch when the operator opens Overview so a stale 'failed' or
+// 'deploying' from initial load doesn't outlive the reconciled state.
+watch(section, (s) => {
+  if (s === 'overview') void refresh();
+});
+
+const initials = computed(() =>
+  agent.value ? agentInitials(agent.value.name, agent.value.id) : '?',
+);
+
+const lifecycleError = computed(() => restartError.value || toggleError.value);
+</script>
+
+<template>
+  <div class="flex min-h-0 min-w-0 flex-1 gap-4">
+    <!-- Middle column: banner, compact identity, usage strip, canvas. -->
+    <div class="flex min-h-0 min-w-0 flex-1 flex-col gap-3">
+      <div
+        v-if="pendingRestart"
+        class="flex shrink-0 flex-wrap items-center gap-3 rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-900 dark:text-amber-200"
+      >
+        <IconAlertTriangle class="size-4 shrink-0" />
+        <p class="min-w-56 flex-1">
+          Agent settings were updated. Restart the agent to apply the changes.
+        </p>
+        <div class="flex items-center gap-2">
+          <Button size="sm" :disabled="isRestarting" @click="restart">
+            <IconRefresh class="size-4" :class="isRestarting && 'animate-spin'" />
+            {{ isRestarting ? 'Restarting…' : 'Restart agent' }}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            :disabled="isRestarting"
+            @click="dismissRestartBanner"
+          >
+            <IconX class="size-4" />
+          </Button>
+        </div>
+      </div>
+
+      <div v-if="pending && !agent" class="flex min-h-0 flex-1 flex-col gap-3">
+        <Skeleton class="h-8 w-full shrink-0" />
+        <Skeleton class="h-9 w-full shrink-0" />
+        <Skeleton class="min-h-0 w-full flex-1" />
+      </div>
+
+      <template v-else-if="agent">
+        <!-- Compact header. The lifecycle buttons that used to live here are
+             in the settings panel now (FR-009); what stays is identity and
+             the way back to it. -->
+        <div class="flex shrink-0 items-center gap-2.5">
+          <span
+            class="flex size-8 shrink-0 items-center justify-center rounded-lg bg-linear-to-br from-primary/20 to-primary/5 text-xs font-semibold text-primary"
+          >
+            {{ initials }}
+          </span>
+          <h1 class="truncate text-base font-semibold">{{ agent.name }}</h1>
+          <Badge
+            :variant="AGENT_STATUS_VARIANT[agent.status]"
+            class="shrink-0 capitalize"
+          >
+            {{ agent.status }}
+          </Badge>
+          <div class="flex-1" />
+          <Button
+            v-if="!panelVisible"
+            variant="outline"
+            size="sm"
+            @click="onManage"
+          >
+            <IconSettings class="size-4" />
+            Manage agent
+          </Button>
+        </div>
+
+        <!-- Full-width usage strip under the header: visible in both canvas
+             modes; Details opens the Overview section. -->
+        <UsagePanel
+          :agent-id="agent.id"
+          agent-only
+          variant="strip"
+          class="shrink-0"
+          @details="onSelectSection('overview')"
+        />
+
+        <div class="min-h-0 flex-1">
+          <AgentWorkspaceCanvas
+            :agent="agent"
+            :api-url="apiUrl"
+            :section="section"
+            :overlay="chatOverlay"
+            :restarting="isRestarting"
+            :toggling="toggling"
+            @restart="restart"
+            @toggle-running="toggleRunning"
+            @back="onSelectSection(null)"
+            @agent-updated="(updated) => (agent = updated)"
+          />
+        </div>
+      </template>
+
+      <div
+        v-else
+        class="rounded-md border border-dashed p-10 text-center text-sm text-muted-foreground"
+      >
+        Agent not found.
+      </div>
+    </div>
+
+    <!-- The navigator. One element, two appearances, decided by CSS:
+         · ≥1024px — a real column in the flex row. It takes space rather than
+           floating over the canvas: floating looked tidy in the abstract, but
+           in practice it covered the pod logs and left the chat card clipped
+           at the right edge. The chat/logs pair shrinks to make room instead
+           (see chat/Tab.vue), which is the behaviour that keeps every border
+           where the eye expects it.
+         · <1024px — the whole screen, because there is no room beside it.
+         Width and placement are the host's business; the panel itself does
+         not know where it lives. -->
+    <aside
+      v-if="agent && panelVisible"
+      class="w-80 shrink-0 overflow-hidden rounded-lg border bg-card max-lg:fixed max-lg:inset-0 max-lg:z-40 max-lg:w-full max-lg:rounded-none"
+    >
+      <AgentSettingsPanel
+        :agent="agent"
+        :section="section"
+        :counts="counts"
+        :can-stop="canStop"
+        :toggling="toggling"
+        :is-restarting="isRestarting"
+        :lifecycle-error="lifecycleError"
+        @update:section="onSelectSection"
+        @restart="restart"
+        @toggle-running="toggleRunning"
+        @close="onClosePanel"
+        @deleted="emit('deleted')"
+      />
+    </aside>
+  </div>
+</template>
diff --git a/admin/slices/agent/agent/components/agent/workspace/Provider.vue b/admin/slices/agent/agent/components/agent/workspace/Provider.vue
new file mode 100644
index 00000000..c1f737e0
--- /dev/null
+++ b/admin/slices/agent/agent/components/agent/workspace/Provider.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { IconUsersGroup, IconX } from '@tabler/icons-vue';
+
+const props = defineProps<{ id: string }>();
+
+const agentStore = useAgentStore();
+const router = useRouter();
+const route = useRoute();
+
+// One list request for the whole workspace. It lives here — above the keyed
+// `Main` — so switching agents does not refetch it or flash the rail.
+const { data: agents, pending, refresh: refreshAgents } = useAsyncData(
+  'admin-agents',
+  () => agentStore.fetchAll(),
+  { lazy: true },
+);
+
+// Cluster headroom for the top action row. Store actions refetch on their
+// own; the interval catches pods actually scheduling and other operators'
+// changes. The API caches ~15s, so polling is cheap, and null (K8s
+// unreachable) simply hides the badge.
+const capacity = computed(() => agentStore.capacity ?? null);
+
+let capacityTimer: ReturnType<typeof setInterval> | null = null;
+onMounted(() => {
+  void agentStore.fetchCapacity();
+  capacityTimer = setInterval(() => void agentStore.fetchCapacity(), 30_000);
+});
+onUnmounted(() => {
+  if (capacityTimer) clearInterval(capacityTimer);
+});
+
+// Selecting an agent is real navigation — `push`, so Back undoes it (FR-004).
+// The section in `?tab=` rides along: an operator comparing Environment
+// across two agents should not be dropped back into a conversation on every
+// switch.
+function onSelect(id: string) {
+  railOverlayOpen.value = false;
+  if (id === props.id) return;
+  void router.push({ path: `/agents/${id}`, query: { ...route.query } });
+}
+
+// Below the tablet breakpoint the rail is one tap away rather than a column.
+// The docked/overlay split itself is CSS; this only tracks the tap.
+const railOverlayOpen = ref(false);
+
+// ── Available height ─────────────────────────────────────────────────
+// The workspace has to be exactly as tall as what is left below the admin
+// chrome: `SidebarProvider` is `min-h-svh`, not a fixed height, so the flex
+// chain above never bounds us and `flex-1` alone would grow the page instead
+// of fitting it.
+//
+// The obvious fix — subtracting a hard-coded chrome height — is what this
+// used to do, and it silently broke the moment the layout's padding changed
+// from `p-6` to `p-3`. So measure instead: our own distance from the top of
+// the viewport, minus whatever padding and margin sit below us. Nothing to
+// re-tune when someone moves a header or a padding again.
+const rootEl = ref<HTMLElement | null>(null);
+const availableHeight = ref<string>('');
+
+function measureHeight() {
+  const el = rootEl.value;
+  if (!el || typeof window === 'undefined') return;
+  const top = el.getBoundingClientRect().top;
+  const parent = el.parentElement;
+  const parentStyle = parent ? window.getComputedStyle(parent) : null;
+  const inset = parent?.parentElement
+    ? window.getComputedStyle(parent.parentElement)
+    : null;
+  const below =
+    (parentStyle ? parseFloat(parentStyle.paddingBottom) || 0 : 0) +
+    (inset ? parseFloat(inset.marginBottom) || 0 : 0);
+  // The floor keeps the workspace usable if it ever ends up scrolled far
+  // enough down that the arithmetic goes negative.
+  availableHeight.value = `${Math.max(360, window.innerHeight - top - below)}px`;
+}
+
+// A window resize is not the only thing that moves us: collapsing the admin
+// sidebar to icons shrinks the page header from 56px to 48px, which shifts
+// our top edge without the window changing size at all. Watching the
+// container catches both.
+let resizeObserver: ResizeObserver | null = null;
+
+onMounted(() => {
+  void nextTick(measureHeight);
+  window.addEventListener('resize', measureHeight);
+  const parent = rootEl.value?.parentElement;
+  if (parent && typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(measureHeight);
+    resizeObserver.observe(parent);
+  }
+});
+
+onUnmounted(() => {
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('resize', measureHeight);
+  }
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+});
+
+/**
+ * The open agent was deleted from its own settings panel. Move to whatever is
+ * next in the rail rather than leaving the operator on a dead id; an empty
+ * rail falls through to the resolver, which renders the empty state.
+ */
+async function onDeleted() {
+  await refreshAgents();
+  const next = (agents.value ?? []).find((a) => a.id !== props.id);
+  await router.replace(next ? `/agents/${next.id}` : '/agents');
+}
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    class="flex min-h-0 flex-col gap-3"
+    :style="availableHeight ? { height: availableHeight } : undefined"
+  >
+    <div class="flex shrink-0 items-center gap-3">
+      <Button
+        variant="outline"
+        size="sm"
+        class="lg:hidden"
+        @click="railOverlayOpen = true"
+      >
+        <IconUsersGroup class="size-4" />
+        Agents
+      </Button>
+      <AgentWorkspaceTopBar :capacity="capacity" class="flex-1" />
+    </div>
+
+    <div class="flex min-h-0 flex-1 gap-4">
+      <aside
+        class="hidden w-68 shrink-0 overflow-hidden rounded-lg border bg-card p-2 lg:block"
+      >
+        <AgentWorkspaceRail
+          :agents="agents"
+          :active-id="id"
+          :pending="pending"
+          @select="onSelect"
+        />
+      </aside>
+
+      <AgentWorkspaceMain :id="id" :key="id" @deleted="onDeleted" />
+    </div>
+
+    <!-- Narrow screens: the same rail, on demand, over the whole screen. -->
+    <div
+      v-if="railOverlayOpen"
+      class="fixed inset-0 z-40 flex flex-col gap-2 bg-background p-3 lg:hidden"
+    >
+      <div class="flex shrink-0 items-center justify-between">
+        <span class="text-sm font-medium">Agents</span>
+        <Button
+          variant="ghost"
+          size="sm"
+          class="size-8 p-0"
+          @click="railOverlayOpen = false"
+        >
+          <IconX class="size-4" />
+          <span class="sr-only">Close</span>
+        </Button>
+      </div>
+      <div class="min-h-0 flex-1">
+        <AgentWorkspaceRail
+          :agents="agents"
+          :active-id="id"
+          :pending="pending"
+          @select="onSelect"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/admin/slices/agent/agent/components/agent/workspace/Rail.vue b/admin/slices/agent/agent/components/agent/workspace/Rail.vue
new file mode 100644
index 00000000..6a64e34e
--- /dev/null
+++ b/admin/slices/agent/agent/components/agent/workspace/Rail.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { IconSearch } from '@tabler/icons-vue';
+import type { IAgentData } from '#agent/domain';
+import { useAgentRailEntries } from '#agent/composables/useAgentRailEntries';
+
+const props = defineProps<{
+  agents: IAgentData[] | null | undefined;
+  activeId: string;
+  /** Initial load only — a refresh keeps the existing rows visible. */
+  pending: boolean;
+}>();
+
+defineEmits<{ select: [id: string] }>();
+
+// Transient by design: a filter that survived a reload would leave someone
+// staring at a rail missing agents with no memory of why.
+const search = ref('');
+
+const agentsRef = computed(() => props.agents);
+const activeIdRef = computed(() => props.activeId);
+const entries = useAgentRailEntries(agentsRef, activeIdRef, search);
+
+const hasAgents = computed(() => (props.agents?.length ?? 0) > 0);
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col gap-2">
+    <div class="relative shrink-0">
+      <IconSearch
+        class="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground"
+      />
+      <Input
+        v-model="search"
+        type="search"
+        placeholder="Search agents"
+        aria-label="Search agents"
+        class="h-8 pl-8 text-sm"
+      />
+    </div>
+
+    <!-- Placeholder rows rather than an empty column while the list loads,
+         matching the treatment the table used (FR-027). -->
+    <div v-if="pending && !hasAgents" class="flex flex-col gap-1">
+      <div
+        v-for="i in 5"
+        :key="i"
+        class="flex items-center gap-3 px-2.5 py-2"
+      >
+        <Skeleton class="size-9 shrink-0 rounded-lg" />
+        <div class="flex-1 space-y-1.5">
+          <Skeleton class="h-3.5 w-28" />
+          <Skeleton class="h-3 w-20" />
+        </div>
+      </div>
+    </div>
+
+    <div v-else-if="entries.length" class="min-h-0 flex-1 overflow-y-auto">
+      <ul class="flex flex-col gap-0.5">
+        <li v-for="entry in entries" :key="entry.id">
+          <AgentWorkspaceRailItem
+            :entry="entry"
+            @click="$emit('select', entry.id)"
+          />
+        </li>
+      </ul>
+    </div>
+
+    <p
+      v-else-if="hasAgents"
+      class="px-2.5 py-6 text-center text-xs text-muted-foreground"
+    >
+      No agent matches “{{ search }}”.
+    </p>
+
+    <p v-else class="px-2.5 py-6 text-center text-xs text-muted-foreground">
+      No agents yet.
+    </p>
+  </div>
+</template>
diff --git a/admin/slices/agent/agent/components/agent/workspace/RailItem.vue b/admin/slices/agent/agent/components/agent/workspace/RailItem.vue
new file mode 100644
index 00000000..7cd03351
--- /dev/null
+++ b/admin/slices/agent/agent/components/agent/workspace/RailItem.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { IconShield } from '@tabler/icons-vue';
+import type { IRailEntry } from '#agent/composables/useAgentRailEntries';
+
+defineProps<{ entry: IRailEntry }>();
+</script>
+
+<template>
+  <!-- Identity only: name, live status, when it was created, and the admin
+       marker. No restart, no menu, no delete — a rail row picks an agent, it
+       does not act on one (FR-002). -->
+  <button
+    type="button"
+    class="flex w-full items-center gap-3 rounded-md px-2.5 py-2 text-left transition-colors hover:bg-muted"
+    :class="entry.isActive && 'bg-muted'"
+    :aria-current="entry.isActive ? 'true' : undefined"
+  >
+    <span
+      class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-linear-to-br from-primary/20 to-primary/5 text-xs font-semibold text-primary"
+    >
+      {{ entry.initials }}
+    </span>
+
+    <span class="min-w-0 flex-1">
+      <span class="flex items-center gap-1.5">
+        <span
+          class="truncate text-sm font-medium"
+          :title="entry.name"
+        >
+          {{ entry.name }}
+        </span>
+        <IconShield
+          v-if="entry.isAdmin"
+          class="size-3.5 shrink-0 text-primary"
+          title="This agent has the ranch_* admin tools and a service token"
+        />
+      </span>
+
+      <span class="mt-0.5 flex items-center gap-1.5 text-xs">
+        <span class="relative flex size-1.5">
+          <span
+            v-if="entry.tone.pulse"
+            class="absolute inline-flex size-full animate-ping rounded-full opacity-60"
+            :class="entry.tone.dot"
+          />
+          <span
+            class="relative inline-flex size-1.5 rounded-full"
+            :class="entry.tone.dot"
+          />
+        </span>
+        <span class="capitalize" :class="entry.tone.text">
+          {{ entry.status }}
+        </span>
+        <span class="text-muted-foreground/60">·</span>
+        <span class="truncate text-muted-foreground">
+          {{ formatDate(entry.createdAt) }}
+        </span>
+      </span>
+    </span>
+  </button>
+</template>
diff --git a/admin/slices/agent/agent/components/agent/workspace/TopBar.vue b/admin/slices/agent/agent/components/agent/workspace/TopBar.vue
new file mode 100644
index 00000000..375a0757
--- /dev/null
+++ b/admin/slices/agent/agent/components/agent/workspace/TopBar.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { IClusterCapacityData } from '#agent/domain';
+
+// `capacity` is null both when Kubernetes is unreachable and when the viewer
+// cannot fetch it at all (the endpoint is Owner/Admin only) — in either case
+// the badge simply does not render rather than showing a wrong number.
+defineProps<{ capacity: IClusterCapacityData | null }>();
+</script>
+
+<template>
+  <!-- The row that used to hold "← Back to agents", which has nothing left to
+       link back to now the table is gone. Workspace-level actions live here;
+       per-agent actions live in the settings panel (FR-009). -->
+  <div class="flex shrink-0 flex-wrap items-center gap-3">
+    <div
+      v-if="capacity"
+      class="hidden items-center gap-1.5 rounded-full border bg-card px-3 py-1 text-xs text-muted-foreground sm:flex"
+      title="How many more agents fit on the cluster (by CPU/memory requests on agent nodes)"
+    >
+      <span
+        :class="
+          capacity.freeAgentSlots === 0
+            ? 'font-medium text-amber-600'
+            : 'font-medium text-foreground'
+        "
+      >
+        {{ capacity.freeAgentSlots }}
+      </span>
+      {{ capacity.freeAgentSlots === 1 ? 'slot' : 'slots' }} free
+    </div>
+
+    <!-- Capacity is a ~15s-stale estimate, so this warns rather than blocks:
+         creating is still legal, the pod just waits Pending for a slot. -->
+    <p
+      v-if="capacity && capacity.freeAgentSlots === 0"
+      class="text-xs text-amber-600"
+    >
+      {{
+        capacity.totalAgentSlots === 0
+          ? 'No agent nodes available in this cluster (no schedulable node labeled node-role=agents) — new agents will stay Pending.'
+          : 'Cluster is full — stop an agent to free a slot before starting a new one.'
+      }}
+    </p>
+
+    <div class="ml-auto">
+      <Button size="sm" as-child>
+        <NuxtLink to="/agents/create">New agent</NuxtLink>
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/admin/slices/agent/agent/composables/useAgentRailEntries.ts b/admin/slices/agent/agent/composables/useAgentRailEntries.ts
new file mode 100644
index 00000000..fa55a628
--- /dev/null
+++ b/admin/slices/agent/agent/composables/useAgentRailEntries.ts
@@ -0,0 +1,114 @@
+import type { Ref } from 'vue';
+import type { AgentStatusTypes, IAgentData } from '#agent/domain';
+
+export interface IRailStatusTone {
+  dot: string;
+  text: string;
+  pulse: boolean;
+}
+
+export interface IRailEntry {
+  id: string;
+  name: string;
+  initials: string;
+  status: AgentStatusTypes;
+  tone: IRailStatusTone;
+  createdAt: string;
+  isAdmin: boolean;
+  isActive: boolean;
+}
+
+const TONE: Record<AgentStatusTypes, IRailStatusTone> = {
+  running: {
+    dot: 'bg-emerald-500',
+    text: 'text-emerald-700 dark:text-emerald-400',
+    pulse: true,
+  },
+  deploying: {
+    dot: 'bg-amber-500',
+    text: 'text-amber-700 dark:text-amber-400',
+    pulse: true,
+  },
+  pending: {
+    dot: 'bg-amber-500',
+    text: 'text-amber-700 dark:text-amber-400',
+    pulse: true,
+  },
+  failed: {
+    dot: 'bg-rose-500',
+    text: 'text-rose-700 dark:text-rose-400',
+    pulse: false,
+  },
+  stopped: {
+    dot: 'bg-muted-foreground',
+    text: 'text-muted-foreground',
+    pulse: false,
+  },
+};
+
+/** 1–2 uppercase letters; falls back to the id when the name is empty. */
+export function agentInitials(name: string, id: string): string {
+  const source = name?.trim() || id;
+  return (
+    source
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((part) => part[0]?.toUpperCase() ?? '')
+      .slice(0, 2)
+      .join('') || '?'
+  );
+}
+
+/**
+ * Live pod state wins over the DB row where we have it — the same precedence
+ * `rancher/Provider.vue` uses. The DB row is reconciled asynchronously, so
+ * right after a stop/restart it can lag the pod by seconds; the rail is the
+ * one place where that lag is visible across every agent at once.
+ *
+ * No pod at all means either "never deployed" or "stopped" — both are states
+ * the DB row describes correctly, so we defer to it rather than inventing one.
+ */
+function reconcileStatus(
+  agent: IAgentData,
+  pod: { phase: string; ready: boolean } | undefined,
+): AgentStatusTypes {
+  if (!pod) return agent.status;
+  if (pod.phase === 'Running') return pod.ready ? 'running' : 'deploying';
+  if (pod.phase === 'Pending') return 'pending';
+  if (pod.phase === 'Failed') return 'failed';
+  return agent.status;
+}
+
+/**
+ * The rail's view model: the agent list, reconciled against the live status
+ * stream, filtered by the search term, in the list's own order.
+ *
+ * Deliberately carries no action handlers — a rail entry identifies an agent
+ * and nothing more (FR-002). Restart/stop/delete live in the settings panel.
+ */
+export function useAgentRailEntries(
+  agents: Ref<IAgentData[] | null | undefined>,
+  activeId: Ref<string>,
+  search: Ref<string>,
+) {
+  const agentStatusStore = useAgentStatusStore();
+
+  return computed<IRailEntry[]>(() => {
+    const term = search.value.trim().toLowerCase();
+    return (agents.value ?? [])
+      .filter((a) => !term || a.name.toLowerCase().includes(term))
+      .map((a) => {
+        const status = reconcileStatus(a, agentStatusStore.statuses[a.id]);
+        return {
+          id: a.id,
+          name: a.name,
+          initials: agentInitials(a.name, a.id),
+          status,
+          tone: TONE[status],
+          createdAt: a.createdAt,
+          isAdmin: a.isAdmin,
+          isActive: a.id === activeId.value,
+        };
+      });
+  });
+}
diff --git a/admin/slices/agent/agent/composables/useAgentSectionCounts.ts b/admin/slices/agent/agent/composables/useAgentSectionCounts.ts
new file mode 100644
index 00000000..f952e3b6
--- /dev/null
+++ b/admin/slices/agent/agent/composables/useAgentSectionCounts.ts
@@ -0,0 +1,132 @@
+import type { Ref } from 'vue';
+import type { IAgentData } from '#agent/domain';
+import type { SectionCounts } from '#agent/components/agent/settings/sections';
+
+const EMPTY: SectionCounts = {
+  knowledge: null,
+  files: null,
+  secrets: null,
+  channels: null,
+};
+
+/**
+ * How much each countable section holds, shown beside its name in the
+ * settings navigator — the number is the reason to click, so it has to be
+ * there before the click.
+ *
+ * Three rules this owes the UI:
+ *
+ * 1. **Nothing fetches until `enabled`** — an operator who keeps the panel
+ *    collapsed should not pay for counts they never see. That is also why the
+ *    knowledge count is assembled by hand here instead of riding
+ *    `useAgentKnowledges`: that composable fires its `useAsyncData` calls the
+ *    moment it is called, which would defeat the gate.
+ * 2. **Each source fails independently.** One unreachable bucket must not
+ *    blank the other three.
+ * 3. **`null` is not `0`.** Unknown renders as nothing at all; zero renders
+ *    as zero, because "no secrets attached" is real information.
+ *
+ * There is no aggregate endpoint and this deliberately does not add one — the
+ * requests are the same ones the sections themselves make, and `useAsyncData`
+ * / store caches are shared, so opening a section after reading its count
+ * costs nothing extra.
+ */
+export function useAgentSectionCounts(
+  agentId: string,
+  agent: Ref<IAgentData | null | undefined>,
+  enabled: Ref<boolean>,
+) {
+  const templateStore = useTemplateStore();
+  const fileStore = useAgentFileStore();
+  const secretStore = useAgentSecretStore();
+  const channelStore = useAgentChannelStore();
+
+  const files = ref<number | null>(null);
+  const secrets = ref<number | null>(null);
+  const channels = ref<number | null>(null);
+  /** Knowledge bases the agent's template binds by default. Only fetched when
+   *  the agent has no per-agent override to count instead. */
+  const templateKnowledge = ref<number | null>(null);
+
+  let started = false;
+
+  async function load() {
+    if (started || !enabled.value) return;
+    started = true;
+
+    await Promise.allSettled([
+      fileStore
+        .fetchList(agentId)
+        .then((nodes) => {
+          files.value = nodes.length;
+        })
+        .catch(() => {
+          files.value = null;
+        }),
+      secretStore
+        .fetchForAgent(agentId)
+        .then((data) => {
+          // The store swallows its own errors and returns null; that is
+          // "unknown", not "none".
+          secrets.value = data ? data.secrets.length : null;
+        })
+        .catch(() => {
+          secrets.value = null;
+        }),
+      channelStore
+        .fetchForAgent(agentId)
+        .then((list) => {
+          channels.value = list.length;
+        })
+        .catch(() => {
+          channels.value = null;
+        }),
+      loadTemplateKnowledge(),
+    ]);
+  }
+
+  /** Only the template branch of the knowledge count: a per-agent override is
+   *  already on the record, so there is nothing to fetch for it. */
+  async function loadTemplateKnowledge() {
+    const templateId = agent.value?.templateId;
+    if (!templateId || (agent.value?.knowledgeIds.length ?? 0) > 0) return;
+    try {
+      const template = await templateStore.fetchById(templateId);
+      templateKnowledge.value = template?.defaultKnowledgeIds.length ?? null;
+    } catch {
+      templateKnowledge.value = null;
+    }
+  }
+
+  watch(
+    enabled,
+    (on) => {
+      if (on) void load();
+    },
+    { immediate: true },
+  );
+
+  // The agent record arrives after the panel may already have opened, so the
+  // template lookup can only run once we know which template to look up.
+  watch(
+    () => agent.value?.templateId,
+    () => {
+      if (enabled.value && started) void loadTemplateKnowledge();
+    },
+  );
+
+  const counts = computed<SectionCounts>(() => {
+    if (!enabled.value) return EMPTY;
+    const overrides = agent.value?.knowledgeIds.length ?? 0;
+    return {
+      // An override on the agent wins; otherwise the count is whatever the
+      // template binds. Same precedence the Knowledge section itself uses.
+      knowledge: overrides > 0 ? overrides : templateKnowledge.value,
+      files: files.value,
+      secrets: secrets.value,
+      channels: channels.value,
+    };
+  });
+
+  return { counts };
+}
diff --git a/admin/slices/agent/agent/composables/useSettingsPanel.ts b/admin/slices/agent/agent/composables/useSettingsPanel.ts
new file mode 100644
index 00000000..e3ccacc6
--- /dev/null
+++ b/admin/slices/agent/agent/composables/useSettingsPanel.ts
@@ -0,0 +1,94 @@
+import {
+  toSettingsSection,
+  type AgentSettingsSection,
+} from '#agent/components/agent/settings/sections';
+
+const PANEL_OPEN_KEY = 'agent:settingsPanelOpen';
+
+// Absent means OPEN. Encoding the default as *absence* rather than writing
+// '1' on first visit keeps a fresh browser, a cleared storage and a
+// never-touched toggle behaving identically — and moves the default to one
+// line if it ever changes.
+function readStoredOpen(): boolean {
+  if (typeof window === 'undefined') return true;
+  try {
+    const raw = window.localStorage.getItem(PANEL_OPEN_KEY);
+    return raw === null ? true : raw === '1';
+  } catch {
+    // Private-mode Safari throws on access. Fall back to the default.
+    return true;
+  }
+}
+
+function writeStoredOpen(open: boolean): void {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(PANEL_OPEN_KEY, open ? '1' : '0');
+  } catch {
+    // Quota or private mode — the preference is a convenience, not state we
+    // are allowed to fail over.
+  }
+}
+
+/**
+ * Two pieces of state that look like one and are deliberately not:
+ *
+ * - **which section the canvas shows** is addressable — it lives in `?tab=`,
+ *   so it can be linked and shared;
+ * - **whether the navigator is open** is a habit — it lives in localStorage,
+ *   so it does not travel in someone else's link.
+ *
+ * A section being open forces the panel visible (FR-018: the operator must be
+ * able to reach another section or the conversation), and that force does
+ * *not* write the preference — following a `?tab=env` link must not
+ * permanently reopen the panel for someone who keeps it collapsed.
+ */
+export function useSettingsPanel() {
+  const route = useRoute();
+  const router = useRouter();
+
+  const section = computed<AgentSettingsSection | null>(() =>
+    toSettingsSection(route.query.tab),
+  );
+
+  const storedOpen = ref(readStoredOpen());
+  const open = computed(() => section.value !== null || storedOpen.value);
+
+  function setSection(next: AgentSettingsSection | null): void {
+    if (next === section.value) return;
+    void router.replace({
+      query: { ...route.query, tab: next ?? undefined },
+    });
+  }
+
+  function setOpen(next: boolean): void {
+    storedOpen.value = next;
+    writeStoredOpen(next);
+  }
+
+  /**
+   * Collapsing the navigator while a section is on the canvas would strand
+   * the operator inside that section with no way back except the browser —
+   * so closing also returns to the conversation.
+   */
+  function close(): void {
+    if (section.value !== null) setSection(null);
+    setOpen(false);
+  }
+
+  function toggle(): void {
+    if (open.value) close();
+    else setOpen(true);
+  }
+
+  // A stale `?tab=chat` (or anything unrecognised) resolves to "no section";
+  // strip it so the URL says what the screen is actually showing.
+  onMounted(() => {
+    const raw = route.query.tab;
+    if (raw !== undefined && toSettingsSection(raw) === null) {
+      void router.replace({ query: { ...route.query, tab: undefined } });
+    }
+  });
+
+  return { section, open, setSection, setOpen, close, toggle };
+}
diff --git a/admin/slices/agent/agent/pages/agents/[id]/index.vue b/admin/slices/agent/agent/pages/agents/[id]/index.vue
index 839c7a5d..812db397 100644
--- a/admin/slices/agent/agent/pages/agents/[id]/index.vue
+++ b/admin/slices/agent/agent/pages/agents/[id]/index.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-// Force a fresh component tree per agent. Without this Nuxt reuses the same
-// page instance across `/agents/:id` switches — useAsyncData keys never
-// re-fire, and local refs (logs, selected file, editor content) leak from
-// the previously viewed agent. The dynamic key remounts the whole subtree
-// (provider + file tree + bridle + logs) when the id changes.
-definePageMeta({
-  key: (route) => `agent-${route.params.id as string}`,
-});
-
+// No `definePageMeta({ key })` here on purpose. The per-agent remount
+// boundary moved one level down, onto `<AgentWorkspaceMain :key="id">`: it
+// still guarantees that logs, the file tree, the open section and the chat
+// transcript are torn down when the agent changes, but it leaves the agent
+// rail alone. Keyed at the page level, the rail would remount on every
+// switch — refetching the agent list and flashing the whole column.
+// Computed, not read once: without a page key this component instance is
+// reused across `/agents/:id` changes, so a snapshot taken at setup would
+// pin the workspace to whichever agent happened to be open first.
 const route = useRoute();
-const id = route.params.id as string;
+const id = computed(() => route.params.id as string);
 </script>
 
 <template>
diff --git a/admin/slices/agent/agent/pages/agents/index.vue b/admin/slices/agent/agent/pages/agents/index.vue
index a8c79333..55e82f37 100644
--- a/admin/slices/agent/agent/pages/agents/index.vue
+++ b/admin/slices/agent/agent/pages/agents/index.vue
@@ -1,6 +1,51 @@
+<script setup lang="ts">
+// There is no agents table any more (FR-008). This route is a resolver: it
+// picks the agent to land on and hands over to the canonical
+// `/agents/:id` address, which is what keeps deep links, sharing and the
+// back button working. It only renders when there is nothing to land on.
+//
+// `replace: true` keeps `/agents` out of the history stack — Back from an
+// agent should leave the agents area, not bounce through the resolver.
+const agentStore = useAgentStore();
+
+const { data: agents, pending } = await useAsyncData('admin-agents', () =>
+  agentStore.fetchAll(),
+);
+
+const landing = computed(() => {
+  const list = agents.value ?? [];
+  if (!list.length) return null;
+  // The Ranch admin agent is the one an operator almost always wants: it is
+  // the agent that can act on the rest of the install.
+  const rancher = list.find((a) => a.isAdmin);
+  if (rancher) return rancher;
+  return [...list].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))[0];
+});
+
+watchEffect(() => {
+  if (landing.value) {
+    void navigateTo(`/agents/${landing.value.id}`, { replace: true });
+  }
+});
+</script>
+
 <template>
-    <div>
-      <AgentListProvider />
-    </div>
-  </template>
-  
\ No newline at end of file
+  <div v-if="pending && !agents?.length" class="flex flex-col gap-3">
+    <Skeleton class="h-8 w-48" />
+    <Skeleton class="h-64 w-full rounded-lg" />
+  </div>
+
+  <div
+    v-else-if="!landing"
+    class="rounded-lg border border-dashed p-12 text-center"
+  >
+    <h1 class="text-base font-semibold">No agents yet</h1>
+    <p class="mx-auto mt-1 max-w-sm text-sm text-muted-foreground">
+      Deploy an agent and this becomes its workspace — chat on the left,
+      settings on the right.
+    </p>
+    <Button class="mt-5" as-child>
+      <NuxtLink to="/agents/create">Create your first agent</NuxtLink>
+    </Button>
+  </div>
+</template>
diff --git a/admin/slices/common/components/layout/Provider.vue b/admin/slices/common/components/layout/Provider.vue
index b9ca8214..148748ca 100644
--- a/admin/slices/common/components/layout/Provider.vue
+++ b/admin/slices/common/components/layout/Provider.vue
@@ -38,7 +38,7 @@ const pageTitle = computed(() => {
            turning this into a scroll container that breaks `position: sticky`
            for every page inside it. `clip` contains horizontal blow-out
            without that side effect. -->
-      <div class="flex flex-1 flex-col gap-4 p-6 min-w-0 overflow-x-clip">
+      <div class="flex flex-1 flex-col gap-4 p-3 min-w-0 overflow-x-clip">
         <slot />
       </div>
     </SidebarInset>
diff --git a/admin/slices/common/utils/formatDate.ts b/admin/slices/common/utils/formatDate.ts
index 10694400..bc6cbbd4 100644
--- a/admin/slices/common/utils/formatDate.ts
+++ b/admin/slices/common/utils/formatDate.ts
@@ -1,4 +1,10 @@
 export const formatDateTime = (date?: string) => {
     if (!date) return '';
     return new Date(date).toLocaleString('en-US', { dateStyle: 'medium', timeStyle: 'short' });
-};
\ No newline at end of file
+};
+/** Date without the time — for dense surfaces (the agent rail) where the
+ *  clock adds width without adding information. */
+export const formatDate = (date?: string) => {
+    if (!date) return '';
+    return new Date(date).toLocaleDateString('en-US', { dateStyle: 'medium' });
+};
diff --git a/app/i18n.sync.json b/app/i18n.sync.json
index 6a5b79e5..758c4bfe 100644
--- a/app/i18n.sync.json
+++ b/app/i18n.sync.json
@@ -2,9 +2,6 @@
   "version": 1,
   "hashes": {
     "agent:ru": {
-      "card.open_chat": "0600175af842",
-      "card.updated": "f0a6d28abcbc",
-      "chat.back_to_agents": "7da2164b2679",
       "chat.elapsed": "e7a16571c3e4",
       "chat.loading": "ba3bbbe10d8b",
       "chat.not_found": "a50ba166a23a",
@@ -25,10 +22,12 @@
       "list.empty_hint": "3b00ddd1d6b2",
       "list.empty_no_permission": "11c1123faf1d",
       "list.empty_title": "971b61f8cb4d",
-      "list.lede": "1a2a5c6eb9e9",
-      "list.running_of": "dafe09b6ae07",
       "list.slots_free": "aa856cbf3070",
-      "list.title": "279b44d2ab4b",
+      "rail.close": "a7aad2c95dbd",
+      "rail.empty": "8a33b2e7d85a",
+      "rail.no_match": "2613a6f3db13",
+      "rail.search": "212fd04a1d20",
+      "rail.switch": "a31fc91f231b",
       "restart_stage.almost_body": "cc88c514c77b",
       "restart_stage.almost_title": "0ceb8f97a4cc",
       "restart_stage.deploying_body": "4cc2d4111a84",
diff --git a/app/slices/agent/components/agentChat/Provider.vue b/app/slices/agent/components/agentChat/Provider.vue
index cabd019f..2ca76129 100644
--- a/app/slices/agent/components/agentChat/Provider.vue
+++ b/app/slices/agent/components/agentChat/Provider.vue
@@ -159,20 +159,16 @@ const initials = computed(() => {
 </script>
 
 <template>
-  <div class="flex h-[calc(100vh-3.5rem-1px)] flex-col">
-    <!-- Compact header strip: back, agent identity, status, actions -->
+  <!-- Height comes from the workspace shell now: this component is one
+       column of it, not the page. -->
+  <div class="flex h-full min-h-0 flex-col">
+    <!-- Compact header strip: agent identity, status, actions. The "back to
+         agents" link is gone with the card grid it pointed at — the rail on
+         the left is where you switch agents now. -->
     <header class="shrink-0 border-b bg-card">
       <div
         class="mx-auto flex w-full max-w-3xl items-center gap-3 px-4 py-3"
       >
-        <NuxtLink
-          to="/agents"
-          class="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-muted transition"
-          :aria-label="$t('chat.back_to_agents')"
-        >
-          <Icon name="arrow-left" :size="16" />
-        </NuxtLink>
-
         <div
           v-if="agent"
           class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-linear-to-br from-primary/20 to-primary/5 text-sm font-semibold text-primary"
@@ -260,12 +256,6 @@ const initials = computed(() => {
             {{ $t('chat.unavailable_hint') }}
           </p>
         </div>
-        <NuxtLink
-          to="/agents"
-          class="text-xs font-medium text-primary hover:underline"
-        >
-          ← {{ $t('chat.back_to_agents') }}
-        </NuxtLink>
       </div>
       <BridleChatProvider
         v-else
diff --git a/app/slices/agent/components/agentList/Provider.vue b/app/slices/agent/components/agentList/Provider.vue
deleted file mode 100644
index c7140a91..00000000
--- a/app/slices/agent/components/agentList/Provider.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<script setup lang="ts">
-const agentStore = useAgentStore();
-const authStore = useAuthStore();
-
-const canCreate = computed(() =>
-  authStore.hasRole(UserRoleTypes.Owner, UserRoleTypes.Admin),
-);
-
-const { data: agents, pending } = await useAsyncData(
-  'agents',
-  () => agentStore.fetchAll(),
-);
-
-const runningCount = computed(
-  () => (agents.value ?? []).filter((a) => a.status === 'running').length,
-);
-
-// Cluster headroom — fetched only for roles that can act on it (also avoids
-// 403 noise for plain users). Store actions (create/remove/restart) refetch
-// on their own; the interval catches everyone else's changes and pods
-// actually scheduling. The backend caches ~15s, so polling is cheap.
-const capacity = computed(() => agentStore.capacity);
-
-let capacityTimer: ReturnType<typeof setInterval> | null = null;
-onMounted(() => {
-  if (!canCreate.value) return;
-  void agentStore.fetchCapacity();
-  capacityTimer = setInterval(() => void agentStore.fetchCapacity(), 30_000);
-});
-onUnmounted(() => {
-  if (capacityTimer) clearInterval(capacityTimer);
-});
-</script>
-
-<template>
-  <div class="flex flex-col gap-6">
-    <header class="flex flex-wrap items-end justify-between gap-4">
-      <div>
-        <h1 class="text-2xl font-bold tracking-tight">{{ $t('list.title') }}</h1>
-        <p class="mt-1 text-sm text-muted-foreground">
-          {{ $t('list.lede') }}
-        </p>
-      </div>
-
-      <div class="flex items-center gap-3">
-        <div
-          v-if="agents?.length"
-          class="hidden sm:flex items-center gap-2 rounded-full border bg-card px-3 py-1 text-xs text-muted-foreground"
-        >
-          <span class="relative flex h-2 w-2">
-            <span
-              v-if="runningCount > 0"
-              class="absolute inline-flex h-full w-full rounded-full bg-emerald-500 opacity-60 animate-ping"
-            />
-            <span
-              class="relative inline-flex h-2 w-2 rounded-full"
-              :class="runningCount > 0 ? 'bg-emerald-500' : 'bg-muted-foreground'"
-            />
-          </span>
-          <!-- The running count keeps its own emphasis, so it comes in as a
-               slot rather than a plain parameter — the sentence stays one
-               translatable string either way. -->
-          <i18n-t keypath="list.running_of" tag="span">
-            <template #running>
-              <span class="font-medium text-foreground">{{ runningCount }}</span>
-            </template>
-            <template #total>{{ agents.length }}</template>
-          </i18n-t>
-          <template v-if="canCreate && capacity">
-            <span class="text-muted-foreground/60">·</span>
-            <span
-              :class="
-                capacity.freeAgentSlots === 0
-                  ? 'font-medium text-amber-600'
-                  : ''
-              "
-            >
-              {{
-                $t(
-                  'list.slots_free',
-                  { count: capacity.freeAgentSlots },
-                  capacity.freeAgentSlots,
-                )
-              }}
-            </span>
-          </template>
-        </div>
-
-        <NuxtLink
-          v-if="canCreate"
-          to="/agents/create"
-          class="inline-flex items-center gap-1.5 rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium shadow-sm hover:opacity-95 transition"
-        >
-          <Icon name="plus" :size="14" />
-          {{ $t('list.create') }}
-        </NuxtLink>
-      </div>
-    </header>
-
-    <!-- Capacity is a ~15s-stale estimate, so this warns rather than blocks:
-         creating is still legal, the pod just waits Pending for a slot. -->
-    <div
-      v-if="canCreate && capacity?.freeAgentSlots === 0"
-      class="flex items-center gap-1.5 text-xs text-amber-600"
-    >
-      <Icon name="alert-triangle" :size="14" class="shrink-0" />
-      {{
-        $t(
-          capacity.totalAgentSlots === 0
-            ? 'list.cluster_no_nodes'
-            : 'list.cluster_full',
-        )
-      }}
-    </div>
-
-    <!-- Loading skeletons (initial load only — refresh keeps existing list visible) -->
-    <div
-      v-if="pending && !agents?.length"
-      class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
-    >
-      <div
-        v-for="i in 3"
-        :key="i"
-        class="flex flex-col rounded-xl border bg-card p-5"
-      >
-        <div class="flex items-start gap-4">
-          <div class="h-12 w-12 shrink-0 rounded-lg bg-muted animate-pulse" />
-          <div class="flex-1 space-y-2">
-            <div class="h-4 w-32 rounded bg-muted animate-pulse" />
-            <div class="h-3 w-48 rounded bg-muted/70 animate-pulse" />
-          </div>
-        </div>
-        <div class="mt-5 h-3 w-24 rounded bg-muted/70 animate-pulse" />
-      </div>
-    </div>
-
-    <div
-      v-else-if="agents?.length"
-      class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
-    >
-      <AgentListCard
-        v-for="agent in agents"
-        :key="agent.id"
-        :agent="agent"
-      />
-    </div>
-
-    <div
-      v-else
-      class="rounded-xl border border-dashed bg-card/40 p-12 text-center"
-    >
-      <div
-        class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted text-muted-foreground"
-      >
-        <Icon name="bot" :size="22" />
-      </div>
-      <h2 class="mt-4 text-base font-semibold">{{ $t('list.empty_title') }}</h2>
-      <p class="mt-1 text-sm text-muted-foreground max-w-sm mx-auto">
-        {{ $t('list.empty_hint') }}
-      </p>
-      <NuxtLink
-        v-if="canCreate"
-        to="/agents/create"
-        class="mt-5 inline-flex items-center gap-1.5 rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:opacity-95 transition"
-      >
-        <Icon name="plus" :size="14" />
-        {{ $t('list.empty_cta') }}
-      </NuxtLink>
-      <p
-        v-else
-        class="mt-5 text-xs text-muted-foreground/70"
-      >
-        {{ $t('list.empty_no_permission') }}
-      </p>
-    </div>
-  </div>
-</template>
diff --git a/app/slices/agent/components/agentWorkspace/Provider.vue b/app/slices/agent/components/agentWorkspace/Provider.vue
new file mode 100644
index 00000000..0c0d9253
--- /dev/null
+++ b/app/slices/agent/components/agentWorkspace/Provider.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+const props = defineProps<{ id: string }>();
+
+const agentStore = useAgentStore();
+const authStore = useAuthStore();
+const { remember } = useLastAgent();
+
+const canCreate = computed(() =>
+  authStore.hasRole(UserRoleTypes.Owner, UserRoleTypes.Admin),
+);
+
+// One list request for the whole workspace, shared with the resolver page by
+// its key so landing here does not re-fetch what it already read.
+const { data: agents, pending, refresh } = await useAsyncData('agents', () =>
+  agentStore.fetchAll(),
+);
+
+// The rail shows every agent's runtime state, so it has to keep up with
+// agents other people start and stop. The app console has no status stream
+// of its own (admin's SSE feed is public, but porting the client is a
+// separate piece of work — see research R3), so this polls at the same
+// cadence the cards screen already polled capacity at. The open agent keeps
+// its own 3s poll while it is transitioning.
+let listTimer: ReturnType<typeof setInterval> | null = null;
+let capacityTimer: ReturnType<typeof setInterval> | null = null;
+
+onMounted(() => {
+  listTimer = setInterval(() => void refresh(), 30_000);
+  if (!canCreate.value) return;
+  void agentStore.fetchCapacity();
+  capacityTimer = setInterval(() => void agentStore.fetchCapacity(), 30_000);
+});
+onUnmounted(() => {
+  if (listTimer) clearInterval(listTimer);
+  if (capacityTimer) clearInterval(capacityTimer);
+});
+
+const capacity = computed(() => agentStore.capacity);
+
+// Remember whichever agent is open so the next visit lands back on it.
+watch(
+  () => props.id,
+  (id) => {
+    if (id) remember(id);
+  },
+  { immediate: true },
+);
+
+const railOverlayOpen = ref(false);
+
+function onSelect(id: string) {
+  railOverlayOpen.value = false;
+  if (id === props.id) return;
+  void navigateTo(`/agents/${id}`);
+}
+</script>
+
+<template>
+  <!-- 3.5rem + 1px = the app header and its border. The layout already treats
+       this route as flush (no container, no footer), so the workspace owns
+       the remaining height. -->
+  <div class="flex h-[calc(100vh-3.5rem-1px)] min-h-0">
+    <aside
+      class="hidden w-68 shrink-0 flex-col gap-3 border-r p-3 md:flex"
+    >
+      <div v-if="canCreate" class="flex shrink-0 items-center gap-2">
+        <NuxtLink
+          to="/agents/create"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition hover:opacity-95"
+        >
+          <Icon name="plus" :size="13" />
+          {{ $t('list.create') }}
+        </NuxtLink>
+      </div>
+
+      <p
+        v-if="canCreate && capacity"
+        class="shrink-0 text-xs"
+        :class="
+          capacity.freeAgentSlots === 0
+            ? 'font-medium text-amber-600'
+            : 'text-muted-foreground'
+        "
+      >
+        {{
+          $t(
+            'list.slots_free',
+            { count: capacity.freeAgentSlots },
+            capacity.freeAgentSlots,
+          )
+        }}
+      </p>
+
+      <div class="min-h-0 flex-1">
+        <AgentWorkspaceRail
+          :agents="agents"
+          :active-id="id"
+          :pending="pending"
+          @select="onSelect"
+        />
+      </div>
+    </aside>
+
+    <div class="flex min-h-0 min-w-0 flex-1 flex-col">
+      <!-- Narrow screens: the rail is one tap away rather than a column. -->
+      <div class="shrink-0 border-b px-3 py-2 md:hidden">
+        <button
+          type="button"
+          class="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium transition hover:bg-muted"
+          @click="railOverlayOpen = true"
+        >
+          <Icon name="list" :size="13" />
+          {{ $t('rail.switch') }}
+        </button>
+      </div>
+
+      <div class="min-h-0 flex-1">
+        <AgentChatProvider :id="id" />
+      </div>
+    </div>
+
+    <div
+      v-if="railOverlayOpen"
+      class="fixed inset-0 z-40 flex flex-col gap-2 bg-background p-3 md:hidden"
+    >
+      <div class="flex shrink-0 items-center justify-between">
+        <span class="text-sm font-medium">{{ $t('nav.agents') }}</span>
+        <button
+          type="button"
+          class="rounded-md p-1.5 text-muted-foreground transition hover:bg-muted hover:text-foreground"
+          :aria-label="$t('rail.close')"
+          @click="railOverlayOpen = false"
+        >
+          <Icon name="x" :size="16" />
+        </button>
+      </div>
+
+      <NuxtLink
+        v-if="canCreate"
+        to="/agents/create"
+        class="inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground"
+      >
+        <Icon name="plus" :size="13" />
+        {{ $t('list.create') }}
+      </NuxtLink>
+
+      <div class="min-h-0 flex-1">
+        <AgentWorkspaceRail
+          :agents="agents"
+          :active-id="id"
+          :pending="pending"
+          @select="onSelect"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/slices/agent/components/agentWorkspace/Rail.vue b/app/slices/agent/components/agentWorkspace/Rail.vue
new file mode 100644
index 00000000..657a7321
--- /dev/null
+++ b/app/slices/agent/components/agentWorkspace/Rail.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { IAgentData } from '#agent/domain';
+
+const props = defineProps<{
+  agents: IAgentData[] | null | undefined;
+  activeId: string;
+  /** Initial load only — a refresh keeps the existing rows visible. */
+  pending: boolean;
+}>();
+
+defineEmits<{ select: [id: string] }>();
+
+// Transient by design: a filter that survived a reload would leave someone
+// staring at a list missing agents with no memory of why.
+const search = ref('');
+
+const filtered = computed(() => {
+  const term = search.value.trim().toLowerCase();
+  const list = props.agents ?? [];
+  return term ? list.filter((a) => a.name.toLowerCase().includes(term)) : list;
+});
+
+const hasAgents = computed(() => (props.agents?.length ?? 0) > 0);
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col gap-2">
+    <div class="relative shrink-0">
+      <Icon
+        name="search"
+        :size="14"
+        class="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground"
+      />
+      <input
+        v-model="search"
+        type="search"
+        :placeholder="$t('rail.search')"
+        :aria-label="$t('rail.search')"
+        class="w-full rounded-md border bg-transparent py-1.5 pl-8 pr-2 text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30"
+      />
+    </div>
+
+    <!-- Placeholder rows rather than an empty column while the list loads. -->
+    <div v-if="pending && !hasAgents" class="flex flex-col gap-1">
+      <div v-for="i in 5" :key="i" class="flex items-center gap-3 px-2.5 py-2">
+        <div class="h-9 w-9 shrink-0 animate-pulse rounded-lg bg-muted" />
+        <div class="flex-1 space-y-1.5">
+          <div class="h-3.5 w-28 animate-pulse rounded bg-muted" />
+          <div class="h-3 w-20 animate-pulse rounded bg-muted/70" />
+        </div>
+      </div>
+    </div>
+
+    <div v-else-if="filtered.length" class="min-h-0 flex-1 overflow-y-auto">
+      <ul class="flex flex-col gap-0.5">
+        <li v-for="agent in filtered" :key="agent.id">
+          <AgentWorkspaceRailItem
+            :agent="agent"
+            :active="agent.id === activeId"
+            @click="$emit('select', agent.id)"
+          />
+        </li>
+      </ul>
+    </div>
+
+    <p
+      v-else-if="hasAgents"
+      class="px-2.5 py-6 text-center text-xs text-muted-foreground"
+    >
+      {{ $t('rail.no_match', { term: search }) }}
+    </p>
+
+    <p v-else class="px-2.5 py-6 text-center text-xs text-muted-foreground">
+      {{ $t('rail.empty') }}
+    </p>
+  </div>
+</template>
diff --git a/app/slices/agent/components/agentList/Card.vue b/app/slices/agent/components/agentWorkspace/RailItem.vue
similarity index 55%
rename from app/slices/agent/components/agentList/Card.vue
rename to app/slices/agent/components/agentWorkspace/RailItem.vue
index c49b752f..529ea355 100644
--- a/app/slices/agent/components/agentList/Card.vue
+++ b/app/slices/agent/components/agentWorkspace/RailItem.vue
@@ -7,17 +7,20 @@ const props = defineProps<{
     templateId: string;
     updatedAt?: string;
   };
+  active: boolean;
 }>();
 
-// Initials from name — fallback to first 2 chars of id when name missing.
+// Initials from name — fallback to the id when the name is missing.
 const initials = computed(() => {
   const source = props.agent.name?.trim() || props.agent.id;
-  return source
-    .split(/\s+/)
-    .filter(Boolean)
-    .map((p) => p[0]?.toUpperCase() ?? '')
-    .slice(0, 2)
-    .join('') || '?';
+  return (
+    source
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((p) => p[0]?.toUpperCase() ?? '')
+      .slice(0, 2)
+      .join('') || '?'
+  );
 });
 
 // labelKey is an i18n key; `label` carries the raw status for the default
@@ -36,7 +39,9 @@ const statusMeta = computed(() => {
     case 'pending':
       return {
         labelKey:
-          props.agent.status === 'pending' ? 'status.pending' : 'status.deploying',
+          props.agent.status === 'pending'
+            ? 'status.pending'
+            : 'status.deploying',
         label: props.agent.status,
         dot: 'bg-amber-500',
         pulse: true,
@@ -90,67 +95,44 @@ const updatedRelative = computed<{ key: string; count: number } | null>(() => {
 </script>
 
 <template>
-  <NuxtLink
-    :to="`/agents/${agent.id}`"
-    class="group relative flex flex-col rounded-xl border bg-card p-5 transition hover:border-primary/40 hover:shadow-md hover:-translate-y-0.5"
+  <button
+    type="button"
+    class="flex w-full items-center gap-3 rounded-lg px-2.5 py-2 text-left transition hover:bg-muted"
+    :class="active && 'bg-muted'"
+    :aria-current="active ? 'true' : undefined"
   >
-    <div class="flex items-start gap-4">
-      <div
-        class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-linear-to-br from-primary/20 to-primary/5 font-semibold text-primary"
-      >
-        {{ initials }}
-      </div>
-
-      <div class="min-w-0 flex-1">
-        <div class="flex items-center gap-2">
-          <h3 class="truncate text-base font-semibold">{{ agent.name }}</h3>
-        </div>
-        <p
-          class="mt-0.5 truncate text-xs text-muted-foreground"
-          :title="agent.templateId"
-        >
-          {{ agent.templateId }}
-        </p>
-      </div>
+    <span
+      class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-linear-to-br from-primary/20 to-primary/5 text-xs font-semibold text-primary"
+    >
+      {{ initials }}
+    </span>
 
-      <div
-        class="flex shrink-0 items-center gap-2 text-xs font-medium"
-        :class="statusMeta.text"
-      >
-        <span class="relative flex h-2 w-2">
+    <span class="min-w-0 flex-1">
+      <span class="block truncate text-sm font-medium" :title="agent.name">
+        {{ agent.name }}
+      </span>
+      <span class="mt-0.5 flex items-center gap-1.5 text-xs">
+        <span class="relative flex h-1.5 w-1.5">
           <span
             v-if="statusMeta.pulse"
-            class="absolute inline-flex h-full w-full rounded-full opacity-60 animate-ping"
+            class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-60"
             :class="statusMeta.dot"
           />
           <span
-            class="relative inline-flex h-2 w-2 rounded-full"
+            class="relative inline-flex h-1.5 w-1.5 rounded-full"
             :class="statusMeta.dot"
           />
         </span>
-        {{ statusMeta.labelKey ? $t(statusMeta.labelKey) : statusMeta.label }}
-      </div>
-    </div>
-
-    <div
-      class="mt-5 flex items-center justify-between border-t pt-3 text-xs text-muted-foreground"
-    >
-      <span class="inline-flex items-center gap-1 truncate">
-        <Icon name="message-square" :size="12" class="-mt-0.5" />
-        {{ $t('card.open_chat') }}
-        <Icon
-          name="arrow-up-right"
-          :size="12"
-          class="-mt-0.5 -translate-x-0.5 opacity-0 transition group-hover:translate-x-0 group-hover:opacity-80"
-        />
-      </span>
-      <span v-if="updatedRelative" class="shrink-0">
-        {{
-          $t('card.updated', {
-            when: $t(updatedRelative.key, { count: updatedRelative.count }),
-          })
-        }}
+        <span :class="statusMeta.text">
+          {{ statusMeta.labelKey ? $t(statusMeta.labelKey) : statusMeta.label }}
+        </span>
+        <template v-if="updatedRelative">
+          <span class="text-muted-foreground/60">·</span>
+          <span class="truncate text-muted-foreground">
+            {{ $t(updatedRelative.key, { count: updatedRelative.count }) }}
+          </span>
+        </template>
       </span>
-    </div>
-  </NuxtLink>
+    </span>
+  </button>
 </template>
diff --git a/app/slices/agent/composables/useLastAgent.ts b/app/slices/agent/composables/useLastAgent.ts
new file mode 100644
index 00000000..adb1bf58
--- /dev/null
+++ b/app/slices/agent/composables/useLastAgent.ts
@@ -0,0 +1,49 @@
+const LAST_AGENT_KEY = 'agent:lastOpened';
+
+/**
+ * Which agent to open when someone lands on the agents area.
+ *
+ * A convenience, not synced state: it lives in this browser only, so a second
+ * device simply falls back to the first running agent. Every read is
+ * validated against what the user can actually see right now — without that
+ * check a deleted agent, a revoked visibility, or a second user on a shared
+ * browser would strand the next visit on a dead id.
+ */
+export function useLastAgent() {
+  function read(): string | null {
+    if (typeof window === 'undefined') return null;
+    try {
+      return window.localStorage.getItem(LAST_AGENT_KEY);
+    } catch {
+      return null;
+    }
+  }
+
+  function remember(id: string): void {
+    if (typeof window === 'undefined') return;
+    try {
+      window.localStorage.setItem(LAST_AGENT_KEY, id);
+    } catch {
+      // Quota or private mode — losing the memory costs one extra click.
+    }
+  }
+
+  /**
+   * Remembered agent → first running → first in the list → nothing.
+   * "First running" beats "first in the list" because an agent you can
+   * actually talk to is a better landing than one that is stopped.
+   */
+  function resolveLanding<T extends { id: string; status: string }>(
+    agents: T[],
+  ): T | null {
+    if (!agents.length) return null;
+    const remembered = read();
+    const stored = remembered
+      ? agents.find((a) => a.id === remembered)
+      : undefined;
+    if (stored) return stored;
+    return agents.find((a) => a.status === 'running') ?? agents[0] ?? null;
+  }
+
+  return { read, remember, resolveLanding };
+}
diff --git a/app/slices/agent/i18n/locales/en.json b/app/slices/agent/i18n/locales/en.json
index ed00b5c9..a2283795 100644
--- a/app/slices/agent/i18n/locales/en.json
+++ b/app/slices/agent/i18n/locales/en.json
@@ -1,8 +1,5 @@
 {
   "list": {
-    "title": "Agents",
-    "lede": "Click a card to chat. Live runtime status updates as agents come online.",
-    "running_of": "{running} / {total} running",
     "slots_free": "no slots free | {count} slot free | {count} slots free",
     "cluster_no_nodes": "No agent nodes available in this cluster — new agents will stay Pending.",
     "cluster_full": "Cluster is full — stop an agent to free a slot before starting a new one.",
@@ -12,10 +9,6 @@
     "empty_cta": "Create your first agent",
     "empty_no_permission": "Ask an Admin or Owner to deploy one."
   },
-  "card": {
-    "open_chat": "Open chat",
-    "updated": "Updated {when}"
-  },
   "item": {
     "template": "Template",
     "resources": "Resources",
@@ -24,7 +17,6 @@
     "load_error": "Error loading agent"
   },
   "chat": {
-    "back_to_agents": "Back to agents",
     "loading": "Loading…",
     "not_found": "Agent not found",
     "unavailable_title": "Agent unavailable",
@@ -50,5 +42,12 @@
     "starting_body": "The container is pulling and initialising.",
     "almost_title": "Almost ready…",
     "almost_body": "Waiting for the agent to come online."
+  },
+  "rail": {
+    "search": "Search agents",
+    "no_match": "No agent matches “{term}”.",
+    "empty": "No agents yet.",
+    "switch": "Switch agent",
+    "close": "Close agent list"
   }
 }
diff --git a/app/slices/agent/i18n/locales/ru.json b/app/slices/agent/i18n/locales/ru.json
index e58b1c13..7b3b582a 100644
--- a/app/slices/agent/i18n/locales/ru.json
+++ b/app/slices/agent/i18n/locales/ru.json
@@ -1,8 +1,5 @@
 {
   "list": {
-    "title": "Агенты",
-    "lede": "Нажмите на карточку, чтобы открыть чат. Статус обновляется по мере запуска агентов.",
-    "running_of": "{running} / {total} запущено",
     "slots_free": "нет свободных слотов | {count} слот свободен | {count} слота свободно | {count} слотов свободно",
     "cluster_no_nodes": "В этом кластере нет доступных узлов для агентов — новые агенты останутся в статусе Pending.",
     "cluster_full": "Кластер заполнен — остановите агента, чтобы освободить слот перед запуском нового.",
@@ -12,10 +9,6 @@
     "empty_cta": "Создать первого агента",
     "empty_no_permission": "Попросите администратора или владельца развернуть агента."
   },
-  "card": {
-    "open_chat": "Открыть чат",
-    "updated": "Обновлено {when}"
-  },
   "item": {
     "template": "Шаблон",
     "resources": "Ресурсы",
@@ -24,7 +17,6 @@
     "load_error": "Ошибка загрузки агента"
   },
   "chat": {
-    "back_to_agents": "Назад к агентам",
     "loading": "Загрузка…",
     "not_found": "Агент не найден",
     "unavailable_title": "Агент недоступен",
@@ -50,5 +42,12 @@
     "starting_body": "Контейнер загружается и инициализируется.",
     "almost_title": "Почти готово…",
     "almost_body": "Ожидание выхода агента в сеть."
+  },
+  "rail": {
+    "search": "Поиск агентов",
+    "no_match": "Нет агентов по запросу «{term}».",
+    "empty": "Пока нет агентов.",
+    "switch": "Сменить агента",
+    "close": "Закрыть список агентов"
   }
 }
diff --git a/app/slices/agent/pages/agents/[id].vue b/app/slices/agent/pages/agents/[id].vue
index b4a70cee..56bb81f5 100644
--- a/app/slices/agent/pages/agents/[id].vue
+++ b/app/slices/agent/pages/agents/[id].vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
+// Computed, not read once: this component instance is reused across
+// `/agents/:id` changes, so a snapshot taken at setup would pin the workspace
+// to whichever agent happened to be open first.
 const route = useRoute();
-const id = route.params.id as string;
+const id = computed(() => route.params.id as string);
 </script>
 
 <template>
-  <AgentChatProvider :id="id" />
+  <AgentWorkspaceProvider :id="id" />
 </template>
diff --git a/app/slices/agent/pages/agents/index.vue b/app/slices/agent/pages/agents/index.vue
index 02bbb6ab..9a937cbe 100644
--- a/app/slices/agent/pages/agents/index.vue
+++ b/app/slices/agent/pages/agents/index.vue
@@ -1,5 +1,61 @@
+<script setup lang="ts">
+// The card grid is gone (FR-019). This route is a resolver: it picks the
+// agent to open and hands over to `/agents/:id`, which is the address that
+// can be linked, shared and reached with the back button. It only renders
+// when there is nothing to open.
+const agentStore = useAgentStore();
+const authStore = useAuthStore();
+const { resolveLanding } = useLastAgent();
+
+const canCreate = computed(() =>
+  authStore.hasRole(UserRoleTypes.Owner, UserRoleTypes.Admin),
+);
+
+const { data: agents, pending } = await useAsyncData('agents', () =>
+  agentStore.fetchAll(),
+);
+
+// Remembered agent → first running → first in the list. The remembered id is
+// only honoured while it is still in this user's visible list, so a deleted
+// or newly-hidden agent is a non-event rather than a dead landing.
+const landing = computed(() => resolveLanding(agents.value ?? []));
+
+watchEffect(() => {
+  if (landing.value) {
+    void navigateTo(`/agents/${landing.value.id}`, { replace: true });
+  }
+});
+</script>
+
 <template>
-  <div>
-    <AgentListProvider />
+  <div v-if="pending && !agents?.length" class="flex flex-col gap-4">
+    <div class="h-8 w-48 animate-pulse rounded bg-muted" />
+    <div class="h-64 w-full animate-pulse rounded-xl bg-muted/70" />
+  </div>
+
+  <div
+    v-else-if="!landing"
+    class="rounded-xl border border-dashed bg-card/40 p-12 text-center"
+  >
+    <div
+      class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted text-muted-foreground"
+    >
+      <Icon name="bot" :size="22" />
+    </div>
+    <h2 class="mt-4 text-base font-semibold">{{ $t('list.empty_title') }}</h2>
+    <p class="mx-auto mt-1 max-w-sm text-sm text-muted-foreground">
+      {{ $t('list.empty_hint') }}
+    </p>
+    <NuxtLink
+      v-if="canCreate"
+      to="/agents/create"
+      class="mt-5 inline-flex items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition hover:opacity-95"
+    >
+      <Icon name="plus" :size="14" />
+      {{ $t('list.empty_cta') }}
+    </NuxtLink>
+    <p v-else class="mt-5 text-xs text-muted-foreground/70">
+      {{ $t('list.empty_no_permission') }}
+    </p>
   </div>
 </template>
diff --git a/specs/006-agent-workspace-tabs/checklists/requirements.md b/specs/006-agent-workspace-tabs/checklists/requirements.md
new file mode 100644
index 00000000..4aefe76d
--- /dev/null
+++ b/specs/006-agent-workspace-tabs/checklists/requirements.md
@@ -0,0 +1,108 @@
+# Specification Quality Checklist: Agent workspace — vertical agent tabs + settings panel
+
+**Purpose**: Validate specification completeness and quality before proceeding to planning
+**Created**: 2026-08-20
+**Feature**: [spec.md](../spec.md)
+
+## Content Quality
+
+- [x] No implementation details (languages, frameworks, APIs)
+- [x] Focused on user value and business needs
+- [x] Written for non-technical stakeholders
+- [x] All mandatory sections completed
+
+## Requirement Completeness
+
+- [x] No [NEEDS CLARIFICATION] markers remain
+- [x] Requirements are testable and unambiguous
+- [x] Success criteria are measurable
+- [x] Success criteria are technology-agnostic (no implementation details)
+- [x] All acceptance scenarios are defined
+- [x] Edge cases are identified
+- [x] Scope is clearly bounded
+- [x] Dependencies and assumptions identified
+
+## Feature Readiness
+
+- [x] All functional requirements have clear acceptance criteria
+- [x] User scenarios cover primary flows
+- [x] Feature meets measurable outcomes defined in Success Criteria
+- [x] No implementation details leak into specification
+
+## Notes
+
+- Items marked incomplete require spec updates before `/speckit-clarify` or `/speckit-plan`
+
+### Validation iteration 1 — 2026-08-20
+
+Three `[NEEDS CLARIFICATION]` markers open; everything else passing.
+
+| # | Requirement | Question |
+|---|-------------|----------|
+| 1 | FR-006 | With a single visible agent, render the rail anyway or hide it? |
+| 2 | FR-008 | Is the admin agents table removed entirely, or kept as a secondary "all agents" view? |
+| 3 | FR-020 | Which agent does the app workspace open on landing? |
+
+### Validation iteration 2 — 2026-08-20
+
+All three answered by the requester and written back into the spec; checklist fully passing.
+
+| # | Requirement | Decision |
+|---|-------------|----------|
+| 1 | FR-006 | Rail always rendered — layout does not change shape as agents come and go. |
+| 2 | FR-008 | Table removed entirely; the workspace is the only agents screen in admin. |
+| 3 | FR-020 | Last opened agent, remembered per browser; falls back to first running, then first in list. |
+
+Knock-on edits: US2 gained an acceptance scenario for the remembered agent, SC-011 covers
+it as an outcome, and Assumptions records that the memory is per-browser rather than
+server-side.
+
+### Validation iteration 3 — 2026-08-20
+
+Requester corrections after reading the draft; checklist still fully passing.
+
+| Area | Correction |
+|------|-----------|
+| FR-010, SC-003 | The conversation is **not** stretched to full width. The chat widget keeps its current min/max width and the pod logs stay beside it — removing the nine-tab column buys room for the rail and the panel, not chat width. The "40% wider conversation" outcome was wrong and is replaced by "chat and logs both fully visible side by side, neither narrower than today". |
+| FR-009 | Split by scope: create + cluster capacity go to the **top action row** (where "Back to agents" sits today); edit, start/stop, restart and delete go to the **settings panel**, as the reference draws them. The earlier draft put create and capacity in the rail header. |
+| FR-019 | Same no-stretch rule applies to app — the conversation keeps its readable width. |
+| Reference | `export-1a/` stays untracked and is dropped after implementation, so this spec is the durable record of it. |
+
+### Validation iteration 4 — 2026-08-20 (during `/speckit-plan`)
+
+| Area | Correction |
+|------|-----------|
+| FR-013 | The settings panel is **open by default**, not collapsed — the agent's controls (edit, start/stop, restart, delete) live inside it, so collapsed-by-default would hide them behind a click. The persist-on-toggle rule is unchanged. US1 scenario 1 updated to match. |
+
+This is what forced the layout tier work in [plan.md](../plan.md) § Layout budget: a
+default-open panel plus an unstretched chat plus the logs plus the rail exceeds 1440px, so the
+panel docks only on wide screens and overlays below.
+
+### Validation iteration 5 — 2026-08-20 (during `/speckit-plan`)
+
+The requester asked where a section's content should render when its row is clicked. The
+answer changed the shape of the panel, so several requirements moved with it.
+
+| Requirement | Was | Now |
+|-------------|-----|-----|
+| FR-012 | Sections reachable from the panel | …and their content renders in the middle canvas, at the width it already has |
+| FR-014 | Sections expand and collapse inside the panel (accordion) | The panel **navigates**: every section stays one click away, the current one is marked, and returning to the conversation is one action with the transcript intact |
+| FR-016 | `?tab=` expands a section in the panel | `?tab=` puts that section in the canvas |
+| FR-018 | Panel must be wide enough for tables and editors | Panel stays **narrow** — it holds names, counts, identity and controls, and no content |
+| SC-004 | 8 sections functionally unchanged | …and **zero** of them need layout changes to fit their new home |
+| SC-004a | — | **New.** Returning from a section to the conversation is one action and the transcript is unchanged |
+
+Why it matters: the accordion reading was mine, taken from "с возможностью быть свернутыми",
+and it would have forced a redesign of Files, Paddock and Environment to fit ~400px. The
+reference's own chevrons and counts read as navigation. Full reasoning and the rejected
+alternatives are in [research.md](../research.md) R2.
+
+Notes worth carrying into planning:
+
+- The spec names concrete screens and routes (`/agents/:id`, `?tab=`) because they are
+  existing, user-visible contracts the feature must not break — not implementation choices.
+- FR-015 (section counts) depends on data each section already reads; the Assumptions
+  section records that a section ships without its count rather than blocking on a new
+  endpoint.
+- FR-008 removing the table means FR-009 (create, capacity, edit, start/stop, restart,
+  delete) is the checklist to verify nothing was lost with it.
diff --git a/specs/006-agent-workspace-tabs/contracts/components.md b/specs/006-agent-workspace-tabs/contracts/components.md
new file mode 100644
index 00000000..851b89e7
--- /dev/null
+++ b/specs/006-agent-workspace-tabs/contracts/components.md
@@ -0,0 +1,214 @@
+# Contract — Components
+
+**Feature**: [../spec.md](../spec.md) | **Date**: 2026-08-20
+
+Props, emits and reuse boundaries for the workspace. Component names follow Nuxt's
+path-based auto-import in each slice: `components/agent/workspace/Rail.vue` →
+`<AgentWorkspaceRail>`.
+
+## Admin — `admin/slices/agent/agent/components/agent/`
+
+### `<AgentWorkspaceProvider>` — `workspace/Provider.vue`
+
+The shell. Owns the layout tier, the panel's open state, and the URL ↔ state wiring.
+
+```ts
+defineProps<{ id: string }>()
+```
+
+Renders: `<AgentWorkspaceTopBar>` · `<AgentWorkspaceRail>` · `<AgentWorkspaceMain :key="id">` ·
+`<AgentSettingsPanel>` (docked `<aside>` at ≥1700px, `<Sheet>` below — R1).
+
+**Invariants**
+- The `:key` sits on `Main`, never on the provider or the rail (R4) — the rail must survive an
+  agent switch.
+- Owns exactly one `useAsyncData('admin-agents')` for the rail; `Main` owns the per-agent
+  fetch.
+- Layout tier comes from `useMediaQuery('(min-width: 1700px)')` (`@vueuse/core`, already a
+  dependency).
+
+### `<AgentWorkspaceRail>` — `workspace/Rail.vue`
+
+```ts
+defineProps<{
+  agents: IAgentData[];
+  activeId: string;
+  pending: boolean;          // → skeleton rows, FR-027
+}>()
+defineEmits<{ select: [id: string] }>()
+```
+
+Owns the FR-023 search field and its "nothing matches" state. Reconciles each agent's status
+against `useAgentStatusStore.statuses` before rendering. Emits `select`; it does **not**
+navigate — routing is the provider's job, which keeps the rail testable and reusable.
+
+### `<AgentWorkspaceRailItem>` — `workspace/RailItem.vue`
+
+```ts
+defineProps<{ entry: RailEntry }>()   // RailEntry — see ../data-model.md
+```
+
+Presentational only. **No action controls** (FR-002) — no restart, no dropdown, no delete.
+
+### `<AgentWorkspaceTopBar>` — `workspace/TopBar.vue`
+
+Occupies the row where `← Back to agents` sits today (FR-009).
+
+```ts
+defineProps<{ capacity: IClusterCapacityData | null }>()
+```
+
+Renders the `New agent` link and the `N slots free` badge plus its cluster-full warning.
+`capacity` is `null` for anyone who cannot fetch it — the endpoint is `@Roles(Owner, Admin)`,
+so the badge simply does not render rather than producing a 403.
+
+### `<AgentWorkspaceMain>` — `workspace/Main.vue`
+
+```ts
+defineProps<{ id: string }>()
+```
+
+Everything per-agent: the pending-restart banner, the compact agent header (avatar, name,
+status pill, `Manage agent` toggle), the usage strip, and `<AgentWorkspaceCanvas>`. Mounted
+under `:key="id"`, so all of it is torn down and rebuilt on an agent switch (FR-026).
+
+**Reuse contract**: `useAgentLifecycle(id, agent, refresh)` is called here, unchanged. It
+already owns the SSE connection, restart/stop/start, the pending-restart banner and the chat
+overlay — none of that logic is rewritten, it only moves.
+
+### `<AgentWorkspaceCanvas>` — `workspace/Canvas.vue`
+
+The middle column, in one of two modes (R2).
+
+```ts
+defineProps<{
+  agent: IAgentData;
+  apiUrl: string;
+  section: AgentSettingsSection | null;   // null ⇒ chat mode
+}>()
+defineEmits<{ 'back-to-chat': [] }>()
+```
+
+**The one invariant that matters**: the chat branch is toggled with `v-show`, **never**
+`v-if`. Unmounting it would drop the websocket, lose the transcript and scroll position, and
+reset the restart overlay — FR-014 and SC-004a exist to forbid exactly that. The section
+branch, by contrast, *is* `v-if` — sections should mount fresh and unmount when left, which is
+the remount-on-activate behaviour `TabsContent` gives them today.
+
+When a section is open the canvas also renders a return control (`‹ Chat`) and the section's
+name, so the operator always knows where they are and how to get back.
+
+### `<AgentSettingsPanel>` — `settings/Panel.vue`
+
+```ts
+defineProps<{
+  agent: IAgentData;
+  apiUrl: string;
+  section: AgentSettingsSection | null;   // expanded section, from ?tab=
+}>()
+defineEmits<{
+  'update:section': [AgentSettingsSection | null];
+  close: [];
+  'agent-updated': [IAgentData];          // forwarded from the Overview section
+}>()
+```
+
+Three parts: identity block (avatar, name, id, status, resources) · the **navigator list** of
+eight sections · the lifecycle footer (`Stop`/`Start`, `Restart`, `Edit`, and `Delete` behind a
+confirm — FR-009, FR-017).
+
+**Invariants**
+- The panel holds **no section content** (FR-018). It emits `update:section`; the canvas
+  renders. This is what keeps it at 320px and keeps the eight section components untouched.
+- It renders identically in its docked and overlay hosts. The host decides placement and
+  width; the panel decides nothing about where it lives.
+- It stays visible while a section is open, with that section marked as current — the operator
+  must be able to reach another section, or the conversation, in one click (FR-014).
+
+### `<AgentSettingsNavItem>` — `settings/NavItem.vue`
+
+```ts
+defineProps<{
+  section: SettingsSection;      // see ../data-model.md
+  count: number | null;          // null ⇒ render no count at all, never "0"
+  current: boolean;              // this section is what the canvas is showing
+}>()
+defineEmits<{ select: [] }>()
+```
+
+A row, not a container: title, one-line description, count, and a chevron. It renders no
+section content — that is the canvas's job.
+
+### Reused verbatim — the eight sections
+
+These components are **not rewritten** and **not restyled** (FR-012, SC-004). They move from
+`TabsContent` into the canvas's section branch with their props unchanged, and the canvas gives
+them roughly the width they have today, which is the whole point of R2:
+
+| Section | Component | Props today |
+|---------|-----------|-------------|
+| Overview | `<AgentOverviewTab>` | `agent`, `apiUrl`, `@agent-updated` |
+| Knowledge | `<AgentKnowledgeTab>` | `agent` |
+| Files | `<AgentFileProvider>` | `id` — the parent's `Card` wrapper and its explanatory copy move into the canvas's section header |
+| Secrets | `<AgentSecretProvider>` | `id` — same wrapper note |
+| Environment | `<AgentEnvTab>` | `agent-id` |
+| Channels | `<AgentChannelProvider>` | `agent-id` |
+| Chats | `<ChatListProvider>` | `agent-id` |
+| Paddock | `<AgentPaddockTab>` | `agent-id` |
+
+**Changed**: `components/agent/item/tabs.ts` drops the `chat` entry and gains `countKey` per
+section. The eight `value` strings stay byte-identical — that is the `?tab=` compatibility
+guarantee.
+
+**Deleted**: `components/agent/list/Provider.vue` (the table). Before deleting, every
+capability in it must be accounted for — see [../plan.md](../plan.md) Risk 2 and quickstart
+step 10.
+
+### `useAgentSectionCounts(agentId)` — `composables/useAgentSectionCounts.ts`
+
+```ts
+function useAgentSectionCounts(agentId: string, enabled: Ref<boolean>): {
+  counts: ComputedRef<SectionCounts>;   // every field number | null
+}
+```
+
+Fires nothing until `enabled` is true (the panel is open). Each of the four fetches resolves
+independently and catches to `null`.
+
+### `useSettingsPanel()` — `composables/useSettingsPanel.ts`
+
+Owns the open/closed preference, the `?tab=` read/write, and the forced-open rule. See
+[preferences.md](./preferences.md) and [routes.md](./routes.md).
+
+## App — `app/slices/agent/components/`
+
+### `<AgentWorkspaceProvider>` — `agentWorkspace/Provider.vue`
+
+```ts
+defineProps<{ id: string }>()
+```
+
+Rail + chat. **No settings panel, no sections** (FR-019). Writes `agent:lastOpened` on every
+successful open. Refreshes the agent list every 30s (R3).
+
+### `<AgentWorkspaceRail>` / `<AgentWorkspaceRailItem>` — `agentWorkspace/`
+
+Same prop shape as the admin pair, hand-rolled Tailwind rather than shadcn (R8). The status
+tone map, the initials derivation and the relative-time bucketing move over from
+`agentList/Card.vue` rather than being rewritten.
+
+**Deleted**: `agentList/Card.vue`, `agentList/Provider.vue`.
+
+**Edited**: `agentChat/Provider.vue` — keeps all its logic (restart, transitional polling,
+overlay stages, status pill) and loses only its `← Back to agents` link and its own outer
+height wrapper, both of which the workspace now owns.
+
+### i18n
+
+Every new app string is an English key in `app/slices/agent/i18n/locales/en.json`, used as
+`$t('...')` in the template, with `ru.json` generated by `bun run i18n:sync` (FR-022,
+`docs/i18n.md`). Copy that depends on state travels as a key, not as text. Expected new
+groups: `rail.*` (search placeholder, no-match line, status column) reusing the existing
+`status.*` and `relative_time.*` keys rather than duplicating them.
+
+`admin` adds no i18n — it is English-only by policy.
diff --git a/specs/006-agent-workspace-tabs/contracts/preferences.md b/specs/006-agent-workspace-tabs/contracts/preferences.md
new file mode 100644
index 00000000..74dee959
--- /dev/null
+++ b/specs/006-agent-workspace-tabs/contracts/preferences.md
@@ -0,0 +1,77 @@
+# Contract — Client-side preferences
+
+**Feature**: [../spec.md](../spec.md) | **Date**: 2026-08-20
+
+Two `localStorage` keys. Both are conveniences: a browser with storage unavailable or cleared
+gets the documented default and the workspace works normally. Neither is synced to the server,
+neither travels in a URL.
+
+The repo already uses this pattern in `admin/slices/agent/agent/stores/agent.ts`
+(`agent:pendingRestart`, `agent:restartInFlight`), including the try/catch-and-ignore around
+every read and write. Follow it.
+
+## `agent:settingsPanelOpen` — admin
+
+| | |
+|---|---|
+| **Store** | `localStorage` |
+| **Value** | `'1'` (open) or `'0'` (collapsed) |
+| **Absent** | **Treated as open** — this is the FR-013 default |
+| **Written** | Only on an explicit operator toggle |
+| **Scope** | Global to the console, not per agent |
+
+**Why absence means open rather than writing `'1'` on first visit**: a fresh browser and a
+browser whose storage was cleared then behave identically to a first-ever visit, and the
+default can be changed later by editing one line instead of migrating stored values.
+
+**Interaction with `?tab=`** — the one rule worth stating explicitly:
+
+```
+?tab=<valid section> present  →  panel is open, regardless of the stored value
+                              →  the stored value is NOT written
+```
+
+Following someone else's deep link must not silently change the preference of an operator who
+keeps the panel collapsed. The forced-open state lasts until they navigate away or close the
+panel themselves — and closing it *is* an explicit toggle, so that one does write.
+
+**Reads/writes must be guarded**: `localStorage` throws in private-mode Safari and when quota
+is exceeded. Swallow and fall back to the default, exactly as the existing agent store does.
+
+## `agent:lastOpened` — app
+
+| | |
+|---|---|
+| **Store** | `localStorage` |
+| **Value** | An agent `id` string |
+| **Absent** | Fall through to first `running`, then first in list |
+| **Written** | On every successful workspace open, including rail switches |
+| **Scope** | Per browser, per user session on that browser |
+
+**Validation on read is mandatory.** The stored id is used **only** if it appears in the agent
+list the user can currently see:
+
+```ts
+const remembered = read('agent:lastOpened');
+const landing =
+  agents.find(a => a.id === remembered)
+  ?? agents.find(a => a.status === 'running')
+  ?? agents[0]
+  ?? null;
+```
+
+Without that check a deleted agent, a revoked visibility, or a different user on a shared
+browser produces a landing on a dead id. With it, those are all non-events.
+
+**Not written for**: a failed open (agent not found / unavailable). Remembering an id that
+does not resolve would strand the user on the same broken landing on every visit.
+
+## What is deliberately *not* persisted
+
+| State | Why not |
+|-------|---------|
+| The expanded settings section | It is addressable — it lives in `?tab=`, so it can be shared. See [routes.md](./routes.md). |
+| The rail's search term | Transient. A filter surviving a reload leaves someone staring at a rail that is missing agents with no memory of why. |
+| Rail scroll position | Cheap to lose, confusing to restore against a list that may have changed. |
+| The logs panel's open state | Existing behaviour, out of scope — this feature does not add persistence the logs panel does not already have. |
+| The admin sidebar's collapsed state | Already handled by shadcn's `sidebar_state` cookie. Untouched. |
diff --git a/specs/006-agent-workspace-tabs/contracts/routes.md b/specs/006-agent-workspace-tabs/contracts/routes.md
new file mode 100644
index 00000000..5dab5c09
--- /dev/null
+++ b/specs/006-agent-workspace-tabs/contracts/routes.md
@@ -0,0 +1,101 @@
+# Contract — Routes & URL state
+
+**Feature**: [../spec.md](../spec.md) | **Date**: 2026-08-20
+
+The user-visible contract of this feature is its URLs. These are what deep links, bookmarks,
+shared links and the browser's Back button depend on, so they are specified before the
+components that render them.
+
+## Admin console
+
+| Route | Before | After |
+|-------|--------|-------|
+| `/agents` | Agents table | **Resolver** — picks the landing agent and `replace`-navigates to `/agents/:id`. Renders only when there are no agents at all. |
+| `/agents/:id` | Chat + 9 vertical tabs | **Workspace** — rail, chat + logs, settings panel |
+| `/agents/:id?tab=<section>` | Selected that tab | Workspace with `<section>` showing in the middle canvas and the panel marking it current |
+| `/agents/create` | Create form | Unchanged |
+| `/agents/:id/edit` | Edit form | Unchanged — reached from the settings panel's Edit action |
+| `/agents/:id/paddock` | Paddock page | Unchanged — the Paddock section links out to it |
+| `/agents/all` | — | **Does not exist.** FR-008 removes the table entirely; this route is named here only to state that it is not the fallback. |
+
+### Landing resolution (`/agents`, admin)
+
+```
+1. agents.find(a => a.isAdmin)          → the Ranch admin ("rancher") agent
+2. else max by updatedAt                → most recently updated
+3. else                                 → render empty state in place (no redirect)
+```
+
+Navigation uses `replace: true` so `/agents` never enters the history stack — Back from an
+agent returns to wherever the operator came from, not to the resolver.
+
+### Primary navigation
+
+The sidebar's `Agents` entry keeps `link: 'agents'` and its `Bot` icon (FR-011). No sidebar
+entry is added, removed, renamed or reordered by this feature. The `Rancher` entry continues
+to point at the `/rancher` setup-status page, which is a different screen from the Ranch admin
+*agent* and is not touched.
+
+## App console
+
+| Route | Before | After |
+|-------|--------|-------|
+| `/agents` | Card grid | **Resolver** — picks the landing agent and `replace`-navigates. Renders only when the user can see no agents. |
+| `/agents/:id` | Chat, full-bleed | **Workspace** — rail + chat (no settings panel, FR-019) |
+| `/agents/create` | Create form | Unchanged |
+
+### Landing resolution (`/agents`, app)
+
+```
+1. localStorage['agent:lastOpened'], if that id is in the visible list
+2. else agents.find(a => a.status === 'running')
+3. else agents[0]
+4. else                                  → render empty state in place (no redirect)
+```
+
+### Layout note
+
+`app/slices/common/components/layout/Provider.vue` already treats `/agents/:id` as a *flush*
+route — no container padding, no footer — via `/^\/agents\/[^/]+$/` with `/agents/create`
+excluded. The workspace inherits that treatment unchanged. `/agents` itself redirects
+immediately, so it needs no flush handling; when it renders the empty state instead, the
+normal contained layout is correct.
+
+## Query-parameter contract (`?tab=`)
+
+`tab` is **the existing parameter, with the existing values** — that is the whole point
+(FR-016). It is read on mount and written on section change.
+
+| Value | Behaviour |
+|-------|-----------|
+| `overview`, `knowledge`, `files`, `secrets`, `env`, `channels`, `chats`, `paddock` | The canvas shows that section; the panel opens and marks it current |
+| `chat` | **Legacy.** Was a tab, is now the canvas's default mode. Normalises to "no section": the canvas shows the conversation, the panel is in its stored state, and the parameter is stripped from the URL. |
+| any unrecognised value | Same as `chat` — normalised away rather than erroring |
+| absent | Canvas shows the conversation; panel renders in its stored open/closed state |
+
+**Writes**:
+- Opening a section → `router.replace({ query: { ...query, tab: value } })`
+- Returning to the conversation → `router.replace` with `tab: undefined`
+- Closing the panel while a section is open **also** returns to the conversation and clears
+  `tab`. FR-018 requires the navigator to stay visible whenever a section is on the canvas, so
+  "collapse the panel but keep the section" is not a reachable state — it would strand the
+  operator inside a section with no way back except the browser. *(This corrects an earlier
+  draft of this contract, which said the opposite and contradicted FR-018.)*
+- `replace`, never `push` — panel fiddling must not fill the history stack. Switching *agents*
+  is a `push`, because that is real navigation the user expects Back to undo (FR-004).
+
+**Invariants**
+- `?tab=<valid section>` forces the panel open regardless of the stored preference, and does
+  **not** write that preference (see [preferences.md](./preferences.md)).
+- **Switching agents preserves `tab`.** An operator comparing Environment across two agents
+  stays in Environment when they click the next agent in the rail, rather than being dropped
+  back into its conversation.
+
+## Redirect edge cases
+
+| Situation | Behaviour |
+|-----------|-----------|
+| `/agents/:id` where the id does not exist or is not visible to the user | The existing "agent not found / unavailable" state renders in the middle column. The rail stays usable so the user can navigate out. No auto-redirect — silently bouncing someone off a link they were sent hides the fact that it was dead. |
+| The open agent is deleted while the workspace is open | Move to the next entry in the rail (`push`), and surface what happened. Empty rail ⇒ the empty state. |
+| `/agents` with an empty list | Renders in place: create CTA for Owner/Admin, the existing "ask an admin" line otherwise. No redirect loop. |
+| `/agents` while the list is still loading | Rail skeleton placeholders (FR-027); resolve and redirect once the list arrives. |
diff --git a/specs/006-agent-workspace-tabs/data-model.md b/specs/006-agent-workspace-tabs/data-model.md
new file mode 100644
index 00000000..47b55d6c
--- /dev/null
+++ b/specs/006-agent-workspace-tabs/data-model.md
@@ -0,0 +1,186 @@
+# Phase 1 — Data Model: Agent workspace
+
+**Feature**: [spec.md](./spec.md) | **Plan**: [plan.md](./plan.md) | **Date**: 2026-08-20
+
+**No server-side entity changes.** This feature adds no table, column, DTO or endpoint. The
+API's `IAgentData` already carries everything the rail and the panel display, and the
+`@Public()` SSE stream already carries live pod state. What follows is the *view* model — the
+shapes the new components pass between themselves — plus the two client-side preferences the
+feature introduces.
+
+## Existing entities consumed (unchanged)
+
+### `IAgentData` — `admin/slices/agent/agent/domain/agent.types.ts:58`
+
+Fields this feature reads. Everything else on the record is untouched.
+
+| Field | Type | Used for |
+|-------|------|----------|
+| `id` | `string` | Rail identity, route param, panel identity |
+| `name` | `string` | Rail label, initials, panel header |
+| `status` | `AgentStatusTypes` | Rail status dot + label; `'running' \| 'pending' \| 'deploying' \| 'failed' \| 'stopped'` |
+| `createdAt` | `string` (ISO) | Rail timestamp in **admin** (FR-002) |
+| `updatedAt` | `string` (ISO) | Rail timestamp in **app**; admin landing fallback ordering |
+| `isAdmin` | `boolean` | Rail admin marker; **admin landing agent selection** (FR-007) |
+| `templateId` | `string` | App rail secondary line (as on today's card) |
+| `knowledgeIds` | `string[]` | Feeds the Knowledge count via `useAgentKnowledges` |
+| `resources` | `IAgentResources` | Panel identity block (was a table column) |
+| `statusReason` | `string \| null` | Panel identity block when `status === 'failed'` |
+
+### `IAgentPodStatus` — via `useAgentStatusStore.statuses[agentId]` (admin only)
+
+Live pod phase from the SSE stream. The rail prefers it over `agent.status` when present, the
+same precedence `rancher/Provider.vue` already uses:
+
+```ts
+const pod = agentStatusStore.statuses[agent.id];
+const live = pod ? (pod.phase === 'Running' && pod.ready) : agent.status === 'running';
+```
+
+### `IClusterCapacityData`
+
+`freeAgentSlots` and `totalAgentSlots`, already fetched by both consoles. Moves from the
+deleted table header / cards header into the workspace top bar (FR-009). Owner/Admin only —
+the endpoint is `@Roles(Owner, Admin)`, so non-privileged app users must not trigger it.
+
+---
+
+## View models introduced
+
+These are TypeScript types local to the `agent` slice — no persistence, no serialisation.
+
+### `RailEntry`
+
+One row in the vertical agent list. Derived, never stored.
+
+| Field | Type | Notes |
+|-------|------|-------|
+| `id` | `string` | |
+| `name` | `string` | Truncated with `title` on hover for long names (edge case) |
+| `initials` | `string` | 1–2 uppercase chars; falls back to the id's first chars when the name is empty — same derivation as today's `Card.vue` |
+| `status` | `AgentStatusTypes` | Reconciled: live pod state where available, DB row otherwise |
+| `statusTone` | `{ dot: string; text: string; pulse: boolean }` | Presentation only; `pulse` true for `running`/`deploying`/`pending` |
+| `timestamp` | `string` (ISO) | `createdAt` in admin, `updatedAt` in app |
+| `isAdmin` | `boolean` | Renders the Ranch-admin marker |
+| `isActive` | `boolean` | Exactly one entry true (FR-003) |
+
+**Derivation rule**: `RailEntry[]` is a `computed` over the agent list, in the list's existing
+order, filtered by the search term (FR-023, case-insensitive substring on `name`). It carries
+**no action handlers** — FR-002 forbids per-row controls.
+
+### `SettingsSection` (admin only)
+
+Replaces `AGENT_TABS` in `components/agent/item/tabs.ts`. The `chat` entry is **removed** —
+the chat is the canvas, not a section — leaving the eight sections of FR-012.
+
+| Field | Type | Notes |
+|-------|------|-------|
+| `value` | `AgentSettingsSection` | `'overview' \| 'knowledge' \| 'files' \| 'secrets' \| 'env' \| 'channels' \| 'chats' \| 'paddock'` — **unchanged string values**, which is what keeps old `?tab=` links working (FR-016) |
+| `title` | `string` | English only; `admin` is not localised |
+| `desc` | `string` | One line, as today |
+| `countKey` | `keyof SectionCounts \| null` | `null` for sections with nothing to count (Overview, Environment, Chats, Paddock) |
+
+Order is the display order and matches the current tab order minus `chat`.
+
+A `SettingsSection` is **navigation metadata only** — a label, a description and a count. It
+carries no component reference and no content; the canvas maps a section value to the component
+that renders it (see [contracts/components.md](./contracts/components.md)).
+
+### `SectionCounts` (admin only)
+
+Produced by `useAgentSectionCounts(agentId)`. Every field is independently resolved and
+independently failable.
+
+| Field | Type | Source | `null` when |
+|-------|------|--------|-------------|
+| `knowledge` | `number \| null` | `useAgentKnowledges().resolved.length` | in flight, or template/knowledge fetch failed |
+| `files` | `number \| null` | `useAgentFileStore().list(id).length` | in flight, or S3 unreachable |
+| `secrets` | `number \| null` | `agentSecret` store list length | in flight, or the secret provider errored |
+| `channels` | `number \| null` | `useAgentChannelStore().fetchForAgent(id).length` | in flight, or fetch failed |
+
+**Invariants**:
+- Never fetched until the panel is open (R5).
+- `null` renders as *nothing* — never `0`, never a spinner, never an error badge. `0` is a
+  real, distinct value meaning "none attached".
+- Keyed by `agentId`; switching agents discards the previous agent's counts.
+
+### `WorkspaceSelection`
+
+The workspace's addressable state — reflected in the URL, not in a store.
+
+| Field | Source of truth | Notes |
+|-------|-----------------|-------|
+| `agentId` | route param `/agents/:id` | Changing it is a router navigation, which is what gives Back/Forward for free (FR-004) |
+| `section` | query param `?tab=<value>` | **Drives the canvas mode**: `undefined` ⇒ the canvas shows the conversation; a section value ⇒ the canvas shows that section. Legacy `chat` and unknown values normalise to `undefined` and are stripped from the URL. Preserved across agent switches. |
+| `panelOpen` | `localStorage`, overridden to `true` while `section` is set | Visibility of the *navigator*, independent of what the canvas shows. See preferences below. |
+
+---
+
+## Client-side preferences
+
+Two keys, both `localStorage`, both non-critical — a browser with storage disabled gets the
+defaults and everything still works. Full shapes in
+[contracts/preferences.md](./contracts/preferences.md).
+
+### `agent:settingsPanelOpen` (admin)
+
+- **Value**: `'1' | '0'`
+- **Absent ⇒ open.** This is the FR-013 default, and it is deliberately encoded as
+  *absence means open* rather than writing `'1'` on first visit — a fresh browser and a
+  browser that has never touched the toggle behave identically.
+- Written only when the operator explicitly collapses or reopens the panel.
+- Not per-agent: it is a habit, not a property of an agent.
+
+### `agent:lastOpened` (app)
+
+- **Value**: agent `id` string
+- Written on every successful workspace open (FR-020).
+- **Validated on read**: if the id is not in the user's visible agent list it is discarded and
+  the fallback chain runs (first `running` → first in list). This is what makes a deleted or
+  newly-hidden agent a non-event rather than a dead landing.
+- Per browser, not synced — a second device falls back to first-running (spec Assumptions).
+
+---
+
+## State transitions
+
+Two independent pieces of state, deliberately not folded into one. The **canvas mode** says
+what the middle column shows; the **panel state** says whether the navigator is visible. An
+operator can close the navigator while a section is open, and the section stays open.
+
+### Canvas mode
+
+```
+   ┌───────────────┐   click a section in the panel   ┌──────────────────┐
+   │ CONVERSATION  │ ───────────────────────────────► │  SECTION <value> │
+   │  (default)    │ ◄─────────────────────────────── │                  │
+   └───────────────┘   "‹ Chat" / clear ?tab=         └──────────────────┘
+          ▲                                                    │
+          │  the chat is never unmounted — it is hidden with    │
+          └────  v-show and comes back with its transcript  ────┘
+```
+
+Switching agents keeps the mode: if the canvas was showing Environment, it shows Environment
+for the newly selected agent.
+
+### Panel (navigator) visibility
+
+```
+              first visit (no stored key)
+                        │
+                        ▼
+                  ┌───────────┐   operator collapses    ┌────────────┐
+                  │   OPEN    │ ──────────────────────► │  COLLAPSED │
+                  │ (default) │ ◄────────────────────── │            │
+                  └───────────┘   operator reopens      └────────────┘
+                        ▲                                      │
+                        │        ?tab=<section> in URL         │
+                        └──────────────────────────────────────┘
+                          (forces open, does not write the pref)
+```
+
+The forced-open transition on a deep link deliberately **does not** persist: following someone
+else's `?tab=env` link should not permanently change an operator who prefers the panel closed.
+
+Agent runtime state (`running`/`deploying`/`failed`/…) is **not** owned here — it stays with
+`useAgentLifecycle` and the SSE store, and the rail is a read-only consumer of it.
diff --git a/specs/006-agent-workspace-tabs/plan.md b/specs/006-agent-workspace-tabs/plan.md
new file mode 100644
index 00000000..3d90d380
--- /dev/null
+++ b/specs/006-agent-workspace-tabs/plan.md
@@ -0,0 +1,232 @@
+# Implementation Plan: Agent workspace — vertical agent tabs + settings panel
+
+**Branch**: `feat/CLEAN-36-agent-workspace-tabs` | **Date**: 2026-08-20 | **Spec**: [spec.md](./spec.md)
+
+**Input**: Feature specification from `/specs/006-agent-workspace-tabs/spec.md`
+
+**Tracker**: [CLEAN-36](https://dreamvention.atlassian.net/browse/CLEAN-36)
+
+## Summary
+
+Replace both consoles' agent index screens with a three-part workspace: a vertical rail of
+agents on the left, a middle **canvas** that shows either the existing chat-and-logs pair at
+its current width or one open settings section, and (admin only) a narrow right-hand panel
+that **navigates** those sections and holds the agent's controls, open by default. The admin
+agents table is deleted; `/agents` resolves to the Ranch admin agent and redirects to its
+canonical `/agents/:id` address.
+
+The panel navigates rather than contains (R2): section content renders in the canvas at the
+width it already renders at today, so **none of the eight existing section components changes
+shape**. The conversation stays mounted behind an open section and returns in one click.
+
+No API or data-model change: every piece of data the workspace needs is already exposed —
+including the **public** `GET /agents/status/stream` SSE feed that admin already consumes for
+live pod state. The work is entirely in the two Nuxt consoles' `agent` slices, and it needs
+no new UI primitive — the navigator model means no accordion, so the vendored shadcn set stays
+as it is.
+
+The one genuinely hard part is horizontal space, not logic. The requester's decision to keep
+the chat at `min-w-100 max-w-200` with the logs panel beside it means the workspace already
+consumes ~1300px before the rail and the panel exist. The plan resolves this with a
+three-tier layout (§ Layout budget below and [research.md](./research.md) R1) rather than by
+shrinking the chat.
+
+## Technical Context
+
+**Language/Version**: TypeScript 5, Vue 3.5, Nuxt 4 (`compatibilityVersion: 4`, `ssr: false` — both consoles are SPAs)
+
+**Primary Dependencies**:
+- `admin`: shadcn-vue 2.8 / reka-ui 2.10 (vendored under `slices/setup/theme/components/ui`), Tailwind 4, Pinia 3, `@vueuse/core` 14, `@tabler/icons-vue`, `lucide-vue-next`
+- `app`: Tailwind 4, Pinia 3, `@nuxtjs/i18n` 10 (en + ru), `lucide-vue-next` via the local `Icon.vue` wrapper. Only `badge` is vendored from shadcn here — app UI is hand-rolled Tailwind and must stay that way.
+
+**Storage**: No server-side storage change. Two client-side preferences are added: the settings panel's open/closed state and the app's last-opened agent (see [data-model.md](./data-model.md) § Client-side preferences).
+
+**Testing**: **There is no automated test infrastructure in either console** — `admin`/`app` `package.json` both declare `"test": "echo '... no tests yet'"` and `"lint": "echo '... not configured'"`. The honest gates for this feature are `bun run typecheck` (turbo, filters `app` + `admin`), `bun run i18n:check`, and the manual walkthrough in [quickstart.md](./quickstart.md). This plan does not pretend otherwise and does not introduce a test framework as a side quest.
+
+**Target Platform**: Modern evergreen browsers; desktop-first for `admin`, desktop + mobile for `app`.
+
+**Project Type**: Web frontend — two Nuxt consoles in a Bun workspace monorepo alongside a NestJS `api` that this feature does not touch.
+
+**Performance Goals**: Switching agents in the rail repaints in one frame budget and issues no more than the requests the agent page already makes. The rail itself costs one list request that both consoles already perform. Settings-section counts are lazy and never block the panel's first paint.
+
+**Constraints**:
+- Horizontal budget is the binding constraint — chat `min-w-100` (400px) + logs `min-w-100` (400px) + admin sidebar (256px) leaves ~384px of slack on a 1440px screen, which the rail alone consumes.
+- `admin` stays English-only; every new `app` string goes through `en.json` → `bun run i18n:sync` → `ru.json` (`docs/i18n.md`).
+- Slice architecture: each console is a set of Nuxt layers auto-registered by `registerSlices.ts`; components auto-import by path (`components/agent/workspace/Rail.vue` → `<AgentWorkspaceRail>`).
+
+**Scale/Scope**: 2 consoles, 3 routes reworked, ~10 new components, 1 deleted table component, no new UI primitives. Rail must stay usable at dozens–hundreds of agents.
+
+## Constitution Check
+
+*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*
+
+`.specify/memory/constitution.md` is **an unedited template** — every principle is still a
+`[PRINCIPLE_N_NAME]` placeholder. There are no ratified constitutional gates to check against,
+and inventing them here would be fabricating governance the project never agreed to.
+
+What this repo *does* enforce, and what this plan is therefore checked against:
+
+| Governing rule | Source | Status |
+|----------------|--------|--------|
+| Jira-first delivery cycle: issue → In Progress → branch → comments → PR | `CLAUDE.md`, `.cursor/rules/project.mdc` | ✅ CLEAN-36 in progress, branch `feat/CLEAN-36-agent-workspace-tabs`, start comment posted |
+| Slice architecture — code lives in the owning slice, layers register themselves | `registerSlices.ts`, per-slice `nuxt.config.ts` | ✅ all work lands in `admin/slices/agent/*` and `app/slices/agent` |
+| DDD layering inside a slice (`data` → `domain` → `stores` → `components`) | existing slices | ✅ no new gateways/services needed; components + composables only |
+| `app` is bilingual, `admin` is English-only | `docs/i18n.md`, `CLAUDE.md` | ✅ FR-022; `i18n:check` is a gate |
+| OpenAPI types are generated, never hand-written | `CLAUDE.md` | ✅ no API surface change, no new DTOs |
+| No commit/PR without a `CLEAN-` id | `CLAUDE.md` | ✅ |
+
+**Gate result**: PASS — no violations, so [§ Complexity Tracking](#complexity-tracking) stays empty.
+
+**Post-Phase-1 re-check**: PASS. The navigator model removed the one thing that would have
+touched shared ground — the earlier draft vendored a new shadcn `accordion` primitive; it is
+no longer needed. The design now adds nothing outside the two `agent` slices.
+
+## Layout budget
+
+The numbers that drive every layout decision below (Tailwind 4: `min-w-100` = 25rem = 400px,
+`max-w-200` = 50rem = 800px):
+
+| Column | Width |
+|--------|-------|
+| Admin primary sidebar | 256px (16rem), user-collapsible to 48px |
+| Agent rail | 272px (17rem) |
+| Canvas — chat mode | chat + logs, each capped at 800px; the 400px floor applies only at ≥1400px |
+| Canvas — section mode | one section, flexible |
+| Settings panel (navigator) | 320px (20rem) |
+| **Everything docked with both floors applied** | **≈1690px** |
+
+**Revised during implementation.** The first version floated the panel below 1700px so the
+chat never went under its 400px floor. In the browser that turned out to cover the pod logs,
+and where the container was narrower still, the hard floors on both halves overflowed the row
+and `overflow-x-clip` cut the chat card's right border off. The rule now:
+
+- **≥1400px** — everything docked, chat and logs at the sizes they have on `main`.
+- **1024–1399px** — everything still docked and fully visible; chat and logs shrink together,
+  and the logs' existing collapse button hands the column back to the chat in one click.
+- **<1024px** — rail and panel are both on-demand full-screen overlays; the canvas is the page.
+
+Full reasoning and the rejected alternatives: [research.md](./research.md) R1.
+
+One component (`AgentSettingsPanel`) renders in both hosts, and the docked/overlay split is
+pure CSS — no media-query JavaScript, so crossing a breakpoint never remounts it. The panel
+shrank from 384px to 320px when it stopped hosting content — it now holds only names, counts, an
+identity block and a control row, which is close to the reference's own 312px.
+
+## Project Structure
+
+### Documentation (this feature)
+
+```text
+specs/006-agent-workspace-tabs/
+├── plan.md              # This file
+├── spec.md              # Feature specification
+├── research.md          # Phase 0 — decisions R1..R8
+├── data-model.md        # Phase 1 — view models & client preferences
+├── quickstart.md        # Phase 1 — manual validation walkthrough (no test runner exists)
+├── contracts/
+│   ├── routes.md        # URL + query-parameter contract
+│   ├── components.md    # Component props/emits contract
+│   └── preferences.md   # Client-side persisted keys
+├── checklists/
+│   └── requirements.md  # Spec quality checklist
+└── tasks.md             # Phase 2 — created by /speckit-tasks, NOT by this command
+```
+
+### Source Code (repository root)
+
+```text
+admin/slices/agent/agent/
+├── components/agent/
+│   ├── workspace/
+│   │   ├── Provider.vue        # NEW — three-column shell, tier switching, panel state
+│   │   ├── Rail.vue            # NEW — vertical agent list, search, live status
+│   │   ├── RailItem.vue        # NEW — one agent row (avatar, name, status, created)
+│   │   ├── TopBar.vue          # NEW — "New agent" + cluster capacity (replaces "Back to agents")
+│   │   ├── Main.vue            # NEW — compact agent header + usage strip + canvas, :key="id"
+│   │   └── Canvas.vue          # NEW — two modes: chat+logs (kept mounted) or one open section
+│   ├── settings/
+│   │   ├── Panel.vue           # NEW — navigator: identity, section list with counts, lifecycle row
+│   │   └── NavItem.vue         # NEW — one section row (title, desc, count, current marker)
+│   ├── item/
+│   │   ├── Provider.vue        # REWRITTEN — becomes a thin host for workspace/Provider
+│   │   └── tabs.ts             # REWRITTEN — AGENT_TABS drops `chat`, gains section metadata
+│   ├── list/Provider.vue       # DELETED — the agents table
+│   ├── chat/Tab.vue            # EDITED — hosted by Canvas.vue, kept mounted; chat sizing untouched
+│   └── overview|knowledge|env|paddock/…   # UNCHANGED — reused verbatim inside sections
+├── composables/
+│   ├── useAgentLifecycle.ts    # UNCHANGED — already owns SSE + restart/stop/start
+│   ├── useAgentSectionCounts.ts # NEW — lazy per-section counts, each failing soft to null
+│   └── useSettingsPanel.ts     # NEW — open state + persistence + ?tab= deep link
+└── pages/agents/
+    ├── index.vue               # REWRITTEN — resolver: pick landing agent, replace-navigate
+    ├── create.vue              # UNCHANGED
+    └── [id]/index.vue          # EDITED — drops the per-agent page key (moves inward)
+
+app/slices/agent/
+├── components/
+│   ├── agentWorkspace/
+│   │   ├── Provider.vue        # NEW — rail + chat shell
+│   │   ├── Rail.vue            # NEW — hand-rolled Tailwind, no shadcn
+│   │   └── RailItem.vue        # NEW — reuses Card.vue's status/relative-time logic
+│   ├── agentChat/Provider.vue  # EDITED — hosted inside the workspace, header trimmed
+│   └── agentList/{Card,Provider}.vue  # DELETED — the card grid
+├── composables/useLastAgent.ts # NEW — last-opened agent memory
+├── i18n/locales/en.json        # EDITED — new keys (ru.json generated by i18n:sync)
+└── pages/agents/
+    ├── index.vue               # REWRITTEN — resolver: last-opened → first running → first
+    └── [id].vue                # EDITED — renders the workspace
+```
+
+**Structure Decision**: Slice architecture, unchanged. Every new file lands inside the
+`agent` slice of the console that owns it — `admin/slices/agent/agent` and `app/slices/agent`
+— so both consoles keep registering themselves through `registerSlices.ts` with no config
+edits. Component names come from the path (`components/agent/workspace/Rail.vue` →
+`<AgentWorkspaceRail>`), which is why the directories above are nested the way they are.
+Nothing lands outside a feature slice: the navigator model needs no new UI primitive, so the
+vendored shadcn set under `slices/setup/theme` is untouched.
+
+## Phase 0 — Research
+
+Complete. Eight decisions recorded in [research.md](./research.md):
+
+| # | Question | Decision |
+|---|----------|----------|
+| R1 | How do five columns fit in 1440px? | Three tiers; panel docks only ≥1700px, overlays below |
+| R2 | Where does a section render when clicked? | Panel navigates; the section takes the middle canvas at its current width |
+| R3 | How does the rail get live status? | admin: existing SSE store; app: 30s list refresh, SSE deferred |
+| R4 | How is per-agent state reset on switch? | `:key` moves from the page down to `Main.vue` so the rail survives |
+| R5 | Where do section counts come from? | Four existing stores, lazily, each failing soft to `null` |
+| R6 | How does `/agents` pick the landing agent? | Resolver page + `replace` navigation to the canonical `/agents/:id` |
+| R7 | How is panel state persisted, and how does `?tab=` still work? | `localStorage` for open/closed, query param drives the expanded section |
+| R8 | Does `app` need shadcn primitives for the rail? | No — hand-rolled Tailwind, matching the console it lives in |
+
+## Phase 1 — Design & Contracts
+
+Complete. Artifacts:
+
+- **[data-model.md](./data-model.md)** — the four view models the workspace needs
+  (`RailEntry`, `SettingsSection`, `WorkspaceSelection`, `SectionCounts`) plus the two
+  persisted client preferences. No server entities change.
+- **[contracts/routes.md](./contracts/routes.md)** — what each route resolves to, the
+  `?tab=` deep-link contract including the legacy `chat` value, and the redirect rules.
+- **[contracts/components.md](./contracts/components.md)** — props/emits for every new
+  component, and the exact reuse contract for the eight existing section components.
+- **[contracts/preferences.md](./contracts/preferences.md)** — the two `localStorage` keys,
+  their shapes, and their invalidation rules.
+- **[quickstart.md](./quickstart.md)** — the manual walkthrough that stands in for the
+  automated suite this repo does not have, mapped to FR/SC ids.
+
+## Risks
+
+| # | Risk | Mitigation |
+|---|------|-----------|
+| 1 | ~~**Panel width vs heavy sections.**~~ **Dissolved by R2.** Sections render in the canvas at the width they already have, so Files, Environment and Paddock need no layout work at all. | Retained here as a record: this was the plan's top risk while the panel was a container, and it is the main reason the navigator model won. |
+| 1a | **Chat state lost when a section opens.** If the chat is unmounted rather than hidden, returning costs a websocket reconnect and a transcript refetch — and the restart overlay state goes with it. | `v-show`, never `v-if`, on the chat branch of `Canvas.vue`. SC-004a is the check; quickstart step 6 verifies the transcript and scroll position survive a round trip. |
+| 2 | **Deleting the table loses a capability nobody noticed.** FR-009 lists six; a seventh may be hiding in `list/Provider.vue`. | Before deleting, diff the file against the new homes and tick off every action, badge and warning. Quickstart step 10 is that checklist. |
+| 3 | **Rail remount on every agent switch** would refetch the list and flash the column. | R4 — the `:key` lives on `Main.vue`, not the page. Verified by watching the network panel while switching (quickstart step 4). |
+| 4 | **`app` gets no live status** without the SSE port, so a stopped agent can read "Running" for up to 30s in the rail. | Accepted for v1 and stated in R3; the open agent still polls at 3s while transitional. The SSE endpoint is public, so the port is a clean follow-up. |
+| 5 | **i18n drift** — a string added to a template but never to `en.json` renders as a raw key. | `bun run i18n:check` is a release gate (`docs/i18n.md`); quickstart step 16 runs it. |
+
+## Complexity Tracking
+
+No constitution violations to justify — this section is intentionally empty.
diff --git a/specs/006-agent-workspace-tabs/quickstart.md b/specs/006-agent-workspace-tabs/quickstart.md
new file mode 100644
index 00000000..a02cba46
--- /dev/null
+++ b/specs/006-agent-workspace-tabs/quickstart.md
@@ -0,0 +1,231 @@
+# Quickstart — Validating the agent workspace
+
+**Feature**: [spec.md](./spec.md) | **Plan**: [plan.md](./plan.md) | **Date**: 2026-08-20
+
+**Read this first**: neither console has a test runner. `admin/package.json` and
+`app/package.json` both declare `"test": "echo '… no tests yet'"` and a stub `lint`. So this
+walkthrough *is* the test suite for this feature — it is not a nice-to-have supplement to one.
+Every step names the requirement it covers so a reviewer can see what is and is not verified.
+
+## Prerequisites
+
+```bash
+ranch dev                 # api + app + admin + local k3d   (or: make dev)
+```
+
+| URL | Console |
+|-----|---------|
+| `http://localhost:3001` | app (customer console) |
+| `http://localhost:3002` | admin |
+| `http://localhost:3000/api` | Swagger, if you need to check a payload |
+
+Seed data needed: **at least three agents**, one of them flagged `isAdmin` (the Ranch admin
+agent), one `stopped` or `failed`, and one with knowledge bases, files, secrets and channels
+attached so the counts have something to show.
+
+## Automated gates — run these first
+
+```bash
+bun run typecheck      # turbo, filters app + admin; must be clean
+bun run i18n:check     # no missing or stale keys in app locales
+```
+
+Both must pass before the manual walkthrough is worth doing. `typecheck` runs `openapi-ts`
+first, so a stale generated client surfaces here rather than as a mystery type error.
+
+---
+
+## Admin walkthrough
+
+### 1. Landing goes straight to the Ranch admin agent — FR-007, SC-001
+
+Open `http://localhost:3002/agents`.
+
+- The address settles on `/agents/<ranch-admin-id>` — the resolver redirected.
+- You are in a conversation. **No table appeared, not even for a frame.**
+- Press Back: you leave the agents area entirely; you do **not** bounce through `/agents`
+  (that is `replace: true` doing its job).
+
+### 2. The panel is open, and the agent's controls are in it — FR-013, FR-017
+
+- The settings panel is **already open** on this first visit.
+- `Stop`/`Start`, `Restart`, `Edit` and `Delete` are all in it. Confirm each does what it did
+  from the old page header / table row.
+- Collapse it, reload the page: still collapsed. Reopen, reload: open. (FR-013 persistence,
+  US3 scenario 3.)
+
+### 3. The rail carries status and date, and nothing else — FR-002
+
+Each row shows: initials avatar, name, live status, creation date, and the Ranch-admin marker
+on the admin agent. There is **no** restart button, no `⋯` menu, no delete on a row.
+
+Stop an agent from its panel and watch its rail row: the status changes without a reload
+(FR-005 — this is the SSE stream, not a poll).
+
+### 4. Switching agents is one click and does not remount the rail — FR-003, FR-026, SC-002
+
+Open DevTools → Network, then click a different agent in the rail.
+
+- Chat, header, usage strip and panel all switch. Address bar follows (FR-004).
+- **The agent-list request does not repeat.** If it does, the `:key` is on the wrong component
+  — see [research.md](./research.md) R4.
+- Nothing from the previous agent survives: no stale messages, no stale logs, no stale file
+  tree. Switch back and forth quickly a few times to be sure.
+- Back/Forward move between the agents you visited.
+
+### 5. Chat and logs are exactly as they were — FR-010, SC-003
+
+At a 1440px window with the panel open: chat and logs sit side by side, **both fully
+visible with every border drawn**. Nothing is clipped and the page does not scroll
+sideways — that failure is exactly what this step is here to catch. Collapse the logs with
+their existing button; the space returns to the chat.
+
+At ≥1400px with the panel collapsed the chat is at its usual size and is **not** stretched.
+Narrow the window below 1400px and the pair shrinks together rather than overflowing — see
+[research.md](./research.md) R1.
+
+Then collapse the admin sidebar to icons: the workspace should re-fit its height, not leave
+a gap or overflow. It measures the space rather than assuming a fixed chrome height, so a
+change to the layout's padding does not break it either.
+
+### 6. Sections open in the middle, chat survives — FR-012, FR-014, SC-004a
+
+Click **Files** in the panel.
+
+- The file tree and the editor render **in the middle of the screen**, at roughly the width
+  they have on `main` today — not squeezed into the panel.
+- The panel is still there, with Files marked as current. Click **Environment**: one click,
+  no detour through the conversation.
+- Click **‹ Chat**: the conversation returns with **the same transcript, the same scroll
+  position, and no reconnect**. Check the Network panel — no new websocket, no transcript
+  refetch. If any of that happens, the chat is being `v-if`'d instead of `v-show`'d
+  (plan Risk 1a).
+- Switch to another agent while a section is open: the same section opens for that agent.
+
+### 7. Section counts — FR-015, US3
+
+Open the panel on an agent with attachments:
+
+- Knowledge, Files, Secrets and Channels show numbers that match what each section lists when
+  you open it.
+- An agent with **zero** of something shows `0` — not a blank. A count that has not loaded or
+  failed shows **nothing at all**, and the section still opens normally.
+- Counts do not fetch while the panel is collapsed (watch the Network panel).
+
+### 8. All eight sections still work — FR-012, SC-004
+
+Open each of Overview, Knowledge, Files, Secrets, Environment, Channels, Chats, Paddock and
+perform one real operation in each (edit a file, reveal a secret, add an env var, open a
+chat…). Compare each against `main`: **nothing about their layout should have changed** — if
+a section needed restyling to fit, the navigator model was not implemented as designed (R2).
+
+### 9. Deep links still land — FR-016, SC-005
+
+| Try | Expect |
+|-----|--------|
+| `/agents/<id>?tab=env` | Canvas shows Environment, panel marks it current |
+| `/agents/<id>?tab=paddock` | Canvas shows Paddock |
+| `/agents/<id>?tab=chat` | Canvas shows the conversation, `tab` stripped from the URL |
+| `/agents/<id>?tab=nonsense` | Same as `chat` |
+| `‹ Chat` from any of these | `tab` disappears from the URL |
+| Closing the *panel* while a section is open | Returns to the conversation and clears `tab` — the navigator cannot hide while a section is on the canvas (FR-018) |
+| Usage strip → `Details` | Canvas shows Overview |
+
+Follow `?tab=env` with the panel preference set to *collapsed*: it opens anyway, and after you
+navigate away the preference is still *collapsed* (it was not overwritten —
+[contracts/preferences.md](./contracts/preferences.md)).
+
+### 10. Nothing was lost with the table — FR-009, plan Risk 2
+
+Check off each capability the deleted `list/Provider.vue` had. The list below is the result
+of the T002 inventory — every line was read out of that file, not guessed:
+
+- [ ] Create an agent → top action row
+- [ ] `N slots free` badge, with its "how many more agents fit" tooltip → top action row
+- [ ] Cluster-full warning, both variants (no agent nodes / cluster full) → top action row
+- [ ] Capacity refreshed every 30s → top action row
+- [ ] Edit → settings panel
+- [ ] Start / Stop, with the `RESOURCE_HOLDING` rule deciding which → settings panel
+- [ ] Restart → settings panel
+- [ ] Delete, with its `ConfirmDialog` naming the agent → settings panel
+- [ ] Ranch-admin marker, with its "ranch_* admin tools" tooltip → rail row
+- [ ] Status badge using `AGENT_STATUS_VARIANT` → rail row
+- [ ] Created date via `formatDateTime` → rail row
+- [ ] Resources (cpu / memory) → settings panel identity block
+- [ ] Clicking a row opens that agent → rail row
+- [ ] "Agents" heading and "Manage running agents." lede → dropped deliberately; the sidebar
+      already says where you are, and the workspace opens on a named agent
+- [ ] "No agents yet." empty state → workspace empty state
+- [ ] Loading skeleton → rail skeleton rows (FR-027)
+
+If anything else turns up in that file, it needs a home before the file is deleted.
+
+### 11. The sidebar is untouched — FR-011, SC-006
+
+Compare the primary sidebar against `main`: every entry present, same order, same icons,
+`Agents` still active on the workspace, `Rancher` still going to `/rancher` (the setup page,
+not the agent).
+
+### 12. Agent states still overlay correctly — FR-025
+
+On a `stopped` and a `failed` agent: the overlay covers **only** the message area. Rail,
+header, usage strip and panel stay usable. Trigger a restart and confirm the pending-restart
+banner still appears above the conversation and is not hidden by the panel.
+
+---
+
+## App walkthrough
+
+### 13. Rail replaces the cards, no settings anywhere — FR-019, US2
+
+Open `http://localhost:3001/agents` as a user who can see several agents.
+
+- Redirects into a conversation; no grid of cards.
+- The rail lists the visible agents with status and last activity.
+- **No settings panel, no settings sections** anywhere on the screen.
+- The conversation keeps its readable width — it does not stretch to fill the window.
+
+### 14. The last agent is remembered — FR-020, SC-011
+
+- Switch to agent B, navigate away, come back to `/agents` → you land on B.
+- Reload the browser → still B.
+- Delete B in admin (or make it invisible to this user), return to `/agents` → you land on the
+  first running agent, **not** on a dead id.
+
+### 15. Roles behave as they did — FR-021
+
+As a plain user (not Owner/Admin): no create action in the top row, no `N slots free` badge,
+no 403s in the console. Restart follows whatever rule it follows today.
+
+### 16. Russian — FR-022, SC-009
+
+Switch the locale to RU. Every string in the rail, the top row and the empty states is
+translated. No raw keys like `rail.search` render anywhere. `bun run i18n:check` stays clean.
+
+---
+
+## Responsive — both consoles
+
+### 17. Long lists and small screens — FR-023, FR-024, SC-008, SC-010
+
+- Type a fragment of a name in the rail: it filters. Clear it: full list returns. A search
+  matching nothing shows the "nothing matches" line, not an empty column.
+- Narrow to <1024px: rail and (admin) panel become on-demand overlays, conversation stays
+  usable.
+- At 390px: no horizontal page scroll, message input reachable without dismissing an overlay.
+
+### 18. Empty and loading states — FR-027, edge cases
+
+- With the list still loading, the rail shows skeleton rows, not an empty column.
+- With **no** agents at all: the empty state renders in place at `/agents` — create CTA for
+  Owner/Admin, the "ask an admin" line otherwise. No redirect loop.
+- A single visible agent still renders the rail (FR-006).
+
+---
+
+## Sign-off
+
+The feature is done when steps 1–18 pass, `bun run typecheck` and `bun run i18n:check` are
+clean, and the step 10 checklist is fully ticked. Anything that fails goes back to
+[tasks.md](./tasks.md) rather than being waived — with no automated suite behind it, this
+walkthrough is the only thing standing between a regression and `main`.
diff --git a/specs/006-agent-workspace-tabs/research.md b/specs/006-agent-workspace-tabs/research.md
new file mode 100644
index 00000000..3ae87902
--- /dev/null
+++ b/specs/006-agent-workspace-tabs/research.md
@@ -0,0 +1,308 @@
+# Phase 0 — Research: Agent workspace
+
+**Feature**: [spec.md](./spec.md) | **Plan**: [plan.md](./plan.md) | **Date**: 2026-08-20
+
+The Technical Context carried no `NEEDS CLARIFICATION` markers — the spec's three open
+questions were answered by the requester before planning started. What follows is the design
+research the plan depends on: eight decisions, each with what was rejected and why.
+
+---
+
+## R1 — Fitting five columns into a screen that holds three
+
+**Question**: FR-010 keeps the chat at `min-w-100 max-w-200` with the logs panel beside it,
+FR-001 adds a rail, FR-013 opens a settings panel by default, and the admin console already
+spends 256px on its primary sidebar. What gives?
+
+**The arithmetic** (Tailwind 4: `min-w-100` = 400px):
+
+```
+sidebar 256 + rail 272 + chat 400 + logs 400 + panel 320  =  1648px   (+ gaps ~1690px)
+```
+
+A 1440px screen is ~250px short; a 1536px screen is ~150px short. Only ≥1700px holds all five
+with any slack.
+
+Note this is the *chat* mode of the canvas. In section mode the canvas is one flexible column
+instead of two fixed ones (R2), so the arithmetic stops binding entirely — a section gets
+~910px at 1440px and ~850px at 1700px, against ~800px today.
+
+**Decision (revised during implementation)**: the panel always takes real space above the
+tablet breakpoint, and the **chat/logs pair absorbs the difference** by shrinking.
+
+The original decision — float the panel over the right edge below 1700px so the chat never
+went under its 400px floor — was implemented and then reverted on sight. Two things were
+wrong with it in practice:
+
+- The floating panel **covered the pod logs**, which are half of why an operator is on this
+  screen. Hiding content is worse than shrinking it.
+- The hard `min-w-100` floors on *both* halves meant an 812px minimum for the pair. Once the
+  rail took its 272px, a narrower container simply **overflowed**, and `overflow-x-clip` on
+  the layout ate the chat card's right border. Content silently cut off is the worst of the
+  available failure modes.
+
+So the floor is now gated on there being room for it (`min-[1400px]:min-w-100`), both halves
+carry `min-w-0` below that, and the logs keep their existing collapse button for when the
+operator wants the chat back at full width.
+
+| Viewport | Rail | Chat | Logs | Settings panel |
+|----------|------|------|------|----------------|
+| ≥1400px | docked | docked, 400px floor restored | docked | **docked**, open by default |
+| 1024–1399px | docked | docked, shrinks with the pair | docked, shrinks | **docked**, open by default |
+| <1024px | on-demand overlay | full width | existing behaviour | full-screen overlay |
+
+At ≥1400px the middle of the screen is what it always was. Below that everything stays
+visible and bordered, just narrower — and one click on the logs' own collapse button hands
+the whole middle column back to the chat.
+
+**Rationale**: the requester's correction was that the chat and logs pair must not *change* —
+which the ≥1400px behaviour honours exactly. Below that, something has to give, and the
+choice is between shrinking (everything visible, borders intact) and hiding or clipping. On a
+screen that cannot hold the ideal layout, seeing all of it slightly smaller beats seeing part
+of it cut off.
+
+**Alternatives considered**:
+
+- **Dock the panel everywhere and auto-collapse the logs when it opens.** Still rejected:
+  silently collapsing a panel the operator left open reads as the UI fighting them, and the
+  operator can do it themselves in one click when they want the room.
+- **Hide the logs entirely below a breakpoint.** Would keep the chat's 400px floor intact at
+  every width, but the logs' own toggle lives in that column — hiding it takes the logs away
+  with no way back, which FR-025 forbids.
+- **Float the panel over the right edge (the original decision).** Implemented, then reverted:
+  see the revised decision above.
+- **Shrink the chat's minimum width below 400px.** Directly contradicts the requester's
+  instruction to leave the chat as it is.
+- **Narrow icon-only rail (~64px).** Kills FR-002 — the whole point is that a rail entry
+  carries name, status and date.
+- **Make the rail an overlay at every width.** Turns one-click agent switching (SC-002) into
+  two clicks.
+
+---
+
+## R2 — Where a section renders when the operator clicks it
+
+**Question**: the panel lists eight sections. Clicking one — where does its content go?
+Inline in the panel, in the middle of the screen, in a wide drawer, somewhere else?
+
+**Decision**: the panel is a **navigator**. Clicking a section shows it in the **middle
+canvas, in place of the conversation**, at the width that column already provides. The
+conversation stays mounted behind it (`v-show`, not `v-if`) and returns with one click. The
+panel stays visible throughout, marking which section is current, so moving to another section
+is also one click.
+
+**What decided it — the width of the actual content.** Measured against the eight existing
+components:
+
+| Section | Survives a ~400px panel? |
+|---------|--------------------------|
+| Overview | Yes — a card grid that already collapses to one column |
+| Knowledge | Yes — a list |
+| Secrets | Yes — key/value rows with a reveal toggle |
+| Channels | Yes — small forms |
+| Chats | Yes for the list; opening a conversation wants width |
+| Environment | Borderline — a key/value/actions table, would need stacked rows |
+| **Files** | **No** — a tree and an editor side by side |
+| **Paddock** | **No** — scenario and run tables |
+
+An inline panel therefore means redesigning at least three components that work fine today,
+for zero user benefit. Rendering in the canvas means changing **none** of them — they get
+roughly the width they already have (~910px at 1440px with the panel overlaying, ~850px at
+1700px docked, against ~800px today).
+
+**The reference agrees.** Its panel rows carry `›` chevrons and count badges — the vocabulary
+of navigation, not of an accordion. The earlier draft of this plan read "с возможностью быть
+свернутыми" as *sections* collapsing and specified an accordion; on review that phrase more
+plausibly describes the panel itself, and the requester confirmed the navigator reading.
+
+**Cost, stated plainly**: the operator cannot read the conversation and a settings section at
+the same time. That case is real — "the agent says it can't find a file, let me look at
+Files" — but it is occasional, while cramped tables would be felt in every session that opens
+Files or Paddock. The trade goes to the common case.
+
+**Alternatives considered**:
+
+- **Inline accordion in the panel.** The only real advantage is simultaneous view. Costs the
+  three redesigns above, and would have kept a drag-resize handle on the roadmap as a
+  workaround for a problem the canvas model does not have.
+- **Wide modal drawer over everything.** Gets the width, but hides the rail and the
+  conversation, and below 1700px the panel is itself an overlay — drawer inside a drawer.
+- **Hybrid: light sections inline, heavy ones in the canvas.** Maps neatly onto real usage
+  (glance vs. deep dive) and could be signalled with a distinct icon per row. Rejected for
+  predictability: two behaviours in one list means the operator learns which rows do what.
+  Worth revisiting only if the simultaneous-view case turns out to matter more than expected.
+
+**Consequences elsewhere in this plan**: no shadcn `accordion` needs vendoring; the panel
+shrinks from 384px to 320px; plan Risk 1 disappears and is replaced by the narrower Risk 1a
+(keep the chat mounted).
+
+---
+
+## R3 — Where the rail's live status comes from
+
+**Question**: FR-005 requires rail status to track live runtime state without a manual
+refresh, in both consoles.
+
+**Finding**: `api/src/slices/agent/agent/agent.controller.ts:166` exposes
+`@Sse('status/stream')` and it is annotated **`@Public()`** — "EventSource cannot send
+Authorization headers". `admin` already consumes it through `useAgentStatusStore`
+(`stores/agentStatus.ts`, backed by a gateway/mapper/service triple, ~317 lines total), and
+`useAgentLifecycle` already connects and disconnects it per mounted agent page. `app` has no
+equivalent — its list page fetches once and never refreshes; its detail page polls every 3s
+only while the agent is transitional.
+
+**Decision**:
+
+- **admin**: the rail reads `useAgentStatusStore.statuses` — zero new plumbing, and the store
+  ref-counts subscribers so the rail and `useAgentLifecycle` share one `EventSource`.
+- **app**: the rail refreshes the agent list on a 30s interval, reusing the interval pattern
+  already in `agentList/Provider.vue` for cluster capacity. The open agent keeps its existing
+  3s transitional poll.
+
+**Rationale for not porting SSE to `app` now**: it means duplicating a gateway, mapper,
+domain service, types file and store into `app/slices/agent` — ~317 lines of layered
+plumbing — to make a rarely-changing list update 30s sooner. The endpoint being public means
+that port stays available as a clean follow-up whenever the app rail's staleness is actually
+felt. The trade-off is recorded as plan Risk 4 rather than hidden: an agent stopped from
+elsewhere can read stale in the app rail for up to 30s.
+
+---
+
+## R4 — Resetting per-agent state without remounting the rail
+
+**Question**: FR-026 requires that switching agents leaves nothing of the previous agent
+behind — messages, logs, file tree, section content. Today `admin/…/pages/agents/[id]/index.vue`
+achieves this with `definePageMeta({ key: (route) => \`agent-${route.params.id}\` })`, which
+remounts the entire page subtree on every id change. With a rail on that page, the rail would
+remount too: the column would flash and the agent list would refetch on every switch.
+
+**Decision**: move the remount boundary inward. The page drops its dynamic key; the workspace
+provider renders a persistent `<AgentWorkspaceRail>` beside `<AgentWorkspaceMain :key="id">`.
+Everything that holds per-agent state lives under `Main.vue`; the rail and the top bar do not.
+
+**Rationale**: it is the same mechanism (Vue's `key` forcing a fresh component tree), applied
+one level down, so the guarantee that motivated the original comment on that file is
+preserved exactly. The rail's own data is the agent *list*, which is agent-independent.
+
+**Verification**: quickstart step 4 watches the network panel while switching agents — the
+list request must not repeat.
+
+---
+
+## R5 — Where settings-section counts come from
+
+**Question**: FR-015 wants a count beside Knowledge, Files, Secrets and Channels. Is there an
+aggregate endpoint?
+
+**Finding**: no, and none is needed — each count is already reachable from a store the
+corresponding section uses:
+
+| Section | Source | Cost |
+|---------|--------|------|
+| Knowledge | `useAgentKnowledges(agentId, agentRef).resolved.length` — resolves the per-agent override or the template default | 2 requests, both `useAsyncData`-deduped with the section itself |
+| Files | `useAgentFileStore().list(agentId)` node array length | 1 request, shared with the Files section |
+| Secrets | `agentSecret` store list length | 1 request, shared with the Secrets section |
+| Channels | `useAgentChannelStore().fetchForAgent(agentId)` length | 1 request, shared with the Channels section |
+
+**Decision**: one `useAgentSectionCounts(agentId)` composable that fires the four fetches
+**only once the panel is open**, independently, each `catch`-ing to `null`. A count that is
+absent, still in flight, or failed renders nothing — the section header and its chevron are
+unaffected (FR-015, US3 scenario 2).
+
+**Rationale**: the requests are the same ones the sections themselves make and `useAsyncData`
+keys are shared, so opening a section after seeing its count costs nothing extra. Gating on
+panel-open avoids four requests per agent switch for operators who keep the panel collapsed.
+
+**Alternative rejected**: adding an aggregate `GET /agents/:id/counts` endpoint. It would be
+one request instead of four, but it means an API change, a DTO, a regenerated OpenAPI client
+in both consoles, and a new server-side fan-out — for numbers that are decoration on a panel.
+Revisit only if the four-request fan-out shows up as a real cost.
+
+---
+
+## R6 — How `/agents` picks the agent to land on
+
+**Question**: FR-007 (admin: the Ranch admin agent) and FR-020 (app: last opened) both need
+`/agents` to resolve to a specific agent, while FR-004 wants the address to stay linkable.
+
+**Decision**: `/agents/index.vue` in each console becomes a **resolver page** — it fetches the
+list it already fetched before, picks an id, and `navigateTo(\`/agents/${id}\`, { replace: true })`.
+
+- **admin**: `agents.find(a => a.isAdmin)` → else the most recently updated → else the empty
+  state.
+- **app**: remembered id (if still in the visible list) → first `running` → first in list →
+  else the empty state.
+
+`replace: true` keeps `/agents` out of the history stack, so Back from an agent goes where the
+operator came from rather than bouncing through the resolver.
+
+**Rationale**: keeping `/agents/:id` as the canonical address is what preserves deep links,
+sharing, browser history and the existing `?tab=` links. Rendering the workspace at a bare
+`/agents` URL and only mutating the address on the first rail click would leave the landing
+agent unlinkable and break the back button on the first switch.
+
+**Empty state**: when the list is empty the resolver renders in place rather than redirecting
+— the create CTA for Owner/Admin, the "ask an admin" line otherwise, mirroring what each
+console already shows today.
+
+---
+
+## R7 — Panel open state, and keeping `?tab=` alive
+
+**Question**: FR-013 (open by default, choice persists) and FR-016 (`?tab=env` still opens
+that section, closing clears the parameter) interact — one is a preference, the other is a
+URL.
+
+**Decision**: split them cleanly.
+
+- **Open/closed** is a *preference*: `localStorage`, key `agent:settingsPanelOpen`, absent ⇒
+  open. Not in the URL — an operator's panel habit should not travel in a shared link.
+- **Which section is expanded** is *addressable*: the existing `?tab=<value>` query parameter,
+  unchanged in name and values so every old link keeps working. Present ⇒ the panel is open
+  regardless of the stored preference, expanded on that section. Closing the panel removes the
+  parameter (`router.replace`), exactly as FR-016 requires.
+- **Legacy `?tab=chat`** — `chat` was a tab and is now the canvas itself. It is treated as "no
+  section": the workspace opens normally, panel in its stored state, and the stale parameter is
+  stripped. An unrecognised value behaves the same way.
+- The usage strip's `@details` event, which today sets `activeTab = 'overview'`, instead opens
+  the panel on the Overview section (FR-025).
+
+**Rationale**: preferences that ride in the URL leak into shared links and make two operators
+disagree about "the same" page; addressable state that lives only in `localStorage` breaks
+deep links. Each piece of state goes where its purpose puts it.
+
+---
+
+## R8 — Does the `app` rail need shadcn primitives?
+
+**Question**: admin has ~22 vendored shadcn components; `app` has exactly one (`badge`).
+The rail is the same *concept* in both consoles — should the app rail pull in shadcn?
+
+**Decision**: no. The `app` rail is hand-rolled Tailwind, matching `agentList/Card.vue` and
+`agentChat/Provider.vue` beside it. The status dot with its `animate-ping` pulse, the initials
+avatar, and the relative-time bucketing all already exist in `Card.vue` and move into
+`RailItem.vue` rather than being re-derived.
+
+**Rationale**: `app` is a deliberately lighter console — pulling reka-ui in for a list of rows
+would add a dependency and a styling idiom the rest of the console does not use, for a
+component that is a `<ul>` of buttons. The shared *behaviour* between the two rails is thin
+(pick an agent, show status); the shared *styling* is zero, since the consoles have different
+design languages.
+
+**Consequence for reuse**: the two rails are separate components in separate consoles by
+design. What they share is the contract in [contracts/components.md](./contracts/components.md),
+not code — there is no cross-console package to put shared code in, and creating one for two
+list components would be the wrong trade.
+
+---
+
+## Rejected outright
+
+- **A shared `@cleanslice/*` package for the rail.** No such package boundary exists between
+  `app` and `admin` today; introducing one for two visually divergent list components is
+  overhead with no payoff.
+- **Keeping the agents table behind `/agents/all`.** The requester explicitly chose full
+  removal (FR-008).
+- **Virtualised rail list.** Worth it at thousands of rows; a Ranch install has dozens. Plain
+  rendering plus the FR-023 search filter is enough, and virtualisation can be added later
+  without changing the contract.
diff --git a/specs/006-agent-workspace-tabs/spec.md b/specs/006-agent-workspace-tabs/spec.md
new file mode 100644
index 00000000..10f03084
--- /dev/null
+++ b/specs/006-agent-workspace-tabs/spec.md
@@ -0,0 +1,426 @@
+# Feature Specification: Agent workspace — vertical agent tabs + settings panel
+
+**Feature Branch**: `feat/CLEAN-36-agent-workspace-tabs`
+
+**Created**: 2026-08-20
+
+**Status**: Draft
+
+**Tracker**: [CLEAN-36](https://dreamvention.atlassian.net/browse/CLEAN-36)
+
+**Visual reference**: `export-1a/Agent Interface 1a.dc.html` — left rail of agents, conversation in the middle, settings in a right-hand panel. Deliberately untracked and temporary: it is dropped once the implementation lands, so treat the description in this spec as the durable record of it.
+
+**Input**: User description: "Необходимо обыграть реализацию для admin/app приложений. В app набор агентов — это скучные плашки сейчас, должен быть список табов вертикальных. То же самое и в admin, только все настройки агента перетекают в правый бар с возможностью быть свернутыми; в настройках чуть больше деталей, например количество знаний, файлов и т.д. Важно, чтобы основные пункты навигации в админке не были удалены — референс может запутать: мы работаем лишь с интерфейсом агентов. Отказываясь от agents-таблицы, мы сразу будем падать в главного агента (rancher) с возможностью переключиться на других по табам; в табах можно вывести лёгкую информацию как сейчас в таблице — статус, дату создания, не перегружая."
+
+## Overview
+
+Both consoles today make a person pass through an index screen before they can do the
+one thing they came for — talk to an agent. In `admin` that index is a table; in `app`
+it is a grid of cards. Once inside an agent, `admin` spends a whole vertical column on
+nine settings tabs — a column that exists only to reach configuration the operator opens
+rarely, sitting permanently next to the thing they came for.
+
+This feature turns the agent screen into a workspace of three parts: a vertical list of
+agents on the left that doubles as navigation between them; a middle column that shows
+the conversation with the pod logs beside it exactly as they are today; and (in `admin`
+only) a right-hand panel that navigates the agent's settings and holds its controls. The
+agents table and the agent cards grid stop being a stop on the way and are retired.
+
+**The right-hand panel navigates; it does not contain.** It lists the eight sections with
+their counts and carries the agent's identity and lifecycle controls, and it stays narrow.
+Opening a section shows that section in the middle column, in place of the conversation,
+at the width that section already renders at today — which is why none of the eight
+existing section components has to be redesigned. The conversation is not torn down when
+that happens: it stays alive behind the section and returns with one click.
+
+**The conversation is not stretched.** The chat widget keeps its current sizing and keeps
+the logs panel next to it — a chat column that runs the full width of a wide monitor is
+harder to read, not easier, and the logs are half of why an operator is on this screen.
+What the change buys is the removal of a navigation column, not extra chat width.
+
+The admin console's own primary navigation (Workspace / Admin sidebar with Rancher,
+Agents, Templates, Users, LLM, Settings, …) is **not** part of this change and stays
+exactly as it is. The visual reference does not draw it; that is an artefact of the
+mockup, not an instruction.
+
+## User Scenarios & Testing *(mandatory)*
+
+### User Story 1 - Admin: one agent workspace instead of a table plus nine tabs (Priority: P1)
+
+An operator opens **Agents** in the admin console. Instead of a table, they land directly
+in a conversation with the main (Ranch admin / "rancher") agent. Every agent they can
+manage is listed vertically on the left with just enough to tell them apart — name, live
+status, when it was created, an admin marker. Clicking another entry swaps the
+conversation without leaving the screen. Everything that used to live in the nine
+vertical tabs — Overview, Knowledge, Files, Secrets, Environment, Channels, Chats,
+Paddock — is now reached from a panel on the right, which the operator can collapse when
+they just want to talk. That panel is a **navigator**: it lists the sections with their
+counts and the agent's controls, and opening a section shows it in the middle of the
+screen, where the conversation was, at the width that section has always had. The
+conversation is not destroyed by that — it comes back with one click, transcript intact.
+
+**Why this priority**: This is the whole point of the ticket — the operator's default
+intent (talk to an agent) becomes the default state of the screen, and the two competing
+navigation columns collapse into one rail plus one panel.
+
+**Independent Test**: Open `/agents` as an admin with at least two agents, one of them
+the admin agent. Verify the conversation opens immediately, the left rail lists both
+agents, switching between them changes the conversation, and each of the eight settings
+sections is reachable from the right panel and behaves as it did before.
+
+**Acceptance Scenarios**:
+
+1. **Given** an admin console with a Ranch admin agent, **When** the operator opens the
+   Agents area for the first time, **Then** the workspace opens on that agent's
+   conversation with no table in between, and the settings panel is already open so the
+   agent's controls are one glance away rather than one click.
+2. **Given** the workspace is open on agent A, **When** the operator clicks agent B in
+   the left rail, **Then** the conversation, header, usage strip and settings panel all
+   switch to agent B and the address bar points at agent B.
+3. **Given** the workspace is open, **When** the operator collapses the settings panel,
+   **Then** the space goes back to the conversation-and-logs pair within their existing
+   size limits, and the panel can be reopened from the header.
+4. **Given** no section is open, **When** the operator looks at the middle column, **Then**
+   the chat and the pod logs sit side by side with every border drawn and nothing clipped —
+   at the sizes they have today when the viewport allows it, and shrunk together rather
+   than overflowing when it does not.
+5. **Given** the operator opens a section from the panel, **When** the section renders,
+   **Then** it takes the middle column at the width that column already has, the panel
+   marks that section as the open one, and a single control returns to the conversation
+   with its transcript and connection intact.
+6. **Given** an operator follows an old link carrying a settings-section parameter (e.g.
+   `?tab=env`), **Then** the workspace opens with the settings panel already showing that
+   section; closing the panel removes the parameter from the address.
+7. **Given** the admin console's primary sidebar, **When** the workspace ships, **Then**
+   every navigation entry that existed before is still present and still works.
+
+---
+
+### User Story 2 - App: a vertical agent list instead of a grid of cards (Priority: P2)
+
+A customer opens the agents area of the app console. Instead of a grid of cards they see
+the same vertical rail of agents on the left and a conversation beside it, at the readable
+width it has today. Rail entries carry the same light information as the admin rail —
+name, status, last activity. There is no settings panel here: management stays in admin.
+
+**Why this priority**: It gives the customer console the same "you are already in a
+conversation" feel, but the admin surface is the one with the acute problem (two
+navigation columns), so it lands second.
+
+**Independent Test**: Open the agents area in `app` as a user who can see two or more
+agents. Verify a conversation opens directly, the rail lists the visible agents, and
+switching entries switches the conversation — with no settings panel anywhere.
+
+**Acceptance Scenarios**:
+
+1. **Given** a user with visible agents, **When** they open the agents area, **Then** a
+   conversation opens directly and the other agents are listed in the left rail.
+2. **Given** the user last talked to agent B, **When** they return to the agents area
+   later, **Then** the workspace opens on agent B; if agent B is no longer visible to
+   them, it opens on the first running agent instead.
+3. **Given** the app workspace, **When** the user looks for agent settings, **Then**
+   there is no settings panel and no settings sections — only the conversation and the
+   controls the user already had (restart, where permitted).
+4. **Given** a user whose role does not permit creating agents, **When** the rail
+   renders, **Then** the create action is absent, exactly as it was on the cards screen.
+5. **Given** every user-visible string added by this story, **When** the locale is
+   switched to Russian, **Then** the string is translated (English source in the slice's
+   `en.json`, Russian generated by the sync tool).
+
+---
+
+### User Story 3 - Admin: settings panel that says more at a glance (Priority: P3)
+
+Inside the right-hand panel, each section shows how much is behind it before the operator
+opens it — how many knowledge bases the agent can query, how many stored files, how many
+secrets, how many messaging channels. The number is the reason to click, so it has to be
+there before the click. The panel remembers whether it was open.
+
+**Why this priority**: Additive polish on top of User Story 1 — the panel is useful
+without the counts, but the counts are what make it worth opening.
+
+**Independent Test**: Open the settings panel for an agent with known amounts of
+knowledge, files, secrets and channels; verify each number matches what the corresponding
+section lists when opened.
+
+**Acceptance Scenarios**:
+
+1. **Given** an agent attached to 12 knowledge bases, **When** the settings panel renders,
+   **Then** the Knowledge section shows 12 alongside its name.
+2. **Given** a count that cannot be determined (the source is unreachable or still
+   loading), **When** the section renders, **Then** the section is still listed and still
+   openable, simply without a number.
+3. **Given** the operator collapsed the panel and later returns to the workspace, **Then**
+   the panel is still collapsed.
+
+---
+
+### User Story 4 - Long agent lists and narrow screens (Priority: P4)
+
+An operator with dozens of agents types part of a name into the rail's search field and
+the list narrows to matches. On a narrow window the rail and the panel step out of the
+way so the conversation stays readable, and each can be summoned back on demand.
+
+**Why this priority**: Only bites once an installation has many agents or a small window;
+the workspace is usable without it.
+
+**Independent Test**: With 20+ agents, type a fragment of one name and confirm the rail
+filters to matching entries; then narrow the window below the tablet breakpoint and
+confirm the conversation stays usable with the rail and panel collapsed.
+
+**Acceptance Scenarios**:
+
+1. **Given** a rail with many agents, **When** the operator types a fragment of a name,
+   **Then** only agents whose name matches remain, and clearing the field restores the
+   full list.
+2. **Given** a search that matches nothing, **Then** the rail says so rather than
+   rendering an empty column.
+3. **Given** a narrow viewport, **When** the workspace opens, **Then** the conversation
+   occupies the screen, and the rail and the settings panel each open as a full-screen
+   overlay when summoned.
+
+---
+
+### Edge Cases
+
+- **No agents at all**: the workspace shows an empty state in place of the conversation,
+  with the create action for roles that have it and an explanatory line for roles that
+  do not — mirroring today's empty states on both consoles.
+- **No admin ("rancher") agent in admin**: landing falls back to the most recently
+  updated agent; if there are none, the empty state above.
+- **The selected agent is deleted** (by this operator or another): the workspace moves to
+  the next entry in the rail and reports what happened; if the rail is now empty it shows
+  the empty state.
+- **A direct link to an agent that is not in the rail** (stopped, no longer visible to
+  the user, or plainly nonexistent): the "agent not found / unavailable" state that both
+  consoles already render, with the rail still usable to move elsewhere.
+- **Agent is stopped, failed or restarting**: the existing overlay covers the conversation
+  area only — the rail, the header, the usage strip and the settings panel stay usable.
+- **The "settings changed — restart the agent" banner**: still appears above the
+  conversation and is not hidden by the panel.
+- **The usage strip's "Details" action** currently jumps to the Overview tab; it must open
+  the Overview section in the middle column instead.
+- **Switching agents while a section is open**: the same section opens for the newly
+  selected agent rather than dropping back to its conversation — an operator comparing
+  Environment across two agents should not have to re-navigate on every switch.
+- **The agent goes down while a section is open**: the section keeps working (it reads
+  stored configuration, not the pod), and the conversation shows its stopped/failed
+  overlay when the operator returns to it.
+- **Very long agent names** truncate in the rail with the full name available on hover.
+- **Rapid switching between agents** must not leave one agent's conversation, logs, file
+  tree or settings visible under another agent's name.
+- **A user whose visible agent list contains exactly one agent** still gets a coherent
+  screen (see FR-006).
+
+## Requirements *(mandatory)*
+
+### Functional Requirements
+
+**Agent rail (both consoles)**
+
+- **FR-001**: Both consoles MUST present the agents a user can see as a vertical list in
+  a left rail that stays visible while a conversation is open.
+- **FR-002**: Each rail entry MUST identify its agent and carry light status information
+  only: a visual identifier (initials/avatar), the agent's name, its runtime status, a
+  timestamp (creation date in admin, last activity in app), and the admin marker where
+  the agent is a Ranch admin agent. Entries MUST NOT carry per-agent action controls.
+- **FR-003**: The rail MUST mark exactly one entry as the one currently open, and
+  selecting another entry MUST switch the entire workspace — conversation, header,
+  status, usage strip and (in admin) settings panel — to that agent.
+- **FR-004**: Selecting an agent MUST update the address so the workspace is linkable and
+  the browser's back and forward controls move between previously opened agents.
+- **FR-005**: Agent runtime status shown in the rail MUST track the live status the
+  console already receives, without a manual refresh.
+- **FR-006**: The rail MUST be rendered whenever the workspace is open, including when the
+  user can see exactly one agent — the layout does not change shape as agents come and go,
+  and the rail keeps hosting the search field. (Creating an agent and cluster capacity live
+  in the top action row, not in the rail — see FR-009.)
+
+**Admin workspace**
+
+- **FR-007**: The admin agents area MUST open directly on an agent conversation. The
+  agent chosen on landing MUST be the Ranch admin ("rancher") agent when one exists, and
+  the most recently updated agent otherwise.
+- **FR-008**: The admin agents table MUST be removed entirely — not relocated to a
+  secondary route and not reachable from anywhere in the console. The workspace is the
+  only agents screen.
+- **FR-009**: Every capability the table provided MUST survive the change, in one of two
+  homes. **Workspace-level** actions — creating an agent, and free cluster capacity with
+  its "cluster full" warning — MUST sit in the top action row of the page, at the level
+  where the "Back to agents" link sits today. **Per-agent** actions — edit, start/stop,
+  restart, delete — MUST live in the settings panel alongside the agent's identity, as the
+  visual reference shows.
+- **FR-010**: The nine-item vertical settings column on the agent page MUST be removed.
+  The conversation MUST NOT be stretched to fill the freed space: the chat widget keeps its
+  maximum width and its even split with the pod logs panel beside it, so at the widths this
+  screen is designed for the middle of the workspace reads exactly as it does today.
+  Where the viewport cannot hold that ideal, the pair MUST shrink together rather than
+  overflow — nothing may be clipped or hidden — and the logs' existing collapse control MUST
+  remain the way to give the conversation the whole column back.</br>
+  *(Amended during implementation: the chat's 400px minimum is applied from 1400px upward.
+  Held unconditionally, it overflowed the row on narrower screens and the layout's
+  `overflow-x-clip` cut the chat card's right border off — a worse outcome than a narrower
+  chat. See [research.md](./research.md) R1.)*
+- **FR-011**: The admin console's primary navigation MUST be unchanged: no entry removed,
+  renamed or relocated, and the Agents entry MUST lead to this workspace.
+
+**Admin settings panel**
+
+- **FR-012**: All eight existing settings sections — Overview, Knowledge, Files, Secrets,
+  Environment, Channels, Chats, Paddock — MUST be reachable from a panel on the right of
+  the workspace, and each MUST behave exactly as it does today. Their content MUST render
+  in the middle column, in place of the conversation, at the width that column already
+  provides — no section component is redesigned to fit a narrower container.
+- **FR-013**: The panel MUST be **open by default** — the agent's controls (edit,
+  start/stop, restart, delete) live inside it, so a collapsed-by-default panel would hide
+  them behind a click. It MUST be collapsible and re-openable from the workspace header,
+  and once the operator collapses or reopens it, that choice MUST persist across
+  navigation and reloads until they change it again.
+- **FR-014**: The panel MUST act as a navigator, not a container: every section MUST stay
+  listed and one click away while another section is open, and the panel MUST mark which
+  section the middle column is currently showing. Returning to the conversation MUST take
+  one action, and the conversation MUST come back with its transcript and its live
+  connection intact — opening a section MUST NOT tear the chat down.
+- **FR-015**: The panel MUST show, next to each section that has a countable amount, how
+  many items it holds — knowledge bases, files, secrets, channels — and MUST render the
+  section normally when a count is unavailable.
+- **FR-016**: Existing deep links of the form `?tab=<section>` MUST open the workspace
+  with that section showing in the middle column and the panel marking it as current;
+  returning to the conversation MUST remove the parameter.
+- **FR-017**: The panel MUST expose the agent's lifecycle actions (stop/start, restart,
+  edit) and its identity (name, id, status), so the operator never needs the retired
+  table to act on an agent.
+- **FR-018**: The panel MUST stay narrow — it holds a list of section names with counts, an
+  identity block and a row of controls, and nothing else. It MUST NOT overlap or hide the
+  top action row, and while a section is open in the middle column the panel MUST remain
+  visible so the operator can move to another section or back to the conversation.
+
+**App workspace**
+
+- **FR-019**: The app agents area MUST replace the card grid with the same rail plus
+  conversation layout and MUST NOT expose any settings panel or settings sections. As in
+  admin, the conversation MUST keep its current readable width rather than stretching to
+  fill whatever the rail leaves over.
+- **FR-020**: On landing, the app workspace MUST open the conversation with the agent the
+  user opened last. The remembered choice MUST survive a reload and MUST be discarded when
+  that agent is no longer visible to the user. On a first visit — or after the remembered
+  agent disappears — the workspace MUST fall back to the first running agent, and to the
+  first agent in the list when none is running.
+- **FR-021**: The app workspace MUST preserve the role-dependent behaviour of the current
+  cards screen: create is offered only to Owner/Admin, cluster capacity is shown only to
+  those roles, and the restart control keeps its current permission rule.
+- **FR-022**: Every user-visible string the app workspace introduces MUST be defined as an
+  English key in the owning slice and MUST have a generated Russian translation; strings
+  computed in script MUST travel as keys. The admin console stays English-only.
+
+**Behaviour shared by both**
+
+- **FR-023**: The rail MUST offer a name search that filters the list, with a distinct
+  "nothing matches" state.
+- **FR-024**: Below the tablet breakpoint the rail and (in admin) the settings panel MUST
+  each collapse to an on-demand full-screen overlay, leaving the conversation readable.
+  The logs panel keeps whatever responsive behaviour it has today — this feature adds the
+  two new columns' behaviour, it does not redesign the existing pair.
+- **FR-025**: Existing conversation behaviour MUST be preserved: the restart banner, the
+  stopped/failed/restarting overlay over the message area, the usage strip and its
+  Details action, and the admin log side-stack — including its collapse-to-a-button
+  behaviour and the space it hands back to the chat when collapsed.
+- **FR-026**: Switching agents MUST fully reset per-agent state (messages, logs, file
+  tree, section content) so no data from the previously open agent survives the switch.
+- **FR-027**: While the agent list is loading, the rail MUST show placeholder entries
+  rather than an empty column, matching the loading treatment already used on both
+  consoles.
+
+### Key Entities
+
+- **Agent**: the unit the rail lists and the workspace opens. Attributes that matter here:
+  name, runtime status, creation and last-update timestamps, whether it is the Ranch admin
+  agent, the template it runs, and the knowledge bases attached to it.
+- **Rail entry**: one agent's row in the vertical list — identifier, name, status, a
+  timestamp, admin marker, and whether it is the currently open agent.
+- **Settings section** (admin only): one of the eight areas of agent configuration —
+  a name, a one-line description, an optional count of what it holds, and its own content.
+- **Workspace selection**: which agent is currently open and, in admin, which settings
+  section (if any) is expanded — both reflected in the address so the screen is linkable.
+
+## Success Criteria *(mandatory)*
+
+### Measurable Outcomes
+
+- **SC-001**: Opening the agents area and being in a conversation with an agent takes
+  **zero** intermediate clicks, down from one (table row / card) today, on both consoles.
+- **SC-002**: Switching from one agent's conversation to another's takes **one** click
+  from anywhere in the workspace.
+- **SC-003**: At a 1440px viewport with the rail and the settings panel both open, the
+  conversation and the pod logs are both **fully visible** side by side — every border drawn,
+  nothing clipped, no horizontal scrolling of the page. At 1400px and above with the panel
+  collapsed, each is at least as wide as it is today.
+- **SC-004**: All **8** settings sections remain reachable and functionally unchanged; a
+  walkthrough of each section performs the same operations it performed before the change,
+  and **zero** of the eight section components need layout changes to fit their new home.
+- **SC-004a**: Returning from any open section to the conversation takes **one** action and
+  the transcript is unchanged — no reconnect, no re-fetch, no scroll position lost.
+- **SC-005**: **100%** of previously working `?tab=<section>` links still land on the
+  intended section.
+- **SC-006**: **Every** admin primary navigation entry present before the change is
+  present after it.
+- **SC-007**: An operator can tell an agent's status and age from the rail alone, without
+  opening it — verified for all five runtime statuses.
+- **SC-008**: With 50 agents in the rail, finding a specific agent by name takes under
+  **5 seconds** and the list stays responsive while scrolling and filtering.
+- **SC-009**: Every string introduced in the app console renders translated in Russian —
+  zero untranslated or raw-key strings in the workspace, verified by the existing
+  undefined-key check.
+- **SC-010**: At a 390px-wide viewport the conversation remains fully usable — no
+  horizontal scrolling of the page and the message input reachable without dismissing an
+  overlay.
+- **SC-011**: A returning app user lands back on the agent they last talked to in **100%**
+  of visits where that agent is still visible to them, and never lands on a "which agent?"
+  screen.
+
+## Assumptions
+
+- **The visual reference is a direction, not a pixel contract.** `export-1a` shows a
+  three-column arrangement (rail, conversation, settings) and the kind of information each
+  column carries; the actual implementation reuses each console's existing design system
+  rather than reproducing the mockup's colours and shapes.
+- **The reference's missing admin sidebar is an artefact of the mockup.** The admin
+  primary navigation is out of scope and stays untouched — stated explicitly by the
+  requester.
+- **"Rancher" here means the Ranch admin agent** (the agent flagged as admin), not the
+  existing `/rancher` setup-status page, which is a separate screen and stays as it is.
+- **`/agents/:id` remains the canonical address of an open agent**, so landing on the
+  agents area resolves to a specific agent's address rather than keeping a bare `/agents`
+  URL — this is what keeps deep links, sharing and browser history working.
+- **Creating an agent** and **cluster capacity** ("N slots free" and the cluster-full
+  warning) both live in the top action row of the workspace — the level currently occupied
+  by the "Back to agents" link, which has nothing left to link back to once the table is
+  gone. They belong together: the capacity number is what qualifies the create action.
+- **Per-agent lifecycle actions** (edit, start/stop, restart) and **delete** live in the
+  settings panel, next to the agent's identity — the arrangement the visual reference
+  shows. They leave the page header, which means reaching them requires opening the panel.
+- **The chat and logs pair is untouched.** The chat widget's minimum and maximum widths
+  and the logs panel beside it stay as they are; the freed column simply lets the rail and
+  the settings panel exist without squeezing them.
+- **The middle column is a canvas with two modes** — conversation (default) or one open
+  section. This is what lets the eight section components keep their current width and
+  therefore their current markup. The visual reference supports it: its panel rows carry
+  chevrons and counts, which is the vocabulary of navigation, not of an accordion.
+- **The conversation stays mounted behind an open section** rather than being destroyed
+  and rebuilt, so returning to it costs nothing and the websocket is not churned. The cost
+  is that chat and settings cannot be read side by side; that trade was made deliberately,
+  because cramping Files and Paddock into a narrow panel would hurt every session while
+  the side-by-side case is rare.
+- **Counts in the settings panel** are gathered per section as the panel opens rather than
+  from a single new aggregate endpoint; knowledge count is already available on the agent
+  record, the rest come from the sources each section already reads. A count that has not
+  arrived yet simply does not render.
+- **App users see whichever agents the API already exposes to them**; this feature changes
+  presentation only and introduces no new visibility rule.
+- **The "last opened agent" the app workspace restores is remembered per browser**, not
+  stored server-side — a convenience, not a synced preference, so a different device
+  simply falls back to the first running agent.
+- **No API or data-model change is expected.** If a count turns out to be unavailable
+  without a new endpoint, that section ships without its count rather than blocking.
+- **The admin console remains English-only**; only the app console's strings go through
+  the `en.json` → sync → `ru.json` workflow.
diff --git a/specs/006-agent-workspace-tabs/tasks.md b/specs/006-agent-workspace-tabs/tasks.md
new file mode 100644
index 00000000..705c9019
--- /dev/null
+++ b/specs/006-agent-workspace-tabs/tasks.md
@@ -0,0 +1,264 @@
+---
+
+description: "Task list for the agent workspace (CLEAN-36)"
+---
+
+# Tasks: Agent workspace — vertical agent tabs + settings panel
+
+**Input**: Design documents from `/specs/006-agent-workspace-tabs/`
+
+**Prerequisites**: [plan.md](./plan.md), [spec.md](./spec.md), [research.md](./research.md), [data-model.md](./data-model.md), [contracts/](./contracts/)
+
+**Tests**: **No test tasks are generated.** Neither console has a test runner — `admin/package.json` and `app/package.json` both declare `"test": "echo '… no tests yet'"` and a stub `lint`. The spec did not request TDD, and standing up a test framework is a separate piece of work with its own ticket. The gates for this feature are `bun run typecheck`, `bun run i18n:check` and the manual walkthrough in [quickstart.md](./quickstart.md); every phase ends with the quickstart steps that cover it.
+
+**Organization**: Tasks are grouped by user story so each can be implemented, verified and shipped independently.
+
+## Format: `[ID] [P?] [Story] Description`
+
+- **[P]**: Can run in parallel (different files, no dependency on an unfinished task)
+- **[Story]**: US1 / US2 / US3 / US4, matching the user stories in [spec.md](./spec.md)
+- Every task names the exact file it touches
+
+## Path Conventions
+
+Two Nuxt consoles in a Bun workspace, each a set of auto-registered slice layers:
+
+- **admin**: `admin/slices/agent/agent/…` — components auto-import by path (`components/agent/workspace/Rail.vue` → `<AgentWorkspaceRail>`)
+- **app**: `app/slices/agent/…` — same convention (`components/agentWorkspace/Rail.vue` → `<AgentWorkspaceRail>`)
+- **No `api/` changes.** If a task seems to need one, stop — that is a design error, not a task.
+
+---
+
+## Phase 1: Setup
+
+**Purpose**: Establish a clean baseline and the safety net for deleting the table
+
+- [X] T001 Run `bun run typecheck` and `bun run i18n:check` on `feat/CLEAN-36-agent-workspace-tabs` before any edit and record that both are clean, so a later failure is attributable to this work rather than to pre-existing drift
+- [X] T002 [P] Read `admin/slices/agent/agent/components/agent/list/Provider.vue` end to end and reconcile every capability it provides against the checklist in [quickstart.md](./quickstart.md) step 10 — append anything the checklist is missing. This is the precondition for T020 (deleting the file), per [plan.md](./plan.md) Risk 2
+
+**Checkpoint**: Baseline green, deletion inventory complete
+
+---
+
+## Phase 2: Foundational (Blocking Prerequisites)
+
+**Purpose**: The admin section model and panel-state plumbing that US1, US3 and the admin half of US4 all build on
+
+**⚠️ Blocks US1, US3 and US4-admin. Does NOT block US2** — the app console shares no code with admin (see [research.md](./research.md) R8), so US2 can start immediately in parallel with this phase.
+
+- [X] T003 Rewrite `admin/slices/agent/agent/components/agent/item/tabs.ts`: drop the `chat` entry, add `countKey: keyof SectionCounts | null` per section, export the `AgentSettingsSection` union. The eight remaining `value` strings (`overview`, `knowledge`, `files`, `secrets`, `env`, `channels`, `chats`, `paddock`) must stay byte-identical — that is the `?tab=` compatibility guarantee (FR-016)
+- [X] T004 Create `admin/slices/agent/agent/composables/useSettingsPanel.ts`: panel open/closed backed by `localStorage['agent:settingsPanelOpen']` with **absent ⇒ open** (FR-013), `?tab=` read/write via `router.replace`, normalisation of legacy `chat` and unrecognised values to "no section", and the forced-open-without-persisting rule for deep links. Guard every storage access in try/catch like `stores/agent.ts` already does. Contract: [contracts/preferences.md](./contracts/preferences.md), [contracts/routes.md](./contracts/routes.md)
+
+**Checkpoint**: Section metadata and panel state exist; admin story work can begin
+
+---
+
+## Phase 3: User Story 1 - Admin: one agent workspace (Priority: P1) 🎯 MVP
+
+**Goal**: `/agents` in admin lands straight in the Ranch admin agent's conversation, with a rail of agents on the left and a settings navigator on the right. The table is gone; the chat and logs keep their current size.
+
+**Independent Test**: Open `/agents` as an admin with at least two agents, one of them the admin agent. The conversation opens with no table in between, the rail lists both agents, switching between them switches the workspace, all eight sections open in the middle column, and the primary sidebar is untouched. Quickstart steps 1–6, 8–11.
+
+### Implementation for User Story 1
+
+- [X] T005 [P] [US1] Create `admin/slices/agent/agent/composables/useAgentRailEntries.ts` — derive `RailEntry[]` from the agent list per [data-model.md](./data-model.md): initials, status reconciled from `useAgentStatusStore.statuses` over the DB row (same precedence `rancher/Provider.vue` uses), status tone, `createdAt` timestamp, `isAdmin`, `isActive` (FR-002, FR-005)
+- [X] T006 [P] [US1] Create `admin/slices/agent/agent/components/agent/workspace/RailItem.vue` — one row: avatar, name (truncated with `title`), status dot + label, created date, Ranch-admin marker. Presentational only, **no action controls** (FR-002)
+- [X] T007 [P] [US1] Create `admin/slices/agent/agent/components/agent/workspace/TopBar.vue` — `New agent` link plus the `N slots free` badge and its cluster-full warning, occupying the row where `← Back to agents` sits today. `capacity: null` renders no badge, so non-privileged roles never hit the `@Roles(Owner, Admin)` endpoint (FR-009)
+- [X] T008 [US1] Create `admin/slices/agent/agent/components/agent/workspace/Rail.vue` — vertical list of `RailItem`, exactly one marked active, skeleton rows while `pending` (FR-027), emits `select` without navigating. Search is deferred to T035 (depends on T005, T006)
+- [X] T009 [P] [US1] Create `admin/slices/agent/agent/components/agent/settings/NavItem.vue` — section row: title, one-line description, count slot, chevron, current-section marker. Renders no section content (FR-018)
+- [X] T010 [US1] Create `admin/slices/agent/agent/components/agent/workspace/Canvas.vue` — the two-mode middle column: chat branch toggled with **`v-show`** (never `v-if` — see § The two rules that must not be broken), section branch with `v-if` and a `section → component` map covering all eight, plus the `‹ Chat` return control and the section name header. Files and Secrets get the explanatory copy that their `Card` wrappers carry today (FR-012, FR-014)
+- [X] T011 [US1] Create `admin/slices/agent/agent/components/agent/settings/Panel.vue` — identity block (avatar, name, id, status, `statusReason` when failed, resources), the navigator list of eight `NavItem`s, and the lifecycle row: `Stop`/`Start`, `Restart`, `Edit`, and `Delete` behind the existing `ConfirmDialog`. Emits `update:section`, holds no section content (FR-017, FR-018) (depends on T003, T009)
+- [X] T012 [US1] Create `admin/slices/agent/agent/components/agent/workspace/Main.vue` — per-agent subtree: pending-restart banner, compact agent header (avatar, name, status pill, `Manage agent` toggle), usage strip, and `Canvas`. Calls `useAgentLifecycle(id, agent, refresh)` unchanged (depends on T010)
+- [X] T013 [US1] Create `admin/slices/agent/agent/components/agent/workspace/Provider.vue` — the shell: `TopBar` · `Rail` · `<Main :key="id">` · `Panel` hosted either as a docked `<aside>` at `min-width: 1700px` or as a `Sheet` below it (`useMediaQuery` from `@vueuse/core`). Owns the single `useAsyncData('admin-agents')` and the routing on `select`. **The `:key` goes on `Main`, never on the provider or the rail** (R4, FR-026) (depends on T007, T008, T011, T012)
+- [X] T014 [US1] Rewrite `admin/slices/agent/agent/components/agent/item/Provider.vue` as a thin host for `<AgentWorkspaceProvider :id="id" />`, moving its header, tabs and `TabsContent` out — the eight section components move to `Canvas.vue` with their props unchanged (depends on T013)
+- [X] T015 [US1] Edit `admin/slices/agent/agent/pages/agents/[id]/index.vue` — remove `definePageMeta({ key })`; the per-agent remount boundary now lives on `Main.vue`. Keep the comment explaining *why* the boundary exists, moved to its new home (R4)
+- [X] T016 [US1] Rewrite `admin/slices/agent/agent/pages/agents/index.vue` as a resolver: fetch the list, pick `agents.find(a => a.isAdmin)` → else most recently updated → else render the empty state in place, and `navigateTo(id, { replace: true })` (FR-007, [contracts/routes.md](./contracts/routes.md))
+- [X] T017 [US1] Edit `admin/slices/agent/agent/components/agent/chat/Tab.vue` — recompute the `h-[calc(100vh-15.5rem)]` height for the workspace's new chrome (top action row + compact header + usage strip, minus the deleted tabs column). **Do not touch `min-w-100`, `max-w-200`, `basis-1/2` or the logs panel** (FR-010, FR-025)
+- [X] T018 [US1] Wire the usage strip's `@details` in `Main.vue` to open the Overview section in the canvas instead of switching to a tab (FR-025, edge case)
+- [X] T019 [US1] Handle the deleted-agent edge case in `Provider.vue`: when the open agent disappears from the list, `push` to the next rail entry and surface what happened; empty rail ⇒ empty state ([contracts/routes.md](./contracts/routes.md))
+- [X] T020 [US1] Delete `admin/slices/agent/agent/components/agent/list/Provider.vue` — only after T002's checklist is fully ticked and every capability has a verified new home (FR-008, FR-009)
+- [X] T021 [US1] Confirm `admin/slices/agent/agent/plugins/menu.ts` and every other `plugins/menu.ts` are unchanged, and that the `Agents` sidebar entry still resolves to the workspace (FR-011)
+
+**Checkpoint**: Admin workspace fully functional. This alone satisfies CLEAN-36's original acceptance criteria and is the MVP.
+
+---
+
+## Phase 4: User Story 2 - App: vertical agent list instead of cards (Priority: P2)
+
+**Goal**: The app console's agents area opens straight into a conversation with the same rail on the left — no cards, no settings panel.
+
+**Independent Test**: Open the app agents area as a user who can see two or more agents. A conversation opens directly, the rail lists the visible agents, switching entries switches the conversation, and there is no settings panel anywhere. Quickstart steps 13–16.
+
+**Independent of Phase 2** — no shared code with admin (R8).
+
+### Implementation for User Story 2
+
+- [X] T022 [P] [US2] Create `app/slices/agent/composables/useLastAgent.ts` — read/write `localStorage['agent:lastOpened']`, guarded, **with the validate-on-read rule**: the stored id is used only if it is in the currently visible agent list ([contracts/preferences.md](./contracts/preferences.md))
+- [X] T023 [P] [US2] Create `app/slices/agent/components/agentWorkspace/RailItem.vue` — hand-rolled Tailwind, no shadcn (R8). Move the status-tone map, the initials derivation and the relative-time bucketing over from `agentList/Card.vue` rather than rewriting them; timestamp is `updatedAt` here, not `createdAt` (FR-002)
+- [X] T024 [US2] Create `app/slices/agent/components/agentWorkspace/Rail.vue` — same shape as the admin rail (list, one active, skeletons, emits `select`), app styling. Search deferred to T036 (depends on T023)
+- [X] T025 [US2] Create `app/slices/agent/components/agentWorkspace/Provider.vue` — rail + conversation, **no settings panel** (FR-019). Refreshes the agent list every 30s (R3), writes `agent:lastOpened` on every successful open, preserves the role rules of the cards screen: create only for Owner/Admin, capacity only for those roles (FR-021) (depends on T022, T024)
+- [X] T026 [US2] Edit `app/slices/agent/components/agentChat/Provider.vue` — keep every bit of its logic (restart, transitional polling, overlay stages, status pill) and remove only the `← Back to agents` link and its own `h-[calc(100vh-3.5rem-1px)]` wrapper, both of which the workspace now owns. Keep the conversation's readable width — do not stretch it (FR-019)
+- [X] T027 [US2] Rewrite `app/slices/agent/pages/agents/index.vue` as a resolver: remembered id (validated) → first `running` → first in list → empty state in place, then `navigateTo(id, { replace: true })` (FR-020)
+- [X] T028 [US2] Edit `app/slices/agent/pages/agents/[id].vue` to render `<AgentWorkspaceProvider :id="id" />`
+- [X] T029 [US2] Delete `app/slices/agent/components/agentList/Card.vue` and `app/slices/agent/components/agentList/Provider.vue` after confirming nothing else references them (only the index page did)
+- [X] T030 [US2] Add the new English keys to `app/slices/agent/i18n/locales/en.json` — a `rail.*` group for anything new, **reusing the existing `status.*` and `relative_time.*` keys rather than duplicating them**. Copy computed in script travels as a key, never as text (FR-022, `docs/i18n.md`)
+- [X] T031 [US2] Run `bun run i18n:sync` and commit `en.json` and the generated `ru.json` together; never hand-write `ru.json` first (FR-022)
+- [X] T032 [US2] Verify `app/slices/common/components/layout/Provider.vue`'s `isFlush` regex still matches the workspace route and still excludes `/agents/create`; the workspace inherits the flush treatment unchanged ([contracts/routes.md](./contracts/routes.md))
+
+**Checkpoint**: Both consoles now open on a conversation with a rail. US1 and US2 work independently.
+
+---
+
+## Phase 5: User Story 3 - Settings panel that says more at a glance (Priority: P3)
+
+**Goal**: Each section in the admin panel shows how much is behind it before the operator clicks.
+
+**Independent Test**: Open the panel for an agent with known amounts of knowledge, files, secrets and channels; each number matches what that section lists when opened, `0` renders as `0`, and an unavailable count renders as nothing at all. Quickstart step 7.
+
+**Depends on**: Phase 2 (T003 for `countKey`) and US1 (T011 for the panel that displays them).
+
+### Implementation for User Story 3
+
+- [X] T033 [US3] Create `admin/slices/agent/agent/composables/useAgentSectionCounts.ts` — `(agentId, enabled: Ref<boolean>)` firing nothing until `enabled`, then four independent fetches: `useAgentKnowledges().resolved.length`, `useAgentFileStore().list(id).length`, the `agentSecret` store list length, and `useAgentChannelStore().fetchForAgent(id).length`. Each catches to `null`; keys are shared with the sections themselves so opening a section afterwards costs nothing extra (R5)
+- [X] T034 [US3] Wire the counts through `settings/Panel.vue` into `settings/NavItem.vue`, gated on the panel being open. **`null` renders nothing** — no `0`, no spinner, no error badge; `0` is a real value meaning "none attached" (FR-015, US3 scenario 2) (depends on T033)
+
+**Checkpoint**: Counts visible and honest about what they do not know.
+
+---
+
+## Phase 6: User Story 4 - Long lists and narrow screens (Priority: P4)
+
+**Goal**: A rail with dozens of agents is searchable, and the workspace stays usable below the tablet breakpoint.
+
+**Independent Test**: With 20+ agents, a name fragment filters the rail and a non-matching search says so; below 1024px the rail and (admin) the panel become on-demand overlays with the conversation still usable at 390px. Quickstart step 17.
+
+**Depends on**: US1 for the admin rail, US2 for the app rail. The two halves are independent of each other.
+
+### Implementation for User Story 4
+
+- [X] T035 [P] [US4] Add the name search and its "nothing matches" state to `admin/slices/agent/agent/components/agent/workspace/Rail.vue` — case-insensitive substring on `name`, clearing restores the full list. Not persisted, by design ([contracts/preferences.md](./contracts/preferences.md)) (FR-023)
+- [X] T036 [P] [US4] Add the same search and empty-result state to `app/slices/agent/components/agentWorkspace/Rail.vue`, with its strings as English keys in `app/slices/agent/i18n/locales/en.json` (FR-023, FR-022)
+- [X] T037 [US4] Below `1024px` in `admin/…/workspace/Provider.vue`: the rail becomes an on-demand overlay and the panel a full-screen sheet, leaving the canvas readable. The logs panel keeps whatever responsive behaviour it has today — do not redesign the existing pair (FR-024)
+- [X] T038 [US4] Same narrow-screen treatment for the rail in `app/slices/agent/components/agentWorkspace/Provider.vue`; verify the conversation at 390px has no horizontal page scroll and a reachable input (FR-024, SC-010)
+- [X] T039 [US4] Run `bun run i18n:sync` again for the keys T036 added, committing `en.json` and `ru.json` together
+
+**Checkpoint**: All four stories functional.
+
+---
+
+## Phase 7: Polish & Cross-Cutting Concerns
+
+- [X] T040 Run `bun run typecheck` and `bun run i18n:check` — both must be clean before anything else in this phase counts
+- [ ] T041 Walk [quickstart.md](./quickstart.md) steps 1–18 end to end and record the result of each. Steps 6 (chat survives a section round trip) and 10 (nothing lost with the table) are the two that most need a careful pass
+- [X] T042 [P] Confirm no leftover references to the deleted components or to the old tab column: grep for `AgentListProvider`, `AGENT_TABS`, `TabsContent` under `admin/slices/agent` and `app/slices/agent`
+- [X] T043 [P] Re-read the eight section components and confirm **none of them needed a layout change** — if one did, the navigator model was not implemented as designed and R2's premise is broken (SC-004)
+- [ ] T044 Post the implementation checkpoint on CLEAN-36 and open the PR into `main` with `CLEAN-36` in the title, then put the PR URL on the issue and move it to In Review (`CLAUDE.md` delivery cycle)
+
+---
+
+## Implementation notes — what was built differently, and why
+
+Recorded during `/speckit-implement`. Each of these is a deliberate departure
+from the task text; the task's *intent* is met in every case.
+
+| # | Task | Departure |
+|---|------|-----------|
+| 1 | T003 | The file was **renamed** `components/agent/item/tabs.ts` → `components/agent/settings/sections.ts`. There are no tabs any more, and leaving the old name would have left the codebase describing a screen that no longer exists. The eight `value` strings are byte-identical, which is the part that was actually load-bearing. |
+| 2 | T013, T037 | **No shadcn `Sheet` anywhere.** The panel is one element whose docking is pure CSS (`min-[1700px]:static` / `max-lg:fixed inset-0`), so crossing a breakpoint never remounts it or duplicates its state. `Sheet` is modal — a default-open modal would have blocked the conversation it sits beside, and below 1700px the panel is itself an overlay, so a section opening inside it would have been a drawer in a drawer. The narrow rail overlay is a plain fixed div for the same reason. |
+| 3 | T017 | The chat's `h-[calc(100vh-15.5rem)]` was **removed rather than re-tuned**. The canvas gives it a bounded height, so `h-full` is correct and there is one fewer magic number to re-derive every time a header moves. `min-w-100` / `max-w-200` / `basis-1/2` and the logs panel beside it are untouched, as required. |
+| 4 | T033 | The knowledge count is assembled by hand (agent override, else the template's defaults) instead of riding `useAgentKnowledges`. That composable fires its `useAsyncData` calls the moment it is called, which would have broken the "nothing fetches until the panel is open" rule the same task asks for. |
+| 5 | T035, T036 | Search landed **with** the rails (T008, T024) rather than as a second pass over the same two files. Same code, one edit instead of two. |
+| 6 | T006 | Added `formatDate` beside the existing `formatDateTime` in `admin/slices/common/utils/formatDate.ts`. The rail row carries status and a date on one 272px line; the full timestamp cost width without adding information. |
+| 7 | T030 | Retired keys as well as adding them: `list.title`, `list.lede`, `list.running_of`, the whole `card.*` group and `chat.back_to_agents` belonged to the deleted grid and the deleted back-link. `i18n:sync` dropped their Russian counterparts. |
+| 8 | contracts/routes.md | **Corrected a contract that contradicted FR-018.** It said closing the panel while a section is open keeps `?tab=`; FR-018 requires the navigator to stay visible whenever a section is on the canvas, so that state is unreachable. Closing now returns to the conversation and clears the parameter. |
+
+## Verification status
+
+| Gate | Result |
+|------|--------|
+| `bun run typecheck` | ✅ clean (2/2 packages) — and **proven to be a real gate**: probe errors in a `.ts` file and in a `.vue` template were both caught before being reverted |
+| `bun run i18n:check` | ✅ 6 slice/locale pairs in sync, 175 keys, no undefined usages |
+| `admin` production build | ✅ complete |
+| `app` production build | ✅ complete |
+| [quickstart.md](./quickstart.md) steps 1–18 | ⛔ **not run** — needs a browser against a running `ranch dev` stack (T041) |
+
+The builds resolve every auto-imported component and composable, so the wiring
+is verified. What is **not** verified is anything only a browser can show:
+layout at each breakpoint, the chat surviving a section round trip without a
+reconnect, the rail not refetching on switch, and the deep-link behaviour.
+
+## Dependencies & Execution Order
+
+### Phase dependencies
+
+```
+Phase 1 (Setup)
+      │
+      ├──────────────────────────────► Phase 4 (US2, app) ──┐
+      │                                                      │
+      ▼                                                      │
+Phase 2 (Foundational, admin)                                │
+      │                                                      │
+      ▼                                                      │
+Phase 3 (US1, admin) ── MVP                                  │
+      │                                                      │
+      ├──► Phase 5 (US3, counts)                             │
+      │                                                      │
+      └──► Phase 6 (US4) ◄───────────────────────────────────┘
+                    │
+                    ▼
+             Phase 7 (Polish)
+```
+
+- **US2 does not wait for Phase 2 or Phase 3.** The consoles share no code, so the app half can be built by a second person from the moment Setup is done.
+- **US3** needs T003 (`countKey`) and T011 (the panel).
+- **US4** needs T008 (admin rail) for its admin half and T024 (app rail) for its app half; those halves do not need each other.
+
+### Within User Story 1
+
+The dependency spine is: `useAgentRailEntries` + `RailItem` → `Rail`; `NavItem` → `Panel`; `Canvas` → `Main`; then `Provider` needs all four of `TopBar`, `Rail`, `Panel`, `Main`. Everything after `Provider` (T014–T021) is wiring and removal, and T020 is gated on T002.
+
+### Parallel opportunities
+
+- **Phase 1**: T002 is `[P]` — it is reading, not editing
+- **Phase 3**: T005, T006, T007, T009 are all `[P]` — four separate new files with no shared dependency. T010 can also start once T003 is done
+- **Phase 4**: T022 and T023 are `[P]`
+- **Phase 6**: T035 and T036 are `[P]` — different consoles
+- **Phase 7**: T042 and T043 are `[P]`
+- **Across phases**: one person on US1 (admin) and one on US2 (app) is the natural split, and they never touch the same file
+
+## Parallel Example: User Story 1 opening moves
+
+```
+T005 useAgentRailEntries.ts   ─┐
+T006 workspace/RailItem.vue   ─┼─ four independent new files, no shared edits
+T007 workspace/TopBar.vue     ─┤
+T009 settings/NavItem.vue     ─┘
+                               │
+                               ▼
+                      T008 Rail.vue (needs T005, T006)
+                      T011 Panel.vue (needs T003, T009)
+```
+
+## Implementation Strategy
+
+**MVP is Phase 1 → 2 → 3 (US1).** That alone deletes the table, lands the workspace, and satisfies CLEAN-36's original acceptance criteria. It is shippable without US2, US3 or US4.
+
+**Increment 2 is US2** — the app console, which can be built in parallel and shipped separately.
+
+**US3 and US4 are polish** on top: counts make the panel worth opening, search and the narrow-screen overlays matter once an install has many agents or someone opens the console on a laptop. Neither blocks a release.
+
+### The two rules that must not be broken
+
+1. **`v-show`, never `v-if`, on the chat branch of `Canvas.vue`** (T010). Unmounting the chat drops the websocket, the transcript, the scroll position and the restart overlay state — SC-004a exists to forbid exactly that, and quickstart step 6 checks it in the Network panel.
+2. **The `:key` lives on `Main.vue`, not on the page or the provider** (T013, T015). On the page it remounts the rail on every agent switch, refetching the list and flashing the column; quickstart step 4 checks it.
+
+### Known trade-offs already decided — do not relitigate during implementation
+
+| Decision | Where it is argued |
+|----------|--------------------|
+| Sections render in the canvas, not inside the panel | [research.md](./research.md) R2 |
+| `app` gets a 30s list poll, not an SSE port | [research.md](./research.md) R3 |
+| Counts fan out to four requests rather than a new aggregate endpoint | [research.md](./research.md) R5 |
+| Panel docks at ≥1700px and overlays below | [research.md](./research.md) R1 |
+| The two rails are separate components, not a shared package | [research.md](./research.md) R8 |

From 759789603e65ea21e57ada156dcaa8001e31aa7b Mon Sep 17 00:00:00 2001
From: "Maksym Hryzodub [DREAM]" <maksym.hryzodub@dreamvention.com>
Date: Thu, 20 Aug 2026 21:10:49 +0300
Subject: [PATCH 2/5] docs(spec): tick the PR task now that CLEAN-36 is open
 for review (CLEAN-36)

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 specs/006-agent-workspace-tabs/tasks.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/specs/006-agent-workspace-tabs/tasks.md b/specs/006-agent-workspace-tabs/tasks.md
index 705c9019..08b12d01 100644
--- a/specs/006-agent-workspace-tabs/tasks.md
+++ b/specs/006-agent-workspace-tabs/tasks.md
@@ -152,7 +152,7 @@ Two Nuxt consoles in a Bun workspace, each a set of auto-registered slice layers
 - [ ] T041 Walk [quickstart.md](./quickstart.md) steps 1–18 end to end and record the result of each. Steps 6 (chat survives a section round trip) and 10 (nothing lost with the table) are the two that most need a careful pass
 - [X] T042 [P] Confirm no leftover references to the deleted components or to the old tab column: grep for `AgentListProvider`, `AGENT_TABS`, `TabsContent` under `admin/slices/agent` and `app/slices/agent`
 - [X] T043 [P] Re-read the eight section components and confirm **none of them needed a layout change** — if one did, the navigator model was not implemented as designed and R2's premise is broken (SC-004)
-- [ ] T044 Post the implementation checkpoint on CLEAN-36 and open the PR into `main` with `CLEAN-36` in the title, then put the PR URL on the issue and move it to In Review (`CLAUDE.md` delivery cycle)
+- [X] T044 Post the implementation checkpoint on CLEAN-36 and open the PR into `main` with `CLEAN-36` in the title, then put the PR URL on the issue and move it to In Review (`CLAUDE.md` delivery cycle)
 
 ---
 

From ee74ca4c76b82300c7400a329ed12ba13132843a Mon Sep 17 00:00:00 2001
From: "Maksym Hryzodub [DREAM]" <maksym.hryzodub@dreamvention.com>
Date: Fri, 21 Aug 2026 17:17:28 +0300
Subject: [PATCH 3/5] feat(agent): move agent settings from a side panel to
 horizontal tabs (CLEAN-36)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The right-hand navigator is replaced by a tab bar under the agent header:
Chat, Overview, Knowledge, Files, Channels and Logs are always on screen with
their counts inline, and the remaining four fold into a More menu that
relabels itself when one of them is open.

It costs a row of height instead of a column of width. The navigator spent
320px permanently on navigation and squeezed the chat and logs into a
narrower column than they needed; nothing about the layout needs that trade.

Logs gains a full-width tab of its own while staying beside the conversation
on the Chat tab — the two are read differently. Only one is live at a time:
the chat passes `active` down so its side panel stops polling behind the
full-width view.

Lifecycle actions move back into the header as buttons (stop/start, restart,
edit). Delete sits one level down behind an overflow menu and a confirm — it
is the only irreversible action in that row.

`?tab=chat` is a valid value again and is the default, so it normalises out of
the URL; every other legacy value is unchanged. `?tab=logs` is new. The panel's
open/closed preference is gone with the panel — nothing left to remember.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../agent/agent/components/agent/chat/Tab.vue |  33 +-
 .../components/agent/settings/NavItem.vue     |  46 ---
 .../agent/components/agent/settings/Panel.vue | 216 -----------
 .../components/agent/settings/sections.ts     |  95 -----
 .../components/agent/workspace/Canvas.vue     | 171 +++++----
 .../agent/components/agent/workspace/Main.vue | 342 ++++++++++--------
 .../agent/components/agent/workspace/Tabs.vue | 101 ++++++
 .../components/agent/workspace/sections.ts    | 120 ++++++
 .../composables/useAgentSectionCounts.ts      |  44 +--
 .../agent/agent/composables/useAgentTab.ts    |  46 +++
 .../agent/composables/useSettingsPanel.ts     |  94 -----
 specs/006-agent-workspace-tabs/quickstart.md  |  62 ++--
 specs/006-agent-workspace-tabs/spec.md        | 207 +++++------
 13 files changed, 705 insertions(+), 872 deletions(-)
 delete mode 100644 admin/slices/agent/agent/components/agent/settings/NavItem.vue
 delete mode 100644 admin/slices/agent/agent/components/agent/settings/Panel.vue
 delete mode 100644 admin/slices/agent/agent/components/agent/settings/sections.ts
 create mode 100644 admin/slices/agent/agent/components/agent/workspace/Tabs.vue
 create mode 100644 admin/slices/agent/agent/components/agent/workspace/sections.ts
 create mode 100644 admin/slices/agent/agent/composables/useAgentTab.ts
 delete mode 100644 admin/slices/agent/agent/composables/useSettingsPanel.ts

diff --git a/admin/slices/agent/agent/components/agent/chat/Tab.vue b/admin/slices/agent/agent/components/agent/chat/Tab.vue
index f65b689d..a9cebc36 100644
--- a/admin/slices/agent/agent/components/agent/chat/Tab.vue
+++ b/admin/slices/agent/agent/components/agent/chat/Tab.vue
@@ -10,13 +10,20 @@ import {
   IconRefresh,
 } from '@tabler/icons-vue';
 
-const props = defineProps<{
-  agent: IAgentData;
-  apiUrl: string;
-  overlay: ChatOverlay;
-  restarting: boolean;
-  toggling: boolean;
-}>();
+const props = withDefaults(
+  defineProps<{
+    agent: IAgentData;
+    apiUrl: string;
+    overlay: ChatOverlay;
+    restarting: boolean;
+    toggling: boolean;
+    /** False while another tab is on screen. The chat itself stays mounted
+     *  (v-show) so its socket and transcript survive, but the side logs must
+     *  not keep polling behind a full-width Logs tab showing the same thing. */
+    active?: boolean;
+  }>(),
+  { active: true },
+);
 
 const emit = defineEmits<{ restart: []; toggleRunning: [] }>();
 
@@ -87,11 +94,11 @@ watch(
        Widths: `max-w-200` and the even 50/50 split are unchanged, so on a wide
        screen this pair looks exactly as it always did. What changed is the
        floor. `min-w-100` on both halves meant a hard 812px minimum, and the
-       workspace's rail and settings panel can take the container below that —
-       at which point the row simply overflowed and `overflow-x-clip` ate the
-       chat's right border. The floor is now gated on there being room for it;
-       below that both halves shrink, and the logs can still be collapsed with
-       their own button to give the chat everything back. -->
+       workspace's agent rail can take the container below that — at which
+       point the row simply overflowed and `overflow-x-clip` ate the chat's
+       right border. The floor is now gated on there being room for it; below
+       that both halves shrink, the logs can be collapsed with their own
+       button, and the Logs tab gives them the full width when needed. -->
   <div class="flex h-full min-h-0 min-w-0 items-stretch justify-center gap-3">
     <div
       v-if="authStore.accessToken"
@@ -163,7 +170,7 @@ watch(
     <div
       class="flex h-full min-h-0 w-full min-w-0 max-w-200 basis-1/2 flex-col gap-1"
     >
-      <div v-if="showSideLogs" class="min-h-0 flex-1 overflow-hidden">
+      <div v-if="showSideLogs && props.active" class="min-h-0 flex-1 overflow-hidden">
         <AgentLogsPanel
           :agent-id="agent.id"
           closable
diff --git a/admin/slices/agent/agent/components/agent/settings/NavItem.vue b/admin/slices/agent/agent/components/agent/settings/NavItem.vue
deleted file mode 100644
index d1f22064..00000000
--- a/admin/slices/agent/agent/components/agent/settings/NavItem.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { IconChevronRight } from '@tabler/icons-vue';
-import type { IAgentSettingsSection } from './sections';
-
-defineProps<{
-  section: IAgentSettingsSection;
-  /** null = unknown or still loading. Renders nothing — `0` is a real value
-   *  meaning "none attached" and must stay distinguishable from it. */
-  count: number | null;
-  /** This section is what the canvas is currently showing. */
-  current: boolean;
-}>();
-
-defineEmits<{ select: [] }>();
-</script>
-
-<template>
-  <!-- A row, not a container. Section content renders in the workspace canvas
-       at the width it already has; putting it in here would mean redesigning
-       Files, Environment and Paddock for a 320px column (see research R2). -->
-  <button
-    type="button"
-    class="flex w-full items-center gap-3 rounded-md px-2.5 py-2 text-left transition-colors hover:bg-muted"
-    :class="current && 'bg-muted'"
-    :aria-current="current ? 'true' : undefined"
-    @click="$emit('select')"
-  >
-    <span class="min-w-0 flex-1">
-      <span class="block truncate text-sm font-medium">
-        {{ section.title }}
-      </span>
-      <span class="mt-0.5 block truncate text-xs text-muted-foreground">
-        {{ section.desc }}
-      </span>
-    </span>
-
-    <span
-      v-if="count !== null"
-      class="shrink-0 text-xs tabular-nums text-muted-foreground"
-    >
-      {{ count }}
-    </span>
-
-    <IconChevronRight class="size-4 shrink-0 text-muted-foreground/50" />
-  </button>
-</template>
diff --git a/admin/slices/agent/agent/components/agent/settings/Panel.vue b/admin/slices/agent/agent/components/agent/settings/Panel.vue
deleted file mode 100644
index 6bdc925f..00000000
--- a/admin/slices/agent/agent/components/agent/settings/Panel.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<script setup lang="ts">
-import {
-  IconLoader2,
-  IconPlayerPlay,
-  IconPlayerStop,
-  IconRefresh,
-  IconShield,
-  IconTrash,
-  IconX,
-} from '@tabler/icons-vue';
-import type { IAgentData } from '#agent/domain';
-import { agentInitials } from '#agent/composables/useAgentRailEntries';
-import {
-  AGENT_SETTINGS_SECTIONS,
-  type AgentSettingsSection,
-  type SectionCounts,
-} from './sections';
-
-const props = defineProps<{
-  agent: IAgentData;
-  /** Which section the canvas is showing, so the list can mark it. */
-  section: AgentSettingsSection | null;
-  counts: SectionCounts;
-  canStop: boolean;
-  toggling: boolean;
-  isRestarting: boolean;
-  lifecycleError: string | null;
-}>();
-
-const emit = defineEmits<{
-  'update:section': [AgentSettingsSection | null];
-  restart: [];
-  toggleRunning: [];
-  close: [];
-  deleted: [];
-}>();
-
-const agentStore = useAgentStore();
-
-const initials = computed(() =>
-  agentInitials(props.agent.name, props.agent.id),
-);
-
-// The lifecycle actions the table's row menu used to carry. They live here
-// rather than in the rail because a rail entry identifies an agent and does
-// not act on one (FR-002, FR-009, FR-017).
-const confirmRemoveOpen = ref(false);
-const removing = ref(false);
-const removeError = ref<string | null>(null);
-
-async function onRemove() {
-  if (removing.value) return;
-  removing.value = true;
-  removeError.value = null;
-  try {
-    await agentStore.remove(props.agent.id);
-    emit('deleted');
-  } catch (err) {
-    removeError.value = (err as Error).message || 'Delete failed';
-  } finally {
-    removing.value = false;
-  }
-}
-
-function countFor(countKey: string | null): number | null {
-  if (!countKey) return null;
-  return props.counts[countKey as keyof SectionCounts] ?? null;
-}
-</script>
-
-<template>
-  <div class="flex h-full min-h-0 flex-col">
-    <div
-      class="flex shrink-0 items-center justify-between gap-2 border-b px-4 py-3"
-    >
-      <span class="text-sm font-medium">Agent settings</span>
-      <Button
-        variant="ghost"
-        size="sm"
-        class="-mr-2 size-7 p-0"
-        title="Hide settings"
-        @click="emit('close')"
-      >
-        <IconX class="size-4" />
-        <span class="sr-only">Hide settings</span>
-      </Button>
-    </div>
-
-    <!-- Identity: everything the table row said about an agent besides its
-         name, plus the failure reason when there is one. -->
-    <div class="flex shrink-0 items-start gap-3 border-b px-4 py-3">
-      <span
-        class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-linear-to-br from-primary/20 to-primary/5 text-sm font-semibold text-primary"
-      >
-        {{ initials }}
-      </span>
-      <div class="min-w-0 flex-1">
-        <div class="flex items-center gap-1.5">
-          <span class="truncate text-sm font-medium" :title="agent.name">
-            {{ agent.name }}
-          </span>
-          <IconShield
-            v-if="agent.isAdmin"
-            class="size-3.5 shrink-0 text-primary"
-            title="This agent has the ranch_* admin tools and a service token"
-          />
-        </div>
-        <p class="mt-0.5 truncate text-xs text-muted-foreground" :title="agent.id">
-          {{ agent.id }}
-        </p>
-        <p class="mt-1 text-xs text-muted-foreground">
-          <Badge
-            :variant="AGENT_STATUS_VARIANT[agent.status]"
-            class="capitalize"
-          >
-            {{ agent.status }}
-          </Badge>
-          <span class="ml-1.5">
-            {{ agent.resources.cpu }} / {{ agent.resources.memory }}
-          </span>
-        </p>
-        <p
-          v-if="agent.status === 'failed' && agent.statusReason"
-          class="mt-1 text-xs text-destructive"
-        >
-          {{ agent.statusReason }}
-        </p>
-      </div>
-    </div>
-
-    <!-- Navigator. Rows only — the section itself renders in the canvas. -->
-    <nav class="min-h-0 flex-1 overflow-y-auto p-2">
-      <ul class="flex flex-col gap-0.5">
-        <li v-for="s in AGENT_SETTINGS_SECTIONS" :key="s.value">
-          <AgentSettingsNavItem
-            :section="s"
-            :count="countFor(s.countKey)"
-            :current="section === s.value"
-            @select="emit('update:section', s.value)"
-          />
-        </li>
-      </ul>
-    </nav>
-
-    <div class="shrink-0 border-t p-3">
-      <p
-        v-if="lifecycleError || removeError"
-        class="mb-2 text-xs text-destructive"
-      >
-        {{ lifecycleError || removeError }}
-      </p>
-      <div class="flex items-center gap-2">
-        <Button
-          variant="outline"
-          size="sm"
-          class="flex-1"
-          :disabled="toggling || isRestarting"
-          :title="
-            canStop
-              ? 'Cancel the workflow and delete the pod to free cluster resources'
-              : 'Deploy a fresh pod'
-          "
-          @click="emit('toggleRunning')"
-        >
-          <IconLoader2 v-if="toggling" class="size-4 animate-spin" />
-          <IconPlayerStop v-else-if="canStop" class="size-4" />
-          <IconPlayerPlay v-else class="size-4" />
-          {{
-            toggling
-              ? canStop
-                ? 'Stopping…'
-                : 'Starting…'
-              : canStop
-                ? 'Stop'
-                : 'Start'
-          }}
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          class="flex-1"
-          :disabled="isRestarting || toggling"
-          @click="emit('restart')"
-        >
-          <IconLoader2 v-if="isRestarting" class="size-4 animate-spin" />
-          <IconRefresh v-else class="size-4" />
-          {{ isRestarting ? 'Restarting…' : 'Restart' }}
-        </Button>
-        <Button size="sm" class="flex-1" as-child>
-          <NuxtLink :to="`/agents/${agent.id}/edit`">Edit</NuxtLink>
-        </Button>
-        <Button
-          variant="ghost"
-          size="sm"
-          class="size-8 shrink-0 p-0 text-destructive hover:text-destructive"
-          title="Delete agent"
-          :disabled="removing"
-          @click="confirmRemoveOpen = true"
-        >
-          <IconLoader2 v-if="removing" class="size-4 animate-spin" />
-          <IconTrash v-else class="size-4" />
-          <span class="sr-only">Delete agent</span>
-        </Button>
-      </div>
-    </div>
-
-    <ConfirmDialog
-      v-model:open="confirmRemoveOpen"
-      title="Delete agent"
-      :description="`Permanently delete agent “${agent.name}”? This cannot be undone.`"
-      confirm-label="Delete agent"
-      :busy="removing"
-      @confirm="onRemove"
-    />
-  </div>
-</template>
diff --git a/admin/slices/agent/agent/components/agent/settings/sections.ts b/admin/slices/agent/agent/components/agent/settings/sections.ts
deleted file mode 100644
index 05fa4245..00000000
--- a/admin/slices/agent/agent/components/agent/settings/sections.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * The agent's settings sections. Formerly `item/tabs.ts` — the vertical tab
- * column is gone, the settings panel navigates these and the workspace canvas
- * renders them (see specs/006-agent-workspace-tabs, R2).
- *
- * The `value` strings are a URL contract: `?tab=<value>` deep links predate
- * this screen and must keep working, so these eight are byte-identical to the
- * old AGENT_TABS values. The old `chat` entry is gone — the conversation is
- * the canvas now, not a section.
- */
-
-/** Sections that can say how much they hold before you open them. */
-export type SectionCountKey = 'knowledge' | 'files' | 'secrets' | 'channels';
-
-/** `null` = not known yet, or the source failed. Distinct from `0`. */
-export type SectionCounts = Record<SectionCountKey, number | null>;
-
-export const AGENT_SETTINGS_SECTIONS = [
-  {
-    value: 'overview',
-    title: 'Overview',
-    desc: 'Usage, runtime, visibility & embed.',
-    countKey: null,
-  },
-  {
-    value: 'knowledge',
-    title: 'Knowledge',
-    desc: 'Knowledge bases the agent can query.',
-    countKey: 'knowledge',
-  },
-  {
-    value: 'files',
-    title: 'Files',
-    desc: 'Browse and edit S3-stored agent data.',
-    countKey: 'files',
-  },
-  {
-    value: 'secrets',
-    title: 'Secrets',
-    desc: 'User-scoped secrets the runtime stores.',
-    countKey: 'secrets',
-  },
-  {
-    value: 'env',
-    title: 'Environment',
-    desc: 'Env vars injected at deploy time.',
-    countKey: null,
-  },
-  {
-    value: 'channels',
-    title: 'Channels',
-    desc: 'Messaging platforms (Telegram, …) the agent talks on.',
-    countKey: 'channels',
-  },
-  {
-    value: 'chats',
-    title: 'Chats',
-    desc: 'Conversation history across channels.',
-    countKey: null,
-  },
-  {
-    value: 'paddock',
-    title: 'Paddock',
-    desc: 'Run evaluations & manage scenarios.',
-    countKey: null,
-  },
-] as const satisfies ReadonlyArray<{
-  value: string;
-  title: string;
-  desc: string;
-  countKey: SectionCountKey | null;
-}>;
-
-export type AgentSettingsSection =
-  (typeof AGENT_SETTINGS_SECTIONS)[number]['value'];
-
-export type IAgentSettingsSection = (typeof AGENT_SETTINGS_SECTIONS)[number];
-
-const SECTION_VALUES: readonly string[] = AGENT_SETTINGS_SECTIONS.map(
-  (s) => s.value,
-);
-
-/**
- * Normalise whatever arrived in `?tab=`. Legacy `chat` and anything
- * unrecognised become "no section" — the canvas shows the conversation and
- * the stale parameter is stripped rather than erroring.
- */
-export function toSettingsSection(
-  value: unknown,
-): AgentSettingsSection | null {
-  const v = Array.isArray(value) ? value[0] : value;
-  return typeof v === 'string' && SECTION_VALUES.includes(v)
-    ? (v as AgentSettingsSection)
-    : null;
-}
diff --git a/admin/slices/agent/agent/components/agent/workspace/Canvas.vue b/admin/slices/agent/agent/components/agent/workspace/Canvas.vue
index 8faef4e8..8bb03361 100644
--- a/admin/slices/agent/agent/components/agent/workspace/Canvas.vue
+++ b/admin/slices/agent/agent/components/agent/workspace/Canvas.vue
@@ -1,17 +1,12 @@
 <script setup lang="ts">
-import { IconChevronLeft } from '@tabler/icons-vue';
 import type { IAgentData } from '#agent/domain';
 import type { ChatOverlay } from '#agent/composables/useAgentLifecycle';
-import {
-  AGENT_SETTINGS_SECTIONS,
-  type AgentSettingsSection,
-} from '#agent/components/agent/settings/sections';
+import type { AgentTab } from './sections';
 
 const props = defineProps<{
   agent: IAgentData;
   apiUrl: string;
-  /** null = show the conversation. */
-  section: AgentSettingsSection | null;
+  tab: AgentTab;
   overlay: ChatOverlay;
   restarting: boolean;
   toggling: boolean;
@@ -20,106 +15,104 @@ const props = defineProps<{
 const emit = defineEmits<{
   restart: [];
   toggleRunning: [];
-  back: [];
   'agent-updated': [IAgentData];
 }>();
 
-const sectionMeta = computed(() =>
-  AGENT_SETTINGS_SECTIONS.find((s) => s.value === props.section) ?? null,
+const chatActive = computed(() => props.tab === 'chat');
+
+// One "restart is underway" signal for the full-width logs view, matching what
+// the chat tab derives for its own side panel.
+const restartUnderway = computed(
+  () => props.restarting || props.overlay?.kind === 'starting',
 );
 </script>
 
 <template>
   <div class="flex h-full min-h-0 flex-col">
-    <!-- Section mode. `v-if` here is deliberate and the opposite of the chat
-         branch below: sections should mount fresh and unmount when left,
-         which is the remount-on-activate refetch behaviour they had as
-         TabsContent. -->
-    <template v-if="section">
-      <div class="flex shrink-0 items-center gap-2 pb-3">
-        <Button variant="ghost" size="sm" class="-ml-2" @click="emit('back')">
-          <IconChevronLeft class="size-4" />
-          Chat
-        </Button>
-        <span class="text-muted-foreground/50">/</span>
-        <span class="text-sm font-medium">{{ sectionMeta?.title }}</span>
-      </div>
-
-      <div class="min-h-0 flex-1 overflow-y-auto">
-        <AgentOverviewTab
-          v-if="section === 'overview'"
-          :agent="agent"
-          :api-url="apiUrl"
-          @agent-updated="(updated: IAgentData) => emit('agent-updated', updated)"
-        />
-
-        <AgentKnowledgeTab
-          v-else-if="section === 'knowledge'"
-          :agent="agent"
-        />
-
-        <Card v-else-if="section === 'files'">
-          <CardHeader>
-            <CardTitle>Files</CardTitle>
-            <CardDescription>
-              Agent data stored in S3 (<code>agents/{{ agent.id }}/</code>).
-              <code>.md</code> and <code>.json</code> files can be edited;
-              changes apply on next agent restart.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <AgentFileProvider :id="agent.id" />
-          </CardContent>
-        </Card>
-
-        <Card v-else-if="section === 'secrets'">
-          <CardHeader>
-            <CardTitle>Secrets</CardTitle>
-            <CardDescription>
-              User-scoped secrets stored by the agent runtime. Source depends
-              on <code>SECRET_PROVIDER</code>:
-              <code>aws</code> reads from AWS Secrets Manager
-              (<code>aws_secret_prefix/&lt;agentId&gt;</code>);
-              <code>file</code> lists S3 under
-              <code>agents/{{ agent.id }}/data/secrets/</code>. Values are
-              masked — click the eye icon to reveal.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <AgentSecretProvider :id="agent.id" />
-          </CardContent>
-        </Card>
-
-        <AgentEnvTab v-else-if="section === 'env'" :agent-id="agent.id" />
+    <!-- Chat. `v-show`, NEVER `v-if`: unmounting drops the websocket, the
+         transcript, the scroll position and the restart overlay state, so
+         coming back from another tab would cost a reconnect and a refetch.
+         Hidden, the conversation keeps living behind whatever is open.
 
-        <AgentChannelProvider
-          v-else-if="section === 'channels'"
-          :agent-id="agent.id"
-        />
-
-        <ChatListProvider v-else-if="section === 'chats'" :agent-id="agent.id" />
-
-        <AgentPaddockTab
-          v-else-if="section === 'paddock'"
-          :agent-id="agent.id"
-        />
-      </div>
-    </template>
-
-    <!-- Chat mode. `v-show`, NEVER `v-if`: unmounting drops the websocket,
-         the transcript, the scroll position and the restart overlay state, so
-         returning from a section would cost a reconnect and a refetch
-         (SC-004a). Hidden, the chat keeps living behind the open section. -->
-    <div v-show="!section" class="min-h-0 flex-1">
+         `:active` lets the chat skip mounting its own side logs while it is
+         hidden — otherwise the Logs tab would have two log panels polling at
+         once, one of them invisible. -->
+    <div v-show="chatActive" class="min-h-0 flex-1">
       <AgentChatTab
         :agent="agent"
         :api-url="apiUrl"
         :overlay="overlay"
         :restarting="restarting"
         :toggling="toggling"
+        :active="chatActive"
         @restart="emit('restart')"
         @toggle-running="emit('toggleRunning')"
       />
     </div>
+
+    <!-- Everything else mounts fresh and unmounts when left — the
+         remount-on-activate refetch behaviour these components had as
+         `TabsContent`, preserved. -->
+    <div v-if="!chatActive" class="min-h-0 flex-1 overflow-y-auto">
+      <AgentOverviewTab
+        v-if="tab === 'overview'"
+        :agent="agent"
+        :api-url="apiUrl"
+        @agent-updated="(updated: IAgentData) => emit('agent-updated', updated)"
+      />
+
+      <AgentKnowledgeTab v-else-if="tab === 'knowledge'" :agent="agent" />
+
+      <Card v-else-if="tab === 'files'">
+        <CardHeader>
+          <CardTitle>Files</CardTitle>
+          <CardDescription>
+            Agent data stored in S3 (<code>agents/{{ agent.id }}/</code>).
+            <code>.md</code> and <code>.json</code> files can be edited;
+            changes apply on next agent restart.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <AgentFileProvider :id="agent.id" />
+        </CardContent>
+      </Card>
+
+      <AgentChannelProvider
+        v-else-if="tab === 'channels'"
+        :agent-id="agent.id"
+      />
+
+      <AgentLogsPanel
+        v-else-if="tab === 'logs'"
+        :agent-id="agent.id"
+        :restarting="restartUnderway"
+        :first-start="agent.launchContext === 'initial'"
+        class="h-full"
+      />
+
+      <Card v-else-if="tab === 'secrets'">
+        <CardHeader>
+          <CardTitle>Secrets</CardTitle>
+          <CardDescription>
+            User-scoped secrets stored by the agent runtime. Source depends on
+            <code>SECRET_PROVIDER</code>:
+            <code>aws</code> reads from AWS Secrets Manager
+            (<code>aws_secret_prefix/&lt;agentId&gt;</code>);
+            <code>file</code> lists S3 under
+            <code>agents/{{ agent.id }}/data/secrets/</code>. Values are
+            masked — click the eye icon to reveal.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <AgentSecretProvider :id="agent.id" />
+        </CardContent>
+      </Card>
+
+      <AgentEnvTab v-else-if="tab === 'env'" :agent-id="agent.id" />
+
+      <ChatListProvider v-else-if="tab === 'chats'" :agent-id="agent.id" />
+
+      <AgentPaddockTab v-else-if="tab === 'paddock'" :agent-id="agent.id" />
+    </div>
   </div>
 </template>
diff --git a/admin/slices/agent/agent/components/agent/workspace/Main.vue b/admin/slices/agent/agent/components/agent/workspace/Main.vue
index 2dec4b3a..fbeba0ae 100644
--- a/admin/slices/agent/agent/components/agent/workspace/Main.vue
+++ b/admin/slices/agent/agent/components/agent/workspace/Main.vue
@@ -1,15 +1,24 @@
 <script setup lang="ts">
 import {
   IconAlertTriangle,
+  IconDotsVertical,
+  IconLoader2,
+  IconPlayerPlay,
+  IconPlayerStop,
   IconRefresh,
-  IconSettings,
+  IconShield,
+  IconTrash,
   IconX,
 } from '@tabler/icons-vue';
-import { useMediaQuery } from '@vueuse/core';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '#theme/components/ui/dropdown-menu';
 import { agentInitials } from '#agent/composables/useAgentRailEntries';
 import { useAgentSectionCounts } from '#agent/composables/useAgentSectionCounts';
-import { useSettingsPanel } from '#agent/composables/useSettingsPanel';
-import type { AgentSettingsSection } from '#agent/components/agent/settings/sections';
+import { useAgentTab } from '#agent/composables/useAgentTab';
 
 const props = defineProps<{ id: string }>();
 
@@ -46,48 +55,17 @@ const {
   chatOverlay,
 } = useAgentLifecycle(props.id, agent, refresh);
 
-const { section, open: panelOpen, setSection, setOpen, close } =
-  useSettingsPanel();
-
-// ── Where the panel renders ──────────────────────────────────────────
-// One instance, three appearances — docking is pure CSS (see the classes on
-// the <aside> below), so crossing a breakpoint never remounts the panel or
-// duplicates its state.
-//
-// The one thing CSS cannot decide is whether it starts open: on a phone there
-// is no room to have it open beside anything, so it is on-demand there
-// regardless of the stored preference.
-const isNarrow = useMediaQuery('(max-width: 1023px)');
-const narrowPanelOpen = ref(false);
-
-const panelVisible = computed(() =>
-  isNarrow.value ? narrowPanelOpen.value : panelOpen.value,
-);
-
-// Counts stay cold until the navigator is actually visible.
-const { counts } = useAgentSectionCounts(props.id, agent, panelVisible);
+const { tab, setTab } = useAgentTab();
 
-function onManage() {
-  if (isNarrow.value) narrowPanelOpen.value = true;
-  else setOpen(true);
-}
-
-function onSelectSection(next: AgentSettingsSection | null) {
-  setSection(next);
-  // On a phone the panel covers the canvas it just navigated to.
-  if (isNarrow.value) narrowPanelOpen.value = false;
-}
+// The tab bar shows counts before you click, so unlike the old settings panel
+// there is nothing to gate them behind — they are on screen from first paint.
+const { counts } = useAgentSectionCounts(props.id, agent);
 
-function onClosePanel() {
-  if (isNarrow.value) narrowPanelOpen.value = false;
-  else close();
-}
-
-// The status badge in the panel renders from the DB row (not the SSE pod
-// stream). Re-fetch when the operator opens Overview so a stale 'failed' or
-// 'deploying' from initial load doesn't outlive the reconciled state.
-watch(section, (s) => {
-  if (s === 'overview') void refresh();
+// The status badge renders from the DB row (not the SSE pod stream). Re-fetch
+// when the operator opens Overview so a stale 'failed' or 'deploying' from
+// initial load doesn't outlive the reconciled state.
+watch(tab, (t) => {
+  if (t === 'overview') void refresh();
 });
 
 const initials = computed(() =>
@@ -95,133 +73,191 @@ const initials = computed(() =>
 );
 
 const lifecycleError = computed(() => restartError.value || toggleError.value);
+
+// Delete lives in the overflow menu rather than beside Edit: it is the one
+// action in this row you cannot undo, and it should not sit one mis-click
+// away from the one you reach for most.
+const confirmRemoveOpen = ref(false);
+const removing = ref(false);
+const removeError = ref<string | null>(null);
+
+async function onRemove() {
+  if (!agent.value || removing.value) return;
+  removing.value = true;
+  removeError.value = null;
+  try {
+    await agentStore.remove(agent.value.id);
+    emit('deleted');
+  } catch (err) {
+    removeError.value = (err as Error).message || 'Delete failed';
+  } finally {
+    removing.value = false;
+  }
+}
 </script>
 
 <template>
-  <div class="flex min-h-0 min-w-0 flex-1 gap-4">
-    <!-- Middle column: banner, compact identity, usage strip, canvas. -->
-    <div class="flex min-h-0 min-w-0 flex-1 flex-col gap-3">
-      <div
-        v-if="pendingRestart"
-        class="flex shrink-0 flex-wrap items-center gap-3 rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-900 dark:text-amber-200"
-      >
-        <IconAlertTriangle class="size-4 shrink-0" />
-        <p class="min-w-56 flex-1">
-          Agent settings were updated. Restart the agent to apply the changes.
-        </p>
-        <div class="flex items-center gap-2">
-          <Button size="sm" :disabled="isRestarting" @click="restart">
-            <IconRefresh class="size-4" :class="isRestarting && 'animate-spin'" />
-            {{ isRestarting ? 'Restarting…' : 'Restart agent' }}
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            :disabled="isRestarting"
-            @click="dismissRestartBanner"
-          >
-            <IconX class="size-4" />
-          </Button>
-        </div>
+  <div class="flex min-h-0 min-w-0 flex-1 flex-col gap-3">
+    <div
+      v-if="pendingRestart"
+      class="flex shrink-0 flex-wrap items-center gap-3 rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-900 dark:text-amber-200"
+    >
+      <IconAlertTriangle class="size-4 shrink-0" />
+      <p class="min-w-56 flex-1">
+        Agent settings were updated. Restart the agent to apply the changes.
+      </p>
+      <div class="flex items-center gap-2">
+        <Button size="sm" :disabled="isRestarting" @click="restart">
+          <IconRefresh class="size-4" :class="isRestarting && 'animate-spin'" />
+          {{ isRestarting ? 'Restarting…' : 'Restart agent' }}
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          :disabled="isRestarting"
+          @click="dismissRestartBanner"
+        >
+          <IconX class="size-4" />
+        </Button>
       </div>
+    </div>
 
-      <div v-if="pending && !agent" class="flex min-h-0 flex-1 flex-col gap-3">
-        <Skeleton class="h-8 w-full shrink-0" />
-        <Skeleton class="h-9 w-full shrink-0" />
-        <Skeleton class="min-h-0 w-full flex-1" />
-      </div>
+    <div v-if="pending && !agent" class="flex min-h-0 flex-1 flex-col gap-3">
+      <Skeleton class="h-9 w-full shrink-0" />
+      <Skeleton class="h-9 w-full shrink-0" />
+      <Skeleton class="min-h-0 w-full flex-1" />
+    </div>
 
-      <template v-else-if="agent">
-        <!-- Compact header. The lifecycle buttons that used to live here are
-             in the settings panel now (FR-009); what stays is identity and
-             the way back to it. -->
-        <div class="flex shrink-0 items-center gap-2.5">
-          <span
-            class="flex size-8 shrink-0 items-center justify-center rounded-lg bg-linear-to-br from-primary/20 to-primary/5 text-xs font-semibold text-primary"
-          >
-            {{ initials }}
-          </span>
-          <h1 class="truncate text-base font-semibold">{{ agent.name }}</h1>
-          <Badge
-            :variant="AGENT_STATUS_VARIANT[agent.status]"
-            class="shrink-0 capitalize"
+    <template v-else-if="agent">
+      <!-- Identity on the left, the agent's lifecycle on the right. -->
+      <div class="flex shrink-0 items-center gap-2.5">
+        <span
+          class="flex size-8 shrink-0 items-center justify-center rounded-lg bg-linear-to-br from-primary/20 to-primary/5 text-xs font-semibold text-primary"
+        >
+          {{ initials }}
+        </span>
+        <h1 class="truncate text-base font-semibold">{{ agent.name }}</h1>
+        <IconShield
+          v-if="agent.isAdmin"
+          class="size-4 shrink-0 text-primary"
+          title="This agent has the ranch_* admin tools and a service token"
+        />
+        <Badge
+          :variant="AGENT_STATUS_VARIANT[agent.status]"
+          class="shrink-0 capitalize"
+        >
+          {{ agent.status }}
+        </Badge>
+
+        <div class="flex-1" />
+
+        <div class="flex shrink-0 items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            :disabled="toggling || isRestarting"
+            :title="
+              canStop
+                ? 'Cancel the workflow and delete the pod to free cluster resources'
+                : 'Deploy a fresh pod'
+            "
+            @click="toggleRunning"
           >
-            {{ agent.status }}
-          </Badge>
-          <div class="flex-1" />
+            <IconLoader2 v-if="toggling" class="size-4 animate-spin" />
+            <IconPlayerStop v-else-if="canStop" class="size-4" />
+            <IconPlayerPlay v-else class="size-4" />
+            {{
+              toggling
+                ? canStop
+                  ? 'Stopping…'
+                  : 'Starting…'
+                : canStop
+                  ? 'Stop'
+                  : 'Start'
+            }}
+          </Button>
           <Button
-            v-if="!panelVisible"
             variant="outline"
             size="sm"
-            @click="onManage"
+            :disabled="isRestarting || toggling"
+            @click="restart"
           >
-            <IconSettings class="size-4" />
-            Manage agent
+            <IconLoader2 v-if="isRestarting" class="size-4 animate-spin" />
+            <IconRefresh v-else class="size-4" />
+            {{ isRestarting ? 'Restarting…' : 'Restart' }}
+          </Button>
+          <Button variant="outline" size="sm" as-child>
+            <NuxtLink :to="`/agents/${agent.id}/edit`">Edit</NuxtLink>
           </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger as-child>
+              <Button variant="ghost" size="sm" class="size-8 p-0">
+                <span class="sr-only">More agent actions</span>
+                <IconDotsVertical class="size-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                class="cursor-pointer text-destructive focus:text-destructive"
+                :disabled="removing"
+                @select="confirmRemoveOpen = true"
+              >
+                <IconTrash class="size-4" />
+                Delete agent
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </div>
+      </div>
 
-        <!-- Full-width usage strip under the header: visible in both canvas
-             modes; Details opens the Overview section. -->
-        <UsagePanel
-          :agent-id="agent.id"
-          agent-only
-          variant="strip"
-          class="shrink-0"
-          @details="onSelectSection('overview')"
-        />
+      <p
+        v-if="lifecycleError || removeError"
+        class="shrink-0 text-xs text-destructive"
+      >
+        {{ lifecycleError || removeError }}
+      </p>
 
-        <div class="min-h-0 flex-1">
-          <AgentWorkspaceCanvas
-            :agent="agent"
-            :api-url="apiUrl"
-            :section="section"
-            :overlay="chatOverlay"
-            :restarting="isRestarting"
-            :toggling="toggling"
-            @restart="restart"
-            @toggle-running="toggleRunning"
-            @back="onSelectSection(null)"
-            @agent-updated="(updated) => (agent = updated)"
-          />
-        </div>
-      </template>
+      <!-- Usage strip sits with the identity above it and the tabs below, so
+           the tab bar stays directly attached to the content it switches. -->
+      <UsagePanel
+        :agent-id="agent.id"
+        agent-only
+        variant="strip"
+        class="shrink-0"
+        @details="setTab('overview')"
+      />
 
-      <div
-        v-else
-        class="rounded-md border border-dashed p-10 text-center text-sm text-muted-foreground"
-      >
-        Agent not found.
+      <AgentWorkspaceTabs :active="tab" :counts="counts" @select="setTab" />
+
+      <div class="min-h-0 flex-1">
+        <AgentWorkspaceCanvas
+          :agent="agent"
+          :api-url="apiUrl"
+          :tab="tab"
+          :overlay="chatOverlay"
+          :restarting="isRestarting"
+          :toggling="toggling"
+          @restart="restart"
+          @toggle-running="toggleRunning"
+          @agent-updated="(updated) => (agent = updated)"
+        />
       </div>
-    </div>
 
-    <!-- The navigator. One element, two appearances, decided by CSS:
-         · ≥1024px — a real column in the flex row. It takes space rather than
-           floating over the canvas: floating looked tidy in the abstract, but
-           in practice it covered the pod logs and left the chat card clipped
-           at the right edge. The chat/logs pair shrinks to make room instead
-           (see chat/Tab.vue), which is the behaviour that keeps every border
-           where the eye expects it.
-         · <1024px — the whole screen, because there is no room beside it.
-         Width and placement are the host's business; the panel itself does
-         not know where it lives. -->
-    <aside
-      v-if="agent && panelVisible"
-      class="w-80 shrink-0 overflow-hidden rounded-lg border bg-card max-lg:fixed max-lg:inset-0 max-lg:z-40 max-lg:w-full max-lg:rounded-none"
-    >
-      <AgentSettingsPanel
-        :agent="agent"
-        :section="section"
-        :counts="counts"
-        :can-stop="canStop"
-        :toggling="toggling"
-        :is-restarting="isRestarting"
-        :lifecycle-error="lifecycleError"
-        @update:section="onSelectSection"
-        @restart="restart"
-        @toggle-running="toggleRunning"
-        @close="onClosePanel"
-        @deleted="emit('deleted')"
+      <ConfirmDialog
+        v-model:open="confirmRemoveOpen"
+        title="Delete agent"
+        :description="`Permanently delete agent “${agent.name}”? This cannot be undone.`"
+        confirm-label="Delete agent"
+        :busy="removing"
+        @confirm="onRemove"
       />
-    </aside>
+    </template>
+
+    <div
+      v-else
+      class="rounded-md border border-dashed p-10 text-center text-sm text-muted-foreground"
+    >
+      Agent not found.
+    </div>
   </div>
 </template>
diff --git a/admin/slices/agent/agent/components/agent/workspace/Tabs.vue b/admin/slices/agent/agent/components/agent/workspace/Tabs.vue
new file mode 100644
index 00000000..fec35a09
--- /dev/null
+++ b/admin/slices/agent/agent/components/agent/workspace/Tabs.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { IconChevronDown } from '@tabler/icons-vue';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '#theme/components/ui/dropdown-menu';
+import {
+  OVERFLOW_TABS,
+  PRIMARY_TABS,
+  type AgentTab,
+  type SectionCounts,
+} from './sections';
+
+const props = defineProps<{
+  active: AgentTab;
+  counts: SectionCounts;
+}>();
+
+defineEmits<{ select: [tab: AgentTab] }>();
+
+function countFor(countKey: string | null): number | null {
+  if (!countKey) return null;
+  return props.counts[countKey as keyof SectionCounts] ?? null;
+}
+
+// The overflow menu highlights itself when what it holds is what is open —
+// otherwise the operator loses track of where they are the moment they pick
+// something from it.
+const overflowActive = computed(() =>
+  OVERFLOW_TABS.some((t) => t.value === props.active),
+);
+
+const activeOverflowTitle = computed(
+  () => OVERFLOW_TABS.find((t) => t.value === props.active)?.title ?? null,
+);
+</script>
+
+<template>
+  <div class="flex shrink-0 items-center gap-1 border-b" role="tablist">
+    <button
+      v-for="t in PRIMARY_TABS"
+      :key="t.value"
+      type="button"
+      role="tab"
+      :aria-selected="active === t.value"
+      :title="t.desc"
+      class="-mb-px flex items-center gap-1.5 border-b-2 px-3 py-2 text-sm transition-colors"
+      :class="
+        active === t.value
+          ? 'border-primary font-medium text-foreground'
+          : 'border-transparent text-muted-foreground hover:text-foreground'
+      "
+      @click="$emit('select', t.value)"
+    >
+      {{ t.title }}
+      <!-- `null` renders nothing at all; `0` renders as 0, because "none
+           attached" is real information and must not read as "unknown". -->
+      <span
+        v-if="countFor(t.countKey) !== null"
+        class="rounded bg-muted px-1 text-xs tabular-nums text-muted-foreground"
+      >
+        {{ countFor(t.countKey) }}
+      </span>
+    </button>
+
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <button
+          type="button"
+          class="-mb-px flex items-center gap-1 border-b-2 px-3 py-2 text-sm transition-colors"
+          :class="
+            overflowActive
+              ? 'border-primary font-medium text-foreground'
+              : 'border-transparent text-muted-foreground hover:text-foreground'
+          "
+        >
+          {{ activeOverflowTitle ?? 'More' }}
+          <IconChevronDown class="size-3.5" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" class="min-w-48">
+        <DropdownMenuItem
+          v-for="t in OVERFLOW_TABS"
+          :key="t.value"
+          class="cursor-pointer"
+          @select="$emit('select', t.value)"
+        >
+          <span class="flex-1">{{ t.title }}</span>
+          <span
+            v-if="countFor(t.countKey) !== null"
+            class="text-xs tabular-nums text-muted-foreground"
+          >
+            {{ countFor(t.countKey) }}
+          </span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/admin/slices/agent/agent/components/agent/workspace/sections.ts b/admin/slices/agent/agent/components/agent/workspace/sections.ts
new file mode 100644
index 00000000..6be98314
--- /dev/null
+++ b/admin/slices/agent/agent/components/agent/workspace/sections.ts
@@ -0,0 +1,120 @@
+/**
+ * The agent workspace's tabs. Formerly `item/tabs.ts`, then briefly a
+ * right-hand settings navigator, now a horizontal tab bar under the agent
+ * header (specs/006-agent-workspace-tabs, R2).
+ *
+ * The `value` strings are a URL contract: `?tab=<value>` deep links predate
+ * this screen, so the original nine are byte-identical — including `chat`,
+ * which is the default tab again. `logs` is the one new value.
+ */
+
+/** Tabs that can say how much they hold before you open them. */
+export type SectionCountKey = 'knowledge' | 'files' | 'secrets' | 'channels';
+
+/** `null` = not known yet, or the source failed. Distinct from `0`. */
+export type SectionCounts = Record<SectionCountKey, number | null>;
+
+export const AGENT_TABS = [
+  {
+    value: 'chat',
+    title: 'Chat',
+    desc: 'Talk to the agent.',
+    countKey: null,
+    primary: true,
+  },
+  {
+    value: 'overview',
+    title: 'Overview',
+    desc: 'Usage, runtime, visibility & embed.',
+    countKey: null,
+    primary: true,
+  },
+  {
+    value: 'knowledge',
+    title: 'Knowledge',
+    desc: 'Knowledge bases the agent can query.',
+    countKey: 'knowledge',
+    primary: true,
+  },
+  {
+    value: 'files',
+    title: 'Files',
+    desc: 'Browse and edit S3-stored agent data.',
+    countKey: 'files',
+    primary: true,
+  },
+  {
+    value: 'channels',
+    title: 'Channels',
+    desc: 'Messaging platforms (Telegram, …) the agent talks on.',
+    countKey: 'channels',
+    primary: true,
+  },
+  {
+    value: 'logs',
+    title: 'Logs',
+    desc: 'Pod logs, full width.',
+    countKey: null,
+    primary: true,
+  },
+  // Everything below folds into the "More" menu. The split is the reference's
+  // own: the six above are what an operator reaches for; these four are
+  // deliberate visits.
+  {
+    value: 'secrets',
+    title: 'Secrets',
+    desc: 'User-scoped secrets the runtime stores.',
+    countKey: 'secrets',
+    primary: false,
+  },
+  {
+    value: 'env',
+    title: 'Environment',
+    desc: 'Env vars injected at deploy time.',
+    countKey: null,
+    primary: false,
+  },
+  {
+    value: 'chats',
+    title: 'Chats',
+    desc: 'Conversation history across channels.',
+    countKey: null,
+    primary: false,
+  },
+  {
+    value: 'paddock',
+    title: 'Paddock',
+    desc: 'Run evaluations & manage scenarios.',
+    countKey: null,
+    primary: false,
+  },
+] as const satisfies ReadonlyArray<{
+  value: string;
+  title: string;
+  desc: string;
+  countKey: SectionCountKey | null;
+  primary: boolean;
+}>;
+
+export type AgentTab = (typeof AGENT_TABS)[number]['value'];
+export type IAgentTab = (typeof AGENT_TABS)[number];
+
+/** The tab the workspace opens on, and the one that carries no query param. */
+export const DEFAULT_TAB: AgentTab = 'chat';
+
+export const PRIMARY_TABS = AGENT_TABS.filter((t) => t.primary);
+export const OVERFLOW_TABS = AGENT_TABS.filter((t) => !t.primary);
+
+const TAB_VALUES: readonly string[] = AGENT_TABS.map((t) => t.value);
+
+/**
+ * Normalise whatever arrived in `?tab=`. Anything unrecognised falls back to
+ * the default rather than erroring — a stale link should land somewhere
+ * sensible, not on a broken screen.
+ */
+export function toAgentTab(value: unknown): AgentTab {
+  const v = Array.isArray(value) ? value[0] : value;
+  return typeof v === 'string' && TAB_VALUES.includes(v)
+    ? (v as AgentTab)
+    : DEFAULT_TAB;
+}
diff --git a/admin/slices/agent/agent/composables/useAgentSectionCounts.ts b/admin/slices/agent/agent/composables/useAgentSectionCounts.ts
index f952e3b6..24df0d33 100644
--- a/admin/slices/agent/agent/composables/useAgentSectionCounts.ts
+++ b/admin/slices/agent/agent/composables/useAgentSectionCounts.ts
@@ -1,30 +1,20 @@
 import type { Ref } from 'vue';
 import type { IAgentData } from '#agent/domain';
-import type { SectionCounts } from '#agent/components/agent/settings/sections';
-
-const EMPTY: SectionCounts = {
-  knowledge: null,
-  files: null,
-  secrets: null,
-  channels: null,
-};
+import type { SectionCounts } from '#agent/components/agent/workspace/sections';
 
 /**
- * How much each countable section holds, shown beside its name in the
- * settings navigator — the number is the reason to click, so it has to be
- * there before the click.
+ * How much each countable tab holds, shown beside its name in the tab bar —
+ * the number is the reason to click, so it has to be there before the click.
  *
  * Three rules this owes the UI:
  *
- * 1. **Nothing fetches until `enabled`** — an operator who keeps the panel
- *    collapsed should not pay for counts they never see. That is also why the
- *    knowledge count is assembled by hand here instead of riding
- *    `useAgentKnowledges`: that composable fires its `useAsyncData` calls the
- *    moment it is called, which would defeat the gate.
- * 2. **Each source fails independently.** One unreachable bucket must not
+ * 1. **Each source fails independently.** One unreachable bucket must not
  *    blank the other three.
- * 3. **`null` is not `0`.** Unknown renders as nothing at all; zero renders
+ * 2. **`null` is not `0`.** Unknown renders as nothing at all; zero renders
  *    as zero, because "no secrets attached" is real information.
+ * 3. **The knowledge count is assembled by hand** rather than riding
+ *    `useAgentKnowledges`, so that an agent whose knowledge is a per-agent
+ *    override costs no template fetch at all.
  *
  * There is no aggregate endpoint and this deliberately does not add one — the
  * requests are the same ones the sections themselves make, and `useAsyncData`
@@ -34,7 +24,6 @@ const EMPTY: SectionCounts = {
 export function useAgentSectionCounts(
   agentId: string,
   agent: Ref<IAgentData | null | undefined>,
-  enabled: Ref<boolean>,
 ) {
   const templateStore = useTemplateStore();
   const fileStore = useAgentFileStore();
@@ -51,7 +40,7 @@ export function useAgentSectionCounts(
   let started = false;
 
   async function load() {
-    if (started || !enabled.value) return;
+    if (started) return;
     started = true;
 
     await Promise.allSettled([
@@ -98,25 +87,18 @@ export function useAgentSectionCounts(
     }
   }
 
-  watch(
-    enabled,
-    (on) => {
-      if (on) void load();
-    },
-    { immediate: true },
-  );
+  onMounted(() => void load());
 
-  // The agent record arrives after the panel may already have opened, so the
-  // template lookup can only run once we know which template to look up.
+  // The agent record arrives after the first paint, so the template lookup can
+  // only run once we know which template to look up.
   watch(
     () => agent.value?.templateId,
     () => {
-      if (enabled.value && started) void loadTemplateKnowledge();
+      if (started) void loadTemplateKnowledge();
     },
   );
 
   const counts = computed<SectionCounts>(() => {
-    if (!enabled.value) return EMPTY;
     const overrides = agent.value?.knowledgeIds.length ?? 0;
     return {
       // An override on the agent wins; otherwise the count is whatever the
diff --git a/admin/slices/agent/agent/composables/useAgentTab.ts b/admin/slices/agent/agent/composables/useAgentTab.ts
new file mode 100644
index 00000000..04c0c8d4
--- /dev/null
+++ b/admin/slices/agent/agent/composables/useAgentTab.ts
@@ -0,0 +1,46 @@
+import {
+  DEFAULT_TAB,
+  toAgentTab,
+  type AgentTab,
+} from '#agent/components/agent/workspace/sections';
+
+/**
+ * Which tab the workspace is showing. It lives in `?tab=` and nowhere else:
+ * addressable state belongs in the URL so it can be linked and shared, and
+ * this is the same parameter the nine-tab column used, so every old deep link
+ * still lands where it did.
+ *
+ * The default tab carries no parameter. `?tab=chat` therefore normalises
+ * itself away — it stays valid for old links, it just does not linger in the
+ * address bar afterwards.
+ */
+export function useAgentTab() {
+  const route = useRoute();
+  const router = useRouter();
+
+  const tab = computed<AgentTab>(() => toAgentTab(route.query.tab));
+
+  function setTab(next: AgentTab): void {
+    if (next === tab.value) return;
+    // `replace`, not `push`: switching tabs within one agent should not fill
+    // the history stack. Switching *agents* is a push — that is real
+    // navigation the operator expects Back to undo.
+    void router.replace({
+      query: {
+        ...route.query,
+        tab: next === DEFAULT_TAB ? undefined : next,
+      },
+    });
+  }
+
+  // Strip a stale or defaulted parameter so the URL says what the screen is
+  // actually showing.
+  onMounted(() => {
+    const raw = route.query.tab;
+    if (raw !== undefined && toAgentTab(raw) === DEFAULT_TAB) {
+      void router.replace({ query: { ...route.query, tab: undefined } });
+    }
+  });
+
+  return { tab, setTab };
+}
diff --git a/admin/slices/agent/agent/composables/useSettingsPanel.ts b/admin/slices/agent/agent/composables/useSettingsPanel.ts
deleted file mode 100644
index e3ccacc6..00000000
--- a/admin/slices/agent/agent/composables/useSettingsPanel.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import {
-  toSettingsSection,
-  type AgentSettingsSection,
-} from '#agent/components/agent/settings/sections';
-
-const PANEL_OPEN_KEY = 'agent:settingsPanelOpen';
-
-// Absent means OPEN. Encoding the default as *absence* rather than writing
-// '1' on first visit keeps a fresh browser, a cleared storage and a
-// never-touched toggle behaving identically — and moves the default to one
-// line if it ever changes.
-function readStoredOpen(): boolean {
-  if (typeof window === 'undefined') return true;
-  try {
-    const raw = window.localStorage.getItem(PANEL_OPEN_KEY);
-    return raw === null ? true : raw === '1';
-  } catch {
-    // Private-mode Safari throws on access. Fall back to the default.
-    return true;
-  }
-}
-
-function writeStoredOpen(open: boolean): void {
-  if (typeof window === 'undefined') return;
-  try {
-    window.localStorage.setItem(PANEL_OPEN_KEY, open ? '1' : '0');
-  } catch {
-    // Quota or private mode — the preference is a convenience, not state we
-    // are allowed to fail over.
-  }
-}
-
-/**
- * Two pieces of state that look like one and are deliberately not:
- *
- * - **which section the canvas shows** is addressable — it lives in `?tab=`,
- *   so it can be linked and shared;
- * - **whether the navigator is open** is a habit — it lives in localStorage,
- *   so it does not travel in someone else's link.
- *
- * A section being open forces the panel visible (FR-018: the operator must be
- * able to reach another section or the conversation), and that force does
- * *not* write the preference — following a `?tab=env` link must not
- * permanently reopen the panel for someone who keeps it collapsed.
- */
-export function useSettingsPanel() {
-  const route = useRoute();
-  const router = useRouter();
-
-  const section = computed<AgentSettingsSection | null>(() =>
-    toSettingsSection(route.query.tab),
-  );
-
-  const storedOpen = ref(readStoredOpen());
-  const open = computed(() => section.value !== null || storedOpen.value);
-
-  function setSection(next: AgentSettingsSection | null): void {
-    if (next === section.value) return;
-    void router.replace({
-      query: { ...route.query, tab: next ?? undefined },
-    });
-  }
-
-  function setOpen(next: boolean): void {
-    storedOpen.value = next;
-    writeStoredOpen(next);
-  }
-
-  /**
-   * Collapsing the navigator while a section is on the canvas would strand
-   * the operator inside that section with no way back except the browser —
-   * so closing also returns to the conversation.
-   */
-  function close(): void {
-    if (section.value !== null) setSection(null);
-    setOpen(false);
-  }
-
-  function toggle(): void {
-    if (open.value) close();
-    else setOpen(true);
-  }
-
-  // A stale `?tab=chat` (or anything unrecognised) resolves to "no section";
-  // strip it so the URL says what the screen is actually showing.
-  onMounted(() => {
-    const raw = route.query.tab;
-    if (raw !== undefined && toSettingsSection(raw) === null) {
-      void router.replace({ query: { ...route.query, tab: undefined } });
-    }
-  });
-
-  return { section, open, setSection, setOpen, close, toggle };
-}
diff --git a/specs/006-agent-workspace-tabs/quickstart.md b/specs/006-agent-workspace-tabs/quickstart.md
index a02cba46..2bb99ee0 100644
--- a/specs/006-agent-workspace-tabs/quickstart.md
+++ b/specs/006-agent-workspace-tabs/quickstart.md
@@ -46,13 +46,14 @@ Open `http://localhost:3002/agents`.
 - Press Back: you leave the agents area entirely; you do **not** bounce through `/agents`
   (that is `replace: true` doing its job).
 
-### 2. The panel is open, and the agent's controls are in it — FR-013, FR-017
+### 2. Tabs on top, controls in the header — FR-013, FR-017
 
-- The settings panel is **already open** on this first visit.
-- `Stop`/`Start`, `Restart`, `Edit` and `Delete` are all in it. Confirm each does what it did
-  from the old page header / table row.
-- Collapse it, reload the page: still collapsed. Reopen, reload: open. (FR-013 persistence,
-  US3 scenario 3.)
+- The workspace opens on **Chat**. The tab bar under the agent header reads
+  `Chat · Overview · Knowledge N · Files N · Channels N · Logs · More ▾`.
+- `Stop`/`Start`, `Restart` and `Edit` are buttons in the header; `Delete` is under the `⋯`
+  menu behind a confirm. Confirm each does what it did from the old page header / table row.
+- Open `More` and pick `Environment`: the control relabels itself `Environment` and marks
+  itself active, so you can still tell where you are.
 
 ### 3. The rail carries status and date, and nothing else — FR-002
 
@@ -88,29 +89,27 @@ Then collapse the admin sidebar to icons: the workspace should re-fit its height
 a gap or overflow. It measures the space rather than assuming a fixed chrome height, so a
 change to the layout's padding does not break it either.
 
-### 6. Sections open in the middle, chat survives — FR-012, FR-014, SC-004a
+### 6. Tabs switch the middle, chat survives — FR-012, FR-014, FR-018, SC-004a
 
-Click **Files** in the panel.
+Click **Files** in the tab bar.
 
-- The file tree and the editor render **in the middle of the screen**, at roughly the width
-  they have on `main` today — not squeezed into the panel.
-- The panel is still there, with Files marked as current. Click **Environment**: one click,
-  no detour through the conversation.
-- Click **‹ Chat**: the conversation returns with **the same transcript, the same scroll
-  position, and no reconnect**. Check the Network panel — no new websocket, no transcript
-  refetch. If any of that happens, the chat is being `v-if`'d instead of `v-show`'d
-  (plan Risk 1a).
-- Switch to another agent while a section is open: the same section opens for that agent.
+- The file tree and the editor render at the full width of the middle column, as on `main`.
+- Click **Logs**: the pod logs fill the width. Now open DevTools → Network and confirm the
+  Chat tab's **side** log panel has stopped polling — only one log stream should be live.
+- Click **Chat**: the conversation returns with **the same transcript, the same scroll
+  position, and no reconnect**. No new websocket, no transcript refetch. If any of that
+  happens, the chat is being `v-if`'d instead of `v-show`'d (plan Risk 1a).
+- On the Chat tab the logs are still beside the conversation with their collapse button.
+- Switch to another agent while a tab is open: the same tab opens for that agent.
 
-### 7. Section counts — FR-015, US3
+### 7. Tab counts — FR-015, US3
 
-Open the panel on an agent with attachments:
+On an agent with attachments:
 
-- Knowledge, Files, Secrets and Channels show numbers that match what each section lists when
-  you open it.
+- Knowledge, Files and Channels carry numbers in the tab bar that match what each tab lists
+  when opened; Secrets carries its number inside the `More` menu.
 - An agent with **zero** of something shows `0` — not a blank. A count that has not loaded or
-  failed shows **nothing at all**, and the section still opens normally.
-- Counts do not fetch while the panel is collapsed (watch the Network panel).
+  failed shows **nothing at all**, and the tab still opens normally.
 
 ### 8. All eight sections still work — FR-012, SC-004
 
@@ -123,17 +122,16 @@ a section needed restyling to fit, the navigator model was not implemented as de
 
 | Try | Expect |
 |-----|--------|
-| `/agents/<id>?tab=env` | Canvas shows Environment, panel marks it current |
-| `/agents/<id>?tab=paddock` | Canvas shows Paddock |
-| `/agents/<id>?tab=chat` | Canvas shows the conversation, `tab` stripped from the URL |
+| `/agents/<id>?tab=env` | Environment tab open, `More` marks itself current |
+| `/agents/<id>?tab=paddock` | Paddock tab open |
+| `/agents/<id>?tab=logs` | Full-width logs |
+| `/agents/<id>?tab=chat` | Conversation, and `tab` stripped from the URL — it is the default |
 | `/agents/<id>?tab=nonsense` | Same as `chat` |
-| `‹ Chat` from any of these | `tab` disappears from the URL |
-| Closing the *panel* while a section is open | Returns to the conversation and clears `tab` — the navigator cannot hide while a section is on the canvas (FR-018) |
-| Usage strip → `Details` | Canvas shows Overview |
+| Clicking `Chat` from any of these | `tab` disappears from the URL |
+| Usage strip → `Details` | Overview tab |
 
-Follow `?tab=env` with the panel preference set to *collapsed*: it opens anyway, and after you
-navigate away the preference is still *collapsed* (it was not overwritten —
-[contracts/preferences.md](./contracts/preferences.md)).
+Tab switching uses `replace`, so Back should leave the agent rather than walking the tabs you
+opened.
 
 ### 10. Nothing was lost with the table — FR-009, plan Risk 2
 
diff --git a/specs/006-agent-workspace-tabs/spec.md b/specs/006-agent-workspace-tabs/spec.md
index 10f03084..e536418c 100644
--- a/specs/006-agent-workspace-tabs/spec.md
+++ b/specs/006-agent-workspace-tabs/spec.md
@@ -1,4 +1,4 @@
-# Feature Specification: Agent workspace — vertical agent tabs + settings panel
+# Feature Specification: Agent workspace — agent rail plus horizontal settings tabs
 
 **Feature Branch**: `feat/CLEAN-36-agent-workspace-tabs`
 
@@ -8,7 +8,7 @@
 
 **Tracker**: [CLEAN-36](https://dreamvention.atlassian.net/browse/CLEAN-36)
 
-**Visual reference**: `export-1a/Agent Interface 1a.dc.html` — left rail of agents, conversation in the middle, settings in a right-hand panel. Deliberately untracked and temporary: it is dropped once the implementation lands, so treat the description in this spec as the durable record of it.
+**Visual reference**: `export-1a/Agent Interface 1a.dc.html` plus a later screenshot of the tab bar — left rail of agents, conversation in the middle, agent settings as horizontal tabs above it. Deliberately untracked and temporary: it is dropped once the implementation lands, so treat the description in this spec as the durable record of it.
 
 **Input**: User description: "Необходимо обыграть реализацию для admin/app приложений. В app набор агентов — это скучные плашки сейчас, должен быть список табов вертикальных. То же самое и в admin, только все настройки агента перетекают в правый бар с возможностью быть свернутыми; в настройках чуть больше деталей, например количество знаний, файлов и т.д. Важно, чтобы основные пункты навигации в админке не были удалены — референс может запутать: мы работаем лишь с интерфейсом агентов. Отказываясь от agents-таблицы, мы сразу будем падать в главного агента (rancher) с возможностью переключиться на других по табам; в табах можно вывести лёгкую информацию как сейчас в таблице — статус, дату создания, не перегружая."
 
@@ -20,18 +20,23 @@ it is a grid of cards. Once inside an agent, `admin` spends a whole vertical col
 nine settings tabs — a column that exists only to reach configuration the operator opens
 rarely, sitting permanently next to the thing they came for.
 
-This feature turns the agent screen into a workspace of three parts: a vertical list of
-agents on the left that doubles as navigation between them; a middle column that shows
-the conversation with the pod logs beside it exactly as they are today; and (in `admin`
-only) a right-hand panel that navigates the agent's settings and holds its controls. The
-agents table and the agent cards grid stop being a stop on the way and are retired.
+This feature turns the agent screen into a workspace: a vertical list of agents on the
+left that doubles as navigation between them, and a middle column that shows the
+conversation with the pod logs beside it exactly as they are today. In `admin` the agent's
+settings sit in a horizontal tab bar above that column, with the lifecycle controls in the
+header beside the agent's name. The agents table and the agent cards grid stop being a stop
+on the way and are retired.
 
-**The right-hand panel navigates; it does not contain.** It lists the eight sections with
-their counts and carries the agent's identity and lifecycle controls, and it stays narrow.
-Opening a section shows that section in the middle column, in place of the conversation,
-at the width that section already renders at today — which is why none of the eight
-existing section components has to be redesigned. The conversation is not torn down when
-that happens: it stays alive behind the section and returns with one click.
+**The sections are a horizontal tab bar under the agent header.** Chat, Overview,
+Knowledge, Files, Channels and Logs are always on screen, with their counts inline; the
+remaining four fold into a **More** menu. The tab bar sits directly above the content it
+switches, and each tab renders at the full width of the middle column — which is why none
+of the existing section components has to be redesigned. The conversation is not torn down
+when another tab is open: it stays alive behind it and returns with one click.
+
+*(This replaced a right-hand navigator panel, which in turn replaced an accordion. The
+panel worked, but it spent 320px permanently on navigation and pushed the chat and logs
+into a narrower column than they needed. A tab bar costs one row of height instead.)*
 
 **The conversation is not stretched.** The chat widget keeps its current sizing and keeps
 the logs panel next to it — a chat column that runs the full width of a wide monitor is
@@ -53,44 +58,42 @@ manage is listed vertically on the left with just enough to tell them apart —
 status, when it was created, an admin marker. Clicking another entry swaps the
 conversation without leaving the screen. Everything that used to live in the nine
 vertical tabs — Overview, Knowledge, Files, Secrets, Environment, Channels, Chats,
-Paddock — is now reached from a panel on the right, which the operator can collapse when
-they just want to talk. That panel is a **navigator**: it lists the sections with their
-counts and the agent's controls, and opening a section shows it in the middle of the
-screen, where the conversation was, at the width that section has always had. The
-conversation is not destroyed by that — it comes back with one click, transcript intact.
+Paddock — is now a **horizontal tab bar** under the agent header, with counts inline and
+the four least-used folded into a `More` menu. A tab opens in the middle of the screen,
+where the conversation was, at the width it has always had. The conversation is not
+destroyed by that — it comes back with one click, transcript intact.
 
 **Why this priority**: This is the whole point of the ticket — the operator's default
 intent (talk to an agent) becomes the default state of the screen, and the two competing
-navigation columns collapse into one rail plus one panel.
+navigation columns collapse into one rail plus one horizontal tab bar.
 
 **Independent Test**: Open `/agents` as an admin with at least two agents, one of them
 the admin agent. Verify the conversation opens immediately, the left rail lists both
 agents, switching between them changes the conversation, and each of the eight settings
-sections is reachable from the right panel and behaves as it did before.
+sections is reachable from the tab bar and behaves as it did before.
 
 **Acceptance Scenarios**:
 
 1. **Given** an admin console with a Ranch admin agent, **When** the operator opens the
    Agents area for the first time, **Then** the workspace opens on that agent's
-   conversation with no table in between, and the settings panel is already open so the
-   agent's controls are one glance away rather than one click.
+   conversation with no table in between, on the Chat tab, with the agent's controls
+   visible in the header rather than a click away.
 2. **Given** the workspace is open on agent A, **When** the operator clicks agent B in
-   the left rail, **Then** the conversation, header, usage strip and settings panel all
-   switch to agent B and the address bar points at agent B.
-3. **Given** the workspace is open, **When** the operator collapses the settings panel,
-   **Then** the space goes back to the conversation-and-logs pair within their existing
-   size limits, and the panel can be reopened from the header.
-4. **Given** no section is open, **When** the operator looks at the middle column, **Then**
+   the left rail, **Then** the conversation, header, usage strip and open tab all switch
+   to agent B and the address bar points at agent B.
+3. **Given** the workspace is open, **When** the operator looks at the header, **Then**
+   Stop/Start, Restart and Edit are there as buttons, and Delete is one level down behind
+   the overflow menu and a confirmation.
+4. **Given** the Chat tab is open, **When** the operator looks at the middle column, **Then**
    the chat and the pod logs sit side by side with every border drawn and nothing clipped —
    at the sizes they have today when the viewport allows it, and shrunk together rather
    than overflowing when it does not.
-5. **Given** the operator opens a section from the panel, **When** the section renders,
-   **Then** it takes the middle column at the width that column already has, the panel
-   marks that section as the open one, and a single control returns to the conversation
-   with its transcript and connection intact.
-6. **Given** an operator follows an old link carrying a settings-section parameter (e.g.
-   `?tab=env`), **Then** the workspace opens with the settings panel already showing that
-   section; closing the panel removes the parameter from the address.
+5. **Given** the operator picks a tab, **When** it renders, **Then** it takes the middle
+   column at the width that column already has, the bar marks it as current, and clicking
+   Chat returns to the conversation with its transcript and connection intact.
+6. **Given** an operator follows an old link carrying a tab parameter (e.g. `?tab=env`, or
+   the legacy `?tab=chat`), **Then** the workspace opens on that tab; returning to Chat
+   removes the parameter from the address.
 7. **Given** the admin console's primary sidebar, **When** the workspace ships, **Then**
    every navigation entry that existed before is still present and still works.
 
@@ -101,7 +104,7 @@ sections is reachable from the right panel and behaves as it did before.
 A customer opens the agents area of the app console. Instead of a grid of cards they see
 the same vertical rail of agents on the left and a conversation beside it, at the readable
 width it has today. Rail entries carry the same light information as the admin rail —
-name, status, last activity. There is no settings panel here: management stays in admin.
+name, status, last activity. There are no settings tabs here: management stays in admin.
 
 **Why this priority**: It gives the customer console the same "you are already in a
 conversation" feel, but the admin surface is the one with the acute problem (two
@@ -109,7 +112,7 @@ navigation columns), so it lands second.
 
 **Independent Test**: Open the agents area in `app` as a user who can see two or more
 agents. Verify a conversation opens directly, the rail lists the visible agents, and
-switching entries switches the conversation — with no settings panel anywhere.
+switching entries switches the conversation — with no settings surface anywhere.
 
 **Acceptance Scenarios**:
 
@@ -119,7 +122,7 @@ switching entries switches the conversation — with no settings panel anywhere.
    later, **Then** the workspace opens on agent B; if agent B is no longer visible to
    them, it opens on the first running agent instead.
 3. **Given** the app workspace, **When** the user looks for agent settings, **Then**
-   there is no settings panel and no settings sections — only the conversation and the
+   there is no tab bar and no settings sections — only the conversation and the
    controls the user already had (restart, where permitted).
 4. **Given** a user whose role does not permit creating agents, **When** the rail
    renders, **Then** the create action is absent, exactly as it was on the cards screen.
@@ -129,44 +132,43 @@ switching entries switches the conversation — with no settings panel anywhere.
 
 ---
 
-### User Story 3 - Admin: settings panel that says more at a glance (Priority: P3)
+### User Story 3 - Admin: tabs that say more at a glance (Priority: P3)
 
-Inside the right-hand panel, each section shows how much is behind it before the operator
-opens it — how many knowledge bases the agent can query, how many stored files, how many
+Each tab shows how much is behind it before the operator opens it — how many knowledge bases the agent can query, how many stored files, how many
 secrets, how many messaging channels. The number is the reason to click, so it has to be
-there before the click. The panel remembers whether it was open.
+there before the click.
 
-**Why this priority**: Additive polish on top of User Story 1 — the panel is useful
-without the counts, but the counts are what make it worth opening.
+**Why this priority**: Additive polish on top of User Story 1 — the tabs work without the
+counts, but the counts are what tell you which one is worth opening.
 
-**Independent Test**: Open the settings panel for an agent with known amounts of
+**Independent Test**: Open the workspace for an agent with known amounts of
 knowledge, files, secrets and channels; verify each number matches what the corresponding
 section lists when opened.
 
 **Acceptance Scenarios**:
 
-1. **Given** an agent attached to 12 knowledge bases, **When** the settings panel renders,
-   **Then** the Knowledge section shows 12 alongside its name.
+1. **Given** an agent attached to 12 knowledge bases, **When** the tab bar renders, **Then**
+   the Knowledge tab shows 12 alongside its name.
 2. **Given** a count that cannot be determined (the source is unreachable or still
    loading), **When** the section renders, **Then** the section is still listed and still
    openable, simply without a number.
-3. **Given** the operator collapsed the panel and later returns to the workspace, **Then**
-   the panel is still collapsed.
+3. **Given** a count the sources cannot supply, **Then** the tab renders with no number at
+   all — never a zero, which would claim something untrue.
 
 ---
 
 ### User Story 4 - Long agent lists and narrow screens (Priority: P4)
 
 An operator with dozens of agents types part of a name into the rail's search field and
-the list narrows to matches. On a narrow window the rail and the panel step out of the
-way so the conversation stays readable, and each can be summoned back on demand.
+the list narrows to matches. On a narrow window the rail steps out of the way so the
+conversation stays readable, and can be summoned back on demand.
 
 **Why this priority**: Only bites once an installation has many agents or a small window;
 the workspace is usable without it.
 
 **Independent Test**: With 20+ agents, type a fragment of one name and confirm the rail
 filters to matching entries; then narrow the window below the tablet breakpoint and
-confirm the conversation stays usable with the rail and panel collapsed.
+confirm the conversation stays usable with the rail collapsed.
 
 **Acceptance Scenarios**:
 
@@ -176,8 +178,7 @@ confirm the conversation stays usable with the rail and panel collapsed.
 2. **Given** a search that matches nothing, **Then** the rail says so rather than
    rendering an empty column.
 3. **Given** a narrow viewport, **When** the workspace opens, **Then** the conversation
-   occupies the screen, and the rail and the settings panel each open as a full-screen
-   overlay when summoned.
+   occupies the screen and the rail opens as a full-screen overlay when summoned.
 
 ---
 
@@ -195,9 +196,9 @@ confirm the conversation stays usable with the rail and panel collapsed.
   the user, or plainly nonexistent): the "agent not found / unavailable" state that both
   consoles already render, with the rail still usable to move elsewhere.
 - **Agent is stopped, failed or restarting**: the existing overlay covers the conversation
-  area only — the rail, the header, the usage strip and the settings panel stay usable.
+  area only — the rail, the header, the usage strip and the tab bar stay usable.
 - **The "settings changed — restart the agent" banner**: still appears above the
-  conversation and is not hidden by the panel.
+  conversation and is not hidden by the tab bar.
 - **The usage strip's "Details" action** currently jumps to the Overview tab; it must open
   the Overview section in the middle column instead.
 - **Switching agents while a section is open**: the same section opens for the newly
@@ -226,7 +227,7 @@ confirm the conversation stays usable with the rail and panel collapsed.
   the agent is a Ranch admin agent. Entries MUST NOT carry per-agent action controls.
 - **FR-003**: The rail MUST mark exactly one entry as the one currently open, and
   selecting another entry MUST switch the entire workspace — conversation, header,
-  status, usage strip and (in admin) settings panel — to that agent.
+  status, usage strip and (in admin) the open tab — to that agent.
 - **FR-004**: Selecting an agent MUST update the address so the workspace is linkable and
   the browser's back and forward controls move between previously opened agents.
 - **FR-005**: Agent runtime status shown in the rail MUST track the live status the
@@ -248,8 +249,8 @@ confirm the conversation stays usable with the rail and panel collapsed.
   homes. **Workspace-level** actions — creating an agent, and free cluster capacity with
   its "cluster full" warning — MUST sit in the top action row of the page, at the level
   where the "Back to agents" link sits today. **Per-agent** actions — edit, start/stop,
-  restart, delete — MUST live in the settings panel alongside the agent's identity, as the
-  visual reference shows.
+  restart, delete — MUST live in the agent header alongside its identity, with delete one
+  level down behind an overflow menu (FR-017).
 - **FR-010**: The nine-item vertical settings column on the agent page MUST be removed.
   The conversation MUST NOT be stretched to fill the freed space: the chat widget keeps its
   maximum width and its even split with the pod logs panel beside it, so at the widths this
@@ -264,41 +265,41 @@ confirm the conversation stays usable with the rail and panel collapsed.
 - **FR-011**: The admin console's primary navigation MUST be unchanged: no entry removed,
   renamed or relocated, and the Agents entry MUST lead to this workspace.
 
-**Admin settings panel**
+**Admin tab bar**
 
 - **FR-012**: All eight existing settings sections — Overview, Knowledge, Files, Secrets,
-  Environment, Channels, Chats, Paddock — MUST be reachable from a panel on the right of
-  the workspace, and each MUST behave exactly as it does today. Their content MUST render
-  in the middle column, in place of the conversation, at the width that column already
-  provides — no section component is redesigned to fit a narrower container.
-- **FR-013**: The panel MUST be **open by default** — the agent's controls (edit,
-  start/stop, restart, delete) live inside it, so a collapsed-by-default panel would hide
-  them behind a click. It MUST be collapsible and re-openable from the workspace header,
-  and once the operator collapses or reopens it, that choice MUST persist across
-  navigation and reloads until they change it again.
-- **FR-014**: The panel MUST act as a navigator, not a container: every section MUST stay
-  listed and one click away while another section is open, and the panel MUST mark which
-  section the middle column is currently showing. Returning to the conversation MUST take
-  one action, and the conversation MUST come back with its transcript and its live
-  connection intact — opening a section MUST NOT tear the chat down.
-- **FR-015**: The panel MUST show, next to each section that has a countable amount, how
-  many items it holds — knowledge bases, files, secrets, channels — and MUST render the
-  section normally when a count is unavailable.
-- **FR-016**: Existing deep links of the form `?tab=<section>` MUST open the workspace
-  with that section showing in the middle column and the panel marking it as current;
-  returning to the conversation MUST remove the parameter.
-- **FR-017**: The panel MUST expose the agent's lifecycle actions (stop/start, restart,
-  edit) and its identity (name, id, status), so the operator never needs the retired
-  table to act on an agent.
-- **FR-018**: The panel MUST stay narrow — it holds a list of section names with counts, an
-  identity block and a row of controls, and nothing else. It MUST NOT overlap or hide the
-  top action row, and while a section is open in the middle column the panel MUST remain
-  visible so the operator can move to another section or back to the conversation.
+  Environment, Channels, Chats, Paddock — MUST be reachable from a horizontal tab bar under
+  the agent header, alongside Chat and a full-width Logs tab, and each MUST behave exactly
+  as it does today. Their content MUST render in the middle column at the width that column
+  already provides — no section component is redesigned to fit a narrower container.
+- **FR-013**: The workspace MUST open on the **Chat** tab, and every tab MUST be reachable
+  without opening a menu first, except the four least-used which MUST live behind a single
+  **More** control that marks itself as current when one of them is open. No tab state is
+  persisted: which tab is showing lives in the URL (FR-016), and nothing else needs
+  remembering.
+- **FR-014**: Every tab MUST stay reachable in one click while another tab is open, and the
+  bar MUST mark which tab the middle column is showing. Returning to the conversation MUST
+  take one action, and the conversation MUST come back with its transcript and its live
+  connection intact — opening another tab MUST NOT tear the chat down.
+- **FR-015**: The tab bar MUST show, next to each tab that has a countable amount, how many
+  items it holds — knowledge bases, files, secrets, channels — and MUST render the tab
+  normally when a count is unavailable.
+- **FR-016**: Existing deep links of the form `?tab=<value>` MUST open the workspace on that
+  tab, including the legacy `?tab=chat`. The default tab MUST carry no parameter, so
+  returning to the conversation removes it from the address.
+- **FR-017**: The agent header MUST expose the lifecycle actions as buttons — stop/start,
+  restart, edit — alongside the agent's identity (name, status, admin marker). Delete MUST
+  be one level down, behind an overflow menu and a confirmation: it is the only action in
+  that row that cannot be undone and must not sit a mis-click from the one used most.
+- **FR-018**: The pod logs MUST be reachable two ways, because they are read two ways: as a
+  side panel next to the conversation on the Chat tab, for watching them while talking to
+  the agent, and as a full-width tab for reading them properly. Only one of the two MUST be
+  live at a time — the side panel MUST NOT keep polling behind the full-width tab.
 
 **App workspace**
 
 - **FR-019**: The app agents area MUST replace the card grid with the same rail plus
-  conversation layout and MUST NOT expose any settings panel or settings sections. As in
+  conversation layout and MUST NOT expose any settings tabs or settings sections. As in
   admin, the conversation MUST keep its current readable width rather than stretching to
   fill whatever the rail leaves over.
 - **FR-020**: On landing, the app workspace MUST open the conversation with the agent the
@@ -317,8 +318,8 @@ confirm the conversation stays usable with the rail and panel collapsed.
 
 - **FR-023**: The rail MUST offer a name search that filters the list, with a distinct
   "nothing matches" state.
-- **FR-024**: Below the tablet breakpoint the rail and (in admin) the settings panel MUST
-  each collapse to an on-demand full-screen overlay, leaving the conversation readable.
+- **FR-024**: Below the tablet breakpoint the rail MUST collapse to an on-demand full-screen
+  overlay, leaving the conversation readable.
   The logs panel keeps whatever responsive behaviour it has today — this feature adds the
   two new columns' behaviour, it does not redesign the existing pair.
 - **FR-025**: Existing conversation behaviour MUST be preserved: the restart banner, the
@@ -351,10 +352,9 @@ confirm the conversation stays usable with the rail and panel collapsed.
   **zero** intermediate clicks, down from one (table row / card) today, on both consoles.
 - **SC-002**: Switching from one agent's conversation to another's takes **one** click
   from anywhere in the workspace.
-- **SC-003**: At a 1440px viewport with the rail and the settings panel both open, the
-  conversation and the pod logs are both **fully visible** side by side — every border drawn,
-  nothing clipped, no horizontal scrolling of the page. At 1400px and above with the panel
-  collapsed, each is at least as wide as it is today.
+- **SC-003**: At a 1440px viewport with the rail open, the conversation and the pod logs are
+  both **fully visible** side by side — every border drawn, nothing clipped, no horizontal
+  scrolling of the page. At 1400px and above each is at least as wide as it is today.
 - **SC-004**: All **8** settings sections remain reachable and functionally unchanged; a
   walkthrough of each section performs the same operations it performed before the change,
   and **zero** of the eight section components need layout changes to fit their new home.
@@ -396,22 +396,23 @@ confirm the conversation stays usable with the rail and panel collapsed.
   warning) both live in the top action row of the workspace — the level currently occupied
   by the "Back to agents" link, which has nothing left to link back to once the table is
   gone. They belong together: the capacity number is what qualifies the create action.
-- **Per-agent lifecycle actions** (edit, start/stop, restart) and **delete** live in the
-  settings panel, next to the agent's identity — the arrangement the visual reference
-  shows. They leave the page header, which means reaching them requires opening the panel.
+- **Per-agent lifecycle actions** (edit, start/stop, restart) stay as buttons in the agent
+  header, where they already were. **Delete** moves one level down into an overflow menu:
+  it is the only irreversible action in that row.
 - **The chat and logs pair is untouched.** The chat widget's minimum and maximum widths
-  and the logs panel beside it stay as they are; the freed column simply lets the rail and
-  the settings panel exist without squeezing them.
+  and the logs panel beside it stay as they are; the freed column simply lets the rail exist
+  without squeezing them.
 - **The middle column is a canvas with two modes** — conversation (default) or one open
   section. This is what lets the eight section components keep their current width and
-  therefore their current markup. The visual reference supports it: its panel rows carry
-  chevrons and counts, which is the vocabulary of navigation, not of an accordion.
+  therefore their current markup. Two intermediate designs — an accordion inside a panel,
+  then a narrow right-hand navigator — were built and dropped on sight; a horizontal tab bar
+  costs a row of height instead of a column of width.
 - **The conversation stays mounted behind an open section** rather than being destroyed
   and rebuilt, so returning to it costs nothing and the websocket is not churned. The cost
   is that chat and settings cannot be read side by side; that trade was made deliberately,
-  because cramping Files and Paddock into a narrow panel would hurt every session while
+  because cramping Files and Paddock into a narrow column would hurt every session while
   the side-by-side case is rare.
-- **Counts in the settings panel** are gathered per section as the panel opens rather than
+- **Counts in the tab bar** are gathered per section on first paint rather than
   from a single new aggregate endpoint; knowledge count is already available on the agent
   record, the rest come from the sources each section already reads. A count that has not
   arrived yet simply does not render.

From 1ae8a6165b2560ce0e7b70899c2541b6c5e16343 Mon Sep 17 00:00:00 2001
From: "Maksym Hryzodub [DREAM]" <maksym.hryzodub@dreamvention.com>
Date: Fri, 21 Aug 2026 20:55:46 +0300
Subject: [PATCH 4/5] feat(agent): pin the create action to the foot of the
 agent rail (CLEAN-36)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

"New agent" and the cluster-capacity line move out of the workspace's top row
and into the rail's footer, pinned to the floor. Creating an agent belongs
with the list of agents, and the capacity number is what answers "can I,
right now?" — it belongs with the action it qualifies rather than in a row of
its own.

That empties the top row entirely, so it goes: on desktop the workspace gains
a row of height back for the canvas, and what remains is a lg:hidden button
for reaching the rail on screens too narrow to dock it. TopBar.vue is deleted.

Both consoles, same treatment. In app the footer stays behind the existing
Owner/Admin rule, so a plain user sees neither the button nor the capacity —
and still never triggers the Owner/Admin-only capacity endpoint.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../components/agent/workspace/Provider.vue   | 41 ++++++-------
 .../agent/components/agent/workspace/Rail.vue | 47 +++++++++++++--
 .../components/agent/workspace/TopBar.vue     | 51 ----------------
 .../components/agentWorkspace/Provider.vue    | 59 ++++---------------
 .../agent/components/agentWorkspace/Rail.vue  | 43 +++++++++++++-
 specs/006-agent-workspace-tabs/quickstart.md  | 18 +++---
 specs/006-agent-workspace-tabs/spec.md        | 16 ++---
 7 files changed, 133 insertions(+), 142 deletions(-)
 delete mode 100644 admin/slices/agent/agent/components/agent/workspace/TopBar.vue

diff --git a/admin/slices/agent/agent/components/agent/workspace/Provider.vue b/admin/slices/agent/agent/components/agent/workspace/Provider.vue
index c1f737e0..ebc40df5 100644
--- a/admin/slices/agent/agent/components/agent/workspace/Provider.vue
+++ b/admin/slices/agent/agent/components/agent/workspace/Provider.vue
@@ -15,10 +15,10 @@ const { data: agents, pending, refresh: refreshAgents } = useAsyncData(
   { lazy: true },
 );
 
-// Cluster headroom for the top action row. Store actions refetch on their
-// own; the interval catches pods actually scheduling and other operators'
-// changes. The API caches ~15s, so polling is cheap, and null (K8s
-// unreachable) simply hides the badge.
+// Cluster headroom, rendered in the rail's footer next to the create action.
+// Store actions refetch on their own; the interval catches pods actually
+// scheduling and other operators' changes. The API caches ~15s, so polling is
+// cheap, and null (K8s unreachable) simply hides the line.
 const capacity = computed(() => agentStore.capacity ?? null);
 
 let capacityTimer: ReturnType<typeof setInterval> | null = null;
@@ -31,9 +31,8 @@ onUnmounted(() => {
 });
 
 // Selecting an agent is real navigation — `push`, so Back undoes it (FR-004).
-// The section in `?tab=` rides along: an operator comparing Environment
-// across two agents should not be dropped back into a conversation on every
-// switch.
+// The tab in `?tab=` rides along: an operator comparing Environment across two
+// agents should not be dropped back into a conversation on every switch.
 function onSelect(id: string) {
   railOverlayOpen.value = false;
   if (id === props.id) return;
@@ -100,7 +99,7 @@ onUnmounted(() => {
 });
 
 /**
- * The open agent was deleted from its own settings panel. Move to whatever is
+ * The open agent was deleted from its own header menu. Move to whatever is
  * next in the rail rather than leaving the operator on a dead id; an empty
  * rail falls through to the resolver, which renders the empty state.
  */
@@ -117,18 +116,18 @@ async function onDeleted() {
     class="flex min-h-0 flex-col gap-3"
     :style="availableHeight ? { height: availableHeight } : undefined"
   >
-    <div class="flex shrink-0 items-center gap-3">
-      <Button
-        variant="outline"
-        size="sm"
-        class="lg:hidden"
-        @click="railOverlayOpen = true"
-      >
-        <IconUsersGroup class="size-4" />
-        Agents
-      </Button>
-      <AgentWorkspaceTopBar :capacity="capacity" class="flex-1" />
-    </div>
+    <!-- Desktop has no workspace-level row at all: the rail carries its own
+         create action in its footer, so this exists only to reach the rail on
+         screens too narrow to dock it. -->
+    <Button
+      variant="outline"
+      size="sm"
+      class="shrink-0 self-start lg:hidden"
+      @click="railOverlayOpen = true"
+    >
+      <IconUsersGroup class="size-4" />
+      Agents
+    </Button>
 
     <div class="flex min-h-0 flex-1 gap-4">
       <aside
@@ -138,6 +137,7 @@ async function onDeleted() {
           :agents="agents"
           :active-id="id"
           :pending="pending"
+          :capacity="capacity"
           @select="onSelect"
         />
       </aside>
@@ -167,6 +167,7 @@ async function onDeleted() {
           :agents="agents"
           :active-id="id"
           :pending="pending"
+          :capacity="capacity"
           @select="onSelect"
         />
       </div>
diff --git a/admin/slices/agent/agent/components/agent/workspace/Rail.vue b/admin/slices/agent/agent/components/agent/workspace/Rail.vue
index 6a64e34e..49cb915e 100644
--- a/admin/slices/agent/agent/components/agent/workspace/Rail.vue
+++ b/admin/slices/agent/agent/components/agent/workspace/Rail.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { IconSearch } from '@tabler/icons-vue';
-import type { IAgentData } from '#agent/domain';
+import { IconPlus, IconSearch } from '@tabler/icons-vue';
+import type { IAgentData, IClusterCapacityData } from '#agent/domain';
 import { useAgentRailEntries } from '#agent/composables/useAgentRailEntries';
 
 const props = defineProps<{
@@ -8,6 +8,9 @@ const props = defineProps<{
   activeId: string;
   /** Initial load only — a refresh keeps the existing rows visible. */
   pending: boolean;
+  /** Null when Kubernetes is unreachable — the line simply does not render
+   *  rather than showing a number nobody can trust. */
+  capacity: IClusterCapacityData | null;
 }>();
 
 defineEmits<{ select: [id: string] }>();
@@ -21,6 +24,8 @@ const activeIdRef = computed(() => props.activeId);
 const entries = useAgentRailEntries(agentsRef, activeIdRef, search);
 
 const hasAgents = computed(() => (props.agents?.length ?? 0) > 0);
+
+const clusterFull = computed(() => props.capacity?.freeAgentSlots === 0);
 </script>
 
 <template>
@@ -67,13 +72,47 @@ const hasAgents = computed(() => (props.agents?.length ?? 0) > 0);
 
     <p
       v-else-if="hasAgents"
-      class="px-2.5 py-6 text-center text-xs text-muted-foreground"
+      class="min-h-0 flex-1 px-2.5 py-6 text-center text-xs text-muted-foreground"
     >
       No agent matches “{{ search }}”.
     </p>
 
-    <p v-else class="px-2.5 py-6 text-center text-xs text-muted-foreground">
+    <p
+      v-else
+      class="min-h-0 flex-1 px-2.5 py-6 text-center text-xs text-muted-foreground"
+    >
       No agents yet.
     </p>
+
+    <!-- Pinned to the floor of the rail. Creating an agent belongs with the
+         list of agents, and the capacity line belongs with the create action —
+         it is the number that answers "can I, right now?". -->
+    <div class="shrink-0 border-t pt-2">
+      <p
+        v-if="capacity"
+        class="px-1 pb-2 text-xs"
+        :class="clusterFull ? 'text-amber-600' : 'text-muted-foreground'"
+      >
+        <span class="font-medium">{{ capacity.freeAgentSlots }}</span>
+        {{ capacity.freeAgentSlots === 1 ? 'slot' : 'slots' }} free
+        <!-- Capacity is a ~15s-stale estimate, so this warns rather than
+             blocks: creating is still legal, the pod just waits Pending. -->
+        <template v-if="clusterFull">
+          —
+          {{
+            capacity.totalAgentSlots === 0
+              ? 'no schedulable agent nodes in this cluster, so new agents will stay Pending.'
+              : 'stop an agent to free a slot before starting a new one.'
+          }}
+        </template>
+      </p>
+
+      <Button size="sm" class="w-full" as-child>
+        <NuxtLink to="/agents/create">
+          <IconPlus class="size-4" />
+          New agent
+        </NuxtLink>
+      </Button>
+    </div>
   </div>
 </template>
diff --git a/admin/slices/agent/agent/components/agent/workspace/TopBar.vue b/admin/slices/agent/agent/components/agent/workspace/TopBar.vue
deleted file mode 100644
index 375a0757..00000000
--- a/admin/slices/agent/agent/components/agent/workspace/TopBar.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import type { IClusterCapacityData } from '#agent/domain';
-
-// `capacity` is null both when Kubernetes is unreachable and when the viewer
-// cannot fetch it at all (the endpoint is Owner/Admin only) — in either case
-// the badge simply does not render rather than showing a wrong number.
-defineProps<{ capacity: IClusterCapacityData | null }>();
-</script>
-
-<template>
-  <!-- The row that used to hold "← Back to agents", which has nothing left to
-       link back to now the table is gone. Workspace-level actions live here;
-       per-agent actions live in the settings panel (FR-009). -->
-  <div class="flex shrink-0 flex-wrap items-center gap-3">
-    <div
-      v-if="capacity"
-      class="hidden items-center gap-1.5 rounded-full border bg-card px-3 py-1 text-xs text-muted-foreground sm:flex"
-      title="How many more agents fit on the cluster (by CPU/memory requests on agent nodes)"
-    >
-      <span
-        :class="
-          capacity.freeAgentSlots === 0
-            ? 'font-medium text-amber-600'
-            : 'font-medium text-foreground'
-        "
-      >
-        {{ capacity.freeAgentSlots }}
-      </span>
-      {{ capacity.freeAgentSlots === 1 ? 'slot' : 'slots' }} free
-    </div>
-
-    <!-- Capacity is a ~15s-stale estimate, so this warns rather than blocks:
-         creating is still legal, the pod just waits Pending for a slot. -->
-    <p
-      v-if="capacity && capacity.freeAgentSlots === 0"
-      class="text-xs text-amber-600"
-    >
-      {{
-        capacity.totalAgentSlots === 0
-          ? 'No agent nodes available in this cluster (no schedulable node labeled node-role=agents) — new agents will stay Pending.'
-          : 'Cluster is full — stop an agent to free a slot before starting a new one.'
-      }}
-    </p>
-
-    <div class="ml-auto">
-      <Button size="sm" as-child>
-        <NuxtLink to="/agents/create">New agent</NuxtLink>
-      </Button>
-    </div>
-  </div>
-</template>
diff --git a/app/slices/agent/components/agentWorkspace/Provider.vue b/app/slices/agent/components/agentWorkspace/Provider.vue
index 0c0d9253..8b9ba211 100644
--- a/app/slices/agent/components/agentWorkspace/Provider.vue
+++ b/app/slices/agent/components/agentWorkspace/Provider.vue
@@ -60,45 +60,15 @@ function onSelect(id: string) {
        this route as flush (no container, no footer), so the workspace owns
        the remaining height. -->
   <div class="flex h-[calc(100vh-3.5rem-1px)] min-h-0">
-    <aside
-      class="hidden w-68 shrink-0 flex-col gap-3 border-r p-3 md:flex"
-    >
-      <div v-if="canCreate" class="flex shrink-0 items-center gap-2">
-        <NuxtLink
-          to="/agents/create"
-          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition hover:opacity-95"
-        >
-          <Icon name="plus" :size="13" />
-          {{ $t('list.create') }}
-        </NuxtLink>
-      </div>
-
-      <p
-        v-if="canCreate && capacity"
-        class="shrink-0 text-xs"
-        :class="
-          capacity.freeAgentSlots === 0
-            ? 'font-medium text-amber-600'
-            : 'text-muted-foreground'
-        "
-      >
-        {{
-          $t(
-            'list.slots_free',
-            { count: capacity.freeAgentSlots },
-            capacity.freeAgentSlots,
-          )
-        }}
-      </p>
-
-      <div class="min-h-0 flex-1">
-        <AgentWorkspaceRail
-          :agents="agents"
-          :active-id="id"
-          :pending="pending"
-          @select="onSelect"
-        />
-      </div>
+    <aside class="hidden w-68 shrink-0 border-r p-3 md:block">
+      <AgentWorkspaceRail
+        :agents="agents"
+        :active-id="id"
+        :pending="pending"
+        :can-create="canCreate"
+        :capacity="capacity"
+        @select="onSelect"
+      />
     </aside>
 
     <div class="flex min-h-0 min-w-0 flex-1 flex-col">
@@ -135,20 +105,13 @@ function onSelect(id: string) {
         </button>
       </div>
 
-      <NuxtLink
-        v-if="canCreate"
-        to="/agents/create"
-        class="inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground"
-      >
-        <Icon name="plus" :size="13" />
-        {{ $t('list.create') }}
-      </NuxtLink>
-
       <div class="min-h-0 flex-1">
         <AgentWorkspaceRail
           :agents="agents"
           :active-id="id"
           :pending="pending"
+          :can-create="canCreate"
+          :capacity="capacity"
           @select="onSelect"
         />
       </div>
diff --git a/app/slices/agent/components/agentWorkspace/Rail.vue b/app/slices/agent/components/agentWorkspace/Rail.vue
index 657a7321..241546d1 100644
--- a/app/slices/agent/components/agentWorkspace/Rail.vue
+++ b/app/slices/agent/components/agentWorkspace/Rail.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import type { IAgentData } from '#agent/domain';
+import type { IAgentData, IClusterCapacityData } from '#agent/domain';
 
 const props = defineProps<{
   agents: IAgentData[] | null | undefined;
   activeId: string;
   /** Initial load only — a refresh keeps the existing rows visible. */
   pending: boolean;
+  /** Owner/Admin only — everyone else gets no create action and no capacity,
+   *  which is the rule the cards screen already applied. */
+  canCreate: boolean;
+  capacity: IClusterCapacityData | null;
 }>();
 
 defineEmits<{ select: [id: string] }>();
@@ -65,13 +69,46 @@ const hasAgents = computed(() => (props.agents?.length ?? 0) > 0);
 
     <p
       v-else-if="hasAgents"
-      class="px-2.5 py-6 text-center text-xs text-muted-foreground"
+      class="min-h-0 flex-1 px-2.5 py-6 text-center text-xs text-muted-foreground"
     >
       {{ $t('rail.no_match', { term: search }) }}
     </p>
 
-    <p v-else class="px-2.5 py-6 text-center text-xs text-muted-foreground">
+    <p
+      v-else
+      class="min-h-0 flex-1 px-2.5 py-6 text-center text-xs text-muted-foreground"
+    >
       {{ $t('rail.empty') }}
     </p>
+
+    <!-- Pinned to the floor: creating an agent belongs with the list of
+         agents, and the capacity line belongs with the create action. -->
+    <div v-if="canCreate" class="shrink-0 border-t pt-2">
+      <p
+        v-if="capacity"
+        class="px-1 pb-2 text-xs"
+        :class="
+          capacity.freeAgentSlots === 0
+            ? 'font-medium text-amber-600'
+            : 'text-muted-foreground'
+        "
+      >
+        {{
+          $t(
+            'list.slots_free',
+            { count: capacity.freeAgentSlots },
+            capacity.freeAgentSlots,
+          )
+        }}
+      </p>
+
+      <NuxtLink
+        to="/agents/create"
+        class="inline-flex w-full items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition hover:opacity-95"
+      >
+        <Icon name="plus" :size="13" />
+        {{ $t('list.create') }}
+      </NuxtLink>
+    </div>
   </div>
 </template>
diff --git a/specs/006-agent-workspace-tabs/quickstart.md b/specs/006-agent-workspace-tabs/quickstart.md
index 2bb99ee0..4dbbbb0d 100644
--- a/specs/006-agent-workspace-tabs/quickstart.md
+++ b/specs/006-agent-workspace-tabs/quickstart.md
@@ -138,18 +138,18 @@ opened.
 Check off each capability the deleted `list/Provider.vue` had. The list below is the result
 of the T002 inventory — every line was read out of that file, not guessed:
 
-- [ ] Create an agent → top action row
-- [ ] `N slots free` badge, with its "how many more agents fit" tooltip → top action row
-- [ ] Cluster-full warning, both variants (no agent nodes / cluster full) → top action row
-- [ ] Capacity refreshed every 30s → top action row
-- [ ] Edit → settings panel
-- [ ] Start / Stop, with the `RESOURCE_HOLDING` rule deciding which → settings panel
-- [ ] Restart → settings panel
-- [ ] Delete, with its `ConfirmDialog` naming the agent → settings panel
+- [ ] Create an agent → foot of the agent rail
+- [ ] `N slots free` → foot of the agent rail, above the create button
+- [ ] Cluster-full warning, both variants (no agent nodes / cluster full) → same line, amber
+- [ ] Capacity refreshed every 30s → foot of the agent rail
+- [ ] Edit → agent header
+- [ ] Start / Stop, with the `RESOURCE_HOLDING` rule deciding which → agent header
+- [ ] Restart → agent header
+- [ ] Delete, with its `ConfirmDialog` naming the agent → agent header `⋯` menu
 - [ ] Ranch-admin marker, with its "ranch_* admin tools" tooltip → rail row
 - [ ] Status badge using `AGENT_STATUS_VARIANT` → rail row
 - [ ] Created date via `formatDateTime` → rail row
-- [ ] Resources (cpu / memory) → settings panel identity block
+- [ ] Resources (cpu / memory) → **dropped** with the settings panel; the Overview tab still shows them
 - [ ] Clicking a row opens that agent → rail row
 - [ ] "Agents" heading and "Manage running agents." lede → dropped deliberately; the sidebar
       already says where you are, and the workspace opens on a named agent
diff --git a/specs/006-agent-workspace-tabs/spec.md b/specs/006-agent-workspace-tabs/spec.md
index e536418c..125dd44b 100644
--- a/specs/006-agent-workspace-tabs/spec.md
+++ b/specs/006-agent-workspace-tabs/spec.md
@@ -247,10 +247,11 @@ confirm the conversation stays usable with the rail collapsed.
   only agents screen.
 - **FR-009**: Every capability the table provided MUST survive the change, in one of two
   homes. **Workspace-level** actions — creating an agent, and free cluster capacity with
-  its "cluster full" warning — MUST sit in the top action row of the page, at the level
-  where the "Back to agents" link sits today. **Per-agent** actions — edit, start/stop,
-  restart, delete — MUST live in the agent header alongside its identity, with delete one
-  level down behind an overflow menu (FR-017).
+  its "cluster full" warning — MUST sit pinned to the **foot of the agent rail**: creating
+  an agent belongs with the list of agents, and the capacity number is what answers "can I,
+  right now?", so it belongs with the action it qualifies. **Per-agent** actions — edit,
+  start/stop, restart, delete — MUST live in the agent header alongside its identity, with
+  delete one level down behind an overflow menu (FR-017).
 - **FR-010**: The nine-item vertical settings column on the agent page MUST be removed.
   The conversation MUST NOT be stretched to fill the freed space: the chat widget keeps its
   maximum width and its even split with the pod logs panel beside it, so at the widths this
@@ -393,9 +394,10 @@ confirm the conversation stays usable with the rail collapsed.
   agents area resolves to a specific agent's address rather than keeping a bare `/agents`
   URL — this is what keeps deep links, sharing and browser history working.
 - **Creating an agent** and **cluster capacity** ("N slots free" and the cluster-full
-  warning) both live in the top action row of the workspace — the level currently occupied
-  by the "Back to agents" link, which has nothing left to link back to once the table is
-  gone. They belong together: the capacity number is what qualifies the create action.
+  warning) sit together at the foot of the agent rail, pinned there. They belong together:
+  the capacity number is what qualifies the create action, and both belong with the list of
+  agents rather than in a row of their own. This removed the workspace's top action row
+  entirely on desktop — one row of height back to the canvas.
 - **Per-agent lifecycle actions** (edit, start/stop, restart) stay as buttons in the agent
   header, where they already were. **Delete** moves one level down into an overflow menu:
   it is the only irreversible action in that row.

From 0e773d7d50e3c683edae9339c5e9540e565d1354 Mon Sep 17 00:00:00 2001
From: "Maksym Hryzodub [DREAM]" <maksym.hryzodub@dreamvention.com>
Date: Mon, 24 Aug 2026 14:05:19 +0300
Subject: [PATCH 5/5] chore: release 0.3.35 (CLEAN-36)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7c6ef8e6..448c7f9d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ranch",
-  "version": "0.3.34",
+  "version": "0.3.35",
   "private": true,
   "packageManager": "bun@1.2.12",
   "workspaces": [