@talgent/workbench-ui 0.0.0 → 0.2.0

package/components/chat/message-input.tsx

@@ -0,0 +1,105 @@
+import { Alert, Button } from "@heroui/react";
+import { useCallback, useId, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
+import { ArrowUp, Square } from "lucide-react";
+import { PromptBar } from "../composer/prompt-bar";
+import { PromptAddMenu } from "../composer/prompt-bar-controls";
+import { SkillHighlight } from "../composer/skill-completion";
+import { useSlashCompletion, type SlashCandidate } from "../composer/use-slash-completion";
+
+export interface MessageInputProps {
+  workId?: string;
+  /** Set while a Turn runs: an empty draft's primary action cancels the Turn,
+   * and a written draft is sent into it as Steer. */
+  onCancelTurn?: () => Promise<unknown> | unknown;
+  context?: ReactNode;
+  disabled: boolean;
+  sendDisabled?: boolean;
+  mode?: "send" | "disabled";
+  onSend: (text: string) => Promise<unknown> | unknown;
+  onUploadAttachment?: (file: File) => Promise<unknown> | unknown;
+  workActionPending?: boolean;
+  workActionError?: string;
+  placeholder?: string;
+  /** Why the composer takes no input while `mode` is "disabled". */
+  unavailableText?: string;
+  sendLabel?: string;
+  inputLabel?: string;
+  modelControl?: ReactNode;
+  /** Commands and Skills the Harness reported; observed is false before its first report. */
+  slash?: { candidates: SlashCandidate[]; observed: boolean };
+  /** Regional notices shown above the composer, such as Plugin failures. */
+  notices?: ReactNode;
+}
+
+export function MessageInput({ onCancelTurn, context, disabled, sendDisabled = false, mode = "send", onSend, onUploadAttachment, workActionPending = false, workActionError = "", placeholder = "Work on anything", unavailableText = "Work is not ready for input…", sendLabel = "Send", inputLabel = "Instruction", modelControl, slash, notices }: MessageInputProps) {
+  const [text, setText] = useState("");
+  const [sending, setSending] = useState(false);
+  const [cancelling, setCancelling] = useState(false);
+  const [sendError, setSendError] = useState("");
+  const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState("");
+  const sendInFlight = useRef(false);
+  const cancelInFlight = useRef(false);
+  const fileInput = useRef<HTMLInputElement>(null);
+  const textarea = useRef<HTMLTextAreaElement>(null);
+  const uploadDisabled = disabled || sending || !onUploadAttachment || uploading;
+  const listId = useId();
+  const completion = useSlashCompletion(text, setText, slash?.candidates ?? [], `${listId}-commands`);
+  // One primary action: with nothing written during a Turn it cancels the Turn.
+  const cancelShown = Boolean(onCancelTurn) && !text.trim();
+  const primaryDisabled = cancelShown ? disabled || cancelling || workActionPending : disabled || sendDisabled || sending || workActionPending || mode === "disabled" || !text.trim();
+  const send = async () => {
+    if (primaryDisabled || cancelShown || sendInFlight.current) return;
+    const instruction = text.trim();
+    if (!instruction) return;
+    // The Harness is authoritative: a command it didn't report can't run, so the
+    // message is kept for editing instead of being sent.
+    const command = slash?.observed ? /^\/([\w:.-]+)(?=\s|$)/.exec(instruction)?.[1] : undefined;
+    if (command && !slash!.candidates.some(item => item.name === command)) {
+      setSendError(`/${command} isn’t a command or Skill in this Work, so it wasn’t sent. Your message is kept so you can change it.`);
+      textarea.current?.focus();
+      return;
+    }
+    sendInFlight.current = true; setSending(true); setSendError("");
+    try { await onSend(instruction); setText(""); }
+    catch (error) { setSendError(error instanceof Error ? error.message : "Message could not be sent. Try again."); }
+    finally { sendInFlight.current = false; setSending(false); }
+  };
+  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (slash && completion.onKeyDown(event)) return;
+    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing && event.keyCode !== 229) { event.preventDefault(); void send(); }
+  };
+  const attach = useCallback(() => {
+    if (!disabled && !sending && onUploadAttachment && !uploading) fileInput.current?.click();
+  }, [disabled, sending, onUploadAttachment, uploading]);
+  // "Commands & Skills" starts a "/" token at the end of the draft, which opens the slash menu.
+  const openCommands = () => { setText(current => !current || /\s$/.test(current) ? `${current}/` : `${current} /`); setTimeout(() => textarea.current?.focus()); };
+  const commandsAvailable = Boolean(slash) && !disabled && !sending && mode !== "disabled";
+  const leading = <div className="composer-tool-row">
+    <PromptAddMenu disabled={uploadDisabled && !commandsAvailable} attachDisabled={uploadDisabled} onAttach={attach} onCommands={commandsAvailable ? openCommands : undefined} />
+    <input ref={fileInput} type="file" className="sr-only" aria-label="Upload attachment file" disabled={uploadDisabled} onChange={async event => {
+      const file = event.target.files?.[0]; event.target.value = "";
+      if (!file || uploadDisabled || !onUploadAttachment) return;
+      setUploading(true); setUploadError("");
+      try { await onUploadAttachment(file); }
+      catch (error) { setUploadError(error instanceof Error ? error.message : "Attachment upload failed."); }
+      finally { setUploading(false); }
+    }} />
+  </div>;
+  return <div className="wpb-conversation">
+    {notices}
+    {[...new Set([sendError, uploadError, workActionError].filter(Boolean))].map(error => <Alert key={error} status="danger" role="alert" className="mb-2"><Alert.Indicator /><Alert.Content><Alert.Description>{error}</Alert.Description></Alert.Content></Alert>)}
+    {slash && completion.menu && <div className="sk-menu-float mb-2">{completion.menu}</div>}
+    <PromptBar inline context={<>{slash && <SkillHighlight text={text} candidates={slash.candidates} />}{context}</>} input={{ ref: textarea, value: text, ...(slash ? completion.inputProps : {}), onChange: event => { setText(event.target.value); if (sendError) setSendError(""); }, onKeyDown, disabled: disabled || sending || mode === "disabled", placeholder: mode === "disabled" ? unavailableText : placeholder, "aria-label": inputLabel }} leading={leading}>
+      {modelControl}
+      <Button size="sm" isIconOnly className="wpb-send" isDisabled={primaryDisabled} aria-label={cancelShown ? "Cancel turn" : mode === "disabled" ? "Work unavailable" : sendLabel} onPress={async () => {
+        if (!cancelShown || !onCancelTurn) { void send(); return; }
+        if (cancelInFlight.current || primaryDisabled) return;
+        cancelInFlight.current = true; setCancelling(true); setSendError("");
+        try { await onCancelTurn(); }
+        catch (error) { setSendError(error instanceof Error ? error.message : "Could not cancel this turn."); }
+        finally { cancelInFlight.current = false; setCancelling(false); }
+      }}>{cancelShown ? <Square size={14} fill="currentColor" /> : <ArrowUp size={19} />}</Button>
+    </PromptBar>
+  </div>;
+}

