@tangle-network/ui 11.9.0 → 11.11.0

package/dist/use-sse-stream-Dm6R5YWz.d.ts

@@ -0,0 +1,282 @@
+import { t as SessionMessage } from "./message-vhUI0c5G.js";
+import { n as SessionPart } from "./parts-5mhy9yJ3.js";
+import { a as Run, n as GroupedMessage } from "./run-OyWmIDqu.js";
+import { t as FeedSegment } from "./tool-call-feed-BeB1_4pX.js";
+import { c as ActiveSessionTransportMode, i as ActiveSessionConnectionState, u as RegisterActiveSessionOptions } from "./active-sessions-store-nl70ZnMC.js";
+import { RefObject } from "react";
+//#region src/hooks/use-auto-scroll.d.ts
+/**
+ * Scroll-to-bottom behaviour: sticks to the bottom while streaming,
+ * pauses when user scrolls up, resumes when user scrolls back down.
+ */
+declare function useAutoScroll(containerRef: RefObject<HTMLElement | null>, deps?: unknown[]): {
+  isAtBottom: boolean;
+  scrollToBottom: () => void;
+};
+//#endregion
+//#region src/hooks/use-dropdown-menu.d.ts
+interface UseDropdownMenuOptions {
+  closeOnEsc?: boolean;
+}
+declare function useDropdownMenu(options?: UseDropdownMenuOptions): {
+  open: boolean;
+  setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+  ref: import("react").RefObject<HTMLDivElement | null>;
+  toggle: () => void;
+  close: () => void;
+};
+//#endregion
+//#region src/hooks/use-run-collapse-state.d.ts
+/**
+ * Manages per-run collapse state with auto-collapse after run completion.
+ *
+ * - Runs stay expanded by default
+ * - Collapse is manual only
+ */
+declare function useRunCollapseState(runs: Run[]): {
+  isCollapsed: (runId: string) => boolean;
+  toggleCollapse: (runId: string) => void;
+};
+//#endregion
+//#region src/hooks/use-run-groups.d.ts
+interface UseRunGroupsOptions {
+  messages: SessionMessage[];
+  partMap: Record<string, SessionPart[]>;
+  isStreaming: boolean;
+}
+declare function useRunGroups({ messages, partMap, isStreaming }: UseRunGroupsOptions): GroupedMessage[];
+//#endregion
+//#region src/hooks/use-tool-call-stream.d.ts
+interface UseToolCallStreamReturn {
+  /** Current feed segments (text + tool calls interleaved) */
+  segments: FeedSegment[];
+  /** Push a raw SSE event into the stream */
+  pushEvent: (event: {
+    type: string;
+    data: Record<string, unknown>;
+  }) => void;
+  /** Push a text delta (from message.part.updated) */
+  pushText: (delta: string) => void;
+  /** Mark a tool call as complete */
+  completeToolCall: (id: string, result: {
+    output?: string;
+    error?: string;
+    duration?: number;
+  }) => void;
+  /** Reset the stream */
+  reset: () => void;
+}
+declare function useToolCallStream(): UseToolCallStreamReturn;
+//#endregion
+//#region src/hooks/use-sdk-session.d.ts
+interface SdkSessionAttachment {
+  name: string;
+  size?: number;
+}
+interface SdkSessionSeed {
+  id: string;
+  role: SessionMessage["role"];
+  createdAt?: number | string | Date;
+  content?: string;
+  attachments?: SdkSessionAttachment[];
+  parts?: SessionPart[];
+}
+interface SdkSessionEvent {
+  type: string;
+  data?: Record<string, unknown>;
+}
+interface BeginAssistantMessageOptions {
+  id?: string;
+  role?: Extract<SessionMessage["role"], "assistant" | "system">;
+  createdAt?: number | string | Date;
+}
+interface AppendUserMessageOptions {
+  id?: string;
+  role?: Extract<SessionMessage["role"], "user" | "system">;
+  content: string;
+  createdAt?: number | string | Date;
+  attachments?: SdkSessionAttachment[];
+}
+interface CompleteAssistantMessageOptions {
+  messageId?: string;
+  finalText?: string;
+}
+interface ApplySdkEventOptions {
+  messageId?: string;
+}
+interface UseSdkSessionOptions {
+  initialMessages?: SdkSessionSeed[];
+}
+interface UseSdkSessionReturn {
+  messages: SessionMessage[];
+  partMap: Record<string, SessionPart[]>;
+  isStreaming: boolean;
+  activeAssistantMessageId: string | null;
+  replaceHistory: (messages: SdkSessionSeed[]) => void;
+  appendUserMessage: (message: AppendUserMessageOptions) => string;
+  beginAssistantMessage: (options?: BeginAssistantMessageOptions) => string;
+  applySdkEvent: (event: SdkSessionEvent, options?: ApplySdkEventOptions) => void;
+  completeAssistantMessage: (options?: CompleteAssistantMessageOptions) => void;
+  failAssistantMessage: (error: string, options?: {
+    messageId?: string;
+  }) => void;
+  setStreaming: (value: boolean) => void;
+  reset: () => void;
+}
+declare function useSdkSession({ initialMessages }?: UseSdkSessionOptions): UseSdkSessionReturn;
+//#endregion
+//#region src/hooks/use-realtime-session.d.ts
+interface RealtimeSessionOptions extends RegisterActiveSessionOptions {
+  connectUrl?: string | null;
+  enabled?: boolean;
+  foreground?: boolean;
+  keepRegistered?: boolean;
+  reconnect?: boolean;
+  reconnectIntervalMs?: number;
+  maxReconnectAttempts?: number;
+  transportMode?: ActiveSessionTransportMode;
+  onEvent?: (event: SdkSessionEvent) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onError?: (error: Error) => void;
+}
+interface RealtimeSessionState {
+  connectionState: ActiveSessionConnectionState;
+  lastError: string | null;
+  reconnectAttempts: number;
+  isConnected: boolean;
+}
+interface RealtimeSessionTarget extends RealtimeSessionOptions {
+  key?: string;
+}
+interface RealtimeSessionRegistryProps {
+  sessions: RealtimeSessionTarget[];
+}
+declare function useRealtimeSession({ sessionId, projectId, projectLabel, title, href, metadata, connectUrl, enabled, foreground, keepRegistered, reconnect, reconnectIntervalMs, maxReconnectAttempts, transportMode, onEvent, onOpen, onClose, onError }: RealtimeSessionOptions): RealtimeSessionState;
+declare function RealtimeSessionRegistry({ sessions }: RealtimeSessionRegistryProps): import("react").FunctionComponentElement<RealtimeSessionTarget>[];
+//#endregion
+//#region src/hooks/use-sse-stream.d.ts
+/**
+ * SSE Event data structure
+ */
+interface SSEEvent<T = unknown> {
+  id?: string;
+  event: string;
+  data: T;
+  timestamp: number;
+}
+/**
+ * Connection state for SSE streams
+ */
+type ConnectionState = "connecting" | "connected" | "reconnecting" | "disconnected" | "error";
+/**
+ * SSE stream options
+ */
+interface UseSSEStreamOptions<T = unknown> {
+  /** URL to connect to */
+  url: string;
+  /** Authorization header value */
+  authToken?: string;
+  /** Enable automatic reconnection (default: true) */
+  autoReconnect?: boolean;
+  /** Max reconnection attempts (default: 5) */
+  maxRetries?: number;
+  /** Base delay between reconnects in ms (default: 1000) */
+  reconnectDelay?: number;
+  /** Event types to listen for (default: all) */
+  eventTypes?: string[];
+  /** Callback for each event */
+  onEvent?: (event: SSEEvent<T>) => void;
+  /** Callback on connection state change */
+  onStateChange?: (state: ConnectionState) => void;
+  /** Callback on error */
+  onError?: (error: Error) => void;
+  /** Custom headers */
+  headers?: Record<string, string>;
+  /** Whether to start connected (default: true) */
+  enabled?: boolean;
+}
+/**
+ * SSE stream result
+ */
+interface UseSSEStreamResult<T = unknown> {
+  /** Current connection state */
+  state: ConnectionState;
+  /** All received events */
+  events: SSEEvent<T>[];
+  /** Most recent event */
+  lastEvent: SSEEvent<T> | null;
+  /** Error if any */
+  error: Error | null;
+  /** Manually connect */
+  connect: () => void;
+  /** Manually disconnect */
+  disconnect: () => void;
+  /** Clear events buffer */
+  clearEvents: () => void;
+  /** Retry count */
+  retryCount: number;
+  /** Time since last event (ms) */
+  timeSinceLastEvent: number;
+}
+/**
+ * React hook for consuming SSE streams with automatic reconnection,
+ * event buffering, and state management.
+ *
+ * @example
+ * ```tsx
+ * const { events, state, lastEvent } = useSSEStream({
+ *   url: '/api/v1/tasks/123/stream',
+ *   authToken: 'Bearer xxx',
+ *   onEvent: (e) => console.log('Event:', e),
+ * });
+ *
+ * return (
+ *   <div>
+ *     <p>Status: {state}</p>
+ *     {events.map((e, i) => (
+ *       <div key={i}>{e.event}: {JSON.stringify(e.data)}</div>
+ *     ))}
+ *   </div>
+ * );
+ * ```
+ */
+declare function useSSEStream<T = unknown>(options: UseSSEStreamOptions<T>): UseSSEStreamResult<T>;
+/**
+ * Typed event types for common streaming scenarios
+ */
+interface TaskStreamEvent {
+  task_id: string;
+  status?: string;
+  progress?: number;
+  message?: string;
+  result?: unknown;
+  error?: string;
+}
+interface AgentStreamEvent {
+  type: "message.updated" | "tool_call" | "tool_result" | "llm_response" | "error" | "session.idle" | "execution.started" | "execution.result";
+  data: unknown;
+  timestamp?: number;
+}
+interface TerminalStreamEvent {
+  type: "output" | "input" | "error" | "exit";
+  data: string;
+  timestamp: number;
+}
+interface AutomationStreamEvent {
+  automation_id: string;
+  event_id?: string;
+  status?: string;
+  variant_id?: string;
+  output?: string;
+  action_result?: unknown;
+  error?: string;
+}
+interface BotStreamEvent {
+  bot_id: string;
+  type: "balance" | "trade" | "decision" | "log" | "error";
+  data: unknown;
+  timestamp: number;
+}
+//#endregion
+export { useRunGroups as A, SdkSessionSeed as C, UseToolCallStreamReturn as D, useSdkSession as E, useDropdownMenu as M, useAutoScroll as N, useToolCallStream as O, SdkSessionEvent as S, UseSdkSessionReturn as T, AppendUserMessageOptions as _, SSEEvent as a, CompleteAssistantMessageOptions as b, UseSSEStreamOptions as c, RealtimeSessionOptions as d, RealtimeSessionRegistry as f, useRealtimeSession as g, RealtimeSessionTarget as h, ConnectionState as i, useRunCollapseState as j, UseRunGroupsOptions as k, UseSSEStreamResult as l, RealtimeSessionState as m, AutomationStreamEvent as n, TaskStreamEvent as o, RealtimeSessionRegistryProps as p, BotStreamEvent as r, TerminalStreamEvent as s, AgentStreamEvent as t, useSSEStream as u, ApplySdkEventOptions as v, UseSdkSessionOptions as w, SdkSessionAttachment as x, BeginAssistantMessageOptions as y };

