@kortix/ui 0.14.12 → 0.14.14

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

@@ -0,0 +1,199 @@
+/**
+ * The agent page's address: four tabs, and a view inside Access and Runtime.
+ * The page draws them as ONE rail (2026-10-28): Overview, Triggers, then the
+ * Access views and the Runtime views under their group labels. The address
+ * keeps its two levels, so every link still resolves.
+ *
+ *   ?tab=overview | access | runtime | triggers
+ *   ?tab=access&view=connectors | secrets | skills | tools | extensions | drives | apps | permissions | …
+ *   ?tab=runtime&view=model | workspace
+ *
+ * The page used to be a rail of seventeen `?section=<key>` topics, then six
+ * tabs. Tools moved from Runtime to Access (2026-10-27): `?tab=runtime&view=tools`
+ * opens Access. Every old link still resolves: `resolveAgentLocation` maps
+ * `?section=` onto a tab and a view (Basics became the Overview's
+ * Availability panel). Instructions and People are no tabs any more: the
+ * instructions are edited on the Overview, and People is the header's Share
+ * dialog. Their old links open the Overview with the instructions in focus or
+ * the Share dialog open (`open`).
+ */
+export const AGENT_TABS = ['overview', 'access', 'runtime', 'triggers'];
+/** Access views, in the order of an `agents.<name>` block in kortix.yaml. */
+export const ACCESS_VIEWS = [
+    'tools',
+    'skills',
+    'subagents',
+    'commands',
+    'extensions',
+    'connectors',
+    'secrets',
+    'apps',
+    'actions',
+    // Last: the one row that is not an `agents.<name>` key (Files folder grants).
+    'drives',
+];
+export const RUNTIME_VIEWS = ['model', 'workspace'];
+/** The URL word for a view. `actions` reads as `permissions` in a link. */
+export function viewParam(view) {
+    return view === 'actions' ? 'permissions' : view;
+}
+function viewFromParam(value) {
+    if (!value)
+        return null;
+    if (value === 'permissions')
+        return 'actions';
+    return value;
+}
+/** Which tab owns a legacy `?section=` key. */
+function tabOfSection(section) {
+    if (ACCESS_VIEWS.includes(section))
+        return 'access';
+    if (RUNTIME_VIEWS.includes(section))
+        return 'runtime';
+    if (section === 'basics' || section === 'instructions' || section === 'people')
+        return 'overview';
+    return section;
+}
+const RETIRED_TABS = { instructions: 'instructions', people: 'share' };
+/**
+ * The tab and view a URL names, limited to what this agent has (`tabs`, and
+ * `views` for Access and Runtime). An unknown or unavailable value falls back
+ * to the first entry, never to a blank page.
+ */
+export function resolveAgentLocation(params, tabs, views) {
+    const retired = RETIRED_TABS[params.tab ?? ''] ?? (params.tab ? undefined : RETIRED_TABS[params.section ?? '']);
+    if (retired)
+        return { tab: 'overview', view: null, open: retired };
+    let tab = params.tab ?? null;
+    let view = viewFromParam(params.view);
+    const legacy = viewFromParam(params.section);
+    if (!tab && legacy) {
+        tab = tabOfSection(legacy);
+        view = tab === 'access' || tab === 'runtime' ? legacy : null;
+    }
+    // A view that moved tabs (Tools: Runtime → Access) follows its view.
+    if ((tab === 'access' || tab === 'runtime') && view && tabOfSection(view) !== tab) {
+        const owner = tabOfSection(view);
+        if (owner === 'access' || owner === 'runtime')
+            tab = owner;
+    }
+    if (!tab || !tabs.includes(tab))
+        tab = tabs[0] ?? 'overview';
+    if (tab !== 'access' && tab !== 'runtime')
+        return { tab, view: null };
+    const own = (tab === 'access' ? ACCESS_VIEWS : RUNTIME_VIEWS);
+    const available = own.filter((key) => views.includes(key));
+    return { tab, view: view && available.includes(view) ? view : (available[0] ?? null) };
+}
+export function agentLocationHref(pathname, tab, view) {
+    if (tab === 'overview' && !view)
+        return pathname;
+    return view ? `${pathname}?tab=${tab}&view=${viewParam(view)}` : `${pathname}?tab=${tab}`;
+}
+/** The href of a legacy section key: where an old Overview row or link lands now. */
+export function sectionLocationHref(pathname, section) {
+    const tab = tabOfSection(section);
+    return agentLocationHref(pathname, tab, tab === 'access' || tab === 'runtime' ? section : null);
+}
+/**
+ * Where every `agents.<name>` key in kortix.yaml is edited: one rail row per
+ * key. `agent-tabs.test.ts` fails when the manifest schema gains a key this
+ * map lacks, so no key is ever invisible on the agent page.
+ */
+const OVERVIEW_ROW = 'overview';
+export const YAML_KEY_ROW = {
+    description: OVERVIEW_ROW,
+    prompt: OVERVIEW_ROW,
+    prompt_file: 'overview',
+    enabled: 'overview',
+    hidden: 'overview',
+    mode: 'overview',
+    space: 'overview',
+    color: 'overview',
+    model: 'model',
+    variant: 'model',
+    temperature: 'model',
+    top_p: 'model',
+    steps: 'model',
+    options: 'model',
+    tools: 'tools',
+    codemode: 'tools',
+    permission: 'tools',
+    skills: 'skills',
+    subagents: 'subagents',
+    commands: 'commands',
+    extensions: 'extensions',
+    connectors: 'connectors',
+    connectors_required: 'connectors',
+    policy_sets: 'connectors',
+    secrets: 'secrets',
+    apps: 'apps',
+    kortix_permissions: 'actions',
+    workspace: 'workspace',
+    sandbox: 'workspace',
+    network_egress: 'workspace',
+};
+/** The editor draft's wire names for a kortix.yaml key (v2 aliases included). */
+const WIRE_KEY = {
+    file: 'prompt_file',
+    repository_access: 'workspace',
+    kortix_cli: 'kortix_permissions',
+    connectors_personal: 'connectors_required',
+};
+function fields(block) {
+    const out = new Map();
+    for (const [key, value] of Object.entries(block)) {
+        if (key === 'behavior' && value && typeof value === 'object') {
+            for (const [inner, v] of Object.entries(value))
+                out.set(`behavior.${inner}`, JSON.stringify(v));
+        }
+        else
+            out.set(key, JSON.stringify(value));
+    }
+    return out;
+}
+/** The rail row a location shows. */
+export function railKeyOf(location) {
+    return location.view ?? (location.tab === 'triggers' ? 'triggers' : 'overview');
+}
+/**
+ * The rail rows that hold an unsaved edit: each changed field of the draft,
+ * mapped to the row that edits it (`YAML_KEY_ROW`). An unknown field lands
+ * on Model, the row for the agent's runtime knobs.
+ */
+export function changedItems(draft, baseline) {
+    const a = fields(draft);
+    const b = fields(baseline);
+    const changed = new Set();
+    for (const key of new Set([...a.keys(), ...b.keys()])) {
+        if (a.get(key) === b.get(key))
+            continue;
+        const yamlKey = WIRE_KEY[key] ?? key.replace(/^behavior\./, '');
+        changed.add(YAML_KEY_ROW[yamlKey] ?? 'model');
+    }
+    return [...changed];
+}
+/** Edit distance, for the not-found page's "did you mean". */
+function distance(a, b) {
+    const row = Array.from({ length: b.length + 1 }, (_, i) => i);
+    for (let i = 1; i <= a.length; i++) {
+        let prev = row[0];
+        row[0] = i;
+        for (let j = 1; j <= b.length; j++) {
+            const next = row[j];
+            row[j] = Math.min(row[j] + 1, row[j - 1] + 1, prev + (a[i - 1] === b[j - 1] ? 0 : 1));
+            prev = next;
+        }
+    }
+    return row[b.length];
+}
+/** The agent name closest to a missing one, when it is close enough to be a typo. */
+export function closestAgentName(missing, names) {
+    let best = null;
+    for (const name of names) {
+        const d = name.includes(missing) || missing.includes(name) ? 1 : distance(missing, name);
+        if (!best || d < best.d)
+            best = { name, d };
+    }
+    return best && best.d <= Math.max(2, Math.floor(missing.length / 3)) ? best.name : null;
+}

