@kortix/ui 0.0.0-stage → 0.14.4

package/dist/workspace/sidebar/customize-sidebar-modal.d.ts

@@ -0,0 +1,9 @@
+/**
+ * "Customize sidebar": the nav rows in two groups, "Sidebar" and "More". Where a row sits is the setting: drag it across the line to
+ * move it under More, drag it back to show it. Changes apply as they are
+ * made; there is no save step. Opened from the sidebar's More menu and
+ * the command palette through `openCustomizeSidebar()`.
+ */
+export declare function CustomizeSidebarModal({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element;

package/dist/workspace/sidebar/customize-sidebar-modal.js

@@ -0,0 +1,198 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../primitives/button.js';
+import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, } from '../../primitives/modal.js';
+import { useUiUpdateViewerMetadata, useUiViewer, } from '../../providers/ui-provider.js';
+import { useNavRowMeta } from './nav-row-meta.js';
+import { useDebounce } from '../../hooks/use-debounce.js';
+import { useTranslations } from '../../i18n/index.js';
+import { spring } from '../../lib/springs.js';
+import { cn } from '../../internal/lib/utils.js';
+import { SIDEBAR_NAV_METADATA_KEY, resolveSidebarNav, sidebarNavKey, useSidebarNavStore, } from '../../internal/stores/sidebar-nav-store.js';
+import { DotsSixVerticalIcon } from '@phosphor-icons/react';
+import { Reorder } from 'motion/react';
+import { memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+/**
+ * "Customize sidebar": the nav rows in two groups, "Sidebar" and "More". Where a row sits is the setting: drag it across the line to
+ * move it under More, drag it back to show it. Changes apply as they are
+ * made; there is no save step. Opened from the sidebar's More menu and
+ * the command palette through `openCustomizeSidebar()`.
+ */
+export function CustomizeSidebarModal({ projectId }) {
+    const t = useTranslations('sidebar');
+    const open = useSidebarNavStore((s) => s.customizeOpen);
+    const setOpen = useSidebarNavStore((s) => s.setCustomizeOpen);
+    const reset = useSidebarNavStore((s) => s.reset);
+    const onOpenChange = useSidebarNavAccountSync(open, setOpen);
+    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: _jsxs(ModalContent, { className: "sm:max-w-md", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: t('customizeSidebar') }), _jsx(ModalDescription, { children: t('customizeSidebarDescription') })] }), _jsx(ModalBody, { children: _jsx(NavRowGroups, { projectId: projectId }) }), _jsx(ModalFooter, { children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: reset, children: t('resetSidebar') }) })] }) }));
+}
+function saveSidebarNav(save, items) {
+    save?.({ [SIDEBAR_NAV_METADATA_KEY]: items }).catch((error) => {
+        console.warn('[sidebar] Could not save the sidebar layout to the account:', error);
+    });
+}
+/**
+ * Keeps the layout on the account, so it survives sign-out (which sweeps
+ * localStorage) and follows the person to the desktop app. The account copy
+ * is applied when the user loads; an edit is saved once, when the modal
+ * closes. Only an explicit close writes: the sign-out sweep also resets the
+ * store, and a store subscription would save that reset over the layout.
+ */
+function useSidebarNavAccountSync(open, setOpen) {
+    const user = useUiViewer();
+    const save = useUiUpdateViewerMetadata();
+    const userId = user?.id;
+    const remote = user?.metadata?.[SIDEBAR_NAV_METADATA_KEY];
+    const remoteKey = JSON.stringify(remote ?? null);
+    const openedWith = useRef(null);
+    useEffect(() => {
+        // An open modal holds edits the account does not have yet.
+        if (!userId || useSidebarNavStore.getState().customizeOpen)
+            return;
+        const { items, push } = resolveSidebarNav(JSON.parse(remoteKey), useSidebarNavStore.getState().items);
+        useSidebarNavStore.getState().setItems(items);
+        if (push)
+            saveSidebarNav(save, items);
+    }, [userId, remoteKey, save]);
+    // The modal opens through the store (`openCustomizeSidebar`), so the
+    // snapshot follows `open`, not `onOpenChange`.
+    useEffect(() => {
+        if (open)
+            openedWith.current = sidebarNavKey(useSidebarNavStore.getState().items);
+    }, [open]);
+    return useCallback((next) => {
+        const { items } = useSidebarNavStore.getState();
+        if (!next && openedWith.current !== null && openedWith.current !== sidebarNavKey(items)) {
+            saveSidebarNav(save, items);
+        }
+        if (!next)
+            openedWith.current = null;
+        setOpen(next);
+    }, [setOpen, save]);
+}
+/** The line between the two groups. A list value like any row, so a drag
+ *  across it is an ordinary reorder; it is never dragged itself. */
+const DIVIDER = '__more__';
+const { exit: _exit, ...reorderTransition } = spring.moderate;
+function NavRowGroups({ projectId }) {
+    const t = useTranslations('sidebar');
+    const meta = useNavRowMeta(projectId);
+    const items = useSidebarNavStore((s) => s.items);
+    const setItems = useSidebarNavStore((s) => s.setItems);
+    const listRef = useRef(null);
+    const [announcement, setAnnouncement] = useState('');
+    const [dragging, setDragging] = useState(false);
+    const hintId = useId();
+    // Only the rows this project offers are listed; the rest keep their slot.
+    const saved = useMemo(() => {
+        const listed = items.filter((e) => meta[e.id]);
+        return [
+            ...listed.filter((e) => e.visibility !== 'never').map((e) => e.id),
+            DIVIDER,
+            ...listed.filter((e) => e.visibility === 'never').map((e) => e.id),
+        ];
+    }, [items, meta]);
+    const savedKey = saved.join('|');
+    // The drag edits a local draft, never the store. Every reorder frame used
+    // to write the persisted store (a localStorage write) and re-render the
+    // whole sidebar behind the modal; now a frame re-renders this list only.
+    const [draft, setDraft] = useState(saved);
+    const draftKey = draft.join('|');
+    // Follow the store when it changes from outside (Reset). Adjusted during
+    // render, React's pattern for state derived from a changed input.
+    const [syncedKey, setSyncedKey] = useState(savedKey);
+    if (syncedKey !== savedKey) {
+        setSyncedKey(savedKey);
+        if (draftKey !== savedKey)
+            setDraft(saved);
+    }
+    const save = (list) => {
+        const split = list.indexOf(DIVIDER);
+        const placed = list
+            .filter((v) => v !== DIVIDER)
+            .map((id) => {
+            if (list.indexOf(id) > split)
+                return { id, visibility: 'never' };
+            const was = items.find((e) => e.id === id).visibility;
+            return { id, visibility: was === 'never' ? 'always' : was };
+        });
+        let i = 0;
+        setItems(items.map((e) => (meta[e.id] ? placed[i++] : e)));
+    };
+    // Save once the order settles: after the drag ends and 200ms pass without
+    // a change. `settledKey === draftKey` keeps a stale debounced value from
+    // writing over a draft the store just reset.
+    const { debouncedValue: settled } = useDebounce(draft, 200);
+    const settledKey = settled.join('|');
+    useEffect(() => {
+        if (dragging || settledKey !== draftKey || draftKey === savedKey)
+            return;
+        save(settled);
+    });
+    // Closing the modal inside the 200ms window must not drop the last move.
+    const flushRef = useRef(() => { });
+    useLayoutEffect(() => {
+        flushRef.current = () => {
+            if (draftKey !== savedKey)
+                save(draft);
+        };
+    });
+    useEffect(() => () => flushRef.current(), []);
+    // Stable across renders so memoized rows skip re-rendering on every frame.
+    const draftRef = useRef(draft);
+    useLayoutEffect(() => {
+        draftRef.current = draft;
+    });
+    const moveByKey = useCallback((id, delta) => {
+        const current = draftRef.current;
+        const from = current.indexOf(id);
+        const to = from + delta;
+        if (to < 0 || to >= current.length)
+            return;
+        const next = [...current];
+        [next[from], next[to]] = [next[to], next[from]];
+        setDraft(next);
+        const split = next.indexOf(DIVIDER);
+        const at = next.indexOf(id);
+        const inSidebar = at < split;
+        setAnnouncement(t('reorderAnnouncement', {
+            name: meta[id].label,
+            group: inSidebar ? t('inSidebar') : t('underMore'),
+            position: inSidebar ? at + 1 : at - split,
+            total: inSidebar ? split : next.length - split - 1,
+        }));
+        // Reordering moves the DOM node, which can drop focus from the handle.
+        requestAnimationFrame(() => listRef.current?.querySelector(`[data-grip="${id}"]`)?.focus());
+    }, [t, meta]);
+    const dividerAt = draft.indexOf(DIVIDER);
+    const hiddenCount = draft.length - dividerAt - 1;
+    return (_jsxs("section", { className: "space-y-2", children: [_jsx(GroupHeading, { label: t('inSidebar'), count: dividerAt }), _jsx("p", { id: hintId, className: "sr-only", children: t('reorderHint') }), _jsx(Reorder.Group, { ref: listRef, as: "ul", axis: "y", values: draft, onReorder: setDraft, className: "flex flex-col gap-px", children: draft.map((value, index) => value === DIVIDER ? (_jsxs(Reorder.Item, { as: "li", value: DIVIDER, dragListener: false, transition: reorderTransition, className: "list-none", children: [dividerAt === 0 ? _jsx(EmptyDrop, { label: t('sidebarEmpty') }) : null, _jsx("div", { className: "pt-4 pb-2", children: _jsx(GroupHeading, { label: t('underMore'), count: hiddenCount }) }), hiddenCount === 0 ? _jsx(EmptyDrop, { label: t('moreEmpty') }) : null] }, DIVIDER)) : (_jsx(NavRow, { id: value, meta: meta[value], inMore: index > dividerAt, first: index === 0 || draft[index - 1] === DIVIDER, last: index === draft.length - 1 || draft[index + 1] === DIVIDER, hintId: hintId, onMove: moveByKey, onDragChange: setDragging }, value))) }), _jsx("p", { className: "text-muted-foreground pt-1 text-xs", children: t('moreCaption') }), _jsx("p", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement })] }));
+}
+function GroupHeading({ label, count }) {
+    return (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("h3", { className: "text-foreground flex-1 text-xs font-medium", children: label }), _jsx("span", { className: "text-muted-foreground text-xs tabular-nums", children: count })] }));
+}
+function EmptyDrop({ label }) {
+    return (_jsx("p", { className: "text-muted-foreground border-muted-foreground/40 rounded-md border border-dashed px-3 py-2.5 text-xs", children: label }));
+}
+/**
+ * One row. Same recipe as the sidebar's Connect MCP / Connect your computer
+ * block: `bg-hover` rows on a 1px seam, `rounded-sm` inside, `rounded-md` on
+ * the outer corners of each group's first and last row.
+ */
+const NavRow = memo(function NavRow({ id, meta, inMore, first, last, hintId, onMove, onDragChange, }) {
+    const t = useTranslations('sidebar');
+    const [dragging, setDragging] = useState(false);
+    const onHandleKeyDown = (event) => {
+        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+            event.preventDefault();
+            onMove(id, event.key === 'ArrowUp' ? -1 : 1);
+        }
+    };
+    return (_jsxs(Reorder.Item, { as: "li", value: id, transition: reorderTransition, onDragStart: () => {
+            setDragging(true);
+            onDragChange(true);
+        }, onDragEnd: () => {
+            setDragging(false);
+            onDragChange(false);
+        }, className: cn('bg-hover relative flex h-9 cursor-move touch-none list-none items-center gap-2.5 rounded-sm px-1.5 select-none', first && 'rounded-t-md', last && 'rounded-b-md', dragging && 'bg-popover ring-border z-10 rounded-md shadow-sm ring-1'), children: [_jsx("button", { "data-grip": id, type: "button", "aria-label": t('reorderItem', { name: meta.label }), "aria-describedby": hintId, onKeyDown: onHandleKeyDown, className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring/15 flex size-6 shrink-0 cursor-move items-center justify-center rounded-sm transition-colors focus-visible:ring-3 focus-visible:outline-none", children: _jsx(DotsSixVerticalIcon, { className: "size-4", weight: "bold" }) }), _jsx("span", { className: cn('flex size-4 shrink-0 items-center justify-center [&>svg]:size-4', inMore ? 'text-muted-foreground' : 'text-foreground'), children: meta.icon }), _jsx("span", { className: cn('min-w-0 flex-1 truncate text-sm', inMore ? 'text-muted-foreground' : 'text-foreground'), children: meta.label })] }));
+});

package/dist/workspace/sidebar/footer/project-apps-nav.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The Apps row shows to a caller who can deploy an App, or while the project
+ * has an App they can open. A member who can do neither got an empty page
+ * that told them to "ask an agent to build one". Nothing shows until both
+ * answers land, so the row never appears and then vanishes.
+ */
+export declare function useAppsRowVisible(projectId: string | undefined): boolean;
+export declare function ProjectAppsNavItem({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element | null;

package/dist/workspace/sidebar/footer/project-apps-nav.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { uiRoutes } from '../../../lib/routes.js';
+import { ProjectNavRow } from '../../../internal/layout/project-nav-row.js';
+import { useTranslations } from '../../../i18n/index.js';
+import { PROJECT_ACTIONS } from '../../../internal/lib/project-actions.js';
+import { useProjectCan } from '../../../internal/lib/use-project-can.js';
+import { useProjectApps } from '@kortix/sdk/react';
+import { AppWindowIcon } from '@phosphor-icons/react';
+import { useUiPathname } from '../../../providers/ui-provider.js';
+/**
+ * The Apps row shows to a caller who can deploy an App, or while the project
+ * has an App they can open. A member who can do neither got an empty page
+ * that told them to "ask an agent to build one". Nothing shows until both
+ * answers land, so the row never appears and then vanishes.
+ */
+export function useAppsRowVisible(projectId) {
+    const canDeploy = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_APP_DEPLOY);
+    const apps = useProjectApps(projectId);
+    if (canDeploy.allowed === true)
+        return true;
+    if (canDeploy.isLoading)
+        return false;
+    return (apps.data?.length ?? 0) > 0;
+}
+export function ProjectAppsNavItem({ projectId }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const pathname = useUiPathname();
+    const visible = useAppsRowVisible(projectId);
+    const href = projectId ? uiRoutes().apps(projectId) : null;
+    if (!href || !visible)
+        return null;
+    return (_jsxs(ProjectNavRow, { active: pathname?.startsWith(href) === true, label: tI18nComplete.raw('text89dd748442c1'), href: href, prefetch: true, children: [_jsx("span", { className: "shrink-0", children: _jsx(AppWindowIcon, {}) }), tI18nComplete.raw('text89dd748442c1')] }));
+}

package/dist/workspace/sidebar/footer/project-balance-warning.d.ts

@@ -0,0 +1,10 @@
+/**
+ * This row used to be the loudest thing in the footer: a tinted fill *and* a
+ * coloured border at `h-9`, next to two `h-8` alerts that were transparent. It
+ * now wears the shared footer dialect, so an empty wallet reads as urgent
+ * through its colour rather than through extra chrome — and the row lines up
+ * with every other row in the sidebar.
+ */
+export declare function SidebarBalanceWarning({ accountId }: {
+    accountId?: string;
+}): import("react").JSX.Element | null;

package/dist/workspace/sidebar/footer/project-balance-warning.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { canManageBilling, platformConfig } from '@kortix/sdk';
+import { SidebarAlertRow, } from './sidebar-alert.js';
+import { useAccountState } from '../../../internal/billing/index.js';
+import { billingDialogArgs, resolveBillingState, walletAlertCopy, walletSeverity, } from '../../../internal/lib/billing/billing-gate-state.js';
+import { useUpgradeDialogStore } from '../../../internal/stores/upgrade-dialog-store.js';
+import { WarningIcon as AlertTriangle, CreditCardIcon as CreditCard } from '@phosphor-icons/react';
+import { useTranslations } from '../../../i18n/index.js';
+import { useCallback } from 'react';
+function useBalanceWarning(accountId, tI18nComplete) {
+    const { data: accountState } = useAccountState({ accountId });
+    const openUpgradeDialog = useUpgradeDialogStore((s) => s.openUpgradeDialog);
+    // Only accounts that can actually top up (paid) get this warning —
+    // a free account can't buy credits, so it keeps the "Upgrade Plan" button.
+    // A caller without `billing.write` cannot top up either: the row is a door
+    // into the top-up dialog, so it is not theirs. The session error banner
+    // tells them to ask an owner when the wallet actually blocks a run.
+    const canTopUp = (accountState?.tier?.can_purchase_credits ?? false) && canManageBilling(accountState);
+    const handleClick = useCallback(() => openUpgradeDialog(billingDialogArgs(resolveBillingState(accountState), accountState, accountId, tI18nComplete)), [openUpgradeDialog, accountId, accountState, tI18nComplete]);
+    if (!platformConfig().billingEnabled || !accountState || !canTopUp) {
+        return { severity: null, handleClick };
+    }
+    // Severity comes from `walletSeverity`, never from the raw balance. This
+    // component used to compute `balance <= 0 ? 'empty' : balance < 5 ? 'low'`
+    // itself, which is how a fully-running account got a permanent red
+    // "Out of credits" row while the project page beside it started sessions
+    // without complaint.
+    return { severity: walletSeverity(accountState), handleClick };
+}
+/**
+ * This row used to be the loudest thing in the footer: a tinted fill *and* a
+ * coloured border at `h-9`, next to two `h-8` alerts that were transparent. It
+ * now wears the shared footer dialect, so an empty wallet reads as urgent
+ * through its colour rather than through extra chrome — and the row lines up
+ * with every other row in the sidebar.
+ */
+export function SidebarBalanceWarning({ accountId }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const { severity, handleClick } = useBalanceWarning(accountId, tI18nComplete);
+    if (!severity)
+        return null;
+    const isBlocked = severity === 'blocked';
+    const tone = isBlocked ? 'critical' : 'warning';
+    const copy = walletAlertCopy(severity, tI18nComplete);
+    return (_jsx(SidebarAlertRow, { tone: tone, icon: isBlocked ? _jsx(AlertTriangle, { className: "size-4" }) : _jsx(CreditCard, { className: "size-4" }), label: copy.label, trailing: copy.action, onClick: handleClick }));
+}

package/dist/workspace/sidebar/footer/project-computer-nav.d.ts

@@ -0,0 +1,17 @@
+export declare const COMPUTER_PROMO_DISMISSED_KEY = "kortix.computer-promo.dismissed";
+/**
+ * "Connect your computer": an advertisement, not a status widget. It shows
+ * until the caller owns a paired machine or dismisses it, and never on a
+ * deployment with computers disabled (the machine list answers 503). The
+ * controls for a paired machine live in the workspace menu's "Your computer"
+ * (desktop app).
+ *
+ * - Desktop app: one click pairs this machine (`desktopComputerConnect`).
+ * - Browser: `onOpenConnect` opens the download / CLI dialog. The sidebar owns
+ *   that dialog, not this row: on a phone the row lives in the sidebar sheet,
+ *   and closing the sheet unmounts it together with anything it renders.
+ */
+export declare function ProjectComputerNavItem({ projectId, onOpenConnect, }: {
+    projectId: string;
+    onOpenConnect: () => void;
+}): import("react").JSX.Element | null;

package/dist/workspace/sidebar/footer/project-computer-nav.js

@@ -0,0 +1,71 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PromoNavRow } from './promo-nav-row.js';
+import { LaptopIcon } from '@phosphor-icons/react';
+import { useCallback, useState } from 'react';
+import Loading from '../../../primitives/loading.js';
+import { useSidebar } from '../../../primitives/sidebar.js';
+import { useConnectDesktopComputer, useOwnsPairedComputer, useThisComputerState, } from '../../../internal/tunnel/computer-connect.js';
+import { useIsMobile } from '../../../internal/hooks/index.js';
+import { useTranslations } from '../../../i18n/index.js';
+export const COMPUTER_PROMO_DISMISSED_KEY = 'kortix.computer-promo.dismissed';
+function readDismissed() {
+    try {
+        return window.localStorage.getItem(COMPUTER_PROMO_DISMISSED_KEY) === '1';
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * "Connect your computer": an advertisement, not a status widget. It shows
+ * until the caller owns a paired machine or dismisses it, and never on a
+ * deployment with computers disabled (the machine list answers 503). The
+ * controls for a paired machine live in the workspace menu's "Your computer"
+ * (desktop app).
+ *
+ * - Desktop app: one click pairs this machine (`desktopComputerConnect`).
+ * - Browser: `onOpenConnect` opens the download / CLI dialog. The sidebar owns
+ *   that dialog, not this row: on a phone the row lives in the sidebar sheet,
+ *   and closing the sheet unmounts it together with anything it renders.
+ */
+export function ProjectComputerNavItem({ projectId, onOpenConnect, }) {
+    // Client-only: the row renders nothing until its queries resolve, so the
+    // server render and the first client render agree.
+    const [dismissed, setDismissed] = useState(() => typeof window === 'undefined' ? true : readDismissed());
+    const dismiss = useCallback(() => {
+        setDismissed(true);
+        try {
+            window.localStorage.setItem(COMPUTER_PROMO_DISMISSED_KEY, '1');
+        }
+        catch {
+            // Private mode or blocked storage: dismissed for this page view only.
+        }
+    }, []);
+    if (dismissed)
+        return null;
+    return _jsx(ComputerPromo, { projectId: projectId, onDismiss: dismiss, onOpenConnect: onOpenConnect });
+}
+function ComputerPromo({ projectId, onDismiss, onOpenConnect, }) {
+    const t = useTranslations('computers');
+    const tSidebar = useTranslations('sidebar');
+    const isMobile = useIsMobile();
+    const { setOpenMobile } = useSidebar();
+    const paired = useOwnsPairedComputer();
+    // `oneClick` is false when the bundled agent cannot run; the dialog offers
+    // the CLI. A local pairing this backend does not list is re-paired (`stale`).
+    const { desktop, oneClick, stale } = useThisComputerState();
+    const connectDesktop = useConnectDesktopComputer(projectId);
+    if (!paired.isSuccess || paired.owns || desktop.isPending)
+        return null;
+    const title = oneClick ? t('connectThisComputer') : t('connectYourComputer');
+    return (_jsx(PromoNavRow, { icon: connectDesktop.isPending ? (_jsx(Loading, { className: "size-4 shrink-0" })) : (_jsx(LaptopIcon, { className: "text-muted-foreground size-4 shrink-0" })), label: connectDesktop.isPending ? t('connecting') : title, badge: tSidebar('new'), dismissLabel: t('dismissPromo'), onDismiss: onDismiss, pending: connectDesktop.isPending, onClick: () => {
+            if (oneClick) {
+                connectDesktop.mutate({ reauth: stale });
+                return;
+            }
+            onOpenConnect();
+            if (isMobile)
+                setOpenMobile(false);
+        } }));
+}

package/dist/workspace/sidebar/footer/project-files-nav.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Top-level file entry, decided by `useProjectNavRows` (the same rule the
+ * More menu and the Customize row read). With Volumes on it is Drive, the
+ * shared folders, for every member: what each person sees follows folder
+ * access, and the row carries their open conflict count. The repo browser is
+ * then Customize → Repo, admins only. With Volumes off it is Files, the repo
+ * browser, for a caller with `project.file.read` (editor-tier since IAM v1).
+ * Absent until the probe answers.
+ *
+ * A real `<Link prefetch>`, not `router.push`. The button form could not be
+ * prefetched, so every click paid for the route's RSC payload AND its JS chunk
+ * cold — the bulk of a 5-6s open. `prefetch` needs `files/loading.tsx` to have
+ * something to cache, because the project layout awaits cookies() and the
+ * route is therefore dynamic. Note this is production-only behaviour: Next
+ * disables Link prefetching under `next dev`.
+ *
+ * `HoverPrefetchLink`, not a bare `<Link>`: prefetching on mount made every
+ * session open pay a full dynamic render of /files (2 requests, ~26KB) that
+ * nobody asked for. The prefetch now starts on hover/focus/touch, which still
+ * lands well before the click.
+ *
+ * Connectors / Skills / Commands used to sit beside this entry, one row each,
+ * plus a Customize row below them. They are tabs of one `(capabilities)`
+ * layout, so four rows bought nothing over one: ProjectCustomizeNavItem
+ * replaced them and moved to the top of the panel, under New session.
+ */
+export declare function ProjectFilesNavItem({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element | null;

package/dist/workspace/sidebar/footer/project-files-nav.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ProjectNavRow } from '../../../internal/layout/project-nav-row.js';
+import { useTranslations } from '../../../i18n/index.js';
+import { useQueryClient } from '@tanstack/react-query';
+import { useUiPathname } from '../../../providers/ui-provider.js';
+import { useCallback } from 'react';
+import { CountBadge } from '../../../primitives/count-badge.js';
+import { useProjectNavRows } from '../../../internal/layout/project-settings-nav.js';
+import { useProjectDrive } from '../../../files/drives/use-drives.js';
+import { getProject } from '@kortix/sdk';
+import { contract, qk } from '@kortix/sdk/react';
+import { FoldersIcon, HardDrivesIcon } from '@phosphor-icons/react';
+import { filesRow } from '../../../internal/layout/files-nav-label.js';
+/**
+ * Top-level file entry, decided by `useProjectNavRows` (the same rule the
+ * More menu and the Customize row read). With Volumes on it is Drive, the
+ * shared folders, for every member: what each person sees follows folder
+ * access, and the row carries their open conflict count. The repo browser is
+ * then Customize → Repo, admins only. With Volumes off it is Files, the repo
+ * browser, for a caller with `project.file.read` (editor-tier since IAM v1).
+ * Absent until the probe answers.
+ *
+ * A real `<Link prefetch>`, not `router.push`. The button form could not be
+ * prefetched, so every click paid for the route's RSC payload AND its JS chunk
+ * cold — the bulk of a 5-6s open. `prefetch` needs `files/loading.tsx` to have
+ * something to cache, because the project layout awaits cookies() and the
+ * route is therefore dynamic. Note this is production-only behaviour: Next
+ * disables Link prefetching under `next dev`.
+ *
+ * `HoverPrefetchLink`, not a bare `<Link>`: prefetching on mount made every
+ * session open pay a full dynamic render of /files (2 requests, ~26KB) that
+ * nobody asked for. The prefetch now starts on hover/focus/touch, which still
+ * lands well before the click.
+ *
+ * Connectors / Skills / Commands used to sit beside this entry, one row each,
+ * plus a Customize row below them. They are tabs of one `(capabilities)`
+ * layout, so four rows bought nothing over one: ProjectCustomizeNavItem
+ * replaced them and moved to the top of the panel, under New session.
+ */
+export function ProjectFilesNavItem({ projectId }) {
+    const t = useTranslations('sidebar');
+    const pathname = useUiPathname();
+    const target = useProjectNavRows(projectId).files;
+    const queryClient = useQueryClient();
+    const tDrives = useTranslations('drives');
+    const drive = useProjectDrive(projectId, target === 'drive');
+    const conflicts = target === 'drive' ? (drive.data?.openConflicts ?? 0) : 0;
+    const isActive = !!pathname &&
+        (target === 'drive'
+            ? /^\/projects\/[^/]+\/drive(\/|$)/
+            : /^\/projects\/[^/]+\/files(\/|$)/).test(pathname);
+    // The Files view cannot pick a git ref (`resolveFilesRef`,
+    // `project-layout/resolve-files-ref.ts`) until it knows the project's
+    // default branch — one request, `qk.project.summary(id)` — unless a
+    // per-project version selection is already persisted. Cold, that read
+    // alone gates every other read on the page (branches, the file list,
+    // change requests, file-content previews) behind ~1s nobody needed to
+    // spend: this same intent signal already arms the ROUTE prefetch above
+    // (`HoverPrefetchLink`), so arming the DATA prefetch alongside it means
+    // `ref` is usually already resolvable by the time `ProjectFilesView`
+    // mounts. Same key + same `contract('config')` options as that view's own
+    // query, so this warms one cache slot rather than issuing a second fetch.
+    const prefetchSummary = useCallback(() => {
+        if (!projectId)
+            return;
+        void queryClient.prefetchQuery({
+            queryKey: qk.project.summary(projectId),
+            queryFn: () => getProject(projectId),
+            ...contract('config'),
+        });
+    }, [projectId, queryClient]);
+    // No project id means no valid href. The old onClick already no-op'd in this
+    // case, so rendering a dead button was never useful.
+    const row = target && projectId ? filesRow(projectId, target) : null;
+    if (!row)
+        return null;
+    const { label, href } = row;
+    return (_jsxs(ProjectNavRow, { active: isActive, label: t(label), href: href, prefetch: true, onMouseEnter: prefetchSummary, onFocus: prefetchSummary, onTouchStart: prefetchSummary, children: [label === 'drive' ? _jsx(HardDrivesIcon, {}) : _jsx(FoldersIcon, {}), t(label), conflicts > 0 ? (_jsx("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: _jsx(CountBadge, { count: conflicts, tone: "conflict", "aria-label": tDrives('conflictCount', { count: conflicts }) }) })) : null] }));
+}

package/dist/workspace/sidebar/footer/project-manifest-upgrade-alert.d.ts

@@ -0,0 +1,13 @@
+/** Presentational shell — no data fetching, so every state renders under
+ *  renderToStaticMarkup. The network/permission reads live in the wrapper. */
+export declare function ProjectManifestUpgradeAlertView({ visible, pending, onMigrate, defaultOpen, }: {
+    visible: boolean;
+    pending: boolean;
+    onMigrate: () => void;
+    /** Seed the disclosure open — only used so the expanded body is renderable
+     *  in tests; the real sidebar always starts collapsed. */
+    defaultOpen?: boolean;
+}): import("react").JSX.Element | null;
+export declare function ProjectManifestUpgradeAlert({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element;

package/dist/workspace/sidebar/footer/project-manifest-upgrade-alert.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ProjectManifestUpgradeAlert — the left-sidebar nudge that makes a project's
+ * still-on-v1 manifest impossible to miss. Sits just above Files/Customize and
+ * wears the shared footer alert shell (`sidebar-alert.tsx`) — the same one
+ * `ProjectSandboxAlert` wears. It used to be a hand-copied duplicate of that
+ * file's shell, which is how the two drifted to different paddings and
+ * different open-state tints while their own comments claimed they matched.
+ *
+ * Tone is `info` rather than a failure colour: this is a recommended upgrade,
+ * not something that is broken. The action is the one-click, end-to-end
+ * `useMigrateToV2`: it mints a session seeded with the migration prompt, boots
+ * the project's default agent (git/CR powers), and drops the user into the
+ * thread where it auto-runs — converting kortix.toml → kortix.yaml and opening
+ * a change request for review.
+ *
+ * Only renders while the project is on v1 AND the viewer can actually act on it
+ * (`project.write` — the people who can push and open the CR); it disappears
+ * for good the moment the manifest lands on v2.
+ */
+import { useTranslations } from '../../../i18n/index.js';
+import { useState } from 'react';
+import { Button } from '../../../primitives/button.js';
+import Loading from '../../../primitives/loading.js';
+import { useMigrateToV2, useProjectManifestVersion, } from '../../../customize/migrate-to-v2/index.js';
+import { SidebarAlert, SidebarAlertActions, SidebarAlertBody, SidebarAlertText, } from './sidebar-alert.js';
+import { PROJECT_ACTIONS } from '../../../internal/lib/project-actions.js';
+import { useProjectPageCans } from '../../../internal/lib/use-project-can.js';
+import { ArrowCircleUpIcon as ArrowUpCircle } from '@phosphor-icons/react';
+/** Presentational shell — no data fetching, so every state renders under
+ *  renderToStaticMarkup. The network/permission reads live in the wrapper. */
+export function ProjectManifestUpgradeAlertView({ visible, pending, onMigrate, defaultOpen = false, }) {
+    const t = useTranslations('sidebar');
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    if (!visible)
+        return null;
+    return (_jsxs(SidebarAlert, { tone: "info", icon: _jsx(ArrowUpCircle, { className: "size-4" }), label: t('manifestUpgrade.title'), open: isOpen, onOpenChange: setIsOpen, children: [_jsx(SidebarAlertBody, { children: _jsx(SidebarAlertText, { children: t.rich('manifestUpgrade.description', {
+                        toml: (chunks) => _jsx("span", { className: "font-mono", children: chunks }),
+                        yaml: (chunks) => _jsx("span", { className: "font-mono", children: chunks }),
+                    }) }) }), _jsx(SidebarAlertActions, { children: _jsxs(Button, { size: "sm", className: "w-full", disabled: pending, onClick: onMigrate, children: [pending ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : (_jsx(ArrowUpCircle, { className: "size-3.5 shrink-0" })), t('manifestUpgrade.start')] }) })] }));
+}
+export function ProjectManifestUpgradeAlert({ projectId }) {
+    const { version } = useProjectManifestVersion(projectId);
+    const canWrite = useProjectPageCans(projectId)[PROJECT_ACTIONS.PROJECT_WRITE]?.allowed === true;
+    const migrate = useMigrateToV2(projectId);
+    return (_jsx(ProjectManifestUpgradeAlertView, { visible: version === 1 && canWrite, pending: migrate.pending, onMigrate: migrate.start }));
+}

package/dist/workspace/sidebar/footer/project-mcp-nav.d.ts

@@ -0,0 +1,10 @@
+export declare const MCP_PROMO_DISMISSED_KEY = "kortix.mcp-promo.dismissed";
+/**
+ * "Connect MCP": the same promo row as "Connect your computer"
+ * (`project-computer-nav.tsx`), shown until dismissed. `onOpenConnect` opens
+ * `ConnectMcpModal`, which the sidebar owns for the same reason it owns the
+ * computer dialog: on a phone this row unmounts with the sidebar sheet.
+ */
+export declare function ProjectMcpNavItem({ onOpenConnect }: {
+    onOpenConnect: () => void;
+}): import("react").JSX.Element | null;

package/dist/workspace/sidebar/footer/project-mcp-nav.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PromoNavRow } from './promo-nav-row.js';
+import { useCallback, useState } from 'react';
+import { useSidebar } from '../../../primitives/sidebar.js';
+import { Mcp } from '../../../internal/icons/mcp.js';
+import { useIsMobile } from '../../../internal/hooks/index.js';
+import { useTranslations } from '../../../i18n/index.js';
+export const MCP_PROMO_DISMISSED_KEY = 'kortix.mcp-promo.dismissed';
+function readDismissed() {
+    try {
+        return window.localStorage.getItem(MCP_PROMO_DISMISSED_KEY) === '1';
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * "Connect MCP": the same promo row as "Connect your computer"
+ * (`project-computer-nav.tsx`), shown until dismissed. `onOpenConnect` opens
+ * `ConnectMcpModal`, which the sidebar owns for the same reason it owns the
+ * computer dialog: on a phone this row unmounts with the sidebar sheet.
+ */
+export function ProjectMcpNavItem({ onOpenConnect }) {
+    const t = useTranslations('sidebar');
+    const tComputers = useTranslations('computers');
+    const isMobile = useIsMobile();
+    const { setOpenMobile } = useSidebar();
+    const [dismissed, setDismissed] = useState(() => typeof window === 'undefined' ? true : readDismissed());
+    const dismiss = useCallback(() => {
+        setDismissed(true);
+        try {
+            window.localStorage.setItem(MCP_PROMO_DISMISSED_KEY, '1');
+        }
+        catch {
+            // Private mode or blocked storage: dismissed for this page view only.
+        }
+    }, []);
+    if (dismissed)
+        return null;
+    return (_jsx(PromoNavRow, { icon: _jsx(Mcp, { className: "text-muted-foreground size-4 shrink-0" }), label: t('workspace.connectMcp'), badge: t('new'), dismissLabel: tComputers('dismissPromo'), onDismiss: dismiss, onClick: () => {
+            onOpenConnect();
+            if (isMobile)
+                setOpenMobile(false);
+        } }));
+}