package/components/composer/permission-mode-list.tsx

@@ -0,0 +1,15 @@
+import { Label, ListBox } from "@heroui/react";
+import type { PermissionMode } from "@talgent/workbench-contracts/agent/public/v1/harness_pb";
+import { permissionModes } from "../../lib/permission-modes";
+
+/** The permission modes as one single choice, each with what it does. Both
+ * composers use it: Start Work on a Managed Computer and a running Managed Work. */
+export function PermissionModeList({ value, disabled, onChange }: { value: PermissionMode; disabled?: boolean; onChange: (mode: PermissionMode) => void }) {
+  return <ListBox aria-label="Permission mode" selectionMode="single" disallowEmptySelection selectedKeys={[String(value)]}
+    disabledKeys={disabled ? permissionModes.map(option => String(option.mode)) : []}
+    onSelectionChange={keys => { if (keys === "all" || !keys.size) return; const next = Number([...keys][0]) as PermissionMode; if (next !== value) onChange(next); }}>
+    {permissionModes.map(option => <ListBox.Item key={option.mode} id={String(option.mode)} textValue={option.name} className="wpb-choice">
+      <span className="wpb-choice-copy wpb-choice-stack"><Label>{option.name}</Label><span className="wpb-muted">{option.description}</span></span><ListBox.ItemIndicator />
+    </ListBox.Item>)}
+  </ListBox>;
+}

package/components/composer/prompt-bar-controls.tsx

