@kortix/ui 0.0.0-stage → 0.14.4

package/dist/session/overrides/provider-secret-pool-editor.d.ts

@@ -0,0 +1,13 @@
+import { type ProviderPoolDrafts } from './provider-pool-draft.js';
+export declare function ProviderSecretPoolEditor({ projectId, sessionId, drafts, onChange, saving }: {
+    projectId: string;
+    sessionId: string;
+    drafts: ProviderPoolDrafts;
+    onChange: (providerId: string, selection: string[] | null) => void;
+    saving?: boolean;
+}): import("react").JSX.Element;
+export declare function NewProviderSecretPoolEditor({ projectId, selection, onChange }: {
+    projectId: string;
+    selection: Record<string, string[]>;
+    onChange: (selection: Record<string, string[]>) => void;
+}): import("react").JSX.Element;

package/dist/session/overrides/provider-secret-pool-editor.js

@@ -0,0 +1,110 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { uiRoutes } from '../../lib/routes.js';
+import { useQuery } from '@tanstack/react-query';
+import { useId, useState } from 'react';
+import { useUiComponents, useUiLink } from '../../providers/ui-provider.js';
+import { useTranslations } from '../../i18n/index.js';
+import { getProjectDetail, } from '@kortix/sdk';
+import { useAccountSecretResources, useModelAccess, useProjectSession, useSessionProviderSecretPools } from '@kortix/sdk/react';
+import { Button } from '../../primitives/button.js';
+import { Checkbox } from '../../primitives/checkbox.js';
+import Loading from '../../primitives/loading.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../primitives/select.js';
+import { ErrorState } from '../../primitives/error-state.js';
+import { needsReconnection } from '../../internal/lib/account-secret-access.js';
+import { LLM_PROVIDER_BY_ID } from '../../internal/lib/llm-providers.js';
+import { Field, FieldLabel } from '../../primitives/field.js';
+import { keysForSession, normalizePoolSelection, sessionPersonalKeys } from './provider-pool-draft.js';
+function useResources(projectId) {
+    const project = useQuery({ queryKey: ['provider-pool-project', projectId], queryFn: () => getProjectDetail(projectId) });
+    const accountId = project.data?.project?.account_id;
+    const resources = useAccountSecretResources(accountId, projectId);
+    return { project, resources };
+}
+function usableKeys(resources = []) {
+    return resources.filter((secret) => secret.consumer === 'llm_gateway' && secret.provider_id && secret.can_use && secret.active);
+}
+/** ChatGPT accounts are managed in place: a member cannot open Customize, and a
+ *  link there would be a dead end. Hidden when ChatGPT is disabled for the project. */
+function ChatGptAccountsButton({ projectId, variant, action, disabled }) {
+    const t = useTranslations('pooledSecrets');
+    const [open, setOpen] = useState(false);
+    const access = useModelAccess(projectId);
+    const { ProviderAccountsModal } = useUiComponents();
+    if (!ProviderAccountsModal || (access.data?.disabledProviders ?? []).includes('codex'))
+        return null;
+    return _jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", variant: variant, disabled: disabled, onClick: () => setOpen(true), children: t(action === 'connect' ? 'connectChatGpt' : 'manageChatGptAccounts') }), _jsx(ProviderAccountsModal, { projectId: projectId, providerId: "codex", open: open, onOpenChange: setOpen })] });
+}
+/** A shared session never uses a member's own ChatGPT account, so it gets the
+ *  reason instead of a connect button that could not help it. */
+const PERSONAL_KEYS_NOTE = {
+    shared: 'sharedSessionKeys',
+    prompted_by_another_member: 'promptedSessionKeys',
+    no_person: 'noPersonSessionKeys',
+};
+function NoPoolKeys({ projectId, shared = false, reason = null }) {
+    const Link = useUiLink();
+    const t = useTranslations('pooledSecrets');
+    const modelsHref = uiRoutes().customize(projectId, 'models');
+    return _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-muted-foreground text-xs", children: t('addSharedKey') }), shared && _jsx("p", { className: "text-muted-foreground text-xs", children: t(PERSONAL_KEYS_NOTE[reason ?? 'shared']) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [!shared && _jsx(ChatGptAccountsButton, { projectId: projectId, variant: "secondary", action: "connect" }), modelsHref && _jsx(Button, { size: "sm", variant: shared ? 'secondary' : 'outline-ghost', asChild: true, children: _jsx(Link, { href: modelsHref, children: t('manageKeys') }) })] })] });
+}
+function PoolChoices({ projectId, providers, providerId, onProviderChange, keys, selected, configured, disabled, readOnly, personalKeys = true, onChange, onReset }) {
+    const Link = useUiLink();
+    const t = useTranslations('pooledSecrets');
+    const modelsHref = uiRoutes().customize(projectId, 'models');
+    const id = useId();
+    const personalChatGpt = providerId === 'codex' && personalKeys;
+    const available = new Set(keys.map((secret) => secret.secret_id));
+    const unavailable = selected.filter((secretId) => !available.has(secretId));
+    return _jsxs(_Fragment, { children: [_jsxs(Field, { className: "gap-1.5", children: [_jsx(FieldLabel, { htmlFor: id, children: t('provider') }), _jsxs(Select, { value: providerId, onValueChange: onProviderChange, disabled: disabled, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: providers.map((provider) => _jsx(SelectItem, { value: provider, children: provider === 'codex' ? 'ChatGPT' : LLM_PROVIDER_BY_ID.get(provider)?.label ?? provider }, provider)) })] })] }), _jsx("p", { className: "text-muted-foreground text-xs", "aria-live": "polite", children: configured
+                    ? selected.length ? t(selected.length === 1 ? 'selectedOneForSession' : 'selectedForSession', { count: selected.length }) : t('providerDisabled')
+                    : t(personalChatGpt ? 'personalChatGptDefault' : 'projectDefault') }), unavailable.length > 0 && _jsxs("div", { className: "space-y-1", role: "status", children: [_jsx("p", { className: "text-muted-foreground text-xs", children: t('unavailableKeys', { count: unavailable.length }) }), _jsx(Button, { size: "sm", variant: "outline-ghost", disabled: disabled || readOnly, onClick: () => onChange(selected.filter((secretId) => available.has(secretId))), children: t('removeUnavailable') })] }), _jsx("div", { className: "max-h-44 space-y-1 overflow-y-auto", children: keys.map((secret) => _jsxs("label", { className: "hover:bg-hover has-[:focus-visible]:ring-ring flex min-h-10 items-center gap-2 rounded-md px-2 py-2 text-sm has-[:focus-visible]:ring-2 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50", children: [_jsx(Checkbox, { checked: selected.includes(secret.secret_id), disabled: disabled || readOnly || (!selected.includes(secret.secret_id) && selected.length >= 10), onCheckedChange: (checked) => onChange(checked === true ? [...selected, secret.secret_id] : selected.filter((value) => value !== secret.secret_id)) }), _jsx("span", { className: "text-foreground min-w-0 break-words", children: secret.label }), providerId === 'codex' && needsReconnection(secret) && (_jsx("span", { className: "text-muted-foreground ml-auto shrink-0 text-xs", children: t('needsReconnection') }))] }, secret.secret_id)) }), selected.length >= 10 && _jsx("p", { className: "text-muted-foreground text-xs", role: "status", children: t('selectionLimit') }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [configured && !readOnly && _jsx(Button, { size: "sm", variant: "secondary", disabled: disabled, onClick: onReset, children: t(personalChatGpt ? 'resetPersonalChatGptDefault' : 'resetDefault') }), providerId === 'codex'
+                        ? _jsx(ChatGptAccountsButton, { projectId: projectId, variant: "outline-ghost", action: "manage", disabled: disabled })
+                        : !modelsHref
+                            ? null
+                            : disabled
+                                ? _jsx(Button, { size: "sm", variant: "outline-ghost", disabled: true, children: t('manageKeys') })
+                                : _jsx(Button, { size: "sm", variant: "outline-ghost", asChild: true, children: _jsx(Link, { href: modelsHref, children: t('manageKeys') }) })] })] });
+}
+function PoolEditorShell({ projectId, usable, providers, loading, error, fetching, retry, shared = false, reason = null, saving, readOnly, selection, onChange }) {
+    const t = useTranslations('pooledSecrets');
+    const common = useTranslations('common');
+    const [providerId, setProviderId] = useState('');
+    const activeProvider = providers.includes(providerId) ? providerId : (providers[0] ?? '');
+    const value = selection(activeProvider);
+    if (loading)
+        return _jsx("div", { role: "status", "aria-label": t('loadingKeys'), children: _jsx(Loading, {}) });
+    if (error)
+        return _jsx(ErrorState, { size: "sm", title: t('keysLoadError'), action: _jsx(Button, { size: "sm", variant: "secondary", disabled: fetching, onClick: retry, children: common('retry') }) });
+    if (!providers.length)
+        return _jsx(NoPoolKeys, { projectId: projectId, shared: shared, reason: reason });
+    return _jsxs("div", { className: "space-y-3", children: [_jsx(PoolChoices, { projectId: projectId, providers: providers, providerId: activeProvider, onProviderChange: setProviderId, keys: usable.filter((secret) => secret.provider_id === activeProvider), selected: value ?? [], configured: value != null, disabled: saving, readOnly: readOnly, personalKeys: !shared, onChange: (ids) => onChange(activeProvider, ids), onReset: () => onChange(activeProvider, null) }), shared && _jsx("p", { className: "text-muted-foreground text-xs", children: t(PERSONAL_KEYS_NOTE[reason ?? 'shared']) }), readOnly && _jsx("p", { className: "text-muted-foreground text-xs", children: t('readOnlyPool') })] });
+}
+export function ProviderSecretPoolEditor({ projectId, sessionId, drafts, onChange, saving = false }) {
+    const { project, resources } = useResources(projectId);
+    const pools = useSessionProviderSecretPools(projectId, sessionId);
+    // Only keys this session can use when it runs: a session that acts for
+    // nobody (shared, prompted by another member, or older than on_behalf_of)
+    // never reaches a key granted to one member (the server refuses the save).
+    const personal = sessionPersonalKeys(useProjectSession(projectId, sessionId).data, pools.data);
+    const personalUser = personal.user;
+    const shared = personalUser === null;
+    const usable = keysForSession(usableKeys(resources.data?.secrets), personalUser);
+    const providers = [...new Set([...usable.map((secret) => secret.provider_id), ...(pools.data?.pools ?? []).map((pool) => pool.provider_id), ...Object.keys(drafts)])].sort();
+    return _jsx(PoolEditorShell, { projectId: projectId, usable: usable, providers: providers, shared: shared, reason: personal.reason, saving: saving, readOnly: !pools.data?.can_edit, loading: project.isLoading || resources.isLoading || pools.isLoading, error: project.isError || resources.isError || pools.isError, fetching: project.isFetching || resources.isFetching || pools.isFetching, retry: () => { void project.refetch(); void resources.refetch(); void pools.refetch(); }, selection: (provider) => provider in drafts ? drafts[provider] : pools.data?.pools.find((entry) => entry.provider_id === provider)?.secret_ids, onChange: onChange });
+}
+export function NewProviderSecretPoolEditor({ projectId, selection, onChange }) {
+    const { project, resources } = useResources(projectId);
+    const usable = usableKeys(resources.data?.secrets);
+    const providers = [...new Set([...usable.map((secret) => secret.provider_id), ...Object.keys(selection)])].sort();
+    return _jsx(PoolEditorShell, { projectId: projectId, usable: usable, providers: providers, loading: project.isLoading || resources.isLoading, error: project.isError || resources.isError, fetching: false, retry: () => { void project.refetch(); void resources.refetch(); }, selection: (provider) => selection[provider], onChange: (provider, ids) => {
+            const next = { ...selection };
+            const normalized = normalizePoolSelection(ids);
+            if (normalized)
+                next[provider] = normalized;
+            else
+                delete next[provider];
+            onChange(next);
+        } });
+}

