@kortix/ui 0.0.0-stage → 0.14.4

package/dist/session/panel/mobile-tool-drawer.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Mobile dev tools — Terminal / Browser / Files / Audit in their OWN
+ * top-level bottom sheet, driven by `mobileToolView` in the kortix-computer
+ * store (set by `openSessionQuickView` on mobile viewports).
+ *
+ * Deliberately NOT the Easy panel's detail flow: routing a tool through the
+ * panel meant opening the panel sheet first, stacking a second sheet over it,
+ * and landing the user on the Easy home when they closed the tool. This
+ * drawer is a peer of the panel sheet — it opens over chat and closes back to
+ * chat, and the panel's own state never moves.
+ *
+ * Bodies are the same self-contained surfaces Advanced mode's panel tabs
+ * mount (`SessionTerminalPanel`, `BrowserPanel`, `SessionFilesExplorer`,
+ * `SessionAuditPanel`), so both panel modes get identical tools here. vaul
+ * unmounts the content on close, so the terminal reconnects per open — the
+ * tradeoff every mobile drawer in this feature already accepts.
+ */
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '../../primitives/drawer.js';
+import { BrowserPanel } from '../../browser/browser-panel.js';
+import { CloseButton } from './easy/detail-view.js';
+import { SessionAuditPanel } from './session-audit-panel.js';
+import { SessionFilesExplorer } from './session-files-explorer.js';
+import { SessionTerminalPanel } from '../../terminal/session-terminal-panel.js';
+import { useLocalizedUiCatalog } from '../../i18n/ui-catalog/use-localized-ui-catalog.js';
+import { useKortixComputerStore } from '../../internal/stores/kortix-computer-store.js';
+import { sessionPreviewTabId } from '../../internal/stores/session-browser-store.js';
+import { FolderOpenIcon, GlobeIcon, ScrollIcon, TerminalWindowIcon, } from '@phosphor-icons/react';
+const TOOL_META = {
+    terminal: { label: 'Terminal', Icon: TerminalWindowIcon },
+    browser: { label: 'Browser', Icon: GlobeIcon },
+    files: { label: 'Files', Icon: FolderOpenIcon },
+    audit: { label: 'Audit', Icon: ScrollIcon },
+};
+export function MobileToolDrawer({ sessionId, projectId, projectSessionId, }) {
+    const view = useKortixComputerStore((s) => s.mobileToolView);
+    const closeMobileTool = useKortixComputerStore((s) => s.closeMobileTool);
+    const toolMeta = useLocalizedUiCatalog(TOOL_META);
+    const meta = view ? toolMeta[view] : null;
+    return (_jsx(Drawer, { open: view !== null, onOpenChange: (next) => !next && closeMobileTool(), children: _jsxs(DrawerContent, { className: "flex h-[95dvh] max-h-[95dvh] min-h-[95dvh] flex-col overflow-hidden p-0", children: [_jsx(DrawerHeader, { className: "shrink-0 px-4 py-3 text-left", children: _jsxs(DrawerTitle, { className: "flex items-center justify-between gap-2 text-base", children: [_jsxs("span", { className: "flex items-center gap-2.5", children: [meta && _jsx(meta.Icon, { className: "text-muted-foreground size-4 shrink-0" }), meta?.label] }), _jsx(CloseButton, { onClose: closeMobileTool, variant: "ghost" })] }) }), _jsxs("div", { className: "min-h-0 flex-1 overflow-hidden", children: [view === 'terminal' && (_jsx(SessionTerminalPanel, { sessionId: sessionId, projectId: projectId, projectSessionId: projectSessionId })), view === 'browser' && (_jsx(BrowserPanel, { tabId: sessionPreviewTabId(sessionId), projectId: projectId, projectSessionId: projectSessionId })), view === 'files' && (_jsx(SessionFilesExplorer, { chatSessionId: sessionId, projectId: projectId, projectSessionId: projectSessionId })), view === 'audit' && (_jsx(SessionAuditPanel, { projectId: projectId, projectSessionId: projectSessionId }))] })] }) }));
+}

package/dist/session/panel/open-session-quick-view.d.ts

@@ -0,0 +1,6 @@
+import { type QuickView, type QuickViewTarget } from '../../internal/stores/kortix-computer-store.js';
+export declare function openSessionQuickView(view: QuickView, source: 'palette' | 'header' | 'chat' | 'preview' | 'chip', 
+/** Aims the request — which URL the browser should land on, or that Files
+ *  should open on its Changes diff. Callers that know the destination pass
+ *  it here instead of writing `viewBySession`, which only Advanced reads. */
+target?: QuickViewTarget): void;

package/dist/session/panel/open-session-quick-view.js

