@kortix/ui 0.0.0-stage → 0.14.4

package/dist/internal/billing/use-transactions.js

@@ -0,0 +1,34 @@
+import { useBillingAccountId } from '../stores/billing-account-context.js';
+import { listBillingTransactions } from '@kortix/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { accountStateKeys } from './use-account-state.js';
+export function useTransactions(limit = 50, offset = 0, typeFilter, options) {
+    const accountId = useBillingAccountId();
+    const normalizedTypeFilter = Array.isArray(typeFilter) ? typeFilter.join(',') : typeFilter;
+    return useQuery({
+        // Scope the cache slot by account so the BillingTab's history block
+        // doesn't leak entries across accounts on a multi-account user.
+        queryKey: [
+            ...accountStateKeys.transactions(limit, offset),
+            normalizedTypeFilter,
+            { accountId: accountId ?? null },
+        ],
+        // Billing-disabled deployments (e.g. self-host with
+        // KORTIX_BILLING_INTERNAL_ENABLED=false) have no ledger to fetch — the
+        // endpoint 404s "Billing is not enabled". Callers pass `enabled: false` to
+        // skip the request entirely rather than surfacing that raw error.
+        enabled: options?.enabled ?? true,
+        queryFn: async () => {
+            const data = await listBillingTransactions({
+                accountId: accountId ?? undefined,
+                limit,
+                offset,
+                typeFilter: normalizedTypeFilter,
+            });
+            // USD, as the API sends it: the ledger table converts each cell to
+            // credits once (`formatUsdAsCredits`), keeping sub-credit amounts.
+            return data;
+        },
+        staleTime: 30000,
+    });
+}

package/dist/internal/branding/branding-provider.d.ts