package/dist/session/overrides/session-overrides-composer.d.ts

@@ -0,0 +1,44 @@
+import type { SessionScopeCommit } from '../scope/session-scope-model.js';
+import { type SessionOverrideSlot } from './session-overrides-toolbar.js';
+export interface SessionOverridesComposerProps {
+    projectId: string;
+    sessionId?: string;
+    onCommittedDraft?: (commit: SessionScopeCommit | undefined) => void;
+    providerSecretPools?: Record<string, string[]>;
+    onProviderSecretPoolsChange?: (selection: Record<string, string[]>) => void;
+    /**
+     * The agent this session runs as. NOT rendered as a row — it is the key the
+     * scope catalog is fetched under, because secrets and connectors are scoped
+     * to what that agent is granted. Drop this and the panel below shows the
+     * wrong grant.
+     */
+    selectedAgent: string | null;
+    /**
+     * Pre-create only: a live sandbox-template chooser for the session about to
+     * be created. Absent for existing sessions, whose environment is fixed.
+     */
+    sandboxSlot?: SessionOverrideSlot;
+}
+/**
+ * The composer's overrides control — the axes that have NO other home.
+ *
+ * Agent, model and reasoning effort are deliberately absent. Every one of them
+ * is already a first-class control on the composer itself: agent in the
+ * under-row (`composer-underbar.tsx`), model and effort in the toolbar inside
+ * the card (`composer-toolbar.tsx`). Rendering them here as well gave each axis
+ * two live controls one click apart, which is a worse problem than it looks —
+ * two surfaces showing the same value means two places to read, two places to
+ * mistrust when they appear to disagree mid-render, and a panel whose top half
+ * is a restatement of the row directly above it. The panel now carries only
+ * what the composer cannot: secrets, connectors, and the sandbox.
+ *
+ * `SessionOverridesToolbar` carried all three as optional slots; with this, its
+ * last caller, no longer passing them, the branches went too rather than
+ * sitting there unreachable. Re-adding one is a `SessionOverrideSlot` prop plus
+ * a `rows` entry there — `sandboxSlot` is the worked example.
+ *
+ * It still exists as a separate component so the two composers (the
+ * project-home one in `composer-chat-input.tsx` and the in-session one in
+ * `session-chat.tsx`) build the panel from one place.
+ */
+export declare function SessionOverridesComposer({ projectId, sessionId, onCommittedDraft, providerSecretPools, onProviderSecretPoolsChange, selectedAgent, sandboxSlot, }: SessionOverridesComposerProps): import("react").JSX.Element;

