@kortix/ui 0.14.5 → 0.14.7

package/dist/customize/agents/agent-page.js

@@ -66,7 +66,7 @@ import { errorToast, successToast } from '../../primitives/toast.js';
 import { EmptyState } from '../../primitives/empty-state.js';
 import { ErrorState } from '../../primitives/error-state.js';
 import { configEntitySourcePath } from '../sections/component/config-entity-source-path.js';
-import { AgentConfigSections, agentConfigSectionKeys, agentEditorOptionQueries, DEFAULT_AGENT_CONFIG_SECTION, isAgentConfigSectionKey, registryGrantOptions, useAgentDraft, useAgentEditorOptions, useLocalizedAgentConfigCatalog, } from '../sections/view/agent-editor.js';
+import { AgentConfigSections, agentConfigSectionKeys, agentEditorOptionQueries, DEFAULT_AGENT_CONFIG_SECTION, grantSummary, isAgentConfigSectionKey, registryGrantOptions, useAgentDraft, useAgentEditorOptions, useLocalizedAgentConfigCatalog, } from '../sections/view/agent-editor.js';
 import { formatMode, toArray } from '../shared/utils.js';
 import { editConfigPrompt, useConfigureThread, } from '../use-configure-thread.js';
 import { agentConfigNeedsUpgrade, useAgentConfig, useUpdateAgentConfig, } from '../../internal/hooks/projects/use-agent-config.js';
@@ -86,11 +86,13 @@ import { FadedScrollArea } from '../../primitives/faded-scroll-area.js';
 import { SETTINGS_SIDEBAR_WIDTH_PX } from '../../internal/account-hub/account-settings-shell.js';
 import { capabilityTabHref } from '../../internal/lib/capability-tab-routes.js';
 import { useIsMobile } from '../../internal/hooks/index.js';
-import { EditorSectionStyleProvider } from '../sections/view/agent-editor-primitives.js';
+import { EditorSection, EditorSectionStyleProvider } from '../sections/view/agent-editor-primitives.js';
+import { SettingsSectionHeader } from '../../primitives/settings-section-header.js';
 import { AgentDrivesSection } from './agent-drives-section.js';
 import { AgentAuthorityCard } from './agent-authority-card.js';
 import { AgentModel, AgentScope } from './agent-detail-aside.js';
 import { AppsGrantPage, ConnectorsGrantPage, SecretsGrantPage, SkillsGrantPage, } from './agent-grant-pages.js';
+import { GroupedUnderlineTabs, GroupSwitchTabs, InlineVerticalTabs, PrototypeSwitcher, useNavVariant, } from './agent-nav.prototype.js';
 import { AgentPeopleSection } from './agent-people-section.js';
 import { AgentShareControl } from './agent-share-control.js';
 import { AgentTriggersSection } from './agent-triggers-section.js';
