@elizaos/ui 2.0.3-beta.2 → 2.0.3-beta.4

package/components/chat/widgets/relationships-attention.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Users } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { client } from "../../../api/index.js";
+import { useIntervalWhenDocumentVisible } from "../../../hooks/index.js";
+import { usePublishHomeAttention } from "../../../widgets/home-attention-store.js";
+import { HOME_SIGNAL_WEIGHTS } from "../../../widgets/home-priority.js";
+import { HomeWidgetCard, useWidgetNavigation } from "./home-widget-card.js";
+const RELATIONSHIPS_WIDGET_KEY = "relationships/relationships.attention";
+// Relationships data changes slowly (merge candidates, last-interaction
+// recency); the full-page view loads on demand without polling, so a calm
+// 30s refresh is plenty for the glanceable home card.
+const RELATIONSHIPS_REFRESH_INTERVAL_MS = 30_000;
+const EMPTY_DATA = {
+    pendingCandidates: [],
+    staleContacts: [],
+};
+function isRecord(value) {
+    return typeof value === "object" && value !== null;
+}
+/**
+ * The candidates route is untrusted network input — validate the shape at the
+ * boundary and keep only the fields this widget reads, typed as the real
+ * RelationshipsMergeCandidate wire type.
+ */
+function pendingCandidatesFrom(candidates) {
+    if (!Array.isArray(candidates))
+        return [];
+    return candidates.filter((candidate) => isRecord(candidate) &&
+        typeof candidate.id === "string" &&
+        candidate.status === "pending");
+}
+function toTimestamp(iso) {
+    if (!iso)
+        return 0;
+    const parsed = Date.parse(iso);
+    return Number.isNaN(parsed) ? 0 : parsed;
+}
+/**
+ * Non-owner people sorted by the OLDEST lastInteractionAt first ("haven't
+ * talked to X"). A missing `lastInteractionAt` is a valid state — a contact
+ * you've never interacted with — and the backend legitimately omits it (it is
+ * optional on RelationshipsPersonSummary; the graph builder only sets it when a
+ * lastModified exists). Those contacts are the *stalest* of all, so they're
+ * kept (toTimestamp maps `undefined → 0`, sorting them first) rather than
+ * silently dropped, which would empty the card whenever no one has a recorded
+ * interaction.
+ */
+function staleContactsFrom(people) {
+    if (!Array.isArray(people))
+        return [];
+    return people
+        .filter((person) => isRecord(person) &&
+        typeof person.displayName === "string" &&
+        !person.isOwner)
+        .sort((left, right) => toTimestamp(left.lastInteractionAt) -
+        toTimestamp(right.lastInteractionAt));
+}
+/** Shallow content equality so an unchanged 30s poll doesn't re-render. */
+function relationshipsEqual(a, b) {
+    if (a.pendingCandidates.length !== b.pendingCandidates.length ||
+        a.staleContacts.length !== b.staleContacts.length) {
+        return false;
+    }
+    const sameCandidates = a.pendingCandidates.every((candidate, i) => candidate.id === b.pendingCandidates[i].id);
+    if (!sameCandidates)
+        return false;
+    return a.staleContacts.every((person, i) => {
+        const other = b.staleContacts[i];
+        return (person.groupId === other.groupId &&
+            person.lastInteractionAt === other.lastInteractionAt);
+    });
+}
+/**
+ * RELATIONSHIPS "People" home widget (#9143). Glanceable, icon-first summary of
+ * the single highest-priority relationship signal: a pending merge that needs
+ * the user to confirm (approval), otherwise the stalest contact to reach out
+ * to. Reads the same relationships routes the full view uses
+ * (client.getRelationshipsPeople / getRelationshipsCandidates), polling quietly
+ * while the document is visible. Tapping the card opens the Relationships view.
+ */
+export function RelationshipsAttentionWidget({ slot }) {
+    const [data, setData] = useState(EMPTY_DATA);
+    const nav = useWidgetNavigation();
+    const load = useCallback(async () => {
+        try {
+            const [peopleResult, candidates] = await Promise.all([
+                client.getRelationshipsPeople(),
+                client.getRelationshipsCandidates(),
+            ]);
+            const next = {
+                pendingCandidates: pendingCandidatesFrom(candidates),
+                staleContacts: staleContactsFrom(peopleResult.people),
+            };
+            // Skip the state update (and the re-render) when the poll is unchanged.
+            setData((prev) => (relationshipsEqual(prev, next) ? prev : next));
+        }
+        catch {
+            // Network/agent failure — keep the last good data (or empty); never
+            // surface a broken card. Matches todo.tsx's silent-fallback catch.
+        }
+    }, []);
+    useEffect(() => {
+        void load();
+    }, [load]);
+    // Pause the silent poll while the document is backgrounded.
+    useIntervalWhenDocumentVisible(() => void load(), RELATIONSHIPS_REFRESH_INTERVAL_MS);
+    const pendingCount = data.pendingCandidates.length;
+    const hasPendingMerge = pendingCount > 0;
+    const stalest = useMemo(() => data.staleContacts[0] ?? null, [data]);
+    const hasContacts = stalest != null;
+    const onHome = slot === "home";
+    // A pending merge needs the user to confirm/reject — approval-level attention.
+    // Overdue contacts are informational only (rank by base order, no boost).
+    usePublishHomeAttention(RELATIONSHIPS_WIDGET_KEY, onHome && hasPendingMerge ? HOME_SIGNAL_WEIGHTS.approval : null);
+    // Render nothing when there are no pending merges AND no contacts to surface.
+    // `data` starts empty, so this also covers the very first load while it's
+    // still pending and nothing is cached — the home surface must not show empty
+    // placeholders (#9143).
+    if (!hasPendingMerge && !hasContacts)
+        return null;
+    // One high-priority datum, icon-first: a pending merge (approval) wins;
+    // otherwise the stalest contact to reach out to. Tapping opens Relationships.
+    if (hasPendingMerge) {
+        return (_jsx(HomeWidgetCard, { icon: _jsx(Users, {}), label: "People", value: "Confirm merge?", badge: pendingCount, tone: "warn", testId: "chat-widget-relationships", ariaLabel: `People: ${pendingCount} merge ${pendingCount === 1 ? "candidate" : "candidates"} to confirm. Open Relationships.`, onActivate: () => nav.openView("/relationships", "relationships") }));
+    }
+    return (_jsx(HomeWidgetCard, { icon: _jsx(Users, {}), label: "Reach out", value: stalest.displayName, tone: "default", testId: "chat-widget-relationships", ariaLabel: `Reach out: you haven't talked to ${stalest.displayName} in a while. Open Relationships.`, onActivate: () => nav.openView("/relationships", "relationships") }));
+}
+export const RELATIONSHIPS_HOME_WIDGET = {
+    pluginId: "relationships",
+    id: "relationships.attention",
+    order: 90,
+    signalKinds: ["nudge", "approval"],
+    Component: RelationshipsAttentionWidget,
+};

