@agent-native/core 0.157.6 → 0.157.8

package/dist/client/AgentPanel.js

@@ -25,6 +25,7 @@ import { Tooltip as DesignSystemTooltip } from "@agent-native/toolkit/design-sys
 import { IconMessageCircle, IconMessageDots, IconTerminal2, IconSettings, IconLayoutSidebarRightCollapse, IconLayoutGrid, IconCheck, IconPlus, IconX, IconDotsVertical, IconHistory, IconArrowsHorizontal, IconArrowsMaximize, IconExternalLink, IconShare3, } from "@tabler/icons-react";
 import React, { useState, useEffect, useRef, useCallback, useMemo, lazy, Suspense, startTransition, } from "react";
 import { flushSync } from "react-dom";
+import { hostedHarnessAgentOption, isHostedHarnessConfigured, isHostedHarnessRuntime, normalizeHostedHarnessRuntimes, } from "../agent/harness/hosted.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from "./components/ui/dropdown-menu.js";
 import { normalizeTooltipText } from "./components/ui/tooltip.js";
 import { ErrorReportActions } from "./ErrorReportActions.js";
@@ -44,7 +45,8 @@ import { withBuilderUtmTrackingParams } from "../shared/builder-link-tracking.js
 import { AGENT_SIDEBAR_MIN_WIDTH, consumeAgentSidebarUrlOpenOverride, clampAgentSidebarWidth, dispatchAgentSidebarStateChange, getAgentSidebarMaxWidth, getInitialAgentSidebarOpen, getAgentSidebarWideWidth, setAgentSidebarOpenPreference, subscribeAgentSidebarUrlChanges, SIDEBAR_STATE_CHANGE_EVENT, } from "./agent-sidebar-state.js";
 import { trackEvent } from "./analytics.js";
 import { agentNativePath, appPath, isWorkspaceAppPath } from "./api-path.js";
-import { APP_CHAT_SIDEBAR_STATE_EVENT, APP_CHAT_SIDEBAR_STATE_REQUEST_MESSAGE, buildAppChatSidebarStateMessage, isPerAppChatStorageKey, } from "./app-chat-sidebar.js";
+import { APP_CHAT_SIDEBAR_STATE_EVENT, APP_CHAT_SIDEBAR_STATE_REQUEST_MESSAGE, buildAppChatSidebarStateMessage, isPerAppChatStorageKey, requestPerAppChatCommand, usePerAppChatState, } from "./app-chat-sidebar.js";
+import { injectedAgentNativeConfig } from "./app-config.js";
 import { readClientAppState } from "./application-state.js";
 import { assistantUiRecoverableRenderErrorKind } from "./assistant-ui-recovery.js";
 import { shouldParentFrameOwnAgentPanel } from "./builder-frame.js";
@@ -58,6 +60,7 @@ import { useFirstRunOnboardingGateOwnsSurface } from "./onboarding/first-run-sta
 import { useOnboardingPreviewMode } from "./onboarding/use-preview-mode.js";
 import { recoverFromStaleChunkError } from "./route-chunk-recovery.js";
 import { withBuilderConnectTrackingParams } from "./settings/useBuilderStatus.js";
+import { useActionQuery } from "./use-action.js";
 import { useScreenRefreshKey } from "./use-db-sync.js";
 import { useDevMode } from "./use-dev-mode.js";
 import { cn } from "./utils.js";
@@ -957,6 +960,7 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
                     __html: "@media (hover:hover) and (pointer:fine){" +
                         ".agent-sidebar-chat-header[data-agent-sidebar-chat-header]{opacity:0;pointer-events:none;transition:opacity 150ms ease-out;}" +
                         ".agent-panel-root:hover .agent-sidebar-chat-header[data-agent-sidebar-chat-header],.agent-panel-root:focus-within .agent-sidebar-chat-header[data-agent-sidebar-chat-header],.agent-sidebar-chat-header[data-agent-sidebar-chat-header][data-agent-sidebar-chat-header-active]{opacity:1;pointer-events:auto;}" +
+                        ".agent-sidebar-panel[data-agent-sidebar-per-app-chat='true'] .agent-sidebar-chat-header[data-agent-sidebar-chat-header]{opacity:1;pointer-events:auto;transition:none;}" +
                         "}" +
                         ".agent-tab-close{opacity:0}.agent-tab:hover .agent-tab-close{opacity:1}" +
                         ".agent-tabs-scroll{scrollbar-width:none;-ms-overflow-style:none;}" +