package/dist/session/overrides/session-overrides-composer.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { SessionDrivesWatch } from '../../files/drives/session-drives-chip.js';
+import { useProjectSession } from '@kortix/sdk/react';
+import { ProviderPoolDraftBoundary } from './provider-pool-draft-context.js';
+import { SessionOverridesToolbar } from './session-overrides-toolbar.js';
+/**
+ * The composer's overrides control — the axes that have NO other home.
+ *
+ * Agent, model and reasoning effort are deliberately absent. Every one of them
+ * is already a first-class control on the composer itself: agent in the
+ * under-row (`composer-underbar.tsx`), model and effort in the toolbar inside
+ * the card (`composer-toolbar.tsx`). Rendering them here as well gave each axis
+ * two live controls one click apart, which is a worse problem than it looks —
+ * two surfaces showing the same value means two places to read, two places to
+ * mistrust when they appear to disagree mid-render, and a panel whose top half
+ * is a restatement of the row directly above it. The panel now carries only
+ * what the composer cannot: secrets, connectors, and the sandbox.
+ *
+ * `SessionOverridesToolbar` carried all three as optional slots; with this, its
+ * last caller, no longer passing them, the branches went too rather than
+ * sitting there unreachable. Re-adding one is a `SessionOverrideSlot` prop plus
+ * a `rows` entry there — `sandboxSlot` is the worked example.
+ *
+ * It still exists as a separate component so the two composers (the
+ * project-home one in `composer-chat-input.tsx` and the in-session one in
+ * `session-chat.tsx`) build the panel from one place.
+ */
+export function SessionOverridesComposer({ projectId, sessionId, onCommittedDraft, providerSecretPools, onProviderSecretPoolsChange, selectedAgent, sandboxSlot, }) {
+    const sessionRow = useProjectSession(projectId, sessionId, { enabled: Boolean(sessionId) });
+    const sandbox = useMemo(() => ({
+        slug: sessionRow.data?.metadata?.sandbox_slug ?? null,
+        provider: sessionRow.data?.sandbox_provider ?? null,
+    }), [sessionRow.data?.metadata, sessionRow.data?.sandbox_provider]);
+    return (_jsxs(ProviderPoolDraftBoundary, { identity: `${projectId}/${sessionId ?? 'new'}`, children: [sessionId ? _jsx(SessionDrivesWatch, { projectId: projectId, sessionId: sessionId }) : null, _jsx(SessionOverridesToolbar, { projectId: projectId, sessionId: sessionId, agentName: selectedAgent ?? undefined, onCommittedDraft: onCommittedDraft, providerSecretPools: providerSecretPools, onProviderSecretPoolsChange: onProviderSecretPoolsChange, sandbox: sandbox, sandboxSlot: sandboxSlot }, `${projectId}/${sessionId ?? 'new'}`)] }));
+}

