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

package/components/composites/chat/permission-card.js

@@ -1,59 +1,15 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { isPermissionId, openPermissionSettings, } from "@elizaos/shared";
+import { openPermissionSettings, } from "@elizaos/shared";
 import { useCallback, useEffect, useState } from "react";
+import { useBranding } from "../../../config/branding.js";
 import { cn } from "../../../lib/utils.js";
 import { Button } from "../../ui/button.js";
-/**
- * Friendly human-readable labels per permission id. Used as the card title
- * (e.g. `reminders` → "Apple Reminders").
- */
-export const PERMISSION_LABELS = {
-    accessibility: "Accessibility",
-    "screen-recording": "Screen Recording",
-    microphone: "Microphone",
-    camera: "Camera",
-    shell: "Shell",
-    "website-blocking": "Website Blocking",
-    location: "Location",
-    reminders: "Apple Reminders",
-    calendar: "Apple Calendar",
-    health: "Apple Health",
-    screentime: "Screen Time",
-    contacts: "Contacts",
-    notes: "Apple Notes",
-    notifications: "Notifications",
-    "full-disk": "Full Disk Access",
-    automation: "Automation",
-};
-export function getPermissionLabel(id) {
-    return PERMISSION_LABELS[id] ?? id;
-}
-function defaultStateFor(id) {
-    const platform = typeof navigator !== "undefined" && /Win/i.test(navigator.platform ?? "")
-        ? "win32"
-        : typeof navigator !== "undefined" &&
-            /Linux/i.test(navigator.platform ?? "")
-            ? "linux"
-            : "darwin";
-    return {
-        id,
-        status: "not-determined",
-        lastChecked: 0,
-        canRequest: true,
-        platform,
-    };
-}
-function parseFeatureRef(feature) {
-    // Wire format is `<app>.<area>.<action>` — collapse area+action into the
-    // registry's `{ app, action }` ref.
-    const parts = feature.split(".");
-    const app = parts[0] ?? "unknown";
-    const action = parts.slice(1).join(".") || "unknown";
-    return { app, action };
-}
+import { defaultStateFor, getPermissionLabel, parseFeatureRef, } from "./permission-card.helpers.js";
 export function PermissionCard({ permission, reason, feature, fallbackOffered = false, fallbackLabel, registry, initialState, onDismiss, onFallback, onGranted, onOpenSettings, labels = {}, className, }) {
+    const { appName } = useBranding();
     const [state, setState] = useState(initialState ?? registry?.get(permission) ?? defaultStateFor(permission));
     const [requesting, setRequesting] = useState(false);
+    const [checking, setChecking] = useState(false);
     const [dismissed, setDismissed] = useState(false);
     const handleGrant = useCallback(async () => {
         if (!registry)
@@ -73,6 +29,21 @@ export function PermissionCard({ permission, reason, feature, fallbackOffered =
             setRequesting(false);
         }
     }, [registry, permission, reason, feature, onGranted]);
+    const handleCheckAgain = useCallback(async () => {
+        if (!registry)
+            return;
+        setChecking(true);
+        try {
+            const next = await registry.check(permission);
+            setState(next);
+            if (next.status === "granted") {
+                onGranted?.(next);
+            }
+        }
+        finally {
+            setChecking(false);
+        }
+    }, [registry, permission, onGranted]);
     const handleOpenSettings = useCallback(() => {
         if (onOpenSettings) {
             void onOpenSettings(permission);
@@ -113,142 +84,82 @@ export function PermissionCard({ permission, reason, feature, fallbackOffered =
         return null;
     // Defensive: agent shouldn't emit a card for already-granted permissions.
     if (state.status === "granted") {
-        return (_jsxs("div", { "data-testid": "permission-card-granted", className: cn("mt-2 inline-flex items-center gap-1.5 rounded-md border border-success/30 bg-success/10 px-2 py-1 text-xs font-medium text-success", className), children: [labels.granted ?? "Access granted", " \u2713"] }));
+        return (_jsxs("div", { "data-testid": "permission-card-granted", className: cn("mt-2 inline-flex items-center gap-1.5 rounded-sm border border-success/30 bg-success/10 px-2 py-1 text-xs font-medium text-success", className), children: [labels.granted ?? "Access granted", " \u2713"] }));
     }
     const isRestrictedEntitlement = state.status === "restricted" &&
         state.restrictedReason === "entitlement_required";
-    const isDeniedNoRequest = state.status === "denied" && state.canRequest === false;
+    const isRestrictedUnavailable = state.status === "restricted" && !isRestrictedEntitlement;
+    const canOpenSettingsInstead = state.canRequest === false &&
+        (state.status === "denied" || state.status === "not-determined");
     const title = getPermissionLabel(permission);
+    const guidance = permissionGuidance(permission, state, appName);
     const resolvedFallbackLabel = fallbackLabel ??
         (permission === "reminders" ? "Use internal reminder" : "Use fallback");
-    return (_jsxs("section", { "data-testid": "permission-card", "data-permission": permission, "data-feature": feature, "data-status": state.status, "aria-label": `Permission request: ${title}`, className: cn("mt-2 rounded-lg border border-border/40 bg-bg-accent/60 p-3", className), children: [_jsxs("header", { className: "mb-1 flex items-center justify-between gap-2", children: [_jsx("h3", { className: "text-sm font-semibold text-txt-strong", children: title }), _jsx("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted", children: "Permission" })] }), _jsx("p", { className: "mb-3 text-sm leading-snug text-txt", children: reason }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [isRestrictedEntitlement ? (_jsx(Button, { variant: "default", size: "sm", disabled: true, "data-testid": "permission-card-primary", title: "Coming soon \u2014 requires app entitlement.", children: labels.comingSoon ?? "Coming soon — requires app entitlement" })) : isDeniedNoRequest ? (_jsx(Button, { variant: "default", size: "sm", onClick: handleOpenSettings, "data-testid": "permission-card-primary", children: labels.openSettings ?? "Open System Settings" })) : (_jsx(Button, { variant: "default", size: "sm", onClick: () => void handleGrant(), disabled: requesting || !registry, "data-testid": "permission-card-primary", children: requesting
+    return (_jsxs("section", { "data-testid": "permission-card", "data-permission": permission, "data-feature": feature, "data-status": state.status, "aria-label": `Permission request: ${title}`, className: cn("mt-2 rounded-sm border border-border/40 bg-bg-accent/60 p-3", className), children: [_jsxs("header", { className: "mb-1 flex items-center justify-between gap-2", children: [_jsx("h3", { className: "text-sm font-semibold text-txt-strong", children: title }), _jsx("span", { className: "rounded-full border border-border/50 px-2 py-0.5 text-[10px] font-medium uppercase text-muted", children: statusLabel(state) })] }), _jsx("p", { className: "mb-3 text-sm leading-snug text-txt", children: reason }), _jsxs("div", { className: "mb-3 rounded-sm border border-border/40 bg-surface/60 p-2 text-xs leading-relaxed text-muted", children: [_jsx("p", { className: "font-medium text-txt", children: guidance.primary }), _jsx("p", { className: "mt-1", children: guidance.secondary })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [isRestrictedEntitlement ? (_jsx(Button, { variant: "default", size: "sm", disabled: true, "data-testid": "permission-card-primary", title: "Coming soon \u2014 requires app entitlement.", children: labels.comingSoon ?? "Coming soon — requires app entitlement" })) : isRestrictedUnavailable || state.status === "not-applicable" ? (_jsx(Button, { variant: "default", size: "sm", disabled: true, "data-testid": "permission-card-primary", children: labels.unavailable ?? "Unavailable on this platform" })) : canOpenSettingsInstead ? (_jsx(Button, { variant: "default", size: "sm", onClick: handleOpenSettings, "data-testid": "permission-card-primary", children: labels.openSettings ?? "Open System Settings" })) : (_jsx(Button, { variant: "default", size: "sm", onClick: () => void handleGrant(), disabled: requesting || !registry, "data-testid": "permission-card-primary", children: requesting
                             ? (labels.granting ?? "Requesting…")
-                            : (labels.grantAccess ?? "Grant access") })), fallbackOffered ? (_jsx(Button, { variant: "outline", size: "sm", onClick: handleFallback, "data-testid": "permission-card-fallback", children: resolvedFallbackLabel })) : null, _jsx("button", { type: "button", onClick: handleDismiss, "data-testid": "permission-card-dismiss", className: "ml-auto text-xs text-muted hover:text-txt-strong", children: labels.notNow ?? "Not now" })] })] }));
+                            : (labels.grantAccess ?? "Grant access") })), registry ? (_jsx(Button, { variant: "outline", size: "sm", onClick: () => void handleCheckAgain(), disabled: checking || requesting, "data-testid": "permission-card-check-again", children: checking ? "Checking..." : "Check again" })) : null, fallbackOffered ? (_jsx(Button, { variant: "outline", size: "sm", onClick: handleFallback, "data-testid": "permission-card-fallback", children: resolvedFallbackLabel })) : null, _jsx("button", { type: "button", onClick: handleDismiss, "data-testid": "permission-card-dismiss", className: "ml-auto text-xs text-muted hover:text-txt-strong", children: labels.notNow ?? "Not now" })] })] }));
 }
-export function createClientPermissionsRegistry(clientLike) {
-    const states = new Map();
-    const subscribers = new Set();
-    const notify = () => {
-        const snapshot = Array.from(states.values());
-        for (const subscriber of subscribers) {
-            subscriber(snapshot);
-        }
-    };
-    const commit = (state) => {
-        states.set(state.id, state);
-        notify();
-        return state;
-    };
-    return {
-        get(id) {
-            return states.get(id) ?? defaultStateFor(id);
-        },
-        async check(id) {
-            return commit(await clientLike.getPermission(id));
-        },
-        async request(id, opts) {
-            const next = await clientLike.requestPermission(id);
-            return commit({
-                ...next,
-                lastBlockedFeature: next.lastBlockedFeature ?? {
-                    app: opts.feature.app,
-                    action: opts.feature.action,
-                    at: Date.now(),
-                },
-            });
-        },
-        recordBlock(id, feature) {
-            const current = states.get(id) ?? defaultStateFor(id);
-            commit({
-                ...current,
-                lastBlockedFeature: {
-                    app: feature.app,
-                    action: feature.action,
-                    at: Date.now(),
-                },
-            });
-        },
-        list() {
-            return Array.from(states.values());
-        },
-        pending() {
-            return Array.from(states.values()).filter((state) => state.status === "not-determined" ||
-                Boolean(state.lastBlockedFeature));
-        },
-        subscribe(cb) {
-            subscribers.add(cb);
-            return () => {
-                subscribers.delete(cb);
-            };
-        },
-        registerProber() {
-            // UI adapter delegates probing to the backend/native bridge.
-        },
-    };
+function statusLabel(state) {
+    if (state.status === "not-determined")
+        return "Not asked";
+    if (state.status === "not-applicable")
+        return "Unavailable";
+    return state.status.replace(/-/g, " ");
 }
-/**
- * Minimal UI-side parser for `permission_request` action blocks. Mirrors the
- * server-side `parseActionBlock` output for `permission_request` so the
- * chat surface can render the inline card without pulling in `@elizaos/agent`.
- *
- * Returns `null` for any other action block (`respond`, `escalate`,
- * `ignore`, `complete`) so the caller can fall back to plain text rendering.
- */
-export function parsePermissionRequestFromText(text) {
-    if (!text)
-        return null;
-    const safeText = text.length > 100_000 ? text.slice(0, 100_000) : text;
-    const fenced = safeText.match(/```(?:json)?\s{0,32}\n?(\{[\s\S]{0,50000}?\})\s{0,32}\n?```/);
-    let jsonStr = fenced?.[1];
-    let display = safeText;
-    if (fenced) {
-        display = safeText.replace(fenced[0], "").trim();
+function platformSettingsLabel(platform, appName) {
+    if (platform === "darwin")
+        return "System Settings > Privacy & Security";
+    if (platform === "ios")
+        return `Settings > ${appName}`;
+    if (platform === "android")
+        return `Settings > Apps > ${appName} > Permissions`;
+    if (platform === "win32")
+        return "Windows privacy settings";
+    if (platform === "linux")
+        return "system privacy settings";
+    return "browser settings";
+}
+function permissionGuidance(permission, state, appName) {
+    const title = getPermissionLabel(permission);
+    const settings = platformSettingsLabel(state.platform, appName);
+    if (state.status === "denied" || state.canRequest === false) {
+        return {
+            primary: `Turn on ${title} in ${settings}.`,
+            secondary: "After enabling it, return here and choose Check again. If you changed your mind, you can leave it off and use any offered fallback.",
+        };
     }
-    else {
-        const lastBrace = safeText.lastIndexOf("{");
-        if (lastBrace < 0)
-            return null;
-        jsonStr = safeText.slice(lastBrace);
-        display = safeText.slice(0, lastBrace).trim();
+    if (state.status === "restricted") {
+        return {
+            primary: `${title} is blocked by the current OS policy or app entitlement.`,
+            secondary: "This device may need a different build, entitlement, profile, or administrator setting before the feature can work.",
+        };
     }
-    if (!jsonStr)
-        return null;
-    let parsed;
-    try {
-        parsed = JSON.parse(jsonStr);
+    if (state.status === "not-applicable") {
+        return {
+            primary: `${title} is not available on this platform.`,
+            secondary: "The agent can continue only if there is a fallback that does not use this device capability.",
+        };
     }
-    catch {
-        return null;
+    if (permission === "usage-access") {
+        return {
+            primary: `Open Android Usage Access and allow ${appName}.`,
+            secondary: "This lets app blocking and Screen Time features read foreground app usage. Return here and choose Check again when done.",
+        };
     }
-    if (!parsed ||
-        typeof parsed !== "object" ||
-        parsed.action !== "permission_request") {
-        return null;
+    if (permission === "overlay") {
+        return {
+            primary: `Allow ${appName} to draw over other apps in Android settings.`,
+            secondary: "The blocking screen needs this to appear above distracting apps. If you cancel, press Grant access again.",
+        };
     }
-    const record = parsed;
-    const permission = record.permission;
-    const reason = record.reason;
-    const feature = record.feature;
-    if (!isPermissionId(permission) ||
-        typeof reason !== "string" ||
-        typeof feature !== "string") {
-        return null;
+    if (permission === "write-settings") {
+        return {
+            primary: `Open Android Write Settings and allow ${appName}.`,
+            secondary: "Android requires this separate settings screen for brightness and device-setting changes.",
+        };
     }
-    const payload = {
-        permission,
-        reason,
-        feature,
-        fallbackOffered: record.fallback_offered === true,
-        ...(typeof record.fallback_label === "string" &&
-            record.fallback_label.length > 0
-            ? { fallbackLabel: record.fallback_label }
-            : {}),
+    return {
+        primary: `When the OS prompt appears, choose Allow for ${title}.`,
+        secondary: `If you cancel by accident, press Grant access again. If the OS stops prompting, open settings, enable it for ${appName}, then check again.`,
     };
-    return { display, payload };
-}
-export function renderPermissionCardFromPayload(payload, opts = {}) {
-    if (!isPermissionId(payload.permission))
-        return null;
-    const { key, ...rest } = opts;
-    return (_jsx(PermissionCard, { permission: payload.permission, reason: payload.reason, feature: payload.feature, fallbackOffered: payload.fallbackOffered, fallbackLabel: payload.fallbackLabel, ...rest }, key ?? `permission-card:${payload.feature}`));
 }

package/components/composites/chat/permission-card.render.d.ts

@@ -0,0 +1,7 @@
+import type * as React from "react";
+import { type PermissionCardProps } from "./permission-card";
+import type { PermissionCardPayload } from "./permission-card.helpers";
+export declare function renderPermissionCardFromPayload(payload: PermissionCardPayload, opts?: Omit<PermissionCardProps, "permission" | "reason" | "feature" | "fallbackOffered" | "fallbackLabel"> & {
+    key?: string;
+}): React.ReactElement | null;
+//# sourceMappingURL=permission-card.render.d.ts.map

package/components/composites/chat/permission-card.render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"permission-card.render.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/chat/permission-card.render.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAEvE,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,qBAAqB,EAC9B,IAAI,GAAE,IAAI,CACR,mBAAmB,EACnB,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,iBAAiB,GAAG,eAAe,CAC1E,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAA;CAAO,GACxB,KAAK,CAAC,YAAY,GAAG,IAAI,CAc3B"}

package/components/composites/chat/permission-card.render.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isPermissionId } from "@elizaos/shared";
+import { PermissionCard } from "./permission-card.js";
+export function renderPermissionCardFromPayload(payload, opts = {}) {
+    if (!isPermissionId(payload.permission))
+        return null;
+    const { key, ...rest } = opts;
+    return (_jsx(PermissionCard, { permission: payload.permission, reason: payload.reason, feature: payload.feature, fallbackOffered: payload.fallbackOffered, fallbackLabel: payload.fallbackLabel, ...rest }, key ?? `permission-card:${payload.feature}`));
+}

package/components/composites/chat-search-hint.d.ts

@@ -0,0 +1,21 @@
+import type * as React from "react";
+interface ChatSearchHintProps {
+    /**
+     * Localized noun for what this view searches, e.g. "logs", "plugins", "people".
+     * Kept short — it's interpolated into the hint copy.
+     */
+    noun: string;
+    /** The live search query; when set, the hint confirms the active filter. */
+    query?: string;
+    className?: string;
+}
+/**
+ * A small, always-visible in-view hint that tells the user this view's search
+ * runs through the floating chat (the view registers a view→chat binding and has
+ * no search box of its own). It lives in the view's OWN header — not on the chat
+ * composer — so it stays visible even when the chat is collapsed to a pill, and
+ * it's query-aware so it doubles as a "filter is live" confirmation.
+ */
+export declare function ChatSearchHint({ noun, query, className, }: ChatSearchHintProps): React.ReactElement;
+export {};
+//# sourceMappingURL=chat-search-hint.d.ts.map

package/components/composites/chat-search-hint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-search-hint.d.ts","sourceRoot":"","sources":["../../../../../../src/components/composites/chat-search-hint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,UAAU,mBAAmB;IAC3B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,KAAK,EACL,SAAS,GACV,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAoB1C"}

package/components/composites/chat-search-hint.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { useTranslation } from "../../state/TranslationContext.hooks.js";
+/**
+ * A small, always-visible in-view hint that tells the user this view's search
+ * runs through the floating chat (the view registers a view→chat binding and has
+ * no search box of its own). It lives in the view's OWN header — not on the chat
+ * composer — so it stays visible even when the chat is collapsed to a pill, and
+ * it's query-aware so it doubles as a "filter is live" confirmation.
+ */
+export function ChatSearchHint({ noun, query, className, }) {
+    const { t } = useTranslation();
+    const q = query?.trim();
+    return (_jsx("p", { "data-testid": "chat-search-hint", className: cn("text-[13px] leading-relaxed text-txt/60", className), children: q
+            ? t("common.chatSearchActive", {
+                noun,
+                query: q,
+                defaultValue: "Showing {{noun}} for “{{query}}”",
+            })
+            : t("common.chatSearchHint", {
+                noun,
+                defaultValue: "Search {{noun}} by typing in the chat.",
+            }) }));
+}

package/components/composites/code/DiffReviewPanel.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Read-only, per-file review of the real git change set a coding sub-agent
+ * produced. Pure presentation: it parses the captured unified-diff string into
+ * per-file sections and renders each line styled by prefix. No API calls, no
+ * derived state beyond per-file collapse toggles.
+ *
+ * The change set originates server-side (orchestrator `WorkspaceChangeSet`,
+ * captured from git at `task_complete`) and reaches the UI on a task session
+ * record's `metadata.lastChangeSet`. This component only displays it.
+ */
+import type { ChangeSetData } from "../../../api/client-types-cloud";
+export interface DiffReviewPanelProps {
+    changeSet: ChangeSetData | undefined;
+    className?: string;
+}
+export declare function DiffReviewPanel({ changeSet, className, }: DiffReviewPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DiffReviewPanel.d.ts.map

package/components/composites/code/DiffReviewPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiffReviewPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/code/DiffReviewPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,aAAa,GAAG,SAAS,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsID,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,SAAS,GACV,EAAE,oBAAoB,2CAuCtB"}

package/components/composites/code/DiffReviewPanel.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Read-only, per-file review of the real git change set a coding sub-agent
+ * produced. Pure presentation: it parses the captured unified-diff string into
+ * per-file sections and renders each line styled by prefix. No API calls, no
+ * derived state beyond per-file collapse toggles.
+ *
+ * The change set originates server-side (orchestrator `WorkspaceChangeSet`,
+ * captured from git at `task_complete`) and reaches the UI on a task session
+ * record's `metadata.lastChangeSet`. This component only displays it.
+ */
+import { useMemo, useState } from "react";
+import { cn } from "../../../lib/utils.js";
+function classifyLine(text) {
+    if (text.startsWith("@@"))
+        return "hunk";
+    if (text.startsWith("+++") ||
+        text.startsWith("---") ||
+        text.startsWith("diff --git") ||
+        text.startsWith("index ") ||
+        text.startsWith("new file") ||
+        text.startsWith("deleted file") ||
+        text.startsWith("rename ") ||
+        text.startsWith("similarity ")) {
+        return "meta";
+    }
+    if (text.startsWith("+"))
+        return "add";
+    if (text.startsWith("-"))
+        return "remove";
+    return "context";
+}
+/**
+ * Derive the post-image path from a `diff --git a/<old> b/<new>` header,
+ * falling back to the old path. Returns undefined for any other line.
+ */
+function pathFromGitHeader(line) {
+    const match = /^diff --git a\/(.+?) b\/(.+)$/.exec(line);
+    if (!match)
+        return undefined;
+    return match[2] ?? match[1];
+}
+/**
+ * Split a captured unified-diff string into per-file sections. Every file the
+ * change set reports is represented even when its hunk text was omitted
+ * (the server caps how many file diffs it serializes), so a reviewer still sees
+ * the complete list of touched paths.
+ */
+function parseDiff(changeSet) {
+    const byPath = new Map();
+    const order = [];
+    const ensure = (path) => {
+        let entry = byPath.get(path);
+        if (!entry) {
+            entry = { path, lines: [] };
+            byPath.set(path, entry);
+            order.push(path);
+        }
+        return entry;
+    };
+    let current;
+    for (const raw of changeSet.diff ? changeSet.diff.split("\n") : []) {
+        const headerPath = pathFromGitHeader(raw);
+        if (headerPath) {
+            current = ensure(headerPath);
+        }
+        if (current) {
+            current.lines.push({ kind: classifyLine(raw), text: raw });
+        }
+    }
+    // Every reported changed file gets a section even if no hunk was serialized.
+    for (const path of changeSet.changedFiles)
+        ensure(path);
+    return order.map((path) => byPath.get(path));
+}
+const LINE_TONE = {
+    add: "text-success",
+    remove: "text-destructive",
+    hunk: "text-warning",
+    meta: "text-muted-foreground",
+    context: "text-foreground/80",
+};
+function DiffLineRow({ line }) {
+    return (_jsx("div", { className: cn("whitespace-pre-wrap break-all font-mono text-[12px] leading-relaxed", LINE_TONE[line.kind]), children: line.text === "" ? " " : line.text }));
+}
+function FileSection({ file }) {
+    const [open, setOpen] = useState(true);
+    const hasHunks = file.lines.some((line) => line.kind === "add" || line.kind === "remove");
+    return (_jsxs("div", { className: "overflow-hidden rounded-md border border-border bg-card/40", children: [_jsxs("button", { type: "button", onClick: () => setOpen((value) => !value), className: "flex w-full items-center gap-2 px-3 py-2 text-left text-[13px] font-medium text-foreground hover:bg-muted/30", "aria-expanded": open, children: [_jsx("span", { className: "text-muted-foreground", children: open ? "▾" : "▸" }), _jsx("span", { className: "truncate font-mono", children: file.path })] }), open ? (_jsx("div", { className: "border-t border-border bg-background/40 px-3 py-2", children: hasHunks ? (file.lines.map((line, index) => (_jsx(DiffLineRow, { line: line }, `${file.path}:${index}`)))) : (_jsx("div", { className: "text-[12px] text-muted-foreground", children: "No inline diff captured for this file." })) })) : null] }));
+}
+export function DiffReviewPanel({ changeSet, className, }) {
+    const files = useMemo(() => (changeSet ? parseDiff(changeSet) : []), [changeSet]);
+    if (!changeSet || changeSet.changedFiles.length === 0) {
+        return (_jsx("div", { className: cn("text-[13px] text-muted-foreground", className), children: "No file changes captured for this task." }));
+    }
+    return (_jsxs("div", { className: cn("flex flex-col gap-2", className), children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { className: "text-[13px] font-medium text-foreground", children: "Changes" }), changeSet.diffStat ? (_jsx("span", { className: "font-mono text-[12px] text-muted-foreground", children: changeSet.diffStat })) : null] }), changeSet.truncated ? (_jsx("div", { className: "rounded-md border border-warning/40 bg-warning/10 px-3 py-2 text-[12px] text-warning", children: "This diff is truncated \u2014 some changes are not shown. Review the full change set in the workspace." })) : null, _jsx("div", { className: "flex flex-col gap-2", children: files.map((file) => (_jsx(FileSection, { file: file }, file.path))) })] }));
+}

package/components/composites/code/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DiffReviewPanel";
+//# sourceMappingURL=index.d.ts.map

package/components/composites/code/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/code/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/components/composites/code/index.js

@@ -0,0 +1 @@
+export * from "./DiffReviewPanel.js";

package/components/composites/index.d.ts

@@ -1,7 +1,9 @@
 export * from "../ui/admin-dialog";
 export * from "../ui/banner";
+export * from "../ui/code-block";
 export * from "../ui/confirm-delete";
 export * from "../ui/confirm-dialog";
+export * from "../ui/confirm-dialog.hooks";
 export * from "../ui/connection-status";
 export * from "../ui/copy-button";
 export * from "../ui/empty-state";
@@ -11,12 +13,14 @@ export * from "../ui/field-switch";
 export * from "../ui/form-select";
 export * from "../ui/new-action-button";
 export * from "../ui/save-footer";
-export * from "../ui/section-card";
 export * from "../ui/segmented-control";
 export * from "../ui/settings-controls";
 export * from "../ui/status-badge";
+export * from "../ui/status-badge.helpers";
 export * from "../ui/tooltip-extended";
 export * from "./chat";
+export * from "./chat-search-hint";
+export * from "./code";
 export * from "./form-field";
 export * from "./page-panel";
 export * from "./search";

package/components/composites/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/composites/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/composites/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}

package/components/composites/index.js

@@ -1,7 +1,9 @@
 export * from "../ui/admin-dialog.js";
 export * from "../ui/banner.js";
+export * from "../ui/code-block.js";
 export * from "../ui/confirm-delete.js";
 export * from "../ui/confirm-dialog.js";
+export * from "../ui/confirm-dialog.hooks.js";
 export * from "../ui/connection-status.js";
 export * from "../ui/copy-button.js";
 export * from "../ui/empty-state.js";
@@ -11,12 +13,14 @@ export * from "../ui/field-switch.js";
 export * from "../ui/form-select.js";
 export * from "../ui/new-action-button.js";
 export * from "../ui/save-footer.js";
-export * from "../ui/section-card.js";
 export * from "../ui/segmented-control.js";
 export * from "../ui/settings-controls.js";
 export * from "../ui/status-badge.js";
+export * from "../ui/status-badge.helpers.js";
 export * from "../ui/tooltip-extended.js";
 export * from "./chat/index.js";
+export * from "./chat-search-hint.js";
+export * from "./code/index.js";
 export * from "./form-field/index.js";
 export * from "./page-panel/index.js";
 export * from "./search/index.js";

package/components/composites/page-panel/index.d.ts

@@ -1,8 +1,10 @@
 import { PageEmptyState } from "./page-panel-empty";
+import { PagePanelFeatureEmpty } from "./page-panel-feature-empty";
 import { MetaPill, PageActionRail, PanelHeader, PanelNotice, SummaryCard } from "./page-panel-header";
 import { PageLoadingState } from "./page-panel-loading";
 export * from "./page-panel-collapsible-section";
 export * from "./page-panel-empty";
+export * from "./page-panel-feature-empty";
 export * from "./page-panel-frame";
 export * from "./page-panel-header";
 export * from "./page-panel-loading";
@@ -13,7 +15,7 @@ export declare const PagePanel: import("react").ForwardRefExoticComponent<{
     as?: import("./page-panel-types").PanelElement;
     variant?: import("./page-panel-types").PagePanelVariant;
     className?: string;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | "className"> & import("react").RefAttributes<HTMLDivElement>> & {
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className" | "as"> & import("react").RefAttributes<HTMLDivElement>> & {
     CollapsibleSection: import("react").ForwardRefExoticComponent<import("./page-panel-types").PagePanelCollapsibleSectionProps & import("react").RefAttributes<HTMLElement>>;
     ContentArea: import("react").ForwardRefExoticComponent<import("./page-panel-types").PagePanelContentAreaProps & import("react").RefAttributes<HTMLDivElement>>;
     Header: typeof PanelHeader;
@@ -22,6 +24,7 @@ export declare const PagePanel: import("react").ForwardRefExoticComponent<{
     Notice: typeof PanelNotice;
     SummaryCard: typeof SummaryCard;
     Empty: typeof PageEmptyState;
+    FeatureEmpty: typeof PagePanelFeatureEmpty;
     Loading: typeof PageLoadingState;
     ActionRail: typeof PageActionRail;
     Toolbar: import("react").ForwardRefExoticComponent<import("./page-panel-types").PagePanelToolbarProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/composites/page-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/page-panel/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,EACL,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,WAAW,EACZ,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAIxD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AAEnC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;CAYpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/page-panel/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAEnE,OAAO,EACL,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,WAAW,EACZ,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAIxD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AAEnC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;CAapB,CAAC"}

package/components/composites/page-panel/index.js

@@ -1,5 +1,6 @@
 import { PagePanelCollapsibleSection } from "./page-panel-collapsible-section.js";
 import { PageEmptyState } from "./page-panel-empty.js";
+import { PagePanelFeatureEmpty } from "./page-panel-feature-empty.js";
 import { PagePanelContentArea, PagePanelFrame } from "./page-panel-frame.js";
 import { MetaPill, PageActionRail, PanelHeader, PanelNotice, SummaryCard, } from "./page-panel-header.js";
 import { PageLoadingState } from "./page-panel-loading.js";
@@ -7,6 +8,7 @@ import { PagePanelRoot } from "./page-panel-root.js";
 import { PagePanelToolbar } from "./page-panel-toolbar.js";
 export * from "./page-panel-collapsible-section.js";
 export * from "./page-panel-empty.js";
+export * from "./page-panel-feature-empty.js";
 export * from "./page-panel-frame.js";
 export * from "./page-panel-header.js";
 export * from "./page-panel-loading.js";
@@ -22,6 +24,7 @@ export const PagePanel = Object.assign(PagePanelRoot, {
     Notice: PanelNotice,
     SummaryCard,
     Empty: PageEmptyState,
+    FeatureEmpty: PagePanelFeatureEmpty,
     Loading: PageLoadingState,
     ActionRail: PageActionRail,
     Toolbar: PagePanelToolbar,