@@ -162,11 +164,12 @@ export function AgentPage({ projectId, agentName }) {
  * the one scroller; the rail is the Settings rail
  * (`project-settings-page.tsx`), row for row.
  */
-function AgentPageFrame({ header, section, sections, sectionHref, pane, footer, }) {
+function AgentPageFrame({ header, section, sections, sectionHref, pane, footer, summaries, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
     const isMobile = useIsMobile();
     const localizedConfig = useLocalizedAgentConfigCatalog();
-    const items = localizedConfig.sections.filter((s) => sections.includes(s.key));
+    const sectionKeys = new Set(sections);
+    const items = localizedConfig.sections.filter((s) => sectionKeys.has(s.key));
     // The Preferences rail's rule: a heading over a lone group labels nothing.
     const groups = localizedConfig.groups
         .map((group) => ({
@@ -183,7 +186,18 @@ function AgentPageFrame({ header, section, sections, sectionHref, pane, footer,
                 // The Settings rail's row dialect (`project-settings-page.tsx`).
                 'gap-2 px-2.5 py-1 font-normal transition-none has-[>svg]:px-2.5', 'text-foreground data-[state=inactive]:text-foreground hover:bg-hover hover:text-foreground', 'data-[state=active]:bg-active data-[state=active]:font-medium', '[&_svg]:text-muted-foreground data-[state=active]:[&_svg]:text-foreground'), children: _jsxs(Link, { href: sectionHref(item.key), prefetch: true, children: [_jsx(SectionIcon, { className: "size-4 shrink-0" }), _jsx("span", { className: cn(!horizontal && 'truncate'), children: item.label })] }) }, item.key));
     };
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-1 flex-col", children: [_jsx("div", { className: "border-border/60 shrink-0 border-b px-5 py-3", children: header }), _jsxs("div", { className: cn('min-h-0 flex-1', isMobile ? 'flex flex-col overflow-hidden' : 'grid overflow-hidden'), style: isMobile ? undefined : { gridTemplateColumns: `${SETTINGS_SIDEBAR_WIDTH_PX}px 1fr` }, children: [isMobile ? (_jsx("nav", { "aria-label": tI18nComplete.raw('text7be318295927'), className: "border-border/60 flex h-auto shrink-0 items-center border-b", children: _jsx(FadedScrollArea, { orientation: "horizontal", fadeColor: "from-background", className: "min-w-0 flex-1 py-2", children: _jsx(Tabs, { value: section, className: "w-fit", children: _jsx(TabsList, { orientation: "horizontal", className: "w-fit", children: items.map((item) => trigger(item, true)) }) }) }) })) : (_jsx("aside", { className: "flex min-h-0 flex-col border-r bg-inherit", children: _jsx("nav", { "aria-label": tI18nComplete.raw('text7be318295927'), className: "flex min-h-0 flex-1 [scrollbar-width:none] flex-col gap-4 overflow-y-auto px-2 pt-3 pb-2 [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: _jsx(Tabs, { value: section, orientation: "vertical", className: "space-y-3", children: groups.map((g) => (_jsxs("div", { children: [showGroupLabels ? (_jsx("div", { className: "text-muted-foreground flex h-7 items-center px-2.5 text-xs font-medium", children: g.group })) : null, _jsx(TabsList, { orientation: "vertical", className: "w-full", children: g.items.map((item) => trigger(item, false)) })] }, g.group))) }) }) })), _jsx("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto", children: _jsx("div", { className: "mx-auto w-full max-w-2xl px-6 py-8 pb-24 lg:py-10", children: pane }) })] }), footer] }));
+    // PROTOTYPE: `?variant=` swaps the rail for one of the candidate navs.
+    const variant = useNavVariant();
+    const navProps = {
+        groups,
+        section,
+        href: (key) => sectionHref(key),
+        summaries,
+    };
+    if (!isMobile && variant !== 'rail') {
+        return (_jsxs("div", { className: "relative flex h-full min-h-0 flex-1 flex-col", children: [_jsx("div", { className: cn('shrink-0 px-5 py-3', variant === 'inline' && 'border-border/60 border-b'), children: header }), variant === 'tabs' ? _jsx(GroupedUnderlineTabs, { ...navProps }) : null, variant === 'groups' ? _jsx(GroupSwitchTabs, { ...navProps }) : null, _jsx("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto", children: variant === 'inline' ? (_jsx(InlineVerticalTabs, { ...navProps, children: pane })) : (_jsx("div", { className: "mx-auto w-full max-w-2xl px-4 py-10 pb-32 lg:py-14 lg:pb-32", children: pane })) }), footer, _jsx(PrototypeSwitcher, {})] }));
+    }
+    return (_jsxs("div", { className: "relative flex h-full min-h-0 flex-1 flex-col", children: [_jsx("div", { className: "border-border/60 shrink-0 border-b px-5 py-3", children: header }), _jsxs("div", { className: cn('min-h-0 flex-1', isMobile ? 'flex flex-col overflow-hidden' : 'grid overflow-hidden'), style: isMobile ? undefined : { gridTemplateColumns: `${SETTINGS_SIDEBAR_WIDTH_PX}px 1fr` }, children: [isMobile ? (_jsx("nav", { "aria-label": tI18nComplete.raw('text7be318295927'), className: "border-border/60 flex h-auto shrink-0 items-center border-b", children: _jsx(FadedScrollArea, { orientation: "horizontal", fadeColor: "from-background", className: "min-w-0 flex-1 py-2", children: _jsx(Tabs, { value: section, className: "w-fit", children: _jsx(TabsList, { orientation: "horizontal", className: "w-fit", children: items.map((item) => trigger(item, true)) }) }) }) })) : (_jsx("aside", { className: "flex min-h-0 flex-col border-r bg-inherit", children: _jsx("nav", { "aria-label": tI18nComplete.raw('text7be318295927'), className: "flex min-h-0 flex-1 [scrollbar-width:none] flex-col gap-4 overflow-y-auto px-2 pt-3 pb-2 [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: _jsx(Tabs, { value: section, orientation: "vertical", className: "space-y-3", children: groups.map((g) => (_jsxs("div", { children: [showGroupLabels ? (_jsx("div", { className: "text-muted-foreground flex h-7 items-center px-2.5 text-xs font-medium", children: g.group })) : null, _jsx(TabsList, { orientation: "vertical", className: "w-full", children: g.items.map((item) => trigger(item, false)) })] }, g.group))) }) }) })), _jsx("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto", children: _jsx("div", { className: "mx-auto w-full max-w-2xl px-4 py-10 pb-32 lg:py-14 lg:pb-32", children: pane }) })] }), footer, _jsx(PrototypeSwitcher, {})] }));
 }
 function CenteredState({ children }) {
     return (_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx("div", { className: "mx-auto w-full max-w-3xl px-6 py-16", children: children }) }));
@@ -236,7 +250,7 @@ function AgentActions({ projectId, agent, config, canWrite, }) {
             : null;
     const makeDefault = useDefaultAgent(projectId);
     const pathname = useUiPathname();
-    return (_jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx(AgentShareControl, { projectId: projectId, agentName: agent.name, peopleHref: `${pathname}?section=people` }), startBlocked ? (_jsx(Hint, { label: startBlocked, children: _jsx("span", { className: "inline-flex", children: _jsxs(Button, { size: "sm", disabled: true, children: [_jsx(PlayIcon, { weight: "fill", className: "size-3.5 shrink-0" }), tI18nComplete.raw('textb1c52ee3677d')] }) }) })) : (_jsxs(Button, { size: "sm", onClick: () => startSession({ create: { agent_name: agent.name } }), children: [_jsx(PlayIcon, { weight: "fill", className: "size-3.5 shrink-0" }), tI18nComplete.raw('textb1c52ee3677d')] })), canWrite ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": tI18nComplete.raw('textf8d46c2570e7'), children: _jsx(DotsThreeIcon, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { disabled: isDefault || agent.enabled === false || makeDefault.isPending, onSelect: () => makeDefault.mutate(agent.name), children: [_jsx(StarIcon, { className: "size-4" }), isDefault
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx(AgentShareControl, { projectId: projectId, agentName: agent.name, peopleHref: `${pathname}?section=people` }), startBlocked ? (_jsx(Hint, { label: startBlocked, children: _jsx("span", { className: "inline-flex", children: _jsxs(Button, { size: "sm", disabled: true, children: [_jsx(PlayIcon, { weight: "fill", className: "size-3.5 shrink-0" }), tI18nComplete.raw('textb1c52ee3677d')] }) }) })) : (_jsxs(Button, { size: "sm", onClick: () => startSession({ create: { agent_name: agent.name } }), children: [_jsx(PlayIcon, { weight: "fill", className: "size-3.5 shrink-0" }), tI18nComplete.raw('textb1c52ee3677d')] })), canWrite ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon-sm", "aria-label": tI18nComplete.raw('textf8d46c2570e7'), children: _jsx(DotsThreeIcon, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { disabled: isDefault || agent.enabled === false || makeDefault.isPending, onSelect: () => makeDefault.mutate(agent.name), children: [_jsx(StarIcon, { className: "size-4" }), isDefault
                                         ? tI18nComplete.raw('texte8cb80e5c5cb')
                                         : tI18nComplete.raw('texte8f43f910a4e')] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { disabled: configure.pending, onSelect: () => setConfirmEditSource(true), children: tI18nComplete.raw('text4930821dd07b') })] })] })) : null, _jsx(ConfirmDialog, { open: confirmEditSource, onOpenChange: setConfirmEditSource, title: tI18nComplete.raw('text24ba36a8ec86'), description: tI18nComplete('text13324ae62b23', { value0: agent.name }), confirmLabel: tI18nComplete.raw('text0bce1a892dec'), cancelLabel: tI18nComplete.raw('text19766ed6ccb2'), onConfirm: () => {
                     setConfirmEditSource(false);
@@ -247,7 +261,7 @@ function AgentActions({ projectId, agent, config, canWrite, }) {
 function AgentChips({ agent, config, size, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
     const { showMode, isDefault, disabled } = agentStatus(agent, config);
-    return (_jsxs("span", { className: "flex items-center gap-1.5", children: [showMode ? (_jsx(Badge, { variant: "outline", size: size, className: "text-muted-foreground font-medium", children: formatMode(agent.mode ?? '') })) : null, isDefault ? (_jsxs(Badge, { variant: "outline", size: size, className: "text-muted-foreground gap-1 font-medium", children: [_jsx(StarIcon, { weight: "fill", className: "text-kortix-orange size-3 shrink-0" }), tI18nComplete.raw('text21b111cbfe6e')] })) : null, disabled ? (_jsx(Badge, { variant: "muted", size: size, children: tI18nComplete.raw('text75081b593d15') })) : null] }));
+    return (_jsxs("span", { className: "flex items-center gap-1.5", children: [showMode ? (_jsx(Badge, { variant: "secondary", size: size, children: formatMode(agent.mode ?? '') })) : null, isDefault ? (_jsx(Badge, { variant: "secondary", size: size, children: tI18nComplete.raw('text21b111cbfe6e') })) : null, disabled ? (_jsx(Badge, { variant: "muted", size: size, children: tI18nComplete.raw('text75081b593d15') })) : null] }));
 }
 /**
  * Breadcrumb, avatar, name, chips, actions — the full header at the top of
@@ -256,7 +270,7 @@ function AgentChips({ agent, config, size, }) {
  */
 function AgentHeader({ projectId, agent, config, canWrite, children, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    return (_jsxs("header", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("nav", { "aria-label": tI18nComplete.raw('text2bd873d6c734'), className: "flex min-w-0 items-center gap-1.5 text-sm", children: [_jsx(Link, { href: capabilityTabHref(projectId, 'agent'), prefetch: true, className: "text-muted-foreground hover:text-foreground shrink-0 transition-colors", children: tI18nComplete.raw('text279b44d2ab4b') }), _jsx(CaretRightIcon, { "aria-hidden": true, className: "text-muted-foreground/50 size-3.5 shrink-0" }), _jsx("h1", { className: "text-foreground truncate text-sm font-semibold", children: isMetaAgentName(agent.name) ? META_AGENT_DISPLAY_NAME : capitalizeWords(agent.name) }), _jsx(AgentChips, { agent: agent, config: config, size: "xs" })] }), _jsx(AgentActions, { projectId: projectId, agent: agent, config: config, canWrite: canWrite })] }), children] }));
+    return (_jsxs("header", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("nav", { "aria-label": tI18nComplete.raw('text2bd873d6c734'), className: "flex min-w-0 items-center gap-1.5 text-sm", children: [_jsx(Link, { href: capabilityTabHref(projectId, 'agent'), prefetch: true, className: "text-muted-foreground hover:text-foreground shrink-0 transition-colors", children: tI18nComplete.raw('text279b44d2ab4b') }), _jsx(CaretRightIcon, { "aria-hidden": true, className: "text-muted-foreground size-3.5 shrink-0" }), _jsx("h1", { className: "text-foreground truncate text-sm font-semibold", children: isMetaAgentName(agent.name) ? META_AGENT_DISPLAY_NAME : capitalizeWords(agent.name) }), _jsx(AgentChips, { agent: agent, config: config, size: "xs" })] }), _jsx(AgentActions, { projectId: projectId, agent: agent, config: config, canWrite: canWrite })] }), children] }));
 }
 // ─── Editable body ─────────────────────────────────────────────────────────
 /** What a v1 project, or a reader without write, can still see. */
