@workerdeck/ui 0.12.0 → 0.15.0

package/src/components/agent/SessionBrowser.tsx

@@ -1,5 +1,17 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { Pencil, Search, Trash2, X } from 'lucide-react'
+import {
+  BellRing,
+  CircleAlert,
+  CircleSlash,
+  Layers,
+  Moon,
+  PauseCircle,
+  Pencil,
+  Search,
+  SearchX,
+  Trash2,
+  X,
+} from 'lucide-react'
 import {
   STATE_LABELS,
   STATE_ORDER,
@@ -19,13 +31,13 @@ import type {
   ViewConfig,
   WorkspaceScope,
 } from '@workerdeck/protocol'
-import { Badge } from '../ui/Badge.tsx'
 import { Button } from '../ui/Button.tsx'
+import { Empty } from '../ui/Empty.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 +76,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 +124,7 @@ export function SessionBrowser({
   onDelete,
   onRename,
   emptyState,
+  showControls = true,
   className,
 }: SessionBrowserProps) {
   const visible = useMemo(() => filterRows(rows, config, scope), [rows, config, scope])
@@ -95,8 +143,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 +159,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}
@@ -168,31 +231,29 @@ export function SessionBrowser({
       ) : null}
 
       {rows.length === 0 ? (
-        (emptyState ?? <Empty>No sessions yet.</Empty>)
+        (emptyState ?? <Empty icon={<Layers />} title='No sessions yet' />)
       ) : visible.length === 0 ? (
         // Two different dead ends, two different ways out. "Nothing matches" is
-        // a filter someone set; anything else is the state of the world.
-        <Empty>
-          {hasFacetFilter(config) ? (
-            <>
-              No sessions match.{' '}
-              <button
-                type='button'
-                className='underline underline-offset-2 hover:text-fg-1'
-                onClick={() => onConfigChange(clearFilters(config))}>
-                Clear filters
-              </button>
-            </>
-          ) : (
-            'No sessions here.'
-          )}
-        </Empty>
+        // a filter someone set; anything else is the state of the world — and
+        // only the first has a button, because an action that does nothing is
+        // worse than none.
+        hasFacetFilter(config) ? (
+          <Empty
+            icon={<SearchX />}
+            title='No matches'
+            description='No session matches the current search and filters.'
+            action='Clear filters'
+            onAction={() => onConfigChange(clearFilters(config))}
+          />
+        ) : (
+          <Empty icon={<Layers />} title='Nothing here' description='No session to show.' />
+        )
       ) : (
         <div className='flex flex-col gap-4'>
           {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>
@@ -216,10 +277,6 @@ 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>
-}
-
 interface SessionRowItemProps {
   row: SessionRow
   active?: boolean
@@ -238,87 +295,141 @@ 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}
+      // Selection lives on the whole row, not on the two text buttons inside
+      // it: the age, the unread badge and the state glyph sit outside them, and
+      // a row where a third of the surface silently does nothing is a row that
+      // feels broken. The buttons stay — they are what makes the row reachable
+      // by keyboard — but their activation now reaches this handler by
+      // bubbling, so there is one code path and no double-fire. Anything that
+      // is its own action (rename, close, the name editor) stops the event.
+      onClick={() => !editing && onSelect?.(row)}
       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'
+            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>
+          tabIndex={-1}
+          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={(e) => {
+              e.stopPropagation()
+              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={(e) => {
+              e.stopPropagation()
+              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 +471,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 +501,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 +541,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>