package/components/chat/widgets/shared.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function WidgetSection({ title, icon, action, children, testId, onTitleClick, }) {
-    const titleContent = (_jsxs(_Fragment, { children: [_jsx("span", { className: "inline-flex shrink-0 items-center justify-center text-muted [&>svg]:h-3.5 [&>svg]:w-3.5", children: icon }), _jsx("span", { className: "truncate text-[11px] leading-none font-semibold uppercase tracking-[0.16em] text-muted", children: title })] }));
-    return (_jsxs("section", { "data-testid": testId, className: "space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 pr-1", children: [onTitleClick ? (_jsx("button", { type: "button", onClick: onTitleClick, className: "inline-flex min-w-0 flex-1 items-center gap-1.5 rounded-sm bg-transparent px-0.5 py-1 text-left transition-colors hover:text-txt", children: titleContent })) : (_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-1.5 px-0.5 py-1", children: titleContent })), action] }), _jsx("div", { className: "px-3 text-xs", children: children })] }));
+    const titleContent = (_jsxs(_Fragment, { children: [_jsx("span", { className: "inline-flex shrink-0 items-center justify-center text-muted [&>svg]:h-3.5 [&>svg]:w-3.5", children: icon }), _jsx("span", { className: "truncate text-[11px] leading-none font-semibold text-muted", children: title })] }));
+    return (_jsxs("section", { "data-testid": testId, className: "space-y-0.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 pr-1", children: [onTitleClick ? (_jsx("button", { type: "button", onClick: onTitleClick, className: "inline-flex min-w-0 flex-1 items-center gap-1.5 rounded-sm bg-transparent px-0.5 py-1 text-left transition-colors hover:text-txt", children: titleContent })) : (_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-1.5 px-0.5 py-1", children: titleContent })), action] }), _jsx("div", { className: "px-3 text-xs", children: children })] }));
 }
 export function EmptyWidgetState({ icon, title, description, children, }) {
     return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 py-5 text-center", children: [_jsx("span", { className: "text-muted/50", children: icon }), _jsx("p", { className: "text-2xs text-muted", children: title }), description ? (_jsx("p", { className: "text-3xs text-muted/70", children: description })) : null] }), children] }));

package/components/chat/widgets/task-widget.js

@@ -168,7 +168,7 @@ export function TaskWidget({ threadId, fallbackTitle }) {
     const tokens = detail?.usage?.state === "unavailable"
         ? null
         : formatCompactTokens(detail?.usage?.totalTokens ?? null);
-    return (_jsxs("button", { type: "button", "data-testid": "task-widget", "data-task-id": threadId, "data-task-status": status, onClick: handleOpen, className: "my-2 flex w-full items-start gap-2 rounded-sm border border-border bg-card px-3 py-2 text-left transition-colors hover:bg-bg-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60", children: [_jsx("span", { className: `mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center ${STATUS_TONE[status]}`, role: "img", "aria-label": STATUS_LABEL[status], title: STATUS_LABEL[status], children: _jsx(StatusIcon, { className: `h-3.5 w-3.5 ${STATUS_PULSE.has(status) ? "animate-pulse" : ""}` }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-medium text-txt", children: title }), _jsxs("span", { "data-testid": "task-widget-status", className: "mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted", children: [_jsx("span", { className: STATUS_TONE[status], children: STATUS_LABEL[status] }), sessionCount > 0 ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted/40", children: "\u00B7" }), _jsxs("span", { children: [activeSessionCount, "/", sessionCount, " agents"] })] })) : null, relative ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted/40", children: "\u00B7" }), _jsx("span", { children: relative })] })) : null, tokens ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted/40", children: "\u00B7" }), _jsx("span", { className: "tabular-nums", children: tokens })] })) : null] })] })] }));
+    return (_jsxs("button", { type: "button", "data-testid": "task-widget", "data-task-id": threadId, "data-task-status": status, onClick: handleOpen, className: "my-2 flex w-full items-start gap-2 rounded-sm border border-border bg-card px-3 py-2 text-left transition-colors hover:bg-bg-hover   ", children: [_jsx("span", { className: `mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center ${STATUS_TONE[status]}`, role: "img", "aria-label": STATUS_LABEL[status], title: STATUS_LABEL[status], children: _jsx(StatusIcon, { className: `h-3.5 w-3.5 ${STATUS_PULSE.has(status) ? "animate-pulse" : ""}` }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-medium text-txt", children: title }), _jsxs("span", { "data-testid": "task-widget-status", className: "mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted", children: [_jsx("span", { className: STATUS_TONE[status], children: STATUS_LABEL[status] }), sessionCount > 0 ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted/40", children: "\u00B7" }), _jsxs("span", { children: [activeSessionCount, "/", sessionCount, " agents"] })] })) : null, relative ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted/40", children: "\u00B7" }), _jsx("span", { children: relative })] })) : null, tokens ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted/40", children: "\u00B7" }), _jsx("span", { className: "tabular-nums", children: tokens })] })) : null] })] })] }));
 }
 /**
  * Register the `[TASK:<threadId>]…[/TASK]` inline widget into the chat-reply

package/components/chat/widgets/todo.d.ts

@@ -1,3 +1,3 @@
-import type { ChatSidebarWidgetDefinition } from "./types";
+import type { ChatSidebarWidgetDefinition } from "./types.js";
 export declare const TODO_PLUGIN_WIDGETS: ChatSidebarWidgetDefinition[];
 //# sourceMappingURL=todo.d.ts.map

package/components/chat/widgets/todo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"todo.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/chat/widgets/todo.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,2BAA2B,EAE5B,MAAM,SAAS,CAAC;AAqLjB,eAAO,MAAM,mBAAmB,EAAE,2BAA2B,EAQ5D,CAAC"}
+{"version":3,"file":"todo.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/chat/widgets/todo.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,2BAA2B,EAE5B,MAAM,SAAS,CAAC;AAsNjB,eAAO,MAAM,mBAAmB,EAAE,2BAA2B,EAQ5D,CAAC"}

package/components/chat/widgets/todo.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ListTodo } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { client } from "../../../api/index.js";
 import { useIntervalWhenDocumentVisible } from "../../../hooks/index.js";
-import { useApp } from "../../../state/index.js";
+import { useAppSelectorShallow } from "../../../state/index.js";
+import { usePublishHomeAttention } from "../../../widgets/home-attention-store.js";
+import { HOME_SIGNAL_WEIGHTS } from "../../../widgets/home-priority.js";
 import { Badge } from "../../ui/badge.js";
 import { EmptyWidgetState, WidgetSection } from "./shared.js";
+const TODO_WIDGET_KEY = "todo/todo.items";
 const TODO_REFRESH_INTERVAL_MS = 15_000;
 const MAX_VISIBLE_TODOS = 8;
 const fallbackTranslate = (key, vars) => typeof vars?.defaultValue === "string" ? vars.defaultValue : key;
@@ -54,30 +57,46 @@ function TodoItemsContent({ todos, loading, }) {
     }
     return (_jsxs("div", { className: "flex flex-col gap-2", children: [visibleTodos.map((todo) => (_jsx(TodoRow, { todo: todo }, todo.id))), remainingCount > 0 ? (_jsxs("p", { className: "px-1 text-xs-tight text-muted", children: ["+", remainingCount, " more open todo", remainingCount === 1 ? "" : "s"] })) : null, hiddenCompletedCount > 0 ? (_jsxs("p", { className: "px-1 text-xs-tight text-muted", children: [hiddenCompletedCount, " completed todo", hiddenCompletedCount === 1 ? "" : "s", " hidden"] })) : null] }));
 }
-function TodoSidebarWidget(_props) {
-    const app = useApp();
-    const workbench = app?.workbench;
-    const t = app?.t ?? fallbackTranslate;
+function TodoSidebarWidget({ slot }) {
+    const { workbench, t: appT } = useAppSelectorShallow((s) => ({
+        workbench: s.workbench,
+        t: s.t,
+    }));
+    const t = appT ?? fallbackTranslate;
     const [todos, setTodos] = useState(() => dedupeTodos(workbench?.todos ?? []));
     const [todosLoading, setTodosLoading] = useState(false);
+    // The async todo fetch can resolve after the widget unmounts; guard the
+    // post-await state writes so a late `finally` doesn't setState on an
+    // unmounted component (which throws once the host environment is gone).
+    const mountedRef = useRef(true);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
     useEffect(() => {
         setTodos(dedupeTodos(workbench?.todos ?? []));
     }, [workbench?.todos]);
     const loadTodos = useCallback(async (silent = false) => {
-        if (!silent) {
+        if (!silent && mountedRef.current) {
             setTodosLoading(true);
         }
         try {
             const result = await client.listWorkbenchTodos();
-            setTodos(dedupeTodos(result.todos));
+            if (mountedRef.current) {
+                setTodos(dedupeTodos(result.todos));
+            }
         }
         catch {
-            if ((workbench?.todos?.length ?? 0) > 0) {
+            if (mountedRef.current && (workbench?.todos?.length ?? 0) > 0) {
                 setTodos(dedupeTodos(workbench?.todos ?? []));
             }
         }
         finally {
-            setTodosLoading(false);
+            if (mountedRef.current) {
+                setTodosLoading(false);
+            }
         }
     }, [workbench?.todos]);
     useEffect(() => {
@@ -86,6 +105,16 @@ function TodoSidebarWidget(_props) {
     // Refresh only while the document is visible — pause the silent poll in a
     // backgrounded app/tab instead of refetching the todo list every interval.
     useIntervalWhenDocumentVisible(() => void loadTodos(true), TODO_REFRESH_INTERVAL_MS);
+    const openTodos = todos.filter((todo) => !todo.isCompleted);
+    const hasUrgent = openTodos.some((todo) => todo.isUrgent);
+    const onHome = slot === "home";
+    // Float the home card up when there are urgent open todos; clear otherwise.
+    usePublishHomeAttention(TODO_WIDGET_KEY, onHome && hasUrgent ? HOME_SIGNAL_WEIGHTS.reminder : null);
+    // On the home grid, render nothing when there are no open todos — the home
+    // surface must not show empty-state placeholders (#9143). The chat sidebar
+    // keeps its empty state.
+    if (onHome && openTodos.length === 0)
+        return null;
     return (_jsx(WidgetSection, { title: t("taskseventspanel.Todos", { defaultValue: "Todos" }), icon: _jsx(ListTodo, { className: "h-4 w-4" }), testId: "chat-widget-todos", children: _jsx(TodoItemsContent, { todos: todos, loading: todosLoading }) }));
 }
 export const TODO_PLUGIN_WIDGETS = [

package/components/chat/widgets/topic-chips-bar.d.ts

@@ -0,0 +1,23 @@
+/**
+ * TopicChipsBar — horizontal chip row for the topics a conversation has
+ * touched. Purely presentational: it renders the supplied chips, marks the
+ * active one, and reports selection via `onSelect`. When the number of chips
+ * exceeds `maxVisible` the overflow collapses into a trailing "+N" chip.
+ *
+ * Selection state is owned by the caller (`activeTopicId`) so the bar stays a
+ * controlled, computation-free display — it never derives counts or filters.
+ */
+export type TopicChip = {
+    id: string;
+    label: string;
+    count?: number;
+};
+export type TopicChipsBarProps = {
+    topics: TopicChip[];
+    activeTopicId?: string;
+    onSelect?: (id: string) => void;
+    /** Max chips rendered before the trailing "+N" overflow chip. Default 8. */
+    maxVisible?: number;
+};
+export declare function TopicChipsBar({ topics, activeTopicId, onSelect, maxVisible, }: TopicChipsBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=topic-chips-bar.d.ts.map

package/components/chat/widgets/topic-chips-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"topic-chips-bar.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/chat/widgets/topic-chips-bar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,4EAA4E;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,aAAa,EACb,QAAQ,EACR,UAAc,GACf,EAAE,kBAAkB,2CAyDpB"}