@@ -0,0 +1,39 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+/**
+ * Organization branding — ONE provider, mounted once in the root layout.
+ *
+ * An Enterprise account can replace the Kortix marks its members see: the wide
+ * brandmark, the square symbol, and the browser-tab icon — each with an
+ * optional dark-scheme variant — plus the product name in the tab title.
+ * The API decides what a member is SERVED (`KortixAccount.branding` on
+ * `GET /accounts` — the stored record while the account is entitled, `null`
+ * otherwise), so this provider does exactly two things:
+ *
+ *   1. pick WHICH account's branding applies right now — the account of the
+ *      project on screen when there is one, else the selected account; and
+ *   2. hand that `AccountBranding | null` to every consumer through context.
+ *
+ * It reads the same `useAccountsList()` query every other surface already holds
+ * (`useEnsureSelectedAccount`, `AccountSwitcher`, …), so branding
+ * costs no extra request. It renders nothing itself; `KortixLogo` swaps its
+ * SVG for the org marks, and `BrandingDocumentEffect` (below) swaps the tab
+ * icon and title once the account resolves. Before that — and on every
+ * unauthenticated surface — the app is Kortix, by design: there is no account
+ * to be branded as until someone signs in.
+ */
+import { type AccountBranding } from '@kortix/sdk';
+/**
+ * Call from an account-scoped surface with the account it shows — the project
+ * shell passes the project's `account_id`, the account hub passes its route
+ * id. Clears on unmount so leaving the surface falls back to the selected
+ * account. One scope at a time: these surfaces never nest.
+ */
+export declare function useBrandingScope(accountId: string | null | undefined): void;
+export declare function BrandingProvider({ children }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The active account's branding, or `null` for default Kortix. Safe outside
+ * the provider (tests, isolated renders): resolves to `null`.
+ */
+export declare function useBranding(): AccountBranding | null;

package/dist/internal/branding/branding-provider.js

@@ -0,0 +1,203 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useAccountsList } from '../hooks/account/use-accounts-list.js';
+import { siteMetadata } from '../lib/site-metadata.js';
+import { useCurrentAccountStore } from '../stores/current-account-store.js';
+const BrandingContext = createContext(null);
+// Tiny external store instead of a second React context: `ProjectShell` sits
+// far below this provider and must push the project's account id UP. A
+// context value cannot flow upward; a module-level subscription can.
+let scope = { scopedAccountId: null };
+const scopeListeners = new Set();
+function setBrandingScope(next) {
+    if (scope.scopedAccountId === next.scopedAccountId)
+        return;
+    scope = next;
+    for (const l of scopeListeners)
+        l();
+}
+function useBrandingScopeState() {
+    const [, force] = useReducerTick();
+    useEffect(() => {
+        scopeListeners.add(force);
+        return () => {
+            scopeListeners.delete(force);
+        };
+    }, [force]);
+    return scope;
+}
+function useReducerTick() {
+    const [tick, setTick] = useState(0);
+    const bump = useCallback(() => setTick((t) => t + 1), []);
+    return [tick, bump];
+}
+/**
+ * Call from an account-scoped surface with the account it shows — the project
+ * shell passes the project's `account_id`, the account hub passes its route
+ * id. Clears on unmount so leaving the surface falls back to the selected
+ * account. One scope at a time: these surfaces never nest.
+ */
+export function useBrandingScope(accountId) {
+    useEffect(() => {
+        setBrandingScope({ scopedAccountId: accountId ?? null });
+        return () => setBrandingScope({ scopedAccountId: null });
+    }, [accountId]);
+}
+export function BrandingProvider({ children }) {
+    const selectedAccountId = useCurrentAccountStore((s) => s.selectedAccountId);
+    const { scopedAccountId } = useBrandingScopeState();
+    // Same hook as every other consumer → one user-scoped fetch, shared cache.
+    const accountsQuery = useAccountsList();
+    const branding = useMemo(() => {
+        const accounts = accountsQuery.data;
+        if (!accounts?.length)
+            return null;
+        const activeId = scopedAccountId ?? selectedAccountId ?? accounts[0]?.account_id ?? null;
+        const active = accounts.find((a) => a.account_id === activeId) ?? null;
+        const b = active?.branding ?? null;
+        if (!b)
+            return null;
+        // Normalize once so consumers can rely on every slot being present.
+        return {
+            app_name: b.app_name ?? null,
+            logo_url: b.logo_url ?? null,
+            icon_url: b.icon_url ?? null,
+            favicon_url: b.favicon_url ?? null,
+            logo_dark_url: b.logo_dark_url ?? null,
+            icon_dark_url: b.icon_dark_url ?? null,
+            favicon_dark_url: b.favicon_dark_url ?? null,
+        };
+    }, [accountsQuery.data, scopedAccountId, selectedAccountId]);
+    return (_jsxs(BrandingContext.Provider, { value: branding, children: [_jsx(BrandingDocumentEffect, { branding: branding }), children] }));
+}
+/**
+ * The active account's branding, or `null` for default Kortix. Safe outside
+ * the provider (tests, isolated renders): resolves to `null`.
+ */
+export function useBranding() {
+    return useContext(BrandingContext);
+}
+// ─── Document effect: favicon + title ───────────────────────────────────────
+/** What Next rendered for each icon link before we touched it, kept OFF the
+ *  DOM (a WeakMap, not data-attributes) so a restore never reads back a
+ *  value that anything else could have written into the document. */
+const originals = new WeakMap();
+/**
+ * Next resolves `metadata.icons` and `title` on the server, above auth — so the
+ * org favicon and name are applied client-side once the account is known. Cold
+ * load shows the Kortix tab for the first paint; that is the accepted v1
+ * trade-off (host-based tenancy would be the way to remove it).
+ *
+ * Title: Next writes `<title>` on every navigation from the route's metadata:
+ * the site default (`Kortix – The open-source AI Operating System`) on
+ * routes with no title of their own, `<page> | Kortix` elsewhere. A
+ * `MutationObserver` on `<head>` rewrites whatever Next just wrote, so the
+ * swap survives navigation without touching every page's metadata: the site
+ * default collapses to the org name alone (its tagline is Kortix's, not
+ * theirs); anything else has the literal "Kortix" token replaced. It only
+ * writes when the result differs — no loops, no clobbering page titles.
+ */
+const DARK_ICON_ATTR = 'data-kortix-dark-icon';
+function BrandingDocumentEffect({ branding }) {
+    const iconHref = branding?.favicon_url ?? branding?.icon_url ?? null;
+    // The tab icon follows the OS scheme, not the app theme, so the dark
+    // variant rides a `prefers-color-scheme: dark` link of its own.
+    const iconDarkHref = iconHref
+        ? (branding?.favicon_dark_url ?? branding?.icon_dark_url ?? null)
+        : null;
+    const appleHref = branding?.icon_url ?? branding?.favicon_url ?? null;
+    const appName = branding?.app_name ?? null;
+    useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        const head = document.head;
+        // Each link remembers what Next rendered the first time we touch it, so
+        // switching back to an unbranded account restores exactly that — Next
+        // emits several icon links (light, dark-media, shortcut) and their order
+        // is not a contract.
+        const stash = (link) => {
+            if (originals.has(link))
+                return;
+            originals.set(link, {
+                href: link.getAttribute('href') ?? '',
+                media: link.getAttribute('media'),
+            });
+        };
+        const apply = (link, href) => {
+            stash(link);
+            if (href) {
+                if (link.getAttribute('href') !== href)
+                    link.setAttribute('href', href);
+                // One branded image for both color schemes: the media-scoped Kortix
+                // dark variant must not win over it.
+                if (link.hasAttribute('media'))
+                    link.removeAttribute('media');
+                return;
+            }
+            const orig = originals.get(link);
+            if (!orig)
+                return;
+            if (link.getAttribute('href') !== orig.href)
+                link.setAttribute('href', orig.href);
+            if (orig.media)
+                link.setAttribute('media', orig.media);
+            else
+                link.removeAttribute('media');
+        };
+        const applyAll = () => {
+            const tabIcons = Array.from(head.querySelectorAll(`link[rel="icon"]:not([${DARK_ICON_ATTR}]), link[rel="shortcut icon"]`));
+            const touchIcons = Array.from(head.querySelectorAll('link[rel="apple-touch-icon"]'));
+            for (const link of tabIcons)
+                apply(link, iconHref);
+            for (const link of touchIcons)
+                apply(link, appleHref);
+            // One extra, media-scoped link for the dark favicon. Ours to own:
+            // created here, removed here, never confused with Next's.
+            let dark = head.querySelector(`link[${DARK_ICON_ATTR}]`);
+            if (iconDarkHref) {
+                if (!dark) {
+                    dark = document.createElement('link');
+                    dark.rel = 'icon';
+                    dark.media = '(prefers-color-scheme: dark)';
+                    dark.setAttribute(DARK_ICON_ATTR, '');
+                    head.appendChild(dark);
+                }
+                if (dark.getAttribute('href') !== iconDarkHref)
+                    dark.setAttribute('href', iconDarkHref);
+            }
+            else if (dark) {
+                dark.remove();
+            }
+        };
+        applyAll();
+        // Next re-renders the route's metadata on hydration and on every client
+        // navigation, which can (re)insert icon links after this effect ran. Any
+        // new <link> in <head> gets branded the moment it appears; attribute
+        // writes on existing links do not fire childList, so this cannot loop.
+        const observer = new MutationObserver((mutations) => {
+            const addedLink = mutations.some((m) => Array.from(m.addedNodes).some((n) => n instanceof HTMLLinkElement && !n.hasAttribute(DARK_ICON_ATTR)));
+            if (addedLink)
+                applyAll();
+        });
+        observer.observe(head, { childList: true });
+        return () => observer.disconnect();
+    }, [iconHref, iconDarkHref, appleHref]);
+    useEffect(() => {
+        if (typeof document === 'undefined' || !appName)
+            return;
+        const rewrite = () => {
+            const current = document.title;
+            if (!current.includes('Kortix'))
+                return;
+            const next = current === siteMetadata.title ? appName : current.replace(/\bKortix\b/g, appName);
+            if (next !== current)
+                document.title = next;
+        };
+        rewrite();
+        const observer = new MutationObserver(rewrite);
+        observer.observe(document.head, { childList: true, subtree: true, characterData: true });
+        return () => observer.disconnect();
+    }, [appName]);
+    return null;
+}