@@ -0,0 +1,77 @@
+import { useState, type ReactNode } from "react";
+import { Button, Dropdown, Kbd, Label, ListBox, Popover, SearchField, ToggleButton, ToggleButtonGroup } from "@heroui/react";
+import { Brain, BrainCircuit, ChevronDown, Gauge, Paperclip, Plus, SquareSlash, Zap } from "lucide-react";
+import type { ModelVendor } from "@talgent/workbench-contracts/agent/public/v1/model_pb";
+import { modelVendors } from "../../lib/model-vendors";
+import { thinkingLevelName as levelName } from "../../lib/thinking-levels";
+import { startModelKey, type StartModel } from "../../lib/work-model";
+
+const levelIcon = (level: string) => level === "low" ? Zap : level === "medium" ? Gauge : level === "high" ? Brain : BrainCircuit;
+
+// A model list searches only once it is longer than a glance.
+const searchableModels = 6;
+
+export function ModelVendorIcon({ vendor }: { vendor: ModelVendor }) {
+  const icon = modelVendors[vendor]?.icon;
+  return icon ? <img className="wpb-product-icon" src={`/assets/product-icons/${icon}.svg`} alt="" /> : <Brain size={16} aria-hidden="true" />;
+}
+
+/** The composer's model trigger: the model's name and the thinking effort, or a status in its place. */
+export function ModelTrigger({ name, effort, tentative = false, disabled }: { name: string; effort: string; tentative?: boolean; disabled?: boolean }) {
+  return <Button size="sm" variant="ghost" aria-label="Model and thinking effort" className="wpb-model-trigger" isDisabled={disabled}>
+    <span className="wpb-model-name">{name}</span><span className="wpb-trigger-effort" data-tentative={tentative || undefined}>{effort}</span><ChevronDown size={13} />
+  </Button>;
+}
+
+/** One segmented choice of the model's thinking levels. */
+export function ThinkingEffort({ levels, value, disabled, onChange }: { levels: string[]; value: string; disabled?: boolean; onChange: (level: string) => void }) {
+  return <div className="wpb-effort">
+    <p id="wpb-effort-label">Thinking effort</p>
+    <ToggleButtonGroup aria-labelledby="wpb-effort-label" selectionMode="single" disallowEmptySelection fullWidth size="sm" isDisabled={disabled}
+      selectedKeys={value ? new Set([value]) : new Set()} onSelectionChange={keys => { const next = [...keys][0]; if (next !== undefined && String(next) !== value) onChange(String(next)); }}>
+      {levels.map((level, index) => { const Icon = levelIcon(level); return <ToggleButton key={level} id={level}>{index > 0 && <ToggleButtonGroup.Separator />}<Icon size={14} aria-hidden="true" />{levelName(level)}</ToggleButton>; })}
+    </ToggleButtonGroup>
+  </div>;
+}
+
+// Start Work chooses a model and its thinking effort; a running Work's model
+// is fixed and uses its own card.
+export function PromptModelControl({ models, model, thinking, disabled, loading, open, onOpenChange, onChange }: {
+  models: StartModel[]; model?: StartModel; thinking: string; disabled?: boolean; loading?: boolean;
+  open: boolean; onOpenChange: (open: boolean) => void; onChange: (model: StartModel, thinking: string) => void;
+}) {
+  const [query, setQuery] = useState("");
+  const shown = models.filter(item => `${item.name} ${modelVendors[item.vendor]?.label ?? ""}`.toLowerCase().includes(query.trim().toLowerCase()));
+  return <Popover isOpen={open} onOpenChange={value => { onOpenChange(value); if (value) setQuery(""); }}>
+    <ModelTrigger name={model?.name ?? (loading ? "" : "Select model")} effort={model ? levelName(thinking) : ""} disabled={disabled} />
+    <Popover.Content placement="bottom end" className="wpb-popover wpb-popover-narrow"><Popover.Dialog aria-label="Model settings">
+      {models.length > searchableModels && <SearchField className="wpb-search" aria-label="Search models" value={query} onChange={setQuery} onKeyDown={event => { if (event.key === "Enter") event.preventDefault(); }}>
+        <SearchField.Group><SearchField.SearchIcon /><SearchField.Input autoFocus placeholder="Search models" /><SearchField.ClearButton aria-label="Clear search" /></SearchField.Group>
+      </SearchField>}
+      <ListBox aria-label="Models" selectionMode="single" disallowEmptySelection selectedKeys={model ? [startModelKey(model)] : []} renderEmptyState={() => <p className="wpb-empty" role="status">No matches</p>}
+        onSelectionChange={keys => { if (keys === "all") return; const next = models.find(item => keys.has(startModelKey(item))); if (next) onChange(next, next.thinkingLevels.includes(thinking) ? thinking : next.defaultThinkingLevel); }}>
+        {shown.map(item => <ListBox.Item id={startModelKey(item)} key={startModelKey(item)} textValue={item.name} className="wpb-choice"><ModelVendorIcon vendor={item.vendor} /><span className="wpb-choice-copy"><Label>{item.name}</Label><span className="wpb-muted">{modelVendors[item.vendor]?.label}</span></span><ListBox.ItemIndicator /></ListBox.Item>)}
+      </ListBox>
+      {model && model.thinkingLevels.length > 0 && <ThinkingEffort levels={model.thinkingLevels} value={thinking} onChange={level => onChange(model, level)} />}
+    </Popover.Dialog></Popover.Content>
+  </Popover>;
+}
+
+/** The composer's "+": attach files where the Work takes them, or open the
+ * slash menu of commands and Skills. */
+export function PromptAddMenu({ disabled, attachDisabled, onAttach, onCommands }: { disabled?: boolean; attachDisabled?: boolean; onAttach?: () => void; onCommands?: () => void }) {
+  return <Dropdown>
+    <Button size="sm" variant="ghost" className="wpb-add" isIconOnly isDisabled={disabled} aria-label="Add context and options"><Plus size={22} strokeWidth={1.75} /></Button>
+    <Dropdown.Popover placement="top start" className="wpb-popover wpb-popover-narrow">
+      <Dropdown.Menu aria-label="Add to message" onAction={key => key === "attach" ? onAttach?.() : onCommands?.()} disabledKeys={[...(attachDisabled ? ["attach"] : []), ...(onCommands ? [] : ["commands"])]}>
+        {onAttach && <Dropdown.Item id="attach" textValue="Attach files"><Paperclip size={16} aria-hidden="true" /><Label>Attach files</Label></Dropdown.Item>}
+        <Dropdown.Item id="commands" textValue="Commands and Skills"><SquareSlash size={16} aria-hidden="true" /><Label>Commands & Skills</Label><Kbd className="wpb-kbd">/</Kbd></Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown.Popover>
+  </Dropdown>;
+}
+
+/** A popover's closing note, such as the scope of the changes made in it. */
+export function PopoverFootnote({ children }: { children: ReactNode }) {
+  return <p className="wpb-footnote">{children}</p>;
+}