@@ -1414,9 +1418,43 @@ export function AgentChatSurface({ mode = "panel", className, defaultMode = "cha
  * Wraps app content with a toggleable agent sidebar.
  * Use AgentToggleButton in your header to open/close it.
  */
-export function AgentSidebar({ children, emptyStateText = "How can I help you?", suggestions, dynamicSuggestions, composerToolbarSlot, composerSlot, onComposerTextChange, imageModelMenu, availableAgents, selectedAgent, onAgentChange, onConnectLocalRuntime, runtime, adapterReloadKey, threadFooterSlot, defaultSidebarWidth, sidebarWidth, position = "right", defaultOpen = false, animateMobile = true, animateDesktop = true, chatViewTransition = false, chatViewTransitionHandoff = false, storageKey, openStorageKey, apiUrl, agentChatSurface, showTabBar = true, suppressInlineOpenApp, composerPlaceholder, openOnChatRunning = false, onFullscreenRequest, scope, showScopeBadge, browserTabId, threadUrlSync, agentPageHref, suppressFirstRunOnboarding = false, }) {
+export function AgentSidebar({ children, emptyStateText = "How can I help you?", suggestions, dynamicSuggestions, composerToolbarSlot, composerSlot, onComposerTextChange, imageModelMenu, availableAgents, availableModels, modelListLoading, selectedAgent, onAgentChange, onConnectLocalRuntime, runtime, adapterReloadKey, threadFooterSlot, defaultSidebarWidth, sidebarWidth, position = "right", defaultOpen = false, animateMobile = true, animateDesktop = true, chatViewTransition = false, chatViewTransitionHandoff = false, storageKey, openStorageKey, apiUrl, agentChatSurface, showTabBar = true, suppressInlineOpenApp, composerPlaceholder, openOnChatRunning = false, onFullscreenRequest, scope, showScopeBadge, browserTabId, threadUrlSync, agentPageHref, suppressFirstRunOnboarding = false, }) {
+    const staticHostedHarnessEnabled = isHostedHarnessConfigured(injectedAgentNativeConfig().harness);
+    const hostedHarnessQuery = useActionQuery("get-hosted-harness-config", undefined, { enabled: staticHostedHarnessEnabled });
+    const hostedHarnessStatus = hostedHarnessQuery.data;
+    const hostedHarnessEnabled = hostedHarnessStatus?.enabled === true;
+    const hostedHarnessRuntimes = useMemo(() => hostedHarnessEnabled
+        ? normalizeHostedHarnessRuntimes(hostedHarnessStatus?.runtimes)
+        : [], [hostedHarnessEnabled, hostedHarnessStatus?.runtimes]);
+    const hostedHarnessUi = hostedHarnessEnabled;
+    const hostedHarnessStorageKey = `agent-native-hosted-harness${storageKey ? `:${storageKey}` : ""}`;
+    const [hostedHarnessRuntime, setHostedHarnessRuntime] = useState("claude-code");
+    const hostedHarnessAgentOptions = useMemo(() => hostedHarnessRuntimes.map(hostedHarnessAgentOption), [hostedHarnessRuntimes]);
+    const effectiveAvailableAgents = hostedHarnessEnabled
+        ? [
+            ...hostedHarnessAgentOptions,
+            ...(availableAgents ?? []).filter((agent) => !isHostedHarnessRuntime(agent.id)),
+        ]
+        : availableAgents;
+    const effectiveSelectedAgent = hostedHarnessEnabled
+        ? hostedHarnessRuntime
+        : selectedAgent;
+    const effectiveOnAgentChange = hostedHarnessEnabled
+        ? (agent) => {
+            if (isHostedHarnessRuntime(agent)) {
+                setHostedHarnessRuntime(agent);
+            }
+            onAgentChange?.(agent);
+        }
+        : onAgentChange;
+    const effectivePosition = hostedHarnessUi ? "left" : position;
+    const effectiveDefaultOpen = hostedHarnessUi || defaultOpen;
+    const effectiveShowTabBar = hostedHarnessUi || showTabBar;
+    const effectiveAnimateDesktop = hostedHarnessUi ? false : animateDesktop;
     const sidebarOpenStorageKey = openStorageKey ?? storageKey;
     const isPerAppChatSidebar = isPerAppChatStorageKey(sidebarOpenStorageKey);
+    const perAppChatState = usePerAppChatState(!isPerAppChatSidebar);
+    const isPerAppChatHosted = !isPerAppChatSidebar && perAppChatState.hosted === true;
     const onboardingPreviewMode = useOnboardingPreviewMode();
     const firstRunOnboardingGateOwnsSurface = useFirstRunOnboardingGateOwnsSurface();
     const showFirstRunOnboarding = !firstRunOnboardingGateOwnsSurface &&
@@ -1424,7 +1462,7 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
         (SHOW_FIRST_RUN_ONBOARDING || onboardingPreviewMode);
     const initialWidth = defaultSidebarWidth ?? sidebarWidth ?? 380;
     const [open, setOpen] = useState(() => openOnChatRunning ||
-        getInitialAgentSidebarOpen(defaultOpen, sidebarOpenStorageKey));
+        getInitialAgentSidebarOpen(effectiveDefaultOpen, sidebarOpenStorageKey));
     const [presentationMode, setPresentationMode] = useState(false);
     const [width, setWidth] = useState(initialWidth);
     const [isWideDrawer, setIsWideDrawer] = useState(() => {
@@ -1485,6 +1523,45 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             return value;
         });
     }, [sidebarOpenStorageKey]);
+    useEffect(() => {
+        try {
+            const saved = localStorage.getItem(hostedHarnessStorageKey);
+            if (saved && isHostedHarnessRuntime(saved)) {
+                setHostedHarnessRuntime(saved);
+            }
+        }
+        catch {
+            // coercion-ok: localStorage is optional persistence; memory state remains authoritative.
+            // The picker falls back to Claude Code when storage is unavailable.
+        }
+    }, [hostedHarnessStorageKey]);
+    useEffect(() => {
+        if (!hostedHarnessEnabled || hostedHarnessRuntimes.length === 0)
+            return;
+        const next = hostedHarnessRuntimes.includes(hostedHarnessRuntime)
+            ? hostedHarnessRuntime
+            : hostedHarnessRuntimes[0];
+        if (!next)
+            return;
+        if (next !== hostedHarnessRuntime)
+            setHostedHarnessRuntime(next);
+        try {
+            localStorage.setItem(hostedHarnessStorageKey, next);
+        }
+        catch {
+            // coercion-ok: localStorage is optional persistence; memory state remains authoritative.
+            // The selected runtime remains in memory for this tab.
+        }
+    }, [
+        hostedHarnessEnabled,
+        hostedHarnessRuntimes,
+        hostedHarnessRuntime,
+        hostedHarnessStorageKey,
+    ]);
+    useEffect(() => {
+        if (hostedHarnessUi)
+            setOpenPersisted(true);
+    }, [hostedHarnessUi, setOpenPersisted]);
     const applyUrlOpenOverride = useCallback(() => {
         const override = consumeAgentSidebarUrlOpenOverride(sidebarOpenStorageKey);
         if (override !== null)
@@ -1495,9 +1572,9 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
         return subscribeAgentSidebarUrlChanges(applyUrlOpenOverride);
     }, [applyUrlOpenOverride]);
     useEffect(() => {
-        if (openOnChatRunning)
+        if (openOnChatRunning && !isPerAppChatHosted)
             setOpen(true);
-    }, [openOnChatRunning]);
+    }, [isPerAppChatHosted, openOnChatRunning]);
     // Track whether the frame is controlling the sidebar (code mode = frame active).
     // Default to true when inside an iframe — assume the frame sidebar is active
     // until told otherwise. This prevents both sidebars flashing after hot reloads.