package/dist/customize/agents/agents-page.d.ts

@@ -1,24 +1,3 @@
-/**
- * /projects/[id]/agent — the Agents list, and the landing page of Customize.
- *
- * Customize is agent-centric (Marko, 2026-09-01). An agent is the one object
- * a project manager grants a person or a group — every other resource is
- * reached THROUGH an agent — so it is the object this whole surface is built
- * around, and this list is where the sidebar's Customize row lands. Each card
- * is a link to that agent's page (`agentHref`): its instructions, model,
- * triggers, grants and who may use it, on one routed screen. The cards used to
- * open a detail modal with the editor swapped into its source pane; a modal
- * has no URL and buried the editor two clicks deep.
- *
- * Reads `config.agents` off the shared `['project-detail', projectId]` query,
- * so this page and everything else showing a project's agents cannot disagree
- * about what they are. `toArray` because the API can return the field as
- * `undefined` for a repo-less / capability-gated / config-build-failure
- * project, and `.filter` on that throws into prod Sentry.
- *
- * The trigger count on each card comes from the same `qk.project.triggers`
- * list the Triggers tab reads — one request, counted per agent name.
- */
 export declare function AgentsPage({ projectId }: {
     projectId: string;
 }): import("react").JSX.Element;

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

@@ -1,74 +1,82 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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';
+/**
+ * /projects/[id]/customize/agents: the Agents index, where the sidebar's
+ * Customize row lands.
+ *
+ * Customize is agent-first. My Kortix is not listed: the project home starts
+ * it. The page lists the agents a person starts, as cover cards (the default first), then the subagents other
+ * agents call, as their own section: prod's catalog layout. Each card's facts
+ * line reads what the configuration grants (KRTX-3025), never the agent's
+ * prose. A space filter appears when the project splits into spaces.
+ *
+ * New agent opens `CreateAgentModal`; `?new=1` opens it too (the sidebar's
+ * New agent row links here).
+ *
+ * Reads `config.agents` off the shared project-detail query, so this page and
+ * everything else showing a project's agents agree. The trigger and grant
+ * counts read the same lists the agent page reads.
+ */
+import { getProjectDetail, groupBySpace, listProjectResourceGrants, listProjectTriggers, updateProjectDefaultAgent, } from '@kortix/sdk';
+import { contract, qk, useProjectAccountId } from '@kortix/sdk/react';
+import { MagnifyingGlassIcon, PlusIcon } from '@phosphor-icons/react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useMemo, useRef, useState } from 'react';
+import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
+import { useSlashFocus } from '../../internal/hooks/index.js';
+import { AgentMark, agentDisplayName } from '../../internal/components/agent-mark.js';
+import { prefetchAgentConfig } from '../../internal/hooks/projects/use-agent-config.js';
+import { agentHref } from '../../internal/lib/capability-tab-routes.js';
+import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
+import { useProjectCan } from '../../internal/lib/use-project-can.js';
+import { useActiveSpace } from '../../internal/stores/active-space-store.js';
+import { useSpacesEnabled } from '../../internal/lib/space-scope.js';
 import { Badge } from '../../primitives/badge.js';
 import { Button } from '../../primitives/button.js';
