@kortix/ui 0.0.0-stage → 0.14.4

package/dist/session/panel/easy/app-preview.js

@@ -0,0 +1,270 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from '../../../i18n/index.js';
+/**
+ * `AppPreview` — the running thing, opened.
+ *
+ * When someone asks for a landing page, a dashboard, a React app, the
+ * deliverable isn't a file on disk — it's a server on a port. Easy mode has no
+ * tab strip, so before this there was no way to reach it at all: the one output
+ * the user actually wanted was the one they couldn't get to.
+ *
+ * `BrowserPanel`'s chrome lives in `../../../browser/sandbox-browser-chrome` — this
+ * surface keeps a tab-store-free history (mounting `BrowserPanel` here would
+ * spawn a tab in the app's tab bar as a side effect of opening an output) and
+ * hands the shared chrome its model, plus the "port may not be running yet"
+ * retry below.
+ *
+ * The address bar controls the sandbox's own PORTS, not the open web — the same
+ * rule `BrowserPanel` enforces, and for the same reason: this is a window onto
+ * your sandbox, not a browser.
+ */
+import { Button } from '../../../primitives/button.js';
+import { ButtonGroup } from '../../../primitives/button-group.js';
+import Hint from '../../../primitives/hint.js';
+import Loading from '../../../primitives/loading.js';
+import { useAppInBrowser, withoutAppAccessToken } from '../../../browser/app-in-browser.js';
+import { framePolicy } from '../../../files/viewer/preview-policy.js';
+import { ErrorState } from '../../../primitives/error-state.js';
+import { useSandboxProxy } from '../../../internal/hooks/use-sandbox-proxy.js';
+import { usePreviewFrameUrl } from '../../../internal/hooks/use-preview-frame-url.js';
+import { useIsMobile } from '../../../internal/hooks/index.js';
+import { track } from '../../../lib/telemetry.js';
+import { focusWithoutScroll } from '../../../internal/lib/utils/focus-without-scroll.js';
+import { parseLocalhostUrl, toInternalUrl } from '@kortix/sdk';
+import { useBrowserRecentsStore } from '../../../internal/stores/browser-recents-store.js';
+import { probePreviewPort } from '@kortix/sdk';
+import { useRuntimeConnectionStore } from '@kortix/sdk/react';
+import { ArrowSquareOutIcon, GlobeIcon as Globe, SparkleIcon as SparklesSolid, WarningIcon, } from '@phosphor-icons/react';
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { PreviewLoadingOverlay, SandboxAddressBar, } from '../../../browser/sandbox-browser-chrome.js';
+import { BrowserLanding } from '../../../browser/browser-landing.js';
+import { CloseButton, DetailSidebarToggle } from './detail-view.js';
+import { PREVIEW_MAX_WAIT_MS, PREVIEW_PROBE_INTERVAL_MS, previewErrorReason, previewLoadSuccessState, previewLoadVerdict, runtimeSandboxHealth, sandboxRecents, shouldArmLoadTimeout, shouldKeepProbingPort, } from './easy-panel-logic.js';
+import { PanelWidthButton, ViewerActions } from '../../../files/viewer/viewer-actions.js';
+// zustand v5's own hook feeds React's `useSyncExternalStore` a
+// `getServerSnapshot` pinned to `getInitialState()` — correct for real SSR
+// (sandbox health can only ever be learned from a client-side poll, so it is
+// genuinely "connecting" at request time), but it means a real server-render
+// dispatcher can never observe a `setState` call that happened earlier in the
+// same process, as this component's render tests need to. Reading through
+// `getState()` for both snapshots sidesteps that — same live value, same
+// reactivity via `subscribe`, no behavior change in the browser or real SSR.
+const getSandboxHealthSnapshot = () => {
+    const s = useRuntimeConnectionStore.getState();
+    return runtimeSandboxHealth({
+        status: s.status,
+        healthy: s.healthy,
+        initialCheckDone: s.initialCheckDone,
+    });
+};
+export function AppPreview({ url, name, projectId, shareContext, onClose, onSendToAgent, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    // The app runs on localhost *inside the sandbox*, which the browser cannot
+    // reach. The proxy is what makes it openable at all.
+    const { proxyUrl } = useSandboxProxy();
+    // History of internal (localhost) URLs. Back/forward are real, not decorative.
+    const [history, setHistory] = useState([url]);
+    const [index, setIndex] = useState(0);
+    const current = history[index] ?? url;
+    // The quick-view "Open Browser" with no running app hands over url: '' —
+    // no port to load, nothing to spin on. Land on the address bar instead.
+    const noApp = !current;
+    // The landing's "Recents" — the shared history BrowserPanel also shows,
+    // filtered to sandbox ports (the only URLs this address bar will open).
+    const recents = useBrowserRecentsStore((s) => s.recents);
+    const localhostRecents = useMemo(() => sandboxRecents(recents), [recents]);
+    const port = useMemo(() => parseLocalhostUrl(current)?.port ?? 0, [current]);
+    const proxied = useMemo(() => proxyUrl(current) ?? current, [proxyUrl, current]);
+    // Null while the token or the host's URL (`UiProvider resolvePreviewUrl`) resolves.
+    const hostPreview = usePreviewFrameUrl(current, proxied, shareContext ?? (projectId ? { projectId } : undefined));
+    const authenticatedUrl = hostPreview.url;
+    // A project App frames signed in, on its own origin (`useAppInBrowser`).
+    const { app, apps, src: previewUrl } = useAppInBrowser(projectId, authenticatedUrl);
+    const hasPreview = !!previewUrl;
+    // A Kortix App is named by its App, not by its route-key host.
+    const title = app?.name ?? name;
+    const suggestions = useMemo(() => apps.map((row) => ({ label: row.name, url: row.url })), [apps]);
+    const appCopy = useMemo(() => app
+        ? {
+            ariaLabel: tI18nComplete.raw('text9adff6870471'),
+            run: () => navigator.clipboard.writeText(withoutAppAccessToken(current)),
+        }
+        : undefined, [app, current, tI18nComplete]);
+    const [refreshKey, setRefreshKey] = useState(0);
+    const [isLoading, setIsLoading] = useState(true);
+    const [hasError, setHasError] = useState(false);
+    const addressRef = useRef(null);
+    const isMobile = useIsMobile();
+    // Copy link mints a PUBLIC share and copies `/share/session/{token}`.
+    // It used to copy `previewUrl` — the authenticated `/v1/p/{sandbox}/{port}/…`
+    // proxy URL — which only ever worked in the tab that had the
+    // `__preview_session` cookie. Everyone else got a 401 on a link that also
+    // leaked the sandbox id.
+    const shareInput = useMemo(() => {
+        if (port <= 0)
+            return null;
+        const path = parseLocalhostUrl(current)?.path || '/';
+        return { mode: 'view', preview: { label: name, url: current, port, path } };
+    }, [current, name, port]);
+    const sandboxHealth = useSyncExternalStore(useRuntimeConnectionStore.subscribe, getSandboxHealthSnapshot, getSandboxHealthSnapshot);
+    // ─── The port watch. ─────────────────────────────────────────────────────
+    // Cross-origin iframes frequently never fire onLoad OR onError, so both the
+    // spinner and the error card would otherwise hang forever. This used to be a
+    // flat 5s timer that declared "Couldn't load" on that silence — but silence
+    // is not evidence, and a first hit on a cold dev-server route takes 30-60s
+    // (CLAUDE.md), so healthy apps were being failed mid-compile.
+    //
+    // So ask the port instead of watching the clock. The preview proxy answers
+    // 502/503/504 ITSELF when it cannot open a connection, which makes a NEGATIVE
+    // verdict fast and independent of how slow the app is; a positive verdict is
+    // only ever as fast as the app, and the iframe's own onLoad is the better
+    // signal for that anyway. `previewLoadVerdict` owns every decision; this is
+    // the loop that feeds it (one probe in flight at a time, so a stalled port
+    // delays the next probe instead of stacking sockets).
+    //
+    // Armed only once the iframe actually has a `src` (`hasPreview`): the auth
+    // token fetch that produces `previewUrl` can itself take a few seconds, and
+    // arming at mount burned that wait against the app's budget.
+    useEffect(() => {
+        if (!shouldArmLoadTimeout({ isLoading, noApp, hasPreview }) || !previewUrl)
+            return;
+        const startedAt = Date.now();
+        let unreachableSince = 0;
+        let timer = null;
+        let alive = true;
+        const controller = new AbortController();
+        const fail = () => {
+            alive = false;
+            setIsLoading(false);
+            setHasError(true);
+        };
+        // Sandbox health is read from the store at decision time, not closed over:
+        // it must reach the next tick WITHOUT restarting the watch, or every write
+        // by the runtime poll would reset the elapsed clock.
+        const decide = (probe, waitedMs) => {
+            const verdict = previewLoadVerdict({
+                sandbox: getSandboxHealthSnapshot(),
+                probe,
+                unreachableForMs: unreachableSince ? Date.now() - unreachableSince : 0,
+                waitedMs,
+            });
+            if (verdict === 'failed')
+                fail();
+            return verdict;
+        };
+        const tick = async () => {
+            const probe = await probePreviewPort(previewUrl, { signal: controller.signal });
+            if (!alive)
+                return;
+            // Continuity, not a count: any answer at all clears the streak, so a
+            // server that restarts mid-wait never accumulates its way to an error.
+            if (probe === 'unreachable')
+                unreachableSince ||= Date.now();
+            else
+                unreachableSince = 0;
+            const watchedMs = Date.now() - startedAt;
+            if (decide(probe, watchedMs) === 'failed')
+                return;
+            const unreachableForMs = unreachableSince ? Date.now() - unreachableSince : 0;
+            if (shouldKeepProbingPort({ probe, unreachableForMs, watchedMs })) {
+                timer = setTimeout(tick, PREVIEW_PROBE_INTERVAL_MS);
+            }
+            // Otherwise the probe has said all it can. The iframe's own onLoad and
+            // the bound below carry the rest — no more requests at the user's app.
+        };
+        // The bound gets its own timer rather than riding the poll: a probe that
+        // stalls stretches the loop's cadence, and the ceiling must not stretch
+        // with it.
+        const deadline = setTimeout(() => {
+            if (alive)
+                decide('unknown', PREVIEW_MAX_WAIT_MS);
+        }, PREVIEW_MAX_WAIT_MS);
+        void tick();
+        return () => {
+            alive = false;
+            controller.abort();
+            clearTimeout(deadline);
+            if (timer)
+                clearTimeout(timer);
+        };
+    }, [isLoading, refreshKey, noApp, hasPreview, previewUrl]);
+    // Nothing to load, so land the cursor on the address bar — the fastest way
+    // in once you know the port. `focusWithoutScroll`: this fires while the
+    // detail card is still sliding in from x:100%, and a bare focus() would
+    // scroll the panel's overflow-hidden ancestors sideways to reveal it —
+    // the stuck-shifted-layout bug.
+    useEffect(() => {
+        if (noApp)
+            focusWithoutScroll(addressRef.current);
+    }, [noApp]);
+    const reload = useCallback(() => {
+        setIsLoading(true);
+        setHasError(false);
+        setRefreshKey((k) => k + 1);
+    }, []);
+    const navigateTo = useCallback((next) => {
+        // Feed the shared recents (the same list BrowserPanel's landing shows)
+        // so the port map builds up from either surface.
+        useBrowserRecentsStore.getState().addRecent(next);
+        setHistory((prev) => [...prev.slice(0, index + 1), next]);
+        setIndex((i) => i + 1);
+        reload();
+    }, [index, reload]);
+    const canGoBack = index > 0;
+    const canGoForward = index < history.length - 1;
+    const goBack = useCallback(() => {
+        if (!canGoBack)
+            return;
+        setIndex((i) => i - 1);
+        reload();
+    }, [canGoBack, reload]);
+    const goForward = useCallback(() => {
+        if (!canGoForward)
+            return;
+        setIndex((i) => i + 1);
+        reload();
+    }, [canGoForward, reload]);
+    return (_jsxs("div", { className: "bg-background flex h-full min-h-0 min-w-0 flex-col", children: [_jsxs("div", { className: "border-border flex shrink-0 items-center gap-0.5 border-b px-2 py-1", children: [_jsx(DetailSidebarToggle, {}), _jsx(SandboxAddressBar, { displayValue: current, hasPreview: hasPreview, isLoading: isLoading, canGoBack: canGoBack, canGoForward: canGoForward, onBack: goBack, onForward: goForward, onReload: reload, onHome: () => navigateTo(''), onNavigate: navigateTo, suggestions: suggestions, placeholder: tI18nComplete.raw('text878abd024f27'), inputRef: addressRef, trailing: 
+                        // An app has no file to save and no text to put on a clipboard, so
+                        // `Copy link` is the one copy action — the thing you can hand
+                        // someone for a running port.
+                        _jsx(ViewerActions, { copy: appCopy, shareContext: shareContext, shareInput: shareInput }) }), _jsxs(ButtonGroup, { className: "shrink-0", children: [_jsx(Hint, { label: tI18nComplete.raw('text306ef19c8ac3'), side: "bottom", children: _jsx(Button, { variant: "secondary", size: "icon", disabled: !hasPreview, "aria-label": tI18nComplete.raw('text306ef19c8ac3'), onClick: () => {
+                                        if (!previewUrl)
+                                            return;
+                                        track('app_opened_new_tab');
+                                        window.open(previewUrl, '_blank', 'noopener,noreferrer');
+                                    }, className: "size-7 shrink-0 active:scale-[0.96]", children: _jsx(ArrowSquareOutIcon, { className: "size-3.5" }) }) }), _jsx(PanelWidthButton, { isMobile: isMobile }), _jsx(CloseButton, { onClose: onClose })] })] }), _jsxs("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: [isLoading && hasPreview && !noApp && (_jsx(PreviewLoadingOverlay, { label: tI18nComplete.raw('textc4cf2b2ccb5d') })), (hasError || hostPreview.failed) && !noApp && (_jsx(ErrorState, { icon: WarningIcon, size: "sm", className: "bg-background absolute inset-0 z-10", title: tI18nComplete('textba601cdb484b', { value0: title }), 
+                        /* The single most common cause, said plainly: the agent started the
+                           server a moment ago and it isn't listening yet. Only a SETTLED
+                           `dead` verdict earns the stopped-workspace wording — see
+                           `previewErrorReason`. */
+                        description: previewErrorReason({ sandbox: sandboxHealth, port }), action: _jsx(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: reload, children: tI18nComplete.raw('text942087cc2d41') }), secondaryAction: onSendToAgent ? (_jsxs(Button, { size: "sm", className: "gap-1.5", onClick: onSendToAgent, children: [_jsx(SparklesSolid, { weight: "fill", className: "size-3.5 shrink-0" }), tI18nComplete.raw('text77a860cbc585')] })) : null })), noApp ? (
+                    /* Landing — the project's Apps and recent ports as one timeline
+                       (`BrowserLanding`); a quiet search hint when there is neither. */
+                    _jsx("div", { className: "flex h-full flex-col overflow-y-auto", children: _jsx(BrowserLanding, { projectId: projectId, recents: localhostRecents, empty: _jsx(SearchHint, {}), onOpen: (url) => {
+                                const parsed = parseLocalhostUrl(url);
+                                navigateTo(parsed ? toInternalUrl(parsed.port, parsed.path) : url);
+                            } }) })) : hasPreview ? (_jsx("iframe", { src: previewUrl, title: title, className: "h-full w-full border-0", sandbox: framePolicy('app', previewUrl).sandbox, onLoad: () => {
+                            // A load is positive evidence the app is up, which overrides a
+                            // `hasError` an earlier verdict set — otherwise the error card
+                            // (absolute inset-0 z-10) keeps covering a working app until a
+                            // manual Retry (see `previewLoadSuccessState`). Clearing
+                            // `isLoading` also disarms the port watch: its effect is gated on
+                            // `shouldArmLoadTimeout`, so the state change tears it down.
+                            const next = previewLoadSuccessState();
+                            setIsLoading(next.isLoading);
+                            setHasError(next.hasError);
+                        }, onError: () => {
+                            // A real error event is its own evidence — no probe needed.
+                            setIsLoading(false);
+                            setHasError(true);
+                        } }, refreshKey)) : (
+                    // Auth token still resolving. A spinner, not an empty frame — an empty
+                    // frame reads as "your app is broken".
+                    _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx(Loading, { className: "size-4" }) }))] })] }));
+}
+function SearchHint() {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    return (_jsx("div", { className: "flex flex-1 items-center justify-center", children: _jsxs("div", { className: "text-muted-foreground flex flex-col items-center gap-4 px-4 text-center", children: [_jsx(Globe, { className: "size-12 opacity-20" }), _jsx("p", { className: "text-sm", children: tI18nComplete.raw('text2f883b75cd2d') })] }) }));
+}