@@ -288,6 +302,22 @@ function EditableAgentPage({ projectId, agent, config, initial, schemaVersion, }
     const sections = useMemo(() => agentConfigSectionKeys(schemaVersion).filter((k) => drivesOn || k !== 'drives'), [schemaVersion, drivesOn]);
     const registryOptions = useMemo(() => registryGrantOptions({ manifest_raw: config.manifest_raw, agents: toArray(config.agents) }, agent.name), [config.manifest_raw, config.agents, agent.name]);
     const section = useAgentSection(sections);
+    // PROTOTYPE: the `inline` nav variant shows each topic's current value.
+    const summaries = useMemo(() => {
+        const d = editor.draft;
+        const grant = (v) => grantSummary(v, tI18nComplete).label;
+        return {
+            skills: grant(d.skills),
+            connectors: grant(d.connectors),
+            secrets: grant(d.secrets),
+            apps: grant(d.apps),
+            actions: grant(d.kortix_permissions ?? d.kortix_cli),
+            subagents: grant(d.subagents),
+            commands: grant(d.commands),
+            extensions: grant(d.extensions),
+            model: editor.oc.model ? (editor.oc.model.split('/').pop() ?? editor.oc.model) : 'Default',
+        };
+    }, [editor.draft, editor.oc.model, tI18nComplete]);
     const onSave = useCallback(async () => {
         if (!editor.isDirty || update.isPending)
             return;
@@ -305,7 +335,7 @@ function EditableAgentPage({ projectId, agent, config, initial, schemaVersion, }
     // shared across topics and nothing is lost.
     const leaveGuard = useUnsavedChangesGuard(editor.isDirty, pathname);
     useSaveShortcut(onSave);
-    return (_jsx(AgentPageFrame, { header: _jsx(AgentHeader, { projectId: projectId, agent: agent, config: config, canWrite: true }), section: section, sections: sections, sectionHref: sectionHrefFor(pathname), pane: _jsx(AgentConfigSections, { section: section, editor: editor, options: options, skillsOptions: skillsOptions, registryOptions: registryOptions, skills: _jsx(SkillsGrantPage, { projectId: projectId, config: config, editor: editor }), connectors: _jsx(ConnectorsGrantPage, { projectId: projectId, editor: editor }), secrets: _jsx(SecretsGrantPage, { projectId: projectId, editor: editor }), apps: _jsx(AppsGrantPage, { projectId: projectId, editor: editor }), drives: _jsx(AgentDrivesSection, { projectId: projectId, agentName: agent.name }), overview: _jsx(OverviewPane, { description: editor.oc.description ?? '', onDescriptionChange: (next) => editor.setOc('description', next), descriptionHelp: editor.oc.mode === 'subagent'
+    return (_jsx(AgentPageFrame, { header: _jsx(AgentHeader, { projectId: projectId, agent: agent, config: config, canWrite: true }), section: section, sections: sections, sectionHref: sectionHrefFor(pathname), summaries: summaries, pane: _jsx(AgentConfigSections, { section: section, editor: editor, options: options, skillsOptions: skillsOptions, registryOptions: registryOptions, skills: _jsx(SkillsGrantPage, { projectId: projectId, config: config, editor: editor }), connectors: _jsx(ConnectorsGrantPage, { projectId: projectId, editor: editor }), secrets: _jsx(SecretsGrantPage, { projectId: projectId, editor: editor }), apps: _jsx(AppsGrantPage, { projectId: projectId, editor: editor }), drives: _jsx(AgentDrivesSection, { projectId: projectId, agentName: agent.name }), overview: _jsx(OverviewPane, { description: editor.oc.description ?? '', onDescriptionChange: (next) => editor.setOc('description', next), descriptionHelp: editor.oc.mode === 'subagent'
                     ? 'Required. This is how other agents decide to call it.'
                     : 'One line on what this agent is for. Other agents read it when picking a subagent.', prompt: editor.oc.prompt ?? '', onPromptChange: (next) => editor.setOc('prompt', next) }), triggers: _jsx(AgentTriggersSection, { projectId: projectId, agentName: agent.name, defaultAgent: config.default_agent ?? config.open_code_default_agent }), people: _jsx(AgentPeopleSection, { projectId: projectId, agentName: agent.name }), authority: _jsx(AgentAuthorityCard, { projectId: projectId, agentName: agent.name, grant: editor.draft.kortix_permissions ?? editor.draft.kortix_cli }) }), footer: _jsxs(_Fragment, { children: [_jsx(SaveBar, { dirty: editor.isDirty, pending: update.isPending, onDiscard: () => setConfirmDiscard(true), onSave: onSave }), _jsx(ConfirmDialog, { open: confirmDiscard, onOpenChange: setConfirmDiscard, title: tI18nComplete.raw('text3b13192b9d88'), description: tI18nComplete('text8a36cce34f68', { value0: capitalizeWords(agent.name) }), confirmLabel: tI18nComplete.raw('texteb1a70e39274'), cancelLabel: tI18nComplete.raw('texte76fd2add010'), confirmVariant: "destructive", onConfirm: () => {
                         setConfirmDiscard(false);
@@ -317,34 +347,40 @@ function EditableAgentPage({ projectId, agent, config, initial, schemaVersion, }
 }
 /**
  * The Overview topic — what the agent IS: one line of description and the
- * instructions, which are the agent. Two cards, in the pane's card dialect.
+ * instructions. Laid out like a Settings pane: the pane title, then each
+ * field under its own section heading. A field is its own surface; no box
+ * wraps a heading and a field together.
  */
 function OverviewPane({ description, onDescriptionChange, descriptionHelp, prompt, onPromptChange, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("section", { className: "bg-popover rounded-md border", children: [_jsxs("div", { className: "border-border/60 border-b px-4 pt-4 pb-3", children: [_jsx("h3", { className: "text-foreground text-sm font-medium", children: tI18nComplete.raw('text526e0087cc3f') }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs leading-relaxed text-pretty", children: descriptionHelp })] }), _jsx("div", { className: "px-4 py-4", children: _jsx(Textarea, { "aria-label": tI18nComplete.raw('text526e0087cc3f'), value: description, placeholder: tI18nComplete.raw('text446f4eabf99f'), minHeight: 44, className: "text-sm", onChange: (e) => onDescriptionChange(e.target.value) }) })] }), _jsx(InstructionsPanel, { value: prompt, onChange: onPromptChange })] }));
+    const tEditor = useI18nTranslations('agentEditor');
+    return (_jsxs(_Fragment, { children: [_jsx(SettingsSectionHeader, { title: tEditor('overviewTitle'), className: "pb-1" }), _jsx(EditorSection, { title: tI18nComplete.raw('text526e0087cc3f'), description: descriptionHelp, bare: true, children: _jsx(Textarea, { "aria-label": tI18nComplete.raw('text526e0087cc3f'), value: description, placeholder: tI18nComplete.raw('text446f4eabf99f'), minHeight: 44, className: "text-sm", onChange: (e) => onDescriptionChange(e.target.value) }) }), _jsx(InstructionsSection, { value: prompt, onChange: onPromptChange })] }));
 }
 /**
  * The instructions — the agent's system prompt, and the thing that most IS
  * the agent. Two views of one field: Edit is the textarea, Preview renders
  * the markdown the way the agent's source file reads. It opens on Preview
  * when there is something to read and on Edit when there is not; the toggle
- * is a segmented pair at the section's right edge, the same control the list
- * pages use for their filters.
+ * is the segmented `TabsList` at the section heading's right edge.
  */
-function InstructionsPanel({ value, onChange, }) {
+function InstructionsSection({ value, onChange, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
     const [view, setView] = useState(value.trim() ? 'preview' : 'edit');
-    return (_jsxs("section", { className: "bg-popover rounded-md border", children: [_jsxs("div", { className: "border-border/60 flex items-end justify-between gap-3 border-b px-4 pt-4 pb-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h3", { className: "text-foreground text-sm font-medium", children: tI18nComplete.raw('text934652dce41d') }), _jsx("p", { className: "text-muted-foreground text-xs leading-relaxed text-pretty", children: tI18nComplete.raw('text5fe8921b712c') })] }), _jsx(Tabs, { value: view, onValueChange: (next) => setView(next), children: _jsxs(TabsList, { "aria-label": tI18nComplete.raw('texte75bb2d0d554'), children: [_jsx(TabsTrigger, { value: "edit", children: tI18nComplete.raw('text464c4ffd019e') }), _jsx(TabsTrigger, { value: "preview", children: tI18nComplete.raw('text324b134f57c7') })] }) })] }), view === 'edit' ? (_jsx("div", { className: "p-2", children: _jsx(Textarea, { "aria-label": tI18nComplete.raw('text934652dce41d'), value: value, placeholder: tI18nComplete.raw('text1436469ad07f'), minHeight: 420, autoFocus: value.trim().length > 0, className: "border-0 font-mono text-xs leading-relaxed focus-visible:ring-0", onChange: (e) => onChange(e.target.value) }) })) : (_jsx("div", { className: "min-h-[420px] px-5 py-4", children: _jsx(MarkdownWithFrontmatter, { content: value }) }))] }));
+    return (_jsx(EditorSection, { title: tI18nComplete.raw('text934652dce41d'), description: tI18nComplete.raw('text5fe8921b712c'), trailing: _jsx(Tabs, { value: view, onValueChange: (next) => setView(next), children: _jsxs(TabsList, { "aria-label": tI18nComplete.raw('texte75bb2d0d554'), children: [_jsx(TabsTrigger, { value: "edit", children: tI18nComplete.raw('text464c4ffd019e') }), _jsx(TabsTrigger, { value: "preview", children: tI18nComplete.raw('text324b134f57c7') })] }) }), bare: true, children: view === 'edit' ? (_jsx(Textarea, { "aria-label": tI18nComplete.raw('text934652dce41d'), value: value, placeholder: tI18nComplete.raw('text1436469ad07f'), minHeight: 420, autoFocus: value.trim().length > 0, className: "font-mono text-xs leading-relaxed", onChange: (e) => onChange(e.target.value) })) : (_jsx("div", { className: "bg-popover min-h-[420px] rounded-md border px-5 py-4", children: _jsx(MarkdownWithFrontmatter, { content: value }) })) }));
 }
 /**
  * The save bar. Exists only while there is something to save — an always-on
- * disabled pair of buttons is chrome that never earns its row. It sits across
- * the foot of the page, outside both scrollers, so it is reachable from any
- * point in a long instruction set and from anywhere in the pane.
+ * disabled pair of buttons is chrome that never earns its row. It floats at
+ * the bottom centre of the page in the Drive selection bar's shape
+ * (`project-files/components/drive-selection-bar.tsx`): a `bg-popover` card
+ * as wide as its content — the state as a title over one muted line, then
+ * Discard and Save as a spaced pair (a confirm is never glued to its cancel).
+ * It sits outside both scrollers, so it is reachable
+ * from any point in a long instruction set.
  */
 function SaveBar({ dirty, pending, onDiscard, onSave, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    return (_jsx(AnimatePresence, { initial: false, children: dirty ? (_jsx(m.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 8 }, transition: { type: 'spring', duration: 0.3, bounce: 0 }, className: "bg-background/95 border-border/60 z-10 shrink-0 border-t shadow-sm backdrop-blur", children: _jsxs("div", { className: "flex w-full items-center justify-between gap-3 px-6 py-3 lg:px-10", children: [_jsxs("p", { className: "text-muted-foreground min-w-0 truncate text-xs", children: [_jsx("span", { className: "text-foreground font-medium", children: tI18nComplete.raw('textefa5855ff509') }), ' ', tI18nComplete.raw('textc8134fda3694')] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx(Button, { variant: "outline-ghost", size: "sm", onClick: onDiscard, disabled: pending, children: tI18nComplete.raw('texteb1a70e39274') }), _jsxs(Button, { size: "sm", onClick: onSave, disabled: pending, children: [pending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, tI18nComplete.raw('text1509f561f241'), _jsx(Kbd, { className: "ml-1", children: tI18nComplete.raw('text8cd003e6301b') })] })] })] }) }, "save-bar")) : null }));
+    return (_jsx(AnimatePresence, { initial: false, children: dirty ? (_jsx(m.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 8 }, transition: { type: 'spring', duration: 0.3, bounce: 0 }, className: "pointer-events-none absolute inset-x-0 bottom-4 z-30 flex justify-center px-4", children: _jsxs("div", { className: "bg-popover text-popover-foreground border-border pointer-events-auto flex max-w-full items-center gap-3 rounded-lg border p-2 pl-3.5 shadow-md", children: [_jsxs("div", { className: "min-w-0", "aria-live": "polite", children: [_jsx("p", { className: "text-foreground truncate text-sm font-medium", children: tI18nComplete.raw('textefa5855ff509') }), _jsx("p", { className: "text-muted-foreground truncate text-xs", children: tI18nComplete.raw('textc8134fda3694') })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx(Button, { variant: "secondary", size: "sm", onClick: onDiscard, disabled: pending, children: tI18nComplete.raw('texteb1a70e39274') }), _jsxs(Button, { variant: "secondary", size: "sm", className: "gap-1.5", onClick: onSave, disabled: pending, children: [pending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, tI18nComplete.raw('text1509f561f241'), _jsx(Kbd, { children: tI18nComplete.raw('text8cd003e6301b') })] })] })] }) }, "save-bar")) : null }));
 }
 /**
  * Mod+S saves. The page is a document you edit, and every editor a person
@@ -444,10 +480,10 @@ function ReadOnlyAgentPage({ projectId, agent, config, canWrite, showUpgradeHint
     });
     const pathname = useUiPathname();
     const section = useAgentSection(isPlatform ? PLATFORM_SECTIONS : READ_ONLY_SECTIONS);
-    const source = (_jsxs("section", { className: "bg-popover rounded-md border", children: [_jsxs("div", { className: "border-border/60 border-b px-4 pt-4 pb-3", children: [_jsx("h3", { className: "text-foreground text-sm font-medium", children: tI18nComplete.raw('text934652dce41d') }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: _jsx("span", { className: "font-mono", children: sourcePath }) })] }), _jsx(EntityFilePane, { path: sourcePath, content: fileQuery.data?.content, isLoading: fileQuery.isLoading, isError: fileQuery.isError, error: fileQuery.error, onRetry: () => {
+    const source = (_jsx(EditorSection, { title: tI18nComplete.raw('text934652dce41d'), description: _jsx("span", { className: "font-mono", children: sourcePath }), lead: true, bare: true, children: _jsx("div", { className: "bg-popover overflow-hidden rounded-md border", children: _jsx(EntityFilePane, { path: sourcePath, content: fileQuery.data?.content, isLoading: fileQuery.isLoading, isError: fileQuery.isError, error: fileQuery.error, onRetry: () => {
                     void fileQuery.refetch();
-                }, skeletonRows: 4, errorTitle: tI18nComplete.raw('text2f2f540650bf') })] }));
-    return (_jsx(AgentPageFrame, { header: _jsx(AgentHeader, { projectId: projectId, agent: agent, config: config, canWrite: canWrite && !isPlatform, children: agent.description ? (_jsx("p", { className: "text-muted-foreground max-w-2xl text-sm text-pretty", children: agent.description })) : null }), section: section, sections: isPlatform ? PLATFORM_SECTIONS : READ_ONLY_SECTIONS, sectionHref: sectionHrefFor(pathname), pane: _jsx(EditorSectionStyleProvider, { value: "panel", children: _jsxs("div", { className: "space-y-4", children: [isPlatform ? (_jsx(InfoBanner, { tone: "info", title: tI18nComplete.raw('text85b7a59cdbd5'), children: tI18nComplete.raw('textd9c0c74b514b') })) : showUpgradeHint ? (_jsx(InfoBanner, { tone: "info", title: tI18nComplete.raw('textdc7ab144ca89'), children: tUpgrades.rich('agentEditorHint', {
+                }, skeletonRows: 4, errorTitle: tI18nComplete.raw('text2f2f540650bf') }) }) }));
+    return (_jsx(AgentPageFrame, { header: _jsx(AgentHeader, { projectId: projectId, agent: agent, config: config, canWrite: canWrite && !isPlatform, children: agent.description ? (_jsx("p", { className: "text-muted-foreground max-w-2xl text-sm text-pretty", children: agent.description })) : null }), section: section, sections: isPlatform ? PLATFORM_SECTIONS : READ_ONLY_SECTIONS, sectionHref: sectionHrefFor(pathname), pane: _jsx(EditorSectionStyleProvider, { value: "panel", children: _jsxs("div", { className: "space-y-8", children: [isPlatform ? (_jsx(InfoBanner, { tone: "info", title: tI18nComplete.raw('text85b7a59cdbd5'), children: tI18nComplete.raw('textd9c0c74b514b') })) : showUpgradeHint ? (_jsx(InfoBanner, { tone: "info", title: tI18nComplete.raw('textdc7ab144ca89'), children: tUpgrades.rich('agentEditorHint', {
                             code: (chunks) => _jsx("span", { className: "font-mono", children: chunks }),
-                        }) })) : null, isPlatform ? null : section === 'overview' ? (_jsxs(_Fragment, { children: [source, _jsx(AgentScope, { projectId: projectId, agentName: agent.name, scope: agent.scope })] })) : section === 'people' ? (_jsx(AgentPeopleSection, { projectId: projectId, agentName: agent.name })) : section === 'triggers' ? (_jsx(AgentTriggersSection, { projectId: projectId, agentName: agent.name, defaultAgent: config.default_agent ?? config.open_code_default_agent })) : section === 'actions' ? (_jsx(AgentAuthorityCard, { projectId: projectId, agentName: agent.name, grant: agent.scope?.kortix_permissions ?? agent.scope?.kortix_cli })) : (_jsxs("div", { className: "space-y-4", children: [_jsx(AgentModel, { projectId: projectId, agentName: agent.name }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tI18nComplete.raw('text9dee2a1acfd9') })] }))] }) }) }));
+                        }) })) : null, isPlatform ? null : section === 'overview' ? (_jsxs(_Fragment, { children: [source, _jsx(AgentScope, { projectId: projectId, agentName: agent.name, scope: agent.scope })] })) : section === 'people' ? (_jsx(AgentPeopleSection, { projectId: projectId, agentName: agent.name })) : section === 'triggers' ? (_jsx(AgentTriggersSection, { projectId: projectId, agentName: agent.name, defaultAgent: config.default_agent ?? config.open_code_default_agent })) : section === 'actions' ? (_jsx(AgentAuthorityCard, { projectId: projectId, agentName: agent.name, grant: agent.scope?.kortix_permissions ?? agent.scope?.kortix_cli })) : (_jsxs("div", { className: "space-y-3", children: [_jsx(AgentModel, { projectId: projectId, agentName: agent.name }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tI18nComplete.raw('text9dee2a1acfd9') })] }))] }) }) }));
 }

package/dist/customize/agents/agent-people-section.js

@@ -37,7 +37,8 @@ import { EntityAvatar } from '../../primitives/entity-avatar.js';
 import { Skeleton } from '../../primitives/skeleton.js';
 import { errorToast, successToast } from '../../primitives/toast.js';
 import { UserAvatar } from '../../primitives/user-avatar.js';
-import { EditorSection } from '../sections/view/agent-editor-primitives.js';
+import { EmptyState } from '../../primitives/empty-state.js';
+import { EditorList, EditorSection } from '../sections/view/agent-editor-primitives.js';
 import { AccessDialog, } from '../../access/access/access-dialog.js';
 import { builtinRole, customRole, ROLE_NONE } from '../../access/access/role-select.js';
 import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
@@ -133,20 +134,20 @@ export function AgentPeopleSection({ projectId, agentName, }) {
         });
         setEditOpen(true);
     };
-    return (_jsxs(EditorSection, { title: tI18nComplete.raw('text82d9af69e1a1'), description: tI18nComplete.raw('text96feb5be077d'), children: [_jsxs("div", { className: "space-y-3 py-3.5", children: [grantsQuery.isLoading ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-11 w-full rounded-md" }), _jsx(Skeleton, { className: "h-11 w-full rounded-md" })] })) : assigned.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tI18nComplete.raw('text011c4e48df01') })) : (_jsx("ul", { className: "space-y-2", children: assigned.map((g) => {
-                            const member = g.principal_type === 'member'
-                                ? accessQuery.data?.members.find((m) => m.user_id === g.principal_id)
-                                : undefined;
-                            return (_jsxs("li", { className: "group bg-popover flex items-center gap-3 rounded-md border px-3 py-2", children: [g.principal_type === 'group' ? (_jsx(EntityAvatar, { icon: UsersIcon, size: "md" })) : g.principal_type === 'project' ? (_jsx(EntityAvatar, { icon: UsersThreeIcon, size: "md" })) : (_jsx(UserAvatar, { email: member?.email ?? g.principal_label, size: "md" })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate text-sm font-medium", children: g.principal_type === 'project'
-                                                    ? tSharing('everyone', { project: g.principal_label })
-                                                    : g.principal_label }), _jsxs("span", { className: "text-muted-foreground block truncate text-xs", children: [g.principal_type === 'project'
-                                                        ? tSharing('everyoneMeta')
-                                                        : g.principal_type === 'group'
-                                                            ? tSharing('groupMeta')
-                                                            : tSharing('memberMeta'), g.expires_at
-                                                        ? tI18nComplete('textdc40ace03968', {
-                                                            value0: new Date(g.expires_at).toLocaleDateString(),
-                                                        })
-                                                        : '', g.orphaned ? tI18nComplete.raw('textc795f93da2e5') : ''] })] }), g.principal_type === 'project' ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setStopSharing(g), children: tSharing('removeEveryone') })) : (_jsxs(Button, { variant: "ghost", size: "sm", className: "gap-1.5", onClick: () => openEdit(g), disabled: !accountId, children: [_jsx(PencilSimpleIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text464c4ffd019e')] }))] }, g.grant_id));
-                        }) })), accountId ? (_jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: () => setGrantOpen(true), children: [_jsx(PlusIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text8693768c7e08')] })) : null] }), accountId ? (_jsx(AccessDialog, { open: grantOpen, onOpenChange: setGrantOpen, accountId: accountId, scope: { kind: 'project', projectId, projectName }, mode: { kind: 'grant' }, initialAgentIds: [agentName] })) : null, accountId && editTarget ? (_jsx(AccessDialog, { open: editOpen, onOpenChange: setEditOpen, accountId: accountId, scope: { kind: 'project', projectId, projectName }, mode: { kind: 'edit', principal: editTarget.principal, current: editTarget.current }, inheritedFrom: editTarget.inheritedFrom }, `${editTarget.principal.type}:${editTarget.principal.id}`)) : null, _jsx(ConfirmDialog, { open: stopSharing !== null, onOpenChange: (open) => !open && setStopSharing(null), title: tSharing('removeEveryoneTitle', { agent: agentName }), description: tSharing('removeEveryoneDescription', { agent: agentName }), confirmLabel: tSharing('removeEveryone'), confirmVariant: "destructive", isPending: stopSharingMutation.isPending, onConfirm: () => stopSharing && stopSharingMutation.mutate(stopSharing.grant_id) })] }));
+    return (_jsxs(EditorSection, { title: tI18nComplete.raw('text82d9af69e1a1'), description: tI18nComplete.raw('text96feb5be077d'), trailing: accountId ? (_jsxs(Button, { variant: "secondary", size: "sm", className: "gap-1.5", onClick: () => setGrantOpen(true), children: [_jsx(PlusIcon, { className: "size-4" }), tI18nComplete.raw('text8693768c7e08')] })) : undefined, lead: true, bare: true, children: [_jsx("div", { children: grantsQuery.isLoading ? (_jsx(EditorList, { children: [0, 1].map((i) => (_jsxs("li", { className: "flex items-center gap-3 px-4 py-2.5", children: [_jsx(Skeleton, { className: "size-8 rounded-md" }), _jsx(Skeleton, { className: "h-4 w-40 rounded-sm" })] }, i))) })) : assigned.length === 0 ? (_jsx(EmptyState, { size: "sm", title: tI18nComplete.raw('text011c4e48df01') })) : (_jsx(EditorList, { children: assigned.map((g) => {
+                        const member = g.principal_type === 'member'
+                            ? accessQuery.data?.members.find((m) => m.user_id === g.principal_id)
+                            : undefined;
+                        return (_jsxs("li", { className: "flex items-center gap-3 px-4 py-2.5", children: [g.principal_type === 'group' ? (_jsx(EntityAvatar, { icon: UsersIcon, size: "md" })) : g.principal_type === 'project' ? (_jsx(EntityAvatar, { icon: UsersThreeIcon, size: "md" })) : (_jsx(UserAvatar, { email: member?.email ?? g.principal_label, size: "md" })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate text-sm font-medium", children: g.principal_type === 'project'
+                                                ? tSharing('everyone', { project: g.principal_label })
+                                                : g.principal_label }), _jsxs("span", { className: "text-muted-foreground block truncate text-xs", children: [g.principal_type === 'project'
+                                                    ? tSharing('everyoneMeta')
+                                                    : g.principal_type === 'group'
+                                                        ? tSharing('groupMeta')
+                                                        : tSharing('memberMeta'), g.expires_at
+                                                    ? tI18nComplete('textdc40ace03968', {
+                                                        value0: new Date(g.expires_at).toLocaleDateString(),
+                                                    })
+                                                    : '', g.orphaned ? tI18nComplete.raw('textc795f93da2e5') : ''] })] }), g.principal_type === 'project' ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setStopSharing(g), children: tSharing('removeEveryone') })) : (_jsxs(Button, { variant: "ghost", size: "sm", className: "gap-1.5", onClick: () => openEdit(g), disabled: !accountId, children: [_jsx(PencilSimpleIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text464c4ffd019e')] }))] }, g.grant_id));
+                    }) })) }), accountId ? (_jsx(AccessDialog, { open: grantOpen, onOpenChange: setGrantOpen, accountId: accountId, scope: { kind: 'project', projectId, projectName }, mode: { kind: 'grant' }, initialAgentIds: [agentName] })) : null, accountId && editTarget ? (_jsx(AccessDialog, { open: editOpen, onOpenChange: setEditOpen, accountId: accountId, scope: { kind: 'project', projectId, projectName }, mode: { kind: 'edit', principal: editTarget.principal, current: editTarget.current }, inheritedFrom: editTarget.inheritedFrom }, `${editTarget.principal.type}:${editTarget.principal.id}`)) : null, _jsx(ConfirmDialog, { open: stopSharing !== null, onOpenChange: (open) => !open && setStopSharing(null), title: tSharing('removeEveryoneTitle', { agent: agentName }), description: tSharing('removeEveryoneDescription', { agent: agentName }), confirmLabel: tSharing('removeEveryone'), confirmVariant: "destructive", isPending: stopSharingMutation.isPending, onConfirm: () => stopSharing && stopSharingMutation.mutate(stopSharing.grant_id) })] }));
 }

package/dist/customize/agents/agent-triggers-section.js

@@ -28,7 +28,8 @@ import { Badge } from '../../primitives/badge.js';
 import { Button } from '../../primitives/button.js';
 import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
 import { Skeleton } from '../../primitives/skeleton.js';
-import { EditorSection } from '../sections/view/agent-editor-primitives.js';
+import { EmptyState } from '../../primitives/empty-state.js';
+import { EditorList, EditorSection } from '../sections/view/agent-editor-primitives.js';
 import { useProjectFeatureFlags } from '../../internal/lib/use-project-feature-flags.js';
 import { cn } from '../../internal/lib/utils.js';
 import { listProjectTriggers } from '@kortix/sdk';
@@ -89,10 +90,10 @@ export function AgentTriggersSection({ projectId, agentName, defaultAgent, }) {
             setSelectedSlug(null);
         },
     });
-    return (_jsxs(EditorSection, { title: tI18nComplete.raw('texte62f2148a64d'), description: tI18nComplete.raw('text1a1e4d549e85'), children: [_jsxs("div", { className: "space-y-3 py-3.5", children: [triggersQuery.isLoading ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-11 w-full rounded-md" }), _jsx(Skeleton, { className: "h-11 w-full rounded-md" })] })) : mine.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tI18nComplete.raw('textb254c6e02e1a') })) : (_jsx("ul", { className: "space-y-2", children: mine.map((trigger) => {
-                            const KindIcon = KIND_ICON[trigger.type] ?? TimerIcon;
-                            return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => setSelectedSlug(trigger.slug), className: cn('group bg-popover flex w-full items-center gap-3 rounded-md border px-3 py-2 text-left', 'hover:border-border hover:bg-accent transition-[background-color,border-color]', 'focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none'), children: [_jsx("span", { className: cn('flex size-8 shrink-0 items-center justify-center rounded-sm', trigger.enabled ? 'bg-kortix-green/15' : 'bg-muted'), children: _jsx(KindIcon, { weight: "fill", className: cn('size-4', trigger.enabled ? 'text-kortix-green' : 'text-muted-foreground') }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate text-sm font-medium", children: triggerName(trigger) }), _jsx("span", { className: "text-muted-foreground block truncate text-xs", children: describeWhen(trigger) })] }), !trigger.enabled ? (_jsx(Badge, { variant: "muted", size: "xs", children: tI18nComplete.raw('texte159b06187d3') })) : null] }) }, trigger.slug));
-                        }) })), canCreate ? (_jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: () => setCreateOpen(true), children: [_jsx(PlusIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text58fd308928dd')] })) : null] }), canCreate ? (_jsx(TriggerComposer, { projectId: projectId, open: createOpen, onOpenChange: setCreateOpen, initialAgent: agentName, onCreated: (slug) => {
+    return (_jsxs(EditorSection, { title: tI18nComplete.raw('texte62f2148a64d'), description: tI18nComplete.raw('text1a1e4d549e85'), trailing: canCreate ? (_jsxs(Button, { variant: "secondary", size: "sm", className: "gap-1.5", onClick: () => setCreateOpen(true), children: [_jsx(PlusIcon, { className: "size-4" }), tI18nComplete.raw('text58fd308928dd')] })) : undefined, lead: true, bare: true, children: [_jsx("div", { children: triggersQuery.isLoading ? (_jsx(EditorList, { children: [0, 1].map((i) => (_jsxs("li", { className: "flex items-center gap-3 px-4 py-2.5", children: [_jsx(Skeleton, { className: "size-8 rounded-sm" }), _jsx(Skeleton, { className: "h-4 w-40 rounded-sm" })] }, i))) })) : mine.length === 0 ? (_jsx(EmptyState, { size: "sm", title: tI18nComplete.raw('textb254c6e02e1a') })) : (_jsx(EditorList, { children: mine.map((trigger) => {
+                        const KindIcon = KIND_ICON[trigger.type] ?? TimerIcon;
+                        return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => setSelectedSlug(trigger.slug), className: cn('hover:bg-hover flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors duration-fast', 'focus-visible:bg-hover focus-visible:outline-none'), children: [_jsx("span", { className: cn('flex size-8 shrink-0 items-center justify-center rounded-sm', trigger.enabled ? 'bg-kortix-green/15' : 'bg-muted'), children: _jsx(KindIcon, { weight: "fill", className: cn('size-4', trigger.enabled ? 'text-kortix-green' : 'text-muted-foreground') }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate text-sm font-medium", children: triggerName(trigger) }), _jsx("span", { className: "text-muted-foreground block truncate text-xs", children: describeWhen(trigger) })] }), !trigger.enabled ? (_jsx(Badge, { variant: "muted", size: "xs", children: tI18nComplete.raw('texte159b06187d3') })) : null] }) }, trigger.slug));
+                    }) })) }), canCreate ? (_jsx(TriggerComposer, { projectId: projectId, open: createOpen, onOpenChange: setCreateOpen, initialAgent: agentName, onCreated: (slug) => {
                     setCreateOpen(false);
                     void invalidate();
                     // The composer toasts the creation; straight into the new entry, as the Triggers tab does.

package/dist/customize/agents/agents-page.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { customizePath, uiRoutes } from '../../lib/routes.js';
 import { NewEntityMenu } from '../shared/new-entity-menu.js';
 import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
+import { agentAccess } from './agent-access.js';
 import { useMemo, useRef, useState } from 'react';
 import { Badge } from '../../primitives/badge.js';
 import { Button } from '../../primitives/button.js';
@@ -163,10 +164,26 @@ function CardCaret() {
 function AgentCardFacts({ agent, triggerCount, peopleCount, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
     const model = agent.model ? agent.model.split('/').pop() : null;
+    const accessLabel = accessLabelOf(agentAccess(agent.scope), tI18nComplete);
     const sep = (_jsx("span", { "aria-hidden": true, className: "text-muted-foreground", children: "\u00B7" }));
     return (_jsxs(_Fragment, { children: [_jsx("span", { className: cn('truncate', model && 'font-mono'), children: model ?? tI18nComplete.raw('text3840d9d29421') }), sep, _jsxs("span", { className: "tabular-nums", children: [triggerCount, " ", triggerCount === 1 ? 'trigger' : 'triggers'] }), peopleCount !== null ? (_jsxs(_Fragment, { children: [sep, _jsx("span", { className: "tabular-nums", children: peopleCount === 0
                             ? tI18nComplete.raw('textb6c70926c1aa')
-                            : `${peopleCount} ${peopleCount === 1 ? 'grant' : 'grants'}` })] })) : null] }));
+                            : `${peopleCount} ${peopleCount === 1 ? 'grant' : 'grants'}` })] })) : null, accessLabel ? _jsx("span", { className: "basis-full tabular-nums", children: accessLabel }) : null] }));
+}
+/** The access slot: what the configuration grants (KRTX-3025). */
+function accessLabelOf(access, t) {
+    if (!access)
+        return null;
+    if (access.kind === 'full')
+        return t.raw('textf19611c61ca5');
+    const LABELS = {
+        connectors: { all: 'textd83250185d41', count: 'text15589a542412' },
+        secrets: { all: 'text0b38e3daeb93', count: 'texte96d99ad9896' },
+        actions: { all: 'text70b8d7e10749', count: 'text2d3f4433505a' },
+    };
+    return access.parts
+        .map(({ kind, value }) => value === 'all' ? t.raw(LABELS[kind].all) : t(LABELS[kind].count, { count: value }))
+        .join(', ');
 }
 /**
  * Card badges — "also a subagent", the default-agent star, disabled.

package/dist/customize/connectors/add-mcp/add-mcp-server.js

@@ -25,8 +25,9 @@ export function mcpServerIdentity(rawUrl, takenSlugs) {
         labels.pop();
     const base = [...labels].reverse().find((label) => !GENERIC_LABELS.has(label)) ?? labels[labels.length - 1] ?? 'mcp';
     const root = normalizeConnectorConnectionSlug(base) || 'mcp';
+    const taken = new Set(takenSlugs);
     let slug = root;
-    for (let n = 2; takenSlugs.includes(slug); n++)
+    for (let n = 2; taken.has(slug); n++)
         slug = `${root}-${n}`;
     const name = root.charAt(0).toUpperCase() + root.slice(1);
     return { slug, name };
@@ -37,8 +38,9 @@ export function mcpServerIdentity(rawUrl, takenSlugs) {
  */
 export function mcpAppIdentity(appName, takenSlugs) {
     const root = normalizeConnectorConnectionSlug(appName) || 'mcp';
+    const taken = new Set(takenSlugs);
     let slug = root;
-    for (let n = 2; takenSlugs.includes(slug); n++)
+    for (let n = 2; taken.has(slug); n++)
         slug = `${root}-${n}`;
     return { slug, name: appName };
 }

package/dist/customize/connectors/catalog/catalog-entry.d.ts

@@ -46,6 +46,20 @@ export type CatalogEntry = (CatalogEntryFields & {
 });
 /** Native platform provider. Each member's paired machine is one of its accounts. */
 export declare function computersCatalogEntry(tI18nComplete: UiTranslator): CatalogEntry;
+/**
+ * The icon URL a Discover record's card loads.
+ *
+ * A share of the catalogue's records carry a `domain` and no `icon` — the
+ * upstream feed only holds a logo for entries it could scrape one for. The
+ * card for such a record used to fall straight to a generic globe glyph, which
+ * is exactly the "inconsistent or missing imagery" a connector catalogue
+ * should not show when the app's own favicon is one well-known URL away. The
+ * same favicon service the marketing connectors page and `FaviconAvatar`
+ * already use resolves it; where the domain is a pseudo-host (`*.local`, the
+ * apis.guru feed's placeholders) it answers the generic globe image, which
+ * reads the same as the glyph it replaced.
+ */
+export declare function discoverEntryIcon(connector: Pick<DiscoverConnector, 'icon' | 'domain'>): string | null;
 export declare function catalogEntryFromDiscover(connector: DiscoverConnector): CatalogEntry;
 export declare function catalogEntryFromEasyConnect(app: PipedreamApp & {
     provider?: 'composio' | 'pipedream';

package/dist/customize/connectors/catalog/catalog-entry.js

@@ -1,3 +1,4 @@
+import { faviconUrlForHostname } from '../../../lib/favicon.js';
 import { POPULAR_SECTION } from './connector-categories.js';
 /** Native platform provider. Each member's paired machine is one of its accounts. */
 export function computersCatalogEntry(tI18nComplete) {
@@ -12,6 +13,22 @@ export function computersCatalogEntry(tI18nComplete) {
         popularity: null,
     };
 }
+/**
+ * The icon URL a Discover record's card loads.
+ *
+ * A share of the catalogue's records carry a `domain` and no `icon` — the
+ * upstream feed only holds a logo for entries it could scrape one for. The
+ * card for such a record used to fall straight to a generic globe glyph, which
+ * is exactly the "inconsistent or missing imagery" a connector catalogue
+ * should not show when the app's own favicon is one well-known URL away. The
+ * same favicon service the marketing connectors page and `FaviconAvatar`
+ * already use resolves it; where the domain is a pseudo-host (`*.local`, the
+ * apis.guru feed's placeholders) it answers the generic globe image, which
+ * reads the same as the glyph it replaced.
+ */
+export function discoverEntryIcon(connector) {
+    return connector.icon ?? faviconUrlForHostname(connector.domain);
+}
 export function catalogEntryFromDiscover(connector) {
     return {
         source: 'discover',
@@ -20,7 +37,7 @@ export function catalogEntryFromDiscover(connector) {
         slug: connector.slug,
         name: connector.name,
         description: connector.description,
-        icon: connector.icon,
+        icon: discoverEntryIcon(connector),
         categories: connector.categories,
         popularity: connector.popularity,
     };

package/dist/customize/connectors/catalog/connector-browse.d.ts

@@ -10,6 +10,34 @@ export interface CatalogInstall {
     pendingKey: string | null;
     onInstall: (entry: CatalogEntry) => void;
 }
+/**
+ * A catalog favicon, or a neutral glyph tile when the record has none or its
+ * URL fails to load.
+ *
+ * A plain `<img>`, not `next/image`. These are third-party favicons on
+ * arbitrary hosts, so the loader was already bypassed with `unoptimized` — which
+ * left `fill` costing an absolutely-positioned child inside a `relative`
+ * wrapper, per card, for no optimisation in return. Native `loading="lazy"`
+ * defers every icon below the fold, which is most of them on a browse page.
+ *
+ * `width`/`height` are set so the box is reserved before the image arrives and
+ * the grid never reflows around a late favicon.
+ *
+ * The broken-image state is the fallback the null case already had: a logo
+ * URL that 404s used to render the browser's broken-image glyph inside the
+ * tile, which is worse than no imagery at all. `onError` swaps to the same
+ * glyph tile — the same fallback a record with no icon gets, so "missing" and
+ * "unavailable" look identical. Mirrors `ConnectorAppIcon`'s broken state.
+ *
+ * The latch is per URL (`failedUrl`, not a boolean): a URL that failed stays
+ * failed, while a swapped URL gets a fresh try without any call-site key —
+ * merge-search swaps a merged twin's icon to the managed logo as catalogue
+ * pages stream in.
+ */
+export declare function ConnectorIcon({ icon, computer, }: {
+    icon: string | null;
+    computer?: boolean;
+}): import("react").JSX.Element;
 /**
  * The catalogue body: one flat, paginated, searchable grid.
  *

package/dist/customize/connectors/catalog/connector-browse.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from '../../../i18n/index.js';
 import { GlobeIcon, MonitorIcon } from '@phosphor-icons/react';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { Badge } from '../../../primitives/badge.js';
 import { Button } from '../../../primitives/button.js';
 import Loading from '../../../primitives/loading.js';
@@ -43,7 +43,8 @@ function CatalogAffordance({ entry, connected, install, }) {
         disabled: !install.ready || install.pendingKey !== null, "data-testid": "catalog-add" }));
 }
 /**
- * A catalog favicon, or a neutral glyph tile when the record has none.
+ * A catalog favicon, or a neutral glyph tile when the record has none or its
+ * URL fails to load.
  *
  * A plain `<img>`, not `next/image`. These are third-party favicons on
  * arbitrary hosts, so the loader was already bypassed with `unoptimized` — which
@@ -53,12 +54,24 @@ function CatalogAffordance({ entry, connected, install, }) {
  *
  * `width`/`height` are set so the box is reserved before the image arrives and
  * the grid never reflows around a late favicon.
+ *
+ * The broken-image state is the fallback the null case already had: a logo
+ * URL that 404s used to render the browser's broken-image glyph inside the
+ * tile, which is worse than no imagery at all. `onError` swaps to the same
+ * glyph tile — the same fallback a record with no icon gets, so "missing" and
+ * "unavailable" look identical. Mirrors `ConnectorAppIcon`'s broken state.
+ *
+ * The latch is per URL (`failedUrl`, not a boolean): a URL that failed stays
+ * failed, while a swapped URL gets a fresh try without any call-site key —
+ * merge-search swaps a merged twin's icon to the managed logo as catalogue
+ * pages stream in.
  */
-function ConnectorIcon({ icon, computer = false }) {
-    if (!icon) {
+export function ConnectorIcon({ icon, computer = false, }) {
+    const [failedUrl, setFailedUrl] = useState(null);
+    if (!icon || failedUrl === icon) {
         return (_jsx("span", { className: "bg-card flex size-9 shrink-0 items-center justify-center rounded-sm", children: computer ? _jsx(MonitorIcon, { className: "size-5" }) : _jsx(GlobeIcon, { className: "size-5" }) }));
     }
-    return (_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-sm", children: _jsx("img", { src: icon, alt: "", width: 36, height: 36, loading: "lazy", decoding: "async", referrerPolicy: "no-referrer", className: "size-9 object-contain" }) }));
+    return (_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-sm", children: _jsx("img", { src: icon, alt: "", width: 36, height: 36, loading: "lazy", decoding: "async", referrerPolicy: "no-referrer", className: "size-9 object-contain", onError: () => setFailedUrl(icon) }) }));
 }
 /**
  * One catalogue card: icon and title on the bare page — no border, no

package/dist/customize/connectors/connector-routes.d.ts

@@ -18,7 +18,9 @@ export type AppRef = {
     slug: string;
 };
 export declare function connectorsHref(projectId: string, scope?: 'all' | 'connected' | 'channels'): string;
-/** `null` for the computer entry: a computer has no app page. */
+export declare function connectorSearchFromParams(search: Pick<URLSearchParams, 'get'> | null | undefined): string;
+/** Sets `?q=` to the trimmed query, or removes it when the query is empty. */
+export declare function withConnectorSearch(params: URLSearchParams, query: string): URLSearchParams;
 export declare function appRefFromEntry(entry: CatalogEntry): AppRef | null;
 export declare function appHref(projectId: string, app: AppRef): string;
 export declare function appRefFromLocation(appSegment: string, search: URLSearchParams | null): AppRef | null;

package/dist/customize/connectors/connector-routes.js

@@ -23,6 +23,24 @@ export function connectorsHref(projectId, scope) {
     return scope ? `${base(projectId)}?scope=${scope}` : base(projectId);
 }
 /** `null` for the computer entry: a computer has no app page. */
+/**
+ * The catalogue search, held in `?q=`. Opening a connector is a route change
+ * that unmounts the catalogue; a search kept only in state was gone on browser
+ * Back (KRTX-3018).
+ */
+const SEARCH_PARAM = 'q';
+export function connectorSearchFromParams(search) {
+    return search?.get(SEARCH_PARAM)?.trim() ?? '';
+}
+/** Sets `?q=` to the trimmed query, or removes it when the query is empty. */
+export function withConnectorSearch(params, query) {
+    const trimmed = query.trim();
+    if (trimmed)
+        params.set(SEARCH_PARAM, trimmed);
+    else
+        params.delete(SEARCH_PARAM);
+    return params;
+}
 export function appRefFromEntry(entry) {
     if (entry.source === 'discover') {
         return { source: 'discover', slug: entry.slug, id: entry.connector.id };