@workerdeck/ui 0.20.0 → 0.22.0

package/build/index.mjs

@@ -1,6 +1,6 @@
-import { $ as toolIcon, A as PERMISSION_MODES, At as MenuSeparator, B as skillPrompt, Bt as badgeVariants, C as TerminalQuestionPrompt, Ct as DialogContent, D as parseUserQuestions, Dt as Menu, E as QuestionPrompt, Et as DialogTrigger, F as SkillsDialog, Ft as SelectItemText, G as Band, H as TerminalMarkdown, Ht as buttonVariants, I as McpDialog, It as SelectTrigger, J as Row, K as Blank, L as HostFilesDialog, Lt as SelectValue, M as permissionModeChoices, Mt as Select, N as permissionModeMeta, Nt as SelectContent, O as SubagentStrip, Ot as MenuContent, P as ModelSelect, Pt as SelectItem, Q as isMutatingTool, R as ContextDialog, Rt as Input, S as SessionInfoDialog, St as DialogClose, T as QUESTION_BEHAVIORS, Tt as DialogRow, U as TerminalDiff, Ut as cn, V as TerminalSurface, Vt as Button, W as previewPatch, X as WithActions, Y as CopyAction, Z as useAffordances, _ as Conversation, _t as Tip, a as Transcript, at as hashtagTrigger, b as StatusBar, bt as Dialog, c as ToolCallCard, ct as PromptArea, d as Response, dt as ProgressRing, et as TranscriptDensityProvider, f as PromptTokenText, ft as Splitter, g as FileCard, gt as copyText, h as Loader, ht as CopyButton, i as useMinuteClock, it as commandTrigger, j as PermissionModeSelect, jt as MenuTrigger, k as PermissionPrompt, kt as MenuItem, l as SessionEmptyState, lt as plainTextToSegments, m as MessageContent, mt as Spinner, n as UsageDialog, nt as useTranscriptDensity, o as TerminalItemView, ot as mentionTrigger, p as Message, pt as CodeBlock, q as Ink, r as UsageMeters, rt as useTranscriptVariant, s as TerminalTranscript, st as usePromptAreaState, t as SessionPanel, tt as TranscriptVariantProvider, u as Reasoning, ut as segmentsToPlainText, v as ConversationContent, vt as TooltipContent, w as TerminalPermissionPrompt, wt as DialogHeader, x as STATUS_META, xt as DialogBody, y as ConversationScrollButton, yt as TooltipProvider, z as Composer, zt as Badge } from "./SessionPanel-CHktI2CF.mjs";
+import { $ as toolIcon, A as PERMISSION_MODES, At as MenuSeparator, B as skillPrompt, Bt as Badge, C as TerminalQuestionPrompt, Ct as DialogContent, D as parseUserQuestions, Dt as Menu, E as QuestionPrompt, Et as DialogTrigger, F as SkillsDialog, Ft as SelectItemText, G as Band, H as TerminalMarkdown, Ht as Button, I as McpDialog, It as SelectTrigger, J as Row, K as Blank, L as HostFilesDialog, Lt as SelectValue, M as permissionModeChoices, Mt as Select, N as permissionModeMeta, Nt as SelectContent, O as SubagentStrip, Ot as MenuContent, P as ModelSelect, Pt as SelectItem, Q as isMutatingTool, R as ContextDialog, Rt as PortalScope, S as SessionInfoDialog, St as DialogClose, T as QUESTION_BEHAVIORS, Tt as DialogRow, U as TerminalDiff, Ut as buttonVariants, V as TerminalSurface, Vt as badgeVariants, W as previewPatch, Wt as cn, X as WithActions, Y as CopyAction, Z as useAffordances, _ as Conversation, _t as Tip, a as Transcript, at as hashtagTrigger, b as StatusBar, bt as Dialog, c as ToolCallCard, ct as PromptArea, d as Response, dt as ProgressRing, et as TranscriptDensityProvider, f as PromptTokenText, ft as Splitter, g as FileCard, gt as copyText, h as Loader, ht as CopyButton, i as useMinuteClock, it as commandTrigger, j as PermissionModeSelect, jt as MenuTrigger, k as PermissionPrompt, kt as MenuItem, l as SessionEmptyState, lt as plainTextToSegments, m as MessageContent, mt as Spinner, n as UsageDialog, nt as useTranscriptDensity, o as TerminalItemView, ot as mentionTrigger, p as Message, pt as CodeBlock, q as Ink, r as UsageMeters, rt as useTranscriptVariant, s as TerminalTranscript, st as usePromptAreaState, t as SessionPanel, tt as TranscriptVariantProvider, u as Reasoning, ut as segmentsToPlainText, v as ConversationContent, vt as TooltipContent, w as TerminalPermissionPrompt, wt as DialogHeader, x as STATUS_META, xt as DialogBody, y as ConversationScrollButton, yt as TooltipProvider, z as Composer, zt as Input } from "./SessionPanel-DgwjH4Ve.mjs";
 import { _ as formatRelativeTime, a as modelLabel, b as rateLimitWindowSeconds, d as formatBytes, f as formatCost, g as formatRateLimitWindowLong, h as formatRateLimitWindow, i as meterSeverity, l as windowLabel, m as formatDuration, o as statusPresentation, p as formatCountdown, r as meterColorClass, s as tightestWindow, t as contextSeverity, u as formatAgoPrecise, v as formatTokens, x as toolInputPreview, y as friendlyModel } from "./status-BE-zg88x.mjs";
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Anchor, ArrowRight, Atom, Beaker, BellRing, Bike, Binary, Blocks, Bot, Box, Brain, Briefcase, Brush, Bug, Building2, Cable, Camera, Car, Cat, Check, ChevronDown, ChevronRight, CircleAlert, CircleSlash, CircuitBoard, Cloud, Code, Coffee, Cog, Compass, Container, Cpu, CreditCard, Database, Diamond, Dog, Dot, Eraser, Feather, Film, Flame, FlaskConical, Folder, Gamepad2, Gauge, Gem, Ghost, Gift, GitBranch, Globe, GraduationCap, Hammer, Hexagon, House, Image, Key, Landmark, Laptop, Layers, Leaf, Library, Lightbulb, Lock, Mail, Map as Map$1, MessageCircle, Mic, Monitor, Moon, Mountain, Music, Network, Newspaper, Notebook, Orbit, Package, Palette, PauseCircle, PenTool, Pencil, Phone, PiggyBank, Plane, Plug, Puzzle, Radar, Radio, Receipt, Rocket, Ruler, Satellite, Scale, Scissors, Search, SearchX, Server, Shield, Ship, ShoppingCart, Signal, Smartphone, Sparkles, Sprout, Square, Star, Sun, Table, Tag, Target, Telescope, Terminal, TestTube, Trash2, TreePine, Trophy, Truck, Umbrella, Users, Wallet, Wand, Waves, Webhook, Wifi, Wrench, X, Zap } from "lucide-react";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
@@ -46,12 +46,12 @@ Textarea.displayName = "Textarea";
 const AlertDialog = AlertDialog$1.Root;
 const AlertDialogTrigger = AlertDialog$1.Trigger;
 const AlertDialogClose = AlertDialog$1.Close;
-const AlertDialogContent = ({ className, children, ...props }) => /* @__PURE__ */ jsxs(AlertDialog$1.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog$1.Backdrop, { className: cn("fixed inset-0 z-70 bg-black/40 backdrop-blur-[1px]", "transition-opacity duration-(--motion-base)", "data-starting-style:opacity-0 data-ending-style:opacity-0") }), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
+const AlertDialogContent = ({ className, children, ...props }) => /* @__PURE__ */ jsx(AlertDialog$1.Portal, { children: /* @__PURE__ */ jsxs(PortalScope, { children: [/* @__PURE__ */ jsx(AlertDialog$1.Backdrop, { className: cn("fixed inset-0 z-70 bg-black/40 backdrop-blur-[1px]", "transition-opacity duration-(--motion-base)", "data-starting-style:opacity-0 data-ending-style:opacity-0") }), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
 	"data-slot": "alert-dialog-content",
 	className: cn("fixed top-1/2 left-1/2 z-70 w-[min(28rem,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2", "rounded-lg border border-border bg-surface p-5 shadow-(--shadow-lg) outline-none", "transition-[opacity,transform] duration-(--motion-base)", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-ending-style:scale-95 data-ending-style:opacity-0", className),
 	...props,
 	children
-})] });
+})] }) });
 const AlertDialogTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(AlertDialog$1.Title, {
 	className: cn("text-heading-3 font-semibold text-text", className),
 	...props
@@ -181,7 +181,7 @@ function Reading({ tone, onPress, label, children }) {
 		})
 	});
 }
