@agent-native/toolkit 0.8.3 → 0.9.1

package/dist/dashboard/dashboard-layout.spec.js

@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import { buildDashboardPanelGroups, clampDashboardColumns, columnExpansionForDropSlot, movePanelToDropSlot, removePanelFromLayout, } from "./dashboard-layout.js";
+function panel(id, width = 1) {
+    return { id, width, kind: "chart" };
+}
+const options = { isSection: (item) => item.kind === "section" };
+describe("dashboard layout", () => {
+    it("groups a section and balances persisted widths per visible row", () => {
+        const panels = [
+            panel("a"),
+            { id: "section", kind: "section", columns: 3 },
+            panel("b"),
+            panel("c"),
+            panel("d"),
+        ];
+        const groups = buildDashboardPanelGroups(panels, 2, options);
+        expect(groups.map((group) => group.rows.map((row) => row.panels.map((item) => item.id)))).toEqual([[["a"]], [["b", "c", "d"]]]);
+        expect(groups[1].columns).toBe(3);
+    });
+    it("removes without backfilling a later row", () => {
+        const next = removePanelFromLayout(["a", "b", "c", "d", "e"].map((id) => panel(id)), "b", 3, options);
+        expect(next.map((item) => [item.id, item.width])).toEqual([
+            ["a", 2],
+            ["c", 1],
+            ["d", 2],
+            ["e", 1],
+        ]);
+    });
+    it("moves into a column slot and grows the target group as needed", () => {
+        const panels = ["a", "b", "c"].map((id) => panel(id));
+        const slot = {
+            type: "column",
+            groupKey: "intro",
+            rowIndex: 0,
+            columnIndex: 1,
+        };
+        const groups = buildDashboardPanelGroups(panels, 2, options);
+        expect(columnExpansionForDropSlot(groups, "c", slot)).toEqual({
+            columns: 3,
+            sectionPanelId: null,
+        });
+        const next = movePanelToDropSlot(panels, "c", slot, 2, options);
+        expect(next.map((item) => item.id)).toEqual(["a", "c", "b"]);
+        expect(next.map((item) => item.width)).toEqual([1, 1, 1]);
+    });
+    it("clamps malformed and out-of-range column counts", () => {
+        expect(clampDashboardColumns("4")).toBe(2);
+        expect(clampDashboardColumns(-3)).toBe(1);
+        expect(clampDashboardColumns(99)).toBe(6);
+    });
+});
+//# sourceMappingURL=dashboard-layout.spec.js.map

package/dist/dashboard/dashboard-layout.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-layout.spec.js","sourceRoot":"","sources":["../../src/dashboard/dashboard-layout.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE9C,OAAO,EACL,yBAAyB,EACzB,qBAAqB,EACrB,0BAA0B,EAC1B,mBAAmB,EACnB,qBAAqB,GAGtB,MAAM,uBAAuB,CAAC;AAI/B,SAAS,KAAK,CAAC,EAAU,EAAE,KAAK,GAAG,CAAC;IAClC,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACtC,CAAC;AAED,MAAM,OAAO,GAAG,EAAE,SAAS,EAAE,CAAC,IAAW,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;AAExE,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,gEAAgE,EAAE,GAAG,EAAE;QACxE,MAAM,MAAM,GAAY;YACtB,KAAK,CAAC,GAAG,CAAC;YACV,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE;YAC9C,KAAK,CAAC,GAAG,CAAC;YACV,KAAK,CAAC,GAAG,CAAC;YACV,KAAK,CAAC,GAAG,CAAC;SACX,CAAC;QACF,MAAM,MAAM,GAAG,yBAAyB,CAAC,MAAM,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC;QAE7D,MAAM,CACJ,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACnB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAC3D,CACF,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACxC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,GAAG,EAAE;QACjD,MAAM,IAAI,GAAG,qBAAqB,CAChC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAChD,GAAG,EACH,CAAC,EACD,OAAO,CACR,CAAC;QACF,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;YACxD,CAAC,GAAG,EAAE,CAAC,CAAC;YACR,CAAC,GAAG,EAAE,CAAC,CAAC;YACR,CAAC,GAAG,EAAE,CAAC,CAAC;YACR,CAAC,GAAG,EAAE,CAAC,CAAC;SACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+DAA+D,EAAE,GAAG,EAAE;QACvE,MAAM,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;QACtD,MAAM,IAAI,GAAsB;YAC9B,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,OAAO;YACjB,QAAQ,EAAE,CAAC;YACX,WAAW,EAAE,CAAC;SACf,CAAC;QACF,MAAM,MAAM,GAAG,yBAAyB,CAAC,MAAM,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC;QAC7D,MAAM,CAAC,0BAA0B,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;YAC5D,OAAO,EAAE,CAAC;YACV,cAAc,EAAE,IAAI;SACrB,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,mBAAmB,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC;QAChE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QAC7D,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,GAAG,EAAE;QACzD,MAAM,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAC3C,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAC1C,MAAM,CAAC,qBAAqB,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/dashboard/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./DataTable.js";
+export * from "./DateRangePicker.js";
+export * from "./GenericChartPanel.js";
+export * from "./MetricCard.js";
+export * from "./StatsCard.js";
+export * from "./dashboard-layout.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/dashboard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dashboard/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC"}