package/components/chat/widgets/topic-chips-bar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TopicChipsBar — horizontal chip row for the topics a conversation has
+ * touched. Purely presentational: it renders the supplied chips, marks the
+ * active one, and reports selection via `onSelect`. When the number of chips
+ * exceeds `maxVisible` the overflow collapses into a trailing "+N" chip.
+ *
+ * Selection state is owned by the caller (`activeTopicId`) so the bar stays a
+ * controlled, computation-free display — it never derives counts or filters.
+ */
+import { Button } from "../../ui/button.js";
+export function TopicChipsBar({ topics, activeTopicId, onSelect, maxVisible = 8, }) {
+    if (topics.length === 0) {
+        return (_jsx("div", { "data-testid": "topic-chips-bar", className: "my-2 text-2xs text-muted", role: "status", children: "No topics yet" }));
+    }
+    const visible = topics.slice(0, maxVisible);
+    const overflowCount = topics.length - visible.length;
+    return (_jsxs("div", { "data-testid": "topic-chips-bar", className: "my-2 flex min-w-0 flex-wrap items-center gap-1.5", role: "listbox", "aria-label": "Conversation topics", children: [visible.map((topic) => {
+                const isActive = topic.id === activeTopicId;
+                return (_jsxs(Button, { type: "button", variant: isActive ? "surfaceAccent" : "outline", size: "sm", role: "option", "aria-selected": isActive, "data-testid": `topic-chip-${topic.id}`, className: "h-7 gap-1.5 px-3 text-xs", onClick: () => onSelect?.(topic.id), children: [_jsx("span", { className: "truncate", children: topic.label }), typeof topic.count === "number" ? (_jsx("span", { className: "text-3xs tabular-nums text-muted", children: topic.count })) : null] }, topic.id));
+            }), overflowCount > 0 ? (_jsxs("span", { "data-testid": "topic-chips-overflow", className: "inline-flex h-7 items-center rounded-sm bg-bg-accent px-2.5 text-xs text-muted", title: `${overflowCount} more topics`, children: ["+", overflowCount] })) : null] }));
+}