package/dist/utils-Bl_CZ0Qp.js

@@ -0,0 +1,37 @@
+//#region src/utils/copy-text.ts
+/**
+* Copy text to clipboard with a non-secure-context fallback.
+* Returns true if a copy strategy likely succeeded.
+*/
+async function copyText(text) {
+	if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {}
+	if (typeof document === "undefined") return false;
+	try {
+		const textarea = document.createElement("textarea");
+		textarea.value = text;
+		textarea.style.position = "fixed";
+		textarea.style.opacity = "0";
+		document.body.appendChild(textarea);
+		textarea.select();
+		const copied = document.execCommand("copy");
+		document.body.removeChild(textarea);
+		return copied;
+	} catch {
+		return false;
+	}
+}
+//#endregion
+//#region src/utils/time-ago.ts
+function timeAgo(ts) {
+	const secs = Math.floor((Date.now() - ts) / 1e3);
+	if (secs < 5) return "just now";
+	if (secs < 60) return `${secs}s ago`;
+	const mins = Math.floor(secs / 60);
+	if (mins < 60) return `${mins}m ago`;
+	return `${Math.floor(mins / 60)}h ago`;
+}
+//#endregion
+export { copyText as n, timeAgo as t };

package/dist/{chunk-RQHJBTEU.js → utils-C_uf36nf.js}