package/components/composer/prompt-bar.tsx

@@ -0,0 +1,45 @@
+import { Card, TextArea } from "@heroui/react";
+import { useImperativeHandle, useLayoutEffect, useRef, type ComponentProps, type ReactNode } from "react";
+import "./work-start.css";
+
+interface PromptBarProps {
+  input: ComponentProps<typeof TextArea>;
+  leading: ReactNode;
+  children: ReactNode;
+  context?: ReactNode;
+  inline?: boolean;
+}
+
+export function PromptBar({ input, leading, children, context, inline = false }: PromptBarProps) {
+  const textarea = useRef<HTMLTextAreaElement>(null);
+  useImperativeHandle(input.ref, () => textarea.current!);
+  useLayoutEffect(() => {
+    if (!inline || !textarea.current) return;
+    const field = textarea.current;
+    const bar = field.closest<HTMLElement>(".wpb-bar")!;
+    const resize = () => {
+      bar.dataset.expanded = "false";
+      field.style.overflowY = "hidden";
+      field.style.height = "auto";
+      const lineHeight = Number.parseFloat(getComputedStyle(field).lineHeight);
+      bar.dataset.expanded = String(Boolean(field.value) && field.scrollHeight > Math.ceil(lineHeight));
+      // scrollHeight rounds fractional line heights; leave room for the last line.
+      const height = field.value ? field.scrollHeight + 1 : Math.ceil(lineHeight);
+      field.style.height = `${Math.min(height, 220)}px`;
+      field.style.overflowY = height > 220 ? "auto" : "hidden";
+    };
+    resize();
+    let width = bar.clientWidth;
+    const observer = new ResizeObserver(() => {
+      if (bar.clientWidth !== width) { width = bar.clientWidth; resize(); }
+    });
+    observer.observe(bar);
+    return () => observer.disconnect();
+  }, [inline, input.value]);
+
+  return <Card className={`wpb-bar${inline ? " wpb-bar-compact" : ""}`}>
+    <TextArea {...input} ref={textarea} className="wpb-input resize-none" rows={inline ? 1 : 3} />
+    {context}
+    <div className="wpb-toolbar">{leading}{children}</div>
+  </Card>;
+}

package/components/composer/skill-completion.css

