@workerdeck/ui 0.20.0 → 0.22.0

package/src/components/terminal/PermissionPrompt.tsx

@@ -27,12 +27,14 @@ export interface TerminalPermissionPromptProps {
   /** `message` is fed back to the agent, which can then try something else;
    * `interrupt` also stops the turn. */
   onDeny: (requestId: string, message?: string, interrupt?: boolean) => void
+  className?: string
 }
 
 export function TerminalPermissionPrompt({
   request,
   onApprove,
   onDeny,
+  className,
 }: TerminalPermissionPromptProps) {
   const [focused, setFocused] = useState(0)
   const [denying, setDenying] = useState(false)
@@ -75,6 +77,7 @@ export function TerminalPermissionPrompt({
   return (
     <div
       data-slot='permission-prompt'
+      className={className}
       onKeyDown={(event) => {
         if (event.key === 'Escape') {
           event.preventDefault()

package/src/components/terminal/QuestionPrompt.tsx

@@ -40,12 +40,14 @@ export interface TerminalQuestionPromptProps {
   onAnswer: (requestId: string, updatedInput: Record<string, unknown>) => void
   /** Deny the tool — the model proceeds without an answer. */
   onDismiss: (requestId: string, message?: string) => void
+  className?: string
 }
 
 export function TerminalQuestionPrompt({
   request,
   onAnswer,
   onDismiss,
+  className,
 }: TerminalQuestionPromptProps) {
   const questions = parseUserQuestions(request.input)
   const [selections, setSelections] = useState<Selection[]>(() => questions.map(() => EMPTY))
@@ -97,6 +99,7 @@ export function TerminalQuestionPrompt({
   return (
     <div
       data-slot='question-prompt'
+      className={className}
       onKeyDown={(event) => {
         if (event.key === 'Escape') {
           event.preventDefault()

package/src/components/terminal/StatusLine.tsx

@@ -38,6 +38,7 @@ const SEVERITY_TONE: Record<StatusSeverity, Tone> = {
 }
 
 export interface TerminalStatusLineProps {
+  className?: string
   state: TranscriptState
   /** Plan windows to read from, when they should not be the session's own — the
    * gateway's per-profile state merged over this transcript's. See
@@ -75,6 +76,7 @@ function Reading({
 }
 
 export function TerminalStatusLine({
+  className,
   state,
   rateLimits,
   connection,
@@ -147,7 +149,7 @@ export function TerminalStatusLine({
   }
 
   return (
-    <Row data-slot='status-line' tone='dim'>
+    <Row data-slot='status-line' tone='dim' className={className}>
       {parts.map((part, index) => (
         <span key={index}>
           {index > 0 ? <Ink tone='faint'> · </Ink> : null}

package/src/components/ui/AlertDialog.tsx

@@ -1,6 +1,7 @@
 import { type FunctionComponent } from 'react'
 import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog'
 import { cn } from '../../lib/utils.ts'
+import { PortalScope } from './PortalScope.tsx'
 
 export const AlertDialog = AlertDialogPrimitive.Root
 export const AlertDialogTrigger = AlertDialogPrimitive.Trigger
@@ -12,26 +13,28 @@ export const AlertDialogContent: FunctionComponent<AlertDialogPrimitive.Popup.Pr
   ...props
 }) => (
   <AlertDialogPrimitive.Portal>
-    <AlertDialogPrimitive.Backdrop
-      className={cn(
-        'fixed inset-0 z-70 bg-black/40 backdrop-blur-[1px]',
-        'transition-opacity duration-(--motion-base)',
-        'data-starting-style:opacity-0 data-ending-style:opacity-0',
-      )}
-    />
-    <AlertDialogPrimitive.Popup
-      data-slot='alert-dialog-content'
-      className={cn(
-        'fixed top-1/2 left-1/2 z-70 w-[min(28rem,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2',
-        'rounded-lg border border-border bg-surface p-5 shadow-(--shadow-lg) outline-none',
-        'transition-[opacity,transform] duration-(--motion-base)',
-        'data-starting-style:scale-95 data-starting-style:opacity-0',
-        'data-ending-style:scale-95 data-ending-style:opacity-0',
-        className,
-      )}
-      {...props}>
-      {children}
-    </AlertDialogPrimitive.Popup>
+    <PortalScope>
+      <AlertDialogPrimitive.Backdrop
+        className={cn(
+          'fixed inset-0 z-70 bg-black/40 backdrop-blur-[1px]',
+          'transition-opacity duration-(--motion-base)',
+          'data-starting-style:opacity-0 data-ending-style:opacity-0',
+        )}
+      />
+      <AlertDialogPrimitive.Popup
+        data-slot='alert-dialog-content'
+        className={cn(
+          'fixed top-1/2 left-1/2 z-70 w-[min(28rem,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2',
+          'rounded-lg border border-border bg-surface p-5 shadow-(--shadow-lg) outline-none',
+          'transition-[opacity,transform] duration-(--motion-base)',
+          'data-starting-style:scale-95 data-starting-style:opacity-0',
+          'data-ending-style:scale-95 data-ending-style:opacity-0',
+          className,
+        )}
+        {...props}>
+        {children}
+      </AlertDialogPrimitive.Popup>
+    </PortalScope>
   </AlertDialogPrimitive.Portal>
 )
 

package/src/components/ui/Dialog.tsx

@@ -2,6 +2,7 @@ import { type FunctionComponent } from 'react'
 import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
 import { X } from 'lucide-react'
 import { cn } from '../../lib/utils.ts'
+import { PortalScope } from './PortalScope.tsx'
 
 export const Dialog = DialogPrimitive.Root
 export const DialogTrigger = DialogPrimitive.Trigger
@@ -18,29 +19,31 @@ export const DialogContent: FunctionComponent<
   DialogPrimitive.Popup.Props & { size?: 'sm' | 'md' | 'lg' }
 > = ({ className, children, size = 'md', ...props }) => (
   <DialogPrimitive.Portal>
-    <DialogPrimitive.Backdrop
-      className={cn(
-        'fixed inset-0 z-70 bg-black/40 backdrop-blur-[1px]',
-        'transition-opacity duration-(--motion-base)',
-        'data-starting-style:opacity-0 data-ending-style:opacity-0',
-      )}
-    />
-    <DialogPrimitive.Popup
-      data-slot='dialog-content'
-      className={cn(
-        'fixed top-1/2 left-1/2 z-70 flex max-h-[min(42rem,calc(100dvh-3rem))] -translate-x-1/2 -translate-y-1/2 flex-col',
-        size === 'sm' && 'w-[min(24rem,calc(100vw-2rem))]',
-        size === 'md' && 'w-[min(32rem,calc(100vw-2rem))]',
-        size === 'lg' && 'w-[min(46rem,calc(100vw-2rem))]',
-        'rounded-lg border border-border bg-surface shadow-(--shadow-lg) outline-none',
-        'transition-[opacity,transform] duration-(--motion-base)',
-        'data-starting-style:scale-95 data-starting-style:opacity-0',
-        'data-ending-style:scale-95 data-ending-style:opacity-0',
-        className,
-      )}
-      {...props}>
-      {children}
-    </DialogPrimitive.Popup>
+    <PortalScope>
+      <DialogPrimitive.Backdrop
+        className={cn(
+          'fixed inset-0 z-70 bg-black/40 backdrop-blur-[1px]',
+          'transition-opacity duration-(--motion-base)',
+          'data-starting-style:opacity-0 data-ending-style:opacity-0',
+        )}
+      />
+      <DialogPrimitive.Popup
+        data-slot='dialog-content'
+        className={cn(
+          'fixed top-1/2 left-1/2 z-70 flex max-h-[min(42rem,calc(100dvh-3rem))] -translate-x-1/2 -translate-y-1/2 flex-col',
+          size === 'sm' && 'w-[min(24rem,calc(100vw-2rem))]',
+          size === 'md' && 'w-[min(32rem,calc(100vw-2rem))]',
+          size === 'lg' && 'w-[min(46rem,calc(100vw-2rem))]',
+          'rounded-lg border border-border bg-surface shadow-(--shadow-lg) outline-none',
+          'transition-[opacity,transform] duration-(--motion-base)',
+          'data-starting-style:scale-95 data-starting-style:opacity-0',
+          'data-ending-style:scale-95 data-ending-style:opacity-0',
+          className,
+        )}
+        {...props}>
+        {children}
+      </DialogPrimitive.Popup>
+    </PortalScope>
   </DialogPrimitive.Portal>
 )
 

package/src/components/ui/Menu.tsx

@@ -1,6 +1,7 @@
 import { type FunctionComponent } from 'react'
 import { Menu as MenuPrimitive } from '@base-ui/react/menu'
 import { cn } from '../../lib/utils.ts'
+import { PortalScope } from './PortalScope.tsx'
 
 export const Menu = MenuPrimitive.Root
 export const MenuTrigger = MenuPrimitive.Trigger
@@ -10,23 +11,25 @@ export const MenuContent: FunctionComponent<
     Pick<MenuPrimitive.Positioner.Props, 'align' | 'side' | 'sideOffset'>
 > = ({ className, align = 'end', side = 'bottom', sideOffset = 6, ...props }) => (
   <MenuPrimitive.Portal>
-    <MenuPrimitive.Positioner
-      align={align}
-      side={side}
-      sideOffset={sideOffset}
-      className='isolate z-80 outline-none'>
-      <MenuPrimitive.Popup
-        data-slot='menu-content'
-        className={cn(
-          'min-w-48 rounded-md border border-border bg-surface p-1 text-fg-1 shadow-(--shadow-lg) outline-none',
-          'transition-[opacity,transform] duration-(--motion-base)',
-          'data-starting-style:scale-95 data-starting-style:opacity-0',
-          'data-ending-style:scale-95 data-ending-style:opacity-0',
-          className,
-        )}
-        {...props}
-      />
-    </MenuPrimitive.Positioner>
+    <PortalScope>
+      <MenuPrimitive.Positioner
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+        className='isolate z-80 outline-none'>
+        <MenuPrimitive.Popup
+          data-slot='menu-content'
+          className={cn(
+            'min-w-48 rounded-md border border-border bg-surface p-1 text-fg-1 shadow-(--shadow-lg) outline-none',
+            'transition-[opacity,transform] duration-(--motion-base)',
+            'data-starting-style:scale-95 data-starting-style:opacity-0',
+            'data-ending-style:scale-95 data-ending-style:opacity-0',
+            className,
+          )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </PortalScope>
   </MenuPrimitive.Portal>
 )
 

package/src/components/ui/PortalScope.tsx

@@ -0,0 +1,27 @@
+import { type FunctionComponent, type ReactNode } from 'react'
+
+/**
+ * Re-establishes the `.wd-root` styling scope inside a portal.
+ *
+ * The scoped stylesheet (`@workerdeck/ui/scoped.css`) rewrites every rule to
+ * live under `.wd-root`, so an embedder's page keeps its own design system and
+ * the panel keeps this one. Base UI popups (Menu, Dialog, AlertDialog, Select,
+ * Tooltip) portal to `document.body` — OUTSIDE the embedder's wrapper — so
+ * without this they would render unstyled, or worse, styled by the host.
+ *
+ * `display: contents` (inline, so no stylesheet needs to load for it) makes the
+ * element generate no box: positioning, hit-testing and the popup's own layout
+ * are untouched. It still carries the class, which is all the scope needs —
+ * design tokens declared on `.wd-root` inherit through it, and every
+ * `.wd-root <x>` rule matches below it. Theme keeps working because the dark
+ * token block matches `[data-theme='dark']` on ANY ancestor, and `document.body`
+ * sits under the host's themed `<html>` just like the panel does.
+ *
+ * Under the classic `theme.css` integration the class matches no rule and the
+ * element is inert, so the wrapper is unconditional.
+ */
+export const PortalScope: FunctionComponent<{ children?: ReactNode }> = ({ children }) => (
+  <div className='wd-root' style={{ display: 'contents' }}>
+    {children}
+  </div>
+)

package/src/components/ui/Select.tsx

@@ -2,6 +2,7 @@ import { type FunctionComponent } from 'react'
 import { Select as SelectPrimitive } from '@base-ui/react/select'
 import { Check, ChevronsUpDown } from 'lucide-react'
 import { cn } from '../../lib/utils.ts'
+import { PortalScope } from './PortalScope.tsx'
 
 export const Select = SelectPrimitive.Root
 export const SelectValue = SelectPrimitive.Value
@@ -40,22 +41,24 @@ export const SelectContent: FunctionComponent<
   ...props
 }) => (
   <SelectPrimitive.Portal>
-    <SelectPrimitive.Positioner
-      align={align}
-      alignItemWithTrigger={alignItemWithTrigger}
-      side={side}
-      sideOffset={sideOffset}
-      className='isolate z-80 outline-none'>
-      <SelectPrimitive.Popup
-        data-slot='select-content'
-        className={cn(
-          'max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto',
-          'rounded-md border border-border bg-surface p-1 text-fg-1 shadow-(--shadow-lg) outline-none',
-          className,
-        )}
-        {...props}
-      />
-    </SelectPrimitive.Positioner>
+    <PortalScope>
+      <SelectPrimitive.Positioner
+        align={align}
+        alignItemWithTrigger={alignItemWithTrigger}
+        side={side}
+        sideOffset={sideOffset}
+        className='isolate z-80 outline-none'>
+        <SelectPrimitive.Popup
+          data-slot='select-content'
+          className={cn(
+            'max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto',
+            'rounded-md border border-border bg-surface p-1 text-fg-1 shadow-(--shadow-lg) outline-none',
+            className,
+          )}
+          {...props}
+        />
+      </SelectPrimitive.Positioner>
+    </PortalScope>
   </SelectPrimitive.Portal>
 )
 

package/src/components/ui/Tooltip.tsx

@@ -1,6 +1,7 @@
 import { type FunctionComponent, type ReactElement, type ReactNode } from 'react'
 import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
 import { cn } from '../../lib/utils.ts'
+import { PortalScope } from './PortalScope.tsx'
 
 export const TooltipProvider = TooltipPrimitive.Provider
 
@@ -8,16 +9,18 @@ export const TooltipContent: FunctionComponent<
   TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, 'side' | 'sideOffset'>
 > = ({ className, side = 'top', sideOffset = 6, ...props }) => (
   <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Positioner side={side} sideOffset={sideOffset} className='isolate z-90'>
-      <TooltipPrimitive.Popup
-        data-slot='tooltip-content'
-        className={cn(
-          'rounded-md border border-border bg-surface px-2 py-1 text-label text-fg-2 shadow-(--shadow-md) outline-none',
-          className,
-        )}
-        {...props}
-      />
-    </TooltipPrimitive.Positioner>
+    <PortalScope>
+      <TooltipPrimitive.Positioner side={side} sideOffset={sideOffset} className='isolate z-90'>
+        <TooltipPrimitive.Popup
+          data-slot='tooltip-content'
+          className={cn(
+            'rounded-md border border-border bg-surface px-2 py-1 text-label text-fg-2 shadow-(--shadow-md) outline-none',
+            className,
+          )}
+          {...props}
+        />
+      </TooltipPrimitive.Positioner>
+    </PortalScope>
   </TooltipPrimitive.Portal>
 )
 

package/src/index.ts

@@ -177,7 +177,11 @@ export {
   rowShapeClass,
   type SessionBrowserProps,
 } from './components/agent/SessionBrowser.tsx'
-export { SessionStatusIcon } from './components/agent/SessionBrowser.tsx'
+// The session card itself — one component, every client. `SessionBrowser` is the
+// dashboard's list *around* it; a host that wants only the card (the VS Code
+// sidebar does, because the filtering chrome above it is native) takes this.
+export { SessionItem, type SessionItemProps } from './components/agent/SessionItem.tsx'
+export { SessionStatusIcon } from './components/agent/SessionStatusIcon.tsx'
 // Lifted out of the VS Code sidebar once the dashboard grew a collapsed rail
 // that needs the same glyph — two copies of a trademark set is one too many.
 export {

package/src/styles/scoped.entry.css

@@ -0,0 +1,16 @@
+/*
+ * Build entry for the SCOPED stylesheet (`@workerdeck/ui/scoped.css`) — see
+ * `scripts/build-scoped-css.mjs`, which compiles this with the Tailwind CLI and
+ * then rewrites every selector under `.wd-root`. Not shipped as-is and not an
+ * export: embedders import the compiled `scoped.css` artifact.
+ *
+ * `source(none)` + explicit `@source`: the utilities compiled here are exactly
+ * the ones this package's own components (and streamdown, whose markdown
+ * renderer ships Tailwind-classed markup) use — hermetic, independent of any
+ * host app's Tailwind build.
+ */
+@import 'tailwindcss' source(none);
+@source '../components';
+@source '../lib';
+@source '../../node_modules/streamdown/dist';
+@import './theme.css';

package/src/styles/terminal.css

@@ -595,7 +595,7 @@
 [data-terminal] .term-composer-body {
   margin-inline: auto;
   width: 100%;
-  max-width: var(--wd-content-max-w, 48rem);
+  max-width: var(--wd-transcript-max-width);
   padding-inline: var(--term-bleed, 0px);
   /* Air on each side of the prompt, and a plain pixel value rather than a
      fraction of `--term-line`: this is chrome between two rules, not a