package/dist/session/overrides/session-overrides-control.d.ts

@@ -0,0 +1,71 @@
+import type { Icon } from '@phosphor-icons/react';
+import { type ReactNode } from 'react';
+/**
+ * One overridable axis of a session.
+ *
+ * `summary` is what the axis is set to RIGHT NOW, and for an axis nobody
+ * touched that string names its real source (usually "Agent default" — the
+ * agent's grant defines the defaults) — never "none". `overridden` is what
+ * earns the badge: a session should look inherited until the user deliberately
+ * takes it off the default.
+ */
+export interface SessionOverrideRow {
+    id: string;
+    name: string;
+    icon: Icon;
+    /** One line under the axis name in the list. */
+    hint: string;
+    summary: string;
+    overridden?: boolean;
+    /** Sentence explaining what an override on this axis does, in the detail pane. */
+    description: string;
+    /** The axis editor. */
+    editor: ReactNode;
+    /**
+     * Drops the override on this axis. Rendered BESIDE the editor, so an empty
+     * catalog can never hide the only way back to the default.
+     */
+    onReset?: () => void;
+    /** Names where the default comes from — "Reset to agent default" etc. */
+    resetLabel?: string;
+    /** Shown instead of the editor when the axis cannot be edited here. */
+    readOnly?: boolean;
+}
+export interface SessionOverridesControlProps {
+    rows: SessionOverrideRow[];
+    disabled?: boolean;
+    saving?: boolean;
+    saveDisabled?: boolean;
+    /** Extra note above the footer — e.g. the non-retroactive secrets warning. */
+    notice?: ReactNode;
+    pendingNote?: string;
+    error?: string | null;
+    /**
+     * Commits the scope draft. Resolves `true` when the save succeeded (or there
+     * was nothing to write) — the popover closes on it, which is the visible
+     * result of the click. Agent/model/effort apply the moment they are picked;
+     * only secrets/connectors wait for Save.
+     */
+    onSave: () => boolean | Promise<boolean>;
+    /**
+     * Hide Save when no row writes through it. Only secrets and provider keys
+     * wait for Save; the pre-create sandbox choice applies with the next prompt.
+     */
+    hideSave?: boolean;
+}
+/**
+ * The session's overrides, in one place: a list of axes on the left and the
+ * focused axis's editor on the right.
+ *
+ * The old surface was a "Scope" popover holding two collapsed accordions. It
+ * hid the two axes it did cover, said nothing about the four other things a
+ * session can override (agent, model, reasoning effort, sandbox), and — worst —
+ * reported an inherited connector axis as "None selected", which invited the
+ * user to Save an override that had never existed.
+ *
+ * Everything here is inherited until it is not. A row shows what it resolves to
+ * today; only a deliberate change writes an override, and every writable axis
+ * carries the way back to the default.
+ */
+export declare function SessionOverridesControlContent({ rows, disabled, saving, saveDisabled, notice, pendingNote, error, onSave, hideSave, }: SessionOverridesControlProps): import("react").JSX.Element;
+export declare function SessionOverridesControl({ onSave, ...contentProps }: SessionOverridesControlProps): import("react").JSX.Element;

