@workerdeck/ui 0.13.0 → 0.16.0

package/src/components/agent/Response.tsx

@@ -1,131 +1,6 @@
 import { memo } from 'react'
 import { Streamdown } from 'streamdown'
 import { cn } from '../../lib/utils.ts'
-import { useLines } from './transcript-variant.tsx'
-
-/**
- * Markdown on a terminal's grid.
- *
- * Prose defaults give every block its own rhythm — a heading is bigger, a list
- * item is looser, an inline `code` chip is padded taller than the line it sits
- * in — and the result is text that visibly breathes at different rates as you
- * scroll. A terminal has exactly one line height and one type size, and that
- * uniformity is most of what makes it readable at a glance.
- *
- * So: every line 1.25rem, every block flush, and one blank line (1.25rem, i.e.
- * exactly one row) between blocks. Headings keep their weight but lose their
- * size. Inline code keeps a background — it still has to be distinguishable —
- * but no vertical padding, because that is what pushes a line off the grid.
- */
-const TERMINAL_PROSE = [
-  'text-body-sm leading-5',
-  '[&_*]:leading-5',
-  // Block rhythm: nothing has its own margins, and siblings are one row apart.
-  // `!` throughout because these fight the renderer's own utilities, and some of
-  // those (`space-y-*`, which is a `> * + *` rule) outrank a plain descendant
-  // selector — a list would otherwise keep its half-row gaps while every other
-  // block snapped to the grid.
-  '[&_p]:my-0! [&_pre]:my-0! [&_blockquote]:my-0! [&_table]:my-0!',
-  '[&_h1]:my-0! [&_h2]:my-0! [&_h3]:my-0! [&_h4]:my-0! [&_h5]:my-0! [&_h6]:my-0!',
-  '[&>*+*]:mt-5',
-  // Lists are rows, not paragraphs: no margin anywhere in them, and no
-  // inter-item spacing from a `space-y` on the list itself.
-  '[&_ul]:my-0! [&_ol]:my-0! [&_li]:my-0! [&_li>p]:my-0!',
-  '[&_li+li]:mt-0! [&_ul_ul]:mt-0! [&_ul_ol]:mt-0! [&_ol_ul]:mt-0! [&_ol_ol]:mt-0!',
-  '[&_li]:py-0! [&_ul]:py-0! [&_ol]:py-0!',
-  // Markers on their own column, at the width the marker actually is — the
-  // indent a terminal (and the markdown source) uses, not a typographic one.
-  // `ch` is the unit because this variant runs in a monospace face: `• ` is two
-  // cells, `1. ` is three, so the text starts exactly where it would in the raw
-  // document and a wrapped line hangs under it instead of under the bullet.
-  // Nesting then costs one marker width per level, which is the 2-space step.
-  // `list-outside` is the load-bearing half: the renderer marks lists `inside`,
-  // where the marker joins the text flow — so the indent moves the bullet too
-  // (the list sits a marker-width right of the paragraph above it) and a wrapped
-  // line runs back under the bullet instead of hanging under its own text.
-  '[&_ul]:list-outside! [&_ol]:list-outside!',
-  '[&_ul]:pl-[2ch]! [&_ol]:pl-[3ch]! [&_li]:pl-0!',
-  // Headings are weight, not size — a terminal has one type size.
-  '[&_h1]:text-body-sm [&_h2]:text-body-sm [&_h3]:text-body-sm',
-  '[&_h4]:text-body-sm [&_h5]:text-body-sm [&_h6]:text-body-sm',
-  '[&_h1]:font-semibold [&_h2]:font-semibold [&_h3]:font-semibold',
-  '[&_h4]:font-semibold [&_h5]:font-semibold [&_h6]:font-semibold',
-  '[&_blockquote]:border-l [&_blockquote]:border-border [&_blockquote]:pl-2',
-  // Inline code only (`:not(pre) > code`) — fenced blocks keep their own box.
-  // Horizontal padding is free; vertical padding is what pushes a line off grid.
-  '[&_:not(pre)>code]:rounded-none [&_:not(pre)>code]:px-1! [&_:not(pre)>code]:py-0!',
-  '[&_:not(pre)>code]:text-body-sm [&_:not(pre)>code]:leading-5! [&_:not(pre)>code]:text-fg-1',
-  '[&_th]:py-0! [&_td]:py-0!',
-  // The renderer's fenced-code card: rounded frame, its own header strip, a
-  // second rounded frame inside it, and a floating pill for the buttons. Four
-  // boxes around what is, in a terminal, a band of dim text. Flattened to
-  // exactly that — the band keeps a background so a block still reads as code,
-  // and the actions keep their top-right corner but lose the pill.
-  '[&_[data-streamdown=code-block]]:my-0! [&_[data-streamdown=code-block]]:gap-0!',
-  '[&_[data-streamdown=code-block]]:rounded-none! [&_[data-streamdown=code-block]]:border-0!',
-  '[&_[data-streamdown=code-block]]:bg-transparent! [&_[data-streamdown=code-block]]:p-0!',
-  // The language strip costs a whole row to say what the code already shows, and
-  // the actions cost another. Both go: the block is the band, and the buttons
-  // float over its top-right corner, appearing on hover or keyboard focus.
-  '[&_[data-streamdown=code-block]]:relative!',
-  '[&_[data-streamdown=code-block-header]]:hidden!',
-  '[&_div:has(>[data-streamdown=code-block-actions])]:absolute! [&_div:has(>[data-streamdown=code-block-actions])]:top-0!',
-  '[&_div:has(>[data-streamdown=code-block-actions])]:right-0! [&_div:has(>[data-streamdown=code-block-actions])]:mt-0!',
-  '[&_div:has(>[data-streamdown=code-block-actions])]:h-5! [&_div:has(>[data-streamdown=code-block-actions])]:opacity-0!',
-  '[&_div:has(>[data-streamdown=code-block-actions])]:transition-opacity',
-  '[&_[data-streamdown=code-block]:hover_div:has(>[data-streamdown=code-block-actions])]:opacity-100!',
-  '[&_[data-streamdown=code-block]:focus-within_div:has(>[data-streamdown=code-block-actions])]:opacity-100!',
-  '[&_[data-streamdown=code-block-actions]]:rounded-none! [&_[data-streamdown=code-block-actions]]:border-0!',
-  '[&_[data-streamdown=code-block-actions]]:bg-code-bg! [&_[data-streamdown=code-block-actions]]:px-1!',
-  '[&_[data-streamdown=code-block-actions]]:py-0! [&_[data-streamdown=code-block-actions]]:gap-1!',
-  '[&_[data-streamdown=code-block-actions]]:backdrop-blur-none!',
-  '[&_[data-streamdown=code-block-body]]:rounded-none! [&_[data-streamdown=code-block-body]]:border-0!',
-  '[&_[data-streamdown=code-block-body]]:bg-code-bg! [&_[data-streamdown=code-block-body]]:px-2!',
-  '[&_[data-streamdown=code-block-body]]:py-0! [&_[data-streamdown=code-block-body]]:text-body-sm!',
-  // The action buttons' hit areas, on the grid like everything else.
-  '[&_[data-streamdown=code-block-copy-button]]:p-0! [&_[data-streamdown=code-block-download-button]]:p-0!',
-  // Tables come in a frame of their own, plus a controls row above them and a
-  // second frame around the scroller — three boxes and a blank line to hold
-  // three buttons. Same treatment: the table is the content, the buttons float
-  // over its top-right on hover. The controls row is the child that has no
-  // `<table>` in it, which is also how it knows to disappear when the renderer
-  // draws no controls at all.
-  '[&_[data-streamdown=table-wrapper]]:rounded-none! [&_[data-streamdown=table-wrapper]]:border-0!',
-  '[&_[data-streamdown=table-wrapper]]:my-0! [&_[data-streamdown=table-wrapper]]:bg-transparent!',
-  '[&_[data-streamdown=table-wrapper]]:relative! [&_[data-streamdown=table-wrapper]]:gap-0!',
-  '[&_[data-streamdown=table-wrapper]]:p-0!',
-  '[&_[data-streamdown=table-wrapper]>div:not(:has(table))]:absolute! [&_[data-streamdown=table-wrapper]>div:not(:has(table))]:top-0!',
-  '[&_[data-streamdown=table-wrapper]>div:not(:has(table))]:right-0! [&_[data-streamdown=table-wrapper]>div:not(:has(table))]:z-10!',
-  '[&_[data-streamdown=table-wrapper]>div:not(:has(table))]:opacity-0! [&_[data-streamdown=table-wrapper]>div:not(:has(table))]:bg-code-bg!',
-  '[&_[data-streamdown=table-wrapper]>div:not(:has(table))]:px-1! [&_[data-streamdown=table-wrapper]>div:not(:has(table))]:transition-opacity',
-  '[&_[data-streamdown=table-wrapper]:hover>div:not(:has(table))]:opacity-100!',
-  '[&_[data-streamdown=table-wrapper]:focus-within>div:not(:has(table))]:opacity-100!',
-  '[&_[data-streamdown=table-wrapper]>div:has(table)]:rounded-none! [&_[data-streamdown=table-wrapper]>div:has(table)]:border-0!',
-  '[&_[data-streamdown=table-wrapper]>div:has(table)]:bg-transparent!',
-].join(' ')
-
-/**
- * The controls' icons as characters.
- *
- * The renderer draws its copy/download affordances as line-art SVGs, which next
- * to monospace text read as buttons from another application. These are the
- * glyphs a terminal would use — and they inherit the surrounding font, so they
- * sit on the same grid as the code they belong to.
- */
-const glyphIcon = (glyph: string) =>
-  function GlyphIcon({ className }: { className?: string }) {
-    return (
-      <span aria-hidden className={cn('font-mono text-body-sm leading-5', className)}>
-        {glyph}
-      </span>
-    )
-  }
-
-const TERMINAL_ICONS = {
-  DownloadIcon: glyphIcon('⤓'),
-  CopyIcon: glyphIcon('⧉'),
-  CheckIcon: glyphIcon('✓'),
-}
 
 export interface ResponseProps {
   children: string
@@ -138,18 +13,12 @@ export interface ResponseProps {
  * highlighted with shiki (dual theme follows [data-theme] through the dark: variant). */
 export const Response = memo(
   function Response({ children, streaming, className }: ResponseProps) {
-    const lines = useLines()
     return (
       <Streamdown
         mode={streaming ? 'streaming' : 'static'}
         parseIncompleteMarkdown={streaming}
         shikiTheme={['github-light', 'github-dark']}
-        icons={lines ? TERMINAL_ICONS : undefined}
-        className={cn(
-          'size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0',
-          lines && TERMINAL_PROSE,
-          className,
-        )}>
+        className={cn('size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0', className)}>
         {children}
       </Streamdown>
     )

package/src/components/agent/SessionBrowser.tsx

@@ -3,10 +3,12 @@ import {
   BellRing,
   CircleAlert,
   CircleSlash,
+  Layers,
   Moon,
   PauseCircle,
   Pencil,
   Search,
+  SearchX,
   Trash2,
   X,
 } from 'lucide-react'
@@ -30,6 +32,7 @@ import type {
   WorkspaceScope,
 } from '@workerdeck/protocol'
 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'
@@ -228,25 +231,23 @@ 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) => (
@@ -276,10 +277,6 @@ export function SessionBrowser({
   )
 }
 
-function Empty({ children }: { children: React.ReactNode }) {
-  return <div className='px-3 py-6 text-center text-body-sm text-fg-4'>{children}</div>
-}
-
 interface SessionRowItemProps {
   row: SessionRow
   active?: boolean
@@ -315,6 +312,14 @@ function SessionRowItem({
     <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 cursor-pointer flex-col gap-0.5 text-left transition-colors',
         rowShapeClass(active === true),
@@ -337,7 +342,6 @@ function SessionRowItem({
         ) : (
           <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',
@@ -365,7 +369,7 @@ function SessionRowItem({
       <div className='flex items-center gap-1 text-label text-fg-4'>
         <button
           type='button'
-          onClick={() => !editing && onSelect?.(row)}
+          tabIndex={-1}
           className='min-w-0 flex-1 truncate text-left font-mono outline-none'>
           {details.join(' · ')}
         </button>
@@ -375,7 +379,10 @@ function SessionRowItem({
             size='icon-sm'
             aria-label='Rename session'
             className='size-5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100'
-            onClick={() => setEditing(true)}>
+            onClick={(e) => {
+              e.stopPropagation()
+              setEditing(true)
+            }}>
             <Pencil className='size-3 text-fg-3' />
           </Button>
         ) : null}
@@ -385,7 +392,10 @@ function SessionRowItem({
             size='icon-sm'
             aria-label='Close session'
             className='size-5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100'
-            onClick={() => onDelete(row)}>
+            onClick={(e) => {
+              e.stopPropagation()
+              onDelete(row)
+            }}>
             <Trash2 className='size-3 text-fg-3' />
           </Button>
         ) : null}