@workerdeck/ui 3.2.0 → 3.4.0

package/build/workspace.d.mts

@@ -1,4 +1,4 @@
-import { r as SessionPanelProps } from "./SessionPanel-BNNc8grK.mjs";
+import { r as SessionPanelProps } from "./SessionPanel-DIi4sEgh.mjs";
 import { CSSProperties } from "react";
 import { ShellInfo } from "@workerdeck/protocol";
 import { OpenFile, UseHostFileSearchResult, UseHostFileTreeResult } from "@workerdeck/react";

package/build/workspace.mjs

@@ -1,4 +1,4 @@
-import { $t as Spinner, En as Input, N as ShellTerminal, Zt as Splitter, i as SessionPanel, in as TooltipProvider, jn as cn, kn as Button, n as usePathLinks, nn as Tip, q as EntryIcon, t as resolveAgainstCwd } from "./use-path-links-C6Fh5zdx.mjs";
+import { $t as Splitter, N as ShellTerminal, Nn as cn, On as Input, Y as EntryIcon, i as SessionPanel, in as Tip, jn as Button, n as usePathLinks, on as TooltipProvider, t as resolveAgainstCwd, tn as Spinner } from "./use-path-links-WCsysQPy.mjs";
 import { m as formatBytes } from "./status-kmsBhuFG.mjs";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workerdeck/ui",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "type": "module",
   "description": "Styled agent-control component library for WorkerDeck: session panel, transcript with streaming, tool-call cards, permission prompts, session list, composer. Tailwind v4 + Base UI + cva. Pairs with the headless @workerdeck/react layer.",
   "license": "MIT",
@@ -39,9 +39,9 @@
     "streamdown": "^2.6.0",
     "tailwind-merge": "^3.7.0",
     "use-stick-to-bottom": "^1.1.6",