@@ -0,0 +1,27 @@
+/* Slash completion and in-text Skill highlight, shared by Start Work and
+   the running composer. */
+:root { --sk-skill-hue: oklch(55% 0.075 210); }
+.sk-muted { color: var(--muted); }
+.sk-slash { display: grid; gap: 1px; max-height: min(360px, 45dvh); overflow: hidden auto; }
+.sk-slash-row { display: grid; grid-template-columns: 16px minmax(0, max-content) minmax(0, 1fr) 14px; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; font-size: 13px; cursor: pointer; }
+.sk-slash-row[aria-selected="true"] { background: color-mix(in oklch, var(--foreground) 6%, transparent); }
+.sk-slash-name { overflow: hidden; text-overflow: ellipsis; font-weight: 500; white-space: nowrap; }
+.sk-slash-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
+.sk-slash-heading { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; padding: 8px 10px 4px; font-size: 11px; font-weight: 500; color: var(--muted); background: var(--surface); }
+.sk-slash-heading span { font-variant-numeric: tabular-nums; font-weight: 400; }
+.sk-slash-empty { padding: 8px 10px; font-size: 13px; color: var(--muted); }
+/* One floating surface in both composers: above a running Work's composer, under Start Work's. */
+.sk-menu-float { display: grid; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--separator); box-shadow: 0 10px 30px -12px oklch(0 0 0 / 0.15); }
+.sk-menu-under { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; }
+
+/* The textarea draws only the caret; the mirror draws the text. */
+textarea[data-skill-highlight="true"] { position: relative; z-index: 1; color: transparent !important; caret-color: var(--foreground); background: transparent; }
+textarea[data-skill-highlight="true"]::placeholder { color: var(--field-placeholder, var(--muted)); }
+textarea[data-skill-highlight="true"]::selection { color: transparent; background: color-mix(in oklch, var(--accent) 22%, transparent); }
+.sk-mirror { position: absolute; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; color: var(--foreground); pointer-events: none; box-sizing: border-box; }
+.sk-mark { color: color-mix(in oklch, var(--sk-skill-hue) 85%, var(--foreground)); background: color-mix(in oklch, var(--sk-skill-hue) 14%, transparent); border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
+.sk-ghost { color: var(--muted); opacity: 0.7; }
+@media (max-width: 740px) {
+  .sk-slash-row { grid-template-columns: 16px minmax(0, 1fr) 14px; }
+  .sk-slash-desc { display: none; }
+}

package/components/composer/skill-completion.tsx

@@ -0,0 +1,49 @@
+import { useLayoutEffect, useRef } from "react";
+import type { SlashCandidate } from "./use-slash-completion";
+import "./skill-completion.css";
+
+const escape = (text: string) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+// Renders the text behind a transparent-text textarea so a selected Skill reads
+// as a highlighted token in the sentence, with its argument hint as ghost text
+// right after a freshly inserted Skill. The textarea stays the only input; the
+// mirror copies its box and typography so the two stay aligned in every layout.
+const mirrored = ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textIndent"] as const;
+export function SkillHighlight({ text, candidates }: { text: string; candidates: SlashCandidate[] }) {
+  const mirror = useRef<HTMLDivElement>(null);
+  const names = candidates.filter(item => !item.builtIn).map(item => item.name);
+  const active = names.length > 0;
+  useLayoutEffect(() => {
+    // The textarea is the mirror's sibling inside the same prompt bar.
+    const layer = mirror.current, field = layer?.parentElement?.querySelector("textarea");
+    if (!active || !field || !layer) return;
+    field.dataset.skillHighlight = "true";
+    const sync = () => {
+      const style = getComputedStyle(field);
+      for (const property of mirrored) layer.style[property] = style[property];
+      Object.assign(layer.style, { top: `${field.offsetTop}px`, left: `${field.offsetLeft}px`, width: `${field.clientWidth}px`, height: `${field.clientHeight}px` });
+      layer.scrollTop = field.scrollTop;
+    };
+    sync();
+    field.addEventListener("scroll", sync);
+    const observer = new ResizeObserver(sync);
+    observer.observe(field);
+    return () => { field.removeEventListener("scroll", sync); observer.disconnect(); delete field.dataset.skillHighlight; };
+  }, [active, text]);
+  if (!active) return null;
+  const pattern = new RegExp(`(^|\\s)(/(?:${names.map(escape).join("|")}))(?=\\s|$)`, "g");
+  const parts: Array<{ text: string; skill: boolean }> = [];
+  let last = 0;
+  for (const match of text.matchAll(pattern)) {
+    const start = match.index + match[1].length;
+    parts.push({ text: text.slice(last, start), skill: false }, { text: match[2], skill: true });
+    last = start + match[2].length;
+  }
+  parts.push({ text: text.slice(last), skill: false });
+  const fresh = /\/([\w:.-]+) $/.exec(text)?.[1];
+  const hint = fresh ? candidates.find(item => item.name === fresh && !item.builtIn)?.argumentHint : "";
+  return <div ref={mirror} className="sk-mirror" aria-hidden="true">
+    {parts.map((part, index) => part.skill ? <mark key={index} className="sk-mark">{part.text}</mark> : <span key={index}>{part.text}</span>)}
+    {hint && <span className="sk-ghost">{hint}</span>}{"​"}
+  </div>;
+}

package/components/composer/use-slash-completion.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useRef, useState, type KeyboardEvent } from "react";
+import { CornerDownLeft, Sparkles } from "lucide-react";
+import "./skill-completion.css";
+
+// A command or Skill offered after "/". Start Work offers the Skills declared by
+// the selected Plugins, grouped by Plugin; a running Work offers what its
+// Harness reported, which carries no reliable category.
+export interface SlashCandidate { name: string; description: string; argumentHint: string; group?: string; builtIn?: boolean }
+
+const tokenOf = (value: string) => /(?:^|\s)\/([\w:.-]*)$/.exec(value)?.[1];
+const recentLimit = 3;
+
+/**
+ * Completes the "/" token at the end of the draft. Every match is listed and
+ * scrolls; the composer's recently used entries come first while nothing is
+ * typed after the slash. `grouped` sections the rest by `group`.
+ */
+export function useSlashCompletion(value: string, setValue: (value: string) => void, candidates: SlashCandidate[], listId: string, grouped = false) {
+  const [active, setActive] = useState(0);
+  const [dismissed, setDismissed] = useState("");
+  const [recent, setRecent] = useState<string[]>([]);
+  const list = useRef<HTMLDivElement>(null);
+  const token = tokenOf(value);
+  const open = token !== undefined && dismissed !== value;
+  const query = token?.toLowerCase() ?? "";
+  const filtered = open ? candidates.filter(item => `${item.name} ${item.description}`.toLowerCase().includes(query)) : [];
+  const recentItems = query ? [] : recent.map(name => filtered.find(item => item.name === name)).filter((item): item is SlashCandidate => Boolean(item));
+  const rest = filtered.filter(item => !recentItems.includes(item));
+  const sections = [
+    ...(recentItems.length ? [{ title: "Recent", items: recentItems }] : []),
+    ...(grouped ? [...new Set(rest.map(item => item.group ?? ""))].map(title => ({ title, items: rest.filter(item => (item.group ?? "") === title) }))
+      : [{ title: recentItems.length ? "All" : "", items: rest }]),
+  ].filter(section => section.items.length);
+  const matches = sections.flatMap(section => section.items);
+  const current = Math.min(active, Math.max(matches.length - 1, 0));
+  // Keeps the active option in view; environments without layout (jsdom) lack scrollIntoView.
+  useEffect(() => { if (open) list.current?.querySelector(`[data-index="${current}"]`)?.scrollIntoView?.({ block: "nearest" }); }, [open, current]);
+  const pick = (item: SlashCandidate) => {
+    setValue(value.replace(/\/[\w:.-]*$/, `/${item.name} `)); setActive(0);
+    setRecent(names => [item.name, ...names.filter(name => name !== item.name)].slice(0, recentLimit));
+  };
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (!open || !matches.length) return false;
+    if (event.key === "ArrowDown") { event.preventDefault(); setActive((current + 1) % matches.length); return true; }
+    if (event.key === "ArrowUp") { event.preventDefault(); setActive((current - 1 + matches.length) % matches.length); return true; }
+    if (event.key === "Enter" || event.key === "Tab") { event.preventDefault(); pick(matches[current]); return true; }
+    if (event.key === "Escape") { event.preventDefault(); setDismissed(value); return true; }
+    return false;
+  };
+  let index = 0;
+  const row = (item: SlashCandidate) => {
+    const position = index++;
+    return <div key={item.name} id={`${listId}-${position}`} data-index={position} role="option" aria-selected={position === current} className="sk-slash-row"
+      onMouseDown={event => { event.preventDefault(); pick(item); }} onMouseEnter={() => setActive(position)}>
+      <Sparkles size={15} className="sk-muted" aria-hidden="true" />
+      <span className="sk-slash-name">/{item.name}{item.argumentHint && <span className="sk-muted"> {item.argumentHint}</span>}</span>
+      <span className="sk-muted sk-slash-desc">{item.description}</span>
+      {position === current && <CornerDownLeft size={13} className="sk-muted" aria-hidden="true" />}
+    </div>;
+  };
+  const menu = open ? <div ref={list} className="sk-slash" role="listbox" id={listId} aria-label="Commands and Skills">
+    {matches.length ? sections.map(section => section.title
+      ? <div key={section.title} role="group" aria-label={section.title}><div className="sk-slash-heading" aria-hidden="true">{section.title}<span>{section.items.length}</span></div>{section.items.map(row)}</div>
+      : section.items.map(row)) : <p className="sk-slash-empty">No command or Skill matches “/{token}”.</p>}
+  </div> : null;
+  // Wired to the textarea so assistive technology follows the active option.
+  const inputProps = open && matches.length ? { "aria-controls": listId, "aria-activedescendant": `${listId}-${current}`, "aria-autocomplete": "list" as const } : {};
+  return { menu, onKeyDown, inputProps };
+}

