@kortix/ui 0.14.7 → 0.14.9

package/dist/internal/lib/web-notifications.js

@@ -33,6 +33,7 @@ import { hasWebPushSubscription } from '../notifications/web-push.js';
 import { customToast, dismissToast, ToastCard, toastIcon, errorToast, infoToast, successToast, warningToast, } from '../../primitives/toast.js';
 import { ClockIcon, GitPullRequestIcon } from '@phosphor-icons/react';
 import { SessionFailedCard, SessionStackCard, } from '../notifications/session-toast-cards.js';
+import { decodeSpaceSegment } from '../../lib/routes.js';
 import { logger } from './logger.js';
 import { softNavigate } from './navigation/router-bridge.js';
 import { projectSessionHref } from './navigation/session-href.js';
@@ -43,6 +44,7 @@ import { openTabAndNavigate, useTabStore } from '../stores/tab-store.js';
 import { useTurnAttentionStore } from '../stores/turn-attention-store.js';
 import { useWebNotificationStore } from '../stores/web-notification-store.js';
 import { listChangeRequests, normalizeAppPathname, } from '@kortix/sdk';
+import { findCachedProjectSession, qk } from '@kortix/sdk/react';
 // ============================================================================
 // Server push preference
 // ============================================================================
@@ -169,6 +171,32 @@ export function isTabHidden() {
         return false;
     return document.hidden || !document.hasFocus();
 }
