@kortix/ui 0.0.0-stage → 0.14.3

package/README.md

@@ -1,3 +1,156 @@
-# Temporary Holding Version
+# @kortix/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The shared React component library for `apps/web`, Kortix Apps, the
+white-label demo and SDK hosts. Components are Tailwind v4 class strings themed
+by CSS variables. Every `apps/web/src/components/ui/<name>` file lives here as
+`src/components/ui/<name>.tsx`; `apps/web` keeps a one-line re-export shim at
+each old path.
+
+Install: not on npm yet. Inside kortix-ai/suna: `"@kortix/ui": "workspace:*"`.
+After the first npm release: `npm i @kortix/ui`.
+`react` and `react-dom` 18 or later are peers.
+
+- Public docs: `apps/web/content/docs/sdk/ui.mdx` (https://kortix.com/docs/sdk/ui).
+- Agent skill: `skills/kortix-ui/SKILL.md`. Kortix sessions load the same file
+  from `packages/starter/templates/managed/skills/kortix-ui/SKILL.md`
+  (`kortix-ui` is in `KORTIX_MANAGED_SKILL_NAMES`, so the sandbox bake ships it).
+  `src/skill.test.ts` fails when the copies differ or when the skill's
+  Components table misses an export of `src/index.ts` or `src/chat/index.ts`.
+- Live catalog: the `/design-system` route of `apps/web`.
+
+## Use it
+
+Tailwind host (apps/web, a Vite App with Tailwind):
+
+```css
+@import 'tailwindcss';
+@import '@kortix/ui/tailwind.css';
+```
+
+Install the plugins `tailwind.css` loads (optional peers, so a host without
+Tailwind never installs Tailwind):
+`npm i tw-animate-css tailwind-scrollbar tailwind-scrollbar-hide`.
+
+`tailwind.css` imports `tw-animate-css`, `tokens.css` (the `:root` / `.dark`
+values), `theme.css` (dark variant, base rules, `@theme` keys, utilities,
+keyframes, `@source` over the package) and the `tailwind-scrollbar` plugins.
+A host that brings its own token values imports the parts one by one. Every
+line except `tokens.css` is required: without `tw-animate-css` and the plugins,
+overlay animations and `scrollbar-hide` drop out with no build error.
+
+```css
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import '@kortix/ui/tokens.css'; /* optional */
+@import '@kortix/ui/theme.css';
+@plugin 'tailwind-scrollbar';
+@plugin 'tailwind-scrollbar-hide';
+```
+
+`tokens.css` sets `--spacing: 0.23rem`, 8% tighter than Tailwind's `0.25rem`.
+The host's own spacing utilities follow it (`p-4` is 14.72px). To keep stock
+Tailwind spacing, set `--spacing: 0.25rem` after the import; the components
+then render 8% larger.
+
+`theme.css` holds the base rules every host needs: `body` paints
+`--background` / `--foreground`, `*` borders default to `--border`,
+`color-scheme` follows `.dark`, `::selection` reads `--selection`, and
+interactive elements get the pointer cursor.
+
+Host without Tailwind: `import '@kortix/ui/styles.css'`. It is
+`dist/styles.css`, committed and rebuilt by `pnpm --filter @kortix/ui
+build:styles` after any change under `src/`. `src/exports.test.ts` fails when
+the committed file drifts from a fresh build.
+
+Kortix-owned surfaces only (brand D8a): `@import '@kortix/ui/fonts.css';`
+after `theme.css` loads Roobert and sets `--font-roobert` /
+`--font-roobert-mono`. A white-label host never imports it.
+
+Mount the adapters once at the root:
+
+```tsx
+import { UiProvider } from '@kortix/ui';
+<UiProvider strings={{ confirm: t('confirm'), chat: { send: t('send') } }} link={NextLink}>{app}</UiProvider>
+```
+
+`strings` takes any subset of `UiStrings`: `confirm`, `cancel`, `close`,
+`commandPaletteTitle`, `commandPaletteDescription`, and `chat` (every string
+of `@kortix/ui/chat`; `defaultChatStrings` lists the keys). Without
+`UiProvider`, components render English copy and a plain `<a>`.
+`MermaidRenderer`'s controls are English only.
+Dark mode is the `dark` class on `<html>` (`useIsDark()` reads it).
+
+Import components by subpath: `import { Button } from '@kortix/ui/button'`.
+The root `@kortix/ui` barrel holds only light core primitives. Toasts need one
+`<Toaster />` from `@kortix/ui/toast` at the root; `IconProvider`
+(`@kortix/ui/icon-provider`) sets the house icon weight.
+
+## Chat
+
+Every part of `@kortix/ui/chat` needs `@kortix/sdk` and `@tanstack/react-query`
+5 (`@kortix/sdk/react` imports it; it is an optional peer, so npm does not
+warn when it is missing and the bundler fails instead):
+`npm i @kortix/ui @kortix/sdk @tanstack/react-query`, plus one
+`QueryClientProvider`.
+
+```tsx
+import { useSession } from '@kortix/sdk/react';
+import { SessionThread } from '@kortix/ui/chat';
+
+<SessionThread session={useSession(projectId, sessionId)} />
+```
+
+`src/chat/index.ts` lists every part (`MessageList`, `MessageView`, `Composer`,
+the prompts, the pickers) for a host that composes its own layout. A fully
+custom transcript uses `renderParts` from `@kortix/sdk/react`.
+
+## White-label
+
+Override the CSS variables from `tokens.css` in your own `:root` / `.dark`.
+Never fork a component. Roobert (`--font-roobert`) is Kortix-owned surfaces
+only; every other host renders the system stack (`--font-sans-system`).
+
+| Variable | What follows it |
+| --- | --- |
+| `--kortix-blue` | The accent: checked `Switch` / `Checkbox` / `RadioGroup`, `brand` and `blue` `Button` variants, info `Badge`, `InfoBanner`, `Alert`, status, toast |
+| `--ring` | Focus rings; `--kortix-base`, `--sidebar-ring` and `--sidebar-primary` (sidebar selection) follow it |
+| `--sidebar-primary-foreground` | Text on the sidebar selection |
+| `--foreground`, `--background` | Text, the page, the default `Button` (`bg-foreground text-background`) |
+| `--primary`, `--primary-foreground` | `Progress`, `Slider`, `Calendar` selection, menu row tint, default selection |
+| `--kortix-green`, `--kortix-orange`, `--destructive` | Success, warning, error tones |
+| `--radius`, `--font-sans-system` | Radius, font stack |
+
+`apps/whitelabel-demo/src/app/globals.css` is the reference: it sets
+`--kortix-blue` and `--ring` to its brand.
+
+## Known issues
+
+- React 19: npm prints `ERESOLVE overriding peer dependency` for `cmdk@0.2.1`
+  (React 18 peer) and nests `@radix-ui/react-dialog@1.0.0` under it. The install
+  succeeds. A host with `strict-peer-dependencies` must allow it. `cmdk` 1.x
+  changes the selection model `command.tsx` is tuned to, and `apps/web` imports
+  `cmdk` directly, so the upgrade is its own change.
+
+## Rules
+
+- Values: the `kortix-brand` skill (`.agents/skills/kortix-brand/SKILL.md`).
+  The generator is `.agents/skills/kortix-brand/scripts/generate-tokens.ts`.
+- Components: the `kortix-design-system` skill.
+- Imports inside the package are relative. Never import `apps/web` code.
+- Edit a component here, never its `apps/web` shim. A shim is only
+  `export * from '@kortix/ui/<name>'` (plus `'use client'` and the default
+  re-export when the component has them).
+- `package.json` `exports` is generated: `pnpm --filter @kortix/ui gen-exports`.
+  `src/exports.test.ts` fails on drift and on an export target that does not exist.
+- `src/styles/tokens.css`, `src/styles/fonts.css` and the `theme` region of
+  `src/styles/theme.css` are generated. `dist/styles.css` is built. Never edit them by hand.
+
+## Checks
+
+```sh
+pnpm --filter @kortix/ui typecheck
+pnpm --filter @kortix/ui test src/exports.test.ts   # exports map, targets, dist/styles.css drift
+pnpm --filter @kortix/ui test src/skill.test.ts     # skill names every barrel export; managed copy identical
+bun .agents/skills/kortix-brand/scripts/generate-tokens.ts --check
+.agents/skills/kortix-brand/scripts/audit.sh packages/ui/src
+```

package/dist/_vendor/kortix-shared.js

@@ -0,0 +1,341 @@
+// ../shared/src/utils/chalk-colors.ts
+function hashLabel(seed) {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i++) {
+    hash = hash * 31 + seed.charCodeAt(i) | 0;
+  }
+  return Math.abs(hash);
+}
+function chalkColors(label) {
+  const hash = hashLabel(label || "?");
+  const hue = hash % 360;
+  const sat = 35 + hash % 12;
+  const lift = (hash >> 3) % 10;
+  return {
+    background: `hsl(${hue} ${sat}% ${77 + lift}%)`,
+    foreground: `hsl(${hue} ${Math.min(sat + 10, 82)}% 27%)`,
+    border: `hsl(${hue} ${sat}% ${65 + lift}%)`
+  };
+}
+var AVATAR_FILLS = [
+  "hsl(220 8% 50%)",
+  "hsl(4 46% 53%)",
+  "hsl(24 60% 46%)",
+  "hsl(46 62% 37%)",
+  "hsl(84 42% 37%)",
+  "hsl(212 46% 50%)",
+  "hsl(275 34% 56%)",
+  "hsl(318 40% 52%)"
+];
+var AVATAR_INK = "hsl(0 0% 100%)";
+function avatarFill(seed) {
+  return AVATAR_FILLS[hashLabel(seed.trim().toLowerCase() || "?") % AVATAR_FILLS.length];
+}
+
+// ../shared/src/project-glyphs.ts
+var PROJECT_GLYPH_GROUPS = [
+  {
+    label: "Objects",
+    names: [
+      "Trash",
+      "ShoppingCart",
+      "Package",
+      "Briefcase",
+      "Gift",
+      "Lightbulb",
+      "Wrench",
+      "Hammer",
+      "Key",
+      "Lock",
+      "Umbrella",
+      "Trophy"
+    ]
+  },
+  {
+    label: "Shapes",
+    names: [
+      "Circle",
+      "Square",
+      "Triangle",
+      "Diamond",
+      "Hexagon",
+      "Star",
+      "Heart",
+      "Lightning",
+      "Spade",
+      "Club",
+      "Cube",
+      "Polygon"
+    ]
+  },
+  {
+    label: "Files",
+    names: [
+      "File",
+      "FileText",
+      "Folder",
+      "FolderOpen",
+      "Note",
+      "Book",
+      "Newspaper",
+      "Paperclip",
+      "Archive",
+      "Notebook",
+      "Files",
+      "FolderPlus"
+    ]
+  },
+  {
+    label: "Actions",
+    names: [
+      "Plus",
+      "Minus",
+      "Copy",
+      "Check",
+      "X",
+      "Pencil",
+      "Bookmark",
+      "Eraser",
+      "Scissors",
+      "LinkSimple",
+      "ShareNetwork",
+      "Clipboard"
+    ]
+  },
+  {
+    label: "Arrows",
+    names: [
+      "ArrowUp",
+      "ArrowDown",
+      "ArrowLeft",
+      "ArrowRight",
+      "ArrowsClockwise",
+      "ArrowSquareOut",
+      "TrendUp",
+      "TrendDown",
+      "ArrowsLeftRight",
+      "ArrowUUpLeft",
+      "ArrowsOut",
+      "ArrowsIn"
+    ]
+  },
+  {
+    label: "Tech",
+    names: [
+      "Code",
+      "Terminal",
+      "Database",
+      "Cloud",
+      "Cpu",
+      "Bug",
+      "GitBranch",
+      "Rocket",
+      "Monitor",
+      "DeviceMobile",
+      "Keyboard",
+      "Robot"
+    ]
+  },
+  {
+    label: "Nature",
+    names: [
+      "Leaf",
+      "Tree",
+      "Sun",
+      "Moon",
+      "Drop",
+      "Fire",
+      "Mountains",
+      "Planet",
+      "Flower",
+      "Cactus",
+      "Snowflake",
+      "Rainbow"
+    ]
+  },
+  {
+    label: "Symbols",
+    names: [
+      "Hash",
+      "At",
+      "Percent",
+      "Asterisk",
+      "Question",
+      "Warning",
+      "Info",
+      "Bell",
+      "Crown",
+      "Flag",
+      "Medal",
+      "Sparkle"
+    ]
+  },
+  {
+    label: "Food",
+    names: [
+      "Carrot",
+      "Pizza",
+      "Hamburger",
+      "IceCream",
+      "Coffee",
+      "BeerStein",
+      "Cookie",
+      "Cake",
+      "Egg",
+      "Bread",
+      "Wine",
+      "Martini"
+    ]
+  },
+  {
+    label: "Animals",
+    names: [
+      "Dog",
+      "Cat",
+      "Bird",
+      "Butterfly",
+      "Rabbit",
+      "Horse",
+      "Cow",
+      "PawPrint",
+      "Fish",
+      "Shrimp",
+      "Feather",
+      "Bone"
+    ]
+  },
+  {
+    label: "Transport",
+    names: [
+      "Car",
+      "Bus",
+      "Truck",
+      "Train",
+      "Airplane",
+      "Bicycle",
+      "Motorcycle",
+      "Boat",
+      "Scooter",
+      "Taxi",
+      "Van",
+      "Jeep"
+    ]
+  },
+  {
+    label: "People",
+    names: [
+      "User",
+      "Users",
+      "Smiley",
+      "SmileyMeh",
+      "SmileySad",
+      "Ghost",
+      "Alien",
+      "Baby",
+      "PersonSimpleRun",
+      "Hand",
+      "ThumbsUp",
+      "Eye"
+    ]
+  },
+  {
+    label: "Music",
+    names: [
+      "MusicNote",
+      "MusicNotes",
+      "Guitar",
+      "Microphone",
+      "SpeakerHigh",
+      "Radio",
+      "Playlist",
+      "Metronome",
+      "Waveform",
+      "Disc",
+      "Headphones",
+      "Equalizer"
+    ]
+  },
+  {
+    label: "Sport",
+    names: [
+      "Basketball",
+      "Football",
+      "SoccerBall",
+      "Baseball",
+      "TennisBall",
+      "Barbell",
+      "Target",
+      "Golf",
+      "Volleyball",
+      "PingPong",
+      "Racquet",
+      "PersonSimpleSwim"
+    ]
+  },
+  {
+    label: "Money",
+    names: [
+      "CurrencyDollar",
+      "Wallet",
+      "CreditCard",
+      "PiggyBank",
+      "Coins",
+      "Receipt",
+      "Bank",
+      "ChartLine",
+      "Tag",
+      "ChartBar",
+      "ChartPie",
+      "Handshake"
+    ]
+  },
+  {
+    label: "Care",
+    names: [
+      "CloudRain",
+      "CloudSnow",
+      "CloudLightning",
+      "Wind",
+      "Thermometer",
+      "Sunglasses",
+      "Heartbeat",
+      "Pill",
+      "FirstAid",
+      "Syringe",
+      "Bandaids",
+      "Stethoscope"
+    ]
+  },
+  {
+    label: "Numbers",
+    names: [
+      "NumberCircleZero",
+      "NumberCircleOne",
+      "NumberCircleTwo",
+      "NumberCircleThree",
+      "NumberCircleFour",
+      "NumberCircleFive",
+      "NumberCircleSix",
+      "NumberCircleSeven",
+      "NumberCircleEight",
+      "NumberCircleNine"
+    ]
+  }
+];
+var PROJECT_GLYPH_NAMES = PROJECT_GLYPH_GROUPS.flatMap(
+  (group) => group.names
+);
+var PROJECT_GLYPH_COLORS = [
+  "grey",
+  "red",
+  "orange",
+  "yellow",
+  "lime",
+  "blue",
+  "purple",
+  "magenta"
+];
+new Set(PROJECT_GLYPH_NAMES);
+new Set(PROJECT_GLYPH_COLORS);
+
+export { AVATAR_INK, PROJECT_GLYPH_COLORS, PROJECT_GLYPH_NAMES, avatarFill, chalkColors };