-import { InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, } from '../../primitives/input-group.js';
 import Loading from '../../primitives/loading.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../primitives/select.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../primitives/select.js';
 import { errorToast, successToast } from '../../primitives/toast.js';
-import { EmptyState } from '../../primitives/empty-state.js';
-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 { 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 { 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 { catalogEmptyKind } from '../shared/catalog/catalog-empty.js';
+import { EmptyState } from '../../primitives/empty-state.js';
+import { ErrorState } from '../../primitives/error-state.js';
+import { InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, } from '../../primitives/input-group.js';
+import { useUiPathname, useUiRouter, useUiSearchParams } from '../../providers/ui-provider.js';
 import { CatalogNoMatch } from '../shared/catalog/catalog-empty-state.js';
-import { CatalogGrid } from '../shared/catalog/catalog-grid.js';
+import { CatalogGridSkeleton } from '../shared/catalog/catalog-grid.js';
 import { GRID_CLASSNAME } from '../shared/catalog/catalog-grid-tokens.js';
-import { AgentMark } from '../../internal/components/agent-mark.js';
+import { ALL_SPACES, CatalogSpaceTabs } from '../shared/catalog/catalog-space-tabs.js';
+import { toArray } from '../shared/utils.js';
+import { AgentAccessText } from './agent-access-text.js';
 import { AgentCoverCard } from './agent-cover-card.js';
 import { agentInMode, filterAgents } from './agent-filter.js';
-import { useSlashFocus } from '../../internal/hooks/index.js';
-/**
- * /projects/[id]/agent — the Agents list, and the landing page of Customize.
- *
- * Customize is agent-centric (Marko, 2026-09-01). An agent is the one object
- * a project manager grants a person or a group — every other resource is
- * reached THROUGH an agent — so it is the object this whole surface is built
- * around, and this list is where the sidebar's Customize row lands. Each card
- * is a link to that agent's page (`agentHref`): its instructions, model,
- * triggers, grants and who may use it, on one routed screen. The cards used to
- * open a detail modal with the editor swapped into its source pane; a modal
- * has no URL and buried the editor two clicks deep.
- *
- * Reads `config.agents` off the shared `['project-detail', projectId]` query,
- * so this page and everything else showing a project's agents cannot disagree
- * about what they are. `toArray` because the API can return the field as
- * `undefined` for a repo-less / capability-gated / config-build-failure
- * project, and `.filter` on that throws into prod Sentry.
- *
- * The trigger count on each card comes from the same `qk.project.triggers`
- * list the Triggers tab reads — one request, counted per agent name.
- */
+import { AgentTabBody, CustomizeHeader } from './agent-page-chrome.js';
+import { CreateAgentModal } from './create-agent-modal.js';
+import { AgentPinButton } from './agent-pin-button.js';
 export function AgentsPage({ projectId }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    // `accountId` skips useProjectCan's own getProject and lets the IAM probe
-    // run on the first render instead of waiting a round-trip for it.
+    const t = useI18nTranslations('agentEditor.tabs');
+    const tPage = useI18nTranslations('agentEditor.page');
     const accountId = useProjectAccountId(projectId);
     const canWrite = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_AGENT_WRITE, { accountId }).allowed === true;
     const canReadTriggers = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_TRIGGER_READ, { accountId }).allowed === true;
-    const canManageMembers = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_MEMBERS_MANAGE, { accountId }).allowed ===
-        true;
-    const configure = useConfigureThread(projectId);
+    const canManageMembers = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_MEMBERS_MANAGE, { accountId }).allowed === true;
     const queryClient = useQueryClient();
