@kortix/ui 0.14.6 → 0.14.8

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

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AgentMark } from '../../internal/components/agent-mark.js';
 import { EntityFilePane } from '../shared/entity/entity-modal.js';
 import { agentStatus } from './agent-status.js';
 import { useDefaultAgent } from './use-default-agent.js';
@@ -86,7 +87,8 @@ 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';
@@ -184,7 +186,7 @@ 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] }));
+    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] }));
 }
 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 }) }));
@@ -237,7 +239,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);
@@ -248,7 +250,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
@@ -257,7 +259,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(AgentMark, { slug: agent.name }), _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. */
@@ -318,34 +320,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
@@ -445,10 +453,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

@@ -16,22 +16,22 @@ import { detectManifestVersion } from '../../internal/lib/manifest-version.js';
 import { toArray } from '../shared/utils.js';
 import { newConfigPrompt, useConfigureThread, } from '../use-configure-thread.js';
 import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
-import { Skeleton } from '../../primitives/skeleton.js';
 import { useProjectCan } from '../../internal/lib/use-project-can.js';
 import { cn } from '../../internal/lib/utils.js';
 import { getProjectDetail, listProjectResourceGrants, listProjectTriggers, updateProjectDefaultAgent, } from '@kortix/sdk';
 import { contract, qk, useProjectAccountId } from '@kortix/sdk/react';
 import { capitalizeWords, isMetaAgentName, META_AGENT_DISPLAY_NAME } from '../../_vendor/kortix-shared.js';
-import { CaretRightIcon, MagnifyingGlassIcon, RobotIcon, StarIcon as StarSolid, } from '@phosphor-icons/react';
+import { MagnifyingGlassIcon, RobotIcon } from '@phosphor-icons/react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { CapabilityPageShell } from '../shared/capability-page-shell.js';
 import { agentHref } from '../../internal/lib/capability-tab-routes.js';
 import { prefetchAgentConfig } from '../../internal/hooks/projects/use-agent-config.js';
-import { CatalogCard } from '../shared/catalog/catalog-card.js';
 import { catalogEmptyKind } from '../shared/catalog/catalog-empty.js';
 import { CatalogNoMatch } from '../shared/catalog/catalog-empty-state.js';
 import { CatalogGrid } from '../shared/catalog/catalog-grid.js';