package/dist/session/panel/easy/apps-card.d.ts

@@ -0,0 +1,5 @@
+import type { OutputItem } from '../shared/derive-panels.js';
+export declare function AppsCard({ apps, onOpenApp, }: {
+    apps: OutputItem[];
+    onOpenApp: (app: OutputItem) => void;
+}): import("react").JSX.Element;

package/dist/session/panel/easy/apps-card.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from '../../../i18n/index.js';
+/**
+ * `AppsCard` — the "Preview" card: the things the agent has running, one row
+ * each.
+ *
+ * A running app used to be row 13 of 13 inside Outputs, buried under twelve
+ * `.tsx` files nobody asked for. But the fix isn't a hero banner either: a real
+ * session runs SEVERAL servers at once — the site on :3000, the API on :8000,
+ * Storybook on :6006 — and "Your app is running" is wrong the moment there are
+ * two of them. A banner per app is a wall of banners.
+ *
+ * So this is a card shaped exactly like Outputs and Context: a count in the
+ * header, one row per thing, expand to see them. That shape already survives 1
+ * file or 40, and it survives 1 app or 10 for the same reason. Consistency is
+ * what scales; a special case is what breaks.
+ *
+ * Each row is a live dot, a name, and the port. The dot is the whole "this is
+ * alive" signal — a non-technical user reads it without being told to, and
+ * unlike a live thumbnail it cannot half-load and libel a working app as broken.
+ */
+import { cn } from '../../../lib/utils.js';
+import { parseLocalhostUrl } from '@kortix/sdk';
+import { useRuntimeConnectionStore } from '@kortix/sdk/react';
+import { useSyncExternalStore } from 'react';
+import { PanelCard } from './panel-card.js';
+function portOf(url) {
+    return parseLocalhostUrl(url ?? '')?.port ?? 0;
+}
+// zustand v5's own hook feeds React's `useSyncExternalStore` a
+// `getServerSnapshot` pinned to `getInitialState()` — correct for real SSR
+// (sandbox health can only ever be learned from a client-side poll, so it is
+// genuinely "connecting" at request time), but it means a real server-render
+// dispatcher (which is exactly what `renderToStaticMarkup` uses, in this
+// component's own test) can never observe a `setState` call that happened
+// earlier in the same process. Reading through `getState()` for both
+// snapshots sidesteps that — same live value, same reactivity via
+// `subscribe`, no behavior change in the browser or in real SSR.
+const getSandboxAliveSnapshot = () => {
+    const s = useRuntimeConnectionStore.getState();
+    return s.status === 'connected' && s.healthy === true;
+};
+export function AppsCard({ apps, onOpenApp, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    // One subscription for the card, not one per row: liveness is a property of
+    // the sandbox, and every app in it lives or dies together. The green pulse
+    // was static markup before this — a stopped sandbox kept "live" dots pulsing
+    // over dead servers, which is the panel lying (W8).
+    const sandboxAlive = useSyncExternalStore(useRuntimeConnectionStore.subscribe, getSandboxAliveSnapshot, getSandboxAliveSnapshot);
+    return (_jsx(PanelCard, { title: tI18nComplete.raw('text324b134f57c7'), count: apps.length, isEmpty: apps.length === 0, 
+        // The payoff: if the agent got something running, that is the single most
+        // interesting fact in the panel. It should not take a click to learn it.
+        defaultExpanded: apps.length > 0, emptyArt: _jsx(AppsArt, {}), emptyText: tI18nComplete.raw('texte0687cb3046c'), contentClassName: "border-border border-t px-2 py-2", children: _jsx("ul", { className: "flex flex-col gap-0", children: apps.map((app) => {
+                const port = portOf(app.url);
+                return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onOpenApp(app), className: cn('hover:bg-accent -mx-0.5 flex w-full items-center gap-2.5 rounded-sm px-1 py-1.5 text-left', 
+                        // 0.98 is the row press value the Outputs and Context rows
+                        // use; 0.998 is the CARD HEADER's (`panel-card.tsx`), where a
+                        // full-width surface must barely move. A row that pressed at
+                        // the header's value read as not responding at all.
+                        'transition-[background-color,transform] active:scale-[0.98]'), children: [_jsx("span", { className: "flex size-7 shrink-0 items-center justify-center", "aria-hidden": true, children: _jsxs("span", { className: "relative flex size-2", children: [sandboxAlive && (_jsx("span", { className: "bg-kortix-green absolute inline-flex size-2 animate-ping rounded-full opacity-60 motion-reduce:animate-none" })), _jsx("span", { className: cn('relative inline-flex size-2 rounded-full', sandboxAlive ? 'bg-kortix-green' : 'bg-muted-foreground/40') })] }) }), _jsx("span", { className: "text-foreground min-w-0 flex-1 truncate text-sm", children: app.name }), !sandboxAlive && (_jsx("span", { className: "text-muted-foreground shrink-0 text-xs", children: tI18nComplete.raw('text8322e87d2458') })), sandboxAlive && port > 0 && (_jsxs("span", { className: "text-muted-foreground shrink-0 text-xs tabular-nums", children: [":", port] }))] }) }, app.url));
+            }) }) }));
+}
+/** Soft placeholder art — a browser window, matching the other cards' empty states. */
+function AppsArt() {
+    return (_jsxs("div", { "aria-hidden": true, className: "border-border/60 bg-muted/30 flex h-16 w-20 flex-col gap-1.5 rounded-md border p-2", children: [_jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "bg-muted-foreground/30 size-1 rounded-full" }), _jsx("span", { className: "bg-muted-foreground/30 size-1 rounded-full" }), _jsx("span", { className: "bg-muted-foreground/30 size-1 rounded-full" })] }), _jsx("span", { className: "bg-muted-foreground/20 h-full w-full rounded-sm" })] }));
+}