package/dist/internal/capture/use-capture-area.d.ts

@@ -0,0 +1,51 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+import type { CaptureDevice } from '@kortix/sdk';
+/**
+ * Kortix Capture lives at `/capture/[accountId]`: the Kortix account is its
+ * tenant (no project). Every page of the area reads the account's Capture
+ * workspace once, here: on or off, and what Kortix IAM lets the viewer do. The
+ * API enforces the same rules (`apps/api/src/capture/account-routes.ts`):
+ *
+ * - every member: their own devices and timeline;
+ * - `capture.read_all` (owner and admin by default): every member's, audited;
+ * - `capture.manage` (owner and admin by default): Settings (the switch, the policy) and revoking any device.
+ */
+export declare function useCaptureArea(accountId: string): {
+    workspace: import("@tanstack/react-query").UseQueryResult<import("@kortix/sdk").CaptureWorkspace, Error>;
+    enabled: boolean;
+    /** `capture.read_all`: every member's devices and timelines (audited). */
+    readsEveryone: boolean;
+    /** `capture.manage`: Settings, the switch, the policy, revoking any device. */
+    canManage: boolean;
+    accountName: string;
+    accounts: import("@kortix/sdk").KortixAccount[];
+};
+/** The pages of the area, in the header's order. */
+export declare const CAPTURE_SECTIONS: readonly ["devices", "settings"];
+export type CaptureSection = (typeof CAPTURE_SECTIONS)[number];
+export declare function captureHref(accountId: string, section?: CaptureSection, rest?: string): string;
+/** The section of a `/capture/[accountId]/…` path. */
+export declare function sectionOf(pathname: string | null): CaptureSection;
+export declare function rememberCaptureAccount(accountId: string): void;
+export declare function lastCaptureAccount(): string | null;
+export interface CapturePerson {
+    /** null: a device linked to no one (an IT-enrolled computer). */
+    userId: string | null;
+    /** The member's email, or null when the viewer may not read the member list. */
+    email: string | null;
+    isYou: boolean;
+}
+/**
+ * Who a `user_id` is. Capture rows carry ids only; the account member list
+ * has the emails. A member who may not read that list still knows themselves.
+ */
+export declare function useCaptureDirectory(accountId: string, enabled: boolean): {
+    personOf: (userId: string | null) => CapturePerson;
+    viewerId: string | null;
+    members: import("@kortix/sdk").AccountMember[];
+    isLoading: boolean;
+};
+/** A device's display name: its computer name, else its OS. */
+export declare function deviceName(device: Pick<CaptureDevice, 'name' | 'os'>, fallback: string): string;
+/** `macOS 26.0`, `Windows 11`. */
+export declare function deviceOs(device: Pick<CaptureDevice, 'os' | 'os_version'>): string;