package/components/chat/widgets/topic-grouped-transcript.d.ts

@@ -0,0 +1,20 @@
+/**
+ * TopicGroupedTranscript — collapsible topic sections for a conversation
+ * transcript. Each group is a header (chevron + topic + message count) with a
+ * preview-line body that collapses on click. Presentational only: it tracks
+ * the open/closed UI state locally (seeded from each group's `collapsed`) and
+ * reports changes via `onToggle`; it never groups or counts messages itself.
+ */
+export type TopicGroup = {
+    id: string;
+    topic: string;
+    messageCount: number;
+    previewLines: string[];
+    collapsed?: boolean;
+};
+export type TopicGroupedTranscriptProps = {
+    groups: TopicGroup[];
+    onToggle?: (id: string, collapsed: boolean) => void;
+};
+export declare function TopicGroupedTranscript({ groups, onToggle, }: TopicGroupedTranscriptProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=topic-grouped-transcript.d.ts.map

package/components/chat/widgets/topic-grouped-transcript.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"topic-grouped-transcript.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/chat/widgets/topic-grouped-transcript.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IACxC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACrD,CAAC;AAiBF,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,QAAQ,GACT,EAAE,2BAA2B,2CAuF7B"}

package/components/chat/widgets/topic-grouped-transcript.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TopicGroupedTranscript — collapsible topic sections for a conversation
+ * transcript. Each group is a header (chevron + topic + message count) with a
+ * preview-line body that collapses on click. Presentational only: it tracks
+ * the open/closed UI state locally (seeded from each group's `collapsed`) and
+ * reports changes via `onToggle`; it never groups or counts messages itself.
+ */
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useCallback, useState } from "react";
+function keyedPreviewLines(group) {
+    const seen = new Map();
+    return group.previewLines.map((line) => {
+        const occurrence = seen.get(line) ?? 0;
+        seen.set(line, occurrence + 1);
+        return {
+            key: `${group.id}-line-${occurrence}-${line}`,
+            line,
+        };
+    });
+}
+export function TopicGroupedTranscript({ groups, onToggle, }) {
+    const [collapsedById, setCollapsedById] = useState(() => {
+        const initial = {};
+        for (const group of groups) {
+            initial[group.id] = group.collapsed === true;
+        }
+        return initial;
+    });
+    const toggle = useCallback((id) => {
+        setCollapsedById((prev) => {
+            const next = !prev[id];
+            onToggle?.(id, next);
+            return { ...prev, [id]: next };
+        });
+    }, [onToggle]);
+    if (groups.length === 0) {
+        return (_jsx("div", { "data-testid": "topic-grouped-transcript", className: "my-2 text-2xs text-muted", role: "status", children: "No transcript yet" }));
+    }
+    return (_jsx("div", { "data-testid": "topic-grouped-transcript", className: "my-2 flex flex-col gap-1.5 text-sm", children: groups.map((group) => {
+            const collapsed = collapsedById[group.id] === true;
+            const bodyId = `topic-group-body-${group.id}`;
+            return (_jsxs("section", { "data-testid": `topic-group-${group.id}`, className: "border border-border bg-card", children: [_jsxs("button", { type: "button", "aria-expanded": !collapsed, "aria-controls": bodyId, "data-testid": `topic-group-toggle-${group.id}`, className: "flex w-full items-center gap-2 px-3 py-2 text-left transition-colors hover:bg-surface", onClick: () => toggle(group.id), children: [_jsx("span", { className: "shrink-0 text-muted", "aria-hidden": true, children: collapsed ? (_jsx(ChevronRight, { className: "h-4 w-4" })) : (_jsx(ChevronDown, { className: "h-4 w-4" })) }), _jsx("span", { className: "min-w-0 flex-1 truncate font-semibold", children: group.topic }), _jsxs("span", { className: "shrink-0 text-3xs tabular-nums uppercase tracking-wider text-muted", children: [group.messageCount, " msg"] })] }), collapsed ? null : (_jsx("div", { id: bodyId, className: "flex flex-col gap-1 border-t border-border/60 px-3 py-2 text-xs text-muted", children: keyedPreviewLines(group).map(({ key, line }) => (_jsx("p", { className: "truncate", children: line }, key))) }))] }, group.id));
+        }) }));
+}