@@ -1519,7 +1596,8 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
     const [hasFrameSidebarState, setHasFrameSidebarState] = useState(false);
     const [backgroundPanelActive, setBackgroundPanelActive] = useState(false);
     const [runningTabIds, setRunningTabIds] = useState(() => new Set());
-    const shouldMountPanel = !presentationMode &&
+    const shouldMountPanel = !isPerAppChatHosted &&
+        !presentationMode &&
         (!frameCodeMode || !shouldParentFrameOwnAgentPanel()) &&
         (open || backgroundPanelActive || runningTabIds.size > 0);
     const shouldMountPanelRef = useRef(shouldMountPanel);
@@ -1531,10 +1609,12 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
         // Skip the initial emit in frame-owned mode — wait until the frame has
         // sent us its real sidebar state. Once we know, this effect re-runs and
         // dispatches the correct value.
-        if (frameOwned && !hasFrameSidebarState)
+        if (frameOwned && !hasFrameSidebarState && !isPerAppChatHosted)
             return;
         dispatchAgentSidebarStateChange({
-            open: !presentationMode && (frameOwned ? frameSidebarOpen : open),
+            open: isPerAppChatHosted
+                ? perAppChatState.open
+                : !presentationMode && (frameOwned ? frameSidebarOpen : open),
             source: frameOwned ? "frame" : "app",
             mode: frameOwned ? "code" : "app",
         });