-function TerminalStatusLine({ state, rateLimits, connection, onOpenStatus, onOpenContext, onOpenUsage }) {
+function TerminalStatusLine({ className, state, rateLimits, connection, onOpenStatus, onOpenContext, onOpenUsage }) {
 	const presentation = statusPresentation({
 		status: state.status,
 		connection
@@ -234,6 +234,7 @@ function TerminalStatusLine({ state, rateLimits, connection, onOpenStatus, onOpe
 	return /* @__PURE__ */ jsx(Row, {
 		"data-slot": "status-line",
 		tone: "dim",
+		className,
 		children: parts.map((part, index) => /* @__PURE__ */ jsxs("span", { children: [index > 0 ? /* @__PURE__ */ jsx(Ink, {
 			tone: "faint",
 			children: " · "
@@ -242,12 +243,12 @@ function TerminalStatusLine({ state, rateLimits, connection, onOpenStatus, onOpe
 }
 //#endregion
 //#region src/components/agent/SessionList.tsx
-function SessionListItem({ session, active, onSelect, onDelete }) {
+function SessionListItem({ session, active, onSelect, onDelete, className }) {
 	const meta = STATUS_META[session.status];
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "session-list-item",
 		"data-active": active || void 0,
-		className: cn("group flex w-full items-center gap-2 rounded-md border border-transparent px-2.5 py-2 text-left transition-colors", active ? "border-border bg-surface" : "hover:bg-surface-hover"),
+		className: cn("group flex w-full items-center gap-2 rounded-md border border-transparent px-2.5 py-2 text-left transition-colors", active ? "border-border bg-surface" : "hover:bg-surface-hover", className),
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => onSelect?.(session.id),
@@ -310,150 +311,6 @@ function SessionList({ sessions, activeId, onSelect, onDelete, emptyText = "No s
 	});
 }
 //#endregion
-//#region src/components/agent/ContextRing.tsx
-/**
-* How full a session's context window is, sized for a **list row**.
-*
-* The reading the session screen has always drawn, moved somewhere it answers a
-* question the session screen cannot: *which* of these thirty sessions is
-* bloating. That is also why it is a ring and not a number — across a list, a
-* ring is read at a glance and `71%` has to be read one row at a time.
-*
-* **Absent draws nothing, and absent is not zero.** A promptless session, a
-* parked one from before the field existed, or an engine that reports no window
-* has no reading; an empty ring would claim its context is empty rather than
-* unknown. The title carries the exact numbers for anyone who wants them.
-*
-* Shared rather than spelled per client: the dashboard's row and the VS Code
-* sidebar's card both draw it, and two copies would be two sets of thresholds
-* the day one of them is nudged.
-*/
-function ContextRing({ usage, size = 11, className }) {
-	if (usage === void 0) return null;
-	return /* @__PURE__ */ jsx("span", {
-		title: `Context ${usage.percentage.toFixed(0)}% · ${formatTokens(usage.totalTokens)} / ${formatTokens(usage.maxTokens)}`,
-		className: cn("shrink-0 leading-none", meterColorClass(usage.percentage), className),
-		children: /* @__PURE__ */ jsx(ProgressRing, {
-			value: usage.percentage,
-			size,
-			strokeWidth: 2
-		})
-	});
-}
-//#endregion
-//#region src/components/agent/EngineIcon.tsx
-/**
-* The engine's own mark, monochrome.
-*
-* Inlined rather than depended on: the React package these come from
-* (`@lobehub/icons`) pulls antd, `@lobehub/ui` and a second copy of
-* lucide-react — an absurd amount of bundle for a few glyphs in a sidebar.
-* These are paths from `@lobehub/icons-static-svg` (MIT, © LobeHub), already
-* `fill="currentColor"` single-path marks, so they take the row's colour like
-* any other glyph and need no light/dark variants.
-*
-* The marks are trademarks of their owners (Anthropic, OpenAI, Google,
-* DeepSeek, Moonshot), used here only to identify which engine a session runs
-* on.
-*
-* Codex is drawn as OpenAI: the session's engine *is* OpenAI's, and OpenAI's
-* mark is the one a person recognises at 12px.
-*/
-const PATHS = {
-	claude: {
-		title: "Claude",
-		d: "M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"
-	},
-	codex: {
-		title: "OpenAI",
-		d: "M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z"
-	},
-	gemini: {
-		title: "Gemini",
-		d: "M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"
-	},
-	deepseek: {
-		title: "DeepSeek",
-		d: "M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z"
-	},
-	moonshot: {
-		title: "Moonshot",
-		d: "M1.052 16.916l9.539 2.552a21.007 21.007 0 00.06 2.033l5.956 1.593a11.997 11.997 0 01-5.586.865l-.18-.016-.044-.004-.084-.009-.094-.01a11.605 11.605 0 01-.157-.02l-.107-.014-.11-.016a11.962 11.962 0 01-.32-.051l-.042-.008-.075-.013-.107-.02-.07-.015-.093-.019-.075-.016-.095-.02-.097-.023-.094-.022-.068-.017-.088-.022-.09-.024-.095-.025-.082-.023-.109-.03-.062-.02-.084-.025-.093-.028-.105-.034-.058-.019-.08-.026-.09-.031-.066-.024a6.293 6.293 0 01-.044-.015l-.068-.025-.101-.037-.057-.022-.08-.03-.087-.035-.088-.035-.079-.032-.095-.04-.063-.028-.063-.027a5.655 5.655 0 01-.041-.018l-.066-.03-.103-.047-.052-.024-.096-.046-.062-.03-.084-.04-.086-.044-.093-.047-.052-.027-.103-.055-.057-.03-.058-.032a6.49 6.49 0 01-.046-.026l-.094-.053-.06-.034-.051-.03-.072-.041-.082-.05-.093-.056-.052-.032-.084-.053-.061-.039-.079-.05-.07-.047-.053-.035a7.785 7.785 0 01-.054-.036l-.044-.03-.044-.03a6.066 6.066 0 01-.04-.028l-.057-.04-.076-.054-.069-.05-.074-.054-.056-.042-.076-.057-.076-.059-.086-.067-.045-.035-.064-.052-.074-.06-.089-.073-.046-.039-.046-.039a7.516 7.516 0 01-.043-.037l-.045-.04-.061-.053-.07-.062-.068-.06-.062-.058-.067-.062-.053-.05-.088-.084a13.28 13.28 0 01-.099-.097l-.029-.028-.041-.042-.069-.07-.05-.051-.05-.053a6.457 6.457 0 01-.168-.179l-.08-.088-.062-.07-.071-.08-.042-.049-.053-.062-.058-.068-.046-.056a7.175 7.175 0 01-.027-.033l-.045-.055-.066-.082-.041-.052-.05-.064-.02-.025a11.99 11.99 0 01-1.44-2.402zm-1.02-5.794l11.353 3.037a20.468 20.468 0 00-.469 2.011l10.817 2.894a12.076 12.076 0 01-1.845 2.005L.657 15.923l-.016-.046-.035-.104a11.965 11.965 0 01-.05-.153l-.007-.023a11.896 11.896 0 01-.207-.741l-.03-.126-.018-.08-.021-.097-.018-.081-.018-.09-.017-.084-.018-.094c-.026-.141-.05-.283-.071-.426l-.017-.118-.011-.083-.013-.102a12.01 12.01 0 01-.019-.161l-.005-.047a12.12 12.12 0 01-.034-2.145zm1.593-5.15l11.948 3.196c-.368.605-.705 1.231-1.01 1.875l11.295 3.022c-.142.82-.368 1.612-.668 2.365l-11.55-3.09L.124 10.26l.015-.1.008-.049.01-.067.015-.087.018-.098c.026-.148.056-.295.088-.442l.028-.124.02-.085.024-.097c.022-.09.045-.18.07-.268l.028-.102.023-.083.03-.1.025-.082.03-.096.026-.082.031-.095a11.896 11.896 0 011.01-2.232zm4.442-4.4L17.352 4.59a20.77 20.77 0 00-1.688 1.721l7.823 2.093c.267.852.442 1.744.513 2.665L2.106 5.213l.045-.065.027-.04.04-.055.046-.065.055-.076.054-.072.064-.086.05-.065.057-.073.055-.07.06-.074.055-.069.065-.077.054-.066.066-.077.053-.06.072-.082.053-.06.067-.074.054-.058.073-.078.058-.06.063-.067.168-.17.1-.098.059-.056.076-.071a12.084 12.084 0 012.272-1.677zM12.017 0h.097l.082.001.069.001.054.002.068.002.046.001.076.003.047.002.06.003.054.002.087.005.105.007.144.011.088.007.044.004.077.008.082.008.047.005.102.012.05.006.108.014.081.01.042.006.065.01.207.032.07.012.065.011.14.026.092.018.11.022.046.01.075.016.041.01L14.7.3l.042.01.065.015.049.012.071.017.096.024.112.03.113.03.113.032.05.015.07.02.078.024.073.023.05.016.05.016.076.025.099.033.102.036.048.017.064.023.093.034.11.041.116.045.1.04.047.02.06.024.041.018.063.026.04.018.057.025.11.048.1.046.074.035.075.036.06.028.092.046.091.045.102.052.053.028.049.026.046.024.06.033.041.022.052.029.088.05.106.06.087.051.057.034.053.032.096.059.088.055.098.062.036.024.064.041.084.056.04.027.062.042.062.043.023.017c.054.037.108.075.161.114l.083.06.065.048.056.043.086.065.082.064.04.03.05.041.086.069.079.065.085.071c.712.6 1.353 1.283 1.909 2.031L7.222.994l.062-.027.065-.028.081-.034.086-.035c.113-.045.227-.09.341-.131l.096-.035.093-.033.084-.03.096-.031c.087-.03.176-.058.264-.085l.091-.027.086-.025.102-.03.085-.023.1-.026L9.04.37l.09-.023.091-.022.095-.022.09-.02.098-.021.091-.02.095-.018.092-.018.1-.018.091-.016.098-.017.092-.014.097-.015.092-.013.102-.013.091-.012.105-.012.09-.01.105-.01c.093-.01.186-.018.28-.024l.106-.008.09-.005.11-.006.093-.004.1-.004.097-.002.099-.002.197-.002z"
-	}
-};
-/**
-* Which mark a session wears.
-*
-* The two first-party engines are named directly. A `provider` session is
-* whatever the host wired up, so its *model* is the only thing that says whose
-* it is — sniffed loosely on purpose (`gemini-2.5-pro`, `deepseek-chat`,
-* `kimi-k2`), and falling through to no mark rather than guessing wrong.
-*/
-function engineMark(engine, model) {
-	if (engine === "claude") return "claude";
-	if (engine === "codex") return "codex";
-	const id = model?.toLowerCase() ?? "";
-	if (!id) return void 0;
-	if (id.includes("gemini")) return "gemini";
-	if (id.includes("deepseek")) return "deepseek";
-	if (id.includes("moonshot") || id.includes("kimi")) return "moonshot";
-	if (id.includes("claude")) return "claude";
-	if (id.startsWith("gpt") || id.startsWith("o1") || id.startsWith("o3") || id.includes("openai")) return "codex";
-}
-/**
-* Which engines wear their vendor's colour, and **how far it reaches**.
-*
-* `MARK` is the glyph, `TEXT` is the model name beside it. They are the same for
-* Anthropic and deliberately not for OpenAI, because the two brands differ in
-* kind rather than in hue: coral is an accent, and OpenAI's guidelines forbid
-* adding colour to the mark at all, so theirs is pure white/black. At full
-* contrast that is right on a 12px glyph and wrong on an 11px label — a
-* pure-white model name is *brighter than the session title above it*, which
-* inverts the row's whole hierarchy to say something the mark has already said.
-* So OpenAI's name keeps the muted line it always had, which is also the most
-* literal reading of "don't add any colors".
-*
-* Anything absent falls through to muted on both counts.
-*/
-const VENDOR_MARK = {
-	claude: "text-vendor-claude",
-	codex: "text-vendor-openai"
-};
-const VENDOR_TEXT = { claude: "text-vendor-claude" };
-/** The colour a session's engine mark wears. Pass it to `EngineIcon`'s
-*  `className` rather than to a parent: the svg carries its own `text-fg-3`,
-*  and only a class on the element itself is merged over it. */
-function vendorMarkClass(engine, model) {
-	return VENDOR_MARK[engineMark(engine, model) ?? ""] ?? "text-fg-3";
-}
-/** The colour the model *name* wears beside that mark — muted unless the vendor
-*  is one whose accent survives at label size. See `VENDOR_TEXT`.
-*
-*  The fallback is `text-fg-3` rather than the metadata line's own `text-fg-4`,
-*  so an unbranded model still sits one step above the project and gateway
-*  beside it — the order the spec lists them in, held without a colour. */
-function vendorTextClass(engine, model) {
-	return VENDOR_TEXT[engineMark(engine, model) ?? ""] ?? "text-fg-3";
-}
-function EngineIcon({ engine, model, className }) {
-	const mark = PATHS[engineMark(engine, model) ?? ""];
-	if (!mark) return /* @__PURE__ */ jsx("span", {
-		"aria-hidden": true,
-		title: engine,
-		className: cn("shrink-0 text-fg-3", className),
-		children: "·"
-	});
-	return /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 24 24",
-		fill: "currentColor",
-		fillRule: "evenodd",
-		role: "img",
-		"aria-label": mark.title,
-		className: cn("size-3 shrink-0 text-fg-3", className),
-		children: [/* @__PURE__ */ jsx("title", { children: mark.title }), /* @__PURE__ */ jsx("path", { d: mark.d })]
-	});
-}
-//#endregion
 //#region src/components/agent/ProjectIcon.tsx
 /**
 * A project's icon — the render side of protocol's `ProjectIcon`, for a list
@@ -624,21 +481,224 @@ function ProjectIcon({ icon, src, name, className }) {
 			className: cn("inline-block size-3 shrink-0 object-contain", className)
 		});
 	}
-	return /* @__PURE__ */ jsx(GLYPHS[icon.name] ?? Folder, { className: cn("inline-block size-3 shrink-0", className) });
+	return /* @__PURE__ */ jsx(GLYPHS[icon.name] ?? Folder, { className: cn("inline-block size-3 shrink-0", className) });
+}
+//#endregion
+//#region src/components/agent/ContextRing.tsx
+/**
+* How full a session's context window is, sized for a **list row**.
+*
+* The reading the session screen has always drawn, moved somewhere it answers a
+* question the session screen cannot: *which* of these thirty sessions is
+* bloating. That is also why it is a ring and not a number — across a list, a
+* ring is read at a glance and `71%` has to be read one row at a time.
+*
+* **Absent draws nothing, and absent is not zero.** A promptless session, a
+* parked one from before the field existed, or an engine that reports no window
+* has no reading; an empty ring would claim its context is empty rather than
+* unknown. The title carries the exact numbers for anyone who wants them.
+*
+* Shared rather than spelled per client: the dashboard's row and the VS Code
+* sidebar's card both draw it, and two copies would be two sets of thresholds
+* the day one of them is nudged.
+*/
+function ContextRing({ usage, size = 11, className }) {
+	if (usage === void 0) return null;
+	return /* @__PURE__ */ jsx("span", {
+		title: `Context ${usage.percentage.toFixed(0)}% · ${formatTokens(usage.totalTokens)} / ${formatTokens(usage.maxTokens)}`,
+		className: cn("shrink-0 leading-none", meterColorClass(usage.percentage), className),
+		children: /* @__PURE__ */ jsx(ProgressRing, {
+			value: usage.percentage,
+			size,
+			strokeWidth: 2
+		})
+	});
+}
+//#endregion
+//#region src/components/agent/EngineIcon.tsx
+/**
+* The engine's own mark, monochrome.
+*
+* Inlined rather than depended on: the React package these come from
+* (`@lobehub/icons`) pulls antd, `@lobehub/ui` and a second copy of
+* lucide-react — an absurd amount of bundle for a few glyphs in a sidebar.
+* These are paths from `@lobehub/icons-static-svg` (MIT, © LobeHub), already
+* `fill="currentColor"` single-path marks, so they take the row's colour like
+* any other glyph and need no light/dark variants.
+*
+* The marks are trademarks of their owners (Anthropic, OpenAI, Google,
+* DeepSeek, Moonshot), used here only to identify which engine a session runs
+* on.
+*
+* Codex is drawn as OpenAI: the session's engine *is* OpenAI's, and OpenAI's
+* mark is the one a person recognises at 12px.
+*/
+const PATHS = {
+	claude: {
+		title: "Claude",
+		d: "M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"
+	},
+	codex: {
+		title: "OpenAI",
+		d: "M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z"
+	},
+	gemini: {
+		title: "Gemini",
+		d: "M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"
+	},
+	deepseek: {
+		title: "DeepSeek",
+		d: "M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z"
+	},
+	moonshot: {
+		title: "Moonshot",
+		d: "M1.052 16.916l9.539 2.552a21.007 21.007 0 00.06 2.033l5.956 1.593a11.997 11.997 0 01-5.586.865l-.18-.016-.044-.004-.084-.009-.094-.01a11.605 11.605 0 01-.157-.02l-.107-.014-.11-.016a11.962 11.962 0 01-.32-.051l-.042-.008-.075-.013-.107-.02-.07-.015-.093-.019-.075-.016-.095-.02-.097-.023-.094-.022-.068-.017-.088-.022-.09-.024-.095-.025-.082-.023-.109-.03-.062-.02-.084-.025-.093-.028-.105-.034-.058-.019-.08-.026-.09-.031-.066-.024a6.293 6.293 0 01-.044-.015l-.068-.025-.101-.037-.057-.022-.08-.03-.087-.035-.088-.035-.079-.032-.095-.04-.063-.028-.063-.027a5.655 5.655 0 01-.041-.018l-.066-.03-.103-.047-.052-.024-.096-.046-.062-.03-.084-.04-.086-.044-.093-.047-.052-.027-.103-.055-.057-.03-.058-.032a6.49 6.49 0 01-.046-.026l-.094-.053-.06-.034-.051-.03-.072-.041-.082-.05-.093-.056-.052-.032-.084-.053-.061-.039-.079-.05-.07-.047-.053-.035a7.785 7.785 0 01-.054-.036l-.044-.03-.044-.03a6.066 6.066 0 01-.04-.028l-.057-.04-.076-.054-.069-.05-.074-.054-.056-.042-.076-.057-.076-.059-.086-.067-.045-.035-.064-.052-.074-.06-.089-.073-.046-.039-.046-.039a7.516 7.516 0 01-.043-.037l-.045-.04-.061-.053-.07-.062-.068-.06-.062-.058-.067-.062-.053-.05-.088-.084a13.28 13.28 0 01-.099-.097l-.029-.028-.041-.042-.069-.07-.05-.051-.05-.053a6.457 6.457 0 01-.168-.179l-.08-.088-.062-.07-.071-.08-.042-.049-.053-.062-.058-.068-.046-.056a7.175 7.175 0 01-.027-.033l-.045-.055-.066-.082-.041-.052-.05-.064-.02-.025a11.99 11.99 0 01-1.44-2.402zm-1.02-5.794l11.353 3.037a20.468 20.468 0 00-.469 2.011l10.817 2.894a12.076 12.076 0 01-1.845 2.005L.657 15.923l-.016-.046-.035-.104a11.965 11.965 0 01-.05-.153l-.007-.023a11.896 11.896 0 01-.207-.741l-.03-.126-.018-.08-.021-.097-.018-.081-.018-.09-.017-.084-.018-.094c-.026-.141-.05-.283-.071-.426l-.017-.118-.011-.083-.013-.102a12.01 12.01 0 01-.019-.161l-.005-.047a12.12 12.12 0 01-.034-2.145zm1.593-5.15l11.948 3.196c-.368.605-.705 1.231-1.01 1.875l11.295 3.022c-.142.82-.368 1.612-.668 2.365l-11.55-3.09L.124 10.26l.015-.1.008-.049.01-.067.015-.087.018-.098c.026-.148.056-.295.088-.442l.028-.124.02-.085.024-.097c.022-.09.045-.18.07-.268l.028-.102.023-.083.03-.1.025-.082.03-.096.026-.082.031-.095a11.896 11.896 0 011.01-2.232zm4.442-4.4L17.352 4.59a20.77 20.77 0 00-1.688 1.721l7.823 2.093c.267.852.442 1.744.513 2.665L2.106 5.213l.045-.065.027-.04.04-.055.046-.065.055-.076.054-.072.064-.086.05-.065.057-.073.055-.07.06-.074.055-.069.065-.077.054-.066.066-.077.053-.06.072-.082.053-.06.067-.074.054-.058.073-.078.058-.06.063-.067.168-.17.1-.098.059-.056.076-.071a12.084 12.084 0 012.272-1.677zM12.017 0h.097l.082.001.069.001.054.002.068.002.046.001.076.003.047.002.06.003.054.002.087.005.105.007.144.011.088.007.044.004.077.008.082.008.047.005.102.012.05.006.108.014.081.01.042.006.065.01.207.032.07.012.065.011.14.026.092.018.11.022.046.01.075.016.041.01L14.7.3l.042.01.065.015.049.012.071.017.096.024.112.03.113.03.113.032.05.015.07.02.078.024.073.023.05.016.05.016.076.025.099.033.102.036.048.017.064.023.093.034.11.041.116.045.1.04.047.02.06.024.041.018.063.026.04.018.057.025.11.048.1.046.074.035.075.036.06.028.092.046.091.045.102.052.053.028.049.026.046.024.06.033.041.022.052.029.088.05.106.06.087.051.057.034.053.032.096.059.088.055.098.062.036.024.064.041.084.056.04.027.062.042.062.043.023.017c.054.037.108.075.161.114l.083.06.065.048.056.043.086.065.082.064.04.03.05.041.086.069.079.065.085.071c.712.6 1.353 1.283 1.909 2.031L7.222.994l.062-.027.065-.028.081-.034.086-.035c.113-.045.227-.09.341-.131l.096-.035.093-.033.084-.03.096-.031c.087-.03.176-.058.264-.085l.091-.027.086-.025.102-.03.085-.023.1-.026L9.04.37l.09-.023.091-.022.095-.022.09-.02.098-.021.091-.02.095-.018.092-.018.1-.018.091-.016.098-.017.092-.014.097-.015.092-.013.102-.013.091-.012.105-.012.09-.01.105-.01c.093-.01.186-.018.28-.024l.106-.008.09-.005.11-.006.093-.004.1-.004.097-.002.099-.002.197-.002z"
+	}
+};
+/**
+* Which mark a session wears.
+*
+* The two first-party engines are named directly. A `provider` session is
+* whatever the host wired up, so its *model* is the only thing that says whose
+* it is — sniffed loosely on purpose (`gemini-2.5-pro`, `deepseek-chat`,
+* `kimi-k2`), and falling through to no mark rather than guessing wrong.
+*/
+function engineMark(engine, model) {
+	if (engine === "claude") return "claude";
+	if (engine === "codex") return "codex";
+	const id = model?.toLowerCase() ?? "";
+	if (!id) return void 0;
+	if (id.includes("gemini")) return "gemini";
+	if (id.includes("deepseek")) return "deepseek";
+	if (id.includes("moonshot") || id.includes("kimi")) return "moonshot";
+	if (id.includes("claude")) return "claude";
+	if (id.startsWith("gpt") || id.startsWith("o1") || id.startsWith("o3") || id.includes("openai")) return "codex";
+}
+/**
+* Which engines wear their vendor's colour, and **how far it reaches**.
+*
+* `MARK` is the glyph, `TEXT` is the model name beside it. They are the same for
+* Anthropic and deliberately not for OpenAI, because the two brands differ in
+* kind rather than in hue: coral is an accent, and OpenAI's guidelines forbid
+* adding colour to the mark at all, so theirs is pure white/black. At full
+* contrast that is right on a 12px glyph and wrong on an 11px label — a
+* pure-white model name is *brighter than the session title above it*, which
+* inverts the row's whole hierarchy to say something the mark has already said.
+* So OpenAI's name keeps the muted line it always had, which is also the most
+* literal reading of "don't add any colors".
+*
+* Anything absent falls through to muted on both counts.
+*/
+const VENDOR_MARK = {
+	claude: "text-vendor-claude",
+	codex: "text-vendor-openai"
+};
+const VENDOR_TEXT = { claude: "text-vendor-claude" };
+/** The colour a session's engine mark wears. Pass it to `EngineIcon`'s
+*  `className` rather than to a parent: the svg carries its own `text-fg-3`,
+*  and only a class on the element itself is merged over it. */
+function vendorMarkClass(engine, model) {
+	return VENDOR_MARK[engineMark(engine, model) ?? ""] ?? "text-fg-3";
+}
+/** The colour the model *name* wears beside that mark — muted unless the vendor
+*  is one whose accent survives at label size. See `VENDOR_TEXT`.
+*
+*  The fallback is `text-fg-3` rather than the metadata line's own `text-fg-4`,
+*  so an unbranded model still sits one step above the project and gateway
+*  beside it — the order the spec lists them in, held without a colour. */
+function vendorTextClass(engine, model) {
+	return VENDOR_TEXT[engineMark(engine, model) ?? ""] ?? "text-fg-3";
+}
+function EngineIcon({ engine, model, className }) {
+	const mark = PATHS[engineMark(engine, model) ?? ""];
+	if (!mark) return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		title: engine,
+		className: cn("shrink-0 text-fg-3", className),
+		children: "·"
+	});
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		fillRule: "evenodd",
+		role: "img",
+		"aria-label": mark.title,
+		className: cn("size-3 shrink-0 text-fg-3", className),
+		children: [/* @__PURE__ */ jsx("title", { children: mark.title }), /* @__PURE__ */ jsx("path", { d: mark.d })]
+	});
+}
+//#endregion
+//#region src/components/agent/SessionStatusIcon.tsx
+/**
+* State as one glyph — a ringing bell when it wants a human, a spinner while it
+* works, a moon when it is only sleeping. Replaces the text badge: in a sidebar
+* the word costs more room than it earns, and the states that matter are the two
+* you can recognise without reading.
+*
+* **It reads `row.state`, not `info.status`, and that distinction is the whole
+* point of the row model.** `sessionState` already folds in the arm this glyph
+* cannot see for itself: a *background* sub-agent outlives its turn by design,
+* so the turn ends, `status` comes to rest at `idle`, and the agent keeps
+* working. Reading the raw status drew a **moon on a row filed under the
+* "Working" header** — the list contradicting itself on one line, which is
+* exactly what a derived view model exists to prevent. The value was in scope
+* and unread.
+*
+* The terminal statuses still come off `info.status`, because `ended` collapses
+* `failed` and `closed` into one bucket and those are worth telling apart here.
+*
+* It lives in its own file rather than inside the dashboard's browser because
+* the extension's cards draw it too, and a second copy there is how the two
+* lists last disagreed about what a parked session looks like.
+*/
+function SessionStatusIcon({ row, className }) {
+	const { info } = row;
+	const size = cn("size-4 shrink-0", className);
+	if (row.state === "attention") return /* @__PURE__ */ jsx(BellRing, { className: cn(size, "animate-pulse text-warning") });
+	if (row.state === "working") return /* @__PURE__ */ jsx(Spinner, { className: cn(size, "text-info") });
+	switch (info.status) {
+		case "failed": return /* @__PURE__ */ jsx(CircleAlert, { className: cn(size, "text-danger") });
+		case "closed": return /* @__PURE__ */ jsx(CircleSlash, { className: cn(size, "text-fg-4") });
+		case "parked": return /* @__PURE__ */ jsx(PauseCircle, { className: cn(size, "text-fg-3") });
+		default: return /* @__PURE__ */ jsx(Moon, { className: cn(size, "text-fg-4") });
+	}
 }
 //#endregion
 //#region src/components/agent/SessionSteps.tsx
-function sessionSteps(info, onSelectSubagent) {
-	return (info.subagents ?? []).map((sub) => ({
-		key: sub.toolUseId,
-		label: subagentLabel(sub),
-		noun: "agent",
-		kind: isAgentRecord(sub) ? "agent" : "task",
-		state: stepState(sub.status),
-		detail: sub.toolCount > 0 ? String(sub.toolCount) : void 0,
-		title: `${subagentLabel(sub)} · ${sub.toolCount} tool${sub.toolCount === 1 ? "" : "s"}`,
-		onSelect: () => onSelectSubagent(sub.toolUseId)
-	}));
+/**
+* The steps under one session, **agents first**.
+*
+* The two kinds do different things when pressed and are worth different
+* amounts of attention: an agent has work of its own to go and read, a task is a
+* marker in a transcript. Interleaved in dispatch order they read as one
+* undifferentiated list, and the rows you can actually open are scattered
+* through it. Grouped, the openable ones are a block at the top and the markers
+* are a tail you can skip.
+*
+* Stable **within** each group, deliberately: dispatch order is the only order
+* these records have that means anything (it is the order the work was started
+* in), so the sort partitions and never reorders inside a partition.
+*
+* `onSelect` is handed the **kind** as well as the id, because the two kinds go
+* to different places — see `SessionItem`, which is what routes them. Passing
+* only the id is what let a task be opened as if it were an agent, and a framed
+* task id matches no items, so the panel drew an **empty agent view**.
+*/
+function sessionSteps(info, onSelect) {
+	const steps = (info.subagents ?? []).map((sub) => {
+		const kind = isAgentRecord(sub) ? "agent" : "task";
+		return {
+			key: sub.toolUseId,
+			label: subagentLabel(sub),
+			noun: "agent",
+			kind,
+			state: stepState(sub.status),
+			detail: sub.toolCount > 0 ? String(sub.toolCount) : void 0,
+			title: `${subagentLabel(sub)} · ${sub.toolCount} tool${sub.toolCount === 1 ? "" : "s"}`,
+			onSelect: () => onSelect(sub.toolUseId, kind)
+		};
+	});
+	return [...steps.filter((s) => s.kind === "agent"), ...steps.filter((s) => s.kind === "task")];
 }
 function stepState(status) {
 	switch (status) {
@@ -674,7 +734,7 @@ function StepToggle({ expanded, running, total, noun, onToggle }) {
 			e.stopPropagation();
 			onToggle();
 		},
-		className: cn("flex shrink-0 items-center gap-0.5 rounded px-0.5 outline-none", "hover:bg-surface-hover hover:text-fg-2", running > 0 ? "text-info" : "text-fg-4"),
+		className: cn("flex shrink-0 items-center gap-0.5 rounded-[4px] py-0.5 pr-1 pl-0.5 outline-none", "text-[0.75rem] leading-3 hover:bg-row-hover hover:text-fg-2", running > 0 ? "text-info" : "text-fg-4"),
 		children: [/* @__PURE__ */ jsx(Chevron, { className: "size-3" }), /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums",
 			children: label
@@ -682,64 +742,276 @@ function StepToggle({ expanded, running, total, noun, onToggle }) {
 	});
 }
 /**
-* One step under its session. Pressing an **agent** hands the panel over to that
-* agent's own work — it is not a session and never becomes one, but it does now
-* have a surface (`SessionPanel.openSubagent`). A host that cannot frame one
-* falls back to revealing its `Task` row, which was this row's only meaning
-* before the takeover existed. A **task** is not pressable at all; see
-* {@link Step.kind}.
+* One step under its session — **pressable, all of them**, and what a press
+* means is what tells the two kinds apart.
+*
+* Pressing an **agent** hands the panel over to that agent's own work
+* (`SessionPanel.openSubagent`): it is not a session and never becomes one, but
+* it has a surface, so it can be the selected thing. Pressing a **task** selects
+* the *session* and travels to that task's marker inside it — a task is a
+* reference to a place in a transcript, not a thing with a screen, so it can be
+* followed but never held.
 *
-* Divided from the row's header and from each other by a rule rather than by
-* indentation: these are a list *inside* the row, and at 11px an indent is not
-* enough to say so. The rule is black at 25% so it darkens whatever the row is
-* filled with, selected or not, without needing a colour per state.
+* That is a reversal, and a deliberate one. A task used to be inert markup on
+* the argument that "a disabled-looking button still announces itself as one" —
+* correct about the markup, wrong about the premise, because there *was* always
+* somewhere to go and the row simply swallowed the click on its way there. A row
+* that looks like a list item, sits in a list, and does nothing when pressed is
+* the worse lie. So every step answers the pointer and every step answers a
+* press; only what the press does differs.
+*
+* Divided from the card's header by **indentation and its own hit shape**, not
+* by a rule. The rules came first, on the argument that at 11px an indent is not
+* enough to say "list inside a row" — and they were right about the reading and
+* wrong about the cost: a stack of hairlines across every open card turned the
+* list into a ledger, and a rule cannot answer a pointer. A step that lights up
+* under the cursor and fills when it is the one on screen says *list* far more
+* plainly than a line between two of them, and it says it while doing the job
+* the rule could not.
+*
+* **Only an agent can wear the selection**, and `active` is guarded on that here
+* rather than trusted from the caller: a host that hands back a task's key is
+* describing where it navigated, not what it selected, and the row must not
+* paint itself blue for it.
+*
+* The hover is `--row-active` — **alpha, not a flat fill** — because this row
+* has to answer the pointer on three different grounds: a transparent card, a
+* blue one (its session is selected), and a grey one (a sibling agent is). A
+* flat value tuned for any of those is wrong on the other two; a tint darkens or
+* lifts whatever it lands on. It is the one place in the list where the alpha
+* token earns its keep.
 */
-function StepRow({ step, onSelect }) {
+function StepRow({ step, active = false, onSelect }) {
 	const agent = step.kind === "agent";
+	const selected = active && agent;
 	const body = step.state === "failed" ? "text-danger" : agent ? "text-success" : "text-fg-4";
-	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsx(StepIcon, {
-			state: step.state,
-			kind: step.kind
-		}),
-		/* @__PURE__ */ jsx("span", {
-			className: "min-w-0 flex-1 truncate",
-			children: step.label
-		}),
-		step.detail ? /* @__PURE__ */ jsx("span", {
-			className: "shrink-0 tabular-nums text-fg-4",
-			children: step.detail
-		}) : null,
-		agent ? /* @__PURE__ */ jsx(ArrowRight, { className: "size-3 shrink-0 opacity-60" }) : null
-	] });
-	const shape = "flex w-full items-center gap-2 border-t border-black/25 py-1 pl-3 pr-2 text-left text-label outline-none";
-	if (!agent) return /* @__PURE__ */ jsx("div", {
-		title: step.title,
-		onClick: (e) => e.stopPropagation(),
-		className: cn(shape, body),
-		children: content
-	});
-	return /* @__PURE__ */ jsx("button", {
+	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		title: step.title,
+		"aria-current": selected || void 0,
 		onClick: (e) => {
 			e.stopPropagation();
 			onSelect();
 		},
-		className: cn(shape, "hover:bg-surface-hover", body),
-		children: content
+		className: cn("flex w-full items-center gap-1.5 rounded-[4px] py-1 pr-2.5 pl-3.5", "text-left text-micro outline-none", selected ? "bg-row-selected" : "hover:bg-row-active", body),
+		children: [
+			/* @__PURE__ */ jsx(StepIcon, {
+				state: step.state,
+				kind: step.kind
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate",
+				children: step.label
+			}),
+			step.detail ? /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 tabular-nums text-fg-4",
+				children: step.detail
+			}) : null,
+			agent ? /* @__PURE__ */ jsx(ArrowRight, { className: "size-3.5 shrink-0 text-fg-4" }) : null
+		]
 	});
 }
 function StepIcon({ state, kind }) {
-	if (kind === "task" && state !== "running" && state !== "failed") return /* @__PURE__ */ jsx(Dot, { className: "size-3 shrink-0" });
+	if (kind === "task" && state !== "running" && state !== "failed") return /* @__PURE__ */ jsx(Dot, { className: "size-[11px] shrink-0" });
 	switch (state) {
-		case "running": return /* @__PURE__ */ jsx(Spinner, { className: "size-3 shrink-0" });
-		case "failed": return /* @__PURE__ */ jsx(CircleAlert, { className: "size-3 shrink-0" });
-		case "pending": return /* @__PURE__ */ jsx(PauseCircle, { className: "size-3 shrink-0" });
-		default: return /* @__PURE__ */ jsx(Check, { className: "size-3 shrink-0" });
+		case "running": return /* @__PURE__ */ jsx(Spinner, { className: "size-[11px] shrink-0" });
+		case "failed": return /* @__PURE__ */ jsx(CircleAlert, { className: "size-[11px] shrink-0" });
+		case "pending": return /* @__PURE__ */ jsx(PauseCircle, { className: "size-[11px] shrink-0" });
+		default: return /* @__PURE__ */ jsx(Check, { className: "size-[11px] shrink-0" });
 	}
 }
 //#endregion
+//#region src/components/agent/SessionItem.tsx
+function SessionItem({ row, active = false, activeStepKey, showGateway, showProject = true, projectIcons, expanded, onExpandedChange, onSelect, onSelectSubagent, onRevealStep, onRename, renameOn = "doubleClick", editing, onEditingChange, actions, className }) {
+	const { info } = row;
+	const [ownExpanded, setOwnExpanded] = useState(false);
+	const open = expanded ?? ownExpanded;
+	const setOpen = (next) => {
+		setOwnExpanded(next);
+		onExpandedChange?.(next);
+	};
+	const [ownEditing, setOwnEditing] = useState(false);
+	const isEditing = editing ?? ownEditing;
+	const setEditing = (next) => {
+		setOwnEditing(next);
+		onEditingChange?.(next);
+	};
+	const engine = info.engine ?? "claude";
+	const project = showProject ? projectLabel(row) : projectSubpath(row);
+	const projectIcon = showProject ? info.project?.icon : void 0;
+	const iconSrc = projectIcon?.type === "image" ? projectIcons?.[projectIcon.hash] : void 0;
+	const cost = formatCost(info.totalCostUsd);
+	const extras = [
+		showGateway ? row.hostName : void 0,
+		info.profile ? `@${info.profile}` : void 0,
+		cost === "—" ? void 0 : cost
+	].filter((part) => Boolean(part));
+	const model = friendlyModel(info.model);
+	const parts = [];
+	if (model) parts.push(/* @__PURE__ */ jsx("span", {
+		className: vendorTextClass(engine, info.model),
+		children: model
+	}, "model"));
+	if (project !== void 0) parts.push(/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx(ProjectIcon, {
+		icon: projectIcon,
+		src: iconSrc,
+		name: project,
+		className: "mr-1.5 size-4 align-[-0.3em]"
+	}), project] }, "project"));
+	for (const extra of extras) parts.push(/* @__PURE__ */ jsx("span", { children: extra }, extra));
+	const steps = sessionSteps(info, (toolUseId, kind) => {
+		if (kind === "agent") return onSelectSubagent ? onSelectSubagent(toolUseId) : onSelect?.();
+		return onRevealStep ? onRevealStep(toolUseId) : onSelect?.();
+	});
+	const holdsOpenAgent = steps.some((s) => s.kind === "agent" && s.key === activeStepKey);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "session-item",
+		"data-active": active || void 0,
+		role: "button",
+		tabIndex: 0,
+		onClick: (e) => {
+			if (e.detail > 1 || isEditing) return;
+			onSelect?.();
+		},
+		onKeyDown: (e) => {
+			if (e.target !== e.currentTarget) return;
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				onSelect?.();
+			}
+		},
+		className: cn("group flex w-full cursor-pointer flex-col p-1 text-left outline-none", "rounded-[4px] transition-colors focus-visible:ring-2 focus-visible:ring-ring", holdsOpenAgent ? "bg-row-selected-weak" : active ? "bg-row-selected" : "hover:bg-row-hover", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1 py-0.5 pr-0.5 pl-1.5",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex h-5 items-center gap-1.5 overflow-hidden",
+				children: [
+					/* @__PURE__ */ jsx(Gutter, { children: /* @__PURE__ */ jsx(SessionStatusIcon, { row }) }),
+					isEditing && onRename ? /* @__PURE__ */ jsx(NameEditor, {
+						initial: info.title ?? "",
+						onCommit: (title) => {
+							setEditing(false);
+							if (title !== (info.title ?? "")) onRename(title);
+						},
+						onCancel: () => setEditing(false)
+					}) : /* @__PURE__ */ jsx("span", {
+						onDoubleClick: onRename && renameOn === "doubleClick" ? (e) => {
+							e.stopPropagation();
+							setEditing(true);
+						} : void 0,
+						className: "min-w-0 flex-1 truncate text-body-sm font-medium tracking-[-0.005em] text-fg-1",
+						children: sessionLabel(info)
+					}),
+					row.unseen > 0 ? /* @__PURE__ */ jsx("span", {
+						title: `${row.unseen} new`,
+						className: cn("flex h-4 min-w-6 shrink-0 items-center justify-center rounded-full px-2", "text-[0.75rem] leading-none tracking-[-0.005em] tabular-nums", row.state === "working" || row.state === "attention" ? "bg-accent text-accent-fg" : "bg-badge text-badge-fg"),
+						children: row.unseen
+					}) : null,
+					/* @__PURE__ */ jsx(ContextRing, {
+						usage: info.contextUsage,
+						size: 16,
+						className: "p-0.5"
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex h-5 items-center gap-1.5 overflow-hidden text-body-sm tracking-[-0.005em]",
+				children: [
+					/* @__PURE__ */ jsx(Gutter, { children: /* @__PURE__ */ jsx(EngineIcon, {
+						engine,
+						model: info.model,
+						className: cn("size-4", vendorMarkClass(engine, info.model))
+					}) }),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate text-fg-4",
+						children: parts.map((part, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 ? " · " : "", part] }, i))
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "shrink-0 text-fg-4",
+						children: [parts.length > 0 ? "· " : "", formatRelativeTime(info.lastActivityAt ?? info.createdAt)]
+					}),
+					/* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1" }),
+					steps.length > 0 ? /* @__PURE__ */ jsx(StepToggle, {
+						expanded: open,
+						running: runningSteps(steps),
+						total: steps.length,
+						noun: steps[0].noun,
+						onToggle: () => setOpen(!open)
+					}) : null,
+					actions
+				]
+			})]
+		}), open && steps.length > 0 ? /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col",
+			children: steps.map((step) => /* @__PURE__ */ jsx(StepRow, {
+				step,
+				active: step.key === activeStepKey,
+				onSelect: step.onSelect
+			}, step.key))
+		}) : null]
+	});
+}
+/**
+* The one 16px cell both lines hang their glyph in.
+*
+* A shared column rather than a leading character: the state and the engine mark
+* are different widths and a bare glyph would let the two text columns start at
+* different x. Centring inside a fixed cell is what makes them agree.
+*/
+function Gutter({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "flex size-4 shrink-0 items-center justify-center",
+		children
+	});
+}
+/**
+* Enter commits, Escape cancels, blur commits — the editor's inline-rename feel.
+* An empty value is a deliberate "clear the name", which the gateway answers by
+* handing back the derived title.
+*
+* The blur rule needs one guard. Selecting a session focuses a different surface
+* — in the extension, a different VS Code view — so this document can lose focus
+* a tick after a double-click opened the editor, and an unguarded blur reads
+* that as "the user clicked away" and closes the editor in the frame it
+* appeared. `document.hasFocus()` tells the two apart: focus moving WITHIN this
+* document is the user leaving the field; the whole view losing focus is not.
+* When the window comes back, so does the caret.
+*/
+function NameEditor({ initial, onCommit, onCancel }) {
+	const [value, setValue] = useState(initial);
+	const ref = useRef(null);
+	useEffect(() => {
+		ref.current?.focus();
+		ref.current?.select();
+	}, []);
+	useEffect(() => {
+		const onWindowFocus = () => {
+			ref.current?.focus();
+			ref.current?.select();
+		};
+		window.addEventListener("focus", onWindowFocus);
+		return () => window.removeEventListener("focus", onWindowFocus);
+	}, []);
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		value,
+		spellCheck: false,
+		placeholder: "Session name",
+		"aria-label": "Session name",
+		onClick: (e) => e.stopPropagation(),
+		onDoubleClick: (e) => e.stopPropagation(),
+		onChange: (e) => setValue(e.target.value),
+		onBlur: () => {
+			if (document.hasFocus()) onCommit(value.trim());
+		},
+		onKeyDown: (e) => {
+			e.stopPropagation();
+			if (e.key === "Enter") onCommit(value.trim());
+			else if (e.key === "Escape") onCancel();
+		},
+		className: cn("-my-0.5 min-w-0 flex-1 rounded-sm border border-ring bg-bg px-1 py-px", "text-body-sm leading-5 text-fg-1 outline-none")
+	});
+}
+//#endregion
 //#region src/components/agent/SessionBrowser.tsx
 /**
 * How a list row is drawn, in one place, so `SidebarRow` in `web` matches this
@@ -760,7 +1032,7 @@ function StepIcon({ state, kind }) {
 function rowShapeClass(active) {
 	return cn("px-2 py-1.5 hover:bg-row-hover", active ? "mr-1 ml-0 rounded-r-md border-l-4 border-l-accent" : "mx-1 rounded-md");
 }
-function SessionBrowser({ rows, config, onConfigChange, scope, activeId, onSelect, onDelete, onRename, onClearContext, onSelectSubagent, emptyState, showControls = true, projectIcons, className }) {
+function SessionBrowser({ rows, config, onConfigChange, scope, activeId, activeSubagentId, onSelect, onDelete, onRename, onClearContext, onSelectSubagent, onRevealStep, emptyState, showControls = true, projectIcons, className }) {
 	const visible = useMemo(() => filterRows(rows, config, scope), [
 		rows,
 		config,
@@ -937,11 +1209,11 @@ function SessionBrowser({ rows, config, onConfigChange, scope, activeId, onSelec
 				title: "Nothing here",
 				description: "No session to show."
 			}) : /* @__PURE__ */ jsx("div", {
-				className: "flex flex-col gap-4",
+				className: "flex flex-col gap-4 px-1",
 				children: groups.map((group) => /* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col gap-1",
 					children: [config.groupBy !== "none" && group.label ? /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2 px-3 text-label font-medium text-fg-4",
+						className: "flex items-center gap-2 px-2 text-label font-medium text-fg-4",
 						children: [
 							config.groupBy === "project" ? /* @__PURE__ */ jsx(ProjectIcon, {
 								icon: group.rows[0]?.info.project?.icon,
@@ -960,6 +1232,7 @@ function SessionBrowser({ rows, config, onConfigChange, scope, activeId, onSelec
 					}) : null, group.rows.map((row) => /* @__PURE__ */ jsx(SessionRowItem, {
 						row,
 						active: row.info.id === activeId,
+						activeSubagentId,
 						showGateway: gateways.length > 1 && config.groupBy !== "gateway",
 						showProject: config.groupBy !== "project",
 						projectIcons,
@@ -967,7 +1240,8 @@ function SessionBrowser({ rows, config, onConfigChange, scope, activeId, onSelec
 						onDelete,
 						onRename,
 						onClearContext,
-						onSelectSubagent
+						onSelectSubagent,
+						onRevealStep
 					}, `${row.hostId}:${row.info.id}`))]
 				}, group.key))
 			})
@@ -981,202 +1255,65 @@ function iconSrcOf(row, icons) {
 	const icon = row?.info.project?.icon;
 	return icon?.type === "image" ? icons?.[icon.hash] : void 0;
 }
-function SessionRowItem({ row, active, showGateway, showProject = true, projectIcons, onSelect, onDelete, onRename, onClearContext, onSelectSubagent }) {
+function SessionRowItem({ row, active, activeSubagentId, showGateway, showProject = true, projectIcons, onSelect, onDelete, onRename, onClearContext, onSelectSubagent, onRevealStep }) {
 	const { info } = row;
 	const [editing, setEditing] = useState(false);
-	const [expanded, setExpanded] = useState(false);
-	const project = showProject ? projectLabel(row) : projectSubpath(row);
-	const projectIcon = showProject ? info.project?.icon : void 0;
-	const engine = info.engine ?? "claude";
-	const details = [
-		project,
-		showGateway ? row.hostName : void 0,
-		info.profile ? `@${info.profile}` : void 0,
-		formatCost(info.totalCostUsd)
-	].filter(Boolean);
-	const steps = sessionSteps(info, (toolUseId) => onSelectSubagent ? onSelectSubagent(row, toolUseId) : onSelect?.(row));
-	const cut = project === void 0 ? -1 : details.indexOf(project);
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "session-row",
-		"data-active": active || void 0,
-		onClick: () => !editing && onSelect?.(row),
-		className: cn("group flex cursor-pointer flex-col gap-0.5 text-left transition-colors", rowShapeClass(active === true)),
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-1.5",
-				children: [
-					/* @__PURE__ */ jsx(Gutter, { children: /* @__PURE__ */ jsx(SessionStatusIcon, { row }) }),
-					editing && onRename ? /* @__PURE__ */ jsx(NameEditor, {
-						initial: info.title ?? "",
-						onCommit: (title) => {
-							setEditing(false);
-							onRename(row, title);
-						},
-						onCancel: () => setEditing(false)
-					}) : /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: cn("min-w-0 flex-1 truncate text-left text-body-sm outline-none", active ? "font-medium text-fg-1" : "text-fg-2"),
-						children: sessionLabel(info)
-					}),
-					row.unseen > 0 ? /* @__PURE__ */ jsx("span", {
-						title: `${row.unseen} new`,
-						className: "shrink-0 rounded-full bg-accent px-1.5 text-label text-accent-fg",
-						children: row.unseen
-					}) : null,
-					/* @__PURE__ */ jsx("span", {
-						className: "shrink-0 text-label text-fg-4",
-						children: formatRelativeTime(info.lastActivityAt ?? info.createdAt)
-					}),
-					/* @__PURE__ */ jsx(ContextRing, { usage: info.contextUsage })
-				]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-1 text-label text-fg-4",
-				children: [
-					/* @__PURE__ */ jsx(Gutter, { children: /* @__PURE__ */ jsx(EngineIcon, {
-						engine,
-						model: info.model,
-						className: vendorMarkClass(engine, info.model)
-					}) }),
-					/* @__PURE__ */ jsxs("button", {
-						type: "button",
-						tabIndex: -1,
-						className: "min-w-0 flex-1 truncate text-left font-mono outline-none",
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								className: vendorTextClass(engine, info.model),
-								children: friendlyModel(info.model)
-							}),
-							details.length > 0 ? " · " : "",
-							cut < 0 ? details.join(" · ") : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-								details.slice(0, cut).map((part) => `${part} · `),
-								/* @__PURE__ */ jsx(ProjectIcon, {
-									icon: projectIcon,
-									src: iconSrcOf(row, projectIcons),
-									name: project,
-									className: "mr-1 align-[-0.2em]"
-								}),
-								details.slice(cut).join(" · ")
-							] })
-						]
-					}),
-					steps.length > 0 ? /* @__PURE__ */ jsx(StepToggle, {
-						expanded,
-						running: runningSteps(steps),
-						total: steps.length,
-						noun: steps[0].noun,
-						onToggle: () => setExpanded((v) => !v)
-					}) : null,
-					onRename && !editing ? /* @__PURE__ */ jsx(Button, {
-						variant: "ghost",
-						size: "icon-sm",
-						"aria-label": "Rename session",
-						className: "size-5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100",
-						onClick: (e) => {
-							e.stopPropagation();
-							setEditing(true);
-						},
-						children: /* @__PURE__ */ jsx(Pencil, { className: "size-3 text-fg-3" })
-					}) : null,
-					onClearContext && info.capabilities?.clearContext ? /* @__PURE__ */ jsx(Button, {
-						variant: "ghost",
-						size: "icon-sm",
-						"aria-label": "Clear context",
-						title: "Clear the conversation — the session keeps running and the old conversation stays resumable",
-						className: "size-5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100",
-						onClick: (e) => {
-							e.stopPropagation();
-							onClearContext(row);
-						},
-						children: /* @__PURE__ */ jsx(Eraser, { className: "size-3 text-fg-3" })
-					}) : null,
-					onDelete ? /* @__PURE__ */ jsx(Button, {
-						variant: "ghost",
-						size: "icon-sm",
-						"aria-label": "Close session",
-						className: "size-5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100",
-						onClick: (e) => {
-							e.stopPropagation();
-							onDelete(row);
-						},
-						children: /* @__PURE__ */ jsx(Trash2, { className: "size-3 text-fg-3" })
-					}) : null
-				]
-			}),
-			expanded ? steps.map((step) => /* @__PURE__ */ jsx(StepRow, {
-				step,
-				onSelect: step.onSelect
-			}, step.key)) : null
-		]
-	});
-}
-/**
-* The one 14px cell both lines hang their glyph in.
-*
-* A shared column rather than a leading character: the state and the engine mark
-* are different widths and a bare glyph would let the two text columns start at
-* different x. Centring inside a fixed cell is what makes them agree —
-* `packages/ui`'s terminal-gutter argument at row scale.
-*/
-function Gutter({ children }) {
-	return /* @__PURE__ */ jsx("span", {
-		className: "flex w-3.5 shrink-0 items-center justify-center",
-		children
+	return /* @__PURE__ */ jsx(SessionItem, {
+		row,
+		active: active === true,
+		activeStepKey: activeSubagentId,
+		showGateway,
+		showProject,
+		projectIcons,
+		onSelect: () => onSelect?.(row),
+		onSelectSubagent: onSelectSubagent ? (id) => onSelectSubagent(row, id) : void 0,
+		onRevealStep: onRevealStep ? (id) => onRevealStep(row, id) : void 0,
+		onRename: onRename ? (title) => onRename(row, title) : void 0,
+		renameOn: "external",
+		editing,
+		onEditingChange: setEditing,
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			onRename && !editing ? /* @__PURE__ */ jsx(RowAction, {
+				label: "Rename session",
+				onClick: () => setEditing(true),
+				children: /* @__PURE__ */ jsx(Pencil, { className: "size-3 text-fg-3" })
+			}) : null,
+			onClearContext && info.capabilities?.clearContext ? /* @__PURE__ */ jsx(RowAction, {
+				label: "Clear context",
+				title: "Clear the conversation — the session keeps running and the old conversation stays resumable",
+				onClick: () => onClearContext(row),
+				children: /* @__PURE__ */ jsx(Eraser, { className: "size-3 text-fg-3" })
+			}) : null,
+			onDelete ? /* @__PURE__ */ jsx(RowAction, {
+				label: "Close session",
+				onClick: () => onDelete(row),
+				children: /* @__PURE__ */ jsx(Trash2, { className: "size-3 text-fg-3" })
+			}) : null
+		] })
 	});
 }
 /**
-* State as one glyph — a ringing bell when it wants a human, a spinner while it
-* works, a moon when it is only sleeping. Replaces the text badge: in a sidebar
-* the word costs more room than it earns, and the states that matter are the two
-* you can recognise without reading.
+* One of the dashboard's hover actions.
 *
-* **It reads `row.state`, not `info.status`, and that distinction is the whole
-* point of the row model.** `sessionState` already folds in the arm this glyph
-* cannot see for itself: a *background* sub-agent outlives its turn by design, so
-* the turn ends, `status` comes to rest at `idle`, and the agent keeps working.
-* Reading the raw status drew a **moon on a row filed under the "Working"
-* header** — the list contradicting itself on one line, which is exactly what a
-* derived view model exists to prevent. The value was in scope and unread.
-*
-* The terminal statuses still come off `info.status`, because `ended` collapses
-* `failed` and `closed` into one bucket and those are worth telling apart here.
-*/
-function SessionStatusIcon({ row }) {
-	const { info } = row;
-	if (row.state === "attention") return /* @__PURE__ */ jsx(BellRing, { className: "size-3.5 shrink-0 animate-pulse text-warning" });
-	if (row.state === "working") return /* @__PURE__ */ jsx(Spinner, { className: "size-3.5 shrink-0 text-info" });
-	switch (info.status) {
-		case "failed": return /* @__PURE__ */ jsx(CircleAlert, { className: "size-3.5 shrink-0 text-danger" });
-		case "closed": return /* @__PURE__ */ jsx(CircleSlash, { className: "size-3.5 shrink-0 text-fg-4" });
-		case "parked": return /* @__PURE__ */ jsx(PauseCircle, { className: "size-3.5 shrink-0 text-fg-3" });
-		default: return /* @__PURE__ */ jsx(Moon, { className: "size-3.5 shrink-0 text-fg-4" });
-	}
-}
-/**
-* Inline rename. Enter commits, Escape cancels, blur commits — but only a blur
-* that is still inside this document: switching windows must not silently commit,
-* nor kill the editor in the frame it opened.
+* Hover-revealed rather than always on, which is the opposite of the
+* extension's single overflow glyph and the right call for each: there are
+* three of them here and a sidebar card has room for one, so the extension
+* spends that room on a menu and this spends the row's hover on the actions
+* themselves. Both stop the click — the whole card is pressable underneath, and
+* an action that also selected the session would do two things per press.
 */
