@elabs-ai/components-ai 4.0.0 → 4.1.0

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

@@ -0,0 +1,94 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { SessionStatusBar } from "./session-status-bar";
+
+describe("SessionStatusBar", () => {
+  it("renders nothing at all when every segment is empty", () => {
+    const { container } = render(<SessionStatusBar />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("renders only the segments whose prop is supplied", () => {
+    render(<SessionStatusBar workspace="brand-ui" />);
+
+    expect(screen.getByText("brand-ui")).toBeInTheDocument();
+    expect(screen.queryByText(/main|feature\//)).not.toBeInTheDocument();
+  });
+
+  it("renders workspace, branch and model together when all are supplied", () => {
+    render(<SessionStatusBar branch="main" model="Claude Opus 4" workspace="brand-ui" />);
+
+    expect(screen.getByText("brand-ui")).toBeInTheDocument();
+    expect(screen.getByText("main")).toBeInTheDocument();
+    expect(screen.getByText("Claude Opus 4")).toBeInTheDocument();
+  });
+
+  it("docks children (e.g. Context) rather than reimplementing usage maths", () => {
+    render(
+      <SessionStatusBar workspace="brand-ui">
+        <span>Context slot</span>
+      </SessionStatusBar>,
+    );
+
+    expect(screen.getByText("Context slot")).toBeInTheDocument();
+  });
+
+  it("renders a connection count and a distinct connecting state", () => {
+    const { rerender } = render(
+      <SessionStatusBar connections={{ connected: 2, total: 4 }} workspace="brand-ui" />,
+    );
+    expect(screen.getByText("2/4")).toBeInTheDocument();
+
+    rerender(
+      <SessionStatusBar
+        connections={{ connected: 0, total: 4, connecting: true }}
+        workspace="brand-ui"
+      />,
+    );
+    expect(screen.getByText("0/4")).toBeInTheDocument();
+  });
+
+  // #155: the connections live region's only text content used to be
+  // aria-hidden, so a screen reader heard an empty string on every update.
+  // `screen.getByText` alone cannot catch this (it matches text regardless of
+  // aria-hidden) — this asserts what the region ACTUALLY announces: its text
+  // content with every aria-hidden subtree stripped out first.
+  const announceableText = (el: Element): string => {
+    const clone = el.cloneNode(true) as HTMLElement;
+    for (const hidden of Array.from(clone.querySelectorAll('[aria-hidden="true"]'))) {
+      hidden.remove();
+    }
+    return clone.textContent?.trim() ?? "";
+  };
+
+  it("announces the connection state via real text content, not just an aria-label (#155)", () => {
+    const { container, rerender } = render(
+      <SessionStatusBar connections={{ connected: 0, total: 4, connecting: true }} />,
+    );
+    const connecting = container.querySelector(
+      '[data-slot="session-status-bar-connections"]',
+    ) as HTMLElement;
+    expect(connecting).toHaveAttribute("role", "status");
+    expect(connecting).toHaveAttribute("aria-live", "polite");
+    // No separate `aria-label`: an explicit one would duplicate the
+    // announced content as the accessible name too, and some ATs speak a
+    // live region's name alongside its changed content ("Connecting…
+    // Connecting…"). Leaving it off does NOT relocate the name to the
+    // (sr-only) text — `role="status"` is `nameFrom: author`, so with no
+    // `aria-label`/`aria-labelledby` the region simply has no accessible
+    // name. That is fine: no acceptance criterion needs one here, only the
+    // announced content (asserted below) does.
+    expect(connecting).not.toHaveAttribute("aria-label");
+    // Before the fix this was "" — the only text node was aria-hidden.
+    expect(announceableText(connecting)).toBe("Connecting…");
+
+    rerender(<SessionStatusBar connections={{ connected: 2, total: 4 }} />);
+    const connected = container.querySelector(
+      '[data-slot="session-status-bar-connections"]',
+    ) as HTMLElement;
+    expect(announceableText(connected)).toBe("2 of 4 connections");
+    // The visible, aria-hidden counter is unchanged — the fix adds an
+    // announcement, it does not alter the rendered appearance (#155 AC).
+    expect(screen.getByText("2/4")).toHaveAttribute("aria-hidden", "true");
+  });
+});

package/src/session-status-bar.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { cn, useLocale } from "@elabs-ai/components-ui";
+import { Cpu, Folder, GitBranch, Loader2Icon, PlugZapIcon } from "lucide-react";
+import type { ComponentProps, ComponentType, ReactNode, SVGProps } from "react";
+import { forwardRef } from "react";
+
+export interface SessionStatusBarConnections {
+  /** Number of integrations/MCP servers currently connected. */
+  connected: number;
+  /** Total number of configured integrations/MCP servers. */
+  total: number;
+  /** Renders a spinner in place of the connection icon while establishing. */
+  connecting?: boolean;
+}
+
+export interface SessionStatusBarProps extends ComponentProps<"div"> {
+  /** Current workspace/project name. */
+  workspace?: string;
+  /** Current git branch. */
+  branch?: string;
+  /** Active model id/label. */
+  model?: string;
+  /** Integration/MCP connection progress; renders a spinner while connecting. */
+  connections?: SessionStatusBarConnections;
+  /**
+   * Docks another component alongside the ambient segments — most often
+   * `<TokenUsage />` (`@elabs-ai/components-ai`), so token usage/cost keeps
+   * its one owner (`token-usage.tsx`, tokenlens) instead of being re-implemented
+   * here. Rendered flush to the end of the bar.
+   */
+  children?: ReactNode;
+}
+
+type SegmentIcon = ComponentType<SVGProps<SVGSVGElement>>;
+
+const SessionStatusBarSegment = ({
+  icon: Icon,
+  slot,
+  value,
+}: {
+  icon: SegmentIcon;
+  slot: string;
+  value: string;
+}) => (
+  <span className="inline-flex min-w-0 items-center gap-1.5" data-slot={slot}>
+    <Icon aria-hidden="true" className="size-3.5 shrink-0" />
+    <span className="truncate">{value}</span>
+  </span>
+);
+
+/**
+ * SessionStatusBar — the ambient session row: workspace, branch, model, and
+ * integration-connection progress (#105). Every segment is independently
+ * optional and renders only when its prop is supplied; with nothing supplied
+ * the bar renders nothing at all, not an empty shell.
+ *
+ * Docks `Context` (or any other node) via `children` rather than
+ * re-implementing token-usage/cost maths — `context.tsx` stays the one owner
+ * of that calculation (tokenlens).
+ */
+export const SessionStatusBar = forwardRef<HTMLDivElement, SessionStatusBarProps>(
+  function SessionStatusBar(
+    { workspace, branch, model, connections, children, className, ...props },
+    ref,
+  ) {
+    const { formatNumber, t } = useLocale();
+    const hasContent = Boolean(workspace ?? branch ?? model ?? connections ?? children);
+
+    if (!hasContent) {
+      return null;
+    }
+
+    // Computed once and reused for BOTH the connections region's name (for a
+    // user who navigates to it deliberately) and its real, non-hidden text
+    // content — what a polite announcement actually reads on change. An
+    // aria-label alone is NOT that (#155): a live region announces its
+    // content, not its own accessible name.
+    const connectionsAnnouncement = connections
+      ? connections.connecting
+        ? t("ai.sessionStatusBar.connecting")
+        : t("ai.sessionStatusBar.connections", {
+            connected: connections.connected,
+            total: connections.total,
+          })
+      : undefined;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex w-full items-center gap-4 border-t bg-surface-muted px-3 py-1.5 text-meta text-muted-foreground",
+          className,
+        )}
+        data-slot="session-status-bar"
+        {...props}
+      >
+        {workspace ? (
+          <SessionStatusBarSegment
+            icon={Folder}
+            slot="session-status-bar-workspace"
+            value={workspace}
+          />
+        ) : null}
+        {branch ? (
+          <SessionStatusBarSegment
+            icon={GitBranch}
+            slot="session-status-bar-branch"
+            value={branch}
+          />
+        ) : null}
+        {model ? (
+          <SessionStatusBarSegment icon={Cpu} slot="session-status-bar-model" value={model} />
+        ) : null}
+        {connections ? (
+          <span
+            aria-live="polite"
+            className="inline-flex shrink-0 items-center gap-1.5"
+            data-slot="session-status-bar-connections"
+            role="status"
+          >
+            {connections.connecting ? (
+              <Loader2Icon
+                aria-hidden="true"
+                className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none"
+              />
+            ) : (
+              <PlugZapIcon aria-hidden="true" className="size-3.5 shrink-0" />
+            )}
+            <span aria-hidden="true" className="tabular-nums">
+              {formatNumber(connections.connected)}/{formatNumber(connections.total)}
+            </span>
+            {/* The live region's only NON-hidden text — mirrors
+                terminal-status-bar.tsx's aria-hidden-visual +
+                sr-only-sentence pair (#155). Without this, every polite
+                update announced an empty string: the counter above is
+                aria-hidden, so it was the region's ONLY text content.
+                Deliberately no `aria-label` here (unlike
+                terminal-status-bar.tsx, where the label lives on the OUTER
+                bar as a generic region name distinct from any segment's
+                content): an explicit `aria-label` here would give this
+                span an ACCESSIBLE NAME byte-identical to its announced
+                CONTENT, which risks a double announcement ("Connecting…
+                Connecting…") on ATs that speak a live region's name
+                alongside its changed content. Leaving `aria-label` off
+                does NOT relocate the name to this text — `role="status"`
+                is `nameFrom: author`, so it never falls back to content
+                the way e.g. a `button` does. The span simply has no
+                accessible name, which is fine: no acceptance criterion
+                needs one here, only the announced content does. */}
+            <span className="sr-only">{connectionsAnnouncement}</span>
+          </span>
+        ) : null}
+        {children ? (
+          <div
+            className="ms-auto flex shrink-0 items-center"
+            data-slot="session-status-bar-context"
+          >
+            {children}
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);

package/src/snippet.stories.tsx

@@ -3,7 +3,15 @@ import { Snippet, SnippetAddon, SnippetCopyButton, SnippetInput } from "./snippe
 const meta = {
   title: "AI/Snippet",
   component: Snippet,
-  parameters: { layout: "padded" },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "A single-line copyable COMMAND — an `InputGroup` in a mono face wrapping a read-only value and a copy button (`npm i …`, a curl line, an id). Multi-line highlighted source with a language picker is `AI/CodeBlock`; see [Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). Nothing here highlights: `Snippet` never loads Shiki.",
+      },
+    },
+  },
 } satisfies Meta<typeof Snippet>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/src/stack-trace.tsx

@@ -3,6 +3,7 @@
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { Button } 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 { AlertTriangleIcon, CheckIcon, ChevronDownIcon, CopyIcon } from "lucide-react";
 import type { ComponentProps } from "react";
@@ -236,7 +237,9 @@ export const StackTraceErrorType = memo(
     const { trace } = useStackTrace();
 
     return (
-      <span className={cn("shrink-0 font-semibold text-destructive", className)} {...props}>
+      // #124: the error type NAME is running text (e.g. "TypeError"), not a
+      // mark — ink rung, unlike the AlertTriangleIcon mark above.
+      <span className={cn("shrink-0 font-semibold text-destructive-text", className)} {...props}>
         {children ?? trace.errorType}
       </span>
     );
@@ -426,6 +429,7 @@ FilePathButton.displayName = "FilePathButton";
 export const StackTraceFrames = memo(
   ({ className, showInternalFrames = true, ...props }: StackTraceFramesProps) => {
     const { trace, onFilePathClick } = useStackTrace();
+    const { t } = useLocale();
 
     const framesToShow = showInternalFrames
       ? trace.frames
@@ -460,7 +464,7 @@ export const StackTraceFrames = memo(
           </div>
         ))}
         {framesToShow.length === 0 && (
-          <div className="text-muted-foreground text-xs">No stack frames</div>
+          <div className="text-muted-foreground text-xs">{t("ai.stackTrace.empty")}</div>
         )}
       </div>
     );

package/src/streamdown-i18n.test.tsx

@@ -129,7 +129,7 @@ describe("Streamdown code-block theme (#315 follow-up)", () => {
     // (github-light's keyword is #d73a49, github-dark's is #ff7b72).
     expect(span.getAttribute("style")).toContain("--sdm-c: #133796");
     // Both dual-theme slots are pinned to the SAME active-theme color (#315
-    // follow-up design: brand-ui has three themes, not the two Shiki's
+    // follow-up design: brand-ui has more themes than the two Shiki's
     // light/dark mechanism expects), so `.dark` never resolves a different palette.
     expect(span.getAttribute("style")).toContain("--shiki-dark: #133796");
   });

package/src/task.stories.tsx

@@ -1,8 +1,18 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Task, TaskContent, TaskItem, TaskItemFile, TaskTrigger } from "./task";
-const meta = { title: "AI/Task", component: Task, parameters: { layout: "padded" } } satisfies Meta<
-  typeof Task
->;
+const meta = {
+  title: "AI/Task",
+  component: Task,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "The CHAT run summary — what got done, collapsed by default so a settled transcript keeps only its focal surfaces open. The console counterpart of an agent checklist is `Terminal/TerminalTodoList`; see [Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). The body rides the canonical `AI/AgentTimeline` rail rather than a hand-rolled one, and what the agent intends to do BEFORE it runs is `AI/Plan`.",
+      },
+    },
+  },
+} satisfies Meta<typeof Task>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 // Collapsed by default since #192; `defaultOpen` here only so the docs render

