@marimo-team/islands 0.25.3-dev141 → 0.25.3-dev142

package/dist/{vennDiagram-4TSXK5OY-CF8pfaK3.js → vennDiagram-4TSXK5OY-DRu0vRjO.js}

@@ -3,7 +3,7 @@ import { t } from "./src-CA_m4ONl.js";
 import { n } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { $ as r, H as i, K as a, U as o, a as s, b as c, c as l, et as u, f as d, nt as f, tt as p, v as m, w as h, y as g } from "./chunk-DU6HZSFF-BwiyaNpg.js";
 import { t as _ } from "./rough.esm-CtV9AnV1.js";
-import { p as v } from "./mermaid-CiAXjLpA.js";
+import { p as v } from "./mermaid-ClwTt7OD.js";
 //#region ../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/transparentize.js
 var y = (e, t) => p(e, "a", -t), b = 1e-10;
 function x(e, t) {

package/dist/{wardleyDiagram-VM6X3IG4-dGPu39d-.js → wardleyDiagram-VM6X3IG4-DzbDxwDY.js}

@@ -2,7 +2,7 @@ import { i as e } from "./chunk-75Z2AOVW-D7gxIs2Q.js";
 import { n as t } from "./src-CA_m4ONl.js";
 import { n } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { D as r, H as i, K as a, U as o, a as s, b as c, c as l, v as u, w as d, x as f, y as p } from "./chunk-DU6HZSFF-BwiyaNpg.js";
-import { p as m } from "./mermaid-CiAXjLpA.js";
+import { p as m } from "./mermaid-ClwTt7OD.js";
 import { n as h } from "./mermaid-parser.core-DxuSfYwJ.js";
 import { t as g } from "./chunk-JWPE2WC7-DJvv1t8U.js";
 //#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/wardleyDiagram-VM6X3IG4.mjs

package/dist/{xychartDiagram-S5SC5T6Z-CP6-9q56.js → xychartDiagram-S5SC5T6Z-CLWj6ZFQ.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./linear-Cnaq3Tfb.js";
+import { t as e } from "./linear-DWERh7eI.js";
 import { n as t } from "./ordinal-c7efuCSS.js";
 import { t as n } from "./range-BAIvbVHp.js";
 import { q as r } from "./cubic-OaEBhQPK.js";
@@ -9,7 +9,7 @@ import { n as s } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { D as c, H as l, K as u, U as d, a as f, b as p, c as m, f as h, v as g, w as _, y as v, z as y } from "./chunk-DU6HZSFF-BwiyaNpg.js";
 import "./chunk-PWAF6VOD-CQw5qATZ.js";
 import { t as b } from "./chunk-GMAD6QVW-BhaJx0X3.js";
-import { p as x } from "./mermaid-CiAXjLpA.js";
+import { p as x } from "./mermaid-ClwTt7OD.js";
 //#region ../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/band.js
 function S() {
 	var e = t().unknown(void 0), r = e.domain, i = e.range, o = 0, s = 1, c, l, u = !1, d = 0, f = 0, p = .5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.25.3-dev141",
+  "version": "0.25.3-dev142",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -57,13 +57,14 @@
     "@marimo-team/codemirror-mcp": "^0.1.7",
     "@marimo-team/codemirror-sql": "^0.3.0",
     "@marimo-team/llm-info": "workspace:*",
+    "@marimo-team/client": "workspace:*",
     "@marimo-team/marimo-api": "workspace:*",
     "@marimo-team/react-slotz": "^0.2.0",
     "@marimo-team/smart-cells": "workspace:*",
     "@paralleldrive/cuid2": "^2.3.1",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "~1.3.2",
-    "@radix-ui/react-use-controllable-state": "~1.2.6",
+    "@radix-ui/react-use-controllable-state": "~1.3.0",
     "@replit/codemirror-vim": "^6.4.0",
     "@revealjs/react": "^0.2.2",
     "@streamdown/math": "^1.0.2",
@@ -120,7 +121,7 @@
     "path-to-regexp": "^8.4.2",
     "plotly.js": "^3.7.0",
     "pyodide": "314.0.0",
-    "radix-ui": "1.6.7",
+    "radix-ui": "1.8.1",
     "react-arborist": "^3.16.0",
     "react-aria": "3.52.1",
     "react-aria-components": "1.21.1",
@@ -152,6 +153,7 @@
     "typescript-memoize": "^1.1.1",
     "use-acp": "0.2.6",
     "use-resize-observer": "^9.1.0",
+    "vega": "6.2.0",
     "vega-lite": "6.4.3",
     "vega-loader": "^5.1.3",
     "vega-parser": "^7.1.3",
@@ -183,7 +185,8 @@
     "preview:islands": "cross-env VITE_MARIMO_VERSION='0.4.6' VITE_MARIMO_ISLANDS=true vite --config islands/vite.config.mts build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "sync-katex-css": "node --experimental-strip-types scripts/sync-katex-css.ts"
+    "sync-katex-css": "node --experimental-strip-types scripts/sync-katex-css.ts",
+    "doctor": "npx react-doctor@latest"
   },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
@@ -192,10 +195,10 @@
   "devDependencies": {
     "@codecov/vite-plugin": "^1.9.1",
     "@csstools/postcss-light-dark-function": "^2.0.11",
-    "@playwright/test": "^1.63.0",
-    "@storybook/addon-docs": "^10.6.0",
-    "@storybook/addon-links": "^10.6.0",
-    "@storybook/react-vite": "^10.6.0",
+    "@playwright/test": "^1.64.0",
+    "@storybook/addon-docs": "^10.6.2",
+    "@storybook/addon-links": "^10.6.2",
+    "@storybook/react-vite": "^10.6.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@types/dompurify": "^3.2.0",
@@ -205,7 +208,7 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@types/timestring": "^6.0.5",
-    "@vitejs/plugin-react": "^6.1.1",
+    "@vitejs/plugin-react": "^6.1.2",
     "@vitest/coverage-v8": "4.1.11",
     "blob-polyfill": "^7.0.20220408",
     "cross-env": "^7.0.3",
@@ -215,16 +218,16 @@
     "oxc-transform-react": "0.145.0",
     "oxfmt": "^0.68.0",
     "oxlint": "^1.83.0",
-    "postcss": "^8.5.28",
+    "postcss": "^8.5.29",
     "postcss-prefix-selector": "^2.2.1",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
-    "storybook": "^10.6.0",
+    "storybook": "^10.6.2",
     "stylelint": "^16.26.1",
     "stylelint-config-standard": "^36.0.1",
     "tailwindcss": "^4.3.3",
     "vega-typings": "^2.3.0",
-    "vite": "^8.3.0",
+    "vite": "^8.3.4",
     "vite-plugin-wasm": "^3.6.0",
     "vitest": "^4.1.11",
     "yaml": "^2.9.1"

package/src/__tests__/fixtures/{pair-preview.ts → pair-config.ts}

@@ -2,11 +2,12 @@
 
 import { readFileSync } from "node:fs";
 import path from "node:path";
-import { pairPreviewSchema } from "@/core/config/pair";
+import { pairConfigSchema } from "@/core/config/pair";
 
 // Read the Python-owned resource only in tests to check the shared contract.
-export const PAIR_PREVIEW = pairPreviewSchema.parse({
+export const PAIR_CONFIG = pairConfigSchema.parse({
   command: "uvx marimo@latest",
+  hostEnabled: true,
   templates: JSON.parse(
     readFileSync(
       path.resolve(

package/src/__tests__/host-imports.test.ts

@@ -0,0 +1,101 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import NodeChildProcess from "node:child_process";
+import NodeFs from "node:fs";
+import NodeOs from "node:os";
+import NodePath from "node:path";
+import NodeUrl from "node:url";
+import { expect, it } from "vitest";
+import { z } from "zod";
+
+it("enforces host dependencies for runtime and type imports", () => {
+  const frontend = NodeUrl.fileURLToPath(
+    new NodeUrl.URL("../../", import.meta.url),
+  );
+  const directory = NodeFs.mkdtempSync(
+    NodePath.join(NodeOs.tmpdir(), "host-imports-"),
+  );
+  const files = {
+    "src/core/host/allowed.ts": `
+      import { atom } from "jotai/vanilla";
+      import { z } from "zod";
+      import * as Protocol from "@marimo-team/client/protocol";
+      import { Logger } from "@/utils/Logger";
+      import type { Document } from "./document";
+      export * from "@/core/host/events";
+      type Event = import("./events").NotebookEvent;
+      void import("./protocol");
+    `,
+    "src/core/host/protocol.ts": `
+      import type { NotificationMessage as A } from "../kernel/messages";
+      import { type NotificationMessage as B } from "@/core/kernel/messages";
+      import { NotificationMessage as C } from "../kernel/messages";
+      import type { NotificationPayload } from "../kernel/messages";
+    `,
+    "src/core/host/forbidden.ts": `
+      import { useEffect } from "react";
+      import type { NotificationMessage } from "../kernel/messages";
+      export * from "../kernel/messages";
+      export { Logger } from "@/utils/Logger/../other";
+      void import("../kernel/messages");
+      type Message = import("../kernel/messages").NotificationMessage;
+      const module = require("../kernel/messages");
+      void import(module);
+      import "./__tests__/allowed";
+      import "./allowed.test";
+    `,
+    "src/core/host/__tests__/allowed.ts": `import { useEffect } from "react";`,
+    "src/core/host/allowed.test.ts": `import { useEffect } from "react";`,
+    "src/core/host/allowed.spec.ts": `import { useEffect } from "react";`,
+    "src/core/websocket/allowed.ts": `import { useEffect } from "react";`,
+  };
+  try {
+    for (const [path, source] of Object.entries(files)) {
+      const destination = NodePath.join(directory, path);
+      NodeFs.mkdirSync(NodePath.dirname(destination), { recursive: true });
+      NodeFs.writeFileSync(destination, source);
+    }
+    const result = NodeChildProcess.spawnSync(
+      NodePath.join(frontend, "node_modules/.bin/oxlint"),
+      [
+        "--config",
+        NodePath.join(frontend, ".oxlintrc.json"),
+        "--format",
+        "json",
+        directory,
+      ],
+      { cwd: frontend, encoding: "utf8" },
+    );
+    const report = z
+      .object({
+        diagnostics: z.array(
+          z.object({
+            severity: z.string(),
+            filename: z.string(),
+            labels: z.array(z.object({ span: z.object({ line: z.number() }) })),
+          }),
+        ),
+      })
+      .parse(JSON.parse(result.stdout));
+    const errors = report.diagnostics.filter(
+      (diagnostic) => diagnostic.severity === "error",
+    );
+    expect(
+      errors
+        .map((error) => ({
+          file: NodePath.basename(error.filename),
+          line: error.labels[0].span.line,
+        }))
+        .toSorted((a, b) => a.file.localeCompare(b.file) || a.line - b.line),
+    ).toEqual([
+      ...[2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((line) => ({
+        file: "forbidden.ts",
+        line,
+      })),
+      ...[2, 3, 4, 5].map((line) => ({ file: "protocol.ts", line })),
+    ]);
+    expect(result.status).toBe(1);
+  } finally {
+    NodeFs.rmSync(directory, { recursive: true, force: true });
+  }
+});

package/src/__tests__/module-entry.test.ts

@@ -0,0 +1,32 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { expect, it } from "vitest";
+import { moduleEntry } from "../../lint/module-entry.js";
+
+/** Whether the rule reports importing `source` from `file`. */
+function reports(file: string, source: string): boolean {
+  let reported = false;
+  const visitors = moduleEntry.createOnce({
+    filename: `/repo/frontend/src/${file}`,
+    report: () => {
+      reported = true;
+    },
+  });
+  visitors.ImportDeclaration({ source: { value: source } });
+  return reported;
+}
+
+it.each([
+  ["core/websocket/state.ts", "@/core/host", false],
+  ["core/websocket/state.ts", "../host", false],
+  ["core/websocket/state.ts", "@/core/document", false],
+  ["core/host/replica.ts", "./resources/document", false],
+  ["core/host/replica.ts", "@/core/host/backend", false],
+  ["core/websocket/__tests__/a.test.ts", "../../host/replica", false],
+  ["core/websocket/fixtures.ts", "../host/__tests__/fixtures", false],
+  ["core/websocket/state.ts", "@/core/host/replica", true],
+  ["core/websocket/state.ts", "../host/resources/document", true],
+  ["core/websocket/state.ts", "../document/hooks", true],
+])("from %s, importing %s reports %s", (file, source, expected) => {
+  expect(reports(file, source)).toBe(expected);
+});

package/src/__tests__/mount.test.ts

@@ -8,8 +8,8 @@ import { connectionAtom } from "@/core/network/connection";
 import { store } from "@/core/state/jotai";
 import { isStaticNotebook } from "@/core/static/static-state";
 import { ConnectionState } from "@/core/websocket/types";
-import { pairPreviewAtom } from "@/core/config/pair";
-import { PAIR_PREVIEW } from "./fixtures/pair-preview";
+import { pairConfigAtom } from "@/core/config/pair";
+import { PAIR_CONFIG } from "./fixtures/pair-config";
 import { mount, visibleForTesting } from "../mount";
 
 // Mock React DOM
@@ -84,20 +84,20 @@ describe("mount", () => {
       mockElement,
     );
 
-  it("hydrates the server's Pair preview configuration", () => {
-    const error = mountRead({ pairPreview: PAIR_PREVIEW });
+  it("hydrates the server's Pair configuration", () => {
+    const error = mountRead({ pairConfig: PAIR_CONFIG });
 
     expect(error).toBeUndefined();
-    expect(store.get(pairPreviewAtom)).toEqual(PAIR_PREVIEW);
+    expect(store.get(pairConfigAtom)).toEqual(PAIR_CONFIG);
   });
 
-  it("uses legacy Pair behavior when the host omits preview configuration", () => {
-    store.set(pairPreviewAtom, PAIR_PREVIEW);
+  it("clears Pair configuration when the server omits it", () => {
+    store.set(pairConfigAtom, PAIR_CONFIG);
 
     const error = mountRead();
 
     expect(error).toBeUndefined();
-    expect(store.get(pairPreviewAtom)).toBeUndefined();
+    expect(store.get(pairConfigAtom)).toBeUndefined();
   });
 
   describe("connection state initialization", () => {

package/src/components/ai/__tests__/ai-model-dropdown.test.tsx

@@ -0,0 +1,63 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { getKnownModelMaps } from "@/core/ai/model-registry";
+import { AIModelDropdown } from "../ai-model-dropdown";
+import * as aiUtils from "../ai-utils";
+
+vi.mock("@/core/ai/config", () => ({
+  useAIConfigActions: () => ({ saveModelChange: vi.fn() }),
+}));
+vi.mock("@/components/app-config/state", () => ({
+  useOpenSettingsToTab: () => ({ handleClick: vi.fn() }),
+}));
+
+it.each(["Enter", " "])(
+  "selects a model with %j while ArrowRight retains information access",
+  async (key) => {
+    const knownModel = [...getKnownModelMaps().modelMap.values()].find(
+      (model) => model.provider === "openai",
+    );
+    if (!knownModel) {
+      throw new Error("Expected a known OpenAI model");
+    }
+    const model = { ...knownModel, capabilities: [] };
+    vi.spyOn(aiUtils, "listModelsForAiSettings").mockReturnValue([
+      [model.provider, [model]],
+    ]);
+    const onSelect = vi.fn();
+    render(
+      <Provider store={createStore()}>
+        <TooltipProvider>
+          <AIModelDropdown
+            forRole="chat"
+            placeholder="Choose model"
+            onSelect={onSelect}
+          />
+        </TooltipProvider>
+      </Provider>,
+    );
+    fireEvent.keyDown(screen.getByRole("button", { name: "Choose model" }), {
+      key: "ArrowDown",
+    });
+    fireEvent.keyDown(
+      await screen.findByRole("menuitem", { name: /OpenAI$/ }),
+      { key: "ArrowRight" },
+    );
+    const option = await screen.findByRole("menuitem", {
+      name: (name) => name.endsWith(model.name),
+    });
+    fireEvent.keyDown(option, { key: "ArrowRight" });
+    expect(
+      await screen.findByRole("heading", { name: model.name }),
+    ).toBeInTheDocument();
+    expect(onSelect).not.toHaveBeenCalled();
+    fireEvent.keyDown(option, { key });
+    expect(onSelect).toHaveBeenCalledExactlyOnceWith(
+      `${model.provider}/${model.model}`,
+    );
+  },
+);

package/src/components/ai/ai-model-dropdown.tsx

@@ -276,13 +276,18 @@ const ProviderDropdownContent = ({
             const qualifiedModelId: QualifiedModelId = `${provider}/${model.model}`;
             return (
               <DropdownMenuSub key={qualifiedModelId}>
-                <DropdownMenuSubTrigger showChevron={false} className="py-2">
-                  <div
-                    className="flex items-center gap-2 w-full cursor-pointer"
-                    onClick={() => {
+                <DropdownMenuSubTrigger
+                  showChevron={false}
+                  className="py-2"
+                  onClick={() => onSelect(qualifiedModelId)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
                       onSelect(qualifiedModelId);
-                    }}
-                  >
+                    }
+                  }}
+                >
+                  <div className="flex items-center gap-2 w-full cursor-pointer">
                     <AiModelDropdownItem model={model} provider={provider} />
                   </div>
                 </DropdownMenuSubTrigger>

package/src/components/app-config/ai-config.tsx

@@ -48,6 +48,7 @@ import { DEFAULT_AI_MODEL, type UserConfig } from "@/core/config/config-schema";
 import { isWasm } from "@/core/wasm/utils";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
+import { Objects } from "@/utils/objects";
 import { Strings } from "@/utils/strings";
 import { AIModelDropdown, getProviderLabel } from "../ai/ai-model-dropdown";
 import {
@@ -501,6 +502,7 @@ const ModelListItem: React.FC<ModelListItemProps> = ({
           <ModelInfoCard model={model} />
           {model.custom && (
             <Button
+              aria-label={`Delete model ${model.name}`}
               variant="ghost"
               size="icon"
               onClick={handleDelete}
@@ -681,7 +683,10 @@ export const CustomProvidersConfig: React.FC<AiConfigProps> = ({
         };
 
         const removeProvider = (providerName: string) => {
-          const { [providerName]: _, ...rest } = customProviders;
+          const rest = Objects.filter(
+            customProviders,
+            (_, name) => name !== providerName,
+          );
           // Reset to clear nested dirty state, then set new value
           form.resetField("ai.custom_providers");
           form.setValue("ai.custom_providers", rest, { shouldDirty: true });
@@ -1846,7 +1851,7 @@ export const AddModelForm: React.FC<{
         id={modelNameInputId}
         value={modelName}
         onChange={(e) => setModelName(e.target.value)}
-        placeholder="gpt-4"
+        placeholder="gpt-5.6-sol"
         className="text-xs mb-0"
       />
     </div>

package/src/components/chat/__tests__/message-queue.test.tsx

@@ -77,6 +77,23 @@ describe("useMessageQueue", () => {
     expect(result.current.messages).toEqual([]);
   });
 
+  it("preserves multiple enqueues and flushes before React renders", () => {
+    const { result } = renderHook(() => useMessageQueue());
+    const send = vi.fn();
+
+    act(() => {
+      result.current.enqueue([textPart("first")]);
+      result.current.enqueue([textPart("second")]);
+      result.current.flushNext(send);
+      result.current.flushNext(send);
+    });
+
+    expect(send).toHaveBeenNthCalledWith(1, [textPart("first")]);
+    expect(send).toHaveBeenNthCalledWith(2, [textPart("second")]);
+    expect(result.current.messages).toEqual([]);
+    expect(result.current.hasQueuedRef.current).toBe(false);
+  });
+
   it("flushNext on an empty queue is a no-op", () => {
     const { result } = renderHook(() => useMessageQueue());
     const send = vi.fn();

package/src/components/chat/acp/__tests__/session-tabs.test.tsx

@@ -0,0 +1,43 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { expect, it, vi } from "vitest";
+import { SessionTabs } from "../session-tabs";
+import { addSession, agentSessionStateAtom } from "../state";
+
+vi.mock("../agent-selector", () => ({ AgentSelector: () => null }));
+
+it("keeps session selection and close as separate named buttons", () => {
+  const first = addSession(
+    { sessions: [], activeTabId: null },
+    { agentId: "claude", firstMessage: "First" },
+  ).sessions[0];
+  const second = addSession(
+    { sessions: [], activeTabId: null },
+    { agentId: "codex", firstMessage: "Second" },
+  ).sessions[0];
+  const store = createStore();
+  store.set(agentSessionStateAtom, {
+    sessions: [first, second],
+    activeTabId: first.tabId,
+  });
+  render(
+    <Provider store={store}>
+      <SessionTabs />
+    </Provider>,
+  );
+  const select = screen.getByRole("button", {
+    name: /Second$/,
+    pressed: false,
+  });
+  select.focus();
+  expect(select).toHaveFocus();
+  fireEvent.click(select);
+  expect(select).toHaveAttribute("aria-pressed", "true");
+  fireEvent.click(screen.getByRole("button", { name: "Close First" }));
+  expect(store.get(agentSessionStateAtom).activeTabId).toBe(second.tabId);
+  expect(
+    store.get(agentSessionStateAtom).sessions.map((session) => session.title),
+  ).toEqual(["Second"]);
+});

package/src/components/chat/acp/__tests__/state.test.ts

@@ -74,7 +74,7 @@ describe("state utility functions", () => {
       const newState = addSession(initialState, session);
 
       // Remove the dynamic tabId for snapshot comparison
-      const { tabId, ...sessionWithoutId } = newState.sessions[0];
+      const { tabId: _tabId, ...sessionWithoutId } = newState.sessions[0];
       expect({
         ...newState,
         sessions: [sessionWithoutId],
@@ -116,7 +116,7 @@ describe("state utility functions", () => {
       const newState = addSession(initialState, newSession);
 
       // Remove dynamic tabId for snapshot
-      const { tabId, ...sessionWithoutId } = newState.sessions[0];
+      const { tabId: _tabId, ...sessionWithoutId } = newState.sessions[0];
       expect({
         ...newState,
         sessions: [sessionWithoutId],

package/src/components/chat/acp/blocks.tsx

@@ -328,15 +328,16 @@ export const PlansBlock = (props: { data: PlanNotificationEvent[] }) => {
         </span>
       </div>
       <ul className="flex flex-col gap-1">
-        {plans.map((item, index) => (
+        {plans.map((item) => (
           <li
-            key={`${item.status}-${index}`}
+            key={item.content}
             className={`
               flex items-center gap-2 px-2 py-1 rounded
             `}
           >
             <input
               type="checkbox"
+              aria-label={item.content}
               checked={item.status === "completed"}
               readOnly={true}
               className="accent-primary h-4 w-4 rounded border border-muted-foreground/30"

package/src/components/chat/acp/session-tabs.tsx

@@ -32,17 +32,22 @@ const SessionTab: React.FC<SessionTabProps> = memo(
           "flex items-center gap-1 px-2 py-1 text-xs border-r border-border bg-muted/30 hover:bg-muted/50 cursor-pointer min-w-0",
           isActive && "bg-background border-b-0 relative z-1",
         )}
-        onClick={() => onSelect(session.tabId)}
       >
-        <div className="flex items-center gap-1 min-w-0 flex-1">
+        <button
+          type="button"
+          aria-pressed={isActive}
+          onClick={() => onSelect(session.tabId)}
+          className="flex items-center gap-1 min-w-0 flex-1 text-left focus-visible:outline focus-visible:outline-ring"
+        >
           <span className="text-muted-foreground text-[10px] font-medium">
             <AiProviderIcon provider={session.agentId} className="h-3 w-3" />
           </span>
           <span className="truncate" title={session.title}>
             {session.title}
           </span>
-        </div>
+        </button>
         <Button
+          aria-label={`Close ${session.title}`}
           variant="ghost"
           size="sm"
           className="h-4 w-4 p-0 hover:bg-destructive/20 hover:text-destructive shrink-0"

package/src/components/chat/chat-components.tsx

@@ -124,6 +124,7 @@ export const AddContextButton = ({
   return (
     <Tooltip content="Add context">
       <Button
+        aria-label="Add context"
         variant="text"
         size="icon"
         onClick={handleAddContext}
@@ -148,6 +149,7 @@ export const AttachFileButton = ({
     <>
       <Tooltip content="Attach a file">
         <Button
+          aria-label="Attach a file"
           variant="text"
           size="icon"
           onClick={() => fileInputRef.current?.click()}

package/src/components/chat/chat-panel.tsx

@@ -166,7 +166,12 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   return (
     <div className="flex border-b px-2 py-1 justify-between shrink-0 items-center">
       <Tooltip content="New chat">
-        <Button variant="text" size="icon" onClick={onNewChat}>
+        <Button
+          aria-label="New chat"
+          variant="text"
+          size="icon"
+          onClick={onNewChat}
+        >
           <PlusIcon className="h-4 w-4" />
         </Button>
       </Tooltip>
@@ -716,14 +721,10 @@ const ChatPanelBody = () => {
   );
 
   const isLoading = status === "submitted" || status === "streaming";
-  // Read via a ref so the queue-vs-send decision stays correct even when it is
-  // made after an `await` (e.g. resolving @-context), by which point the render
-  // closure's `isLoading` may be stale.
-  const isLoadingRef = useRef(isLoading);
-  isLoadingRef.current = isLoading;
-
+  // useEvent reads the latest loading state, even when called after an await
+  // (e.g. resolving @-context) that outlives the original render's closure.
   const submitOrQueue = useEvent((parts: ChatMessagePart[]) => {
-    if (isLoadingRef.current || hasQueuedRef.current) {
+    if (isLoading || hasQueuedRef.current) {
       enqueueUserMessage(parts);
     } else {
       sendUserMessage(parts);

package/src/components/chat/chat-utils.ts

@@ -294,16 +294,12 @@ export function useMessageQueue() {
   // invoked from a callback (e.g. `onFinish`) in the same tick as `enqueue`.
   const messagesRef = useRef<QueuedUserMessage[]>([]);
   const hasQueuedRef = useRef(false);
-  messagesRef.current = messages;
-  hasQueuedRef.current = messages.length > 0;
 
   const enqueue = useEvent((parts: ChatMessagePart[]) => {
-    setMessages((prev) => {
-      const next = [...prev, { id: generateUUID(), parts }];
-      messagesRef.current = next;
-      hasQueuedRef.current = true;
-      return next;
-    });
+    const next = [...messagesRef.current, { id: generateUUID(), parts }];
+    messagesRef.current = next;
+    hasQueuedRef.current = true;
+    setMessages(next);
   });
 
   const flushNext = useEvent((send: (parts: ChatMessagePart[]) => void) => {