@workerdeck/ui 0.12.0 → 0.13.0

package/src/components/agent/StatusBar.tsx

@@ -28,8 +28,11 @@ export interface StatusBarProps {
   onOpenStatus?: () => void
   onOpenContext?: () => void
   onOpenUsage?: () => void
-  /** Trailing slot — the session-actions menu, in the panel's top-right. */
+  /** Trailing slot — the session-actions menu, at the bar's trailing edge. */
   actions?: ReactNode
+  /** Which edge the bar sits on, so its separating rule goes on the other side.
+   * Placement is the panel's decision; this only styles it. */
+  placement?: 'top' | 'bottom'
   className?: string
 }
 
@@ -149,6 +152,7 @@ export function StatusBar({
   onOpenContext,
   onOpenUsage,
   actions,
+  placement = 'top',
   className,
 }: StatusBarProps) {
   const meta = STATUS_META[state.status]
@@ -160,7 +164,10 @@ export function StatusBar({
     <div
       data-slot='status-bar'
       className={cn(
-        'flex items-center gap-2 border-b border-border bg-surface px-3 py-1.5',
+        'flex items-center gap-2 border-border bg-surface px-3 py-1.5',
+        // The rule goes between the bar and the content, so which edge it sits
+        // on follows the placement.
+        placement === 'bottom' ? 'border-t' : 'border-b',
         className,
       )}>
       {/* One slot, two meanings: connection trouble wins it, because a session

package/src/components/agent/Transcript.tsx

@@ -171,7 +171,7 @@ function RecapRow({ line, since }: { line: string; since?: number }) {
   if (lines) {
     return (
       <div data-slot='recap' className='flex items-baseline gap-2 py-0.5'>
-        <LineGlyph className='text-accent'>※</LineGlyph>
+        <LineGlyph className='text-fg-3'>※</LineGlyph>
         <span className='min-w-0 flex-1 text-label leading-5 text-fg-3'>
           <span className='text-fg-2'>recap:</span> {text}
         </span>
@@ -260,9 +260,8 @@ function SentAttachments({
   attachments: MessageAttachment[]
   attachmentUrl?: (attachmentId: string) => string
 }) {
-  const lines = useLines()
   return (
-    <div className={cn('mb-1 flex flex-wrap gap-1.5', lines ? 'justify-start' : 'justify-end')}>
+    <div className='mb-1 flex flex-wrap justify-start gap-1.5'>
       {attachments.map((attachment) => {
         const href = attachmentUrl?.(attachment.id)
         return attachment.mediaType.startsWith('image/') && href ? (

package/src/components/agent/line-prompt.tsx

@@ -128,7 +128,7 @@ export function LineOptionList({
                 'flex w-full items-baseline gap-2 text-left outline-none',
                 isFocused ? 'bg-surface-hover' : 'hover:bg-surface-hover/60',
               )}>
-              <LineGlyph className={isFocused ? 'text-accent' : undefined}>
+              <LineGlyph className={isFocused ? 'text-fg-1' : undefined}>
                 {isFocused ? '❯' : ' '}
               </LineGlyph>
               <span className='shrink-0 font-mono text-label leading-5 text-fg-4'>{index + 1}</span>
@@ -184,7 +184,7 @@ export function LineInput({
 }) {
   return (
     <div className='flex items-baseline gap-2'>
-      <LineGlyph className='text-accent'>›</LineGlyph>
+      <LineGlyph className='text-fg-3'>›</LineGlyph>
       <input
         autoFocus
         value={value}

package/src/components/ui/Menu.tsx

@@ -14,7 +14,7 @@ export const MenuContent: FunctionComponent<
       align={align}
       side={side}
       sideOffset={sideOffset}
-      className='isolate z-60 outline-none'>
+      className='isolate z-80 outline-none'>
       <MenuPrimitive.Popup
         data-slot='menu-content'
         className={cn(

package/src/components/ui/Select.tsx

@@ -45,7 +45,7 @@ export const SelectContent: FunctionComponent<
       alignItemWithTrigger={alignItemWithTrigger}
       side={side}
       sideOffset={sideOffset}
-      className='isolate z-60 outline-none'>
+      className='isolate z-80 outline-none'>
       <SelectPrimitive.Popup
         data-slot='select-content'
         className={cn(

package/src/components/ui/Tooltip.tsx

@@ -8,7 +8,7 @@ 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-60'>
+    <TooltipPrimitive.Positioner side={side} sideOffset={sideOffset} className='isolate z-90'>
       <TooltipPrimitive.Popup
         data-slot='tooltip-content'
         className={cn(

package/src/index.ts

@@ -136,7 +136,15 @@ export {
   type SessionListItemProps,
   type SessionListProps,
 } from './components/agent/SessionList.tsx'
-export { SessionBrowser, type SessionBrowserProps } from './components/agent/SessionBrowser.tsx'
+export {
+  SessionBrowser,
+  rowShapeClass,
+  type SessionBrowserProps,
+} from './components/agent/SessionBrowser.tsx'
+export { SessionStatusIcon } from './components/agent/SessionBrowser.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 { EngineIcon } from './components/agent/EngineIcon.tsx'
 export {
   SessionEmptyState,
   type SessionEmptyStateProps,

package/src/styles/theme.css

@@ -24,6 +24,15 @@
   --bg-code: #f5f5f5;
   --bg-elevated: #ffffffcc;
 
+  /* A list row's hover and selected fills. **Alpha, not a flat colour**, because
+     a row sits on whatever its host paints — `bg-sidebar` in the dashboard,
+     `--vscode-sideBar-background` in the extension — and a flat value tuned for
+     one of those is invisible on the others. `--bg-surface-hover` was exactly
+     that mistake: on the dark sidebar (#131313) it lands on #141414, one step
+     of 255 away, so the hover state did not exist. */
+  --row-hover: rgb(0 0 0 / 0.05);
+  --row-active: rgb(0 0 0 / 0.08);
+
   /* ---------- Borders ---------- */
   --border: #ebebeb;
   --border-light: #e0e0e0;
@@ -36,12 +45,19 @@
   --fg-4: #a1a1a1;
   --fg-disabled: #c9c9c9;
 
-  /* ---------- Accent = the inverse of the canvas ---------- */
-  --accent: #171717;
-  --accent-hover: #000000;
-  --accent-dim: #737373;
-  --accent-bg: #f2f2f2;
-  --accent-ring: #17171733;
+  /* ---------- Accent ----------
+   * VS Code blue (`#0078d4`) — the product's primary. It is the *same* hue in
+   * both themes rather than the inverse of the canvas: a primary that flips
+   * from near-black to near-white is a contrast device, not a brand colour, and
+   * WorkerDeck now shares an editor's visual language.
+   *
+   * Not to be confused with the brand's live green (`docs/assets/BRAND.md`),
+   * which stays what it is — a *signal*, not a primary. */
+  --accent: #0078d4;
+  --accent-hover: #106ebe;
+  --accent-dim: #6ca9d8;
+  --accent-bg: #eff6fc;
+  --accent-ring: #0078d433;
 
   /* ---------- Semantic ---------- */
   --success: #0f7b4f;
@@ -72,7 +88,9 @@
   --accent-tint: var(--accent-bg);
   --accent-fg: #ffffff;
   --warn: var(--warning);
-  --ring: var(--fg-1);
+  /* Focus ring is the accent, as in an editor — the comment below already said
+   * "accent-derived"; before the blue it was indistinguishable from fg-1. */
+  --ring: var(--accent);
 }
 
 [data-theme='dark'] {
@@ -83,6 +101,9 @@
   --bg-code: #141414;
   --bg-elevated: #0a0a0acc;
 
+  --row-hover: rgb(255 255 255 / 0.06);
+  --row-active: rgb(255 255 255 / 0.10);
+
   /* ---------- Borders ---------- */
   --border: #1f1f1f;
   --border-light: #292929;
@@ -95,12 +116,16 @@
   --fg-4: #6e6e6e;
   --fg-disabled: #454545;
 
-  /* ---------- Accent = the inverse of the canvas ---------- */
-  --accent: #ededed;
-  --accent-hover: #ffffff;
-  --accent-dim: #8f8f8f;
-  --accent-bg: #1f1f1f;
-  --accent-ring: #ffffff3d;
+  /* ---------- Accent ----------
+   * The same blue as light. `--accent` stays `#0078d4` because it is a *fill*
+   * carrying white text (4.6:1) — the brighter `#3794ff` would drop that to
+   * 2.9:1. The bright one is the hover and the ring, where nothing sits on top
+   * of it and the extra lift is what a dark canvas needs. */
+  --accent: #0078d4;
+  --accent-hover: #3794ff;
+  --accent-dim: #4a7ba0;
+  --accent-bg: #12283c;
+  --accent-ring: #3794ff4d;
 
   /* ---------- Semantic ---------- */
   --success: #3ecf8e;
@@ -131,9 +156,12 @@
   --text: var(--fg-1);
   --text-muted: var(--fg-3);
   --accent-tint: var(--accent-bg);
-  --accent-fg: #0a0a0a;
+  /* White on the blue fill in both themes — the accent no longer inverts. */
+  --accent-fg: #ffffff;
   --warn: var(--warning);
-  --ring: var(--fg-1);
+  /* Focus ring is the accent, as in an editor — the comment below already said
+   * "accent-derived"; before the blue it was indistinguishable from fg-1. */
+  --ring: var(--accent);
 }
 
 /* Theme-independent tokens — type tracking, easing, fonts.
@@ -188,6 +216,8 @@
   --color-ring: var(--ring);
 
   --color-surface-hover: var(--bg-surface-hover);
+  --color-row-hover: var(--row-hover);
+  --color-row-active: var(--row-active);
   /* Named code-bg (not code) so it can't shadow the --text-code font-size token:
      with a --color-code defined, `text-code` would resolve to the color namespace
      and paint text in the code *background* color — invisible in both themes. */