@@ -0,0 +1,76 @@
+'use client';
+/**
+ * Open the active session's Terminal, Audit, or Browser surface from OUTSIDE
+ * the panel (the command palette, the session header). One shared implementation
+ * because the branching is id-space-sensitive and was already burned once:
+ *
+ * - Easy mode routes through `requestQuickView`, which resolves the active
+ *   session from the kortix-computer-store's own `_activeSessionId` —
+ *   callers outside the panel have no reliable id of their own (the URL id
+ *   is a DIFFERENT id space from the OpenCode `chatSessionId` panel state is
+ *   keyed by; see `session-browser-store.ts`'s `getActivePanelSessionId`).
+ * - Advanced mode has no pending-view consumer (its tab strip reads
+ *   `session-browser-store` directly), so it writes `setView` onto the
+ *   active panel session via that same helper, then opens the panel.
+ */
+import { MOBILE_BREAKPOINT } from '../../hooks/use-mobile.js';
+import { track } from '../../lib/telemetry.js';
+import { useKortixComputerStore, } from '../../internal/stores/kortix-computer-store.js';
+import { getActivePanelSessionId, useSessionBrowserStore } from '../../internal/stores/session-browser-store.js';
+import { openPanelFallbackView, panelFallbackActive } from '../../internal/stores/panel-fallback-store.js';
+import { useUserPreferencesStore } from '../../internal/stores/user-preferences-store.js';
+/** Same cutoff as `useIsMobile`, readable outside a component. This is a
+ *  plain function (palette handlers, header onClick), so it checks the
+ *  viewport directly instead of taking a hook value it has no way to call. */
+function isMobileViewport() {
+    return typeof window !== 'undefined' && window.innerWidth < MOBILE_BREAKPOINT;
+}
+export function openSessionQuickView(view, source, 
+/** Aims the request — which URL the browser should land on, or that Files
+ *  should open on its Changes diff. Callers that know the destination pass
+ *  it here instead of writing `viewBySession`, which only Advanced reads. */
+target) {
+    // No side panel on this page (a host renders `SessionThread` alone): the
+    // thread's fallback overlay shows the view. See `panel-fallback-store.ts`.
+    if (panelFallbackActive()) {
+        openPanelFallbackView(view, target);
+        track('panel_opened', { source, surface: 'fallback', view });
+        return;
+    }
+    // Mobile: the tool gets its own top-level drawer (`MobileToolDrawer`),
+    // never the panel sheet — opening the Easy/Advanced panel just to host a
+    // terminal meant two stacked sheets and an Easy home the user never asked
+    // for behind the close button. The panel toggle still opens the panel;
+    // this path is only the "show me this one tool" intent.
+    if (isMobileViewport()) {
+        useKortixComputerStore.getState().openMobileTool(view);
+        track('panel_opened', { source, surface: 'mobile-tool', view });
+        return;
+    }
+    const wasOpen = useKortixComputerStore.getState().isSidePanelOpen;
+    const panelMode = useUserPreferencesStore.getState().preferences.panelMode ?? 'easy';
+    // Resolved here for BOTH modes: session-browser-store's active panel
+    // session is maintained on every route (tab dashboard AND the standalone
+    // session page), unlike kortix-computer-store's `_activeSessionId`, which
+    // is tab-gated — relying on the latter silently dropped the terminal open
+    // on /projects/:id/sessions/:id.
+    const activePanelSessionId = getActivePanelSessionId();
+    if (panelMode === 'advanced') {
+        if (activePanelSessionId) {
+            // `SessionPanelView` calls the file explorer 'explorer'; its 'files'
+            // member is the git-changes diff view. The quick-view vocabulary uses
+            // 'files' for the explorer, so translate rather than pass through —
+            // and a Changes-targeted request lands on that 'files' diff value.
+            const panelView = view === 'files' ? (target?.changes ? 'files' : 'explorer') : view;
+            useSessionBrowserStore.getState().setView(activePanelSessionId, panelView);
+        }
+        useKortixComputerStore.getState().openSidePanel();
+    }
+    else {
+        useKortixComputerStore
+            .getState()
+            .requestQuickView(view, activePanelSessionId ?? undefined, target);
+    }
+    if (!wasOpen)
+        track('panel_opened', { source });
+}

package/dist/session/panel/panel-fallback.d.ts

@@ -0,0 +1,8 @@
+export interface SessionPanelFallbackProps {
+    projectId: string;
+    /** The Kortix session id (`useSession(...).sessionId`). */
+    projectSessionId: string;
+    /** The runtime session id (`useSession(...).runtimeSessionId`). Null while the runtime starts. */
+    runtimeSessionId: string | null;
+}
+export declare function SessionPanelFallback({ projectId, projectSessionId, runtimeSessionId, }: SessionPanelFallbackProps): import("react").JSX.Element | null;

package/dist/session/panel/panel-fallback.js