@@ -1,10 +1,8 @@
-// src/lib/utils.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
+//#region src/lib/utils.ts
 function cn(...inputs) {
-  return twMerge(clsx(inputs));
+	return twMerge(clsx(inputs));
 }
-
-export {
-  cn
-};
+//#endregion
+export { cn as t };

package/dist/utils.d.ts

@@ -1,51 +1,2 @@
-import { a as ToolPart } from './parts-dj7AcUg0.js';
-import { T as ToolDisplayMetadata } from './tool-display-z4JcDmMQ.js';
-import { T as ToolCategory } from './run-PfLmDAox.js';
-import { ClassValue } from 'clsx';
-import 'react';
-import './message-BHWbxBtT.js';
-
-/**
- * Copy text to clipboard with a non-secure-context fallback.
- * Returns true if a copy strategy likely succeeded.
- */
-declare function copyText(text: string): Promise<boolean>;
-
-/** Format a duration in milliseconds to a human-readable string. */
-declare function formatDuration(ms: number): string;
-/** Truncate text to `max` characters, appending "..." if truncated. */
-declare function truncateText(text: string, max: number): string;
-/**
- * Format an uptime duration in milliseconds with progressive
- * granularity, so short-lived sandboxes don't render as "0d 0h".
- *  - < 60s        → "Ns"
- *  - < 60m        → "Nm Ss"
- *  - < 24h        → "Nh Mm"
- *  - otherwise    → "Nd Hh"
- */
-declare function formatUptime(ms: number): string;
-/**
- * Format a byte count using binary units (KiB/MiB/GiB, surfaced as
- * "KB/MB/GB" for readability). KB and MB use one decimal below 10 and
- * round above; GB keeps two decimals below 10 so half-GB changes stay
- * visible on memory dashboards, and drops to one decimal above.
- */
-declare function formatBytes(bytes: number): string;
-
-declare function timeAgo(ts: number): string;
-
-declare const TOOL_CATEGORY_ICONS: Record<ToolCategory, string>;
-declare function getToolCategory(toolName: string): ToolCategory;
-/**
- * Title is the bare verb ("Read", "Edit", "Shell"); the path, command, pattern
- * or query lives in `description` only, so a row prints its subject once.
- * `targetPath` / `commandSnippet` carry the untruncated value for consumers
- * that need it (diff headers, expanded detail).
- */
-declare function getToolDisplayMetadata(part: ToolPart): ToolDisplayMetadata;
-/** Extract error text from a tool part, if any. */
-declare function getToolErrorText(part: ToolPart, fallback?: string): string | undefined;
-
-declare function cn(...inputs: ClassValue[]): string;
-
-export { TOOL_CATEGORY_ICONS, cn, copyText, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText };
+import { a as focusRingInset, c as getToolCategory, d as timeAgo, f as formatBytes, g as copyText, h as truncateText, i as focusRing, l as getToolDisplayMetadata, m as formatUptime, n as focusFieldInvalid, o as cn, p as formatDuration, r as focusFieldWithin, s as TOOL_CATEGORY_ICONS, t as focusField, u as getToolErrorText } from "./index-b56ew9aF.js";
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText };

package/dist/utils.js

@@ -1,32 +1,6 @@
-import {
-  copyText,
-  timeAgo
-} from "./chunk-XGKULLYE.js";
-import {
-  TOOL_CATEGORY_ICONS,
-  getToolCategory,
-  getToolDisplayMetadata,
-  getToolErrorText
-} from "./chunk-ND3ZFXQK.js";
-import {
-  formatBytes,
-  formatDuration,
-  formatUptime,
-  truncateText
-} from "./chunk-4CLN43XT.js";
-import {
-  cn
-} from "./chunk-RQHJBTEU.js";
-export {
-  TOOL_CATEGORY_ICONS,
-  cn,
-  copyText,
-  formatBytes,
-  formatDuration,
-  formatUptime,
-  getToolCategory,
-  getToolDisplayMetadata,
-  getToolErrorText,
-  timeAgo,
-  truncateText
-};
+import { a as focusRingInset, i as focusRing, n as focusFieldInvalid, r as focusFieldWithin, t as focusField } from "./focus-Cw02pNSr.js";
+import { t as cn } from "./utils-C_uf36nf.js";
+import { i as getToolErrorText, n as getToolCategory, r as getToolDisplayMetadata, t as TOOL_CATEGORY_ICONS } from "./tool-display-BAuAVa43.js";
+import { i as truncateText, n as formatDuration, r as formatUptime, t as formatBytes } from "./format-DfcLWqMa.js";
+import { n as copyText, t as timeAgo } from "./utils-Bl_CZ0Qp.js";
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.9.0",
+  "version": "11.11.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -109,34 +109,32 @@
     }
   },
   "dependencies": {
-    "@pierre/trees": "1.0.0-beta.3",
-    "@radix-ui/react-avatar": "^1.1.0",
-    "@radix-ui/react-collapsible": "^1.1.0",
-    "@radix-ui/react-dialog": "^1.1.0",
-    "@radix-ui/react-dropdown-menu": "^2.1.0",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-progress": "^1.1.0",
-    "@radix-ui/react-select": "^2.1.0",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.0",
-    "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-toast": "^1.2.0",
-    "class-variance-authority": "^0.7.0",
+    "@pierre/trees": "1.0.0-beta.6",
+    "@radix-ui/react-avatar": "^1.2.6",
+    "@radix-ui/react-collapsible": "^1.1.20",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-progress": "^1.1.16",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.469.0",
-    "marked": "^17.0.5",
+    "lucide-react": "^1.48.0",
+    "marked": "^18.0.14",
     "react-markdown": "^10.1.0",
-    "react-pdf": "^9.2.1",
     "react-syntax-highlighter": "^16.1.1",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.0.2",
-    "turndown": "^7.2.2"
+    "tailwind-merge": "^3.7.0",
+    "turndown": "^7.2.4"
   },
   "peerDependencies": {
-    "@tangle-network/brand": "^1.5.0",
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
-    "@nanostores/react": ">=0.8.4 <2.0.0",
+    "@nanostores/react": ">=0.8.4 <3.0.0",
+    "@tangle-network/brand": "^1.8.1",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",
@@ -181,25 +179,25 @@
     }
   },
   "devDependencies": {
-    "@hocuspocus/provider": "^4.4.0",
-    "@nanostores/react": "^1.1.0",
-    "@tiptap/core": "^3.28.0",
-    "@tiptap/extension-collaboration": "^3.28.0",
-    "@tiptap/extension-collaboration-caret": "^3.28.0",
-    "@tiptap/react": "^3.28.0",
-    "@tiptap/starter-kit": "^3.28.0",
-    "@tiptap/y-tiptap": "^3.0.7",
-    "@types/react": "^19.0.0",
+    "@hocuspocus/provider": "^4.7.0",
+    "@nanostores/react": "^2.0.1",
+    "@storybook/react": "^10.6.0",
+    "@tiptap/core": "^3.31.3",
+    "@tiptap/extension-collaboration": "^3.31.3",
+    "@tiptap/extension-collaboration-caret": "^3.31.3",
+    "@tiptap/react": "^3.31.3",
+    "@tiptap/starter-kit": "^3.31.3",
+    "@tiptap/y-tiptap": "^3.0.9",
+    "@types/react": "^19.3.0",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@types/turndown": "^5.0.5",
-    "nanostores": "^1.4.1",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "@storybook/react": "^10.5.5",
-    "tsup": "^8.3.5",
-    "typescript": "^5.6.0",
-    "yjs": "^13.6.31",
-    "react-router": "^8.3.0"
+    "@types/turndown": "^5.0.6",
+    "nanostores": "^1.5.4",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "react-router": "^8.4.0",
+    "tsdown": "^0.23.0",
+    "typescript": "^7.0.2",
+    "yjs": "^13.6.33"
   },
   "keywords": [
     "tangle",
@@ -209,7 +207,7 @@
     "design-system"
   ],
   "scripts": {
-    "build": "tsup && node ../../scripts/validate-dist.mjs",
-    "dev": "tsup --watch"
+    "build": "tsdown && node ../../scripts/validate-dist.mjs",
+    "dev": "tsdown --watch"
   }
 }