+    const params = useUiSearchParams();
+    const router = useUiRouter();
+    const pathname = useUiPathname();
+    const [creating, setCreating] = useState(false);
+    // `?new=1` opens the create modal; closing it drops the param.
+    const askedNew = params.get('new') === '1';
+    const createOpen = canWrite && (creating || askedNew);
+    const setCreateOpen = (open) => {
+        setCreating(open);
+        if (!open && askedNew)
+            router.replace(pathname);
+    };
     const [query, setQuery] = useState('');
     const searchRef = useRef(null);
-    useSlashFocus(searchRef);
+    // The table is the page's main content, not the search: no focus on arrival.
+    useSlashFocus(searchRef, true, { focusOnArrival: false });
     const detailQuery = useQuery({
         queryKey: qk.project.detail(projectId),
         queryFn: () => getProjectDetail(projectId),
@@ -81,8 +89,6 @@ export function AgentsPage({ projectId }) {
         enabled: canReadTriggers,
         ...contract('config'),
     });
-    // A trigger stored as `default` counts for the project's default agent —
-    // see `triggerStartsAgent`.
     const triggerCounts = useMemo(() => {
         const counts = new Map();
         const fallback = config?.default_agent ?? config?.open_code_default_agent ?? null;
@@ -92,8 +98,6 @@ export function AgentsPage({ projectId }) {
         }
         return counts;
     }, [triggersQuery.data, config]);
-    // 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,73 +114,60 @@ 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;
-    // Agents first, subagents second (Marko, 2026-10-17). A project with 2
-    // agents and 15 subagents buried the 2 a person starts in one alphabetical
-    // grid. The agents a person starts get the full cards, the default first;
-    // the ones other agents call sit below in a compact list. `all` is usable
-    // both ways, so it stays with the agents a person starts.
-    const primaryAgents = useMemo(() => filtered
-        .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]);
-    // `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
-    // points at the wrong fix (clear the filter, not create an agent).
-    const emptyKind = catalogEmptyKind(agents.length, filtered.length);
-    // One control, two labels — same rule as the Skills page. The header has a
-    // 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.
-    // 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: 
-        // 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);
-}
-/**
- * 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 accessLabelOf(access, t) {
-    if (!access)
-        return null;
-    if (access.kind === 'full')
-        return t.raw('textf19611c61ca5');
-    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 agents a person starts first (the default leading), subagents after.
+    const work = useMemo(() => filtered
+        .filter((agent) => !agent.platform)
+        .sort((a, b) => Number(agentInMode(b, 'primary')) - Number(agentInMode(a, 'primary')) ||
+        Number(b.name === defaultAgent) - Number(a.name === defaultAgent) ||
+        agentDisplayName(a.name).localeCompare(agentDisplayName(b.name))), [filtered, defaultAgent]);
+    // Spaces are Work in progress: with `project_channels` off, no space filter and no Space column.
+    const spacesOn = useSpacesEnabled(projectId);
+    const groups = useMemo(() => (spacesOn ? groupBySpace(work, config?.spaces) : []), [spacesOn, work, config?.spaces]);
+    const [activeSpace, setActiveSpace] = useActiveSpace(projectId);
+    const spaceFilter = activeSpace ?? ALL_SPACES;
+    const shown = spaceFilter === ALL_SPACES ? work : (groups.find((g) => g.name === spaceFilter)?.items ?? work);
+    // Agents first, subagents second (Marko, 2026-10-17): the agents a person
+    // starts get the cover cards, the default first; the ones other agents call
+    // sit in their own section. `all` is usable both ways and stays with the first.
+    const primaryAgents = shown.filter((agent) => agentInMode(agent, 'primary'));
+    const subagents = shown.filter((agent) => !agentInMode(agent, 'primary'));
+    const card = (agent, cover) => (_jsx(AgentCoverCard, { slug: agent.name, href: agentHref(projectId, agent.name), onIntent: () => prefetchAgentConfig(queryClient, projectId, agent.name), title: agentDisplayName(agent.name), description: agent.description, badges: _jsx(AgentCardBadges, { agent: agent }), coverLabel: cover, action: _jsx(AgentPinButton, { projectId: projectId, agent: agent.name, onCard: true }), meta: _jsx(AgentCardFacts, { agent: agent, triggerCount: triggerCounts.get(agent.name) ?? 0, grantCount: grantCounts.get(agent.name) ?? 0 }) }, agent.name));
+    const newButton = canWrite ? (_jsxs(Button, { size: "sm", onClick: () => setCreating(true), className: "gap-1.5", children: [_jsx(PlusIcon, { className: "size-4" }), t('newAgent')] })) : null;
+    const body = (() => {
+        if (detailQuery.isLoading)
+            return _jsx(CatalogGridSkeleton, {});
+        if (detailQuery.isError) {
+            return (_jsx(ErrorState, { size: "sm", title: t('agentsLoadError'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => void detailQuery.refetch(), children: tI18nComplete.raw('text942087cc2d41') }) }));
+        }
+        if (agents.length === 0) {
+            return _jsx(EmptyState, { size: "sm", title: tI18nComplete.raw('text971b61f8cb4d'), description: tI18nComplete.raw('textc4e4294c6777') });
+        }
+        if (filtered.length === 0)
+            return _jsx(CatalogNoMatch, { query: query });
+        return (_jsx("div", { className: "space-y-8", children: work.length > 0 ? (_jsxs("section", { className: "space-y-3", children: [groups.length > 0 ? (_jsx(CatalogSpaceTabs, { groups: groups, value: spaceFilter, onValueChange: (v) => setActiveSpace(v === ALL_SPACES ? null : v) })) : null, primaryAgents.length > 0 ? (_jsx("div", { className: GRID_CLASSNAME, children: primaryAgents.map((agent) => card(agent, agent.name === defaultAgent ? tPage('default') : undefined)) })) : null, subagents.length > 0 ? (_jsxs("section", { "aria-labelledby": "subagents-heading", className: cn('space-y-2', primaryAgents.length > 0 && 'pt-5'), 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) => card(agent)) })] })) : null] })) : null }));
+    })();
+    const search = (ref) => (_jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(InputGroupSearchInput, { ref: ref, "aria-label": tI18nComplete.raw('text212fd04a1d20'), placeholder: tI18nComplete.raw('text212fd04a1d20'), value: query, onChange: (event) => setQuery(event.target.value), variant: "popover", size: "sm" }), query ? _jsx(InputGroupSearchClear, { onClick: () => setQuery('') }) : null] }));
+    // The same header as the agent page, My Kortix and Review (`CustomizeHeader`),
+    // so the title never jumps between them. Search sits in it from `md`; below
+    // that it is the first row of the list.
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex h-full min-h-0 flex-1 flex-col", children: [_jsx(CustomizeHeader, { title: tI18nComplete.raw('text279b44d2ab4b'), rule: true, actions: _jsxs(_Fragment, { children: [_jsx("div", { className: "hidden w-64 md:block", children: search(searchRef) }), config ? _jsx(DefaultAgentSelector, { projectId: projectId, config: config, canWrite: canWrite }) : null, newButton] }) }), _jsxs(AgentTabBody, { className: "mx-auto max-w-6xl space-y-5 pb-5", children: [_jsx("div", { className: "md:hidden", children: search() }), body] })] }), canWrite ? (_jsx(CreateAgentModal, { open: createOpen, onOpenChange: setCreateOpen, projectId: projectId, config: config })) : 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.
+ * The card's facts line: what the configuration grants (KRTX-3025), in the
+ * one grant vocabulary (All, None or a count, `AgentAccessText`), then the
+ * agent's own model, triggers and grants. A fact with nothing to say is left
+ * out: no "0 triggers", no "Default model".
  */
 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))) }));
