@workerdeck/ui 3.1.0 → 3.3.0

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 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-Cby4i_VL.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.1.0",
+  "version": "3.3.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.1.0",
-    "@workerdeck/protocol": "3.1.0",
-    "@workerdeck/react": "3.1.0"
+    "@workerdeck/protocol": "3.3.0",
+    "@workerdeck/react": "3.3.0",
+    "@workerdeck/client": "3.3.0"
   },
   "peerDependencies": {
     "monaco-editor": "^0.56.0",

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 { 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'
@@ -39,6 +40,8 @@ export interface SessionBrowserProps {
   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 +51,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')
 }
@@ -75,6 +80,7 @@ export function SessionBrowser({
   onSelectShell,
   onKillShell,
   onShellAgentWrite,
+  onCreateInGroup,
   emptyState,
   showControls = true,
   showSearch = showControls,
@@ -82,12 +88,55 @@ 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.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 +186,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}
@@ -176,6 +228,7 @@ export function SessionBrowser({
               ))}
             </div>
           ))}
+          {custom ? <NewGroupButton onClick={() => setEditingGroup(drag.create())} /> : null}
         </div>
       )}
     </div>
@@ -189,6 +242,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
@@ -214,6 +269,8 @@ interface SessionRowItemProps {
 
 function SessionRowItem({
   row,
+  dragProps,
+  dropTarget,
   active,
   actions,
   activeSubagentId,
@@ -239,7 +296,7 @@ function SessionRowItem({
   const { info } = row
   const [editing, setEditing] = useState(false)
 
-  return (
+  const item = (
     <SessionItem
       row={row}
       active={active === true}
@@ -289,6 +346,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 })}
           />

package/src/components/agent/SessionGroups.tsx

@@ -0,0 +1,248 @@
+import { useState } from 'react'
+import type { DragEvent, HTMLAttributes, ReactNode } from 'react'
+import { GripVertical, Pencil, Plus, Trash2 } from 'lucide-react'
+import {
+  addCustomGroup,
+  moveCustomGroup,
+  moveToCustomGroup,
+  newCustomGroupId,
+  removeCustomGroup,
+  renameCustomGroup,
+} from '@workerdeck/protocol'
+import type { CustomGroup, SessionGroup } from '@workerdeck/protocol'
+import { Button } from '../ui/Button.tsx'
+import { Input } from '../ui/Input.tsx'
+import { cn } from '../../lib/utils.ts'
+
+type DragItem = { kind: 'session'; key: string } | { kind: 'group'; id: string }
+
+export type GroupDrag = ReturnType<typeof useGroupDrag>
+
+// The payload lives in state rather than `dataTransfer`, which is unreadable during `dragover`; `setData` is still
+// written because some engines refuse to start a drag without it.
+export function useGroupDrag(groups: readonly CustomGroup[], onChange: (groups: CustomGroup[]) => void) {
+  const [item, setItem] = useState<DragItem>()
+  const [over, setOver] = useState<string>()
+  const end = () => {
+    setItem(undefined)
+    setOver(undefined)
+  }
+  const start = (e: DragEvent, next: DragItem) => {
+    e.stopPropagation()
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', next.kind === 'session' ? next.key : next.id)
+    setItem(next)
+  }
+  const accept = (e: DragEvent, spot: string) => {
+    e.preventDefault()
+    e.stopPropagation()
+    e.dataTransfer.dropEffect = 'move'
+    setOver(spot)
+  }
+
+  function session(key: string, group: SessionGroup): HTMLAttributes<HTMLDivElement> {
+    return {
+      draggable: true,
+      onDragStart: (e) => start(e, { kind: 'session', key }),
+      onDragEnd: end,
+      onDragOver: (e) => {
+        if (item?.kind === 'session') {
+          accept(e, `row:${key}`)
+        }
+      },
+      onDrop: (e) => {
+        if (item?.kind !== 'session') {
+          return
+        }
+        e.preventDefault()
+        e.stopPropagation()
+        if (item.key !== key) {
+          onChange(moveToCustomGroup(groups, item.key, group.custom, group.custom ? key : undefined))
+        }
+        end()
+      },
+    }
+  }
+
+  function container(group: SessionGroup): HTMLAttributes<HTMLDivElement> {
+    return {
+      onDragOver: (e) => {
+        if (item) {
+          accept(e, `group:${group.key}`)
+        }
+      },
+      onDrop: (e) => {
+        e.preventDefault()
+        if (item?.kind === 'session') {
+          onChange(moveToCustomGroup(groups, item.key, group.custom))
+        } else if (item?.kind === 'group') {
+          onChange(moveCustomGroup(groups, item.id, group.custom))
+        }
+        end()
+      },
+    }
+  }
+
+  function header(group: SessionGroup): HTMLAttributes<HTMLDivElement> {
+    const id = group.custom
+    if (id === undefined) {
+      return {}
+    }
+    return { draggable: true, onDragStart: (e) => start(e, { kind: 'group', id }), onDragEnd: end }
+  }
+
+  return {
+    dragging: item !== undefined,
+    isOver: (spot: string) => over === spot,
+    session,
+    container,
+    header,
+    create: (name = 'New group') => {
+      const id = newCustomGroupId()
+      onChange(addCustomGroup(groups, name, id))
+      return id
+    },
+    rename: (id: string, name: string) => onChange(renameCustomGroup(groups, id, name)),
+    remove: (id: string) => onChange(removeCustomGroup(groups, id)),
+  }
+}
+
+export function CustomGroupHeader({
+  group,
+  editing,
+  onEditingChange,
+  onRename,
+  onRemove,
+  dragProps,
+}: {
+  group: SessionGroup
+  editing: boolean
+  onEditingChange: (editing: boolean) => void
+  onRename: (name: string) => void
+  onRemove: () => void
+  dragProps: HTMLAttributes<HTMLDivElement>
+}) {
+  if (editing) {
+    return <GroupNameInput initial={group.label ?? ''} onRename={onRename} onDone={() => onEditingChange(false)} />
+  }
+
+  const custom = group.custom !== undefined
+  return (
+    <GroupHeading
+      {...dragProps}
+      label={group.label ?? ''}
+      count={group.rows.length}
+      className={cn('group/heading', custom && 'cursor-grab')}
+      onDoubleClick={custom ? () => onEditingChange(true) : undefined}
+      leading={custom ? <GripVertical className="-ml-1.5 size-3 opacity-0 group-hover/heading:opacity-60" /> : undefined}
+      actions={
+        custom ? (
+          <>
+            <HeadingAction label="Rename group" onClick={() => onEditingChange(true)}>
+              <Pencil className="size-3" />
+            </HeadingAction>
+            <HeadingAction label="Delete group" title="Delete the group - its sessions move to Ungrouped" onClick={onRemove}>
+              <Trash2 className="size-3" />
+            </HeadingAction>
+          </>
+        ) : undefined
+      }
+    />
+  )
+}
+
+function GroupNameInput({ initial, onRename, onDone }: { initial: string; onRename: (name: string) => void; onDone: () => void }) {
+  const [draft, setDraft] = useState(initial)
+  const commit = () => {
+    const name = draft.trim()
+    if (name && name !== initial) {
+      onRename(name)
+    }
+    onDone()
+  }
+  return (
+    <div className="px-2">
+      <Input
+        autoFocus
+        aria-label="Group name"
+        value={draft}
+        onFocus={(e) => e.currentTarget.select()}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            commit()
+          } else if (e.key === 'Escape') {
+            e.stopPropagation()
+            onDone()
+          }
+        }}
+        className="h-6 text-label"
+      />
+    </div>
+  )
+}
+
+export function GroupHeading({
+  label,
+  count,
+  leading,
+  actions,
+  className,
+  ...rest
+}: {
+  label: string
+  count: number
+  leading?: ReactNode
+  actions?: ReactNode
+} & HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div {...rest} className={cn('group/heading flex min-h-5 items-center gap-2 px-2 text-label font-medium text-fg-4', className)}>
+      {leading}
+      <span className="min-w-0 truncate uppercase tracking-wide">{label}</span>
+      <span className="text-fg-4/70">{count}</span>
+      {actions ? (
+        <span className="ml-auto flex items-center gap-0.5 opacity-0 transition-opacity group-hover/heading:opacity-100 focus-within:opacity-100">
+          {actions}
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+export function HeadingAction({
+  label,
+  title,
+  onClick,
+  children,
+}: {
+  label: string
+  title?: string
+  onClick: () => void
+  children: ReactNode
+}) {
+  return (
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      aria-label={label}
+      title={title ?? label}
+      className="size-5 text-fg-3"
+      onClick={(e) => {
+        e.stopPropagation()
+        onClick()
+      }}
+    >
+      {children}
+    </Button>
+  )
+}
+
+export function NewGroupButton({ onClick }: { onClick: () => void }) {
+  return (
+    <Button variant="ghost" size="xs" className="mx-1 self-start text-fg-3" onClick={onClick}>
+      <Plus />
+      New group
+    </Button>
+  )
+}

package/src/components/terminal/items.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useEffect, useState, type ReactNode } from 'react'
-import type { MessageOrigin } from '@workerdeck/protocol'
+import { peerShortId, type MessageOrigin } from '@workerdeck/protocol'
 import type { ShellItem, TranscriptItem } from '@workerdeck/react'
 import { compactionText, formatBytes, formatCost, formatDuration, toolInputPreview } from '../../lib/format.ts'
 import { isMutatingTool } from '../../lib/tool-icon.ts'
@@ -41,7 +41,7 @@ function clipToChars(lines: string[], maxChars: number): string[] {
 }
 
 export function peerLabel(origin: MessageOrigin): string {
-  const who = origin.name ? `${origin.name} (${origin.sessionId.slice(0, 8)})` : origin.sessionId.slice(0, 8)
+  const who = origin.name ? `${origin.name} (${peerShortId(origin.sessionId)})` : peerShortId(origin.sessionId)
   return `message from ${origin.engine ? `${origin.engine} session ` : 'session '}${who}`
 }
 

package/src/components/terminal/tool-run.ts

@@ -1,4 +1,4 @@
-import { isPeerSendTool, peerDeliveredTo, type MessageOrigin } from '@workerdeck/protocol'
+import { isPeerSendTool, peerDeliveredTo, peerShortId, type MessageOrigin } from '@workerdeck/protocol'
 import type { TranscriptItem } from '@workerdeck/react'
 import { toolInputPreview } from '../../lib/format.ts'
 import { isShellTool } from '../../lib/tool-icon.ts'
@@ -12,7 +12,10 @@ export function isPeerSend(item: TranscriptItem): boolean {
 }
 
 export function peerName(origin: MessageOrigin): string {
-  return origin.name ?? origin.sessionId.slice(0, 8)
+  if (!origin.name) {
+    return peerShortId(origin.sessionId)
+  }
+  return origin.hostId ? `${origin.name}@${origin.hostId}` : origin.name
 }
 
 // Every peer this transcript has named, by session id. A conversation names its peers twice over: an
@@ -48,7 +51,7 @@ export function peerSendTarget(item: ToolCallItem, names?: ReadonlyMap<string, s
   if (sessionId === undefined) {
     return 'peer'
   }
-  return delivered?.name ?? names?.get(sessionId) ?? sessionId.slice(0, 8)
+  return delivered?.name ?? names?.get(sessionId) ?? peerShortId(sessionId)
 }
 
 export function peerSendText(item: ToolCallItem): string {

package/src/index.ts

@@ -156,7 +156,13 @@ export {
 export { SkillsDialog, type SkillsDialogProps } from './components/agent/SkillsDialog.tsx'
 export { HostFilesDialog, type HostFilesDialogProps } from './components/agent/HostFilesDialog.tsx'
 export { SessionList, SessionListItem, type SessionListItemProps, type SessionListProps } from './components/agent/SessionList.tsx'
-export { SessionBrowser, SessionSearch, rowShapeClass, type SessionBrowserProps } from './components/agent/SessionBrowser.tsx'
+export {
+  SessionBrowser,
+  SessionSearch,
+  rowShapeClass,
+  type GroupTarget,
+  type SessionBrowserProps,
+} from './components/agent/SessionBrowser.tsx'
 export {
   STEP_DISPLAY_OPTIONS,
   SessionFilters,