package/src/templates-ai-assistant.stories.tsx

@@ -9,6 +9,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
 import { AppIcon } from "@elabs-ai/components-icons";
 import {
+  Button,
   Sidebar,
   SidebarContent,
   SidebarGroup,
@@ -31,7 +32,7 @@ import {
   MessageContent,
   MessageResponse,
 } from "./index";
-import { Bot, History, Home, Settings } from "lucide-react";
+import { Bot, History, Home, MessageSquare, Settings } from "lucide-react";
 
 interface ChatMessage {
   id: string;
@@ -101,8 +102,27 @@ function AiAssistantTemplate() {
             <ConversationContent>
               {messages.length === 0 ? (
                 <ConversationEmptyState
+                  icon={<MessageSquare className="size-8" aria-hidden="true" />}
                   title="Start the conversation"
                   description="Ask anything to begin."
+                  actions={
+                    <>
+                      <Button
+                        onClick={() => send("What can you help me with?")}
+                        size="sm"
+                        variant="outline"
+                      >
+                        What can you help me with?
+                      </Button>
+                      <Button
+                        onClick={() => send("Summarize my recent activity")}
+                        size="sm"
+                        variant="outline"
+                      >
+                        Summarize my recent activity
+                      </Button>
+                    </>
+                  }
                 />
               ) : (
                 messages.map((m) => (

package/src/token-usage.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { TokenUsage, TokenUsageTrigger } from "./token-usage";
+const meta = {
+  title: "AI/TokenUsage",
+  component: TokenUsage,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "The context-WINDOW usage ring: a compact `usedTokens` / `maxTokens` dial that opens a hover card with the input/output token split and, when `modelId` is known, an estimated cost. It was called `Context` until it was renamed for exactly this reason — the chat workspace’s right rail is `AI/ContextPanel`, a different component with a confusingly similar old name. See [Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs).",
+      },
+    },
+  },
+} satisfies Meta<typeof TokenUsage>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <TokenUsage usedTokens={2400} maxTokens={8000}>
+      <TokenUsageTrigger />
+    </TokenUsage>
+  ),
+};

package/src/token-usage.test.tsx

@@ -0,0 +1,92 @@
+import type { LanguageModelUsage } from "ai";
+import { DEFAULT_MESSAGES, LocaleProvider } from "@elabs-ai/components-ui";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { TokenUsage, TokenUsageCache, TokenUsageReasoning } from "./token-usage";
+
+// `LanguageModelUsage`'s reasoning/cache figures live under nested detail
+// objects (`outputTokenDetails.reasoningTokens`, `inputTokenDetails.cacheReadTokens`).
+// ai@6 also carried deprecated flat top-level aliases (`reasoningTokens`,
+// `cachedInputTokens`); ai@7 removed them. This mock deliberately omits the
+// flat aliases so the test only passes if the components read the nested path.
+const usage: LanguageModelUsage = {
+  inputTokens: 1000,
+  inputTokenDetails: {
+    noCacheTokens: 600,
+    cacheReadTokens: 400,
+    cacheWriteTokens: 0,
+  },
+  outputTokens: 200,
+  outputTokenDetails: {
+    textTokens: 150,
+    reasoningTokens: 50,
+  },
+  totalTokens: 1200,
+};
+
+describe("TokenUsage usage readouts (#30, ai@7 LanguageModelUsage shape)", () => {
+  it("TokenUsageReasoning reads outputTokenDetails.reasoningTokens, not a flat field", () => {
+    render(
+      <TokenUsage maxTokens={8000} usage={usage} usedTokens={1200}>
+        <TokenUsageReasoning />
+      </TokenUsage>,
+    );
+    expect(screen.getByText("Reasoning")).toBeInTheDocument();
+    expect(screen.getByText("50")).toBeInTheDocument();
+  });
+
+  it("TokenUsageCache reads inputTokenDetails.cacheReadTokens, not a flat field", () => {
+    render(
+      <TokenUsage maxTokens={8000} usage={usage} usedTokens={1200}>
+        <TokenUsageCache />
+      </TokenUsage>,
+    );
+    expect(screen.getByText("Cache")).toBeInTheDocument();
+    expect(screen.getByText("400")).toBeInTheDocument();
+  });
+
+  it("renders nothing when the nested detail objects report zero", () => {
+    const zeroUsage: LanguageModelUsage = {
+      ...usage,
+      inputTokenDetails: { ...usage.inputTokenDetails, cacheReadTokens: 0 },
+      outputTokenDetails: { ...usage.outputTokenDetails, reasoningTokens: 0 },
+    };
+    const { container } = render(
+      <TokenUsage maxTokens={8000} usage={zeroUsage} usedTokens={1200}>
+        <TokenUsageReasoning />
+        <TokenUsageCache />
+      </TokenUsage>,
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+});
+
+describe("TokenUsage locale keys (#141, ai.context.* renamed to ai.tokenUsage.*)", () => {
+  it("the shipped dictionary defines no ai.context.* key", () => {
+    const staleKeys = Object.keys(DEFAULT_MESSAGES).filter((key) => key.startsWith("ai.context."));
+    expect(staleKeys).toEqual([]);
+  });
+
+  it("renders its labels from the ai.tokenUsage.* namespace, not a stale fallback", () => {
+    render(
+      <LocaleProvider
+        messages={{
+          "ai.tokenUsage.reasoning": "Custom reasoning label",
+          "ai.tokenUsage.cache": "Custom cache label",
+        }}
+      >
+        <TokenUsage maxTokens={8000} usage={usage} usedTokens={1200}>
+          <TokenUsageReasoning />
+          <TokenUsageCache />
+        </TokenUsage>
+      </LocaleProvider>,
+    );
+    // A component still reading the old `ai.context.*` namespace would ignore
+    // this override and keep rendering the untranslated English default
+    // ("Reasoning" / "Cache") instead.
+    expect(screen.getByText("Custom reasoning label")).toBeInTheDocument();
+    expect(screen.getByText("Custom cache label")).toBeInTheDocument();
+    expect(screen.queryByText("Reasoning")).not.toBeInTheDocument();
+    expect(screen.queryByText("Cache")).not.toBeInTheDocument();
+  });
+});