+    return (_jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-0.5 tabular-nums", children: [_jsx(AgentAccessText, { agent: agent }), facts.map((fact) => (_jsx("span", { className: "truncate", children: fact }, fact)))] }));
 }
 /**
  * Card badges — "also a subagent", disabled. The default agent is marked on
@@ -195,22 +186,17 @@ function AgentCardBadges({ agent }) {
  * Which agent a new chat in this project starts with. Rides the filter row
  * rather than a banner of its own — it is one setting, and giving it a titled
  * block above the grid would outweigh the list it belongs to.
- *
- * v2-only: the default agent is a `kortix.yaml` concept, so a v1 project gets
- * no control instead of one that cannot persist.
  */
 function DefaultAgentSelector({ projectId, config, canWrite, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
     const queryClient = useQueryClient();
-    // v2 and v3 declare `default_agent` in kortix.yaml; v1 has no such key.
-    const declaresDefaultAgent = detectManifestVersion(config.manifest_raw) >= 2;
     // A subagent cannot start a chat, so it is not offered as the default.
     const availableAgents = toArray(config.agents).filter((agent) => agent.enabled !== false && agentInMode(agent, 'primary'));
     const current = config.default_agent ?? config.open_code_default_agent;
     const mutation = useMutation({
         mutationFn: (agentName) => updateProjectDefaultAgent(projectId, agentName),
         onSuccess: async (result) => {
-            successToast(tI18nComplete('text0bb557895b32', { value0: capitalizeWords(result.default_agent) }));
+            successToast(tI18nComplete('text0bb557895b32', { value0: agentDisplayName(result.default_agent) }));
             // One invalidation, not two: the project CONFIG is a `select` projection
             // over this same `qk.project.detail(id)` entry (`useProjectConfig`), not
             // its own fetch. The retired standalone `['project-config', id]` slot no
@@ -219,7 +205,7 @@ function DefaultAgentSelector({ projectId, config, canWrite, }) {
         },
         onError: (error) => errorToast(error.message || tI18nComplete.raw('text7f724c2ad694')),
     });
-    if (!declaresDefaultAgent || availableAgents.length === 0 || !current)
+    if (availableAgents.length === 0 || !current)
         return null;
-    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))) })] })] }));
+    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: agentDisplayName(agent.name) })] }) }, agent.name))) })] })] }));
 }