-function NameEditor({ initial, onCommit, onCancel }) {
-	const [value, setValue] = useState(initial);
-	const ref = useRef(null);
-	useEffect(() => {
-		ref.current?.select();
-	}, []);
-	return /* @__PURE__ */ jsx("input", {
-		ref,
-		value,
-		autoFocus: true,
-		"aria-label": "Session name",
-		onClick: (e) => e.stopPropagation(),
-		onChange: (e) => setValue(e.target.value),
-		onBlur: () => document.hasFocus() ? onCommit(value.trim()) : void 0,
-		onKeyDown: (e) => {
-			if (e.key === "Enter") onCommit(value.trim());
-			else if (e.key === "Escape") onCancel();
+function RowAction({ label, title, onClick, children }) {
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon-sm",
+		"aria-label": label,
+		title: title ?? label,
+		className: "size-5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100",
+		onClick: (e) => {
 			e.stopPropagation();
+			onClick();
 		},
-		className: "-my-0.5 min-w-0 flex-1 rounded-sm border border-ring bg-bg px-1 py-0.5 text-body-sm font-medium text-fg-1 outline-none"
+		children
 	});
 }
 /** A multi-select facet. Empty = no filter, which is why the trigger reads the
@@ -1238,6 +1375,6 @@ function OneOfSelect({ label, value, options, onChange }) {
 	});
 }
 //#endregion
-export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Badge, Band, Blank, Button, Card, CardContent, CardHeader, CardTitle, CodeBlock, Composer, ContextDialog, ContextRing, Conversation, ConversationContent, ConversationScrollButton, CopyAction, CopyButton, Dialog, DialogBody, DialogClose, DialogContent, DialogHeader, DialogRow, DialogTrigger, Empty, EmptyKey, EngineIcon, FileCard, HostFilesDialog, Ink, Input, Loader, McpDialog, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Message, MessageContent, ModelSelect, PERMISSION_MODES, PermissionModeSelect, PermissionPrompt, ProgressRing, ProjectIcon, PromptArea, PromptTokenText, QUESTION_BEHAVIORS, QuestionPrompt, Reasoning, Response, Row, STATUS_META, Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue, SessionBrowser, SessionEmptyState, SessionInfoDialog, SessionList, SessionListItem, SessionPanel, SessionStatusIcon, SkillsDialog, Spinner, Splitter, StatusBar, StepRow, StepToggle, SubagentStrip, TerminalDiff, TerminalItemView, TerminalMarkdown, TerminalPermissionPrompt, TerminalQuestionPrompt, TerminalStatusLine, TerminalSurface, TerminalTranscript, Textarea, Tip, Toaster, ToolCallCard, TooltipContent, TooltipProvider, Transcript, TranscriptDensityProvider, TranscriptVariantProvider, UsageDialog, UsageMeters, WithActions, badgeVariants, buttonVariants, cn, commandTrigger, copyText, engineMark, formatAgoPrecise, formatBytes, formatCost, formatCountdown, formatDuration, formatRateLimitWindow, formatRateLimitWindowLong, formatRelativeTime, formatTokens, friendlyModel, getChipsByTrigger, hashtagTrigger, isMutatingTool, isSegmentsEmpty, mentionTrigger, parseUserQuestions, permissionModeChoices, permissionModeMeta, plainTextToSegments, previewPatch, rateLimitWindowSeconds, rowShapeClass, runningSteps, segmentsToPlainText, sessionSteps, skillPrompt, toast, toolIcon, toolInputPreview, useAffordances, useMinuteClock, usePromptAreaState, useTranscriptDensity, useTranscriptVariant, vendorMarkClass, vendorTextClass };
+export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Badge, Band, Blank, Button, Card, CardContent, CardHeader, CardTitle, CodeBlock, Composer, ContextDialog, ContextRing, Conversation, ConversationContent, ConversationScrollButton, CopyAction, CopyButton, Dialog, DialogBody, DialogClose, DialogContent, DialogHeader, DialogRow, DialogTrigger, Empty, EmptyKey, EngineIcon, FileCard, HostFilesDialog, Ink, Input, Loader, McpDialog, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Message, MessageContent, ModelSelect, PERMISSION_MODES, PermissionModeSelect, PermissionPrompt, ProgressRing, ProjectIcon, PromptArea, PromptTokenText, QUESTION_BEHAVIORS, QuestionPrompt, Reasoning, Response, Row, STATUS_META, Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue, SessionBrowser, SessionEmptyState, SessionInfoDialog, SessionItem, SessionList, SessionListItem, SessionPanel, SessionStatusIcon, SkillsDialog, Spinner, Splitter, StatusBar, StepRow, StepToggle, SubagentStrip, TerminalDiff, TerminalItemView, TerminalMarkdown, TerminalPermissionPrompt, TerminalQuestionPrompt, TerminalStatusLine, TerminalSurface, TerminalTranscript, Textarea, Tip, Toaster, ToolCallCard, TooltipContent, TooltipProvider, Transcript, TranscriptDensityProvider, TranscriptVariantProvider, UsageDialog, UsageMeters, WithActions, badgeVariants, buttonVariants, cn, commandTrigger, copyText, engineMark, formatAgoPrecise, formatBytes, formatCost, formatCountdown, formatDuration, formatRateLimitWindow, formatRateLimitWindowLong, formatRelativeTime, formatTokens, friendlyModel, getChipsByTrigger, hashtagTrigger, isMutatingTool, isSegmentsEmpty, mentionTrigger, parseUserQuestions, permissionModeChoices, permissionModeMeta, plainTextToSegments, previewPatch, rateLimitWindowSeconds, rowShapeClass, runningSteps, segmentsToPlainText, sessionSteps, skillPrompt, toast, toolIcon, toolInputPreview, useAffordances, useMinuteClock, usePromptAreaState, useTranscriptDensity, useTranscriptVariant, vendorMarkClass, vendorTextClass };
 
 //# sourceMappingURL=index.mjs.map