@@ -0,0 +1,62 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The thread's panel intents on a page with no side panel.
+ *
+ * `SessionWorkspace` renders the side panel, and every "open in the panel"
+ * action in the thread (a tool row's Preview, a file chip, a clickable path,
+ * the header's Terminal, Browser, Files and Audit) opens there. A host that
+ * renders `SessionThread` alone has no panel. `SessionThread` mounts this
+ * component, so the same actions open an overlay instead of doing nothing:
+ *
+ * - a file opens in the file preview dialog (`FilePreviewHost`);
+ * - Browser, Terminal, Files and Audit open in a modal with the panel's own view.
+ *
+ * It renders nothing while a side panel is mounted. See `panel-fallback-store.ts`.
+ */
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { lazy, Suspense, useEffect } from 'react';
+import { FilePreviewHost } from '../../files/file-preview-host.js';
+import { useTranslations } from '../../i18n/index.js';
+import { closePanelFallbackView, registerPanelFallbackHost, usePanelFallbackStore, } from '../../internal/stores/panel-fallback-store.js';
+import { useSessionBrowserStore } from '../../internal/stores/session-browser-store.js';
+import Loading from '../../primitives/loading.js';
+import { Modal, ModalContent, ModalTitle } from '../../primitives/modal.js';
+const AppPreview = lazy(() => import('./easy/app-preview.js').then((m) => ({ default: m.AppPreview })));
+const SessionTerminalPanel = lazy(() => import('../../terminal/session-terminal-panel.js').then((m) => ({ default: m.SessionTerminalPanel })));
+const SessionFilesExplorer = lazy(() => import('./session-files-explorer.js').then((m) => ({ default: m.SessionFilesExplorer })));
+const SessionAuditPanel = lazy(() => import('./session-audit-panel.js').then((m) => ({ default: m.SessionAuditPanel })));
+export function SessionPanelFallback({ projectId, projectSessionId, runtimeSessionId, }) {
+    useEffect(() => registerPanelFallbackHost(), []);
+    const panelMounted = useSessionBrowserStore((s) => s.activeSessionId !== null);
+    if (panelMounted)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(FilePreviewHost, {}), _jsx(PanelViewModal, { projectId: projectId, projectSessionId: projectSessionId, runtimeSessionId: runtimeSessionId })] }));
+}
+function PanelViewModal({ projectId, projectSessionId, runtimeSessionId }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const request = usePanelFallbackStore((s) => s.request);
+    if (!request)
+        return null;
+    const { view, target } = request;
+    const title = view === 'browser'
+        ? target?.title || tI18nComplete.raw('text6026c1d8c92e')
+        : view === 'terminal'
+            ? 'Terminal'
+            : view === 'audit'
+                ? tI18nComplete.raw('textbb6aea287396')
+                : target?.changes
+                    ? 'Changes'
+                    : 'Files';
+    const body = view === 'browser' ? (_jsx(AppPreview, { url: target?.url ?? '', name: title, projectId: projectId, shareContext: { projectId, sessionId: projectSessionId }, onClose: closePanelFallbackView })) : view === 'audit' ? (_jsx(SessionAuditPanel, { projectId: projectId, projectSessionId: projectSessionId })) : !runtimeSessionId ? (_jsx(Centered, { children: _jsx(Loading, { className: "size-5" }) })) : view === 'terminal' ? (_jsx(SessionTerminalPanel, { sessionId: runtimeSessionId, projectId: projectId, projectSessionId: projectSessionId })) : (_jsx(SessionFilesExplorer, { chatSessionId: runtimeSessionId, projectId: projectId, projectSessionId: projectSessionId, ephemeral: true, initialMode: target?.changes ? 'changes' : 'files' }));
+    return (_jsx(Modal, { open: true, onOpenChange: (open) => !open && closePanelFallbackView(), children: _jsxs(ModalContent
+        // The browser has its own close button in its toolbar.
+        , { 
+            // The browser has its own close button in its toolbar.
+            showCloseButton: view !== 'browser', 
+            // A single full-bleed pane: no stacked header/body/footer spacing.
+            className: "flex h-[85vh] flex-col gap-0 space-y-0 overflow-hidden p-0 lg:max-h-[85vh] lg:max-w-5xl", "data-slot": "session-panel-fallback", children: [_jsx(VisuallyHidden, { children: _jsx(ModalTitle, { children: title }) }), _jsx("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: _jsx(Suspense, { fallback: _jsx(Centered, { children: _jsx(Loading, { className: "size-5" }) }), children: body }) })] }) }));
+}
+function Centered({ children }) {
+    return _jsx("div", { className: "text-muted-foreground flex h-full items-center justify-center", children: children });
+}

package/dist/session/panel/session-action-panel-column.d.ts

@@ -0,0 +1,11 @@
+export declare function SessionActionPanelColumn({ 
+/**
+ * Own the ⌘I / Ctrl+I binding. False for the instant boot shell: it and the
+ * real chat are BOTH mounted for the length of the crossfade, and two
+ * listeners on one key call `toggleRight()` twice — the panel opens and shuts
+ * in the same tick, so the shortcut reads as dead for that whole window. The
+ * shell yields it; the surface that outlives the fade keeps it.
+ */
+hotkey, }?: {
+    hotkey?: boolean;
+}): import("react").JSX.Element | null;

package/dist/session/panel/session-action-panel-column.js

@@ -0,0 +1,180 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The action panel column — the Outputs/Context/Preview cards, and the chevron
+ * that toggles them, as a real column in the session's layout.
+ *
+ * IN FLOW, never an overlay. It sits beside the chat as a sibling, so opening
+ * it takes width away from the transcript and the chat re-centers itself in
+ * what is left. An absolutely positioned version floated over the conversation
+ * and covered it; this one moves it.
+ *
+ * That is also why there is no `pointer-events-none` dance here any more. The
+ * panel occupies space it owns, so it can never sit on top of text the user is
+ * trying to select.
+ *
+ * Deliberately chrome-free. No wrapper card, radius, shadow, border, or
+ * background: the three cards carry their own borders and ARE the containers.
+ * Anything drawn around them would be a box around boxes.
+ *
+ * It toggles ONLY itself. Opening it never opens the right-hand detail panel;
+ * that surface is content-driven and opens when something gives it a detail to
+ * show. See the store's `isActionPanelOpen` doc comment.
+ *
+ * The reverse is a RENDER rule, not a state one: while a detail panel is up
+ * (browser, terminal, files, file preview) this whole column hides, so the
+ * session is the chat plus the one thing being looked at. No state is written
+ * for that — closing the detail brings the column back as it was.
+ *
+ * ⌘I / Ctrl+I lives here, but it does NOT mean "toggle this column". It means
+ * "toggle the right side", which is `toggleRightPanel` in the store: close
+ * whatever is docked there — this column, a detail panel, or both — and, when
+ * nothing is, reopen what this session was last showing, falling back to this
+ * column. One key for one visual region. The memory is session-scoped: leave
+ * the session and the key is back to opening this column.
+ *
+ * The binding lives on this component only because this is the surface that is
+ * always mounted for a session (the detail panel is content-driven and may
+ * have nothing to render). It stays mounted while `hidden` under a detail,
+ * which is what lets the key close that detail.
+ *
+ * The chevron is unaffected: it is this column's own control, so it toggles
+ * this column and nothing else.
+ */
+import Hint from '../../primitives/hint.js';
+import { Kbd, KbdGroup } from '../../primitives/kbd.js';
+import { ActionPanel } from './action-panel.js';
+import { useOptionalSessionPanel } from './session-panel-provider.js';
+import { useIsMobile } from '../../internal/hooks/index.js';
+import { cn } from '../../lib/utils.js';
+import { useIsActionPanelOpen, useIsSidePanelOpen, useReadyChip, useToggleActionPanel, useToggleRightPanel, } from '../../internal/stores/kortix-computer-store.js';
+import { useTabStore } from '../../internal/stores/tab-store.js';
+import { CaretDoubleLeftIcon, CaretDoubleRightIcon } from '@phosphor-icons/react';
+import { m, useReducedMotion } from 'motion/react';
+import { useEffect } from 'react';
+/** The panel's open width. The inner content is pinned to it so the cards keep
+ *  their true width while the container widens — they slide into view rather
+ *  than reflowing from squashed to correct on every frame. */
+const PANEL_WIDTH = 380;
+const isMac = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+const modSymbol = isMac ? '⌘' : 'Ctrl';
+/**
+ * Motion. This is the one place in this work that animates a LAYOUT property,
+ * and it is deliberate: pushing the chat aside IS a layout change, so there is
+ * no transform that can express it. The cost is bounded — one 200ms one-shot
+ * on an explicit toggle, on a single element.
+ *
+ * Ease-out, because the panel is entering and leaving the screen and the
+ * acceleration belongs up front where the eye already is. 200ms in, 160ms out:
+ * exits run ~80% of the entrance, since leaving is a decision already made.
+ */
+/** Collapsed, the column is only the chevron: `size-7` + `mr-1` + the `gap-2`
+ *  before the zero-width panel = 10 spacing tokens (`--spacing: 0.23rem`). A
+ *  negative margin of the same size cancels it, so the chat centers on the
+ *  full row width and the chevron sits over its right edge. Kept in rem so
+ *  motion can interpolate it against `0rem`. */
+const COLLAPSED_RAIL_OFFSET = '-2.3rem';
+const EASE_OUT = [0.23, 1, 0.32, 1];
+const ENTER = { duration: 0.2, ease: EASE_OUT };
+const EXIT = { duration: 0.16, ease: EASE_OUT };
+export function SessionActionPanelColumn({ 
+/**
+ * Own the ⌘I / Ctrl+I binding. False for the instant boot shell: it and the
+ * real chat are BOTH mounted for the length of the crossfade, and two
+ * listeners on one key call `toggleRight()` twice — the panel opens and shuts
+ * in the same tick, so the shortcut reads as dead for that whole window. The
+ * shell yields it; the surface that outlives the fade keeps it.
+ */
+hotkey = true, } = {}) {
+    const panel = useOptionalSessionPanel();
+    const isMobile = useIsMobile();
+    const isOpen = useIsActionPanelOpen();
+    // The chevron's own action — it is this column's control, so it moves this
+    // column and nothing else.
+    const toggle = useToggleActionPanel();
+    // ⌘I's action — the whole right side, whichever surface is docked there.
+    const toggleRight = useToggleRightPanel();
+    const readyChip = useReadyChip();
+    const reduce = useReducedMotion();
+    // The right-hand detail panel is showing a browser, a terminal, a file
+    // explorer or a file preview. Post-refactor that panel is content-driven, so
+    // this flag is true exactly when one of those is on screen.
+    const detailPanelOpen = useIsSidePanelOpen();
+    const sessionId = panel?.sessionId;
+    const isInTabSystem = useTabStore((s) => (sessionId ? !!s.tabs[sessionId] : false));
+    const isActiveTab = useTabStore((s) => (sessionId ? s.activeTabId === sessionId : false));
+    // Inactive session tabs stay mounted. Only the visible tab may own ⌘I, or
+    // every background layout would flip the shared `isActionPanelOpen` flag.
+    const shouldHandleHotkey = hotkey && !!panel && !isMobile && (isInTabSystem ? isActiveTab : true);
+    useEffect(() => {
+        if (!shouldHandleHotkey)
+            return;
+        const onKey = (e) => {
+            if ((e.metaKey || e.ctrlKey) && (e.key === 'i' || e.key === 'I')) {
+                e.preventDefault();
+                // NOT `toggle()` — see this file's header. The key owns the right side;
+                // the chevron owns this column. Binding the key to the column left the
+                // detail panel (browser, terminal, files, a preview) with no keyboard
+                // close at all, and pressing ⌘I under one silently moved a column the
+                // detail was covering.
+                toggleRight();
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [shouldHandleHotkey, toggleRight]);
+    // No provider means no panel to render: `SessionChat` also renders read-only
+    // inside `sub-session-modal.tsx`, outside `SessionLayout`. Mobile has no
+    // column either — at 375px a side column is the whole screen, so the cards
+    // stay in the bottom drawer they have always used.
+    if (!panel || isMobile)
+        return null;
+    const showReadyDot = readyChip?.sessionId === sessionId && !isOpen;
+    const label = isOpen ? 'Collapse pane' : 'Expand pane';
+    return (
+    // The margin animates with the panel width and uses the same transition,
+    // so the column's net width changes smoothly in both directions and the
+    // chat never jumps.
+    _jsxs(m.div, { initial: false, animate: { marginLeft: isOpen ? '0rem' : COLLAPSED_RAIL_OFFSET }, transition: reduce ? { duration: 0 } : isOpen ? ENTER : EXIT, className: cn('group/panel relative z-10 flex min-h-0 shrink-0 items-start gap-2 py-3', 
+        // Collapsed, the column overlaps the chat's right edge. Only the
+        // chevron takes pointer input, so the chat's scrollbar and wheel
+        // scrolling under the rest of the strip still work.
+        !isOpen && 'pointer-events-none', 
+        // A detail panel is showing on the right. The action panel steps aside
+        // ENTIRELY — the control and the cards — so the session is the chat
+        // plus the one thing being looked at, not a transcript squeezed
+        // between two panels.
+        //
+        // Hiding only the chevron would be worse than leaving it: with the
+        // cards expanded there would be no way left to collapse them.
+        //
+        // `hidden` rather than an unmount, so the cards keep their own
+        // expanded/collapsed state and it costs no layout. And render-only on
+        // purpose: `isActionPanelOpen` is never written here, so closing the
+        // detail brings the column back exactly as the user left it. The two
+        // states stay independent — only what is PAINTED depends on both.
+        detailPanelOpen && 'hidden'), "data-testid": "session-action-panel", children: [_jsx(Hint, { side: "left", sideOffset: 4, delayDuration: 300, label: _jsxs("span", { className: "flex items-center gap-1.5", children: [label, _jsxs(KbdGroup, { children: [_jsx(Kbd, { className: "font-mono", children: modSymbol }), _jsx(Kbd, { className: "font-mono", children: "I" })] })] }), children: _jsx("button", { type: "button", "aria-label": label, "aria-expanded": isOpen, onClick: toggle, className: cn('flex size-7 shrink-0 items-center justify-center rounded-md', 'text-foreground/80 hover:text-foreground hover:bg-accent', 'transition-[color,background-color,transform,opacity] duration-150 ease-out active:scale-[0.96]', 
+                    // Expanded, the collapse control steps out of the way: the cards
+                    // are the content, and a permanently visible chevron beside them is
+                    // chrome the user has already read. Hovering anywhere in the column
+                    // brings it back, as does tabbing to it.
+                    //
+                    // `pointer-events-none` rides WITH the fade, deliberately. Opacity
+                    // zero still occupies space AND still receives pointer events, so a
+                    // faded-out button stays clickable — an invisible hit target pinned
+                    // against the panel's edge. (This is the opacity/visibility
+                    // distinction: `visibility: hidden` would drop interaction for us,
+                    // but it is not animatable, and the fade is the point.) Both are
+                    // restored together on reveal. Focus is unaffected by
+                    // `pointer-events`, so the keyboard path still reaches it.
+                    isOpen
+                        ? 'pointer-events-none opacity-0 group-hover/panel:pointer-events-auto group-hover/panel:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100'
+                        : 'pointer-events-auto mr-1'), children: _jsx("span", { className: "relative inline-flex", children: isOpen ? (_jsx(CaretDoubleRightIcon, { className: "size-4" })) : (_jsx(CaretDoubleLeftIcon, { className: "size-4" })) }) }) }), _jsx(m.div, { initial: false, animate: { width: isOpen ? PANEL_WIDTH : 0 }, transition: reduce ? { duration: 0 } : isOpen ? ENTER : EXIT, "aria-hidden": !isOpen, inert: !isOpen || undefined, 
+                // `self-stretch` against the column's `items-start`: the cards inside
+                // divide the available height between them, and "available" has to be
+                // a real number for that to mean anything. Left at `items-start` this
+                // box was only as tall as its content, so `h-full` further down
+                // resolved against nothing and every card fell back to its natural
+                // height — the stack the panel used to be.
+                className: "min-h-0 self-stretch overflow-hidden", children: _jsx("div", { className: "scrollbar-minimal h-full overflow-y-auto overscroll-contain pr-3", style: { width: PANEL_WIDTH }, children: _jsx(ActionPanel, {}) }) })] }));
+}

package/dist/session/panel/session-audit-panel.d.ts

@@ -0,0 +1,4 @@
+export declare function SessionAuditPanel({ projectId, projectSessionId, }: {
+    projectId?: string;
+    projectSessionId?: string;
+}): import("react").JSX.Element;

package/dist/session/panel/session-audit-panel.js

@@ -0,0 +1,100 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ApprovalRequest, } from '../prompts/approval-request.js';
+import { Badge } from '../../primitives/badge.js';
+import { Button } from '../../primitives/button.js';
+import Loading from '../../primitives/loading.js';
+import { Modal, ModalBody, ModalContent, ModalDescription, ModalHeader, ModalTitle, } from '../../primitives/modal.js';
+import { errorToast, successToast } from '../../primitives/toast.js';
+import { EmptyState } from '../../primitives/empty-state.js';
+import { ErrorState } from '../../primitives/error-state.js';
+import { approvalLauncherName, approvalRequestFromAction, } from '../prompts/session-approval-review.js';
+import { isPendingAction, relativeTime, riskTone, statusLabel, statusTone, useResolveApproval, useSessionAudit, useSessionAuditTimeline, } from './session-audit-shared.js';
+import { credentialVia } from './audit/audit-credential-label.js';
+import { useTranslations } from '../../i18n/index.js';
+import { useProjectSession } from '@kortix/sdk/react';
+import { CaretRightIcon, ShieldCheckIcon } from '@phosphor-icons/react';
+import { useMemo, useState } from 'react';
+export function SessionAuditPanel({ projectId, projectSessionId, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const approvalQuery = useSessionAudit(projectId, projectSessionId);
+    const { data } = approvalQuery;
+    const timelineQuery = useSessionAuditTimeline(projectId, projectSessionId, {
+        enabled: data !== undefined && data.audit_access !== false,
+    });
+    const resolve = useResolveApproval(projectId, projectSessionId);
+    const { data: session } = useProjectSession(projectId, projectSessionId);
+    const launcherName = approvalLauncherName(session);
+    const [busy, setBusy] = useState({});
+    const [outcomes, setOutcomes] = useState({});
+    const [selected, setSelected] = useState(null);
+    const [selectedEvent, setSelectedEvent] = useState(null);
+    const actions = data?.actions ?? [];
+    const events = useMemo(() => (timelineQuery.data?.pages ?? []).flatMap((page) => page.events ?? []), [timelineQuery.data]);
+    const pending = actions.filter(isPendingAction);
+    // KRTX-1724: "Needs your approval" only when the viewer may decide one.
+    const pendingIsMine = pending.some((action) => action.can_resolve !== false);
+    const history = events.length > 0 ? [] : actions.filter((action) => !isPendingAction(action));
+    const historyGated = data?.audit_access === false;
+    const decide = (executionId, decision, note) => {
+        setBusy((current) => ({ ...current, [executionId]: decision }));
+        resolve.mutate({ executionId, decision, note }, {
+            onSuccess: () => {
+                setOutcomes((current) => ({ ...current, [executionId]: decision }));
+                successToast(decision === tI18nComplete.raw('text74e21680eac7')
+                    ? tI18nComplete.raw('text0674d4a026cb')
+                    : tI18nComplete.raw('text4341be8eb7f0'));
+            },
+            onError: (cause) => errorToast(cause instanceof Error ? cause.message : tI18nComplete.raw('textaa7e623fc09a')),
+            onSettled: () => setBusy((current) => {
+                const next = { ...current };
+                delete next[executionId];
+                return next;
+            }),
+        });
+    };
+    return (_jsxs("div", { className: "flex h-full w-full flex-col", children: [_jsxs("header", { className: "border-border shrink-0 border-b px-6 py-3", children: [_jsx("h2", { className: "text-foreground text-sm font-medium", children: tI18nComplete.raw('textbb6aea287396') }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs text-pretty", children: tI18nComplete.raw('text2ce0023296d9') })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-6", children: approvalQuery.isLoading || (data?.audit_access !== false && timelineQuery.isLoading) ? (_jsx("div", { className: "flex justify-center py-16", children: _jsx(Loading, {}) })) : approvalQuery.isError || timelineQuery.isError ? (_jsx(ErrorState, { size: "sm", title: tI18nComplete.raw('text43127bce57bf'), description: tI18nComplete.raw('textb4415e2f9e92'), action: _jsx(Button, { size: "sm", variant: "outline", onClick: () => {
+                            void approvalQuery.refetch();
+                            void timelineQuery.refetch();
+                        }, children: tI18nComplete.raw('text942087cc2d41') }) })) : actions.length === 0 && events.length === 0 ? (_jsx(EmptyState, { icon: ShieldCheckIcon, size: "sm", title: historyGated
+                        ? tI18nComplete.raw('text13d50aaa238b')
+                        : tI18nComplete.raw('text877c91ca4226'), description: historyGated
+                        ? tI18nComplete.raw('text382d329c7bac')
+                        : tI18nComplete.raw('text07d75205a8ee') })) : (_jsxs("div", { className: "space-y-6", children: [pending.length > 0 ? (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "text-foreground text-xs font-medium", children: pendingIsMine
+                                                ? tI18nComplete.raw('text635ea5c1ebb7')
+                                                : tI18nComplete.raw('textdb0e960b68b5') }), _jsx(Badge, { variant: "warning", size: "xs", children: pending.length })] }), _jsx("div", { className: "space-y-3", children: pending.map((action) => {
+                                        const outcome = outcomes[action.execution_id] ?? null;
+                                        return (_jsx(ApprovalRequest, { request: approvalRequestFromAction(action, outcome === null), onDecision: (decision, note) => decide(action.execution_id, decision, note), busyDecision: busy[action.execution_id] ?? null, outcome: outcome, resolverName: launcherName }, action.execution_id));
+                                    }) })] })) : null, events.length > 0 ? (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "text-muted-foreground text-xs font-medium", children: tI18nComplete.raw('text129e6ae61447') }), _jsx(Badge, { variant: "muted", size: "xs", className: "tabular-nums", children: events.length })] }), _jsx("ul", { className: "bg-popover overflow-hidden rounded-md border", children: events.map((event, index) => (_jsx("li", { className: "border-border border-b last:border-b-0", children: _jsxs("button", { type: "button", className: "hover:bg-primary/[0.03] flex min-h-12 w-full items-center gap-3 px-4 py-2 text-left transition-[background-color,transform] active:scale-[0.96]", onClick: () => setSelectedEvent(event), children: [_jsx("span", { className: "text-muted-foreground w-8 shrink-0 text-right font-mono text-xs tabular-nums", children: event.session_sequence ?? index + 1 }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("code", { className: "text-foreground truncate font-mono text-sm", children: event.action }), event.phase ? (_jsx(Badge, { variant: "outline", size: "xs", className: "capitalize", children: event.phase })) : null, _jsx(Badge, { variant: event.outcome === 'success'
+                                                                        ? 'success'
+                                                                        : event.outcome === 'pending'
+                                                                            ? 'warning'
+                                                                            : event.outcome === 'failure' || event.outcome === 'denied'
+                                                                                ? 'destructive'
+                                                                                : 'muted', size: "xs", className: "capitalize", children: event.outcome ?? 'recorded' })] }), _jsxs("p", { className: "text-muted-foreground mt-0.5 truncate text-xs", children: [credentialVia(event, (key) => tI18nComplete.raw(key)) ??
+                                                                    event.authoritative_source ??
+                                                                    event.source ??
+                                                                    'system', ' ', "\u00B7", ' ', relativeTime(event.occurred_at)] })] }), _jsx(CaretRightIcon, { className: "text-muted-foreground size-4 shrink-0" })] }) }, event.event_id))) }), timelineQuery.hasNextPage ? (_jsx("div", { className: "flex justify-center pt-1", children: _jsxs(Button, { size: "sm", variant: "outline", disabled: timelineQuery.isFetchingNextPage, onClick: () => void timelineQuery.fetchNextPage(), children: [timelineQuery.isFetchingNextPage ? _jsx(Loading, { className: "size-3.5" }) : null, tI18nComplete.raw('text96f2482de866')] }) })) : null] })) : null, history.length > 0 ? (_jsxs("section", { className: "space-y-3", children: [_jsx("h3", { className: "text-muted-foreground text-xs font-medium", children: tI18nComplete.raw('text0e7696009337') }), _jsx("ul", { className: "bg-popover overflow-hidden rounded-md border", children: history.map((action) => (_jsx("li", { className: "border-border border-b last:border-b-0", children: _jsxs("button", { type: "button", className: "hover:bg-primary/[0.03] flex min-h-12 w-full items-center gap-3 px-4 py-2 text-left transition-[background-color,transform] active:scale-[0.96]", onClick: () => setSelected(action), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("code", { className: "text-foreground truncate font-mono text-sm", children: action.action }), action.risk ? (_jsx(Badge, { variant: riskTone(action.risk), size: "xs", className: "capitalize", children: action.risk })) : null, _jsx(Badge, { variant: statusTone(action.status), size: "xs", children: statusLabel(action.status) })] }), _jsxs("p", { className: "text-muted-foreground mt-0.5 truncate text-xs", children: [action.acted_by_email ?? 'agent', " \u00B7 ", relativeTime(action.at), action.resolved_by_email
+                                                                    ? tI18nComplete('text0e16f24ee012', {
+                                                                        value0: action.status === 'denied' ? 'denied' : 'approved',
+                                                                        value1: action.resolved_by_email,
+                                                                    })
+                                                                    : ''] })] }), _jsx(CaretRightIcon, { className: "text-muted-foreground size-4 shrink-0" })] }) }, action.execution_id))) })] })) : null, historyGated ? (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tI18nComplete.raw('text3206f60e481f') })) : null] })) }), _jsx(Modal, { open: selected !== null, onOpenChange: (open) => (!open ? setSelected(null) : undefined), children: _jsxs(ModalContent, { className: "lg:max-w-xl", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tI18nComplete.raw('textf9b4f002634b') }), _jsx(ModalDescription, { children: tI18nComplete.raw('text18fb4a5618b9') })] }), _jsx(ModalBody, { className: "max-h-[70vh] overflow-y-auto", children: selected ? (_jsx(ApprovalRequest, { request: approvalRequestFromAction(selected, false) })) : null })] }) }), _jsx(Modal, { open: selectedEvent !== null, onOpenChange: (open) => (!open ? setSelectedEvent(null) : undefined), children: _jsxs(ModalContent, { className: "lg:max-w-2xl", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tI18nComplete.raw('text7ed62f13532a') }), _jsxs(ModalDescription, { children: [tI18nComplete.raw('text20cec9e797c9'), selectedEvent ? (selectedEvent.session_sequence ?? events.indexOf(selectedEvent) + 1) : '—', " ", tI18nComplete.raw('text28419d670fef')] })] }), _jsx(ModalBody, { className: "max-h-[70vh] space-y-4 overflow-y-auto", children: selectedEvent ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "bg-popover grid rounded-md border sm:grid-cols-2", children: [
+                                            ['Action', selectedEvent.action],
+                                            ['Phase', selectedEvent.phase],
+                                            [
+                                                tI18nComplete.raw('text2ed8b8066255'),
+                                                credentialVia(selectedEvent, (key) => tI18nComplete.raw(key)) ??
+                                                    selectedEvent.authoritative_source ??
+                                                    selectedEvent.source,
+                                            ],
+                                            [tI18nComplete.raw('text3045abafb173'), selectedEvent.event_id],
+                                            [tI18nComplete.raw('text92fbc8484002'), selectedEvent.runtime_session_id ?? selectedEvent.opencode_session_id],
+                                            [tI18nComplete.raw('text11d5959da5d3'), selectedEvent.message_id],
+                                            [tI18nComplete.raw('textfce8323af972'), selectedEvent.tool_call_id],
+                                            [tI18nComplete.raw('texte8c80b20c2f7'), selectedEvent.execution_id],
+                                        ].map(([label, value]) => (_jsxs("div", { className: "border-border min-w-0 space-y-1 border-b p-3 sm:border-r sm:nth-[2n]:border-r-0", children: [_jsx("p", { className: "text-muted-foreground text-xs font-medium", children: label }), _jsx("p", { className: "text-foreground font-mono text-xs break-all tabular-nums", children: value ?? '—' })] }, label))) }), selectedEvent.input_summary || selectedEvent.output_summary ? (_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsx(AuditSummary, { label: tI18nComplete.raw('text57c5a5829f70'), value: selectedEvent.input_summary }), _jsx(AuditSummary, { label: tI18nComplete.raw('textf130203efa7f'), value: selectedEvent.output_summary })] })) : null] })) : null })] }) })] }));
+}
+function AuditSummary({ label, value }) {
+    return (_jsxs("div", { className: "bg-popover overflow-hidden rounded-md border", children: [_jsx("div", { className: "border-border border-b px-3 py-2", children: _jsx("p", { className: "text-muted-foreground text-xs font-medium", children: label }) }), _jsx("pre", { className: "text-foreground max-h-64 overflow-auto p-3 font-mono text-xs leading-relaxed", children: JSON.stringify(value, null, 2) })] }));
+}