@@ -1544,6 +1624,8 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
         open,
         presentationMode,
         hasFrameSidebarState,
+        isPerAppChatHosted,
+        perAppChatState.open,
     ]);
     useEffect(() => {
         if (!isPerAppChatSidebar)
@@ -1583,7 +1665,7 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
                 ? detail.tabId
                 : "__default__";
             if (detail?.isRunning === true) {
-                if (openOnChatRunning)
+                if (openOnChatRunning && !isPerAppChatHosted)
                     setOpen(true);
                 setRunningTabIds((prev) => {
                     const next = new Set(prev);
@@ -1609,7 +1691,7 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             window.removeEventListener(AGENT_PANEL_PREPARE_EVENT, preparePanel);
             window.removeEventListener(AGENT_CHAT_RUNNING_EVENT, handleChatRunning);
         };
-    }, [openOnChatRunning, setOpenPersisted]);
+    }, [isPerAppChatHosted, openOnChatRunning, setOpenPersisted]);
     useEffect(() => {
         const replayAfterMount = (type, event) => {
             if (shouldMountPanelRef.current)
@@ -1639,6 +1721,10 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
     }, [setOpenPersisted]);
     useEffect(() => {
         const toggleHandler = () => {
+            if (isPerAppChatHosted) {
+                requestPerAppChatCommand("toggle");
+                return;
+            }
             if (frameCodeMode && shouldParentFrameOwnAgentPanel()) {
                 // Forward toggle to frame parent — the frame sidebar handles it
                 window.parent.postMessage({ type: "agentNative.toggleSidebar" }, parentFrameTargetOrigin());
@@ -1648,6 +1734,10 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             }
         };
         const openHandler = () => {
+            if (isPerAppChatHosted) {
+                requestPerAppChatCommand("open");
+                return;
+            }
             if (frameCodeMode && shouldParentFrameOwnAgentPanel()) {
                 window.parent.postMessage({ type: "agentNative.toggleSidebar", data: { open: true } }, parentFrameTargetOrigin());
             }
@@ -1656,6 +1746,10 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             }
         };
         const closeHandler = () => {
+            if (isPerAppChatHosted) {
+                requestPerAppChatCommand("close");
+                return;
+            }
             if (frameCodeMode && shouldParentFrameOwnAgentPanel()) {
                 window.parent.postMessage({ type: "agentNative.toggleSidebar", data: { open: false } }, parentFrameTargetOrigin());
             }
@@ -1671,7 +1765,7 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             window.removeEventListener("agent-panel:open", openHandler);
             window.removeEventListener("agent-panel:close", closeHandler);
         };
-    }, [setOpenPersisted, frameCodeMode]);
+    }, [setOpenPersisted, frameCodeMode, isPerAppChatHosted]);
     // Listen for sidebar mode commands from the frame parent.
     // When frame is in "code" mode, hide the app sidebar.
     // When frame is in "app" mode, show the app sidebar, sync width and panel mode.
@@ -1848,10 +1942,10 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
     }, [runDrawerMorph, drawerPlaceholderWidth, isWideDrawer]);
     const handleResizeStart = useCallback(() => setIsResizing(true), []);
     const handleResizeEnd = useCallback(() => setIsResizing(false), []);
-    const isLeft = position === "left";
+    const isLeft = effectivePosition === "left";
     const wideDrawerEnabled = isWideDrawer && !isMobile;
     const mobileAnimationEnabled = !presentationMode && isMobile && animateMobile;