package/dist/customize/agents/connectors-required.d.ts

@@ -0,0 +1,16 @@
+/**
+ * `agents.<name>.connectors_required`: the connectors a session needs connected
+ * before it starts. A connector is required only while the agent is granted it
+ * by name (Specific): under All or None no single connector is picked. Pure,
+ * so the agent page's rules are testable without a render.
+ */
+import type { AgentGrantSetV2 } from '@kortix/sdk';
+/** `undefined` stands for an empty list: the key leaves kortix.yaml. */
+type RequiredList = string[] | undefined;
+/**
+ * The required list after the grant changes to `next`. A connector dropped
+ * from the pick list, or a switch to All or None, drops its Required flag.
+ * Returns `required` itself when nothing changes, so the caller writes nothing.
+ */
+export declare function pruneRequiredConnectors(required: RequiredList, next: AgentGrantSetV2): RequiredList;
+export {};

package/dist/customize/agents/connectors-required.js

@@ -0,0 +1,19 @@
+/**
+ * `agents.<name>.connectors_required`: the connectors a session needs connected
+ * before it starts. A connector is required only while the agent is granted it
+ * by name (Specific): under All or None no single connector is picked. Pure,
+ * so the agent page's rules are testable without a render.
+ */
+/**
+ * The required list after the grant changes to `next`. A connector dropped
+ * from the pick list, or a switch to All or None, drops its Required flag.
+ * Returns `required` itself when nothing changes, so the caller writes nothing.
+ */
+export function pruneRequiredConnectors(required, next) {
+    const current = required ?? [];
+    const picked = new Set(Array.isArray(next) ? next : []);
+    const kept = current.filter((slug) => picked.has(slug));
+    if (kept.length === current.length)
+        return required;
+    return kept.length ? kept : undefined;
+}

package/dist/customize/agents/create-agent-modal.d.ts

@@ -0,0 +1,19 @@
+import type { ProjectConfigSummary } from '@kortix/sdk';
+import type * as React from 'react';
+export type CreateAgentStart = 'describe' | 'blank' | 'duplicate';
+/** The request My Kortix receives. English, like every configure prompt. */
+export declare function createAgentPrompt(input: {
+    start: CreateAgentStart;
+    name: string;
+    description: string;
+    from?: {
+        name: string;
+        path: string;
+    };
+}): string;
+export declare function CreateAgentModal({ open, onOpenChange, projectId, config, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    projectId: string;
+    config: ProjectConfigSummary | null;
+}): React.JSX.Element;