package/components/chat/widgets/types.d.ts

@@ -1,9 +1,12 @@
 import type { ComponentType } from "react";
-import type { PluginInfo } from "../../../api";
-import type { ActivityEvent } from "../../../hooks/useActivityEvents";
+import type { PluginInfo } from "../../../api/index.js";
+import type { ActivityEvent } from "../../../hooks/useActivityEvents.js";
+import type { WidgetSlot } from "../../../widgets/types.js";
 export interface ChatSidebarWidgetProps {
     events: ActivityEvent[];
     clearEvents: () => void;
+    /** The slot this instance renders in — `home` widgets hide their empty state. */
+    slot?: WidgetSlot;
 }
 export interface ChatSidebarWidgetDefinition {
     id: string;

package/components/chat/widgets/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/chat/widgets/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEtE,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;CAClD;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,UAAU,EACV,IAAI,GAAG,SAAS,GAAG,UAAU,CAC9B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/chat/widgets/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEzD,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,iFAAiF;IACjF,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;CAClD;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,UAAU,EACV,IAAI,GAAG,SAAS,GAAG,UAAU,CAC9B,CAAC"}

package/components/chat/widgets/use-inline-widget-context.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The single source of truth for how an inline chat-reply widget drives the
+ * chat surface. Both message surfaces, the full `MessageContent` (ChatView)
+ * and the lightweight `InlineWidgetText` (ContinuousChatOverlay), build their
+ * `InlineWidgetContext` from THIS hook, so a CHOICE pick, a FOLLOWUPS chip, and
+ * a FORM submit behave identically no matter where the reply is rendered.
+ *
+ * The two surfaces previously each defined these four handlers inline, byte for
+ * byte the same. Two copies of one contract is a drift hazard (the issue's #1
+ * surface-parity risk, #9304), unify them here.
+ *
+ * Callers pass the already-subscribed store setters rather than re-subscribing,
+ * because `MessageContent` reads `sendActionMessage`/`setChatInput` for other
+ * purposes too; the handler *logic* is what must stay single-sourced.
+ */
+import type { InlineWidgetContext } from "./inline-registry.js";
+export declare function useInlineWidgetContext(sendActionMessage: (text: string) => Promise<void>, setChatInput: (text: string) => void): InlineWidgetContext;
+//# sourceMappingURL=use-inline-widget-context.d.ts.map

package/components/chat/widgets/use-inline-widget-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-inline-widget-context.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/chat/widgets/use-inline-widget-context.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,wBAAgB,sBAAsB,CACpC,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,EAClD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GACnC,mBAAmB,CAmCrB"}

package/components/chat/widgets/use-inline-widget-context.js

@@ -0,0 +1,46 @@
+/**
+ * The single source of truth for how an inline chat-reply widget drives the
+ * chat surface. Both message surfaces, the full `MessageContent` (ChatView)
+ * and the lightweight `InlineWidgetText` (ContinuousChatOverlay), build their
+ * `InlineWidgetContext` from THIS hook, so a CHOICE pick, a FOLLOWUPS chip, and
+ * a FORM submit behave identically no matter where the reply is rendered.
+ *
+ * The two surfaces previously each defined these four handlers inline, byte for
+ * byte the same. Two copies of one contract is a drift hazard (the issue's #1
+ * surface-parity risk, #9304), unify them here.
+ *
+ * Callers pass the already-subscribed store setters rather than re-subscribing,
+ * because `MessageContent` reads `sendActionMessage`/`setChatInput` for other
+ * purposes too; the handler *logic* is what must stay single-sourced.
+ */
+import { useMemo } from "react";
+export function useInlineWidgetContext(sendActionMessage, setChatInput) {
+    return useMemo(() => ({
+        // A choice pick / default followup: send the value back through the
+        // action-message pipeline.
+        sendAction: (value) => {
+            void sendActionMessage(value);
+        },
+        // A followup `navigate` chip: deliver the passive view-switch SUGGESTION
+        // as the same `eliza:navigate:view` event the VIEWS action uses. A
+        // `/`-prefixed payload is a viewPath; anything else is a viewId.
+        navigate: (payload) => {
+            if (typeof window === "undefined")
+                return;
+            const detail = payload.startsWith("/")
+                ? { viewPath: payload }
+                : { viewId: payload };
+            window.dispatchEvent(new CustomEvent("eliza:navigate:view", { detail }));
+        },
+        // A followup `prompt` chip: prefill the composer draft. Outside a chat
+        // provider `setChatInput` is an inert setter, so this safely no-ops.
+        prefillComposer: (payload) => {
+            setChatInput(payload);
+        },
+        // A structured in-chat form submit: send the result back through the same
+        // action-message pipeline.
+        submitForm: (formId, values) => {
+            void sendActionMessage(`[form:submit ${formId}] ${JSON.stringify(values)}`);
+        },
+    }), [sendActionMessage, setChatInput]);
+}

package/components/cloud/CloudSourceControls.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckCircle2, WifiOff } from "lucide-react";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { Button } from "../ui/button.js";
 import { ConnectionStatus } from "../ui/connection-status.js";
 export function CloudSourceModeToggle({ mode, onChange, cloudLabel = "Eliza Cloud", ownKeyLabel = "Own API Key", }) {
@@ -12,7 +12,7 @@ export function CloudSourceModeToggle({ mode, onChange, cloudLabel = "Eliza Clou
                     : "bg-transparent text-muted hover:bg-bg-hover hover:text-txt"}`, onClick: () => onChange("own-key"), children: ownKeyLabel })] }));
 }
 export function CloudConnectionStatus({ connected, connectedText, disconnectedText, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const resolvedConnectedText = connectedText ?? "Connected to Eliza Cloud";
     return (_jsxs("div", { className: "flex items-center justify-between gap-3 rounded-sm border border-border/70 bg-bg-muted/90 px-3 py-2.5", role: "status", "aria-live": "polite", children: [_jsx(ConnectionStatus, { state: connected ? "connected" : "disconnected", label: connected ? resolvedConnectedText : disconnectedText, className: "border-0 bg-transparent px-0 py-0 shadow-none" }), _jsx("span", { className: `inline-flex h-6 w-6 items-center justify-center rounded-full border ${connected
                     ? "border-ok/30 bg-ok-subtle text-ok"

package/components/cloud/CloudStatusBadge.js

@@ -86,8 +86,8 @@ export function CloudStatusBadge(props) {
     }
     const toneStyle = resolveCloudStatusToneStyle(status.kind, appearance);
     const buttonClassName = appearance === "shell"
-        ? `inline-flex h-11 min-h-touch min-w-touch items-center justify-center rounded-sm px-3.5 py-0 border border-border/42 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] text-txt ring-1 ring-inset ring-white/6 backdrop-blur-xl supports-[backdrop-filter]:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_62%,transparent),color-mix(in_srgb,var(--bg)_34%,transparent))] transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-accent/55 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_78%,transparent),color-mix(in_srgb,var(--bg-hover)_52%,transparent))] hover:text-txt active:scale-[0.98] disabled:active:scale-100 disabled:hover:border-border/42 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] disabled:hover:text-txt shrink-0 gap-1.5 leading-none no-underline text-sm font-medium`
-        : `inline-flex h-[2.375rem] min-h-[2.375rem] shrink-0 items-center gap-1.5 rounded-sm border border-transparent !bg-transparent px-2.5 leading-none text-muted shadow-none ring-0 transition-colors duration-150 hover:!bg-transparent hover:text-txt active:!bg-transparent text-xs-tight font-mono sm:text-xs`;
+        ? `inline-flex h-11 min-h-touch min-w-touch items-center justify-center rounded-sm px-3.5 py-0 border border-border/42 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] text-txt    transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-accent/55 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_78%,transparent),color-mix(in_srgb,var(--bg-hover)_52%,transparent))] hover:text-txt active:scale-[0.98] disabled:active:scale-100 disabled:hover:border-border/42 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] disabled:hover:text-txt shrink-0 gap-1.5 leading-none no-underline text-sm font-medium`
+        : `inline-flex h-[2.375rem] min-h-[2.375rem] shrink-0 items-center gap-1.5 rounded-sm border border-transparent !bg-transparent px-2.5 leading-none text-muted shadow-none  transition-colors duration-150 hover:!bg-transparent hover:text-txt active:!bg-transparent text-xs-tight font-mono sm:text-xs`;
     return (_jsx(Button, { variant: appearance === "shell" ? "outline" : "ghost", "data-testid": dataTestId, "data-status": status.kind, className: `${buttonClassName} ${compactOnMobile ? "max-[380px]:w-[2.375rem] max-[380px]:min-w-[2.375rem] max-[380px]:justify-center max-[380px]:px-0" : ""}`, "aria-label": status.title, title: status.title, onClick: onClick, style: {
             clipPath: "none",
             WebkitClipPath: "none",

package/components/cloud/FlaminaGuide.d.ts

@@ -1,4 +1,4 @@
-import type { FlaminaGuideTopic } from "../../state/types";
+import type { FlaminaGuideTopic } from "../../state/types.js";
 export declare function FlaminaGuideCard({ topic, className, }: {
     topic: FlaminaGuideTopic;
     className?: string;

package/components/cloud/FlaminaGuide.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlaminaGuide.d.ts","sourceRoot":"","sources":["../../../../../../src/components/cloud/FlaminaGuide.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAY,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAkFrE,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,SAAc,GACf,EAAE;IACD,KAAK,EAAE,iBAAiB,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CA8CA;AAED,wBAAgB,sBAAsB,CAAC,EACrC,SAAc,EACd,UAAU,GACX,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAChD,kDA8FA"}
+{"version":3,"file":"FlaminaGuide.d.ts","sourceRoot":"","sources":["../../../../../../src/components/cloud/FlaminaGuide.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAY,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAkFrE,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,SAAc,GACf,EAAE;IACD,KAAK,EAAE,iBAAiB,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CA8CA;AAED,wBAAgB,sBAAsB,CAAC,EACrC,SAAc,EACd,UAAU,GACX,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAChD,kDAmGA"}

package/components/cloud/FlaminaGuide.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useApp } from "../../state/index.js";
+import { useAppSelector, useAppSelectorShallow } from "../../state/index.js";
 import { Button } from "../ui/button.js";
 const GUIDE_CONTENT = {
     provider: {
@@ -58,14 +58,19 @@ const TASK_DESCRIPTIONS = {
     features: { key: "flaminaguide.tasks.features.description" },
 };
 export function FlaminaGuideCard({ topic, className = "", }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const guide = GUIDE_CONTENT[topic];
-    return (_jsxs("section", { className: `rounded-sm border border-accent/25 bg-card/70 px-4 py-4 text-left backdrop-blur-sm ${className}`.trim(), children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx("span", { className: "rounded-full border border-accent/30 bg-accent/10 px-2 py-1 text-2xs font-semibold uppercase tracking-[0.16em] text-txt", children: "Flamina" }), _jsx("h3", { className: "text-sm font-semibold text-txt-strong", children: t(guide.titleKey, { defaultValue: guide.titleDefault }) })] }), _jsx("p", { className: "mb-3 text-sm text-muted", children: t(guide.descriptionKey, { defaultValue: guide.descriptionDefault }) }), _jsxs("div", { className: "space-y-2 text-xs leading-5 text-txt", children: [_jsxs("p", { children: [_jsx("span", { className: "font-semibold text-txt-strong", children: t("flaminaguide.WhenToUseLabel") }), " ", t(guide.whenToUseKey, { defaultValue: guide.whenToUseDefault })] }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold text-txt-strong", children: t("flaminaguide.IfYouSkipLabel") }), " ", t(guide.skipEffectKey, { defaultValue: guide.skipEffectDefault })] }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold text-txt-strong", children: t("flaminaguide.CharacterImpactLabel") }), " ", t(guide.characterImpactKey, {
+    return (_jsxs("section", { className: `rounded-sm border border-accent/25 bg-card/95 px-4 py-4 text-left ${className}`.trim(), children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx("span", { className: "rounded-full border border-accent/30 bg-accent/10 px-2 py-1 text-2xs font-semibold uppercase tracking-[0.16em] text-txt", children: "Flamina" }), _jsx("h3", { className: "text-sm font-semibold text-txt-strong", children: t(guide.titleKey, { defaultValue: guide.titleDefault }) })] }), _jsx("p", { className: "mb-3 text-sm text-muted", children: t(guide.descriptionKey, { defaultValue: guide.descriptionDefault }) }), _jsxs("div", { className: "space-y-2 text-xs leading-5 text-txt", children: [_jsxs("p", { children: [_jsx("span", { className: "font-semibold text-txt-strong", children: t("flaminaguide.WhenToUseLabel") }), " ", t(guide.whenToUseKey, { defaultValue: guide.whenToUseDefault })] }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold text-txt-strong", children: t("flaminaguide.IfYouSkipLabel") }), " ", t(guide.skipEffectKey, { defaultValue: guide.skipEffectDefault })] }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold text-txt-strong", children: t("flaminaguide.CharacterImpactLabel") }), " ", t(guide.characterImpactKey, {
                                 defaultValue: guide.characterImpactDefault,
                             })] }), _jsx("p", { className: "rounded-sm border border-accent/20 bg-accent/5 px-3 py-2 text-xs-tight text-txt", children: t(guide.recommendedKey, { defaultValue: guide.recommendedDefault }) })] })] }));
 }
 export function DeferredSetupChecklist({ className = "", onOpenTask, }) {
-    const { firstRunDeferredTasks, postFirstRunChecklistDismissed, setState, t } = useApp();
+    const { firstRunDeferredTasks, postFirstRunChecklistDismissed, setState, t } = useAppSelectorShallow((s) => ({
+        firstRunDeferredTasks: s.firstRunDeferredTasks,
+        postFirstRunChecklistDismissed: s.postFirstRunChecklistDismissed,
+        setState: s.setState,
+        t: s.t,
+    }));
     if (postFirstRunChecklistDismissed ||
         !Array.isArray(firstRunDeferredTasks) ||
         firstRunDeferredTasks.length === 0) {
@@ -78,7 +83,7 @@ export function DeferredSetupChecklist({ className = "", onOpenTask, }) {
     const markDone = (task) => {
         setState("firstRunDeferredTasks", firstRunDeferredTasks.filter((current) => current !== task));
     };
-    return (_jsxs("section", { className: `rounded-sm border border-border/60 bg-card/70 px-4 py-4 backdrop-blur-sm ${className}`.trim(), children: [_jsxs("div", { className: "mb-3 flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-txt-strong", children: t("flaminaguide.FinishSetupLater") }), _jsx("p", { className: "text-xs text-muted", children: t("flaminaguide.FinishSetupLaterDescription") })] }), _jsx(Button, { variant: "ghost", size: "sm", className: "rounded-full text-xs-tight font-semibold uppercase tracking-[0.12em] text-muted", onClick: () => setState("postFirstRunChecklistDismissed", true), children: t("common.dismiss") })] }), _jsx("div", { className: "space-y-2", children: tasks.map((task) => (_jsxs("div", { className: "flex flex-col gap-2 rounded-sm border border-border/50 bg-bg/50 px-3 py-3 md:flex-row md:items-center md:justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium text-txt-strong", children: t(TASK_LABELS[task].key, {
+    return (_jsxs("section", { className: `rounded-sm border border-border/60 bg-card/95 px-4 py-4 ${className}`.trim(), children: [_jsxs("div", { className: "mb-3 flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-txt-strong", children: t("flaminaguide.FinishSetupLater") }), _jsx("p", { className: "text-xs text-muted", children: t("flaminaguide.FinishSetupLaterDescription") })] }), _jsx(Button, { variant: "ghost", size: "sm", className: "rounded-full text-xs-tight font-semibold uppercase tracking-[0.12em] text-muted", onClick: () => setState("postFirstRunChecklistDismissed", true), children: t("common.dismiss") })] }), _jsx("div", { className: "space-y-2", children: tasks.map((task) => (_jsxs("div", { className: "flex flex-col gap-2 rounded-sm border border-border/50 bg-bg/50 px-3 py-3 md:flex-row md:items-center md:justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium text-txt-strong", children: t(TASK_LABELS[task].key, {
                                         defaultValue: TASK_LABELS[task].defaultValue,
                                     }) }), _jsx("p", { className: "text-xs text-muted", children: t(TASK_DESCRIPTIONS[task].key, {
                                         defaultValue: TASK_DESCRIPTIONS[task].defaultValue,

package/components/companion/injected.d.ts

@@ -1,4 +1,4 @@
-import type { CompanionInferenceNotice } from "../../config/boot-config";
+import type { CompanionInferenceNotice } from "../../config/boot-config.js";
 export declare function CompanionInferenceAlertButton({ notice, onClick, }: {
     notice: CompanionInferenceNotice;
     onClick: () => void;

package/components/companion/injected.hooks.d.ts

@@ -1,4 +1,4 @@
-import type { CompanionInferenceNotice, CompanionSceneStatus, ResolveCompanionInferenceNoticeArgs } from "../../config/boot-config";
+import type { CompanionInferenceNotice, CompanionSceneStatus, ResolveCompanionInferenceNoticeArgs } from "../../config/boot-config.js";
 export declare function resolveCompanionInferenceNotice(args: ResolveCompanionInferenceNoticeArgs): CompanionInferenceNotice | null;
 export declare function useCompanionSceneStatus(): CompanionSceneStatus;
 //# sourceMappingURL=injected.hooks.d.ts.map

package/components/composites/chat/ChatVoiceStatusBar.d.ts

@@ -10,8 +10,8 @@
  * - latency badge (speechEnd → voiceStart) with traffic-light colouring
  */
 import type * as React from "react";
-import type { ContinuousChatLatency } from "../../../hooks/useContinuousChat";
-import type { VoiceContinuousStatus, VoiceSpeakerMetadata } from "../../../voice/voice-chat-types";
+import type { ContinuousChatLatency } from "../../../hooks/useContinuousChat.js";
+import type { VoiceContinuousStatus, VoiceSpeakerMetadata } from "../../../voice/voice-chat-types.js";
 export interface ChatVoiceStatusBarProps {
     status: VoiceContinuousStatus;
     interimTranscript?: string;