@elabs-ai/components-ai 4.0.0 → 4.1.0

package/src/schema-display.tsx

@@ -2,6 +2,7 @@
 
 import { Badge } from "@elabs-ai/components-ui";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
+import { useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { ChevronRightIcon } from "lucide-react";
 import type { ComponentProps, HTMLAttributes } from "react";
@@ -172,12 +173,13 @@ export const SchemaDisplayParameters = ({
   ...props
 }: SchemaDisplayParametersProps) => {
   const { parameters } = useContext(SchemaDisplayContext);
+  const { t } = useLocale();
 
   return (
     <Collapsible className={cn(className)} defaultOpen {...props}>
       <CollapsibleTrigger className="group flex w-full items-center gap-2 px-4 py-3 text-start transition-colors hover:bg-muted/50">
         <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
-        <span className="font-medium text-sm">Parameters</span>
+        <span className="font-medium text-sm">{t("ai.schemaDisplay.parameters")}</span>
         <Badge className="ms-auto text-xs" variant="secondary">
           {parameters?.length}
         </Badge>
@@ -313,12 +315,13 @@ export const SchemaDisplayResponse = ({
   ...props
 }: SchemaDisplayResponseProps) => {
   const { responseBody } = useContext(SchemaDisplayContext);
+  const { t } = useLocale();
 
   return (
     <Collapsible className={cn(className)} defaultOpen {...props}>
       <CollapsibleTrigger className="group flex w-full items-center gap-2 px-4 py-3 text-start transition-colors hover:bg-muted/50">
         <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
-        <span className="font-medium text-sm">Response</span>
+        <span className="font-medium text-sm">{t("ai.schemaDisplay.response")}</span>
       </CollapsibleTrigger>
       <CollapsibleContent>
         <div className="border-t">

package/src/selection-toolbar.stories.tsx

@@ -8,7 +8,15 @@ const meta = {
   title: "AI/SelectionToolbar",
   component: SelectionToolbar,
   tags: ["autodocs"],
-  parameters: { layout: "padded" },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "The small toolbar that floats over a TEXT SELECTION in a transcript, offering Quote. A dense secondary control row is `Layout/Toolbar`, the row above a list or table is `Layout/ViewToolbar`, and formatting chrome for a markdown source pane is `Editor/MarkdownToolbar` — see [Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). Positioned with a Popover virtual anchor at the selection rect; presentational only.",
+      },
+    },
+  },
 } satisfies Meta<typeof SelectionToolbar>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/src/session-header.stories.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+
+import { ChatGreeting } from "./chat-greeting";
+import { SessionHeader } from "./session-header";
+
+const CAPABILITIES = [
+  { label: "Web search", description: "Look things up while we talk." },
+  { label: "Code execution", description: "Run and inspect snippets in a sandbox." },
+  { label: "File access", description: "Read files in the current workspace." },
+];
+
+const WHATS_NEW = [
+  { label: "Faster file search", href: "#" },
+  { label: "Improved reasoning traces" },
+];
+
+const QUICK_ACTIONS = [
+  { label: "New chat", keyHint: "⌘N", onSelect: fn() },
+  { label: "Open workspace", keyHint: "⌘O", onSelect: fn() },
+  { label: "Settings", onSelect: fn() },
+];
+
+const meta = {
+  title: "AI/SessionHeader",
+  component: SessionHeader,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "The CHAT launch card; the console skin is `Terminal/TerminalBanner` — see " +
+          "[Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). " +
+          "The launch card for an empty agent session — model, workspace, version, capabilities, what's new, and quick actions with key hints. Every section is independently optional: with only `title` supplied it renders the identity row alone, with no empty section scaffolding and no stray separators. Pair it above `ChatGreeting` for the standard first-run agent session state; distinct from `ChatGreeting`, which is the centered display-scale greeting for a general assistant chat.",
+      },
+    },
+  },
+  args: {
+    title: "Codex",
+    model: "gpt-5.1-codex",
+    workspace: "~/dev/acme/api-gateway",
+    version: "v2.4.0",
+    capabilities: CAPABILITIES,
+    whatsNew: WHATS_NEW,
+    quickActions: QUICK_ACTIONS,
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SessionHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The fully-populated launch card. */
+export const Default: Story = {
+  render: (args) => (
+    <div className="mx-auto max-w-md bg-background">
+      <SessionHeader {...args} />
+    </div>
+  ),
+};
+
+/**
+ * `title` is the only prop supplied — every other section (meta, workspace,
+ * capabilities, what's new, quick actions) is absent. Renders the identity
+ * row alone with no empty scaffolding and no stray separators.
+ */
+export const TitleOnly: Story = {
+  args: {
+    title: "Codex",
+    model: undefined,
+    workspace: undefined,
+    version: undefined,
+    capabilities: undefined,
+    whatsNew: undefined,
+    quickActions: undefined,
+  },
+  render: (args) => (
+    <div className="mx-auto max-w-md bg-background">
+      <SessionHeader {...args} />
+    </div>
+  ),
+};
+
+/** Every section populated — the full launch-card anatomy. */
+export const FullyPopulated: Story = {
+  render: (args) => (
+    <div className="mx-auto max-w-md bg-background">
+      <SessionHeader {...args} />
+    </div>
+  ),
+};
+
+/** A long workspace path truncates instead of overflowing its container. */
+export const LongWorkspacePath: Story = {
+  args: {
+    workspace: "~/dev/acme/monorepo/services/platform/billing/api-gateway/src/handlers/webhooks",
+  },
+  render: (args) => (
+    <div className="mx-auto max-w-md bg-background">
+      <SessionHeader {...args} />
+    </div>
+  ),
+};
+
+/** A route that already owns the page's `<h1>` — pass `level={3}` to keep a single, hierarchical outline. */
+export const HeadingLevel3: Story = {
+  args: { level: 3 },
+  render: (args) => (
+    <div className="mx-auto max-w-md bg-background">
+      <h1 className="sr-only">Assistant</h1>
+      <h2 className="sr-only">Session</h2>
+      <SessionHeader {...args} />
+    </div>
+  ),
+};
+
+/** SessionHeader above ChatGreeting — the standard empty first-run agent session. */
+export const WithChatGreeting: Story = {
+  parameters: { layout: "fullscreen" },
+  render: (args) => (
+    <div className="grid min-h-[32rem] place-items-center bg-background px-4 py-10 text-foreground">
+      <div className="w-full max-w-md space-y-8">
+        <SessionHeader {...args} />
+        <ChatGreeting title="Ready when you are" orb={false} level={3} />
+      </div>
+    </div>
+  ),
+};

package/src/session-header.test.tsx

@@ -0,0 +1,138 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { SessionHeader } from "./session-header";
+
+const CAPABILITIES = [
+  { label: "Web search", description: "Look things up while we talk." },
+  { label: "Code execution" },
+];
+
+const WHATS_NEW = [{ label: "Faster file search", href: "https://example.com/changelog" }];
+
+const QUICK_ACTIONS = [
+  { label: "New chat", keyHint: "⌘N" },
+  { label: "Open workspace", keyHint: "⌘O" },
+  { label: "Settings" },
+];
+
+describe("SessionHeader", () => {
+  it("renders only the title with no empty sections or stray separators (acceptance criterion)", () => {
+    const { container } = render(<SessionHeader title="Codex" />);
+
+    expect(screen.getByRole("heading")).toHaveTextContent("Codex");
+
+    // No section for a prop that was never supplied.
+    expect(container.querySelector('[data-slot="session-header-meta"]')).toBeNull();
+    expect(container.querySelector('[data-slot="session-header-workspace"]')).toBeNull();
+    expect(container.querySelector('[data-slot="session-header-capabilities"]')).toBeNull();
+    expect(container.querySelector('[data-slot="session-header-whats-new"]')).toBeNull();
+    expect(container.querySelector('[data-slot="session-header-quick-actions"]')).toBeNull();
+
+    // No separator is ever rendered by this component — nothing left "stray"
+    // when the sections around it are absent.
+    expect(container.querySelector('[role="separator"]')).toBeNull();
+    expect(screen.queryByRole("separator")).toBeNull();
+
+    // No list/group scaffolding renders without content behind it.
+    expect(container.querySelectorAll("ul")).toHaveLength(0);
+    expect(container.querySelector('[role="group"]')).toBeNull();
+  });
+
+  it("renders nothing at all — not even the identity row — with no props supplied", () => {
+    const { container } = render(<SessionHeader />);
+
+    const root = container.firstElementChild as HTMLElement;
+    expect(root).toHaveAttribute("data-slot", "session-header");
+    expect(root.querySelector('[data-slot="session-header-identity"]')).toBeNull();
+    expect(screen.queryByRole("heading")).not.toBeInTheDocument();
+  });
+
+  it("renders every quick action as a focusable button reachable by role and accessible name", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    const quickActions = [
+      { label: "New chat", keyHint: "⌘N", onSelect },
+      ...QUICK_ACTIONS.slice(1),
+    ];
+
+    render(
+      <SessionHeader
+        title="Codex"
+        model="gpt-5.1-codex"
+        workspace="~/dev/acme/api-gateway"
+        version="v2.4.0"
+        capabilities={CAPABILITIES}
+        whatsNew={WHATS_NEW}
+        quickActions={quickActions}
+      />,
+    );
+
+    for (const action of quickActions) {
+      const button = screen.getByRole("button", { name: new RegExp(action.label) });
+      expect(button.tagName).toBe("BUTTON");
+    }
+
+    await user.click(screen.getByRole("button", { name: /New chat/ }));
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders shortcut hints via the Kbd primitive", () => {
+    render(<SessionHeader title="Codex" quickActions={QUICK_ACTIONS} />);
+
+    const button = screen.getByRole("button", { name: /New chat/ });
+    expect(button.querySelector("kbd")).toHaveTextContent("⌘N");
+  });
+
+  it("renders model and version together, separated, when both are supplied", () => {
+    render(<SessionHeader title="Codex" model="gpt-5.1-codex" version="v2.4.0" />);
+
+    expect(screen.getByText("gpt-5.1-codex · v2.4.0")).toBeInTheDocument();
+  });
+
+  it("truncates a long workspace path instead of overflowing", () => {
+    const workspace =
+      "~/dev/acme/monorepo/services/platform/billing/api-gateway/src/handlers/webhooks";
+    const { container } = render(<SessionHeader title="Codex" workspace={workspace} />);
+
+    const workspaceRow = container.querySelector('[data-slot="session-header-workspace"]');
+    const label = workspaceRow?.querySelector("span");
+    expect(label).toHaveTextContent(workspace);
+    expect(label?.className.split(" ")).toEqual(
+      expect.arrayContaining(["truncate", "min-w-0", "flex-1"]),
+    );
+  });
+
+  it("defaults to a level-2 heading and honors an explicit level override", () => {
+    const { rerender } = render(<SessionHeader title="Codex" />);
+    expect(screen.getByRole("heading", { level: 2 })).toBeInTheDocument();
+
+    rerender(<SessionHeader title="Codex" level={3} />);
+    expect(screen.getByRole("heading", { level: 3 })).toBeInTheDocument();
+    expect(screen.queryByRole("heading", { level: 2 })).not.toBeInTheDocument();
+  });
+
+  it("renders capability and what's-new list items only when their arrays are non-empty", () => {
+    render(<SessionHeader title="Codex" capabilities={CAPABILITIES} whatsNew={WHATS_NEW} />);
+
+    expect(screen.getByText("Web search")).toBeInTheDocument();
+    expect(screen.getByText("Look things up while we talk.")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Faster file search" })).toHaveAttribute(
+      "href",
+      "https://example.com/changelog",
+    );
+  });
+
+  it("merges a custom className onto the root", () => {
+    const { container } = render(<SessionHeader title="Codex" className="custom-class" />);
+
+    expect(container.firstElementChild).toHaveClass("custom-class");
+  });
+
+  it("forwards a ref to the root element", () => {
+    const ref = vi.fn();
+    render(<SessionHeader ref={ref} title="Codex" />);
+
+    expect(ref).toHaveBeenCalledWith(expect.any(HTMLDivElement));
+  });
+});