-import { DENSE_GRID_CLASSNAME, DENSE_GRID_CONTAINER_CLASSNAME, } from '../shared/catalog/catalog-grid-tokens.js';
+import { GRID_CLASSNAME } from '../shared/catalog/catalog-grid-tokens.js';
+import { AgentMark } from '../../internal/components/agent-mark.js';
+import { AgentCoverCard } from './agent-cover-card.js';
 import { agentInMode, filterAgents } from './agent-filter.js';
 import { useSlashFocus } from '../../internal/hooks/index.js';
 /**
@@ -92,8 +92,8 @@ export function AgentsPage({ projectId }) {
         }
         return counts;
     }, [triggersQuery.data, config]);
-    // Who is granted each agent — the card's "N people" fact. Same key the
-    // agent page's People section reads, manager-gated like it.
+    // Who is granted each agent. Same key the agent page's People section
+    // reads, manager-gated like it.
     const grantsQuery = useQuery({
         queryKey: qk.project.resourceGrants(projectId),
         queryFn: () => listProjectResourceGrants(projectId),
@@ -110,6 +110,7 @@ export function AgentsPage({ projectId }) {
         }
         return counts;
     }, [grantsQuery.data]);
+    const facts = (agent) => (_jsx(AgentCardFacts, { agent: agent, triggerCount: triggerCounts.get(agent.name) ?? 0, grantCount: grantCounts.get(agent.name) ?? 0 }));
     const agents = useMemo(() => toArray(config?.agents), [config]);
     const filtered = useMemo(() => filterAgents(agents, { mode: null, query }), [agents, query]);
     const defaultAgent = config?.default_agent ?? config?.open_code_default_agent ?? null;
@@ -122,8 +123,6 @@ export function AgentsPage({ projectId }) {
         .filter((agent) => agentInMode(agent, 'primary'))
         .sort((a, b) => Number(b.name === defaultAgent) - Number(a.name === defaultAgent)), [filtered, defaultAgent]);
     const subagents = useMemo(() => filtered.filter((agent) => !agentInMode(agent, 'primary')), [filtered]);
-    const subagentTotal = agents.filter((agent) => !agentInMode(agent, 'primary')).length;
-    const primaryTotal = agents.length - subagentTotal;
     // `null` = render the grid. Otherwise which "nothing to show" copy applies:
     // genuinely zero agents vs. agents exist but this filter/search hid all of
     // them. Telling the user "No agents yet" in the second case is false and
@@ -133,69 +132,64 @@ export function AgentsPage({ projectId }) {
     // title beside it and can be terse; the empty state is the whole screen and
     // has to name what it creates. Both start the same configure thread, so they
     // cannot drift apart.
-    // `size="sm"` is `h-8` — the same height as the search input beside it in the
-    // header group. The Button default is `h-9`, which left the pair 4px
-    // mismatched on a row that is centred, so both edges were off.
-    const createButton = (label) => canWrite ? (_jsx(NewEntityMenu, { label: label, pending: configure.pending, onChat: () => configure.start(newConfigPrompt('agent')), manual: {
+    // The header button is `h-9`, the height of the `size="sm"` search input
+    // beside it. The empty state keeps `sm` to match its `sm` docs link.
+    const createButton = (label, size) => canWrite ? (_jsx(NewEntityMenu, { label: label, size: size, pending: configure.pending, onChat: () => configure.start(newConfigPrompt('agent')), manual: {
             description: tI18nComplete.raw('text5210c5acc2cd'),
             href: uiRoutes().files(projectId) ?? customizePath(projectId, 'repo'),
         } })) : null;
-    return (_jsxs(CapabilityPageShell, { title: tI18nComplete.raw('text279b44d2ab4b'), description: tI18nComplete.raw('text636453e23d69'), action: createButton('New'), search: _jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(InputGroupSearchInput, { ref: searchRef, placeholder: tI18nComplete.raw('text212fd04a1d20'), value: query, onChange: (event) => setQuery(event.target.value), variant: "popover", size: "sm" }), _jsx(InputGroupSearchClear, { onClick: () => setQuery('') })] }), filters: 
-        // The row holds its height while the manifest loads, so the grid
-        // below does not drop when the count and the selector land.
-        detailQuery.isLoading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-4 w-40 rounded-sm py-0" }), _jsx(Skeleton, { className: "h-8 w-44 rounded-md py-0" })] })) : config ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-muted-foreground text-xs", children: [primaryTotal, " ", primaryTotal === 1 ? 'agent' : 'agents', subagentTotal > 0
-                            ? ` · ${subagentTotal} ${subagentTotal === 1 ? 'subagent' : 'subagents'}`
-                            : null, ' ', tI18nComplete.raw('text582967534d0f'), ' ', _jsx("span", { className: "font-mono", children: tI18nComplete.raw('text1965f383021e') })] }), _jsx(DefaultAgentSelector, { projectId: projectId, config: config, canWrite: canWrite })] })) : undefined, children: [_jsx(CatalogGrid, { isLoading: detailQuery.isLoading, isError: detailQuery.isError, error: detailQuery.error, onRetry: () => detailQuery.refetch(), isEmpty: emptyKind !== null, empty: emptyKind === 'no-match' ? (_jsx(CatalogNoMatch, { query: query })) : (_jsx(EmptyState, { icon: RobotIcon, size: "sm", title: tI18nComplete.raw('text971b61f8cb4d'), description: tI18nComplete.raw('textc4e4294c6777'), action: createButton('Create an agent'), secondaryAction: _jsx(Button, { asChild: true, variant: "ghost", size: "sm", className: "gap-1.5", children: _jsx("a", { href: "https://opencode.ai/docs/agents/", target: "_blank", rel: "noopener noreferrer", children: tI18nComplete.raw('text7af023c43013') }) }) })), children: primaryAgents.map((agent) => (_jsx(CatalogCard, { href: agentHref(projectId, agent.name), onIntent: () => prefetchAgentConfig(queryClient, projectId, agent.name), title: agentTitle(agent.name), subtitle: _jsx("code", { className: "text-muted-foreground text-xs break-all", children: agent.name }), description: agent.description, badges: _jsx(AgentCardBadges, { agent: agent, isDefault: defaultAgent === agent.name }), meta: _jsx(AgentCardFacts, { agent: agent, triggerCount: triggerCounts.get(agent.name) ?? 0, peopleCount: canManageMembers ? (grantCounts.get(agent.name) ?? 0) : null }), trailing: _jsx(CardCaret, {}) }, agent.path))) }), !detailQuery.isLoading && !detailQuery.isError && subagents.length > 0 ? (_jsxs("section", { "aria-labelledby": "subagents-heading", className: cn('space-y-2', primaryAgents.length > 0 && 'mt-8'), children: [_jsxs("div", { children: [_jsxs("h2", { id: "subagents-heading", className: "text-foreground text-sm font-medium", children: [tI18nComplete.raw('agentsListSubagentsTitle'), ' ', _jsx("span", { className: "text-muted-foreground font-normal tabular-nums", children: subagents.length })] }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: tI18nComplete.raw('agentsListSubagentsHint') })] }), _jsx("div", { className: cn(DENSE_GRID_CONTAINER_CLASSNAME, '-mx-3'), children: _jsx("div", { className: DENSE_GRID_CLASSNAME, children: subagents.map((agent) => (_jsx(CatalogCard, { variant: "plain", href: agentHref(projectId, agent.name), onIntent: () => prefetchAgentConfig(queryClient, projectId, agent.name), title: agentTitle(agent.name), subtitle: _jsx("code", { className: "text-muted-foreground text-xs break-all", children: agent.name }), description: agent.description, badges: _jsx(AgentCardBadges, { agent: agent, isDefault: false }), meta: _jsx("span", { className: cn('truncate', agent.model && 'font-mono'), children: agent.model?.split('/').pop() ?? tI18nComplete.raw('text3840d9d29421') }), trailing: _jsx(CardCaret, {}) }, agent.path))) }) })] })) : null] }));
+    return (_jsxs(CapabilityPageShell, { title: tI18nComplete.raw('text279b44d2ab4b'), description: tI18nComplete.raw('text636453e23d69'), action: 
+        // The default-agent selector sits in the header beside New: it is a
+        // page-level setting, not a filter on the list.
+        _jsxs(_Fragment, { children: [config ? (_jsx(DefaultAgentSelector, { projectId: projectId, config: config, canWrite: canWrite })) : null, createButton('New')] }), search: _jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(InputGroupSearchInput, { ref: searchRef, placeholder: tI18nComplete.raw('text212fd04a1d20'), value: query, onChange: (event) => setQuery(event.target.value), variant: "popover", size: "sm" }), _jsx(InputGroupSearchClear, { onClick: () => setQuery('') })] }), children: [_jsx(CatalogGrid, { isLoading: detailQuery.isLoading, isError: detailQuery.isError, error: detailQuery.error, onRetry: () => detailQuery.refetch(), isEmpty: emptyKind !== null, empty: emptyKind === 'no-match' ? (_jsx(CatalogNoMatch, { query: query })) : (_jsx(EmptyState, { icon: RobotIcon, size: "sm", title: tI18nComplete.raw('text971b61f8cb4d'), description: tI18nComplete.raw('textc4e4294c6777'), action: createButton('Create an agent', 'sm'), secondaryAction: _jsx(Button, { asChild: true, variant: "ghost", size: "sm", className: "gap-1.5", children: _jsx("a", { href: "/docs/project/agents", target: "_blank", rel: "noopener noreferrer", children: tI18nComplete.raw('text7af023c43013') }) }) })), children: primaryAgents.map((agent) => (_jsx(AgentCoverCard, { slug: agent.name, href: agentHref(projectId, agent.name), onIntent: () => prefetchAgentConfig(queryClient, projectId, agent.name), title: agentTitle(agent.name), description: agent.description, badges: _jsx(AgentCardBadges, { agent: agent }), coverLabel: defaultAgent === agent.name ? tI18nComplete.raw('text21b111cbfe6e') : undefined, meta: facts(agent) }, agent.path))) }), !detailQuery.isLoading && !detailQuery.isError && subagents.length > 0 ? (_jsxs("section", { "aria-labelledby": "subagents-heading", className: cn('space-y-2', primaryAgents.length > 0 && 'mt-8'), children: [_jsxs("div", { children: [_jsxs("h2", { id: "subagents-heading", className: "text-foreground text-sm font-medium", children: [tI18nComplete.raw('agentsListSubagentsTitle'), ' ', _jsx("span", { className: "text-muted-foreground font-normal tabular-nums", children: subagents.length })] }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: tI18nComplete.raw('agentsListSubagentsHint') })] }), _jsx("div", { className: GRID_CLASSNAME, children: subagents.map((agent) => (_jsx(AgentCoverCard, { slug: agent.name, href: agentHref(projectId, agent.name), onIntent: () => prefetchAgentConfig(queryClient, projectId, agent.name), title: agentTitle(agent.name), description: agent.description, badges: _jsx(AgentCardBadges, { agent: agent }), meta: facts(agent) }, agent.path))) })] })) : null] }));
 }
 function agentTitle(name) {
     return isMetaAgentName(name) ? META_AGENT_DISPLAY_NAME : capitalizeWords(name);
 }
-function CardCaret() {
-    return (_jsx(CaretRightIcon, { "aria-hidden": true, className: "text-muted-foreground group-hover:text-foreground mt-0.5 size-4 transition-colors" }));
-}
 /**
- * The card's facts line: what the agent runs on, what starts it, and who may
- * use it — the three things a person configuring access wants to know before
- * opening the page. Model falls back to the project default rather than
- * printing nothing; triggers and people print their count, including zero,
- * so every card has the same three slots and the eye can compare down a
- * column. People is omitted for a reader who cannot see grants.
+ * The access fact (KRTX-3025): "Full access", or the connectors an agent can
+ * reach. Nothing for an agent without connectors — the card does not list what
+ * an agent lacks.
  */