package/src/auth/auth.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type * as React from "react";
+import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
 import { Avatar, AvatarFallback, AvatarImage } from "../primitives/avatar";
 import { Button, type ButtonProps } from "../primitives/button";
@@ -120,7 +121,10 @@ export function UserMenu({
       <DropdownMenuTrigger asChild>
         <button
           type="button"
-          className="flex items-center gap-2 rounded-lg p-1.5 transition-colors hover:bg-accent focus:outline-none focus:ring-2 focus:ring-ring"
+          className={cn(
+            "flex items-center gap-2 rounded-lg p-1.5 transition-colors hover:bg-accent",
+            focusRing,
+          )}
         >
           <Avatar className="h-8 w-8">
             <AvatarImage src={undefined} alt={user.name ?? user.email} />

package/src/chat/agent-timeline.tsx

@@ -6,6 +6,7 @@ import {
   FileText,
   Info,
 } from "lucide-react";
+import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
 import { type MessageRole } from "./chat-message";
 import { UserMessage } from "./user-message";
@@ -235,7 +236,11 @@ function ArtifactCard({ item }: { item: AgentTimelineArtifactItem }) {
           item.onClick?.();
         }
       }}
-      className="block w-full text-left transition-transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+      // Rounded like the card inside it, so the focus ring follows its corners.
+      className={cn(
+        "block w-full rounded-[var(--radius-lg)] text-left transition-transform hover:-translate-y-0.5",
+        focusRing,
+      )}
     >
       {content}
     </div>