package/components/composer/work-start.css

@@ -0,0 +1,133 @@
+/* Prompt Bar proportions follow the supplied reference; controls use shared theme tokens. */
+:root { --wpb-panel-width: 812px; --wpb-panel-gutter: 24px; }
+.wpb-stage, .wpb-modal { width: min(calc(var(--wpb-panel-width) + 2 * var(--wpb-panel-gutter)), 100%); padding-inline: var(--wpb-panel-gutter); }
+.wpb-stage { margin: clamp(64px, 15vh, 144px) auto 40px; }
+.wpb-stage h2 { font-size: 26px; font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; text-align: center; margin: 0 0 34px; }
+.wpb-heading { display: flex; flex-direction: column; align-items: center; gap: 6px; overflow-wrap: anywhere; }
+.wpb-heading-key { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
+.wpb-form { min-width: 0; width: 100%; }
+.wpb-bar { position: relative; z-index: 1; gap: 0; padding: 0; border-radius: 28px; border: 1px solid color-mix(in oklch, var(--border), var(--surface) 35%); box-shadow: 0 2px 4px oklch(0 0 0 / 0.025), 0 10px 36px -12px oklch(0 0 0 / 0.09); }
+.wpb-input { display: block; width: 100%; min-height: 102px; max-height: 220px; padding: 20px 22px 14px; border: 0; border-radius: inherit; background: transparent; color: var(--foreground); font: inherit; font-size: 16px; line-height: 1.65; resize: none; }
+.wpb-input:focus { outline: none; box-shadow: none; }
+.wpb-input { box-shadow: none; }
+.wpb-bar:focus-within { border-color: var(--border); }
+.wpb-toolbar { display: flex; align-items: center; gap: 8px; padding: 2px 12px 12px 14px; }
+.wpb-add { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; }
+.wpb-add svg { width: 22px; height: 22px; }
+.wpb-model-trigger { margin-left: auto; max-width: calc(100% - 88px); gap: 7px; font-size: 14px; font-weight: 400; }
+.wpb-trigger-effort { color: var(--muted); font-size: 14px; }
+.wpb-trigger-effort[data-tentative] { opacity: 0.55; }
+.wpb-send { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; }
+.wpb-context { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 20px 12px; }
+.wpb-context > button { max-width: 100%; }
+.wpb-filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wpb-search { flex: 1; min-width: 0; }
+.wpb-search .search-field__input { min-width: 0; }
+.wpb-search .search-field__group { border: 0; box-shadow: none; background: transparent; }
+.wpb-empty { padding: 16px 10px; color: var(--muted); font-size: 13px; }
+.wpb-modal { max-width: min(calc(var(--wpb-panel-width) + 2 * var(--wpb-panel-gutter)), var(--wpb-available-width, 100%)); flex: none; padding-block: 48px; }
+.wpb-dialog { max-width: none; padding: 0; background: transparent; box-shadow: none; overflow: visible; }
+.wpb-close { top: -38px; right: 0; border-radius: 50%; background: var(--surface); }
+.wpb-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: -20px 20px 0; padding: 24px 10px 6px; border-radius: 0 0 20px 20px; background: color-mix(in oklch, var(--foreground) 7%, var(--surface)); }
+.wpb-config-trigger { min-width: 0; max-width: 100%; gap: 8px; padding-inline: 10px; height: 34px; color: color-mix(in oklch, var(--foreground) 80%, var(--surface)); font-size: 13px; font-weight: 400; border-radius: 8px; }
+.wpb-config-trigger:hover, .wpb-config-trigger[aria-expanded="true"] { color: var(--foreground); background: color-mix(in oklch, var(--foreground) 6%, transparent); }
+.wpb-config-trigger > svg { flex-shrink: 0; stroke-width: 1.6px; }
+.wpb-config-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (max-width: 740px) {
+  .wpb-tray { margin-inline: 12px; padding-inline: 6px; gap: 2px; }
+  .wpb-config-trigger { padding-inline: 7px; gap: 6px; }
+  :root { --wpb-panel-gutter: 12px; }
+  .wpb-stage { margin-top: 48px; }
+  .wpb-stage h2 { font-size: 22px; margin-bottom: 24px; }
+  .wpb-input { padding: 18px; font-size: 16px; }
+  .wpb-toolbar { padding: 2px 10px 10px; gap: 4px; }
+  .wpb-model-trigger { gap: 5px; font-size: 13px; padding-inline: 6px; }
+  .wpb-trigger-effort { font-size: 12px; }
+}
+@media (max-width: 360px) {
+  .wpb-trigger-effort { display: none; }
+}
+
+/* Category accents stay on icons; labels and selection marks remain neutral. */
+.wpb-form, .wpb-popover {
+  --wpb-icon-environment: oklch(55% 0.07 245);
+  --wpb-icon-context: oklch(56% 0.075 60);
+  --wpb-icon-agent: oklch(56% 0.075 300);
+  --wpb-icon-capability: oklch(54% 0.055 175);
+}
+:is(.dark, [data-theme="dark"]) :is(.wpb-form, .wpb-popover) {
+  --wpb-icon-environment: oklch(75% 0.06 245);
+  --wpb-icon-context: oklch(77% 0.065 60);
+  --wpb-icon-agent: oklch(76% 0.065 300);
+  --wpb-icon-capability: oklch(74% 0.045 175);
+}
+:is(.wpb-form, .wpb-popover) :is(.lucide-cloud, .lucide-monitor, .lucide-server, .lucide-shield) { color: var(--wpb-icon-environment); }
+:is(.wpb-form, .wpb-popover) :is(.lucide-git-branch, .lucide-paperclip, .lucide-plug) { color: var(--wpb-icon-context); }
+:is(.wpb-form, .wpb-popover) :is(.lucide-bot, .lucide-zap, .lucide-brain, .lucide-brain-circuit) { color: var(--wpb-icon-agent); }
+:is(.wpb-form, .wpb-popover) :is(.lucide-puzzle, .lucide-sparkles, .lucide-store, .lucide-folder) { color: var(--wpb-icon-capability); }
+/* The slash menu reads the same in both composers, so its icons stay neutral here too. */
+:is(.wpb-form, .wpb-popover) .sk-slash svg { color: var(--muted); }
+
+.wpb-product-icon { flex: 0 0 16px; width: 16px; height: 16px; object-fit: contain; }
+:is(.dark, [data-theme="dark"]) .wpb-product-icon { filter: invert(1); }
+
+
+.wpb-model-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wpb-model-trigger > :not(.wpb-model-name) { flex-shrink: 0; }
+.wpb-feedback { margin: 12px 20px 0; font-size: 13px; color: var(--muted); }
+.wpb-feedback-error { color: var(--danger); }
+
+/* The same input and bottom toolbar expand upward as the conversation draft grows. */
+.wpb-conversation { flex-shrink: 0; width: min(var(--wpb-panel-width), 100%); margin-inline: auto; padding-block: 8px 16px; }
+.wpb-bar-compact > .wpb-input { min-height: 0; }
+.wpb-bar-compact[data-expanded="false"] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 10px 12px; }
+.wpb-bar-compact[data-expanded="false"] > .wpb-input { grid-column: 2; grid-row: 1; min-width: 0; padding: 0; border-radius: 0; }
+.wpb-bar-compact[data-expanded="false"] > .wpb-toolbar { display: contents; }
+.wpb-bar-compact[data-expanded="false"] .wpb-toolbar > :first-child { grid-column: 1; grid-row: 1; }
+.wpb-bar-compact[data-expanded="false"] .wpb-toolbar > .wpb-model-trigger { grid-column: 3; grid-row: 1; margin: 0; max-width: min(230px, 30vw); }
+.wpb-bar-compact[data-expanded="false"] .wpb-toolbar > .composer-primary-actions { grid-column: 4; grid-row: 1; }
+/* A Managed Work shows its permission mode beside the model, as one toolbar item. */
+.wpb-work-controls { display: flex; align-items: center; gap: 2px; min-width: 0; margin-left: auto; }
+.wpb-work-controls > .wpb-model-trigger { margin-left: 0; min-width: 0; }
+.wpb-bar-compact[data-expanded="false"] .wpb-toolbar > .wpb-work-controls { grid-column: 3; grid-row: 1; margin: 0; max-width: min(340px, 42vw); }
+.wpb-mode-trigger { flex-shrink: 0; gap: 6px; padding-inline: 8px; color: var(--muted); font-size: 14px; font-weight: 400; }
+.wpb-sandbox-note { display: inline-flex; align-items: center; gap: 6px; }
+@media (max-width: 740px) {
+  .wpb-mode-trigger { font-size: 13px; padding-inline: 6px; }
+  .wpb-mode-name { display: none; }
+}
+@media (max-width: 740px) {
+  .wpb-bar-compact[data-expanded="false"] { gap: 4px; padding-inline: 8px; }
+}
+
+
+/* The field inside the bar is borderless, so the keyboard focus ring belongs to the bar. */
+.wpb-bar:has(.wpb-input[data-focus-visible="true"]) { outline: 2px solid var(--focus); outline-offset: 2px; }
+
+/* Every Prompt Bar card — model, "+", tray — shares the slash menu's floating surface and one row anatomy. */
+.wpb-popover { max-width: calc(100vw - 24px); border-radius: 16px; border: 1px solid var(--separator); box-shadow: 0 10px 30px -12px oklch(0 0 0 / 0.15); }
+.wpb-popover [data-slot="popover-dialog"] { padding: 6px; max-height: min(520px, 70dvh); overflow-y: auto; }
+.wpb-popover-narrow { width: 264px; }
+.wpb-popover-tray { width: 340px; }
+.wpb-popover-wide { width: 560px; }
+.wpb-muted { color: var(--muted); }
+.wpb-search .search-field__group:focus-within { outline: none; background: var(--default); }
+.wpb-choice { display: flex; align-items: center; gap: 10px; min-height: 40px; }
+.wpb-choice > svg:first-child, .wpb-choice > img:first-child { flex: 0 0 16px; width: 16px; height: 16px; stroke-width: 1.6px; }
+.wpb-choice > .list-box-item__indicator { flex-shrink: 0; margin-left: auto; }
+.wpb-choice-copy { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; }
+.wpb-choice-copy .label, .wpb-model-head-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wpb-choice-copy .wpb-muted { flex-shrink: 0; font-size: 12px; }
+.wpb-choice-stack { display: grid; gap: 1px; padding-block: 4px; }
+.wpb-choice-stack .wpb-muted { line-height: 1.35; }
+.wpb-model-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }
+.wpb-model-head > img, .wpb-model-head > svg { flex: 0 0 16px; }
+.wpb-model-head-name { font-size: 14px; font-weight: 500; }
+.wpb-lock { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; color: var(--muted); }
+.wpb-lock:focus-visible { outline: 2px solid var(--focus); }
+.wpb-effort { padding: 10px 8px 6px; border-top: 1px solid var(--separator); margin-top: 4px; }
+.wpb-effort > p { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
+.wpb-effort .toggle-button { gap: 5px; }
+.wpb-popover-error { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 8px 4px; font-size: 12px; color: var(--danger); }
+.wpb-footnote { margin: 6px 0 0; padding: 8px 10px 2px; border-top: 1px solid var(--separator); font-size: 11px; color: var(--muted); }
+.wpb-kbd { margin-left: auto; }

package/components/feedback/toast-region.css

@@ -0,0 +1,2 @@
+/* The notification region sits below the shared topbar and above page content. */
+.app-toasts { top: calc(var(--topbar-height) + 8px) !important; z-index: 80 !important; }

package/components/feedback/toast-region.tsx

@@ -0,0 +1,15 @@
+import { Toast } from "@heroui/react";
+import { notificationQueue } from "../../lib/notifications";
+import "./toast-region.css";
+
+// Top-right, below the topbar, overlaying content so notices never shift layout.
+export function ToastRegion() {
+  return <Toast.Provider queue={notificationQueue} placement="top end" className="app-toasts" width={380}>{({ toast }) =>
+    <Toast toast={toast} variant={toast.content.kind}>
+      <Toast.Indicator />
+      <Toast.Content><Toast.Title>{toast.content.title}</Toast.Title>{toast.content.description && <Toast.Description>{toast.content.description}</Toast.Description>}</Toast.Content>
+      {toast.content.action && <Toast.ActionButton onPress={() => { toast.content.action!.onPress(); notificationQueue.close(toast.key); }}>{toast.content.action.label}</Toast.ActionButton>}
+      <Toast.CloseButton aria-label="Dismiss notification" />
+    </Toast>}
+  </Toast.Provider>;
+}

package/components/files/file-facts.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+
+/**
+ * A file's facts on hover or focus, one per line: the card the context rail's
+ * files and the workspace tree share.
+ */
+export function FileFacts({ name, sizeBytes, modifiedAt, children }: { name: string; sizeBytes?: number; modifiedAt?: Date | null; children?: ReactNode }) {
+  const extension = /\.([^.]+)$/.exec(name)?.[1];
+  return <>
+    <strong>{name}</strong>
+    {extension && <span>{extension.toUpperCase()}</span>}
+    {sizeBytes !== undefined && <span>{new Intl.NumberFormat("en").format(sizeBytes)} bytes</span>}
+    {modifiedAt && <span>{modifiedAt.toLocaleString("en", { dateStyle: "medium", timeStyle: "short" })}</span>}
+    {children}
+  </>;
+}