-    const desktopAnimationEnabled = !presentationMode && !isMobile && animateDesktop;
+    const desktopAnimationEnabled = !presentationMode && !isMobile && effectiveAnimateDesktop;
     const sidebarAnimationEnabled = mobileAnimationEnabled || desktopAnimationEnabled;
     const [renderAnimatedPanel, setRenderAnimatedPanel] = useState(shouldMountPanel);
     useEffect(() => {
@@ -1940,6 +2034,7 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             background: "var(--agent-sidebar-background)",
             width: desktopAnimationEnabled ? undefined : width,
             maxHeight: "var(--agent-native-viewport-height, 100vh)",
+            zIndex: hostedHarnessUi ? SIDEBAR_OVERLAY_Z_INDEX : undefined,
             borderLeft: !panelOpen || isLeft || showResizeHandle
                 ? "none"
                 : "1px solid hsl(var(--border))",
@@ -1956,17 +2051,18 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
     }
     // Mount the live chat surface only while visible or actively needed. Keeping
     // it mounted while closed starts app-state polling on every public page view.
-    const sidebar = shouldRenderPanel ? (_jsxs(_Fragment, { children: [showResizeHandle && !isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd })), _jsx("div", { className: cn("agent-sidebar-panel flex shrink-0 flex-col overflow-hidden text-[13px] leading-[1.2] antialiased", chatViewTransition && AGENT_CHAT_VIEW_TRANSITION_CLASS), "data-agent-sidebar-animation": wideDrawerEnabled
+    const sidebar = shouldRenderPanel ? (_jsxs(_Fragment, { children: [showResizeHandle && !isLeft && (_jsx(ResizeHandle, { position: effectivePosition, onDrag: handleDrag, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd })), _jsx("div", { className: cn("agent-sidebar-panel flex shrink-0 flex-col overflow-hidden text-[13px] leading-[1.2] antialiased", chatViewTransition && AGENT_CHAT_VIEW_TRANSITION_CLASS), "data-agent-sidebar-animation": wideDrawerEnabled
                     ? "drawer"
                     : mobileAnimationEnabled
                         ? "mobile"
                         : desktopAnimationEnabled
                             ? "desktop"
-                            : undefined, "data-agent-sidebar-layout": panelLayout, "data-agent-sidebar-position": position, "data-agent-sidebar-state": panelOpen ? "open" : "closed", "data-agent-sidebar-per-app-chat": isPerAppChatSidebar ? "true" : undefined, "data-agent-sidebar-resizing": isResizing ? "true" : undefined, "data-agent-sidebar-chat-handoff": chatViewTransitionHandoff ? "true" : undefined, style: chatViewTransition
+                            : undefined, "data-agent-sidebar-layout": panelLayout, "data-agent-sidebar-position": effectivePosition, "data-agent-native-hosted-harness-ui": hostedHarnessUi ? "desktop" : undefined, "data-agent-sidebar-state": panelOpen ? "open" : "closed", "data-agent-sidebar-per-app-chat": isPerAppChatSidebar ? "true" : undefined, "data-agent-sidebar-resizing": isResizing ? "true" : undefined, "data-agent-sidebar-chat-handoff": chatViewTransitionHandoff ? "true" : undefined, style: chatViewTransition
                     ? getAgentChatViewTransitionStyle(panelStyle)
-                    : panelStyle, inert: sidebarAnimationEnabled && !panelOpen ? true : undefined, "aria-hidden": sidebarAnimationEnabled && !panelOpen ? true : undefined, children: _jsx("div", { className: "agent-sidebar-panel-inner flex min-h-0 flex-1 flex-col", children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, composerToolbarSlot: composerToolbarSlot, composerSlot: composerSlot, onComposerTextChange: onComposerTextChange, imageModelMenu: imageModelMenu, availableAgents: availableAgents, selectedAgent: selectedAgent, onAgentChange: onAgentChange, onConnectLocalRuntime: onConnectLocalRuntime, runtime: runtime, adapterReloadKey: adapterReloadKey, threadFooterSlot: threadFooterSlot, apiUrl: apiUrl, agentChatSurface: agentChatSurface, showTabBar: showTabBar, suppressInlineOpenApp: suppressInlineOpenApp, composerPlaceholder: composerPlaceholder, missingApiKeySetupLayout: "sidebar", onCollapse: () => setOpenPersisted(false), onSnapTo75Percent: isMobile ? undefined : snapTo75Percent, isWideDrawer: isMobile ? false : isWideDrawer, onExitWideDrawer: isMobile ? undefined : exitWideDrawer, onFullViewRequest: onFullscreenRequest, storageKey: storageKey, scope: scope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync, agentPageHref: agentPageHref, allowSettingsMode: false, chatOnly: true }) }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd }))] })) : null;
+                    : panelStyle, inert: sidebarAnimationEnabled && !panelOpen ? true : undefined, "aria-hidden": sidebarAnimationEnabled && !panelOpen ? true : undefined, children: _jsx("div", { className: "agent-sidebar-panel-inner flex min-h-0 flex-1 flex-col", children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, composerToolbarSlot: composerToolbarSlot, composerSlot: composerSlot, onComposerTextChange: onComposerTextChange, imageModelMenu: imageModelMenu, availableAgents: effectiveAvailableAgents, availableModels: availableModels, modelListLoading: modelListLoading, selectedAgent: effectiveSelectedAgent, onAgentChange: effectiveOnAgentChange, hostedHarness: hostedHarnessEnabled, onConnectLocalRuntime: onConnectLocalRuntime, runtime: runtime, adapterReloadKey: adapterReloadKey, threadFooterSlot: threadFooterSlot, apiUrl: apiUrl, agentChatSurface: agentChatSurface, showTabBar: effectiveShowTabBar, suppressInlineOpenApp: suppressInlineOpenApp, composerPlaceholder: composerPlaceholder, missingApiKeySetupLayout: "sidebar", onCollapse: () => setOpenPersisted(false), onSnapTo75Percent: isMobile ? undefined : snapTo75Percent, isWideDrawer: isMobile ? false : isWideDrawer, onExitWideDrawer: isMobile ? undefined : exitWideDrawer, onFullViewRequest: onFullscreenRequest, storageKey: storageKey, scope: scope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync, agentPageHref: agentPageHref, allowSettingsMode: false, chatOnly: true }) }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: effectivePosition, onDrag: handleDrag, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd }))] })) : null;
     const drawerPlaceholder = wideDrawerEnabled && !presentationMode && panelOpen ? (_jsx("div", { "aria-hidden": "true", className: "agent-sidebar-drawer-placeholder shrink-0", "data-agent-sidebar-placeholder": "true", style: { width: drawerPlaceholderWidth + 1 } })) : null;