package/dist/session/panel/easy/context-card.d.ts

@@ -0,0 +1,18 @@
+import type { ContextItem } from '../shared/derive-panels.js';
+import type { Detail } from './detail-view.js';
+export declare function ContextCard({ files, web, tools, sessionId, onOpenDetail, onOpenFile, onAddContext, }: {
+    files: ContextItem[];
+    web: ContextItem[];
+    tools: ContextItem[];
+    sessionId: string;
+    /** Detail replaces the whole panel — so the panel, not this card, owns it. */
+    onOpenDetail: (detail: Detail) => void;
+    /** Opens a "Files read" row in the file viewer, with the ordered path list
+     *  of every OTHER openable row in the group so the viewer can wire prev/next
+     *  nav across the read set — see `FileList`. */
+    onOpenFile: (path: string, allPaths: string[]) => void;
+    /** Empty-state "Add context" button. A plain callback, same pattern as
+     *  `onOpenFile` — this card grows no store dependency of its own; see
+     *  `easy-panel.tsx` for what it's wired to. */
+    onAddContext: () => void;
+}): import("react").JSX.Element;

package/dist/session/panel/easy/context-card.js

@@ -0,0 +1,150 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from '../../../i18n/index.js';
+/**
+ * `ContextCard` — "what the agent LOOKED AT," as rows.
+ *
+ * It used to be three labelled lists ("Web sources", "Files read", "Tools
+ * used") stacked inside the card, which turned a summary into a wall of rows;
+ * then one flat wrap of pills, which gave every group a different width and
+ * left the counts scattered across the card with nothing to line them up.
+ * Now each group is one full-width row — icon, name, count, chevron — the same
+ * row language the Outputs card uses, so the two cards sharing one panel read
+ * as one system. Tapping a row slides open the `DetailLayer` — the same
+ * surface a Progress step opens, so there is exactly one rule to learn.
+ *
+ * In the detail, web sources get the treatment they deserve — the site's own
+ * favicon, the page title, and the real URL — instead of being flattened into
+ * a bare line of text.
+ *
+ * **Empty-state actions (Task 5).** An empty card used to be a dead promise —
+ * a sentence with nothing to act on. "Add context" hands the user straight
+ * to the composer's attach flow (`onAddContext`, a plain callback — see
+ * `easy-panel.tsx` for what it's wired to).
+ *
+ * **Connect apps removed.** This card used to also carry a "Connect apps"
+ * affordance — an empty-state button, a non-empty footer row, both revealing
+ * `ConnectAppsStrip` in place, gated on a `projectId` prop. Product decision:
+ * gone. Removed with it: `ConnectAppsStrip`/`connect-apps-strip.tsx`, the
+ * `connectAppsOpen`/`onToggleConnectApps` state that used to be hoisted to
+ * `EasyPanel`, and the `projectId` prop this card no longer needs. This was
+ * the whole surface — nothing else in the panel referenced it.
+ */
+import { Badge } from '../../../primitives/badge.js';
+import { Button } from '../../../primitives/button.js';
+import { FaviconAvatar } from '../../../primitives/favicon-avatar.js';
+import { getFileIcon } from '../../../files/project/components/file-icon.js';
+import { cn } from '../../../lib/utils.js';
+import { CaretRightIcon as ChevronRight, FileTextIcon as FileText, GlobeIcon as Globe, PlusIcon as Plus, } from '@phosphor-icons/react';
+import { familyForTool, narrateFailedStep, narrateStep } from '@kortix/sdk';
+import { safeHttpUrl } from '../../../_vendor/kortix-shared.js';
+import { ToolParts } from './detail-view.js';
+import { PanelCard } from './panel-card.js';
+import { StepIcon } from './step-icon.js';
+export function ContextCard({ files, web, tools, sessionId, onOpenDetail, onOpenFile, onAddContext, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const groups = [];
+    if (web.length) {
+        groups.push({
+            id: 'web',
+            label: tI18nComplete.raw('text033c214ae9a3'),
+            count: web.length,
+            icon: _jsx(Globe, { className: "text-muted-foreground size-3.5 shrink-0" }),
+            body: _jsx(WebSourceList, { items: web }),
+        });
+    }
+    if (files.length) {
+        groups.push({
+            id: 'files',
+            label: tI18nComplete.raw('text83480f565627'),
+            count: files.length,
+            icon: _jsx(FileText, { className: "text-muted-foreground size-3.5 shrink-0" }),
+            body: _jsx(FileList, { items: files, onOpenFile: onOpenFile }),
+        });
+    }
+    // Every other tool the agent reached for keeps its own row, with the same
+    // family glyph it wears in the Progress stepper — one tool, one icon, both
+    // places. A tool row's detail shows what it actually did.
+    for (const tool of tools) {
+        const family = familyForTool(tool.calls?.[0]?.name ?? '') ?? 'other';
+        // `deriveContext` skips *fully* errored calls, but this row aggregates ALL
+        // calls to that tool — one failed call among several is exactly what a
+        // status="done" glyph would hide (failed-call aggregation).
+        const failed = (tool.calls ?? []).some((c) => c.status === 'error');
+        // The row's detail opens straight onto raw tool views (W3) — a plain
+        // sentence above them, in the same voice the Progress stepper narrates
+        // with, is what tells a non-technical reader what they're looking at
+        // before they have to parse a diff or a JSON blob. Reuses `narrateStep`/
+        // `narrateFailedStep` — the same pair `group-steps.ts`'s `finalize` calls
+        // for the Progress card's own step label — rather than a second sentence
+        // table (the rule `narration.ts:12-14` and `derive-panels.ts:1-14` both
+        // enforce).
+        const summary = failed
+            ? narrateFailedStep(family, tool.calls ?? [])
+            : narrateStep(family, tool.calls ?? []);
+        groups.push({
+            id: tool.callID,
+            label: tool.label,
+            count: tool.calls?.length ?? 1,
+            icon: _jsx(StepIcon, { family: family, status: failed ? 'error' : 'done' }),
+            body: _jsx(ToolParts, { calls: tool.calls ?? [], sessionId: sessionId, summary: summary }),
+        });
+    }
+    return (_jsx(PanelCard, { title: tI18nComplete.raw('texta6e600a10fed'), count: files.length + web.length + tools.length, isEmpty: groups.length === 0, emptyArt: _jsx(ContextArt, {}), emptyText: tI18nComplete.raw('textc63adab9bd56'), emptyActions: _jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: onAddContext, children: [_jsx(Plus, { className: "size-3.5" }), tI18nComplete.raw('text0f01d14cacf0')] }), 
+        // The same dense gutter Outputs uses. Rows carry their own inset, so the
+        // body only has to keep them off the card's edge — a full `p-4` frame
+        // belonged to free-floating pills, not to a list.
+        contentClassName: "border-border border-t px-2 py-2", children: _jsx("ul", { className: "flex flex-col gap-0", children: groups.map((g) => (_jsx("li", { className: "flex items-center", children: _jsxs("button", { type: "button", onClick: () => onOpenDetail({ key: g.id, title: g.label, icon: g.icon, body: g.body }), className: "hover:bg-accent -mx-0.5 flex min-h-10 w-full cursor-pointer items-center gap-2.5 rounded-sm px-1 py-1.5 text-left transition-[background-color,transform] active:scale-[0.98]", children: [_jsx("span", { className: "flex size-7 shrink-0 items-center justify-center", children: g.icon }), _jsx("span", { className: "text-foreground min-w-0 flex-1 truncate text-sm", children: g.label }), _jsx(Badge, { variant: "secondary", size: "sm", className: "tabular-nums", children: g.count }), _jsx(ChevronRight, { className: "text-muted-foreground size-3.5 shrink-0" })] }) }, g.id))) }) }));
+}
+const ROW = cn('flex min-h-12 w-full items-center gap-3 rounded-md px-2.5 py-2 text-left', 'bg-muted/40 transition-colors');
+/**
+ * Favicon, then the page title, then its URL pushed to the far edge — the
+ * title is what you're looking for and the URL is what confirms it, so they
+ * sit at opposite ends of the row rather than stacked on top of each other.
+ * The title takes the slack; the URL keeps its own width and never squeezes
+ * the title out.
+ */
+function WebSourceList({ items }) {
+    return (_jsx("ul", { className: "flex min-w-0 flex-col gap-1.5", children: items.map((it) => (_jsx("li", { children: _jsxs("a", { href: safeHttpUrl(it.url) ?? undefined, target: "_blank", rel: "noreferrer noopener", className: cn(ROW, 'hover:bg-muted cursor-pointer justify-between gap-4'), children: [_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-3", children: [_jsx(FaviconAvatar, { value: it.url ?? it.label, size: "sm", alt: "", className: "shrink-0" }), _jsx("span", { className: "text-foreground truncate text-sm", children: it.label })] }), it.url && (_jsx("span", { className: "text-muted-foreground max-w-[45%] shrink-0 truncate text-xs", children: prettyUrl(it.url) }))] }) }, `${it.callID}:${it.url ?? it.label}`))) }));
+}
+/**
+ * Every item carries its own per-extension glyph, the same tile the files
+ * explorer and the Outputs card use — a `.md` reads as a `.md` here too, not
+ * as an anonymous document. An item with a `path` opens in the file viewer:
+ * clicking it calls `onOpenFile` with its own path plus the ordered path list
+ * of every OTHER openable item in the group, so the viewer can wire prev/next
+ * nav across the whole read set. An item without a `path` (`deriveContext`
+ * only sets one when a `read` call actually resolved to a real file) stays a
+ * plain row — nothing to open, so no button semantics to fake.
+ */
+function FileList({ items, onOpenFile, }) {
+    const allPaths = items.flatMap((it) => (it.path ? [it.path] : []));
+    return (_jsx("ul", { className: "flex min-w-0 flex-col gap-1.5", children: items.map((it) => it.path ? (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onOpenFile(it.path, allPaths), className: cn(ROW, 'hover:bg-muted cursor-pointer transition-[background-color,transform] active:scale-[0.98]'), children: [_jsx("span", { className: "bg-muted/70 flex size-7 shrink-0 items-center justify-center rounded-sm", children: getFileIcon(basename(it.label), { className: 'size-4', variant: 'monochrome' }) }), _jsx("span", { className: "text-foreground truncate text-sm", children: it.label })] }) }, it.callID)) : (_jsxs("li", { className: ROW, children: [_jsx("span", { className: "bg-muted/70 flex size-7 shrink-0 items-center justify-center rounded-sm", children: _jsx(FileText, { className: "text-muted-foreground size-3.5" }) }), _jsx("span", { className: "text-foreground truncate text-sm", children: it.label })] }, it.callID))) }));
+}
+/** Last path segment — `getFileIcon` keys off the extension, and `it.label`
+ *  can occasionally BE a full path (`deriveContext`'s `label: ... || path`
+ *  fallback), which would otherwise feed it directory segments instead of a
+ *  filename. */
+function basename(path) {
+    return path.split('/').filter(Boolean).pop() ?? path;
+}
+/** The URL, minus the ceremony a non-technical reader doesn't need. */
+function prettyUrl(url) {
+    return url.replace(/^https?:\/\//, '').replace(/\/$/, '');
+}
+/**
+ * Soft placeholder art — overlapping note cards, matching the reference.
+ *
+ * The hairlines are `border-border` at full alpha, not `border-border/60`.
+ * Dark's `--border` (oklch 0.2686) already sits only 0.077 L above the card it
+ * draws on (`--card`, oklch 0.1913) — that IS the theme's hairline contrast —
+ * so taking 60% of it left the whole illustration effectively unrendered on
+ * dark. The fills are the same story: `bg-muted/30` over dark's card resolves
+ * to ~0.201 L against a 0.1913 ground, a 0.01 difference. `/50` and `/70` keep
+ * the two-card depth order while landing where the eye can find them. Light is
+ * unaffected in kind — `--border` is that theme's hairline too — and the fills
+ * stay soft there because `--muted` is only 0.024 L off `--card`.
+ */
+function ContextArt() {
+    return (_jsxs("div", { "aria-hidden": true, className: "relative h-16 w-24", children: [_jsx("span", { className: "border-border bg-muted/50 absolute top-3 left-0 h-10 w-8 rounded-sm border" }), _jsx("span", { className: "border-border bg-muted/70 absolute top-1.5 left-6 h-12 w-9 rounded-sm border" }), _jsx("span", { className: "border-border absolute top-3 left-14 h-10 w-8 rounded-sm border border-dashed bg-transparent" })] }));
+}