package/dist/session/overrides/session-overrides-control.js

@@ -0,0 +1,71 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge } from '../../primitives/badge.js';
+import { Button } from '../../primitives/button.js';
+import Loading from '../../primitives/loading.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../../primitives/popover.js';
+import { ResetAxisButton } from '../scope/session-scope-control.js';
+import { cn } from '../../lib/utils.js';
+import { GearSixIcon } from '@phosphor-icons/react';
+import { useTranslations } from '../../i18n/index.js';
+import { useState } from 'react';
+/**
+ * The session's overrides, in one place: a list of axes on the left and the
+ * focused axis's editor on the right.
+ *
+ * The old surface was a "Scope" popover holding two collapsed accordions. It
+ * hid the two axes it did cover, said nothing about the four other things a
+ * session can override (agent, model, reasoning effort, sandbox), and — worst —
+ * reported an inherited connector axis as "None selected", which invited the
+ * user to Save an override that had never existed.
+ *
+ * Everything here is inherited until it is not. A row shows what it resolves to
+ * today; only a deliberate change writes an override, and every writable axis
+ * carries the way back to the default.
+ */
+export function SessionOverridesControlContent({ rows, disabled = false, saving = false, saveDisabled = false, notice, pendingNote, error, onSave, hideSave = false, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const t = useTranslations('threads');
+    const tPooled = useTranslations('pooledSecrets');
+    const [focusedId, setFocusedId] = useState(rows[0]?.id ?? null);
+    const focused = rows.find((row) => row.id === focusedId) ?? rows[0];
+    const controlsDisabled = disabled || saving;
+    return (_jsxs("div", { 
+        // Radix reports how much room it actually has; without this the panel is
+        // taller than the gap above the composer on a short or narrow viewport and
+        // its first row slides off the top of the screen.
+        className: "flex h-[28rem] max-h-[var(--radix-popover-content-available-height,28rem)] flex-col overflow-hidden", children: [_jsxs("div", { className: "border-border flex min-h-0 flex-1 flex-col sm:flex-row", children: [_jsx("ul", { className: "border-border flex shrink-0 gap-0.5 overflow-x-auto border-b p-1.5 sm:w-48 sm:flex-col sm:overflow-y-auto sm:border-r sm:border-b-0", "aria-label": t('sessionOverrides'), children: rows.map((row) => {
+                            const RowIcon = row.icon;
+                            const active = row.id === focused?.id;
+                            return (_jsx("li", { className: "min-w-0 shrink-0 sm:shrink", children: _jsxs("button", { type: "button", "aria-current": active, onClick: () => setFocusedId(row.id), className: cn('focus-visible:ring-ring flex min-h-10 w-full min-w-0 items-center gap-2.5 rounded-md px-2 py-2 text-left outline-none focus-visible:ring-2', active ? 'bg-active' : 'hover:bg-hover'), children: [_jsx(RowIcon, { className: cn('size-4 shrink-0', active ? 'text-foreground' : 'text-muted-foreground') }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block text-sm leading-tight font-medium", children: row.name }), _jsx("span", { className: "text-muted-foreground hidden text-xs break-words sm:block", children: row.summary }), row.overridden ? (_jsx(Badge, { variant: "outline", size: "xs", className: "hidden shrink-0 sm:inline-flex", children: tI18nComplete.raw('text43bc0f5fc035') })) : null] })] }) }, row.id));
+                        }) }), _jsxs("div", { className: "min-h-0 min-w-0 flex-1 overflow-y-auto px-4 py-3.5", children: [focused ? (_jsxs(_Fragment, { children: [_jsx("h3", { className: "text-foreground text-sm font-medium text-balance", children: focused.name }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs leading-relaxed text-pretty", children: focused.description }), _jsx("div", { className: "mt-3", children: focused.editor }), focused.overridden && focused.onReset ? (_jsx(ResetAxisButton, { disabled: controlsDisabled, onReset: focused.onReset, label: focused.resetLabel })) : null] })) : null, notice ? _jsx("div", { className: "mt-3", children: notice }) : null] })] }), error && _jsx("p", { role: "alert", className: "text-destructive px-4 py-2 text-xs", children: error }), _jsxs("div", { className: "border-border flex items-center justify-between gap-3 border-t px-4 py-2", children: [_jsx("p", { className: "text-muted-foreground text-xs leading-relaxed text-pretty", "aria-live": "polite", children: pendingNote ?? tI18nComplete.raw('text26ee1166df63') }), hideSave ? null : (_jsxs(Button, { type: "button", disabled: controlsDisabled || saveDisabled, onClick: onSave, size: "sm", children: [saving ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, saving ? tPooled('saving') : tPooled('saveChanges')] }))] })] }));
+}
+export function SessionOverridesControl({ onSave, ...contentProps }) {
+    const t = useTranslations('threads');
+    const [open, setOpen] = useState(false);
+    // Closing the panel is the visible result of a successful Save. A failed
+    // save keeps it open — the error toast plus a still-open panel says
+    // "not saved" without losing the draft.
+    const saveAndClose = async () => {
+        const saved = await onSave();
+        if (saved)
+            setOpen(false);
+        return saved;
+    };
+    // The trigger is an icon and nothing else, in the same muted tone as the
+    // agent/model selectors beside it — the axes and their overrides live inside
+    // the panel, never on the composer bar. Only a save in progress locks it: an
+    // axis that is still loading says so inside the panel, and a slow catalog
+    // read must not hide the axes that are ready (provider keys, sandbox).
+    return (_jsxs(Popover, { open: open, onOpenChange: (next) => { if (!contentProps.saving)
+            setOpen(next); }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", disabled: contentProps.saving, "aria-label": t('sessionOverrides'), className: "text-muted-foreground hover:text-foreground data-[state=open]:text-foreground hit-area-3", children: _jsx(GearSixIcon, { className: "size-4 shrink-0" }) }) }), _jsx(PopoverContent, { "aria-label": t('sessionOverrides'), onEscapeKeyDown: (event) => { if (contentProps.saving)
+                    event.preventDefault(); }, side: "top", align: "end", sideOffset: 8, collisionPadding: 12, className: "w-[min(620px,calc(100vw-2rem))] overflow-hidden p-0", 
+                // The model, agent and effort editors are themselves popovers rendered
+                // into their own portal. Radix sees that portal as "outside", so an
+                // unguarded interaction there closes THIS panel under the user's cursor.
+                onInteractOutside: (event) => {
+                    const target = event.target;
+                    if (contentProps.saving || target?.closest('[data-radix-popper-content-wrapper]'))
+                        event.preventDefault();
+                }, children: _jsx(SessionOverridesControlContent, { ...contentProps, onSave: saveAndClose }) })] }));
+}

package/dist/session/overrides/session-overrides-toolbar.d.ts

@@ -0,0 +1,56 @@
+import { type ReactNode } from 'react';
+import { type SessionScopeCommit } from '../scope/session-scope-model.js';
+/** An axis whose control the composer already owns, handed in as a slot. */
+export interface SessionOverrideSlot {
+    /**
+     * What it resolves to now. When nothing overrides the axis this names its
+     * real source ("Agent default", "Project default") — never "none".
+     */
+    summary: string;
+    overridden?: boolean;
+    control: ReactNode;
+    description?: string;
+    /** Drops the override — hands the axis back to its default. */
+    onReset?: () => void;
+    resetLabel?: string;
+}
+export interface SessionOverridesToolbarProps {
+    projectId: string;
+    sessionId?: string;
+    /**
+     * Whose grant the scope is read against — secrets and connectors both
+     * default to what this agent's `kortix.yaml` allows. Not a rendered row:
+     * the agent is picked on the composer itself.
+     */
+    agentName?: string;
+    onCommittedDraft?: (commit: SessionScopeCommit | undefined) => void;
+    providerSecretPools?: Record<string, string[]>;
+    onProviderSecretPoolsChange?: (selection: Record<string, string[]>) => void;
+    /** Create-time only. Shown so the session's environment is not a mystery. */
+    sandbox?: {
+        slug: string | null;
+        provider: string | null;
+    };
+    /**
+     * Pre-create only: the sandbox template IS still choosable, so the row gets
+     * a real editor instead of the read-only summary.
+     */
+    sandboxSlot?: SessionOverrideSlot;
+}
+/**
+ * The per-session overrides that have no control of their own, behind one
+ * composer control: secrets, connectors, and the sandbox.
+ *
+ * It owns the scope draft (secrets + connectors). It deliberately does NOT
+ * render agent, model or reasoning effort — each of those is already a live
+ * control on the composer itself (agent in `composer-underbar.tsx`, model and
+ * effort in `composer-toolbar.tsx`), so a row here would be a second control
+ * for the same value one click away. They used to be optional slots; the
+ * branches went with the last caller that passed them. Re-adding one means
+ * adding a `SessionOverrideSlot` prop and a `rows` entry — see how `sandboxSlot`
+ * does it directly below.
+ *
+ * The sandbox row is read-only on purpose: a session's environment is fixed at
+ * create, and a control that looked editable would be a lie.
+ */
+export declare function SessionOverridesToolbar({ projectId, sessionId, agentName, onCommittedDraft, providerSecretPools, onProviderSecretPoolsChange, sandbox, sandboxSlot, }: SessionOverridesToolbarProps): import("react").JSX.Element | null;