-    return (_jsx(AgentSidebarOnboardingContext.Provider, { value: true, children: _jsxs(RealtimeVoiceModeProvider, { browserTabId: browserTabId, children: [showFirstRunOnboarding && (_jsx(Suspense, { fallback: null, children: _jsx(FirstRunOnboarding, {}) })), _jsxs("div", { className: "agent-sidebar-shell flex min-w-0 flex-1 h-screen overflow-hidden", "data-agent-sidebar-position": position, "data-agent-sidebar-resizing": isResizing ? "true" : undefined, children: [isMobile &&
+    return (_jsx(AgentSidebarOnboardingContext.Provider, { value: true, children: _jsxs(RealtimeVoiceModeProvider, { browserTabId: browserTabId, children: [showFirstRunOnboarding && (_jsx(Suspense, { fallback: null, children: _jsx(FirstRunOnboarding, {}) })), _jsxs("div", { className: "agent-sidebar-shell flex min-w-0 flex-1 h-screen overflow-hidden", "data-agent-sidebar-position": effectivePosition, "data-agent-native-hosted-harness-ui": hostedHarnessUi ? "desktop" : undefined, "data-agent-native-hosted-chat": isPerAppChatHosted ? "true" : undefined, "data-agent-sidebar-resizing": isResizing ? "true" : undefined, children: [isMobile &&
+                            !isPerAppChatHosted &&
                             !presentationMode &&
                             (mobileAnimationEnabled ? shouldRenderPanel : open) && (_jsx("div", { className: cn("agent-sidebar-backdrop fixed inset-0 bg-foreground/40", mobileAnimationEnabled && !panelOpen && "pointer-events-none"), "data-agent-sidebar-animation": mobileAnimationEnabled ? "mobile" : undefined, "data-agent-sidebar-state": panelOpen ? "open" : "closed", style: { zIndex: SIDEBAR_OVERLAY_Z_INDEX - 1 }, onClick: () => setOpenPersisted(false) })), shouldMountPanel ? _jsx(URLSync, { browserTabId: browserTabId }) : null, isResizing ? (_jsx("div", { "aria-hidden": "true", className: "agent-sidebar-resize-overlay" })) : null, isLeft && !presentationMode ? sidebar : null, isLeft && !presentationMode ? drawerPlaceholder : null, _jsx("div", { className: "agent-sidebar-main-surface flex flex-1 flex-col overflow-auto min-w-0", "data-agent-sidebar-main-position": position, "data-agent-sidebar-main-state": !isMobile && !presentationMode && panelOpen ? "open" : "closed", "data-agent-sidebar-resizing": isResizing ? "true" : undefined, children: _jsx(ScreenRefreshBoundary, { children: children }) }), !isLeft && !presentationMode ? drawerPlaceholder : null, !isLeft && !presentationMode ? sidebar : null] })] }) }));
 }

package/dist/client/AgentTaskCard.d.ts

@@ -6,7 +6,7 @@ export interface AgentTaskCardProps {
     onOpen?: (threadId: string) => void;
 }
 /**
- * Rich preview card for a sub-agent task. Listens for agent-task-event
- * CustomEvents to update its state in real-time.
+ * Inline tool-call presentation for a spawned sub-agent. Listens for
+ * agent-task-event CustomEvents to update its streamed output in real-time.
  */
 export declare function AgentTaskCard({ taskId, threadId, description, onOpen, }: AgentTaskCardProps): React.JSX.Element;

package/dist/client/AgentTaskCard.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconLoader2, IconCheck, IconChevronRight, IconExternalLink, IconAlertCircle, IconPlayerStop, IconSubtask, } from "@tabler/icons-react";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconLoader2, IconChevronRight, IconExternalLink, IconAlertCircle, IconPlayerStop, IconSubtask, } from "@tabler/icons-react";
 import { useState, useEffect, useRef, useCallback } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -7,8 +7,8 @@ import { agentNativePath } from "./api-path.js";
 import { useT } from "./i18n.js";
 import { cn } from "./utils.js";
 /**
- * Rich preview card for a sub-agent task. Listens for agent-task-event
- * CustomEvents to update its state in real-time.
+ * Inline tool-call presentation for a spawned sub-agent. Listens for
+ * agent-task-event CustomEvents to update its streamed output in real-time.
  */
 export function AgentTaskCard({ taskId, threadId, description, onOpen, }) {
     const t = useT();
@@ -127,24 +127,10 @@ export function AgentTaskCard({ taskId, threadId, description, onOpen, }) {
     const isError = status === "errored";
     const taskTitle = description.trim() || "Task";
     const currentStepText = currentStep.trim();
-    const statusLabel = isRunning ? "Running" : isError ? "Error" : "Done";
-    const statusClassName = cn("inline-flex h-5 shrink-0 items-center gap-1 rounded-md px-1.5 text-[10px] font-medium", isError
-        ? "bg-destructive/10 text-destructive"
-        : isComplete
-            ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
-            : "bg-muted text-muted-foreground");
     const displayText = isComplete && summary ? summary : preview;
     const hasContent = displayText.length > 0;
-    const emptyMessage = isRunning
-        ? "Waiting for updates"
-        : isError
-            ? "No error details yet"
-            : "No summary available";
-    return (_jsxs("div", { className: cn("my-2 overflow-hidden rounded-lg border bg-background/50 transition-colors", isError
-            ? "border-destructive/30"
-            : isComplete
-                ? "border-emerald-500/20"
-                : "border-border"), children: [_jsxs("button", { type: "button", "aria-expanded": expanded, className: "flex w-full items-center gap-2 px-3 py-2 text-start transition-colors hover:bg-muted/45", onClick: () => setExpanded(!expanded), children: [_jsxs("span", { className: "inline-flex h-5 shrink-0 items-center gap-1 rounded-md border border-border/60 bg-background/70 px-1.5 text-[10px] font-medium text-muted-foreground", children: [_jsx(IconSubtask, { className: "h-3 w-3" }), t("agentTask.backgroundTask")] }), _jsx("span", { className: "min-w-0 flex-1 truncate text-xs font-medium text-foreground", children: taskTitle }), _jsxs("span", { className: statusClassName, children: [isRunning ? (_jsx(IconLoader2, { className: "h-3 w-3 animate-spin" })) : isError ? (_jsx(IconAlertCircle, { className: "h-3 w-3" })) : (_jsx(IconCheck, { className: "h-3 w-3" })), statusLabel] }), _jsx(IconChevronRight, { className: cn("h-3 w-3 shrink-0 text-muted-foreground/40 transition-transform duration-150", expanded && "rotate-90", "rtl:-scale-x-100") })] }), expanded && isRunning && currentStepText && (_jsxs("div", { className: "flex gap-1.5 border-t border-border/60 px-3 py-1.5 text-[11px] text-muted-foreground", children: [_jsx("span", { className: "shrink-0 font-medium text-foreground/70", children: "Now:" }), _jsx("span", { className: "min-w-0 break-words", children: currentStepText })] })), expanded && hasContent && (_jsx("div", { className: "px-3 pb-2 pt-1", children: _jsx("div", { ref: previewRef, className: "agent-markdown prose prose-sm prose-invert max-h-48 max-w-none overflow-y-auto break-words rounded-md border border-border/50 bg-muted/25 px-3 py-2 text-xs text-muted-foreground", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: displayText.length > 800
-                            ? "..." + displayText.slice(-800)
-                            : displayText }) }) })), expanded && (_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 pb-2", children: [_jsx("span", { className: "min-w-0 flex-1 truncate text-[10px] text-muted-foreground/60", children: !hasContent ? emptyMessage : "" }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [isRunning && (_jsxs("button", { onClick: handleStop, className: "inline-flex cursor-pointer items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium text-muted-foreground hover:bg-muted hover:text-destructive", "aria-label": t("agentTask.stop"), children: [_jsx(IconPlayerStop, { className: "h-3 w-3" }), "Stop"] })), _jsxs("button", { onClick: handleOpen, className: "inline-flex cursor-pointer items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium text-muted-foreground hover:bg-muted hover:text-foreground", children: [t("agentTask.openThread"), _jsx(IconExternalLink, { className: "h-3 w-3" })] })] })] }))] }));
+    const statusLabel = isRunning ? "Running" : isError ? "Error" : "Done";
+    return (_jsxs("div", { className: "group/agent my-0.5 w-full", children: [_jsxs("button", { type: "button", "aria-expanded": expanded, className: "flex w-full items-center gap-1.5 rounded-md py-0.5 text-left text-[13px] text-muted-foreground transition-colors hover:text-foreground", onClick: () => setExpanded(!expanded), children: [_jsx("span", { className: "relative flex size-4 shrink-0 items-center justify-center", children: isRunning ? (_jsx(IconLoader2, { className: "size-3.5 animate-spin" })) : isError ? (_jsx(IconAlertCircle, { className: "size-3.5 text-destructive" })) : (_jsxs(_Fragment, { children: [_jsx(IconSubtask, { className: cn("size-3.5 transition-opacity", "group-hover/agent:opacity-0") }), _jsx(IconChevronRight, { className: cn("absolute size-3.5 opacity-0 transition-[opacity,transform] group-hover/agent:opacity-100", expanded && "rotate-90") })] })) }), _jsxs("span", { className: cn("min-w-0 truncate font-normal", isRunning && "agent-running-shimmer"), children: [t("agentTask.spawnedAgent"), ": ", taskTitle] }), _jsx("span", { className: "sr-only", children: statusLabel })] }), expanded && (_jsxs("div", { className: "ms-1 border-s border-border/50 ps-2 pt-1", children: [isRunning && currentStepText && (_jsx("p", { className: "ps-5 pb-1 text-xs text-muted-foreground", "aria-live": "polite", children: currentStepText })), hasContent && (_jsx("div", { className: "ps-5 pb-1", children: _jsx("div", { ref: previewRef, "aria-live": isRunning ? "polite" : undefined, "data-streaming": isRunning ? "true" : undefined, className: "agent-markdown prose prose-sm prose-invert max-h-48 max-w-none overflow-y-auto break-words text-xs text-muted-foreground", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: displayText.length > 800
+                                    ? "..." + displayText.slice(-800)
+                                    : displayText }) }) })), _jsxs("div", { className: "flex items-center gap-1 ps-5 pb-1", children: [isRunning && (_jsxs("button", { onClick: handleStop, className: "inline-flex cursor-pointer items-center gap-1 rounded-md px-1.5 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-destructive", "aria-label": t("agentTask.stop"), children: [_jsx(IconPlayerStop, { className: "size-3" }), "Stop"] })), _jsxs("button", { onClick: handleOpen, className: "inline-flex cursor-pointer items-center gap-1 rounded-md px-1.5 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", children: [t("agentTask.openThread"), _jsx(IconExternalLink, { className: "size-3" })] })] })] }))] }));
 }

package/dist/client/AssistantChat.d.ts

@@ -242,6 +242,12 @@ export interface AssistantChatAdapterContext {
     effortRef: {
         current: ReasoningEffort | undefined;
     };
+    harnessRef?: {
+        current: string | undefined;
+    };
+    hostedHarnessRef?: {
+        current: boolean;
+    };
     execModeRef: {
         current: "build" | "plan" | undefined;
     };
@@ -369,6 +375,8 @@ export interface AssistantChatProps {
     availableAgents?: ComposerAgentOption[];
     /** Selected agent runtime identifier. */
     selectedAgent?: string;
+    /** Mark the selected runtime as the hosted tools-only harness mode. */
+    hostedHarness?: boolean;
     /** Callback when the user picks an agent runtime. */
     onAgentChange?: (agent: string) => void;
     /**