package/dist/internal/capture/use-capture-area.js

@@ -0,0 +1,96 @@
+'use client';
+import { useCaptureWorkspace } from '@kortix/sdk/react';
+import { useCallback, useMemo } from 'react';
+import { useAccountMembers } from '../account-hub/use-account-members.js';
+import { useUiViewer } from '../../providers/ui-provider.js';
+import { useAccountsList } from '../hooks/account/use-accounts-list.js';
+/**
+ * Kortix Capture lives at `/capture/[accountId]`: the Kortix account is its
+ * tenant (no project). Every page of the area reads the account's Capture
+ * workspace once, here: on or off, and what Kortix IAM lets the viewer do. The
+ * API enforces the same rules (`apps/api/src/capture/account-routes.ts`):
+ *
+ * - every member: their own devices and timeline;
+ * - `capture.read_all` (owner and admin by default): every member's, audited;
+ * - `capture.manage` (owner and admin by default): Settings (the switch, the policy) and revoking any device.
+ */
+export function useCaptureArea(accountId) {
+    const workspace = useCaptureWorkspace(accountId);
+    const accounts = useAccountsList();
+    const account = accounts.data?.find((candidate) => candidate.account_id === accountId) ?? null;
+    return {
+        workspace,
+        enabled: workspace.data?.enabled ?? false,
+        /** `capture.read_all`: every member's devices and timelines (audited). */
+        readsEveryone: workspace.data?.can_read_all ?? false,
+        /** `capture.manage`: Settings, the switch, the policy, revoking any device. */
+        canManage: workspace.data?.can_manage ?? false,
+        accountName: account?.name ?? '',
+        accounts: accounts.data ?? [],
+    };
+}
+/** The pages of the area, in the header's order. */
+// `settings` (the organization's Kortix Capture settings) shows only to people with capture.manage.
+export const CAPTURE_SECTIONS = ['devices', 'settings'];
+export function captureHref(accountId, section = 'devices', rest = '') {
+    return `/capture/${accountId}/${section}${rest}`;
+}
+/** The section of a `/capture/[accountId]/…` path. */
+export function sectionOf(pathname) {
+    const part = pathname?.split('/capture/')[1]?.split('/')[1] ?? '';
+    return CAPTURE_SECTIONS.includes(part)
+        ? part
+        : 'devices';
+}
+// ── The last account used in the area (per browser) ─────────────────────────
+const LAST_ACCOUNT_KEY = 'kortix.capture.account';
+export function rememberCaptureAccount(accountId) {
+    try {
+        localStorage.setItem(LAST_ACCOUNT_KEY, accountId);
+    }
+    catch {
+        // A private window or blocked storage: `/capture` falls back to the first account.
+    }
+}
+export function lastCaptureAccount() {
+    try {
+        return localStorage.getItem(LAST_ACCOUNT_KEY);
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Who a `user_id` is. Capture rows carry ids only; the account member list
+ * has the emails. A member who may not read that list still knows themselves.
+ */
+export function useCaptureDirectory(accountId, enabled) {
+    const user = useUiViewer();
+    const members = useAccountMembers(enabled ? accountId : undefined);
+    const byId = useMemo(() => new Map((members.data ?? []).map((member) => [member.user_id, member.email])), [members.data]);
+    const viewerId = user?.id ?? null;
+    const personOf = useCallback((userId) => userId === null
+        ? { userId: null, email: null, isYou: false }
+        : {
+            userId,
+            email: byId.get(userId) ?? (userId === viewerId ? (user?.email ?? null) : null),
+            isYou: userId === viewerId,
+        }, [byId, viewerId, user?.email]);
+    return { personOf, viewerId, members: members.data ?? [], isLoading: members.isLoading };
+}
+/** A device's display name: its computer name, else its OS. */
+export function deviceName(device, fallback) {
+    return device.name?.trim() || fallback;
+}
+/** `macOS 26.0`, `Windows 11`. */
+export function deviceOs(device) {
+    const os = device.os?.toLowerCase();
+    const name = os === 'macos' || os === 'darwin'
+        ? 'macOS'
+        : os === 'windows' || os === 'win32'
+            ? 'Windows'
+            : os === 'linux'
+                ? 'Linux'
+                : (device.os ?? '');
+    return [name, device.os_version].filter(Boolean).join(' ');
+}

package/dist/internal/components/clickable-path.d.ts

@@ -0,0 +1,64 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+import React from 'react';
+/**
+ * Agents write workspace-relative paths (`docs/bio.md`) far more often than
+ * absolute ones, so rejecting them made the common case unclickable — the user
+ * got "Cannot open relative path" for a file that exists.
+ *
+ * `toSandboxAbsolutePath` is the same resolution the rest of the app already
+ * applies to exactly these strings (`show-helpers.tsx`,
+ * `show-content-renderer.tsx`, `file-content-renderer.tsx`): anything already
+ * under an allowed sandbox root passes through, everything else anchors under
+ * `/workspace`. This component was the one surface that rejected instead of
+ * resolving.
+ *
+ * A path that resolves but doesn't exist is not this function's problem — the
+ * viewer reports "couldn't be opened", the same as any dead absolute path, and
+ * that beats refusing to try.
+ */
+export declare function resolveOpenablePath(filePath: string): string | null;
+interface ClickablePathProps {
+    /** The file path to display and link */
+    filePath: string;
+    /** Display text (defaults to filePath) */
+    children?: React.ReactNode;
+    /** Optional line number for navigation */
+    lineNumber?: number;
+    /** Optional column number */
+    column?: number;
+    /** Additional className */
+    className?: string;
+    /** Variant: 'inline' for inline text, 'terminal' for terminal/pre output */
+    variant?: 'inline' | 'terminal';
+}
+export declare function ClickablePath({ filePath, children, lineNumber, column, className, variant, }: ClickablePathProps): React.JSX.Element;
+interface TextWithPathsProps {
+    /** The raw text to scan for file paths */
+    text: string;
+    /** Additional className for the container span */
+    className?: string;
+    /** Variant passed to ClickablePath */
+    variant?: 'inline' | 'terminal';
+}
+/**
+ * Renders a string of text with all detected file paths made clickable.
+ * Paths are rendered using ClickablePath, which opens the file preview on click.
+ */
+export declare const TextWithPaths: React.NamedExoticComponent<TextWithPathsProps>;
+interface PreWithPathsProps {
+    /** The raw text content */
+    text: string;
+    /** Additional className for the <pre> element */
+    className?: string;
+}
+/**
+ * Renders a pre-formatted text block (like terminal output) with file paths
+ * made clickable. Processes line by line for efficiency.
+ */
+export declare const PreWithPaths: React.NamedExoticComponent<PreWithPathsProps>;
+/**
+ * Walk a React children tree and replace text nodes that contain file paths
+ * with clickable versions. Skips children already inside <code>, <pre> or <a>.
+ */
+export declare function wrapChildrenWithPaths(children: React.ReactNode, variant?: 'inline' | 'terminal'): React.ReactNode;
+export {};

package/dist/internal/components/clickable-path.js

@@ -0,0 +1,170 @@
+'use client';
+import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { toSandboxAbsolutePath } from '../files/runtime-files.js';
+import { cn } from '../../lib/utils.js';
+import { splitTextByPaths } from '../lib/utils/path-detection.js';
+import { useFilePreviewStore } from '../stores/file-preview-store.js';
+import { getActivePanelSessionId, openFileInSessionPanel } from '../stores/session-browser-store.js';
+import React, { useCallback, useMemo } from 'react';
+// ---------------------------------------------------------------------------
+// Path resolution
+// ---------------------------------------------------------------------------
+/**
+ * Agents write workspace-relative paths (`docs/bio.md`) far more often than
+ * absolute ones, so rejecting them made the common case unclickable — the user
+ * got "Cannot open relative path" for a file that exists.
+ *
+ * `toSandboxAbsolutePath` is the same resolution the rest of the app already
+ * applies to exactly these strings (`show-helpers.tsx`,
+ * `show-content-renderer.tsx`, `file-content-renderer.tsx`): anything already
+ * under an allowed sandbox root passes through, everything else anchors under
+ * `/workspace`. This component was the one surface that rejected instead of
+ * resolving.
+ *
+ * A path that resolves but doesn't exist is not this function's problem — the
+ * viewer reports "couldn't be opened", the same as any dead absolute path, and
+ * that beats refusing to try.
+ */
+export function resolveOpenablePath(filePath) {
+    const trimmed = filePath.trim();
+    if (!trimmed)
+        return null;
+    return toSandboxAbsolutePath(trimmed);
+}
+export function ClickablePath({ filePath, children, lineNumber, column, className, variant = 'inline', }) {
+    const openPreview = useFilePreviewStore((s) => s.openPreview);
+    const handleClick = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const resolved = resolveOpenablePath(filePath);
+        if (!resolved)
+            return;
+        // Inside a session → the panel opens the file in its detail layer.
+        // Elsewhere (no side-panel host) fall back to the app-level preview modal.
+        const sessionId = getActivePanelSessionId();
+        if (sessionId) {
+            openFileInSessionPanel(sessionId, resolved, lineNumber);
+            return;
+        }
+        openPreview(resolved, lineNumber);
+    }, [filePath, lineNumber, openPreview]);
+    const title = lineNumber
+        ? `${filePath}:${lineNumber}${column ? `:${column}` : ''} — Click to preview`
+        : `${filePath} — Click to preview`;
+    // A real button, so Enter and Space open the file and assistive technology
+    // announces a control that works. It stays inline: no padding, no
+    // background, the text's own font and colour, so a path in running prose
+    // reads as prose.
+    return (_jsxs("button", { type: "button", onClick: handleClick, title: title, className: cn('group/path inline-flex cursor-pointer items-center gap-0.5 rounded-sm text-left', 'focus-visible:ring-ring transition-colors focus-visible:ring-2 focus-visible:outline-none', variant === 'terminal'
+            ? 'text-kortix-blue decoration-kortix-blue/40 hover:decoration-kortix-blue underline decoration-dotted decoration-1 underline-offset-2'
+            : 'text-foreground hover:underline', className), children: [children || filePath, lineNumber && (_jsxs("span", { className: "text-muted-foreground", children: [":", lineNumber, column ? `:${column}` : ''] }))] }));
+}
+/**
+ * Renders a string of text with all detected file paths made clickable.
+ * Paths are rendered using ClickablePath, which opens the file preview on click.
+ */
+export const TextWithPaths = React.memo(({ text, className, variant = 'inline' }) => {
+    const segments = useMemo(() => splitTextByPaths(text), [text]);
+    // If no paths found, return plain text
+    if (segments.length === 1 && segments[0].type === 'text') {
+        return _jsx(_Fragment, { children: text });
+    }
+    return (_jsx("span", { className: className, children: segments.map((seg, i) => {
+            if (seg.type === 'text') {
+                return _jsx(React.Fragment, { children: seg.value }, i);
+            }
+            return (_jsx(ClickablePath, { filePath: seg.filePath, lineNumber: seg.lineNumber, column: seg.column, variant: variant, children: seg.filePath }, i));
+        }) }));
+});
+TextWithPaths.displayName = 'TextWithPaths';
+/**
+ * Renders a pre-formatted text block (like terminal output) with file paths
+ * made clickable. Processes line by line for efficiency.
+ */
+export const PreWithPaths = React.memo(({ text, className }) => {
+    const lines = useMemo(() => text.split('\n'), [text]);
+    return (_jsx("pre", { className: className, children: lines.map((line, lineIdx) => (_jsxs(React.Fragment, { children: [lineIdx > 0 && '\n', _jsx(TextWithPaths, { text: line, variant: "terminal" })] }, lineIdx))) }));
+});
+PreWithPaths.displayName = 'PreWithPaths';
+// ---------------------------------------------------------------------------
+// wrapChildrenWithPaths — recursively process React children to detect paths
+// ---------------------------------------------------------------------------
+/**
+ * Elements whose text belongs to something other than prose: code is code, and
+ * a link already owns its own target. Path detection must not reach inside any
+ * of them.
+ */
+const OPAQUE_TAG_NAMES = new Set(['code', 'pre', 'a']);
+/**
+ * Is this element one whose subtree path detection must leave alone?
+ *
+ * Checking `el.type === 'code'` only catches the NATIVE tag. Both markdown
+ * renderers replace `code`/`pre`/`a` with custom components, so the type is a
+ * function there and the plain check missed every fence in the app. The tag
+ * name survives on the `node` prop the parser forwards; fenced code also
+ * carries `language-*` in `className`, which covers a renderer that drops
+ * `node`.
+ */
+function isOpaqueElement(el) {
+    if (typeof el.type === 'string')
+        return OPAQUE_TAG_NAMES.has(el.type);
+    const tagName = el.props?.node?.tagName;
+    if (typeof tagName === 'string' && OPAQUE_TAG_NAMES.has(tagName))
+        return true;
+    const className = el.props?.className;
+    return typeof className === 'string' && /(?:^|\s)language-/.test(className);
+}
+/**
+ * Walk a React children tree and replace text nodes that contain file paths
+ * with clickable versions. Skips children already inside <code>, <pre> or <a>.
+ */
+export function wrapChildrenWithPaths(children, variant = 'inline') {
+    return React.Children.map(children, (child) => {
+        // String text nodes — scan for paths
+        if (typeof child === 'string') {
+            const segments = splitTextByPaths(child);
+            if (segments.length === 1 && segments[0].type === 'text') {
+                return child; // No paths found
+            }
+            return (_jsx(_Fragment, { children: segments.map((seg, i) => {
+                    if (seg.type === 'text') {
+                        return _jsx(React.Fragment, { children: seg.value }, i);
+                    }
+                    return (_jsx(ClickablePath, { filePath: seg.filePath, lineNumber: seg.lineNumber, column: seg.column, variant: variant, children: seg.filePath }, i));
+                }) }));
+        }
+        // React elements — recurse into children, but skip code/pre/a subtrees.
+        if (React.isValidElement(child)) {
+            const el = child;
+            // Code and links handle their own text; rewriting their children turned
+            // a fenced block's string into a React element, and `String(children)`
+            // in MarkdownCode then rendered the literal `[object Object]`.
+            if (isOpaqueElement(el)) {
+                return child;
+            }
+            // A path already made clickable is finished. `li` wraps its children and
+            // then the nested `p`/`td` component wraps them AGAIN, so the second pass
+            // walked into the span the first pass produced and wrapped its text in a
+            // second one — a button inside a button, two click handlers on one path.
+            if (el.type === ClickablePath) {
+                return child;
+            }
+            // For custom (non-native) components, don't recurse if children is a
+            // string that looks like a URL — those components handle their own
+            // URL/path rendering.
+            if (typeof el.type !== 'string' && typeof el.props.children === 'string') {
+                if (/^[a-z][a-z0-9+.-]*:\/\//i.test(el.props.children.trim())) {
+                    return child;
+                }
+            }
+            // Recurse
+            if (el.props.children) {
+                return React.cloneElement(el, {
+                    ...el.props,
+                    children: wrapChildrenWithPaths(el.props.children, variant),
+                });
+            }
+        }
+        return child;
+    });
+}