package/dist/session/panel/session-audit-shared.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Shared data + helpers for the PER-SESSION audit / approvals surface.
+ *
+ * Two views consume this: the side-panel "Audit" tab (session-audit-panel.tsx)
+ * and the header nudge (header/session-pending-approvals-indicator.tsx). Both
+ * read from ONE react-query key so they dedupe into a single request and stay
+ * in lockstep — resolve a pending item in either place and both refresh.
+ *
+ * Gating note: we drive everything off `getSessionAudit` (gated on session
+ * VISIBILITY — the launcher can see their own session) rather than the
+ * project-wide `listPendingApprovals` (account owner/admin only). That's
+ * deliberate: the per-session surface is for the launcher, who may not be an
+ * account owner/admin. The resolve endpoint itself allows an account
+ * owner/admin OR the launcher.
+ */
+import { type SessionAudit, type SessionAuditAction } from '@kortix/sdk';
+import { type QueryClient } from '@tanstack/react-query';
+/** One poll cadence for the shared session-audit query, so both surfaces (panel
+ *  + header nudge) agree regardless of which mounts first. Pauses in background
+ *  tabs (react-query's refetchIntervalInBackground defaults to false). */
+export declare const SESSION_AUDIT_REFETCH_MS = 15000;
+export declare function sessionAuditKey(projectId: string | undefined, sessionId: string | undefined): readonly ["session-audit", string, string];
+/** A gated action still awaiting a human decision (unresolved `pending_approval`). */
+export declare function isPendingAction(a: SessionAuditAction): boolean;
+interface UseSessionAuditOptions {
+    /** Skip the query entirely (e.g. not the active session / missing ids). */
+    enabled?: boolean;
+    /** Own the one audit poll timer for this session. Cache readers leave this off. */
+    poll?: boolean;
+    /** Suppress the global error toast (for the always-mounted header nudge). */
+    silent?: boolean;
+    /**
+     * Rows to ask for. Every consumer of THIS hook reads pending approvals, which
+     * the server returns most-recent first, so 100 is plenty — the deep timeline
+     * moved to `useSessionAuditTimeline`. The query key ignores the limit (all
+     * consumers share one cache entry), so the first fetch's limit is the one
+     * that runs: a 1000 default here re-imposed the heavy read on every session
+     * open even after callers asked for 100.
+     */
+    limit?: number;
+}
+export declare function sessionAuditPollMs(data: Pick<SessionAudit, 'actions'> | undefined): number;
+export declare function useSessionAudit(projectId: string | undefined, sessionId: string | undefined, options?: UseSessionAuditOptions): import("@tanstack/react-query").UseQueryResult<SessionAudit, Error>;
+/**
+ * Paginated canonical session timeline.
+ *
+ * This query does not poll. Pending approvals use `useSessionAudit`, whose
+ * lightweight request excludes historical events. Loading more history never
+ * makes the 15-second approval poll refetch pages the user already read.
+ */
+export declare function useSessionAuditTimeline(projectId: string | undefined, sessionId: string | undefined, options?: Pick<UseSessionAuditOptions, 'enabled' | 'silent'>): import("@tanstack/react-query").UseInfiniteQueryResult<import("@tanstack/react-query").InfiniteData<SessionAudit, unknown>, Error>;
+/**
+ * Mutation options for approve/deny, extracted out of `useResolveApproval` so
+ * this is directly testable without rendering a component (see
+ * `session-audit-shared.test.ts`).
+ *
+ * Every call site (`SessionApprovalPrompt`, `SessionAuditPanel`,
+ * `SessionPendingApprovalsIndicator`) passes its own call-time `onError` to
+ * `resolve.mutate(vars, { onError })` and shows a specific, actionable toast
+ * (e.g. "Failed to resolve approval"). Without a hook-level `onError` here,
+ * TanStack Query's `defaultMutationOptions()` merge falls back to the
+ * QueryClient's global default mutation `onError`
+ * (`apps/web/src/app/react-query-provider.tsx`) — which ALSO fires, in
+ * addition to (not instead of) the call-time one. That produced a confusing
+ * SECOND toast — the generic "Failed to perform action: <message>" — anytime
+ * a resolve failed, most visibly when the target execution had already been
+ * resolved elsewhere (the resolve endpoint can be hit with zero browsers
+ * open, and the audit poll can lag a few seconds behind), which 404s with a
+ * bare "not found". The no-op `onError` below opts this mutation out of the
+ * global default, matching the same pattern already used by
+ * `useAbortRuntimeSession` — every consumer already owns its own error UX.
+ */
+export declare function resolveApprovalMutationOptions(projectId: string | undefined, sessionId: string | undefined, queryClient: QueryClient): {
+    mutationFn: ({ executionId, decision, note, }: {
+        executionId: string;
+        decision: "approve" | "deny";
+        /** The approver's message to the agent, delivered with the decision. */
+        note?: string;
+    }) => Promise<{
+        ok: boolean;
+    }>;
+    onError: () => void;
+    onSettled: () => void;
+};
+/** Approve/deny mutation that invalidates the shared audit query on settle —
+ *  see `resolveApprovalMutationOptions` above for why it opts out of the
+ *  global default mutation `onError`. */
+export declare function useResolveApproval(projectId: string | undefined, sessionId: string | undefined): import("@tanstack/react-query").UseMutationResult<{
+    ok: boolean;
+}, Error, {
+    executionId: string;
+    decision: "approve" | "deny";
+    /** The approver's message to the agent, delivered with the decision. */
+    note?: string;
+}, unknown>;
+export declare function riskTone(risk: string | null): 'destructive' | 'warning' | 'muted';
+/** Terminal outcome of a gated action → badge tone. */
+export declare function statusTone(status: string): 'success' | 'destructive' | 'warning' | 'muted';
+/** Human label for a status value. */
+export declare function statusLabel(status: string): string;
+export declare function relativeTime(iso: string): string;
+export {};