package/src/chat/chat-container.tsx

@@ -5,6 +5,7 @@ import {
   useRef,
 } from "react";
 import { ArrowDown } from "lucide-react";
+import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
 import type { SessionMessage } from "../types/message";
 import type { SessionPart, TextPart, ToolPart } from "../types/parts";
@@ -459,7 +460,7 @@ export const ChatContainer = memo(
                 "flex items-center gap-1.5 px-3 py-1.5 rounded-full",
                 "border border-border bg-card shadow-[0_6px_16px_rgba(15,23,42,0.08)]",
                 "text-xs text-foreground transition-colors hover:bg-accent",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
+                focusRing,
               )}
             >
               <ArrowDown className="w-3 h-3" />

package/src/editor/document-editor-pane.test.tsx

@@ -32,6 +32,8 @@ async function paneWithoutPeers(message: string) {
   return { DocumentEditorPane, loaders };
 }
 
+// The pane is imported on a fresh module graph, which re-transforms its whole
+// dependency tree: seconds on a busy runner, past the 5s default.
 describe("DocumentEditorPane without the editor peers", () => {
   it("renders the preview, because only the edit tab needs the peers", async () => {
     const { DocumentEditorPane, loaders } = await paneWithoutPeers(
@@ -54,5 +56,5 @@ describe("DocumentEditorPane without the editor peers", () => {
     expect(loaders.loadDocumentEditorPeers).not.toHaveBeenCalled();
     expect(loaders.loadCollaborationPeers).not.toHaveBeenCalled();
     expect(loaders.loadEditorProviderPeers).not.toHaveBeenCalled();
-  });
+  }, 30_000);
 });

package/src/editor/document-editor-pane.tsx

@@ -4,6 +4,7 @@ import { type ReactNode, useEffect, useMemo, useState } from "react";
 import { PencilLine, Save, Users, Wifi, WifiOff } from "lucide-react";
 import { Markdown } from "../markdown/markdown";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../primitives/tabs";
+import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
 import { ArtifactPane, type ArtifactPaneProps } from "../primitives/artifact-pane";
 import {
@@ -276,7 +277,10 @@ export function DocumentEditorPane({
             type="button"
             onClick={() => void onSave(draft)}
             disabled={saving || !isDirty}
-            className="inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-border bg-card px-3 py-1.5 text-xs font-semibold text-foreground transition-colors hover:border-primary/40 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            className={cn(
+              "inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-border bg-card px-3 py-1.5 text-xs font-semibold text-foreground transition-colors hover:border-[var(--border-strong)] hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+              focusRing,
+            )}
           >
             <Save className="h-3.5 w-3.5" />
             {saving ? "Saving..." : saveLabel}