-    "@workerdeck/client": "3.2.0",
-    "@workerdeck/protocol": "3.2.0",
-    "@workerdeck/react": "3.2.0"
+    "@workerdeck/client": "3.4.0",
+    "@workerdeck/react": "3.4.0",
+    "@workerdeck/protocol": "3.4.0"
   },
   "peerDependencies": {
     "monaco-editor": "^0.56.0",

package/src/components/agent/Composer.tsx

@@ -39,6 +39,8 @@ export type ComposerHandle = {
 
 export interface ComposerProps {
   onSend: (text: string, attachmentIds: string[]) => void
+  // Present while a foreground command the engine can background is running: ⌥↵ sends and moves it to the background.
+  onSendNow?: (text: string, attachmentIds: string[]) => void
   onInterrupt: () => void
   busy: boolean
   disabled?: boolean
@@ -70,6 +72,7 @@ export interface ComposerProps {
 
 export function Composer({
   onSend,
+  onSendNow,
   onInterrupt,
   busy,
   disabled,
@@ -184,7 +187,7 @@ export function Composer({
             rankPeerSessions(query, peers).map((peer) => ({
               value: peer.slug,
               label: peer.label,
-              description: [peer.engine, peer.project, peer.status].filter(Boolean).join(' · '),
+              description: [peer.gateway, peer.engine, peer.project, peer.status].filter(Boolean).join(' · '),
               icon: <Users className="size-3.5 text-fg-3" />,
             })),
           onSelect: (suggestion) => suggestion.value,
@@ -214,7 +217,7 @@ export function Composer({
   const staged = attachments?.items ?? []
   const canSend = !disabled && (!isEmpty || staged.length > 0) && !attachments?.uploading && !attachments?.hasFailure
 
-  const submit = () => {
+  const submit = (now = false) => {
     if (!canSend) {
       return
     }
@@ -230,7 +233,8 @@ export function Composer({
       focus()
       return
     }
-    onSend(plainText.trim(), attachments?.readyIds ?? [])
+    const deliver = now && onSendNow ? onSendNow : onSend
+    deliver(plainText.trim(), attachments?.readyIds ?? [])
     attachments?.clear()
     draft?.clear()
     clear()
@@ -275,6 +279,11 @@ export function Composer({
             setHelpOpen(true)
             return
           }
+          if (e.key === 'Enter' && e.altKey && onSendNow && canSend) {
+            e.preventDefault()
+            submit(true)
+            return
+          }
           if (helpOpen) {
             setHelpOpen(false)
           }
@@ -351,9 +360,16 @@ export function Composer({
     </span>
   )
 
+  const sendNow =
+    onSendNow && canSend && !shellMode ? (
+      <button type="button" className="term-press term-link text-label" onClick={() => submit(true)}>
+        ⌥↵ send now - moves the running command to the background
+      </button>
+    ) : null
+
   const interrupting = busy && !canSend
   const submitButton = terminal ? (
-    <GlyphButton label="Send" disabled={!canSend} onClick={submit} tone={canSend ? 'blue' : undefined}>
+    <GlyphButton label="Send" disabled={!canSend} onClick={() => submit()} tone={canSend ? 'blue' : undefined}>
       ↵
     </GlyphButton>
   ) : interrupting ? (
@@ -361,7 +377,7 @@ export function Composer({
       <Square className="size-3" />
     </Button>
   ) : (
-    <Button size="icon-sm" aria-label="Send" className="rounded-full" disabled={!canSend} onClick={submit}>
+    <Button size="icon-sm" aria-label="Send" className="rounded-full" disabled={!canSend} onClick={() => submit()}>
       <ArrowUp className="size-4" />
     </Button>
   )
@@ -402,7 +418,7 @@ export function Composer({
       triggers={triggers}
       markdown={false}
       normalizeBullets={false}
-      onSubmit={submit}
+      onSubmit={() => submit()}
       disabled={disabled}
       placeholder={disabled ? 'Session ended' : shellMode ? SHELL_PLACEHOLDER : placeholder}
       minHeight={minHeight}
@@ -428,6 +444,12 @@ export function Composer({
           className={cn('term-composer', shellMode && 'term-composer-shell', disabled && 'opacity-60')}
         >
           <div className="term-composer-body">
+            {sendNow ? (
+              <div className="term-row">
+                <span aria-hidden className="term-gutter" />
+                {sendNow}
+              </div>
+            ) : null}
             {stagedStrip}
             <div className="term-row">
               {canAttach && !shellMode ? fileField : null}
@@ -464,6 +486,7 @@ export function Composer({
   return (
     <div data-slot="composer" className={cn('px-[var(--wd-composer-padding)] pb-[var(--wd-composer-padding)]', className)}>
       {helpRow}
+      {sendNow ? <div className="mx-auto mb-1 w-full max-w-[var(--wd-transcript-max-width)] text-text-muted">{sendNow}</div> : null}
       <div
         {...dropHandlers}
         className={cn(

package/src/components/agent/EffortSelect.tsx

@@ -0,0 +1,64 @@
+import type { EngineCapabilities, ModelOption } from '@workerdeck/protocol'
+import { Brain } from 'lucide-react'
+import { Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue } from '../ui/Select.tsx'
+import { cn } from '../../lib/utils.ts'
+import { matchModel } from './ModelSelect.tsx'
+
+const DEFAULT_VALUE = 'default'
+
+export function effortChoices(
+  models: readonly ModelOption[],
+  model: string | undefined,
+  capabilities: Pick<EngineCapabilities, 'reasoningEfforts'>,
+): readonly string[] {
+  return matchModel(models, model)?.reasoningEfforts ?? capabilities.reasoningEfforts ?? []
+}
+
+export interface EffortSelectProps {
+  efforts: readonly string[]
+  effort?: string | null
+  onEffortChange: (effort?: string) => void
+  variant?: 'toolbar' | 'form'
+  disabled?: boolean
+  className?: string
+}
+
+export function EffortSelect({ efforts, effort, onEffortChange, variant = 'toolbar', disabled, className }: EffortSelectProps) {
+  const items = [{ value: DEFAULT_VALUE, label: 'Default' }, ...efforts.map((value) => ({ value, label: value }))]
+  return (
+    <Select
+      items={items}
+      value={effort ?? null}
+      onValueChange={(value) => {
+        if (typeof value !== 'string' || value === effort) {
+          return
+        }
+        onEffortChange(value === DEFAULT_VALUE ? undefined : value)
+      }}
+      disabled={disabled}
+    >
+      <SelectTrigger
+        aria-label="Reasoning effort"
+        className={cn(
+          variant === 'toolbar' && 'h-6 max-w-32 border-transparent bg-transparent text-fg-3 hover:bg-surface-hover',
+          className,
+        )}
+      >
+        <span className={cn('flex items-center gap-1 truncate', variant === 'toolbar' && 'font-mono text-label')}>
+          <Brain className="size-3 shrink-0" />
+          <SelectValue placeholder="effort" />
+        </span>
+      </SelectTrigger>
+      <SelectContent className="min-w-40">
+        {items.map((item) => (
+          <SelectItem key={item.value} value={item.value}>
+            <SelectItemText>
+              <span className="font-medium">{item.label}</span>
+            </SelectItemText>
+            {item.value === DEFAULT_VALUE ? <span className="text-label text-fg-4">The model's configured default</span> : null}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

package/src/components/agent/ModelSelect.tsx

@@ -39,7 +39,7 @@ function optionMatches(option: ModelOption, model: string): boolean {
   return token !== '' && token === family(dropVariant(option.value))
 }
 
-function matchModel(models: ModelOption[], model?: string): ModelOption | undefined {
+export function matchModel(models: readonly ModelOption[], model?: string): ModelOption | undefined {
   if (!model) {
     return undefined
   }

package/src/components/agent/SessionBrowser.tsx

@@ -1,14 +1,15 @@
 import { useMemo, useState } from 'react'
-import type { ReactNode } from 'react'
-import { Eraser, FolderOpen, Layers, Pencil, Search, SearchX, Trash2, X } from 'lucide-react'
-import { clearFilters, filterRows, groupRows, hasFacetFilter, scopeActive, subsetSummary } from '@workerdeck/protocol'
-import type { SessionRow, SessionTask, StepDisplay, SubagentDisplay, ViewConfig, WorkspaceScope } from '@workerdeck/protocol'
+import type { HTMLAttributes, ReactNode } from 'react'
+import { BedDouble, Eraser, FolderOpen, Layers, Pencil, Plus, Search, SearchX, Trash2, X } from 'lucide-react'
+import { clearFilters, filterRows, groupRows, hasFacetFilter, scopeActive, sessionKey, subsetSummary } from '@workerdeck/protocol'
+import type { SessionGroup, SessionRow, SessionTask, StepDisplay, SubagentDisplay, ViewConfig, WorkspaceScope } from '@workerdeck/protocol'
 import { Button } from '../ui/Button.tsx'
 import { Empty } from '../ui/Empty.tsx'
 import { Input } from '../ui/Input.tsx'
 import { ProjectIcon } from './ProjectIcon.tsx'
 import { SessionFilters } from './SessionFilters.tsx'
 import { SessionItem, type SelectModifiers } from './SessionItem.tsx'
+import { CustomGroupHeader, GroupHeading, HeadingAction, NewGroupButton, useGroupDrag } from './SessionGroups.tsx'
 import { cn } from '../../lib/utils.ts'
 
 export { SessionStatusIcon } from './SessionStatusIcon.tsx'
@@ -33,12 +34,15 @@ export interface SessionBrowserProps {
   onDelete?: (row: SessionRow) => void
   onRename?: (row: SessionRow, title: string) => void
   onClearContext?: (row: SessionRow) => void
+  onSleep?: (row: SessionRow) => void
   onSelectSubagent?: (row: SessionRow, toolUseId: string) => void
   onSelectTask?: (row: SessionRow, task: SessionTask) => void
   onStopTask?: (row: SessionRow, toolUseId: string) => void
   onSelectShell?: (row: SessionRow, shellId: string) => void
   onKillShell?: (row: SessionRow, shellId: string) => void
   onShellAgentWrite?: (row: SessionRow, shellId: string, enabled: boolean) => void
+  // Draws a `+` on each project heading: start a session on that gateway, in that project's root.
+  onCreateInGroup?: (target: GroupTarget) => void
   emptyState?: ReactNode
   // The facet controls, drawn inline. A host with a header puts `SessionFiltersButton` there instead.
   showControls?: boolean
@@ -48,6 +52,8 @@ export interface SessionBrowserProps {
   className?: string
 }
 
+export type GroupTarget = { hostId: string; cwd?: string }
+
 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')
 }
@@ -69,12 +75,14 @@ export function SessionBrowser({
   onDelete,
   onRename,
   onClearContext,
+  onSleep,
   onSelectSubagent,
   onSelectTask,
   onStopTask,
   onSelectShell,
   onKillShell,
   onShellAgentWrite,
+  onCreateInGroup,
   emptyState,
   showControls = true,
   showSearch = showControls,
@@ -82,12 +90,65 @@ export function SessionBrowser({
   projectIcons,
   className,
 }: SessionBrowserProps) {
+  const rowGateways = useMemo(() => new Set(rows.map((row) => row.hostId)).size, [rows])
+  const gateways = gatewayCount ?? rowGateways
   const visible = useMemo(() => filterRows(rows, config, scope), [rows, config, scope])
-  const groups = useMemo(() => groupRows(visible, config), [visible, config])
+  const groups = useMemo(() => groupRows(visible, config, { gatewayCount: gateways }), [visible, config, gateways])
   const subset = subsetSummary(config, scope, visible.length, rows.length)
-  const rowGateways = useMemo(() => new Set(rows.map((row) => row.hostId)).size, [rows])
+  const custom = config.groupBy === 'custom'
+  const [editingGroup, setEditingGroup] = useState<string>()
 
   const set = (patch: Partial<ViewConfig>) => onConfigChange({ ...config, ...patch })
+  const drag = useGroupDrag(config.customGroups ?? [], (customGroups) => set({ customGroups }))
+
+  const heading = (group: SessionGroup) => {
+    if (custom) {
+      return (
+        <CustomGroupHeader
+          group={group}
+          editing={group.custom !== undefined && editingGroup === group.custom}
+          onEditingChange={(editing) => setEditingGroup(editing ? group.custom : undefined)}
+          onRename={(name) => group.custom && drag.rename(group.custom, name)}
+          onRemove={() => group.custom && drag.remove(group.custom)}
+          dragProps={drag.header(group)}
+        />
+      )
+    }
+    if (config.groupBy === 'none' || !group.label) {
+      return null
+    }
+    const project = config.groupBy === 'project'
+    const target = project && group.hostId ? { hostId: group.hostId, cwd: group.cwd } : undefined
+    return (
+      <GroupHeading
+        label={
+          group.gateway && group.project ? (
+            <>
+              {group.gateway}
+              <span aria-hidden> · </span>
+              <span className="text-fg-1">{group.project}</span>
+            </>
+          ) : (
+            group.label
+          )
+        }
+        count={group.rows.length}
+        title={project && group.cwd ? group.cwd : undefined}
+        leading={
+          project ? (
+            <ProjectIcon icon={group.rows[0]?.info.project?.icon} src={iconSrcOf(group.rows[0], projectIcons)} name={group.label} />
+          ) : undefined
+        }
+        actions={
+          target && onCreateInGroup ? (
+            <HeadingAction label={`New session in ${group.label}`} onClick={() => onCreateInGroup(target)}>
+              <Plus className="size-3" />
+            </HeadingAction>
+          ) : undefined
+        }
+      />
+    )
+  }
 
   return (
     <div data-slot="session-browser" className={cn('flex flex-col gap-3', className)}>
@@ -137,26 +198,29 @@ export function SessionBrowser({
       ) : (
         <div className="flex flex-col gap-4 px-1">
           {groups.map((group) => (
-            <div key={group.key} className="flex flex-col gap-1">
-              {config.groupBy !== 'none' && group.label ? (
-                <div className="flex items-center gap-2 px-2 text-label font-medium text-fg-4">
-                  {config.groupBy === 'project' ? (
-                    <ProjectIcon icon={group.rows[0]?.info.project?.icon} src={iconSrcOf(group.rows[0], projectIcons)} name={group.label} />
-                  ) : null}
-                  <span className="uppercase tracking-wide">{group.label}</span>
-                  <span className="text-fg-4/70">{group.rows.length}</span>
+            <div
+              key={group.key}
+              {...(custom ? drag.container(group) : {})}
+              className={cn('flex flex-col gap-1 rounded-md', custom && drag.isOver(`group:${group.key}`) && 'bg-row-hover/50')}
+            >
+              {heading(group)}
+              {custom && group.custom !== undefined && group.rows.length === 0 ? (
+                <div className="mx-1 rounded-md border border-dashed border-border px-2 py-2 text-center text-label text-fg-4">
+                  Drag sessions here
                 </div>
               ) : null}
               {group.rows.map((row) => (
                 <SessionRowItem
-                  key={`${row.hostId}:${row.info.id}`}
+                  key={sessionKey(row)}
+                  dragProps={custom ? drag.session(sessionKey(row), group) : undefined}
+                  dropTarget={custom && drag.isOver(`row:${sessionKey(row)}`)}
                   row={row}
                   active={isActive(row)}
                   activeSubagentId={activeSubagentId}
                   activeShellId={activeShellId}
                   actions={rowActions?.(row)}
                   now={now}
-                  showGateway={(gatewayCount ?? rowGateways) > 1 && config.groupBy !== 'gateway'}
+                  showGateway={gateways > 1 && config.groupBy !== 'project'}
                   showProject={config.groupBy !== 'project'}
                   subagents={config.subagents}
                   shells={config.shells}
@@ -166,6 +230,7 @@ export function SessionBrowser({
                   onDelete={onDelete}
                   onRename={onRename}
                   onClearContext={onClearContext}
+                  onSleep={onSleep}
                   onSelectSubagent={onSelectSubagent}
                   onSelectTask={onSelectTask}
                   onStopTask={onStopTask}
@@ -176,6 +241,7 @@ export function SessionBrowser({
               ))}
             </div>
           ))}
+          {custom ? <NewGroupButton onClick={() => setEditingGroup(drag.create())} /> : null}
         </div>
       )}
     </div>
@@ -189,6 +255,8 @@ function iconSrcOf(row: SessionRow | undefined, icons: Record<string, string> |
 
 interface SessionRowItemProps {
   row: SessionRow
+  dragProps?: HTMLAttributes<HTMLDivElement>
+  dropTarget?: boolean
   active?: boolean
   actions?: ReactNode
   activeSubagentId?: string
@@ -204,6 +272,7 @@ interface SessionRowItemProps {
   onDelete?: (row: SessionRow) => void
   onRename?: (row: SessionRow, title: string) => void
   onClearContext?: (row: SessionRow) => void
+  onSleep?: (row: SessionRow) => void
   onSelectSubagent?: (row: SessionRow, toolUseId: string) => void
   onSelectTask?: (row: SessionRow, task: SessionTask) => void
   onStopTask?: (row: SessionRow, toolUseId: string) => void
@@ -214,6 +283,8 @@ interface SessionRowItemProps {
 
 function SessionRowItem({
   row,
+  dragProps,
+  dropTarget,
   active,
   actions,
   activeSubagentId,
@@ -229,6 +300,7 @@ function SessionRowItem({
   onDelete,
   onRename,
   onClearContext,
+  onSleep,
   onSelectSubagent,
   onSelectTask,
   onStopTask,
@@ -239,7 +311,7 @@ function SessionRowItem({
   const { info } = row
   const [editing, setEditing] = useState(false)
 
-  return (
+  const item = (
     <SessionItem
       row={row}
       active={active === true}
@@ -279,6 +351,15 @@ function SessionRowItem({
                 <Eraser className="size-3 text-fg-3" />
               </RowAction>
             ) : null}
+            {onSleep && info.capabilities?.engineSleep && info.status === 'idle' && !info.engineAsleep ? (
+              <RowAction
+                label="Sleep session"
+                title="Stop the engine process to free its memory - the session stays here and wakes on your next message"
+                onClick={() => onSleep(row)}
+              >
+                <BedDouble className="size-3 text-fg-3" />
+              </RowAction>
+            ) : null}
             {onDelete ? (
               <RowAction label="Close session" onClick={() => onDelete(row)}>
                 <Trash2 className="size-3 text-fg-3" />
@@ -289,6 +370,14 @@ function SessionRowItem({
       }
     />
   )
+  if (!dragProps) {
+    return item
+  }
+  return (
+    <div {...dragProps} className={cn('rounded-md', dropTarget && 'shadow-[inset_0_2px_0_0_var(--color-accent)]')}>
+      {item}
+    </div>
+  )
 }
 
 function RowAction({ label, title, onClick, children }: { label: string; title?: string; onClick: () => void; children: ReactNode }) {

package/src/components/agent/SessionFilters.tsx

@@ -106,8 +106,8 @@ export function SessionFilters({ config, onConfigChange, rows, scope, gateways:
               { value: 'none', label: 'No grouping' },
               { value: 'state', label: 'By state' },
               { value: 'adapter', label: 'By engine' },
-              ...(projects.length > 1 ? [{ value: 'project' as const, label: 'By project' }] : []),
-              ...(gateways.length > 1 ? [{ value: 'gateway' as const, label: 'By gateway' }] : []),
+              { value: 'project', label: gateways.length > 1 ? 'By gateway & project' : 'By project' },
+              { value: 'custom', label: 'Custom' },
             ]}
             onChange={(groupBy) => set({ groupBy: groupBy as GroupBy })}
           />