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

package/components/character/MusicLibraryCharacterWidget.d.ts

@@ -1,3 +1,3 @@
-import type { WidgetProps } from "../../widgets/types";
+import type { WidgetProps } from "../../widgets/types.js";
 export declare function MusicLibraryCharacterWidget({ pluginState }: WidgetProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=MusicLibraryCharacterWidget.d.ts.map

package/components/character/character-editor-helpers.d.ts

@@ -3,8 +3,8 @@
  * for testability and reuse.
  */
 import type { StylePreset } from "@elizaos/shared";
-import type { CharacterRosterEntry } from "./CharacterRoster";
-export { replaceNameTokens } from "../../utils/name-tokens";
+import type { CharacterRosterEntry } from "./CharacterRoster.js";
+export { replaceNameTokens } from "../../utils/name-tokens.js";
 export type FirstRunPreset = StylePreset;
 export declare function getFirstRunPresetStyles(options: unknown): readonly FirstRunPreset[];
 export declare function replaceCharacterToken(value: string, name: string): string;

package/components/character/character-hub-helpers.d.ts

@@ -1,5 +1,5 @@
-import type { CharacterHistoryEntry, DocumentRecord, ExperienceRecord, RelationshipsActivityItem } from "../../api";
-import type { CharacterExperienceRecord, CharacterHubActivityItem, CharacterPersonalityHistoryItem } from "./character-hub-types";
+import type { CharacterHistoryEntry, DocumentRecord, ExperienceRecord, RelationshipsActivityItem } from "../../api/index.js";
+import type { CharacterExperienceRecord, CharacterHubActivityItem, CharacterPersonalityHistoryItem } from "./character-hub-types.js";
 export declare const CHARACTER_HUB_SECTIONS: readonly ["overview", "personality", "documents", "skills", "experience", "relationships"];
 export type CharacterHubSection = (typeof CHARACTER_HUB_SECTIONS)[number];
 export declare function getCharacterHubSectionLabel(section: CharacterHubSection): string;

package/components/character/character-voice-config.d.ts

@@ -1,8 +1,8 @@
 /**
  * Voice-related constants and helpers extracted from CharacterEditor.
  */
-import type { VoiceConfig } from "../../api/client";
-import type { CharacterRosterEntry } from "./CharacterRoster";
+import type { VoiceConfig } from "../../api/client.js";
+import type { CharacterRosterEntry } from "./CharacterRoster.js";
 export declare const DEFAULT_ELEVEN_FAST_MODEL = "eleven_flash_v2_5";
 export declare const ELEVENLABS_VOICE_GROUPS: {
     labelKey: string;

package/components/character/useCharacterHubData.d.ts

@@ -0,0 +1,41 @@
+/**
+ * useCharacterHubData — consolidates the 5 read fetches that back the
+ * CharacterHubView dashboard (history, experiences, relationship activity,
+ * documents, learned curated skills).
+ *
+ * Each fetch is wrapped by `useFetchData` (so cancellation + error surfacing
+ * are uniform) and projected into the simpler `{ data, loading, error,
+ * refetch, mutate }` shape callers actually want. Local-storage cache hydration
+ * + write-through stays here too — these are the same effects the hub used
+ * to inline at module load.
+ *
+ * If you need to extend behaviour:
+ *   - to invalidate a fetch from a write handler: `mutate(next)` for an
+ *     optimistic update, or `refetch()` for a re-pull.
+ *   - to add a new fetch: do it here, not back in the component, so the hub
+ *     stays a section orchestrator.
+ */
+import type { CharacterHistoryEntry, DocumentRecord, ExperienceRecord, RelationshipsActivityItem } from "../../api/client-types.js";
+import { type FetchMutator } from "../../hooks/useFetchData.js";
+export type LearnedSkillSummary = {
+    description?: string | null;
+    name: string;
+    source?: string | null;
+    status?: "active" | "proposed" | "disabled" | string;
+};
+export type FetchSlice<T> = {
+    data: T;
+    loading: boolean;
+    error: Error | null;
+    refetch: () => void;
+    mutate: FetchMutator<T>;
+};
+export interface CharacterHubData {
+    documents: FetchSlice<DocumentRecord[]>;
+    history: FetchSlice<CharacterHistoryEntry[]>;
+    experiences: FetchSlice<ExperienceRecord[]>;
+    relationshipActivity: FetchSlice<RelationshipsActivityItem[]>;
+    learnedSkills: FetchSlice<LearnedSkillSummary[]>;
+}
+export declare function useCharacterHubData(): CharacterHubData;
+//# sourceMappingURL=useCharacterHubData.d.ts.map

package/components/character/useCharacterHubData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCharacterHubData.d.ts","sourceRoot":"","sources":["../../../../../../src/components/character/useCharacterHubData.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH,OAAO,KAAK,EACV,qBAAqB,EACrB,cAAc,EACd,gBAAgB,EAChB,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,0BAA0B,CAAC;AAE3E,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;CACtD,CAAC;AAMF,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI;IAC1B,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,CAAC,CAAC;IACxC,OAAO,EAAE,UAAU,CAAC,qBAAqB,EAAE,CAAC,CAAC;IAC7C,WAAW,EAAE,UAAU,CAAC,gBAAgB,EAAE,CAAC,CAAC;IAC5C,oBAAoB,EAAE,UAAU,CAAC,yBAAyB,EAAE,CAAC,CAAC;IAC9D,aAAa,EAAE,UAAU,CAAC,mBAAmB,EAAE,CAAC,CAAC;CAClD;AA+FD,wBAAgB,mBAAmB,IAAI,gBAAgB,CA0DtD"}

package/components/character/useCharacterHubData.js

@@ -0,0 +1,112 @@
+/**
+ * useCharacterHubData — consolidates the 5 read fetches that back the
+ * CharacterHubView dashboard (history, experiences, relationship activity,
+ * documents, learned curated skills).
+ *
+ * Each fetch is wrapped by `useFetchData` (so cancellation + error surfacing
+ * are uniform) and projected into the simpler `{ data, loading, error,
+ * refetch, mutate }` shape callers actually want. Local-storage cache hydration
+ * + write-through stays here too — these are the same effects the hub used
+ * to inline at module load.
+ *
+ * If you need to extend behaviour:
+ *   - to invalidate a fetch from a write handler: `mutate(next)` for an
+ *     optimistic update, or `refetch()` for a re-pull.
+ *   - to add a new fetch: do it here, not back in the component, so the hub
+ *     stays a section orchestrator.
+ */
+import { useCallback } from "react";
+import { client } from "../../api/client.js";
+import { useFetchData } from "../../hooks/useFetchData.js";
+const HUB_CACHE_PREFIX = "character-hub-cache";
+function hubCacheKey(suffix) {
+    return `${HUB_CACHE_PREFIX}:${suffix}`;
+}
+function readHubCache(suffix, fallback) {
+    if (typeof window === "undefined")
+        return fallback;
+    try {
+        const raw = window.localStorage.getItem(hubCacheKey(suffix));
+        if (!raw)
+            return fallback;
+        const parsed = JSON.parse(raw);
+        return parsed ?? fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
+function writeHubCache(suffix, value) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.setItem(hubCacheKey(suffix), JSON.stringify(value));
+    }
+    catch {
+        /* ignore quota / serialization errors */
+    }
+}
+/**
+ * Project a `useFetchData` discriminated-union result into a flat
+ * `{ data, loading, error, refetch, mutate }` slice. `data` is seeded from
+ * a local-storage cache so the dashboard renders populated content
+ * immediately on remount; subsequent fetches overwrite it. A successful
+ * fetch is also written back through `onSuccess` so the cache stays warm.
+ */
+function useFetchSlice(cacheKey, fetcher, project, initial, onSuccess) {
+    const cached = readHubCache(cacheKey, initial);
+    // Adapter wraps the fetcher to (a) project the response shape callers want
+    // and (b) write through to the hub cache on success. Keeping side effects
+    // inside the fetcher means they only run for a request that actually
+    // completes (not for an aborted one).
+    // biome-ignore lint/correctness/useExhaustiveDependencies: callers pass stable fetch/project functions; cacheKey is the fetch identity.
+    const adaptedFetcher = useCallback(async (signal) => {
+        const raw = await fetcher(signal);
+        const projected = project(raw);
+        writeHubCache(cacheKey, projected);
+        onSuccess?.(projected, raw);
+        return projected;
+    }, 
+    // The dependency contract is intentional: callers pass a stable fetcher
+    // (`client.x` methods are stable) and the projector/onSuccess capture
+    // refs they care about. Re-creating the adapter on every render would
+    // not retrigger the underlying effect (its dep list is the empty
+    // tuple), so identity churn here is harmless.
+    [cacheKey]);
+    const result = useFetchData(adaptedFetcher, []);
+    const data = result.status === "success" ? result.data : cached;
+    // Wrap mutate so optimistic updates also write through to the cache and
+    // can be called before the initial fetch has resolved. The bare
+    // `result.mutate` throws when an updater fn runs against a non-success
+    // state, which would surprise downstream callers (e.g. save/delete
+    // handlers that fire while we are still loading on a cold mount).
+    const baseMutate = result.mutate;
+    const mutate = useCallback((next) => {
+        const resolved = typeof next === "function"
+            ? next(data)
+            : next;
+        writeHubCache(cacheKey, resolved);
+        baseMutate(resolved);
+    }, [baseMutate, cacheKey, data]);
+    return {
+        data,
+        loading: result.status === "loading",
+        error: result.status === "error" ? result.error : null,
+        refetch: result.refetch,
+        mutate,
+    };
+}
+export function useCharacterHubData() {
+    const documents = useFetchSlice("documents", () => client.listDocuments({ limit: 100 }), (response) => response.documents ?? [], []);
+    const history = useFetchSlice("history", () => client.listCharacterHistory({ limit: 100 }), (response) => response.history, []);
+    const experiences = useFetchSlice("experience-records", () => client.listExperiences({ limit: 100 }), (response) => response.experiences, []);
+    const relationshipActivity = useFetchSlice("relationship-activity", () => client.getRelationshipsActivity(50), (response) => response.activity ?? [], []);
+    const learnedSkills = useFetchSlice("learned-skills", () => client.fetch("/api/skills/curated"), (data) => (data.skills ?? []).filter((skill) => skill.source !== "human"), []);
+    return {
+        documents,
+        history,
+        experiences,
+        relationshipActivity,
+        learnedSkills,
+    };
+}

package/components/chat/AccountRequiredCard.d.ts

@@ -1,4 +1,4 @@
-import type { ConnectorAccountRecord } from "../../api/client-agent";
+import type { ConnectorAccountRecord } from "../../api/client-agent.js";
 export interface AccountRequiredCardProps {
     accounts: ConnectorAccountRecord[];
     className?: string;

package/components/chat/AgentActivityBox.d.ts

@@ -1,4 +1,4 @@
-import type { CodingAgentSession } from "../../api/client-types-cloud";
+import type { CodingAgentSession } from "../../api/client-types-cloud.js";
 interface AgentActivityBoxProps {
     sessions: CodingAgentSession[];
     onSessionClick?: (sessionId: string) => void;

package/components/chat/AgentActivityBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AgentActivityBox.d.ts","sourceRoot":"","sources":["../../../../../../src/components/chat/AgentActivityBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AA6BvE,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,cAAc,GACf,EAAE,qBAAqB,kDAsDvB"}
+{"version":3,"file":"AgentActivityBox.d.ts","sourceRoot":"","sources":["../../../../../../src/components/chat/AgentActivityBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AA2CvE,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,cAAc,GACf,EAAE,qBAAqB,kDAsDvB"}

package/components/chat/AgentActivityBox.js

@@ -1,26 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { activityEventToPlaintext } from "@elizaos/core";
 import { PULSE_STATUSES, STATUS_DOT, } from "../../chat/coding-agent-session-state.js";
-import { useApp } from "../../state/index.js";
-/** Derive activity text for sessions hydrated from the server (no lastActivity yet). */
+import { useAppSelector } from "../../state/index.js";
+/** Session statuses the canonical pty serializer turns into useful text. */
+const SUMMARIZABLE_STATUSES = new Set([
+    "tool_running",
+    "blocked",
+    "error",
+]);
+/**
+ * Derive activity text for sessions hydrated from the server (no lastActivity
+ * yet). Maps the session status onto a synthetic pty activity event and routes
+ * it through the canonical `activityEventToPlaintext` serializer so the rail
+ * speaks the same language as the live WebSocket stream (see
+ * `useActivityEvents`). Statuses the serializer does not summarize fall back to
+ * a localized "Running" label.
+ */
 function deriveActivity(s, t) {
-    if (s.status === "tool_running" && s.toolDescription) {
-        return t("agentactivitybox.RunningTool", {
-            defaultValue: "Running {{tool}}",
-            tool: s.toolDescription,
-        }).slice(0, 60);
+    const fallback = t("appsview.Running", { defaultValue: "Running" });
+    if (!SUMMARIZABLE_STATUSES.has(s.status)) {
+        return fallback;
     }
-    if (s.status === "blocked") {
-        return t("agentactivitybox.WaitingForInput", {
-            defaultValue: "Waiting for input",
-        });
-    }
-    if (s.status === "error") {
-        return t("common.error", { defaultValue: "Error" });
-    }
-    return t("appsview.Running", { defaultValue: "Running" });
+    const summary = activityEventToPlaintext({
+        eventType: s.status,
+        sessionId: s.sessionId,
+        ...(s.toolDescription
+            ? { data: { description: s.toolDescription } }
+            : {}),
+    }, { maxLength: 60 });
+    return summary?.plaintext ?? fallback;
 }
 export function AgentActivityBox({ sessions, onSessionClick, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     if (!sessions || sessions.length === 0)
         return null;
     return (_jsx("div", { className: "px-3 py-2 space-y-1 z-[1] mb-2 relative rounded-sm border border-border bg-card ", children: sessions.map((s) => (_jsxs("button", { type: "button", onClick: () => onSessionClick?.(s.sessionId), className: "flex items-center gap-1.5 min-w-0 w-full text-left cursor-pointer hover:bg-bg-hover rounded-sm px-1 -mx-1 transition-colors", children: [_jsx("span", { className: `inline-block w-1.5 h-1.5 rounded-full shrink-0 ${STATUS_DOT[s.status] ?? "bg-muted"}${PULSE_STATUSES.has(s.status) ? " animate-pulse" : ""}` }), _jsx("span", { className: "text-xs-tight font-medium text-txt max-w-[120px] truncate shrink-0", children: s.label }), _jsx("span", { className: `text-xs-tight truncate min-w-0 flex-1 ${s.status === "error"

package/components/chat/AppsSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/chat/AppsSection.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqCvC,MAAM,WAAW,gBAAgB;IAC/B,4EAA4E;IAC5E,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,EAAE,YAAY,EAAE,GAAE,gBAAqB,kDA8TlE"}
+{"version":3,"file":"AppsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/chat/AppsSection.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA8BvC,MAAM,WAAW,gBAAgB;IAC/B,4EAA4E;IAC5E,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,EAAE,YAAY,EAAE,GAAE,gBAAqB,kDAqUlE"}

package/components/chat/AppsSection.js

@@ -8,7 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LayoutGrid, MoreHorizontal } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { client } from "../../api/index.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { openExternalUrl } from "../../utils/index.js";
 import { AppIdentityTile } from "../apps/app-identity.js";
 import { loadMergedCatalogApps } from "../apps/catalog-loader.js";
@@ -17,22 +17,21 @@ import { getInternalToolAppTargetTab } from "../apps/internal-tool-apps.js";
 import { isOverlayApp } from "../apps/overlay-app-registry.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../ui/dropdown-menu.js";
 import { WidgetSection } from "./widgets/shared.js";
-// ---------------------------------------------------------------------------
-// Ring classes derived from AppRunSummary.health.state
-// ---------------------------------------------------------------------------
-function getRunRingClass(run) {
-    const state = run.health?.state;
-    if (state === "healthy")
-        return "ring-2 ring-ok/60";
-    if (state === "degraded")
-        return "ring-2 ring-warn/60";
-    return "ring-2 ring-danger/60";
+function getRunRingClass(_run) {
+    return "";
 }
 function isOverlayLaunchApp(app) {
     return isOverlayApp(app.name) || app.launchType === "overlay";
 }
 export function AppsSection({ headerAction } = {}) {
-    const { favoriteApps: favoriteAppsValue, appRuns, setTab, setState, setActionNotice, t, } = useApp();
+    const { favoriteApps: favoriteAppsValue, appRuns, setTab, setState, setActionNotice, t, } = useAppSelectorShallow((s) => ({
+        favoriteApps: s.favoriteApps,
+        appRuns: s.appRuns,
+        setTab: s.setTab,
+        setState: s.setState,
+        setActionNotice: s.setActionNotice,
+        t: s.t,
+    }));
     const favoriteApps = Array.isArray(favoriteAppsValue)
         ? favoriteAppsValue
         : [];
@@ -185,13 +184,13 @@ export function AppsSection({ headerAction } = {}) {
                 return (_jsxs("div", { className: "group relative", "data-testid": `apps-section-tile-${app.name}`, children: [_jsx("button", { type: "button", title: displayName, "aria-label": t("chatsidebar.launchApp", {
                                 defaultValue: `Launch ${displayName}`,
                                 name: displayName,
-                            }), className: `rounded-sm transition-transform hover:scale-105 ${ringClass}`, onClick: () => void handleLaunch(app), children: _jsx(AppIdentityTile, { app: app, active: isRunning, size: "sm", imageOnly: true }) }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": `Actions for ${displayName}`, "data-testid": `apps-section-kebab-${app.name}`, onClick: (event) => event.stopPropagation(), className: "absolute -right-1 -top-1 inline-flex h-5 w-5 items-center justify-center rounded-full border border-border bg-bg text-muted opacity-0 transition-opacity hover:text-txt focus:opacity-100 focus-visible:opacity-100 group-hover:opacity-100", children: _jsx(MoreHorizontal, { className: "h-3 w-3", "aria-hidden": true }) }) }), _jsxs(DropdownMenuContent, { align: "end", sideOffset: 4, className: "w-36", onClick: (event) => event.stopPropagation(), children: [_jsx(DropdownMenuItem, { "data-testid": `apps-section-launch-${app.name}`, onSelect: () => void handleLaunch(app), children: t("settings.sections.apps.launch", {
+                            }), className: `rounded-sm transition-transform hover:scale-105 ${ringClass}`, onClick: () => void handleLaunch(app), children: _jsx(AppIdentityTile, { app: app, active: isRunning, size: "sm", imageOnly: true }) }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": `Actions for ${displayName}`, "data-testid": `apps-section-kebab-${app.name}`, onClick: (event) => event.stopPropagation(), className: "absolute -right-1 -top-1 inline-flex h-5 w-5 items-center justify-center rounded-full border border-border bg-bg text-muted opacity-0 transition-opacity hover:text-txt   group-hover:opacity-100", children: _jsx(MoreHorizontal, { className: "h-3 w-3", "aria-hidden": true }) }) }), _jsxs(DropdownMenuContent, { align: "end", sideOffset: 4, className: "w-36", onClick: (event) => event.stopPropagation(), children: [_jsx(DropdownMenuItem, { "data-testid": `apps-section-launch-${app.name}`, onSelect: () => void handleLaunch(app), children: t("settings.sections.apps.launch", {
                                                 defaultValue: "Launch",
                                             }) }), _jsx(DropdownMenuItem, { "data-testid": `apps-section-relaunch-${app.name}`, onSelect: () => void handleRelaunch(app), children: t("settings.sections.apps.relaunch", {
                                                 defaultValue: "Relaunch",
                                             }) }), _jsx(DropdownMenuItem, { "data-testid": `apps-section-edit-${app.name}`, onSelect: () => void handleEdit(app), children: t("settings.sections.apps.edit", {
                                                 defaultValue: "Edit",
-                                            }) }), isRunning ? (_jsx(DropdownMenuItem, { "data-testid": `apps-section-stop-${app.name}`, className: "text-danger focus:text-danger", onSelect: () => void handleStop(app), children: t("settings.sections.apps.stop", {
+                                            }) }), isRunning ? (_jsx(DropdownMenuItem, { "data-testid": `apps-section-stop-${app.name}`, className: "text-danger ", onSelect: () => void handleStop(app), children: t("settings.sections.apps.stop", {
                                                 defaultValue: "Stop",
                                             }) })) : null] })] })] }, app.name));
             }) })) : null }));

package/components/chat/ConnectorAccountPicker.d.ts

@@ -1,4 +1,4 @@
-import type { ConnectorAccountRecord } from "../../api/client-agent";
+import type { ConnectorAccountRecord } from "../../api/client-agent.js";
 export interface ConnectorAccountPickerProps {
     accounts: ConnectorAccountRecord[];
     className?: string;

package/components/chat/InlineWidgetText.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+import "./widgets/inline-builtins.js";
+export declare function InlineWidgetText({ content }: {
+    content: string;
+}): ReactNode;
+//# sourceMappingURL=InlineWidgetText.d.ts.map

package/components/chat/InlineWidgetText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineWidgetText.d.ts","sourceRoot":"","sources":["../../../../../../src/components/chat/InlineWidgetText.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAgBhD,OAAO,2BAA2B,CAAC;AAInC,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CA+G5E"}

package/components/chat/InlineWidgetText.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// Renders assistant message text with its inline widgets (#8876, #8997, #9304).
+//
+// The continuous-chat overlay shows raw `message.content`. Without segmentation
+// it would leak, as literal text, every marker the full ChatView surface
+// handles: the inline-widget markers (`[TASK:…]`, `[CHOICE:…]`, `[FORM]…[/FORM]`,
+// `[FOLLOWUPS]…[/FOLLOWUPS]`), the structured markers (`[CONFIG:…]`, fenced
+// UiSpec JSON, permission requests), and hidden reasoning/tool tags.
+//
+// To stay consistent with MessageContent (ChatView) and never drift, this
+// delegates to the SAME `parseSegments` parser instead of re-implementing a
+// partial one. It renders the prose, fenced code blocks, and the interactive
+// inline widgets (task card / choice buttons / inline form / suggestion chips).
+// The heavier affordances — plugin config card, UiSpec block, permission card —
+// reuse the same renderers as MessageContent. Handlers come from the app +
+// composer contexts, so callers just render
+// `<InlineWidgetText content={msg.content} />`.
+import { useMemo } from "react";
+import { useAppSelectorShallow } from "../../state/index.js";
+import { useChatComposer } from "../../state/ChatComposerContext.hooks.js";
+import { CodeBlock } from "../ui/code-block.js";
+import { InlinePluginConfig, MessagePermissionCard, MessageUiSpecBlock, } from "./MessageContent.js";
+import { isSafeNormalizedPluginId, normalizePluginId, parseSegments, } from "./message-parser-helpers.js";
+// Side effect: register the built-in inline widgets (choice/followups/form/task).
+import "./widgets/inline-builtins.js";
+import { getInlineWidget } from "./widgets/inline-registry.js";
+import { useInlineWidgetContext } from "./widgets/use-inline-widget-context.js";
+export function InlineWidgetText({ content }) {
+    const { sendActionMessage } = useAppSelectorShallow((s) => ({
+        sendActionMessage: s.sendActionMessage,
+    }));
+    // Outside a chat provider this returns an inert setter, so prefill simply
+    // no-ops rather than throwing — safe on every surface.
+    const { setChatInput } = useChatComposer();
+    // Same shared contract MessageContent (ChatView) uses, so interactive inline
+    // widgets behave identically on both surfaces.
+    const ctx = useInlineWidgetContext(sendActionMessage, setChatInput);
+    // The overlay shows clean display text (no raw analysis view), so parse in
+    // non-analysis mode — hidden reasoning/tool tags are stripped, not leaked.
+    const segments = useMemo(() => {
+        try {
+            return parseSegments(content, false);
+        }
+        catch {
+            return [{ kind: "text", text: content }];
+        }
+    }, [content]);
+    // Fast path: a single plain-text segment (most replies) renders as-is.
+    if (segments.length === 1 && segments[0].kind === "text") {
+        return segments[0].text;
+    }
+    const keyCounts = new Map();
+    const nextKey = (base) => {
+        const n = (keyCounts.get(base) ?? 0) + 1;
+        keyCounts.set(base, n);
+        return `${base}:${n}`;
+    };
+    const nodes = [];
+    for (const seg of segments) {
+        switch (seg.kind) {
+            case "text": {
+                if (seg.text)
+                    nodes.push(_jsx("span", { children: seg.text }, nextKey("t")));
+                break;
+            }
+            case "code": {
+                nodes.push(_jsx("div", { className: "pointer-events-auto", children: _jsx(CodeBlock, { className: "my-2", value: seg.code, wrap: true, copyable: true, "data-testid": "code-block", ...(seg.lang ? { "data-lang": seg.lang } : {}) }) }, nextKey("code")));
+                break;
+            }
+            case "widget": {
+                const widget = getInlineWidget(seg.widgetKind);
+                if (widget) {
+                    const key = nextKey(`w-${seg.widgetKind}`);
+                    nodes.push(_jsx("div", { className: "pointer-events-auto", children: widget.render(seg.data, ctx, key) }, key));
+                }
+                break;
+            }
+            case "config": {
+                if (!isSafeNormalizedPluginId(normalizePluginId(seg.pluginId)))
+                    break;
+                nodes.push(_jsx("div", { className: "pointer-events-auto whitespace-normal text-txt [text-shadow:none]", children: _jsx(InlinePluginConfig, { pluginId: seg.pluginId }) }, nextKey(`config-${seg.pluginId}`)));
+                break;
+            }
+            case "ui-spec": {
+                nodes.push(_jsx("div", { className: "pointer-events-auto whitespace-normal text-txt [text-shadow:none]", children: _jsx(MessageUiSpecBlock, { spec: seg.spec, raw: seg.raw }) }, nextKey("ui-spec")));
+                break;
+            }
+            case "permission": {
+                nodes.push(_jsx("div", { className: "pointer-events-auto whitespace-normal text-txt [text-shadow:none]", children: _jsx(MessagePermissionCard, { payload: seg.payload }) }, nextKey(`permission-${seg.payload.feature}`)));
+                break;
+            }
+            // analysis-xml only appears in analysis mode. The overlay parses in
+            // display mode, so hidden reasoning/tool tags are stripped, not rendered.
+            default:
+                break;
+        }
+    }
+    return _jsx(_Fragment, { children: nodes });
+}

package/components/chat/MessageAttachments.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { MessageAttachment } from "../../api";
+import type { MessageAttachment } from "../../api/index.js";
 /**
  * Resolve an attachment URL for rendering. Absolute URLs (http(s), data:,
  * blob:, custom schemes) pass through untouched; an app-relative `/api/...`
@@ -7,6 +7,23 @@ import type { MessageAttachment } from "../../api";
  * loads across the dev proxy, prod same-origin, and desktop/native shells.
  */
 export declare function resolveAttachmentUrl(url: string): string;
+/**
+ * Fine-grained preview kind, derived at read time from the attachment's
+ * `contentType` + MIME + URL extension (and whether it carries extracted
+ * `text`). `ContentType` is frozen, so this richer kind is computed here rather
+ * than stored. Drives which tile renders:
+ *   - `"pdf"`  → inline native PDF viewer (or a download card when not inlinable)
+ *   - `"code"` → inline {@link CodeBlock} when `att.text` exists, else a card
+ *   - `"file"` → generic download/open card (the previous default)
+ */
+export type AttachmentPreviewKind = "pdf" | "model3d" | "code" | "file";
+/**
+ * Derive the inline-preview kind for a document/link attachment. Only called
+ * once an attachment has resolved to a non-media kind (not image/audio/video);
+ * media keeps its dedicated players. Pure + render-safe — inspects metadata
+ * only, never fetches.
+ */
+export declare function attachmentPreviewKind(att: MessageAttachment): AttachmentPreviewKind;
 export interface MessageAttachmentsProps {
     attachments: MessageAttachment[] | undefined;
     className?: string;
@@ -14,8 +31,10 @@ export interface MessageAttachmentsProps {
 /**
  * Renders the media attached to a chat message — both user uploads and
  * agent-generated media. Images open a full-screen lightbox; audio and video
- * get native players; documents/links render as a card with a download/open
- * affordance. Used by the chat overlay bubble and `MessageContent`.
+ * get native players; PDFs render the browser's native viewer inline; text/code
+ * render inline via {@link CodeBlock} when their content is available; other
+ * documents/links render as a card with a download/open affordance. Used by the
+ * chat overlay bubble and `MessageContent`.
  */
 export declare function MessageAttachments({ attachments, className, }: MessageAttachmentsProps): React.JSX.Element | null;
 //# sourceMappingURL=MessageAttachments.d.ts.map

package/components/chat/MessageAttachments.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageAttachments.d.ts","sourceRoot":"","sources":["../../../../../../src/components/chat/MessageAttachments.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACV,iBAAiB,EAElB,MAAM,WAAW,CAAC;AAOnB;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAMxD;AA+PD,MAAM,WAAW,uBAAuB;IACtC,WAAW,EAAE,iBAAiB,EAAE,GAAG,SAAS,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,WAAW,EACX,SAAS,GACV,EAAE,uBAAuB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAkFpD"}
+{"version":3,"file":"MessageAttachments.d.ts","sourceRoot":"","sources":["../../../../../../src/components/chat/MessageAttachments.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACV,iBAAiB,EAElB,MAAM,WAAW,CAAC;AAWnB;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAMxD;AA2FD;;;;;;;;GAQG;AACH,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAiBxE;;;;;GAKG;AACH,wBAAgB,qBAAqB,CACnC,GAAG,EAAE,iBAAiB,GACrB,qBAAqB,CAqCvB;AAqrBD,MAAM,WAAW,uBAAuB;IACtC,WAAW,EAAE,iBAAiB,EAAE,GAAG,SAAS,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,WAAW,EACX,SAAS,GACV,EAAE,uBAAuB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA0IpD"}