package/src/session-header.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import { forwardRef } from "react";
+import { Folder, Sparkles } from "lucide-react";
+import { BrandLogo } from "@elabs-ai/components-icons";
+import {
+  Button,
+  cn,
+  Heading,
+  Kbd,
+  useLocale,
+  type HeadingLevel,
+  type SessionCapability,
+  type SessionQuickAction,
+  type SessionWhatsNewItem,
+} from "@elabs-ai/components-ui";
+
+// `SessionCapability`, `SessionWhatsNewItem` and `SessionQuickAction` moved
+// to `@elabs-ai/components-ui` (`lib/session-launch.ts`) — the terminal CLI
+// look-alike family's own session header (issue #117) reuses the same
+// vocabulary shape, and `@elabs-ai/components-ai`/
+// `@elabs-ai/components-terminal` are layer-2 DAG siblings that may not
+// import each other (T0; see
+// docs/decisions/2026-09-01-brainless-adoption-architecture.md § 4). Imported
+// above; NOT re-exported from here — a consumer imports these from
+// `@elabs-ai/components-ui`.
+
+export interface SessionHeaderProps extends ComponentProps<"div"> {
+  /**
+   * Session/agent name, e.g. "Codex". Anchors the card — every other section
+   * is independently optional and renders nothing when omitted.
+   */
+  title?: string;
+  /** Active model, e.g. "gpt-5.1-codex". */
+  model?: string;
+  /** Working directory / project path. Truncates instead of overflowing. */
+  workspace?: string;
+  /** Build/version string, e.g. "v2.4.0". */
+  version?: string;
+  /** What this session can reach. */
+  capabilities?: SessionCapability[];
+  /** Recent changes, shown as a short list. */
+  whatsNew?: SessionWhatsNewItem[];
+  /** Shortcut actions, rendered as real buttons with optional shortcut hints. */
+  quickActions?: SessionQuickAction[];
+  /**
+   * Semantic heading level for `title`. Default `2` (a session header
+   * typically sits above a `ChatGreeting`'s level-1 headline, or inside a
+   * page that already owns its own `<h1>`).
+   */
+  level?: HeadingLevel;
+}
+
+/**
+ * SessionHeader — the launch card for an empty agent session: model,
+ * workspace, version, capabilities, what's new, and quick actions with
+ * shortcut hints. Pair it above `ChatGreeting` (or inside `ChatShell`'s
+ * `header` slot) for the standard first-run agent session state.
+ *
+ * Distinct from `ChatGreeting`, which is the centered display-scale greeting
+ * for a general assistant chat — `SessionHeader` answers different questions
+ * (what workspace am I in, what model, what can this thing reach, what
+ * changed) that a greeting has no home for.
+ *
+ * **Every section is independently optional.** With only `title` supplied,
+ * the card renders the identity row alone — no empty section scaffolding,
+ * no stray separators.
+ */
+export const SessionHeader = forwardRef<HTMLDivElement, SessionHeaderProps>(function SessionHeader(
+  {
+    title,
+    model,
+    workspace,
+    version,
+    capabilities,
+    whatsNew,
+    quickActions,
+    level = 2,
+    className,
+    ...props
+  },
+  ref,
+) {
+  const { t } = useLocale();
+  const hasMeta = model != null || version != null;
+  const hasIdentity = title != null || hasMeta || workspace != null;
+  const hasCapabilities = (capabilities?.length ?? 0) > 0;
+  const hasWhatsNew = (whatsNew?.length ?? 0) > 0;
+  const hasQuickActions = (quickActions?.length ?? 0) > 0;
+
+  return (
+    <div
+      ref={ref}
+      data-slot="session-header"
+      className={cn(
+        "min-w-0 rounded-xl border bg-card p-5 text-card-foreground shadow-xs",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex min-w-0 flex-col gap-4">
+        {hasIdentity ? (
+          <div data-slot="session-header-identity" className="flex min-w-0 flex-col gap-1">
+            {title != null ? (
+              <div className="flex min-w-0 items-center gap-2">
+                {/* Decorative — the visible Heading already carries the
+                    accessible name, so the mark is hidden from AT rather than
+                    announced a second time via BrandLogo's own `role="img"`. */}
+                <span aria-hidden="true" className="shrink-0">
+                  <BrandLogo variant="mark" height={24} title={title} />
+                </span>
+                <Heading
+                  data-slot="session-header-title"
+                  level={level}
+                  size="subtitle"
+                  className="min-w-0 truncate"
+                >
+                  {title}
+                </Heading>
+              </div>
+            ) : null}
+
+            {hasMeta ? (
+              <p
+                data-slot="session-header-meta"
+                className="min-w-0 truncate text-meta text-muted-foreground"
+              >
+                {model}
+                {model != null && version != null ? " · " : null}
+                {version}
+              </p>
+            ) : null}
+
+            {workspace != null ? (
+              <div
+                data-slot="session-header-workspace"
+                className="flex min-w-0 items-center gap-1.5 text-body text-muted-foreground"
+              >
+                <Folder aria-hidden="true" className="size-3.5 shrink-0" />
+                <span className="min-w-0 flex-1 truncate">{workspace}</span>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {hasCapabilities ? (
+          <div data-slot="session-header-capabilities" className="flex min-w-0 flex-col gap-2">
+            <p className="text-meta font-medium text-muted-foreground">
+              {t("ai.sessionHeader.capabilities")}
+            </p>
+            <ul className="flex min-w-0 flex-col gap-2">
+              {capabilities?.map((capability) => (
+                <li
+                  key={capability.label}
+                  data-slot="session-header-capability"
+                  className="flex min-w-0 items-start gap-2"
+                >
+                  {capability.icon != null ? (
+                    <span
+                      aria-hidden="true"
+                      className="mt-0.5 shrink-0 text-muted-foreground [&_svg]:size-4"
+                    >
+                      {capability.icon}
+                    </span>
+                  ) : null}
+                  <div className="min-w-0">
+                    <p className="min-w-0 truncate text-body text-foreground">{capability.label}</p>
+                    {capability.description != null ? (
+                      <p className="min-w-0 truncate text-meta text-muted-foreground">
+                        {capability.description}
+                      </p>
+                    ) : null}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : null}
+
+        {hasWhatsNew ? (
+          <div data-slot="session-header-whats-new" className="flex min-w-0 flex-col gap-2">
+            <p className="flex items-center gap-1.5 text-meta font-medium text-muted-foreground">
+              <Sparkles aria-hidden="true" className="size-3.5 shrink-0" />
+              {t("ai.sessionHeader.whatsNew")}
+            </p>
+            <ul className="flex min-w-0 flex-col gap-1">
+              {whatsNew?.map((item) => (
+                <li
+                  key={item.label}
+                  data-slot="session-header-whats-new-item"
+                  className="min-w-0 truncate text-body"
+                >
+                  {item.href != null ? (
+                    <a
+                      href={item.href}
+                      className="text-primary-text underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+                    >
+                      {item.label}
+                    </a>
+                  ) : (
+                    <span className="text-foreground">{item.label}</span>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : null}
+
+        {hasQuickActions ? (
+          <div
+            data-slot="session-header-quick-actions"
+            role="group"
+            aria-label={t("ai.sessionHeader.quickActions")}
+            className="flex min-w-0 flex-wrap gap-2"
+          >
+            {quickActions?.map((action) => (
+              <Button
+                key={action.label}
+                type="button"
+                data-slot="session-header-quick-action"
+                variant="outline"
+                size="sm"
+                onClick={action.onSelect}
+              >
+                <span>{action.label}</span>
+                {/* An explicit space text node (not just flex `gap-2`) keeps
+                    "New chat"/"⌘N" apart in the button's computed accessible
+                    name, not only its visual layout. */}
+                {action.keyHint != null ? (
+                  <>
+                    {" "}
+                    <Kbd>{action.keyHint}</Kbd>
+                  </>
+                ) : null}
+              </Button>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+});

package/src/session-status-bar.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { TokenUsage, TokenUsageTrigger } from "./token-usage";
+import { SessionStatusBar } from "./session-status-bar";
+
+const meta = {
+  title: "AI/SessionStatusBar",
+  component: SessionStatusBar,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "The CHAT status row; the console skin is `Terminal/TerminalStatusBar`, with the same " +
+          "prop names — see " +
+          "[Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). " +
+          "The ambient session row: workspace, branch, model and integration-connection progress (#105). Every segment renders only when its prop is supplied — an all-empty bar renders nothing at all. Docks `TokenUsage` via `children` rather than re-implementing token-usage/cost maths.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SessionStatusBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Every ambient segment, with `TokenUsage` docked at the trailing edge. */
+export const Default: Story = {
+  render: () => (
+    <SessionStatusBar branch="main" model="Claude Opus 4" workspace="brand-ui">
+      <TokenUsage maxTokens={8000} usedTokens={2400}>
+        <TokenUsageTrigger />
+      </TokenUsage>
+    </SessionStatusBar>
+  ),
+};
+
+/** Only a workspace name — every other segment is independently optional. */
+export const WorkspaceOnly: Story = {
+  render: () => <SessionStatusBar workspace="brand-ui" />,
+};
+
+/** Integrations mid-handshake — a spinner replaces the connection icon. */
+export const ConnectingIntegrations: Story = {
+  render: () => (
+    <SessionStatusBar
+      branch="feature/turn-status"
+      connections={{ connected: 1, total: 4, connecting: true }}
+      workspace="brand-ui"
+    />
+  ),
+};
+
+/** Integrations resolved — a static connected/total count. */
+export const IntegrationsConnected: Story = {
+  render: () => (
+    <SessionStatusBar
+      branch="feature/turn-status"
+      connections={{ connected: 4, total: 4 }}
+      model="Claude Opus 4"
+      workspace="brand-ui"
+    />
+  ),
+};
+
+/** No segment supplied — the bar renders nothing at all, not an empty shell. */
+export const Empty: Story = {
+  render: () => (
+    <div className="rounded-md border border-dashed p-4 text-center text-meta text-muted-foreground">
+      <SessionStatusBar />
+      Nothing rendered above this line.
+    </div>
+  ),
+};