+/**
+ * A finished turn opens in the thread panel of the channel or DM page on
+ * screen (`?thread=<id>`) only when it is one of that space's threads: the
+ * path's project is the session's, and the cached thread list of the space
+ * holds the session. Null otherwise, so any other session keeps its session
+ * page. Reads the query cache; never fetches.
+ */
+export function spacesThreadHref(location, session, cache) {
+    // An optional two-letter locale segment leads (`/de/projects/…`).
+    const match = /^(?:\/[a-z]{2})?\/projects\/([^/]+)\/(c|dm)\/([^/]+)\/?$/.exec(normalizeAppPathname(location.pathname));
+    if (!match || match[1] !== session.projectId)
+        return null;
+    const [, projectId, kind, segment] = match;
+    const name = decodeSpaceSegment(segment);
+    const space = cache
+        .getQueryData(qk.project.spaces(projectId))
+        ?.find((candidate) => (kind === 'c' ? candidate.slug === name : candidate.dm_agent_name === name));
+    if (!space)
+        return null;
+    const thread = findCachedProjectSession(cache, projectId, (row) => row.session_id === session.sessionId && row.space_id === space.space_id);
+    if (!thread)
+        return null;
+    const params = new URLSearchParams(location.search);
+    params.set('thread', session.sessionId);
+    return `${location.pathname}?${params.toString()}`;
+}
 /**
  * Check if the user is currently viewing a specific session.
  * Checks the tab store (dashboard session tabs) and the current URL
@@ -199,6 +227,9 @@ export function isViewingSession(sessionId) {
         const path = normalizeAppPathname(window.location.pathname);
         if (path.includes(sessionId))
             return true;
+        // A channel or DM page with the thread open in its panel.
+        if (new URLSearchParams(window.location.search).get('thread') === sessionId)
+            return true;
         if (path.startsWith('/onboarding'))
             return true;
     }
@@ -392,7 +423,10 @@ const NOTIFICATION_TOAST_VARIANT = {
 };
 /** Open what the notification is about: its session, or its `href`. */
 function openPayload(payload, forceNavigation) {
-    if (payload.sessionId) {
+    if (payload.threadHref) {
+        softNavigate(payload.threadHref);
+    }
+    else if (payload.sessionId) {
         navigateToSession(payload.sessionId, payload.body, {
             forceNavigation,
             projectId: payload.projectId,
@@ -594,12 +628,22 @@ handoff) {
  */
 export function notifyTaskCompleteFor({ sessionId, sessionTitle, projectId, notificationCenter }, tI18nComplete) {
     noteTurnCompleteShown(sessionId);
-    const name = sessionDisplayName(sessionTitle, sessionId);
-    const label = sessionTitle ? `"${name.slice(0, 60)}"` : name;
+    // On a channel or DM page the turn is a thread: it says "thread" and opens
+    // in the page's panel. A default title ("New session - <time>") names nothing.
+    const cache = getSharedQueryClient();
+    const threadHref = typeof window === 'undefined' || !cache
+        ? null
+        : spacesThreadHref(window.location, { sessionId, projectId }, cache);
+    const defaultTitle = !sessionTitle || /^New session(\s-\s|$)/.test(sessionTitle);
+    const name = threadHref && defaultTitle
+        ? tI18nComplete.raw('untitledThread')
+        : sessionDisplayName(sessionTitle, sessionId);
+    const label = sessionTitle && !(threadHref && defaultTitle) ? `"${name.slice(0, 60)}"` : name;
     const payload = {
         type: 'completion',
         entityLabel: name,
-        openSessionLabel: tI18nComplete.raw('textb205bb47f81a'),
+        openSessionLabel: threadHref ? tI18nComplete.raw('openThreadAction') : tI18nComplete.raw('textb205bb47f81a'),
+        threadHref: threadHref ?? undefined,
         stackTitle: (count) => tI18nComplete('textc0589750863c', { count }),
         title: tI18nComplete.raw('text107f1806b5d7'),
         body: tI18nComplete('text27d628c8b427', { label }),

package/dist/internal/notifications/notification-bell.d.ts

@@ -1,5 +1,6 @@
 /** @internal Kortix apps only. No semver: it may change in any release. */
 import type { InboxNotification } from '@kortix/sdk';
+import { BellIcon } from '@phosphor-icons/react';
 export interface NotificationPanelProps {
     rows: readonly InboxNotification[];
     state: 'loading' | 'error' | 'ready';
@@ -27,10 +28,12 @@ export declare function NotificationPanel({ rows, state, unreadCount, prompt, on
  * sits. At full size it would tint the whole bell.
  */
 export declare const BELL_REFLECTION_MASK = "radial-gradient(circle 12px at 100% 100%, #000 35%, transparent 100%)";
-export declare function BellMark({ count, needsYou, surface, }: {
+export declare function BellMark({ count, needsYou, surface, icon: Glyph, }: {
     count: number;
     needsYou: boolean;
     surface?: 'bg-background' | 'bg-sidebar';
+    /** The glyph under the count: the bell, or another control's own mark. */
+    icon?: typeof BellIcon;
 }): import("react").JSX.Element;
 /**
  * The bell and its popover. Renders nothing, and reads no inbox, while signed

package/dist/internal/notifications/notification-bell.js

@@ -79,11 +79,11 @@ export function NotificationPanel({ rows, state, unreadCount, prompt, onOpenRow,
  * sits. At full size it would tint the whole bell.
  */
 export const BELL_REFLECTION_MASK = 'radial-gradient(circle 12px at 100% 100%, #000 35%, transparent 100%)';
-export function BellMark({ count, needsYou, surface = 'bg-background', }) {
+export function BellMark({ count, needsYou, surface = 'bg-background', icon: Glyph = BellIcon, }) {
     const tone = needsYou
         ? { reflection: 'text-kortix-yellow', disc: 'bg-kortix-yellow' }
         : { reflection: 'text-kortix-blue', disc: 'bg-kortix-blue' };
-    return (_jsxs("span", { className: "relative size-4 shrink-0", children: [_jsx(BellIcon, { className: "size-4" }), count > 0 ? (_jsxs(_Fragment, { children: [_jsx(BellIcon, { "aria-hidden": true, className: cn('absolute inset-0 size-4', tone.reflection), style: { maskImage: BELL_REFLECTION_MASK, WebkitMaskImage: BELL_REFLECTION_MASK } }), _jsx("span", { "aria-hidden": true, className: cn('absolute -right-2.5 -bottom-2 flex rounded-full p-px', surface), children: _jsx("span", { "data-slot": "bell-count", className: cn('text-background flex h-3.5 min-w-3.5 items-center justify-center rounded-full px-0.5 text-[9px] leading-none font-semibold tabular-nums', // audit:allow a numeral in a 13px disc on a 16px glyph; no type rung fits
+    return (_jsxs("span", { className: "relative size-4 shrink-0", children: [_jsx(Glyph, { className: "size-4" }), count > 0 ? (_jsxs(_Fragment, { children: [_jsx(Glyph, { "aria-hidden": true, className: cn('absolute inset-0 size-4', tone.reflection), style: { maskImage: BELL_REFLECTION_MASK, WebkitMaskImage: BELL_REFLECTION_MASK } }), _jsx("span", { "aria-hidden": true, className: cn('absolute -right-2.5 -bottom-2 flex rounded-full p-px', surface), children: _jsx("span", { "data-slot": "bell-count", className: cn('text-background flex h-3.5 min-w-3.5 items-center justify-center rounded-full px-0.5 text-[9px] leading-none font-semibold tabular-nums', // audit:allow a numeral in a 13px disc on a 16px glyph; no type rung fits
                             tone.disc), children: badgeCount(count) }) })] })) : null] }));
 }
 /**

package/dist/internal/selection/selection-bar.d.ts

@@ -2,7 +2,8 @@
 export interface SelectionBarAction {
     id: string;
     label: string;
-    tone?: 'default' | 'destructive';
+    /** `success` for an approving verb (Approve), `destructive` for a removing one. */
+    tone?: 'default' | 'success' | 'destructive';
     disabled?: boolean;
     onSelect: () => void;
 }

package/dist/internal/selection/selection-bar.js

@@ -31,7 +31,7 @@ export function SelectionBar({ selectedCount, allSelected, canSelectAll = true,
     const selectLabel = allSelected ? t.raw('text83b12c2216ef') : t.raw('text1fc9a387654d');
     // One action: a fixed-height button that reads its label. No glyph: a
     // verb in a bulk bar is read, not recognised.
-    const action = (a) => (_jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: a.onSelect, disabled: busy || a.disabled, className: cn('h-8 shrink-0', a.tone === 'destructive' && 'text-destructive hover:text-destructive'), children: a.label }, a.id));
+    const action = (a) => (_jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: a.onSelect, disabled: busy || a.disabled, className: cn('h-8 shrink-0', a.tone === 'destructive' && 'text-destructive hover:text-destructive', a.tone === 'success' && 'text-kortix-green hover:text-kortix-green'), children: a.label }, a.id));
     return (_jsxs(m.div, { initial: animateIn ? { opacity: 0, transform: reduceMotion ? REST : RISE } : false, animate: {
             opacity: 1,
             transform: REST,

package/dist/internal/stores/file-preview-store.d.ts

@@ -1,4 +1,19 @@
 /** @internal Kortix apps only. No semver: it may change in any release. */
+/**
+ * What the full-screen viewer shows under a file opened with one: a generated
+ * image's prompt (`text`) and the model that made it.
+ */
+export interface FileCaption {
+    text: string;
+    model?: string | null;
+    /**
+     * The sha256 of the image's bytes (R38): the viewer draws those bytes from
+     * the shared store at once, with no read.
+     */
+    sha256?: string;
+}
+/** One key per sandbox file, with or without the `/workspace/` prefix. */
+export declare function fileCaptionKey(path: string): string;
 interface FilePreviewState {
     /** Whether the preview dialog is open */
     isOpen: boolean;
@@ -6,10 +21,22 @@ interface FilePreviewState {
     filePath: string | null;
     /** Optional line number to highlight */
     lineNumber?: number;
-    /** Open the preview dialog with the given file */
-    openPreview: (filePath: string, lineNumber?: number) => void;
+    /**
+     * Captions of the files opened with one, by `fileCaptionKey`. Kept after
+     * the open: the session panel's viewer, the Files explorer and this dialog
+     * all read it for the path they show.
+     */
+    captions: Record<string, FileCaption>;
+    /** Open the preview dialog with the given file; `caption` shows under it in the viewer. */
+    openPreview: (filePath: string, lineNumber?: number, caption?: FileCaption) => void;
     /** Close the preview dialog */
     closePreview: () => void;
 }
 export declare const useFilePreviewStore: import("zustand").UseBoundStore<import("zustand").StoreApi<FilePreviewState>>;
+/**
+ * The caption the viewer shows under `filePath`, when it was opened with one.
+ * The live state on both snapshots: a static render (tests, a prerender)
+ * reads what was opened, not the store's initial state.
+ */
+export declare function useFileCaption(filePath: string): FileCaption | undefined;
 export {};

package/dist/internal/stores/file-preview-store.js

@@ -1,10 +1,18 @@
 import { getActivePanelSessionId, openFileInSessionPanel } from './session-browser-store.js';
+import { useSyncExternalStore } from 'react';
 import { create } from 'zustand';
+/** One key per sandbox file, with or without the `/workspace/` prefix. */
+export function fileCaptionKey(path) {
+    return path.trim().replace(/^\/?workspace\//, '').replace(/^\/+/, '');
+}
 export const useFilePreviewStore = create((set) => ({
     isOpen: false,
     filePath: null,
     lineNumber: undefined,
-    openPreview: (filePath, lineNumber) => {
+    captions: {},
+    openPreview: (filePath, lineNumber, caption) => {
+        if (caption)
+            set((s) => ({ captions: { ...s.captions, [fileCaptionKey(filePath)]: caption } }));
         // Inside a session the file opens in the panel's detail layer — the THING,
         // not the file manager around it (see easy-panel.tsx's handleOpenOutput).
         // `…Silently` because Easy must never write `viewBySession`: that key is
@@ -22,3 +30,13 @@ export const useFilePreviewStore = create((set) => ({
         set({ isOpen: false, filePath: null, lineNumber: undefined });
     },
 }));
+/**
+ * The caption the viewer shows under `filePath`, when it was opened with one.
+ * The live state on both snapshots: a static render (tests, a prerender)
+ * reads what was opened, not the store's initial state.
+ */
+export function useFileCaption(filePath) {
+    const key = fileCaptionKey(filePath);
+    const read = () => useFilePreviewStore.getState().captions[key];
+    return useSyncExternalStore(useFilePreviewStore.subscribe, read, read);
+}

package/dist/internal/stores/kortix-computer-store.js

@@ -110,6 +110,9 @@ export const useKortixComputerStore = create()(devtools((set, get) => ({
         if (!open) {
             // The person closed it: coming back must not reopen it.
             forgetActivePanel(get());
+            // A tool closed while the computer boots stays closed after the
+            // boot→ready handoff: drop the intent it would replant.
+            update._bootQuickView = null;
             update.panelSplit = null;
             update.panelAspect = null;
             update.isExpanded = false;

package/dist/internal/stores/sidebar-nav-store.d.ts

@@ -8,7 +8,7 @@
  * (`customize-sidebar-modal.tsx` syncs it). A row a project does not offer (a flag is off, a permission is denied)
  * keeps its place here and simply does not render.
  */
-export declare const SIDEBAR_NAV_ITEM_IDS: readonly ["customize", "apps", "files", "rooms", "goals"];
+export declare const SIDEBAR_NAV_ITEM_IDS: readonly ["customize", "apps", "files", "rooms", "goals", "artifacts"];
 export type SidebarNavItemId = (typeof SIDEBAR_NAV_ITEM_IDS)[number];
 /**
  * `never` moves the row into the More menu (`project-nav-items.tsx`), so its

package/dist/internal/stores/sidebar-nav-store.js

@@ -13,7 +13,7 @@ import { registerPersistedStore, resetPersistedStore } from './persisted-store-r
  */
 // Review (2026-10-17) and Reminders (2026-10-19) left the sidebar for Customize
 // tabs. A saved layout that still names one drops the id in `normalizeSidebarNav`.
-export const SIDEBAR_NAV_ITEM_IDS = ['customize', 'apps', 'files', 'rooms', 'goals'];
+export const SIDEBAR_NAV_ITEM_IDS = ['customize', 'apps', 'files', 'rooms', 'goals', 'artifacts'];
 /** The layout before anyone customizes it. */
 export const SIDEBAR_NAV_DEFAULTS = [
     { id: 'customize', visibility: 'always' },
@@ -24,6 +24,8 @@ export const SIDEBAR_NAV_DEFAULTS = [
     { id: 'rooms', visibility: 'never' },
     // Goals (2026-10-21, flag `goals`): objectives agents own until verified done.
     { id: 'goals', visibility: 'always' },
+    // Artifacts (2026-10-23, flag `artifacts`): published docs, slides, boards, dashboards.
+    { id: 'artifacts', visibility: 'always' },
 ];
 function isItemId(value) {
     return SIDEBAR_NAV_ITEM_IDS.includes(value);

package/dist/lib/routes.d.ts

@@ -6,7 +6,9 @@
  *
  * A route that returns null is a page the host does not serve: every link to
  * it is hidden and no navigation goes there. `project` and `session` are the
- * two pages every session host serves, so they cannot be null.
+ * two pages every session host serves, so they cannot be null. `channel` and
+ * `dm` cannot be null either: the sidebar links them only while the project's
+ * `project_channels` flag is on.
  *
  * Defaults: apps/web's paths.
  */
@@ -24,6 +26,8 @@ export interface UiRoutes {
     rooms: (projectId: string) => string | null;
     /** The project's goals (flag `goals`); a goal is `<goals>/<scope>/<slug>`. */
     goals: (projectId: string) => string | null;
+    /** The project's artifacts (flag `artifacts`); one is `<artifacts>/<artifact_id>`. */
+    artifacts: (projectId: string) => string | null;
     members: (projectId: string) => string | null;
     /** The project settings page, on its sandbox section. */
     sandboxSettings: (projectId: string) => string | null;
@@ -33,11 +37,19 @@ export interface UiRoutes {
      * capability root, for example `models` or `triggers?id=<slug>`.
      */
     customize: (projectId: string, path?: string) => string | null;
+    /** A channel of the project, by slug (`project_channels` flag). */
+    channel: (projectId: string, slug: string) => string;
+    /** The caller's direct messages with one agent, by agent name (`project_channels` flag). */
+    dm: (projectId: string, agentName: string) => string;
+    /** The project's Company memory (`project_channels` flag); a page is `?page=<page_id>`. */
+    memory: (projectId: string) => string | null;
 }
 export declare const defaultUiRoutes: UiRoutes;
 /** Replaces the routes the host passes. Omitted routes keep their default. */
 export declare function setUiRoutes(overrides: Partial<UiRoutes>): void;
 export declare function uiRoutes(): UiRoutes;
+/** A channel slug or DM agent name from its URL segment; null when a hand-typed escape is malformed. */
+export declare function decodeSpaceSegment(segment: string): string | null;
 /**
  * A capability page's URL for the customize pages themselves: they are mounted
  * only by a host that serves them, so a null `customize` route falls back to

package/dist/lib/routes.js

@@ -7,9 +7,13 @@ const DEFAULT_ROUTES = {
     apps: (p) => `/projects/${p}/apps`,
     rooms: (p) => `/projects/${p}/rooms`,
     goals: (p) => `/projects/${p}/goals`,
+    artifacts: (p) => `/projects/${p}/artifacts`,
     members: (p) => `/projects/${p}/members`,
     sandboxSettings: (p) => `/projects/${p}/config?section=sandbox`,
     customize: (p, path) => `/projects/${p}/customize${path ? `/${path}` : ''}`,
+    channel: (p, slug) => `/projects/${p}/c/${slug}`,
+    dm: (p, agentName) => `/projects/${p}/dm/${encodeURIComponent(agentName)}`,
+    memory: (p) => `/projects/${p}/memory`,
 };
 export const defaultUiRoutes = DEFAULT_ROUTES;
 let routes = DEFAULT_ROUTES;
@@ -20,6 +24,15 @@ export function setUiRoutes(overrides) {
 export function uiRoutes() {
     return routes;
 }
+/** A channel slug or DM agent name from its URL segment; null when a hand-typed escape is malformed. */
+export function decodeSpaceSegment(segment) {
+    try {
+        return decodeURIComponent(segment);
+    }
+    catch {
+        return null;
+    }
+}
 /**
  * A capability page's URL for the customize pages themselves: they are mounted
  * only by a host that serves them, so a null `customize` route falls back to

package/dist/markdown/genui/components/inline.d.ts

@@ -12,6 +12,6 @@ export declare const genuiBadgeClass: (tone: BadgeTone) => string;
 export declare function GenuiBadge({ props }: GenuiComponentProps): import("react").JSX.Element;
 export declare function GenuiCallout({ props }: GenuiComponentProps): import("react").JSX.Element;
 /** Set inside an image gallery (layout.tsx): the tile sizes the image, which covers it. A `tile` shows its caption on hover. */
-export declare const GenuiImageGridContext: import("react").Context<false | "lead" | "tile">;
+export declare const GenuiImageGridContext: import("react").Context<false | "tile" | "lead">;
 export declare function GenuiImage({ props }: GenuiComponentProps): import("react").JSX.Element;
 export declare function GenuiLink({ props }: GenuiComponentProps): import("react").JSX.Element;

package/dist/markdown/index.d.ts

@@ -10,7 +10,8 @@ export type { MarkdownPolicy, MarkdownTrust, MarkdownVariant } from './markdown-
 export { UnifiedMarkdown } from './unified-markdown.js';
 export type { UnifiedMarkdownProps } from './unified-markdown.js';
 export { CopyOverlay } from './code/index.js';
-export { HighlightedCode } from './code/code-block.js';
+export { CodeHighlight, HighlightedCode } from './code/code-block.js';
+export { INLINE_CODE } from './code/inline-chip.js';
 export { CopyButton } from './copy-button.js';
 export { MarkdownWithFrontmatter } from './markdown-frontmatter.js';
 export { languageLabel, normalizeLanguage } from './unified-markdown-utils.js';

package/dist/markdown/index.js

@@ -8,7 +8,8 @@
 export { markdownPolicy } from './markdown-policy.js';
 export { UnifiedMarkdown } from './unified-markdown.js';
 export { CopyOverlay } from './code/index.js';
-export { HighlightedCode } from './code/code-block.js';
+export { CodeHighlight, HighlightedCode } from './code/code-block.js';
+export { INLINE_CODE } from './code/inline-chip.js';
 export { CopyButton } from './copy-button.js';
 export { MarkdownWithFrontmatter } from './markdown-frontmatter.js';
 export { languageLabel, normalizeLanguage } from './unified-markdown-utils.js';

package/dist/markdown/setup-links/approval-decision.d.ts

@@ -8,6 +8,7 @@ import { type ApprovalLinkDetails } from '@kortix/sdk';
 export declare function approvalIdentity(details: ApprovalLinkDetails): {
     connector: string | null;
     action: string | null;
+    slug: string | null;
     iconUrl: string | null;
 };
 /**

package/dist/markdown/setup-links/approval-decision.js

@@ -12,7 +12,7 @@ import { OutcomeTitle } from '../../internal/auth/auth-consent.js';
 import { Rise, StepHeader } from '../../internal/auth/auth-primitives.js';
 import { useTranslations } from '../../i18n/index.js';
 import { getApprovalLink, resolveApproval } from '@kortix/sdk';
-import { CheckCircleIcon, ClockIcon, EyeIcon, MinusCircleIcon, PencilSimpleIcon, UserIcon, WarningIcon, XCircleIcon, } from '@phosphor-icons/react';
+import { CheckCircleIcon, ClockIcon, EyeIcon, MinusCircleIcon, PencilSimpleIcon, ShieldCheckIcon, UserIcon, WarningIcon, XCircleIcon, } from '@phosphor-icons/react';
 import { UiLink as Link, useUiRouter } from '../../providers/ui-provider.js';
 import { useEffect, useState } from 'react';
 import { isApprovalExpiredError } from '../../internal/lib/approval-expired.js';
@@ -46,6 +46,7 @@ export function approvalIdentity(details) {
         connector: details.connector_name ??
             (details.connector ? details.connector.charAt(0).toUpperCase() + details.connector.slice(1) : null),
         action: actionLabel(details.action),
+        slug: details.connector ?? null,
         iconUrl: connectorLogoUrl(details),
     };
 }
@@ -202,6 +203,7 @@ export function ApprovalDecisionPanel({ details, outcome, busyDecision, error, o
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const tHardcodedUi = useTranslations('hardcodedUi');
     const t = useTranslations('hardcodedUi.approvalPage');
+    const tSets = useTranslations('connectorPolicySets');
     const priorityWord = useIssuePriorityWord();
     const now = useClock();
     const expiresAt = Date.parse(details.expires_at);
@@ -316,7 +318,9 @@ export function ApprovalDecisionPanel({ details, outcome, busyDecision, error, o
     const risk = details.risk === 'destructive' ? (_jsx(FactRow, { icon: _jsx(WarningIcon, { "aria-hidden": true, className: "text-kortix-red size-4" }), children: t('riskDestructive') })) : details.risk === 'write' ? (_jsx(FactRow, { icon: _jsx(PencilSimpleIcon, { "aria-hidden": true, className: "text-foreground size-4" }), children: t('riskWrite', { action: (readable ?? details.action).toLowerCase() }) })) : details.risk === 'read' ? (_jsx(FactRow, { icon: _jsx(EyeIcon, { "aria-hidden": true, className: "text-foreground size-4" }), children: t('riskRead') })) : null;
     const decidable = details.pending && !resolved && !!onDecision;
     const footer = error || expired || decidable || waiting;
-    return (_jsxs(Rise, { children: [_jsxs("div", { className: "flex flex-col gap-3 px-5 pt-5 pb-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", title: details.action, children: [_jsx(ConnectorAppMark, { name: connectorName ?? details.action, iconUrl: connectorLogoUrl(details), size: "md" }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("p", { className: "text-foreground truncate text-sm leading-5 font-medium", children: connectorName ?? readable ?? details.action }), connectorName ? (_jsx("p", { className: "text-muted-foreground truncate text-xs leading-4", children: readable ?? details.action })) : null] })] }), chip] }), _jsx("h2", { className: "text-foreground text-xl leading-snug font-semibold wrap-anywhere", children: headline }), _jsx(ApprovalAgentContext, { quote: true, context: details.approval_context })] }), showsPreview ? (_jsx("div", { className: "px-5", children: _jsx(ApprovalParameters, { native: true, action: details.action, argsPreview: details.args_preview, reviewComplete: details.review_complete !== false, resolvedPreview: details.resolved_preview, resolvedError: details.resolved_error, className: "overflow-hidden rounded-lg border" }) })) : null, _jsxs("div", { className: cn('flex flex-col gap-2 px-5 pb-4', showsPreview && 'pt-4'), children: [risk, _jsxs(FactRow, { muted: true, icon: _jsx(UserIcon, { "aria-hidden": true, className: "text-muted-foreground size-4" }), children: [asked, expiresWhen ? ` · ${t('expiresAt', { when: expiresWhen })}` : null] })] }), footer ? (_jsxs("div", { className: "border-border flex flex-col gap-3 border-t px-5 pt-4 pb-5", children: [error ? (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) })) : null, expired ? (_jsxs(_Fragment, { children: [_jsx(Alert, { children: _jsx(AlertDescription, { children: tHardcodedUi('approvalPage.expiredHint') }) }), onDecision ? (_jsx(ApprovalDecisionActions, { onDecision: onDecision, disabled: true, sessionId: details.session_id, notePlaceholder: agent ? t('notePlaceholder', { agent }) : t('notePlaceholderAgent'), approveLabel: approveLabel, noteMinHeight: 80, className: "border-0 p-0" })) : null] })) : decidable && onDecision ? (_jsxs(_Fragment, { children: [reviewable ? null : (_jsx(Alert, { variant: "warning", children: _jsx(AlertDescription, { children: previewAuthorized
+    return (_jsxs(Rise, { children: [_jsxs("div", { className: "flex flex-col gap-3 px-5 pt-5 pb-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", title: details.action, children: [_jsx(ConnectorAppMark, { name: connectorName ?? details.action, slug: details.connector, iconUrl: connectorLogoUrl(details), size: "md" }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("p", { className: "text-foreground truncate text-sm leading-5 font-medium", children: connectorName ?? readable ?? details.action }), connectorName ? (_jsx("p", { className: "text-muted-foreground truncate text-xs leading-4", children: readable ?? details.action })) : null] })] }), chip] }), _jsx("h2", { className: "text-foreground text-xl leading-snug font-semibold wrap-anywhere", children: headline }), _jsx(ApprovalAgentContext, { quote: true, context: details.approval_context })] }), showsPreview ? (_jsx("div", { className: "px-5", children: _jsx(ApprovalParameters, { native: true, action: details.action, argsPreview: details.args_preview, reviewComplete: details.review_complete !== false, resolvedPreview: details.resolved_preview, resolvedError: details.resolved_error, className: "overflow-hidden rounded-lg border" }) })) : null, _jsxs("div", { className: cn('flex flex-col gap-2 px-5 pb-4', showsPreview && 'pt-4'), children: [risk, details.policy_set ? (_jsx(FactRow, { muted: true, icon: _jsx(ShieldCheckIcon, { "aria-hidden": true, className: "text-muted-foreground size-4" }), children: details.agent
+                            ? tSets('approvalSetAgent', { agent: details.agent, set: details.policy_set })
+                            : tSets('approvalSet', { set: details.policy_set }) })) : null, _jsxs(FactRow, { muted: true, icon: _jsx(UserIcon, { "aria-hidden": true, className: "text-muted-foreground size-4" }), children: [asked, expiresWhen ? ` · ${t('expiresAt', { when: expiresWhen })}` : null] })] }), footer ? (_jsxs("div", { className: "border-border flex flex-col gap-3 border-t px-5 pt-4 pb-5", children: [error ? (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) })) : null, expired ? (_jsxs(_Fragment, { children: [_jsx(Alert, { children: _jsx(AlertDescription, { children: tHardcodedUi('approvalPage.expiredHint') }) }), onDecision ? (_jsx(ApprovalDecisionActions, { onDecision: onDecision, disabled: true, sessionId: details.session_id, notePlaceholder: agent ? t('notePlaceholder', { agent }) : t('notePlaceholderAgent'), approveLabel: approveLabel, noteMinHeight: 80, className: "border-0 p-0" })) : null] })) : decidable && onDecision ? (_jsxs(_Fragment, { children: [reviewable ? null : (_jsx(Alert, { variant: "warning", children: _jsx(AlertDescription, { children: previewAuthorized
                                         ? tI18nComplete.raw('text7c4a3e7e2251')
                                         : tI18nComplete.raw('textf7873b149941') }) })), _jsx(ApprovalDecisionActions, { onDecision: onDecision, busyDecision: busyDecision, approvable: reviewable, sessionId: details.session_id, notePlaceholder: agent ? t('notePlaceholder', { agent }) : t('notePlaceholderAgent'), approveLabel: approveLabel, noteMinHeight: 80, className: "border-0 p-0" })] })) : waiting ? (_jsx(ApprovalWaitingNotice, { dense: true, resolvers: resolvers })) : null] })) : null] }));
 }

package/dist/markdown/setup-links/connector-handshake.d.ts

@@ -19,8 +19,10 @@ declare const TILE_SIZE: {
  * not contain it: WebKit skips a rounded overflow clip for a composited child
  * (the card animates in), and the logo's square corners painted past the edge.
  */
-export declare function ConnectorAppMark({ name, iconUrl, size, }: {
+export declare function ConnectorAppMark({ name: _name, slug, iconUrl, size, }: {
     name: string;
+    /** The connector's slug, so a Kortix-built connector shows its own mark. */
+    slug?: string | null;
     iconUrl: string | null | undefined;
     size?: keyof typeof TILE_SIZE;
 }): React.JSX.Element;

package/dist/markdown/setup-links/connector-handshake.js

@@ -1,11 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { EntityAvatar } from '../../primitives/entity-avatar.js';
+import { ConnectorLogo } from '../../internal/connector-logo/connector-logo.js';
 import { KortixLogo } from '../../primitives/kortix-logo.js';
 import { Skeleton } from '../../primitives/skeleton.js';
 import { cn } from '../../lib/utils.js';
 import { CheckIcon } from '@phosphor-icons/react';
-import { useState } from 'react';
 /**
  * The logo tile is white in both themes. Catalogue logos are third-party art
  * drawn for a white ground: on the dark `bg-popover` a black glyph (Notion,
@@ -13,6 +12,8 @@ import { useState } from 'react';
  * exception, kept here as a named constant rather than inline.
  */
 const LOGO_TILE_BACKGROUND = 'bg-white';
+/** The Kortix tile is the light variant in both themes: white ground, black mark, no edge. */
+const KORTIX_TILE_COLORS = 'bg-white text-black';
 const TILE_SIZE = {
     xl: 'size-14 rounded-xl',
     lg: 'size-10 rounded-md',
@@ -41,15 +42,13 @@ function HandshakeTile({ size, className, children, }) {
  * not contain it: WebKit skips a rounded overflow clip for a composited child
  * (the card animates in), and the logo's square corners painted past the edge.
  */
-export function ConnectorAppMark({ name, iconUrl, size = 'md', }) {
-    const [broken, setBroken] = useState(false);
-    if (iconUrl === undefined) {
+export function ConnectorAppMark({ name: _name, slug, iconUrl, size = 'md', }) {
+    if (iconUrl === undefined && !slug) {
         return _jsx(Skeleton, { "aria-hidden": true, className: cn('shrink-0 py-0', TILE_SIZE[size]) });
     }
-    if (!iconUrl || broken) {
-        return _jsx(EntityAvatar, { label: name, size: size, className: size === 'xl' ? 'rounded-xl' : undefined });
-    }
-    return (_jsx(HandshakeTile, { size: size, className: LOGO_TILE_BACKGROUND, children: _jsx("img", { src: iconUrl, alt: "", referrerPolicy: "no-referrer", draggable: false, onError: () => setBroken(true), className: cn('size-full object-contain select-none', TILE_SIZE[size]) }) }));
+    // The one connector logo (`ConnectorLogo`), so a connect card, an approval and the
+    // connector's own page show the same mark.
+    return _jsx(ConnectorLogo, { source: { slug, icon: iconUrl ?? null }, size: size });
 }
 /** The Kortix glyph inside its tile, per tile size. */
 const KORTIX_MARK_PX = { md: 14, lg: 18, xl: 24 };
@@ -67,5 +66,8 @@ const KORTIX_MARK_PX = { md: 14, lg: 18, xl: 24 };
  * away and the app logo alone leads, which gives the title the room it needs.
  */
 export function ConnectorHandshake({ name, iconUrl, connected = false, size = 'md', collapsible = true, mark, }) {
-    return (_jsxs("span", { className: cn('flex shrink-0 items-center', size === 'xl' ? 'gap-3' : 'gap-1.5'), "aria-hidden": true, children: [_jsx(HandshakeTile, { size: size, className: cn('bg-background text-foreground ring-border ring-1 ring-inset', collapsible && 'hidden @md/connect:flex'), children: _jsx(KortixLogo, { variant: "icon", size: KORTIX_MARK_PX[size] }) }), _jsxs("svg", { width: size === 'xl' ? 36 : 24, height: size === 'xl' ? 9 : 6, viewBox: "0 0 24 6", className: cn('text-muted-foreground shrink-0', collapsible && 'hidden @md/connect:block'), fill: "currentColor", children: [_jsx("circle", { cx: "2", cy: "3", r: "1", opacity: "0.3" }), _jsx("circle", { cx: "7", cy: "3", r: "1.25", opacity: "0.7" }), _jsx("circle", { cx: "12", cy: "3", r: "1.75" }), _jsx("circle", { cx: "17", cy: "3", r: "1.25", opacity: "0.7" }), _jsx("circle", { cx: "22", cy: "3", r: "1", opacity: "0.3" })] }), _jsxs("span", { className: "relative flex", children: [mark ? (_jsx(HandshakeTile, { size: size, className: cn(LOGO_TILE_BACKGROUND, 'ring-border ring-1 ring-inset'), children: mark })) : (_jsx(ConnectorAppMark, { name: name, iconUrl: iconUrl, size: size })), connected ? (_jsx("span", { className: "bg-kortix-green ring-background absolute -right-1 -bottom-1 flex size-3.5 items-center justify-center rounded-full ring-2", children: _jsx(CheckIcon, { weight: "bold", className: "text-background size-2" }) })) : null] })] }));
+    return (_jsxs("span", { className: cn('flex shrink-0 items-center', size === 'xl' ? 'gap-3' : 'gap-1.5'), "aria-hidden": true, children: [_jsx(HandshakeTile, { size: size, className: cn(KORTIX_TILE_COLORS, collapsible && 'hidden @md/connect:flex'), children: _jsx(KortixLogo, { variant: "icon", size: KORTIX_MARK_PX[size] }) }), _jsxs("svg", { width: size === 'xl' ? 36 : 24, height: size === 'xl' ? 9 : 6, viewBox: "0 0 24 6", className: cn('text-muted-foreground shrink-0', collapsible && 'hidden @md/connect:block'), fill: "currentColor", children: [_jsx("circle", { cx: "2", cy: "3", r: "1", opacity: "0.3" }), _jsx("circle", { cx: "7", cy: "3", r: "1.25", opacity: "0.7" }), _jsx("circle", { cx: "12", cy: "3", r: "1.75" }), _jsx("circle", { cx: "17", cy: "3", r: "1.25", opacity: "0.7" }), _jsx("circle", { cx: "22", cy: "3", r: "1", opacity: "0.3" })] }), _jsxs("span", { className: "relative flex", children: [mark ? (_jsx(HandshakeTile, { size: size, className: cn(LOGO_TILE_BACKGROUND, 'ring-border ring-1 ring-inset'), children: mark })) : (
+                    // A white ground behind the bare logo, so a black glyph (GitHub,
+                    // Notion) stays visible on a dark surface.
+                    _jsx("span", { className: cn(iconUrl !== undefined && LOGO_TILE_BACKGROUND, 'flex', TILE_SIZE[size]), children: _jsx(ConnectorAppMark, { name: name, iconUrl: iconUrl, size: size }) })), connected ? (_jsx("span", { className: "bg-kortix-green ring-background absolute -right-1 -bottom-1 flex size-3.5 items-center justify-center rounded-full ring-2", children: _jsx(CheckIcon, { weight: "bold", className: "text-background size-2" }) })) : null] })] }));
 }

package/dist/markdown/setup-links/show-connect-hero.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export type ShowConnectTarget = {
+    kind: 'kortix';
+    token: string;
+} | {
+    kind: 'provider';
+    host: string;
+};
+/**
+ * A `show` URL that is a connect step, not a page: a Kortix link, a provider's
+ * sign-in page, or any URL the agent titled "Connect <app>". A connection URL
+ * never falls back to the plain link card.
+ */
+export declare function showConnectTarget(url: string, title?: string): ShowConnectTarget | null;
+/**
+ * The `show` panel for a connect URL (Paper, "Show tool · connect URL panel" 01):
+ * the Kortix ··· app handshake, one title, the agent's sentence, one action.
+ *
+ * A Kortix link opens the host's connect dialog in place and turns into the
+ * connected record once the account lands. A provider page opens in a sign-in
+ * window; its app comes from the agent's title, never the provider's favicon.
+ */
+export declare function ShowConnectHero({ url, target, title, description, }: {
+    url: string;
+    target: ShowConnectTarget;
+    title: string;
+    description: string;
+}): React.JSX.Element;