package/dist/dashboard/index.js

@@ -0,0 +1,7 @@
+export * from "./DataTable.js";
+export * from "./DateRangePicker.js";
+export * from "./GenericChartPanel.js";
+export * from "./MetricCard.js";
+export * from "./StatsCard.js";
+export * from "./dashboard-layout.js";
+//# sourceMappingURL=index.js.map

package/dist/dashboard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/dashboard/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC"}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./app-shell/index.js";
 export * from "./collab-ui/index.js";
+export * from "./dashboard/index.js";
 export * from "./hooks/index.js";
 export * from "./onboarding/index.js";
 export * from "./provider.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -1,5 +1,6 @@
 export * from "./app-shell/index.js";
 export * from "./collab-ui/index.js";
+export * from "./dashboard/index.js";
 export * from "./hooks/index.js";
 export * from "./onboarding/index.js";
 export * from "./provider.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC"}

package/dist/styles.css

@@ -19,3 +19,38 @@
  *     compiled `.js` next to it for consumers that only install `dist/`.
  */
 @source "./**/*.{js,ts,tsx}";
+
+.agent-realtime-voice-working::after {
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  content: "";
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .agent-realtime-voice-working::after {
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      transparent 36%,
+      hsl(var(--foreground) / 0.14) 50%,
+      transparent 64%,
+      transparent 100%
+    );
+    background-repeat: repeat;
+    background-size: 14rem 100%;
+    animation: agent-realtime-voice-shine 2.6s linear infinite;
+  }
+
+  @keyframes agent-realtime-voice-shine {
+    from {
+      background-position: 0 0;
+    }
+
+    to {
+      background-position: 14rem 0;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.8.3",
+  "version": "0.9.1",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -61,6 +61,20 @@
       "import": "./dist/collab-ui/*.js",
       "default": "./dist/collab-ui/*.js"
     },
+    "./dashboard": {
+      "types": "./dist/dashboard/index.d.ts",
+      "browser": "./dist/dashboard/index.js",
+      "development": "./dist/dashboard/index.js",
+      "import": "./dist/dashboard/index.js",
+      "default": "./dist/dashboard/index.js"
+    },
+    "./dashboard/*": {
+      "types": "./dist/dashboard/*.d.ts",
+      "browser": "./dist/dashboard/*.js",
+      "development": "./dist/dashboard/*.js",
+      "import": "./dist/dashboard/*.js",
+      "default": "./dist/dashboard/*.js"
+    },
     "./chat-history": {
       "types": "./dist/chat-history/index.d.ts",
       "browser": "./dist/chat-history/index.js",

package/src/chat-history/ChatHistoryRail.spec.tsx

@@ -0,0 +1,138 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { ChatHistoryItem } from "./ChatHistoryList.js";
+import { ChatHistoryRail } from "./ChatHistoryRail.js";
+
+const railLabels = {
+  newChat: "New chat",
+  showMore: "Show more chats",
+  showLess: "Show fewer chats",
+};
+
+function makeItems(count: number): ChatHistoryItem[] {
+  return Array.from({ length: count }, (_, index) => ({
+    id: `thread-${index + 1}`,
+    title: `Chat ${index + 1}`,
+  }));
+}
+
+describe("ChatHistoryRail", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("shows five recent chats before progressively disclosing up to fifteen", () => {
+    act(() => {
+      root.render(
+        <ChatHistoryRail
+          items={makeItems(20)}
+          onSelect={() => {}}
+          onNewChat={() => {}}
+          railLabels={railLabels}
+        />,
+      );
+    });
+
+    expect(container.querySelectorAll(".an-chat-history-row")).toHaveLength(5);
+    const disclosure = container.querySelector<HTMLButtonElement>(
+      ".an-chat-history-rail__disclosure",
+    );
+    expect(disclosure?.getAttribute("aria-label")).toBe("Show more chats");
+
+    act(() => disclosure?.click());
+    expect(container.querySelectorAll(".an-chat-history-row")).toHaveLength(15);
+    expect(disclosure?.getAttribute("aria-label")).toBe("Show fewer chats");
+
+    act(() => disclosure?.click());
+    expect(container.querySelectorAll(".an-chat-history-row")).toHaveLength(5);
+  });
+
+  it("keeps the disclosure to the right of new chat and calls its handler", () => {
+    const onNewChat = vi.fn();
+    act(() => {
+      root.render(
+        <ChatHistoryRail
+          items={makeItems(6)}
+          onSelect={() => {}}
+          onNewChat={onNewChat}
+          railLabels={railLabels}
+        />,
+      );
+    });
+
+    const disclosure = container.querySelector<HTMLButtonElement>(
+      ".an-chat-history-rail__disclosure",
+    );
+    const newChat = container.querySelector<HTMLButtonElement>(
+      ".an-chat-history-rail__new-chat",
+    );
+    expect(newChat?.textContent).toBe("New chat");
+    expect(newChat?.nextElementSibling).toBe(disclosure);
+    expect(newChat?.parentElement?.lastElementChild).toBe(disclosure);
+
+    act(() => newChat?.click());
+    expect(onNewChat).toHaveBeenCalledOnce();
+  });
+
+  it("lets new chat fill the footer when there are no more chats", () => {
+    act(() => {
+      root.render(
+        <ChatHistoryRail
+          items={makeItems(3)}
+          onSelect={() => {}}
+          onNewChat={() => {}}
+          railLabels={railLabels}
+        />,
+      );
+    });
+
+    expect(
+      container.querySelector(".an-chat-history-rail__disclosure"),
+    ).toBeNull();
+    expect(
+      container.querySelector(".an-chat-history-rail__new-chat"),
+    ).not.toBeNull();
+  });
+
+  it("preserves list actions for progressively disclosed rows", () => {
+    const onSelect = vi.fn();
+    act(() => {
+      root.render(
+        <ChatHistoryRail
+          items={makeItems(6)}
+          onSelect={onSelect}
+          onNewChat={() => {}}
+          railLabels={railLabels}
+        />,
+      );
+    });
+
+    act(() => {
+      container
+        .querySelector<HTMLButtonElement>(".an-chat-history-rail__disclosure")
+        ?.click();
+    });
+    const rows = container.querySelectorAll<HTMLButtonElement>(
+      ".an-chat-history-row__button",
+    );
+    act(() => rows[5]?.click());
+    expect(onSelect).toHaveBeenCalledWith("thread-6");
+  });
+});

package/src/chat-history/ChatHistoryRail.tsx

@@ -0,0 +1,89 @@
+import { IconDots, IconPlus } from "@tabler/icons-react";
+import { useEffect, useMemo, useState } from "react";
+
+import {
+  ChatHistoryList,
+  type ChatHistoryItem,
+  type ChatHistoryListProps,
+} from "./ChatHistoryList.js";
+
+export interface ChatHistoryRailLabels {
+  newChat: string;
+  showMore: string;
+  showLess: string;
+}
+
+export interface ChatHistoryRailProps extends Omit<
+  ChatHistoryListProps,
+  "footer" | "items" | "sections" | "variant"
+> {
+  items: ChatHistoryItem[];
+  onNewChat: () => void;
+  railLabels: ChatHistoryRailLabels;
+  previewCount?: number;
+  expandedCount?: number;
+}
+
+/**
+ * Compact recent-chat rail for app sidebars. Hosts own thread persistence,
+ * sorting, routing, and mutations; the rail only owns progressive disclosure.
+ */
+export function ChatHistoryRail({
+  items,
+  onNewChat,
+  railLabels,
+  previewCount = 5,
+  expandedCount = 15,
+  className,
+  emptyLabel,
+  ...listProps
+}: ChatHistoryRailProps) {
+  const [expanded, setExpanded] = useState(false);
+  const collapsedLimit = Math.max(1, previewCount);
+  const expandedLimit = Math.max(collapsedLimit, expandedCount);
+  const canExpand = items.length > collapsedLimit;
+  const visibleItems = useMemo(
+    () => items.slice(0, expanded ? expandedLimit : collapsedLimit),
+    [collapsedLimit, expanded, expandedLimit, items],
+  );
+
+  useEffect(() => {
+    if (!canExpand) setExpanded(false);
+  }, [canExpand]);
+
+  const footer = (
+    <div className="an-chat-history-rail__footer">
+      <button
+        type="button"
+        className="an-chat-history-rail__new-chat"
+        onClick={onNewChat}
+      >
+        <IconPlus size={13} strokeWidth={1.8} aria-hidden="true" />
+        <span>{railLabels.newChat}</span>
+      </button>
+      {canExpand && (
+        <button
+          type="button"
+          className="an-chat-history-rail__disclosure"
+          onClick={() => setExpanded((current) => !current)}
+          aria-expanded={expanded}
+          aria-label={expanded ? railLabels.showLess : railLabels.showMore}
+          title={expanded ? railLabels.showLess : railLabels.showMore}
+        >
+          <IconDots size={14} strokeWidth={1.8} aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  );
+
+  return (
+    <ChatHistoryList
+      {...listProps}
+      items={visibleItems}
+      footer={footer}
+      emptyLabel={emptyLabel ?? null}
+      variant="rail"
+      className={["an-chat-history-rail", className].filter(Boolean).join(" ")}
+    />
+  );
+}

package/src/chat-history/index.ts

@@ -5,3 +5,8 @@ export {
   type ChatHistoryListProps,
   type ChatHistorySection,
 } from "./ChatHistoryList.js";
+export {
+  ChatHistoryRail,
+  type ChatHistoryRailLabels,
+  type ChatHistoryRailProps,
+} from "./ChatHistoryRail.js";

package/src/chat-history.css

@@ -16,6 +16,7 @@
 .an-chat-history {
   display: flex;
   flex-direction: column;
+  min-width: 0;
   min-height: 0;
 }
 
@@ -49,6 +50,7 @@
 
 .an-chat-history__list {
   overflow-y: auto;
+  min-width: 0;
   padding: 4px 0;
   max-height: 16rem;
 }
@@ -59,6 +61,10 @@
   min-height: 0;
 }
 
+.an-chat-history-rail .an-chat-history__state:empty {
+  display: none;
+}
+
 .an-chat-history__state {
   padding: 16px 12px;
   text-align: center;
@@ -72,6 +78,55 @@
   color: hsl(38 92% 50%);
 }
 
+.an-chat-history-rail__footer {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  padding: 1px 4px 0;
+}
+
+.an-chat-history-rail__disclosure,
+.an-chat-history-rail__new-chat {
+  display: flex;
+  align-items: center;
+  border: 0;
+  border-radius: calc(var(--radius) - 2px);
+  background: transparent;
+  color: hsl(var(--muted-foreground) / 0.72);
+  cursor: pointer;
+}
+
+.an-chat-history-rail__disclosure:hover,
+.an-chat-history-rail__new-chat:hover {
+  background: hsl(var(--accent) / 0.5);
+  color: hsl(var(--accent-foreground));
+}
+
+.an-chat-history-rail__disclosure:focus-visible,
+.an-chat-history-rail__new-chat:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: -2px;
+}
+
+.an-chat-history-rail__disclosure {
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 30px;
+  min-height: 30px;
+}
+
+.an-chat-history-rail__new-chat {
+  flex: 1 1 auto;
+  gap: 8px;
+  min-width: 0;
+  min-height: 30px;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  text-align: start;
+}
+
 .an-chat-history__section-label {
   padding: 6px 12px 4px;
   font-size: 10px;
@@ -83,12 +138,14 @@
 .an-chat-history--rail .an-chat-history__section {
   display: grid;
   gap: 1px;
+  min-width: 0;
 }
 
 /* ── Row ──────────────────────────────────────────────────────────────── */
 
 .an-chat-history-row {
   position: relative;
+  min-width: 0;
 }
 
 .an-chat-history--rail .an-chat-history-row {
@@ -99,6 +156,7 @@
 .an-chat-history-row__button {
   display: block;
   width: 100%;
+  min-width: 0;
   padding: 8px 12px;
   border: 0;
   background: transparent;
@@ -141,6 +199,7 @@
   justify-content: space-between;
   gap: 8px;
   min-width: 0;
+  overflow: hidden;
 }
 
 .an-chat-history-row__title {