-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, 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(', ');
+    const connectors = access.parts.find((part) => part.kind === 'connectors')?.value ?? 0;
+    if (connectors === 'all')
+        return t.raw('textd83250185d41');
+    return connectors > 0 ? t('text15589a542412', { count: connectors }) : null;
+}
+/**
+ * The card's facts line, joined by `•`: access, the agent's own model,
+ * triggers, grants. A fact with nothing to say is left out — no "0 triggers",
+ * no "Default model" — so an empty slot never reads as information.
+ */
+function AgentCardFacts({ agent, triggerCount, grantCount, }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const facts = [
+        accessLabelOf(agentAccess(agent.scope), tI18nComplete),
+        agent.model ? agent.model.split('/').pop() : null,
+        triggerCount > 0 ? `${triggerCount} ${triggerCount === 1 ? 'trigger' : 'triggers'}` : null,
+        grantCount > 0 ? `${grantCount} ${grantCount === 1 ? 'grant' : 'grants'}` : null,
+    ].filter((fact) => Boolean(fact));
+    if (facts.length === 0)
+        return null;
+    return (_jsx("span", { className: "truncate tabular-nums", children: facts.map((fact, index) => (_jsxs("span", { children: [index > 0 ? (_jsx("span", { "aria-hidden": true, className: "px-1.5", children: "\u2022" })) : null, fact] }, fact))) }));
 }
 /**
- * Card badges — "also a subagent", the default-agent star, disabled.
+ * Card badges — "also a subagent", disabled. The default agent is marked on
+ * the cover instead.
  *
  * The section already says primary or subagent, so a mode chip only marks the
  * both-ways `all` agent: it sits with the primaries but other agents call it
  * too.
  */