package/dist/chat/agent-picker.d.ts

@@ -0,0 +1,8 @@
+import type { Agent } from '@kortix/sdk';
+export declare function AgentPicker({ agents, value, onChange, defaultName, }: {
+    agents: readonly Agent[];
+    value: string | null;
+    onChange: (name: string | null) => void;
+    /** The project's configured default agent, shown when nothing is picked. */
+    defaultName?: string | null;
+}): import("react").JSX.Element | null;

package/dist/chat/agent-picker.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Agent picker, controlled, over `session.agents`. `value` is the agent name,
+ * or null for the project's default agent. Send passes the pick as `options.agent`.
+ */
+import { CaretUpDownIcon, CheckIcon, RobotIcon } from '@phosphor-icons/react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../components/ui/dropdown-menu.js';
+import { MENU_INDICATOR, MENU_INDICATOR_ICON } from '../components/ui/menu-recipe.js';
+import { useUiStrings } from '../providers/ui-provider.js';
+const TRIGGER = 'text-muted-foreground hover:text-foreground h-7 max-w-40 min-w-0 gap-1 px-2 text-xs';
+export function AgentPicker({ agents, value, onChange, defaultName, }) {
+    const t = useUiStrings().chat;
+    if (agents.length === 0)
+        return null;
+    const check = (on) => (_jsx("span", { className: MENU_INDICATOR, children: on && _jsx(CheckIcon, { className: MENU_INDICATOR_ICON }) }));
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { variant: "transparent", className: TRIGGER, "aria-label": t.agent, children: [_jsx(RobotIcon, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate capitalize", children: value ?? defaultName ?? t.defaultAgent }), _jsx(CaretUpDownIcon, { className: "size-3 shrink-0" })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-60", children: [_jsxs(DropdownMenuItem, { onSelect: () => onChange(null), children: [_jsx("span", { className: "flex-1 capitalize", children: defaultName ? t.defaultAgentNamed(defaultName) : t.defaultAgent }), check(!value)] }), agents.map((a) => (_jsxs(DropdownMenuItem, { onSelect: () => onChange(a.name), className: "items-start", children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate capitalize", children: a.name }), a.description && _jsx("span", { className: "text-muted-foreground block truncate text-xs", children: a.description })] }), check(value === a.name)] }, a.name)))] })] }));
+}

package/dist/chat/composer.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+import { type ChatErrorHandler } from './permission-prompt.js';
+export type ComposerCommand = {
+    name: string;
+    description?: string | null;
+};
+/** The "/token" being typed (no space yet), lower-cased, or null. */
+export declare function slashQuery(value: string): string | null;
+/** A "/name args" line whose name is a known command, else null (send it as text). */
+export declare function parseCommand(text: string, commands: readonly ComposerCommand[]): {
+    name: string;
+    args: string;
+} | null;
+export declare function Composer({ onSend, onStop, busy, canStop, disabled, placeholder, toolbar, footer, commands, onCommand, onError, }: {
+    onSend: (text: string) => void;
+    onStop: () => void;
+    busy: boolean;
+    /** False hides Stop (a shared session where this viewer may not stop the turn). */
+    canStop?: boolean;
+    disabled?: boolean;
+    /** Default: `strings.chat.placeholder`. */
+    placeholder?: string;
+    toolbar?: ReactNode;
+    /** Rendered under the input card. */
+    footer?: ReactNode;
+    commands?: readonly ComposerCommand[];
+    /** Runs a slash command. A rejection restores the typed line and reports the error. */
+    onCommand?: (name: string, args: string) => void | Promise<void>;
+    /** Reports a refused command (for a toast). Without it the composer shows the error inline. */
+    onError?: ChatErrorHandler;
+}): import("react").JSX.Element;

package/dist/chat/composer.js

@@ -0,0 +1,114 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The chat input card. Enter sends, Shift+Enter adds a line. Typing "/" opens
+ * the project's command menu (`session.commands`); a sent "/cmd args" line
+ * whose name is a known command runs `onCommand` instead of a text prompt.
+ * A refused command is never silent: the typed line comes back into the
+ * input and the error goes to `onError`, or shows inline when there is none.
+ * While the agent is busy the send button becomes Stop.
+ *
+ * `toolbar` sits in the card's control row (model and agent pickers).
+ * `footer` sits under the card: read-only facts about the session, which
+ * would read as send-time options inside the control row.
+ */
+import { ArrowUpIcon, StopIcon, WarningCircleIcon } from '@phosphor-icons/react';
+import { useMemo, useRef, useState } from 'react';
+import { Button } from '../components/ui/button.js';
+import { InfoBanner } from '../components/ui/info-banner.js';
+import { FLOATING_PANEL_SURFACE, menuRow } from '../components/ui/menu-recipe.js';
+import { Textarea } from '../components/ui/textarea.js';
+import { cn } from '../lib/utils.js';
+import { useUiStrings } from '../providers/ui-provider.js';
+import { errorMessage } from './permission-prompt.js';
+/** The "/token" being typed (no space yet), lower-cased, or null. */
+export function slashQuery(value) {
+    const m = value.match(/^\/(\S*)$/);
+    return m ? m[1].toLowerCase() : null;
+}
+/** A "/name args" line whose name is a known command, else null (send it as text). */
+export function parseCommand(text, commands) {
+    const m = text.match(/^\/(\S+)(?:\s+([\s\S]*))?$/);
+    if (!m || !commands.some((c) => c.name === m[1]))
+        return null;
+    return { name: m[1], args: (m[2] ?? '').trim() };
+}
+export function Composer({ onSend, onStop, busy, canStop = true, disabled, placeholder, toolbar, footer, commands, onCommand, onError, }) {
+    const t = useUiStrings().chat;
+    const [value, setValue] = useState('');
+    const [dismissed, setDismissed] = useState(false);
+    const [highlight, setHighlight] = useState(0);
+    const [commandError, setCommandError] = useState(null);
+    const ref = useRef(null);
+    const query = slashQuery(value);
+    const matches = useMemo(() => {
+        if (query === null || !commands?.length || !onCommand)
+            return [];
+        return commands.filter((c) => c.name.toLowerCase().includes(query)).slice(0, 8);
+    }, [query, commands, onCommand]);
+    const menuOpen = matches.length > 0 && !dismissed;
+    const setText = (next) => {
+        setValue(next);
+        setDismissed(false);
+        setHighlight(0);
+    };
+    const pickCommand = (name) => {
+        setText(`/${name} `);
+        ref.current?.focus();
+    };
+    const runCommand = async (text, name, args) => {
+        try {
+            await onCommand?.(name, args);
+        }
+        catch (err) {
+            // Give the line back unless the user already typed a new one.
+            setValue((current) => (current === '' ? text : current));
+            const message = errorMessage(err, t.commandFailed);
+            if (onError)
+                onError(message, err);
+            else
+                setCommandError(message);
+        }
+    };
+    const submit = () => {
+        const text = value.trim();
+        if (!text || disabled)
+            return;
+        setCommandError(null);
+        const command = onCommand ? parseCommand(text, commands ?? []) : null;
+        // Clear at once: a command's request can last the whole turn.
+        setText('');
+        if (command)
+            void runCommand(text, command.name, command.args);
+        else
+            onSend(text);
+    };
+    return (_jsxs("div", { "data-slot": "composer", className: "relative", children: [commandError && (_jsx(InfoBanner, { tone: "destructive", icon: WarningCircleIcon, title: t.commandFailed, className: "mb-2", role: "alert", children: commandError })), menuOpen && (_jsxs("div", { role: "listbox", "aria-label": t.commands, className: cn(FLOATING_PANEL_SURFACE, 'absolute bottom-full left-0 z-20 mb-2 w-72 overflow-hidden'), children: [_jsx("div", { className: "border-border text-muted-foreground border-b px-3 py-1.5 text-xs", children: t.commands }), _jsx("div", { className: "scrollbar-thin max-h-64 overflow-y-auto p-1", children: matches.map((c, i) => (_jsxs("button", { type: "button", role: "option", "aria-selected": i === highlight, "data-highlighted": i === highlight ? '' : undefined, onMouseEnter: () => setHighlight(i), onClick: () => pickCommand(c.name), className: menuRow('sm', 'default', 'items-start text-left'), children: [_jsx("span", { className: "text-muted-foreground w-4 shrink-0 text-center font-mono", children: "/" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate", children: c.name }), c.description && (_jsx("span", { className: "text-muted-foreground block truncate text-xs", children: c.description }))] })] }, c.name))) })] })), _jsxs("div", { className: cn('border-border bg-popover focus-within:border-ring rounded-lg border transition-colors motion-reduce:transition-none', disabled && 'opacity-70'), children: [_jsx(Textarea, { ref: ref, rows: 1, minHeight: 35, maxHeight: 200, value: value, disabled: disabled, placeholder: placeholder ?? t.placeholder, "aria-label": t.message, onChange: (e) => setText(e.target.value), onKeyDown: (e) => {
+                            if (e.nativeEvent.isComposing)
+                                return;
+                            if (menuOpen) {
+                                if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                                    e.preventDefault();
+                                    const step = e.key === 'ArrowDown' ? 1 : -1;
+                                    setHighlight((h) => Math.min(Math.max(h + step, 0), matches.length - 1));
+                                    return;
+                                }
+                                if (e.key === 'Enter' || e.key === 'Tab') {
+                                    e.preventDefault();
+                                    pickCommand((matches[highlight] ?? matches[0]).name);
+                                    return;
+                                }
+                                if (e.key === 'Escape') {
+                                    e.preventDefault();
+                                    setDismissed(true);
+                                    return;
+                                }
+                            }
+                            if (e.key === 'Enter' && !e.shiftKey) {
+                                e.preventDefault();
+                                // No new turn while the agent is busy: the visible control is Stop.
+                                if (!busy)
+                                    submit();
+                            }
+                        }, className: "scrollbar-thin border-0 bg-transparent px-3.5 pt-3 leading-relaxed focus:ring-0" }), _jsxs("div", { className: "flex items-center justify-between gap-2 px-2 pt-1 pb-2", children: [_jsx("div", { className: "min-w-0", children: toolbar }), busy && canStop ? (_jsx(Button, { size: "icon-base", variant: "secondary", onClick: onStop, "aria-label": t.stop, className: "rounded-full", children: _jsx(StopIcon, { weight: "fill", className: "size-3.5" }) })) : (_jsx(Button, { size: "icon-base", onClick: submit, disabled: busy || !value.trim() || disabled, "aria-label": t.send, className: "rounded-full", children: _jsx(ArrowUpIcon, { className: "size-4" }) }))] })] }), footer] }));
+}