@workerdeck/ui 0.12.0 → 0.13.0

package/src/components/agent/SessionBrowser.tsx

@@ -1,5 +1,15 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { Pencil, Search, Trash2, X } from 'lucide-react'
+import {
+  BellRing,
+  CircleAlert,
+  CircleSlash,
+  Moon,
+  PauseCircle,
+  Pencil,
+  Search,
+  Trash2,
+  X,
+} from 'lucide-react'
 import {
   STATE_LABELS,
   STATE_ORDER,
@@ -19,13 +29,12 @@ import type {
   ViewConfig,
   WorkspaceScope,
 } from '@workerdeck/protocol'
-import { Badge } from '../ui/Badge.tsx'
 import { Button } from '../ui/Button.tsx'
 import { Input } from '../ui/Input.tsx'
 import { Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue } from '../ui/Select.tsx'
+import { Spinner } from '../ui/Spinner.tsx'
 import { cn } from '../../lib/utils.ts'
-import { formatCost, formatRelativeTime } from '../../lib/format.ts'
-import { STATUS_META } from './status.ts'
+import { formatCost, formatRelativeTime, friendlyModel } from '../../lib/format.ts'
 
 /**
  * A sessions list with the affordances a list of thirty needs: search, facets,
@@ -64,9 +73,44 @@ export interface SessionBrowserProps {
   onRename?: (row: SessionRow, title: string) => void
   /** Rendered when nothing at all exists (as opposed to nothing matching). */
   emptyState?: React.ReactNode
+  /**
+   * Whether the search + facet bar is shown. Defaults to `true` — a list that
+   * *is* the screen shows its controls.
+   *
+   * A host with somewhere better to put the toggle (a view title bar) passes
+   * `false` and owns the boolean itself, the way the VS Code extension does: the
+   * key lives where the commands do. Two rules come with it, and they are why
+   * this hides only the bar and nothing else — **closing the bar never clears
+   * the filters**, and the subset line below it renders either way, so a list
+   * filtered by a control you can't currently see still says so.
+   */
+  showControls?: boolean
   className?: string
 }
 