-function AgentCardBadges({ agent, isDefault }) {
+function AgentCardBadges({ agent }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
     const mode = agent.mode?.toLowerCase();
-    return (_jsxs(_Fragment, { children: [mode === 'all' ? (_jsx(Badge, { variant: "muted", size: "xs", children: tI18nComplete.raw('agentsListAlsoSubagent') })) : null, isDefault ? (_jsx(StarSolid, { weight: "fill", "aria-label": tI18nComplete.raw('text94da52ecd6c5'), className: "text-kortix-orange size-3.5 shrink-0" })) : null, agent.enabled === false ? (_jsx(Badge, { variant: "muted", size: "xs", children: tI18nComplete.raw('text75081b593d15') })) : null] }));
+    return (_jsxs(_Fragment, { children: [mode === 'all' ? (_jsx(Badge, { variant: "muted", size: "xs", children: tI18nComplete.raw('agentsListAlsoSubagent') })) : null, agent.enabled === false ? (_jsx(Badge, { variant: "muted", size: "xs", children: tI18nComplete.raw('text75081b593d15') })) : null] }));
 }
 /**
  * Which agent a new chat in this project starts with. Rides the filter row
@@ -227,5 +221,5 @@ function DefaultAgentSelector({ projectId, config, canWrite, }) {
     });
     if (!declaresDefaultAgent || availableAgents.length === 0 || !current)
         return null;
-    return (_jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground hidden text-xs sm:block", children: tI18nComplete.raw('text21b111cbfe6e') }), mutation.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, _jsxs(Select, { value: current, onValueChange: (agentName) => mutation.mutate(agentName), disabled: !canWrite || mutation.isPending, children: [_jsx(SelectTrigger, { "aria-label": tI18nComplete.raw('text94da52ecd6c5'), className: "w-44 shrink-0", size: "sm", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { align: "end", children: availableAgents.map((agent) => (_jsx(SelectItem, { value: agent.name, children: isMetaAgentName(agent.name) ? META_AGENT_DISPLAY_NAME : capitalizeWords(agent.name) }, agent.name))) })] })] }));
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [mutation.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, _jsxs(Select, { value: current, onValueChange: (agentName) => mutation.mutate(agentName), disabled: !canWrite || mutation.isPending, children: [_jsx(SelectTrigger, { "aria-label": tI18nComplete.raw('text94da52ecd6c5'), className: "h-9 w-44 shrink-0", size: "sm", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { align: "end", children: availableAgents.map((agent) => (_jsx(SelectItem, { value: agent.name, children: _jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(AgentMark, { slug: agent.name }), _jsx("span", { className: "truncate", children: agentTitle(agent.name) })] }) }, agent.name))) })] })] }));
 }

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