+/**
+ * How a list row is drawn, in one place, so `SidebarRow` in `web` matches this
+ * exactly rather than approximating it — the dashboard's other three sidebars
+ * are that component, and a sessions list that hovered differently from the
+ * gateways list beside it would read as a different product.
+ *
+ * Two rules are load-bearing:
+ *
+ * - **Fill means hover, and only hover.** It stays on the row whether or not
+ *   the row is selected, because a selected row still has to answer the
+ *   pointer. Selection gets the gutter instead.
+ * - **`ml-0` on the selected row is not cosmetic.** It hands the accent border
+ *   the 4px the margin was holding, so the text does not shift sideways as a
+ *   row becomes the selected one. The squared left corners are what let the bar
+ *   sit flush against the sidebar edge.
+ */
+export function rowShapeClass(active: boolean): string {
+  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',
+  )
+}
+
 export function SessionBrowser({
   rows,
   config,
@@ -77,6 +121,7 @@ export function SessionBrowser({
   onDelete,
   onRename,
   emptyState,
+  showControls = true,
   className,
 }: SessionBrowserProps) {
   const visible = useMemo(() => filterRows(rows, config, scope), [rows, config, scope])
@@ -95,8 +140,13 @@ export function SessionBrowser({
 
   return (
     <div data-slot='session-browser' className={cn('flex flex-col gap-3', className)}>
-      <div className='flex flex-wrap items-center gap-2'>
-        <div className='relative min-w-48 flex-1'>
+      {/* One control per row, label left, input right — the shape VS Code uses
+          for its own filter surfaces. A wrapping row of pill-shaped selects
+          reflows into an unpredictable number of lines as facets appear and
+          disappear; a column of labelled rows is the same height every time and
+          reads at sidebar width, which is the only width this has. */}
+      <div className={cn('flex flex-col gap-1.5 px-2', !showControls && 'hidden')}>
+        <div className='relative'>
           <Search className='pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-fg-4' />
           <Input
             value={config.search}
@@ -106,54 +156,64 @@ export function SessionBrowser({
             className='pl-8'
           />
         </div>
-        <FacetSelect
-          label='State'
-          value={config.states}
-          options={STATE_ORDER.map((s) => ({ value: s, label: STATE_LABELS[s] }))}
-          onChange={(states) => set({ states: states as SessionState[] })}
-        />
-        {adapters.length > 1 ? (
+        <FilterRow label='State'>
           <FacetSelect
-            label='Engine'
-            value={config.adapters}
-            options={adapters.map((a) => ({ value: a, label: a }))}
-            onChange={(adapters) => set({ adapters })}
+            label='State'
+            value={config.states}
+            options={STATE_ORDER.map((s) => ({ value: s, label: STATE_LABELS[s] }))}
+            onChange={(states) => set({ states: states as SessionState[] })}
           />
+        </FilterRow>
+        {adapters.length > 1 ? (
+          <FilterRow label='Engine'>
+            <FacetSelect
+              label='Engine'
+              value={config.adapters}
+              options={adapters.map((a) => ({ value: a, label: a }))}
+              onChange={(adapters) => set({ adapters })}
+            />
+          </FilterRow>
         ) : null}
         {gateways.length > 1 ? (
-          <FacetSelect
-            label='Gateway'
-            value={config.gateways}
-            options={gateways.map((g) => ({ value: g.id, label: g.name }))}
-            onChange={(gateways) => set({ gateways })}
-          />
+          <FilterRow label='Gateway'>
+            <FacetSelect
+              label='Gateway'
+              value={config.gateways}
+              options={gateways.map((g) => ({ value: g.id, label: g.name }))}
+              onChange={(gateways) => set({ gateways })}
+            />
+          </FilterRow>
         ) : null}
-        <OneOfSelect
-          label='Group'
-          value={config.groupBy}
-          options={[
-            { value: 'none', label: 'No grouping' },
-            { value: 'state', label: 'By state' },
-            { value: 'adapter', label: 'By engine' },
-            ...(gateways.length > 1 ? [{ value: 'gateway' as const, label: 'By gateway' }] : []),
-          ]}
-          onChange={(groupBy) => set({ groupBy: groupBy as GroupBy })}
-        />
-        <OneOfSelect
-          label='Sort'
-          value={config.sortBy}
-          options={[
-            { value: 'recent', label: 'Recent' },
-            { value: 'name', label: 'Name' },
-            { value: 'state', label: 'State' },
-            ...(gateways.length > 1 ? [{ value: 'gateway' as const, label: 'Gateway' }] : []),
-          ]}
-          onChange={(sortBy) => set({ sortBy: sortBy as SortBy })}
-        />
+        <FilterRow label='Group'>
+          <OneOfSelect
+            label='Group'
+            value={config.groupBy}
+            options={[
+              { value: 'none', label: 'No grouping' },
+              { value: 'state', label: 'By state' },
+              { value: 'adapter', label: 'By engine' },
+              ...(gateways.length > 1 ? [{ value: 'gateway' as const, label: 'By gateway' }] : []),
+            ]}
+            onChange={(groupBy) => set({ groupBy: groupBy as GroupBy })}
+          />
+        </FilterRow>
+        <FilterRow label='Sort'>
+          <OneOfSelect
+            label='Sort'
+            value={config.sortBy}
+            options={[
+              { value: 'recent', label: 'Recent' },
+              { value: 'name', label: 'Name' },
+              { value: 'state', label: 'State' },
+              ...(gateways.length > 1 ? [{ value: 'gateway' as const, label: 'Gateway' }] : []),
+            ]}
+            onChange={(sortBy) => set({ sortBy: sortBy as SortBy })}
+          />
+        </FilterRow>
       </div>
 
       {subset ? (
-        <div className='flex items-center gap-2 text-label text-fg-4'>
+        <div className='flex items-center gap-2 px-3 text-label text-fg-4'>
           <span>
             {subset.shown} of {subset.total}
             {subset.causes.length ? ` · ${subset.causes.join(' · ')}` : null}
@@ -192,7 +252,7 @@ export function SessionBrowser({
           {groups.map((group) => (
             <div key={group.key} className='flex flex-col gap-1'>
               {config.groupBy !== 'none' && group.label ? (
-                <div className='flex items-baseline gap-2 px-2.5 text-label font-medium text-fg-4'>
+                <div className='flex items-baseline gap-2 px-3 text-label font-medium text-fg-4'>
                   <span className='uppercase tracking-wide'>{group.label}</span>
                   <span className='text-fg-4/70'>{group.rows.length}</span>
                 </div>
@@ -217,7 +277,7 @@ export function SessionBrowser({
 }
 
 function Empty({ children }: { children: React.ReactNode }) {
-  return <div className='px-2.5 py-6 text-center text-body-sm text-fg-4'>{children}</div>
+  return <div className='px-3 py-6 text-center text-body-sm text-fg-4'>{children}</div>
 }
 
 interface SessionRowItemProps {
@@ -238,87 +298,128 @@ function SessionRowItem({
   onRename,
 }: SessionRowItemProps) {
   const { info } = row
-  const meta = STATUS_META[info.status]
   const [editing, setEditing] = useState(false)
 
+  // What it is and what it has spent, in one line — the same set the extension
+  // shows, joined the same way, so the two lists read as one product.
+  const folder = info.cwd.split('/').filter(Boolean).pop() ?? info.cwd
+  const details = [
+    showGateway ? row.hostName : undefined,
+    friendlyModel(info.model),
+    folder,
+    info.profile ? `@${info.profile}` : undefined,
+    formatCost(info.totalCostUsd),
+  ].filter(Boolean)
+
   return (
     <div
       data-slot='session-row'
       data-active={active || undefined}
       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',
+        'group flex cursor-pointer flex-col gap-0.5 text-left transition-colors',
+        rowShapeClass(active === true),
       )}>
-      <div className='min-w-0 flex-1'>
-        <div className='flex items-center gap-2'>
-          {/* The editor replaces the link rather than sitting inside it — an
-              input nested in a button is invalid, and disabling the button to
-              protect the edit disables the field with it. */}
-          {editing && onRename ? (
-            <NameEditor
-              initial={info.title ?? ''}
-              onCommit={(title) => {
-                setEditing(false)
-                onRename(row, title)
-              }}
-              onCancel={() => setEditing(false)}
-            />
-          ) : (
-            <button
-              type='button'
-              onClick={() => onSelect?.(row)}
-              className='min-w-0 truncate text-left text-body-sm font-medium text-fg-1 outline-none'>
-              {sessionLabel(info)}
-            </button>
-          )}
-          <Badge variant={meta.variant} dot className='shrink-0'>
-            {meta.label}
-          </Badge>
-          {row.unseen > 0 ? (
-            // Transcript rows since this session was last on screen — the same
-            // unit the VS Code badge counts, because turns undercount badly.
-            <Badge variant='accent' className='shrink-0' title={`${row.unseen} new`}>
-              {row.unseen}
-            </Badge>
-          ) : null}
-        </div>
+      {/* Line one: what you scan the list by on the left, how it is doing on the
+          right, state last. */}
+      <div className='flex items-center gap-1.5'>
+        {/* The editor replaces the link rather than sitting inside it — an
+            input nested in a button is invalid, and disabling the button to
+            protect the edit disables the field with it. */}
+        {editing && onRename ? (
+          <NameEditor
+            initial={info.title ?? ''}
+            onCommit={(title) => {
+              setEditing(false)
+              onRename(row, title)
+            }}
+            onCancel={() => setEditing(false)}
+          />
+        ) : (
+          <button
+            type='button'
+            onClick={() => onSelect?.(row)}
+            className={cn(
+              'min-w-0 flex-1 truncate text-left text-body-sm outline-none',
+              active ? 'font-medium text-fg-1' : 'text-fg-2',
+            )}>
+            {sessionLabel(info)}
+          </button>
+        )}
+        {row.unseen > 0 ? (
+          // Transcript rows since this session was last on screen — the same
+          // unit the VS Code badge counts, because turns undercount badly.
+          <span
+            title={`${row.unseen} new`}
+            className='shrink-0 rounded-full bg-accent px-1.5 text-label text-accent-fg'>
+            {row.unseen}
+          </span>
+        ) : null}
+        <span className='shrink-0 text-label text-fg-4'>
+          {formatRelativeTime(info.lastActivityAt ?? info.createdAt)}
+        </span>
+        <SessionStatusIcon row={row} />
+      </div>
+
+      {/* Line two: what it is, with the actions at the far right — away from the
+          state icon, and away from the title you are actually reading. */}
+      <div className='flex items-center gap-1 text-label text-fg-4'>
         <button
           type='button'
           onClick={() => !editing && onSelect?.(row)}
-          className='mt-0.5 flex w-full items-center gap-2 text-left font-mono text-label text-fg-4 outline-none'>
-          <span className='truncate'>{info.cwd}</span>
-          {showGateway ? <span className='shrink-0'>{row.hostName}</span> : null}
-          {info.profile ? <span className='shrink-0'>@{info.profile}</span> : null}
-          <span className='shrink-0'>{formatCost(info.totalCostUsd)}</span>
-          <span className='shrink-0'>
-            {formatRelativeTime(info.lastActivityAt ?? info.createdAt)}
-          </span>
+          className='min-w-0 flex-1 truncate text-left font-mono outline-none'>
+          {details.join(' · ')}
         </button>
+        {onRename && !editing ? (
+          <Button
+            variant='ghost'
+            size='icon-sm'
+            aria-label='Rename session'
+            className='size-5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100'
+            onClick={() => setEditing(true)}>
+            <Pencil className='size-3 text-fg-3' />
+          </Button>
+        ) : null}
+        {onDelete ? (
+          <Button
+            variant='ghost'
+            size='icon-sm'
+            aria-label='Close session'
+            className='size-5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100'
+            onClick={() => onDelete(row)}>
+            <Trash2 className='size-3 text-fg-3' />
+          </Button>
+        ) : null}
       </div>
-      {onRename && !editing ? (
-        <Button
-          variant='ghost'
-          size='icon-sm'
-          aria-label='Rename session'
-          className='opacity-0 transition-opacity group-hover:opacity-100'
-          onClick={() => setEditing(true)}>
-          <Pencil className='size-3.5 text-fg-3' />
-        </Button>
-      ) : null}
-      {onDelete ? (
-        <Button
-          variant='ghost'
-          size='icon-sm'
-          aria-label='Close session'
-          className='opacity-0 transition-opacity group-hover:opacity-100'
-          onClick={() => onDelete(row)}>
-          <Trash2 className='size-3.5 text-fg-3' />
-        </Button>
-      ) : null}
     </div>
   )
 }
 
+/**
+ * State as one glyph on the right edge — 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.
+ */
+export function SessionStatusIcon({ row }: { row: SessionRow }) {
+  const { info } = row
+  if (info.pendingPermissionCount > 0 || info.status === 'awaiting_approval') {
+    return <BellRing className='size-3.5 shrink-0 animate-pulse text-warning' />
+  }
+  if (info.status === 'running' || info.status === 'starting') {
+    return <Spinner className='size-3.5 shrink-0 text-info' />
+  }
+  switch (info.status) {
+    case 'failed':
+      return <CircleAlert className='size-3.5 shrink-0 text-danger' />
+    case 'closed':
+      return <CircleSlash className='size-3.5 shrink-0 text-fg-4' />
+    case 'parked':
+      return <PauseCircle className='size-3.5 shrink-0 text-fg-3' />
+    default:
+      return <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,
@@ -360,6 +461,22 @@ function NameEditor({
 
 /** A multi-select facet. Empty = no filter, which is why the trigger reads the
  * facet's name rather than "All": nothing is being excluded. */
+/**
+ * One labelled control row. The label column is fixed so every control starts
+ * on the same x — the thing that makes a stack of them read as a form rather
+ * than as five unrelated widgets.
+ */
+function FilterRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className='flex items-center gap-2'>
+      <span aria-hidden className='w-14 shrink-0 truncate text-label text-fg-3'>
+        {label}
+      </span>
+      <div className='min-w-0 flex-1'>{children}</div>
+    </div>
+  )
+}
+
 function FacetSelect({
   label,
   value,
@@ -374,13 +491,14 @@ function FacetSelect({
   return (
     <div className='flex items-center gap-1'>
       <Select multiple value={value} onValueChange={(v) => onChange(v as string[])}>
-        <SelectTrigger aria-label={label} className='min-w-28'>
+        <SelectTrigger aria-label={label} className='min-w-0 flex-1'>
           <SelectValue>
+            {/* "All" rather than the label, which the row already carries. */}
             {value.length === 0
-              ? label
+              ? 'All'
               : value.length === 1
-                ? (options.find((o) => o.value === value[0])?.label ?? label)
-                : `${label} · ${value.length}`}
+                ? (options.find((o) => o.value === value[0])?.label ?? 'All')
+                : `${value.length} selected`}
           </SelectValue>
         </SelectTrigger>
         <SelectContent>
@@ -413,7 +531,7 @@ function OneOfSelect({
 }) {
   return (
     <Select value={value} onValueChange={(v) => onChange(v as string)}>
-      <SelectTrigger aria-label={label} className='min-w-28'>
+      <SelectTrigger aria-label={label} className='w-full min-w-0'>
         <SelectValue>{options.find((o) => o.value === value)?.label ?? label}</SelectValue>
       </SelectTrigger>
       <SelectContent>

package/src/components/agent/SessionPanel.tsx

@@ -98,6 +98,17 @@ export interface SessionPanelProps {
    * take the menu, or it has nowhere left to go.
    */
   statusSurface?: 'internal' | 'external'
+  /**
+   * Which end of the panel the status bar sits at. Default `top`.
+   *
+   * `bottom` is the editor convention — VS Code's status bar runs along the
+   * foot of the window — and suits a host where the panel *is* the editor area
+   * and the chrome above it already belongs to the app. Placement only; the bar
+   * is the same bar, with the same `⋯` menu in its trailing slot, so this
+   * composes with {@link statusSurface} rather than competing with it (external
+   * still means "there isn't one").
+   */
+  statusPlacement?: 'top' | 'bottom'
   /** Where `panelSurface: 'external'` routes opens. Absent = the affordances
    * (status-bar clicks, `/mcp`) become inert rather than half-working. */
   onOpenPanel?: (panel: SessionSurfacePanel) => void
@@ -161,6 +172,22 @@ export interface SessionPanelProps {
    * the number to remember through `SessionVitals.itemCount`.
    */
   unseen?: { itemCount: number; since?: number }
+  /**
+   * A viewer, not a seat at the session: transcript, status bar and panels as
+   * usual, but no composer and no approval prompts.
+   *
+   * For a surface that is *about* a run rather than in it — the dashboard's job
+   * detail, where the session belongs to the queue and typing into it would be a
+   * second operator arriving mid-run. Deliberately not "disabled controls": a
+   * greyed-out composer says the session is busy, an absent one says this screen
+   * does not drive it. The attach is still live and read paths are untouched,
+   * so the transcript streams and the file tree browses.
+   *
+   * It does **not** claim to be an authorization boundary. Anything holding this
+   * client can still send; what it removes is the affordance, and the honest
+   * enforcement lives on the gateway.
+   */
+  readOnly?: boolean
   className?: string
 }
 
@@ -251,6 +278,7 @@ export function SessionPanel({
   header,
   panelSurface = 'internal',
   statusSurface = 'internal',
+  statusPlacement = 'top',
   onOpenPanel,
   onVitals,
   transcriptVariant = 'cards',
@@ -259,6 +287,7 @@ export function SessionPanel({
   onControls,
   focusComposerOnClick = false,
   unseen,
+  readOnly = false,
   className,
 }: SessionPanelProps) {
   const external = panelSurface === 'external'
@@ -503,11 +532,26 @@ export function SessionPanel({
   const menu = external ? null : actionsMenu
   const headerTakesActions = typeof header === 'function'
 
+  // Built once and placed at one end or the other — the bar has a `⋯` menu and
+  // three open handlers, and two copies of that in the tree would be two things
+  // to keep in step.
+  const statusBar = statusExternal ? null : (
+    <StatusBar
+      state={state}
+      connection={connection}
+      placement={statusPlacement}
+      onOpenStatus={external && !onOpenPanel ? undefined : () => openPanel('info')}
+      onOpenContext={external && !onOpenPanel ? undefined : () => openPanel('context')}
+      onOpenUsage={external && !onOpenPanel ? undefined : () => openPanel('usage')}
+      actions={headerTakesActions ? undefined : menu}
+    />
+  )
+
   // Dead-space clicks land in the composer. Anything the user actually aimed at
   // — a control, a link, the end of a drag-selection — keeps its own meaning;
   // this only claims what was left over.
   const handleClick = (event: ReactMouseEvent<HTMLDivElement>) => {
-    if (!focusComposerOnClick) return
+    if (!focusComposerOnClick || readOnly) return
     const target = event.target as HTMLElement | null
     if (target?.closest(INTERACTIVE)) return
     if (window.getSelection()?.isCollapsed === false) return
@@ -525,16 +569,7 @@ export function SessionPanel({
         onClick={handleClick}
         className={cn('flex h-full min-h-0 flex-col overflow-hidden bg-bg', className)}>
         {headerTakesActions ? header({ actions: menu }) : header}
-        {statusExternal ? null : (
-          <StatusBar
-            state={state}
-            connection={connection}
-            onOpenStatus={external && !onOpenPanel ? undefined : () => openPanel('info')}
-            onOpenContext={external && !onOpenPanel ? undefined : () => openPanel('context')}
-            onOpenUsage={external && !onOpenPanel ? undefined : () => openPanel('usage')}
-            actions={headerTakesActions ? undefined : menu}
-          />
-        )}
+        {statusPlacement === 'top' ? statusBar : null}
         {protocolMismatch !== undefined ? (
           <Notice level='warning'>
             Server speaks protocol v{protocolMismatch}, this build renders v{PROTOCOL_VERSION}. Some
@@ -569,7 +604,12 @@ export function SessionPanel({
             <div
               data-slot='catch-up'
               className='mx-auto flex w-full max-w-[var(--wd-content-max-w,48rem)] items-center gap-2 text-label text-fg-3'>
-              <span aria-hidden className='select-none text-accent'>
+              <span
+                aria-hidden
+                className={cn(
+                  'select-none',
+                  transcriptVariant === 'lines' ? 'text-fg-3' : 'text-accent',
+                )}>
                 ※
               </span>
               <span className='min-w-0 flex-1 truncate'>
@@ -594,7 +634,10 @@ export function SessionPanel({
         {/* An engine with no approval channel never raises these, but a stale
             pending request from a replayed log would still render — the record is
             the authority on whether an approval UI means anything here. */}
-        {capabilities.interactiveApprovals && state.pendingApprovals.length > 0 ? (
+        {/* A read-only surface has no answer to give: the status bar still says
+            `awaiting approval`, and the place that can act on it is wherever the
+            session is actually driven. */}
+        {!readOnly && capabilities.interactiveApprovals && state.pendingApprovals.length > 0 ? (
           <div className='px-3 pb-2'>
             <div className='mx-auto flex w-full max-w-[var(--wd-content-max-w,48rem)] flex-col gap-2'>
               {state.pendingApprovals.map((request) =>
@@ -618,6 +661,7 @@ export function SessionPanel({
             </div>
           </div>
         ) : null}
+        {readOnly ? null : (
         <Composer
           ref={composerRef}
           onSend={handleSend}
@@ -662,6 +706,10 @@ export function SessionPanel({
             )
           }
         />
+        )}
+        {/* Below the composer, along the foot of the panel — the editor
+            convention. Last in the flex column, so it is the bottom edge. */}
+        {statusPlacement === 'bottom' ? statusBar : null}
 
         {/* The internal dialog surface. The external one renders none of these —
             the embedder hosts equivalent surfaces and is handed the intents. */}

package/src/components/agent/SessionWorkspace.tsx

@@ -34,7 +34,13 @@ export interface SessionWorkspaceProps {
    */
   transcriptVariant?: SessionPanelProps['transcriptVariant']
   transcriptDensity?: SessionPanelProps['transcriptDensity']
+  /** Which end of the panel the status bar sits at — see `SessionPanel`. */
+  statusPlacement?: SessionPanelProps['statusPlacement']
   unseen?: SessionPanelProps['unseen']
+  /** Viewer mode — no composer, no approval prompts. Forwarded verbatim to
+   * {@link SessionPanel}; the file tree and editor are unaffected, since reading
+   * a run's files is the point of a read-only view. */
+  readOnly?: SessionPanelProps['readOnly']
   onVitals?: SessionPanelProps['onVitals']
   /** Rail width in pixels on first render. */
   defaultRailWidth?: number
@@ -85,7 +91,9 @@ export function SessionWorkspace({
   header,
   transcriptVariant,
   transcriptDensity,
+  statusPlacement,
   unseen,
+  readOnly,
   onVitals,
   defaultRailWidth = 260,
   defaultRailCollapsed,
@@ -264,7 +272,9 @@ export function SessionWorkspace({
           header={hoisted}
           transcriptVariant={transcriptVariant}
           transcriptDensity={transcriptDensity}
+          statusPlacement={statusPlacement}
           unseen={unseen}
+          readOnly={readOnly}
           onVitals={onVitals}
           className='min-h-0 flex-1'
         />