@kortix/ui 0.14.12 → 0.14.14

package/dist/workspace/space/space-room.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+/**
+ * A room inside a space: the space's own room (the project room named like
+ * the space's slug, the space page's first tab) or the room a board `chat`
+ * block names. The host renders the conversation through
+ * `UiHostComponents.RoomPanel`; a host without it links to its rooms page.
+ * Nothing here creates a room: the first post does. With the `agent_rooms`
+ * flag off it renders nothing.
+ */
+export declare function SpaceRoom({ projectId, roomName, topic, fill, intro, className, }: {
+    projectId: string;
+    roomName: string;
+    /** The topic a room gets when the first post creates it. */
+    topic?: string | null;
+    /** Fill the container with no frame and no header: the space page's room tab. */
+    fill?: boolean;
+    /** What the room shows above its first message, in place of the one-line intro. */
+    intro?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/workspace/space/space-room.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFeatureFlag } from '@kortix/sdk/react';
+import { HashIcon } from '@phosphor-icons/react';
+import { useTranslations } from '../../i18n/index.js';
+import { uiRoutes } from '../../lib/routes.js';
+import { UiLink as Link, useUiComponents } from '../../providers/ui-provider.js';
+/**
+ * A room inside a space: the space's own room (the project room named like
+ * the space's slug, the space page's first tab) or the room a board `chat`
+ * block names. The host renders the conversation through
+ * `UiHostComponents.RoomPanel`; a host without it links to its rooms page.
+ * Nothing here creates a room: the first post does. With the `agent_rooms`
+ * flag off it renders nothing.
+ */
+export function SpaceRoom({ projectId, roomName, topic, fill = false, intro, className, }) {
+    const { RoomPanel } = useUiComponents();
+    const rooms = useFeatureFlag(projectId, 'agent_rooms');
+    const t = useTranslations('spaces');
+    const roomsHref = uiRoutes().rooms(projectId);
+    if (rooms.isLoading || !rooms.enabled)
+        return null;
+    if (RoomPanel) {
+        return (_jsx("div", { className: className, children: _jsx(RoomPanel, { projectId: projectId, roomName: roomName, emptyTopic: topic ?? undefined, fill: fill, intro: intro }) }));
+    }
+    return (_jsx("div", { className: className, children: _jsxs("div", { className: "bg-popover flex flex-col gap-1.5 rounded-md border px-4 py-3", children: [_jsxs("span", { className: "text-foreground flex min-w-0 items-center gap-1 text-sm font-medium", children: [_jsx(HashIcon, { className: "size-4 shrink-0" }), _jsx("span", { className: "truncate", children: roomName })] }), _jsx("span", { className: "text-muted-foreground text-xs", children: roomsHref ? (_jsx(Link, { href: roomsHref, className: "text-foreground underline-offset-4 hover:underline", children: t('openRooms') })) : (t('roomHint')) })] }) }));
+}

package/dist/workspace/space/space-tab-menu.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import { type ManifestSpace } from '@kortix/sdk';
+/**
+ * The "+" beside a space's tabs: add a view (Goals, Apps, Artifacts, a
+ * folder), pin an App or an Artifact, add a link or a board, or edit the tabs.
+ * Every choice is one commit to `spaces.<slug>.tabs` in `kortix.yaml`.
+ */
+export declare function SpaceTabMenu({ projectId, space, onAdded, children, }: {
+    projectId: string;
+    space: ManifestSpace;
+    /** Called with the new tab's key, to open it. */
+    onAdded: (key: string) => void;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/workspace/space/space-tab-menu.js

@@ -0,0 +1,127 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { spaceTabKey, spaceTabs } from '@kortix/sdk';
+import { useArtifacts, useFeatureFlag, useProjectApps } from '@kortix/sdk/react';
+import { AppWindowIcon, ArrowDownIcon, ArrowUpIcon, FileTextIcon, FolderSimpleIcon, LinkSimpleIcon, PencilSimpleIcon, SquaresFourIcon, StackSimpleIcon, TargetIcon, XIcon, } from '@phosphor-icons/react';
+import { useTranslations } from '../../i18n/index.js';
+import { Button } from '../../primitives/button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '../../primitives/dropdown-menu.js';
+import { Field, FieldLabel } from '../../primitives/field.js';
+import { Input } from '../../primitives/input.js';
+import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, } from '../../primitives/modal.js';
+import { Switch } from '../../primitives/switch.js';
+import { errorToast, successToast } from '../../primitives/toast.js';
+import { useTabLabel } from './space-tab-panels.js';
+import { appendSpaceTab, setSpaceTabs } from './space-templates.js';
+import { useManifestWrite } from './use-space-manifest.js';
+const VIEW_ICON = {
+    goals: _jsx(TargetIcon, {}),
+    apps: _jsx(AppWindowIcon, {}),
+    artifacts: _jsx(FileTextIcon, {}),
+};
+/**
+ * The "+" beside a space's tabs: add a view (Goals, Apps, Artifacts, a
+ * folder), pin an App or an Artifact, add a link or a board, or edit the tabs.
+ * Every choice is one commit to `spaces.<slug>.tabs` in `kortix.yaml`.
+ */
+export function SpaceTabMenu({ projectId, space, onAdded, children, }) {
+    const t = useTranslations('spaces');
+    const write = useManifestWrite(projectId);
+    const goalsOn = useFeatureFlag(projectId, 'goals').enabled;
+    const artifactsOn = useFeatureFlag(projectId, 'artifacts').enabled;
+    const apps = useProjectApps(projectId);
+    const artifacts = useArtifacts(artifactsOn ? projectId : null, { limit: 20 });
+    const [ask, setAsk] = useState(null);
+    const current = spaceTabs(space);
+    const has = (type) => current.some((tab) => tab.type === type);
+    const add = async (tab) => {
+        try {
+            await write((yaml) => appendSpaceTab(yaml, space.name, tab));
+            successToast(t('tabAdded'));
+            onAdded(spaceTabKey(tab, current.length));
+        }
+        catch (error) {
+            errorToast(t('saveError'), { description: error instanceof Error ? error.message : undefined });
+            throw error;
+        }
+    };
+    // A menu item that opens a modal lets the menu close first.
+    const open = (next) => requestAnimationFrame(() => setAsk(next));
+    const views = ['goals', 'apps', 'artifacts'].filter((type) => !has(type) && (type !== 'goals' || goalsOn) && (type !== 'artifacts' || artifactsOn));
+    return (_jsxs(_Fragment, { children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: children }), _jsxs(DropdownMenuContent, { align: "start", className: "w-56", children: [_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(SquaresFourIcon, {}), t('menu.view')] }), _jsxs(DropdownMenuSubContent, { className: "w-48", children: [views.map((type) => (_jsxs(DropdownMenuItem, { onSelect: () => void add({ type }).catch(() => { }), children: [VIEW_ICON[type], t(`tabs.${type}`)] }, type))), _jsxs(DropdownMenuItem, { onSelect: () => open('files'), children: [_jsx(FolderSimpleIcon, {}), t('menu.folder')] })] })] }), _jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(AppWindowIcon, {}), t('menu.app')] }), _jsx(DropdownMenuSubContent, { className: "max-h-72 w-56 overflow-y-auto", children: (apps.data ?? []).length === 0 ? (_jsx(DropdownMenuItem, { disabled: true, children: t('menu.noApps') })) : ((apps.data ?? []).map((app) => (_jsx(DropdownMenuItem, { onSelect: () => void add({ type: 'app', app: app.slug, label: app.name }).catch(() => { }), children: _jsx("span", { className: "truncate", children: app.name }) }, app.app_id)))) })] }), artifactsOn ? (_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(FileTextIcon, {}), t('menu.artifact')] }), _jsx(DropdownMenuSubContent, { className: "max-h-72 w-56 overflow-y-auto", children: (artifacts.data ?? []).length === 0 ? (_jsx(DropdownMenuItem, { disabled: true, children: t('menu.noArtifacts') })) : ((artifacts.data ?? []).map((artifact) => (_jsx(DropdownMenuItem, { onSelect: () => void add({ type: 'artifact', artifact: artifact.artifact_id, label: artifact.title }).catch(() => { }), children: _jsx("span", { className: "truncate", children: artifact.title }) }, artifact.artifact_id)))) })] })) : null, _jsxs(DropdownMenuItem, { onSelect: () => open('link'), children: [_jsx(LinkSimpleIcon, {}), t('menu.link')] }), _jsxs(DropdownMenuItem, { onSelect: () => void add({ type: 'board', label: t('tabs.board'), blocks: [] }).catch(() => { }), children: [_jsx(StackSimpleIcon, {}), t('menu.board')] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onSelect: () => open('edit'), children: [_jsx(PencilSimpleIcon, {}), t('menu.editTabs')] })] })] }), _jsx(TargetModal, { kind: ask === 'link' || ask === 'files' ? ask : null, onClose: () => setAsk(null), onAdd: add }), _jsx(EditTabsModal, { open: ask === 'edit', onOpenChange: (next) => setAsk(next ? 'edit' : null), tabs: [...current], onSave: async (tabs) => {
+                    await write((yaml) => setSpaceTabs(yaml, space.name, tabs));
+                } }, ask === 'edit' ? 'open' : 'closed')] }));
+}
+/** Ask for a link's url (and whether to embed it) or a folder's path. */
+function TargetModal({ kind, onClose, onAdd, }) {
+    const t = useTranslations('spaces');
+    const [value, setValue] = useState('');
+    const [label, setLabel] = useState('');
+    const [embed, setEmbed] = useState(false);
+    const [pending, setPending] = useState(false);
+    const isLink = kind === 'link';
+    const trimmed = value.trim();
+    const valid = isLink ? /^https?:\/\/\S+$/i.test(trimmed) : trimmed.length > 0;
+    const reset = () => {
+        setValue('');
+        setLabel('');
+        setEmbed(false);
+    };
+    const submit = async (event) => {
+        event.preventDefault();
+        if (!valid || pending)
+            return;
+        setPending(true);
+        try {
+            await onAdd(isLink
+                ? { type: 'link', url: trimmed, ...(label.trim() ? { label: label.trim() } : {}), ...(embed ? { embed: true } : {}) }
+                : { type: 'files', path: trimmed.replace(/^\/+|\/+$/g, ''), ...(label.trim() ? { label: label.trim() } : {}) });
+            reset();
+            onClose();
+        }
+        catch {
+            // The toast already said what failed; the dialog stays open to retry.
+        }
+        finally {
+            setPending(false);
+        }
+    };
+    return (_jsx(Modal, { open: kind !== null, onOpenChange: (next) => (next ? null : onClose()), children: _jsxs(ModalContent, { className: "lg:max-w-md", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: isLink ? t('add.linkTitle') : t('add.folderTitle') }), _jsx(ModalDescription, { children: isLink ? t('add.linkHint') : t('add.folderHint') })] }), _jsxs("form", { onSubmit: submit, children: [_jsxs(ModalBody, { className: "space-y-4", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "space-tab-target", children: isLink ? t('add.url') : t('add.path') }), _jsx(Input, { id: "space-tab-target", value: value, onChange: (event) => setValue(event.target.value), placeholder: isLink ? 'https://' : 'docs', className: isLink ? undefined : 'font-mono', autoFocus: true })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "space-tab-label", children: t('add.label') }), _jsx(Input, { id: "space-tab-label", value: label, onChange: (event) => setLabel(event.target.value) })] }), isLink ? (_jsxs("label", { htmlFor: "space-tab-embed", className: "flex items-center justify-between gap-3", children: [_jsx("span", { className: "text-foreground text-sm", children: t('add.embed') }), _jsx(Switch, { id: "space-tab-embed", checked: embed, onCheckedChange: setEmbed })] })) : null] }), _jsxs(ModalFooter, { className: "sm:justify-between", children: [_jsx(Button, { type: "button", variant: "outline-ghost", onClick: onClose, children: t('cancel') }), _jsx(Button, { type: "submit", disabled: !valid || pending, "aria-busy": pending || undefined, children: t('add.submit') })] })] })] }) }));
+}
+/** Rename, reorder and remove a space's tabs. The room is not listed: it is always first. */
+function EditTabsModal({ open, onOpenChange, tabs, onSave, }) {
+    const t = useTranslations('spaces');
+    const [draft, setDraft] = useState(tabs);
+    const [pending, setPending] = useState(false);
+    const move = (from, to) => setDraft((list) => {
+        const next = [...list];
+        const [tab] = next.splice(from, 1);
+        next.splice(to, 0, tab);
+        return next;
+    });
+    const save = async () => {
+        setPending(true);
+        try {
+            await onSave(draft.map((tab) => {
+                const { label, ...rest } = tab;
+                return label?.trim() ? { ...rest, label: label.trim() } : rest;
+            }));
+            successToast(t('tabsSaved'));
+            onOpenChange(false);
+        }
+        catch (error) {
+            errorToast(t('saveError'), { description: error instanceof Error ? error.message : undefined });
+        }
+        finally {
+            setPending(false);
+        }
+    };
+    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: _jsxs(ModalContent, { className: "lg:max-w-lg", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: t('edit.title') }), _jsx(ModalDescription, { children: t('edit.description') })] }), _jsx(ModalBody, { children: draft.length === 0 ? (_jsx("p", { className: "text-muted-foreground py-4 text-sm", children: t('edit.empty') })) : (_jsx("ul", { className: "divide-border flex flex-col divide-y", children: draft.map((tab, index) => (_jsx(EditRow, { tab: tab, first: index === 0, last: index === draft.length - 1, onLabel: (label) => setDraft((list) => list.map((item, i) => (i === index ? { ...item, label } : item))), onUp: () => move(index, index - 1), onDown: () => move(index, index + 1), onRemove: () => setDraft((list) => list.filter((_, i) => i !== index)) }, `${spaceTabKey(tab, index)}-${index}`))) })) }), _jsxs(ModalFooter, { className: "sm:justify-between", children: [_jsx(Button, { type: "button", variant: "outline-ghost", onClick: () => onOpenChange(false), children: t('cancel') }), _jsx(Button, { type: "button", onClick: save, disabled: pending, "aria-busy": pending || undefined, children: t('edit.save') })] })] }) }));
+}
+function EditRow({ tab, first, last, onLabel, onUp, onDown, onRemove, }) {
+    const t = useTranslations('spaces');
+    const name = useTabLabel({ ...tab, label: undefined });
+    const shown = tab.label?.trim() || name;
+    return (_jsxs("li", { className: "flex items-center gap-2 py-2", children: [_jsx("span", { className: "text-muted-foreground w-20 shrink-0 truncate text-xs", children: t(`tabs.${tab.type}`) }), _jsx(Input, { "aria-label": t('edit.rename', { name: shown }), value: tab.label ?? '', placeholder: name, onChange: (event) => onLabel(event.target.value), className: "h-8 min-w-0 flex-1" }), _jsx(Button, { size: "icon-sm", variant: "ghost", disabled: first, onClick: onUp, "aria-label": t('edit.moveUp', { name: shown }), children: _jsx(ArrowUpIcon, {}) }), _jsx(Button, { size: "icon-sm", variant: "ghost", disabled: last, onClick: onDown, "aria-label": t('edit.moveDown', { name: shown }), children: _jsx(ArrowDownIcon, {}) }), _jsx(Button, { size: "icon-sm", variant: "ghost", onClick: onRemove, "aria-label": t('edit.remove', { name: shown }), children: _jsx(XIcon, {}) })] }));
+}

package/dist/workspace/space/space-tab-panels.d.ts

@@ -0,0 +1,9 @@
+import { type ManifestSpace, type SpaceTab } from '@kortix/sdk';
+/** A tab's name: its `label`, else its target, else its type. */
+export declare function useTabLabel(tab: SpaceTab): string;
+/** The content of one tab; `tab` null is the room. */
+export declare function SpaceTabPanel({ projectId, space, tab, }: {
+    projectId: string;
+    space: ManifestSpace;
+    tab: SpaceTab | null;
+}): import("react").JSX.Element;

package/dist/workspace/space/space-tab-panels.js

@@ -0,0 +1,203 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { agentsInSpace, bindingSpace, listProjectDirectory, } from '@kortix/sdk';
+import { qk, useAppAccess, useArtifact, useArtifacts, useFeatureFlag, useProjectApps, useProjectConfig, useProjectGoals, } from '@kortix/sdk/react';
+import { ArrowSquareOutIcon, FileTextIcon, FolderSimpleIcon } from '@phosphor-icons/react';
+import { AppPreview } from '../../apps/app-preview.js';
+import { appCan, appStatus } from '../../apps/app-shared.js';
+import { useLocale, useTranslations } from '../../i18n/index.js';
+import { AgentMark, agentDisplayName } from '../../internal/components/agent-mark.js';
+import { GoalHealthDot, goalHref } from '../../internal/goals/goal-meta.js';
+import { useFilePreviewStore } from '../../internal/stores/file-preview-store.js';
+import { uiRoutes } from '../../lib/routes.js';
+import { cn } from '../../lib/utils.js';
+import { UiLink as Link } from '../../providers/ui-provider.js';
+import { Button } from '../../primitives/button.js';
+import { EmptyState } from '../../primitives/empty-state.js';
+import { ErrorState } from '../../primitives/error-state.js';
+import { Skeleton } from '../../primitives/skeleton.js';
+import { framePolicy } from '../../files/viewer/preview-policy.js';
+import { SpaceBlocks } from './space-blocks.js';
+import { SpaceRoom } from './space-room.js';
+/** Same sandbox as the Artifacts viewer: the content server's CSP decides the rest. */
+const ARTIFACT_SANDBOX = 'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-modals allow-downloads';
+/** A tab's name: its `label`, else its target, else its type. */
+export function useTabLabel(tab) {
+    const t = useTranslations('spaces');
+    if (tab.label?.trim())
+        return tab.label.trim();
+    if (tab.type === 'app' && tab.app)
+        return tab.app;
+    if (tab.type === 'link' && tab.url)
+        return hostOf(tab.url);
+    if (tab.type === 'files' && tab.path)
+        return tab.path.split('/').filter(Boolean).at(-1) ?? t('tabs.files');
+    return t(`tabs.${tab.type}`);
+}
+function hostOf(url) {
+    try {
+        return new URL(url).host;
+    }
+    catch {
+        return url;
+    }
+}
+/** The content of one tab; `tab` null is the room. */
+export function SpaceTabPanel({ projectId, space, tab, }) {
+    if (!tab)
+        return _jsx(RoomTab, { projectId: projectId, space: space });
+    switch (tab.type) {
+        case 'goals':
+            return _jsx(GoalsTab, { projectId: projectId, slug: space.name });
+        case 'apps':
+            return _jsx(AppsTab, { projectId: projectId, slug: space.name });
+        case 'artifacts':
+            return _jsx(ArtifactsTab, { projectId: projectId, slug: space.name });
+        case 'files':
+            return _jsx(FilesTab, { projectId: projectId, root: tab.path ?? '' }, tab.path);
+        case 'board':
+            return _jsx(BoardTab, { projectId: projectId, tab: tab });
+        case 'app':
+            return _jsx(AppTab, { projectId: projectId, slug: tab.app ?? '' });
+        case 'artifact':
+            return _jsx(ArtifactTab, { projectId: projectId, artifactId: tab.artifact ?? '' });
+        case 'link':
+            return _jsx(LinkTab, { tab: tab });
+    }
+}
+function RoomTab({ projectId, space }) {
+    const t = useTranslations('spaces');
+    const rooms = useFeatureFlag(projectId, 'agent_rooms');
+    if (!rooms.isLoading && !rooms.enabled) {
+        return (_jsx(Centered, { children: _jsx(EmptyState, { size: "sm", title: t('roomsOff'), description: t('roomsOffHint') }) }));
+    }
+    return (_jsx(SpaceRoom, { projectId: projectId, roomName: space.name, topic: space.description, fill: true, intro: _jsx(RoomIntro, { projectId: projectId, space: space }), className: "h-full" }));
+}
+/** The top of the room: what the space is for, who posts in it, and how to bring someone in. */
+function RoomIntro({ projectId, space }) {
+    const t = useTranslations('spaces');
+    const locale = useLocale();
+    const agents = agentsInSpace(space.name, useProjectConfig(projectId)?.agents ?? []);
+    const names = new Intl.ListFormat(locale, { type: 'conjunction' }).format(agents.map(agentDisplayName));
+    return (_jsxs("div", { className: "flex max-w-2xl flex-col gap-3 px-5 pb-2", children: [agents.length ? (_jsx("span", { className: "flex -space-x-1", children: agents.map((name) => (_jsx(AgentMark, { slug: name, size: 21, className: "ring-background ring-2" }, name))) })) : null, _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("h2", { className: "text-foreground text-xl font-medium text-balance", children: t('room.introTitle', { name: space.label || space.name }) }), _jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: space.description?.trim() || t('room.introBody') })] }), _jsxs("p", { className: "text-muted-foreground text-xs text-pretty", children: [agents.length ? t('room.introAgents', { count: agents.length, names }) : t('room.introNoAgents'), ' ', t('room.introMention')] })] }));
+}
+/** A list tab's frame: one column on the header's gutter, so rows line up with the tabs. */
+function ListFrame({ children }) {
+    return _jsx("div", { className: "flex w-full max-w-3xl flex-col gap-4 px-5 py-5 pb-20", children: children });
+}
+function Centered({ children }) {
+    return _jsx("div", { className: "flex h-full min-h-64 items-center justify-center px-4 py-8", children: children });
+}
+function ViewAll({ href }) {
+    const t = useTranslations('spaces');
+    if (!href)
+        return null;
+    return (_jsx("div", { className: "flex justify-end", children: _jsx(Button, { asChild: true, size: "sm", variant: "ghost", children: _jsx(Link, { href: href, children: t('viewAll') }) }) }));
+}
+function Rows({ children }) {
+    return _jsx("ul", { className: "border-border divide-border flex flex-col divide-y rounded-md border", children: children });
+}
+function Row({ href, mark, meta, children }) {
+    const body = (_jsxs(_Fragment, { children: [mark, _jsx("span", { className: "text-foreground min-w-0 flex-1 truncate text-sm", children: children }), meta ? _jsx("span", { className: "text-muted-foreground shrink-0 text-xs", children: meta }) : null] }));
+    const row = 'flex min-w-0 items-center gap-3 px-4 py-2.5';
+    return (_jsx("li", { children: href ? (_jsx(Link, { href: href, className: cn(row, 'hover:bg-hover transition-colors'), children: body })) : (_jsx("div", { className: row, children: body })) }));
+}
+function LoadingRows() {
+    return (_jsx("div", { className: "flex flex-col gap-2", children: [0, 1, 2].map((i) => (_jsx(Skeleton, { className: "h-10 w-full rounded-md" }, i))) }));
+}
+function Failed({ onRetry }) {
+    const t = useTranslations('spaces');
+    return (_jsx(ErrorState, { size: "sm", title: t('loadError'), action: _jsx(Button, { size: "sm", variant: "outline", onClick: onRetry, children: t('retry') }) }));
+}
+const filtered = (href, slug) => (href ? `${href}?space=${encodeURIComponent(slug)}` : null);
+function GoalsTab({ projectId, slug }) {
+    const t = useTranslations('spaces');
+    const agents = useProjectConfig(projectId)?.agents ?? [];
+    const goals = useProjectGoals(projectId);
+    const rows = (goals.data ?? []).filter((goal) => bindingSpace(goal.goal, agents) === slug);
+    return (_jsx(ListFrame, { children: goals.isError ? (_jsx(Failed, { onRetry: () => goals.refetch() })) : goals.isLoading ? (_jsx(LoadingRows, {})) : rows.length === 0 ? (_jsx(EmptyState, { size: "sm", title: t('empty.goals') })) : (_jsxs(_Fragment, { children: [_jsx(Rows, { children: rows.map((goal) => (_jsx(Row, { href: goalHref(projectId, goal), mark: _jsx(GoalHealthDot, { goal: goal }), children: goal.goal?.objective ?? goal.slug }, `${goal.scope}/${goal.slug}`))) }), _jsx(ViewAll, { href: filtered(uiRoutes().goals(projectId), slug) })] })) }));
+}
+function AppsTab({ projectId, slug }) {
+    const t = useTranslations('spaces');
+    const tApps = useTranslations('hardcodedUi.i18nComplete');
+    const agents = useProjectConfig(projectId)?.agents ?? [];
+    const apps = useProjectApps(projectId);
+    const appsHref = uiRoutes().apps(projectId);
+    const rows = (apps.data ?? []).filter((app) => bindingSpace(app.display, agents) === slug);
+    return (_jsx(ListFrame, { children: apps.isError ? (_jsx(Failed, { onRetry: () => apps.refetch() })) : apps.isLoading ? (_jsx(LoadingRows, {})) : rows.length === 0 ? (_jsx(EmptyState, { size: "sm", title: t('empty.apps') })) : (_jsx(Rows, { children: rows.map((app) => (_jsx(Row, { href: appsHref ? `${appsHref}?app=${encodeURIComponent(app.app_id)}` : null, mark: _jsx("span", { className: cn('inline-block size-2 shrink-0 rounded-full', appStatus(app, tApps).dot) }), meta: appStatus(app, tApps).label, children: app.name }, app.app_id))) })) }));
+}
+function ArtifactsTab({ projectId, slug }) {
+    const t = useTranslations('spaces');
+    const agents = useProjectConfig(projectId)?.agents ?? [];
+    const list = useArtifacts(projectId, { space: slug, agents: agentsInSpace(slug, agents), limit: 50 });
+    const href = uiRoutes().artifacts(projectId);
+    const rows = list.data ?? [];
+    return (_jsx(ListFrame, { children: list.isError ? (_jsx(Failed, { onRetry: () => list.refetch() })) : list.isLoading ? (_jsx(LoadingRows, {})) : rows.length === 0 ? (_jsx(EmptyState, { size: "sm", title: t('empty.artifacts') })) : (_jsxs(_Fragment, { children: [_jsx(Rows, { children: rows.map((artifact) => (_jsx(Row, { href: href ? `${href}/${artifact.artifact_id}` : null, mark: _jsx(FileTextIcon, { className: "text-muted-foreground size-4 shrink-0" }), meta: artifact.type === 'doc' ? t('doc') : t('page'), children: artifact.title }, artifact.artifact_id))) }), _jsx(ViewAll, { href: filtered(href, slug) })] })) }));
+}
+/** One project folder: folders open in place, files open in the file viewer. */
+function FilesTab({ projectId, root }) {
+    const t = useTranslations('spaces');
+    const clean = root.replace(/^\/+|\/+$/g, '');
+    const [path, setPath] = useState(clean);
+    const openPreview = useFilePreviewStore((state) => state.openPreview);
+    const listing = useQuery({
+        queryKey: [...qk.project.files(projectId), 'space-folder', path],
+        queryFn: () => listProjectDirectory(projectId, { path: path || undefined }),
+        retry: false,
+    });
+    const entries = [...(listing.data?.entries ?? [])].sort((a, b) => (a.type === b.type ? a.path.localeCompare(b.path) : a.type === 'directory' ? -1 : 1));
+    const parent = path === clean ? null : path.split('/').slice(0, -1).join('/');
+    const name = (entry) => entry.split('/').at(-1) ?? entry;
+    return (_jsxs(ListFrame, { children: [_jsx("p", { className: "text-muted-foreground truncate font-mono text-xs", children: path || '/' }), listing.isError ? (_jsx(Failed, { onRetry: () => listing.refetch() })) : listing.isLoading ? (_jsx(LoadingRows, {})) : (_jsxs(Rows, { children: [parent !== null ? (_jsx(FolderRow, { onOpen: () => setPath(parent), icon: _jsx(FolderSimpleIcon, { className: "text-muted-foreground size-4 shrink-0" }), children: ".." })) : null, entries.length === 0 ? (_jsx("li", { className: "text-muted-foreground px-4 py-2.5 text-sm", children: t('empty.folder') })) : (entries.map((entry) => (_jsx(FolderRow, { onOpen: () => (entry.type === 'directory' ? setPath(entry.path) : openPreview(entry.path)), icon: entry.type === 'directory' ? (_jsx(FolderSimpleIcon, { className: "text-muted-foreground size-4 shrink-0" })) : (_jsx(FileTextIcon, { className: "text-muted-foreground size-4 shrink-0" })), children: name(entry.path) }, entry.path))))] }))] }));
+}
+function FolderRow({ onOpen, icon, children }) {
+    return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: onOpen, className: "hover:bg-hover flex w-full min-w-0 items-center gap-3 px-4 py-2.5 text-left transition-colors", children: [icon, _jsx("span", { className: "text-foreground min-w-0 flex-1 truncate text-sm", children: children })] }) }));
+}
+function BoardTab({ projectId, tab }) {
+    const t = useTranslations('spaces');
+    const blocks = tab.blocks ?? [];
+    if (!blocks.length) {
+        return (_jsx(Centered, { children: _jsx(EmptyState, { size: "sm", title: t('empty.board'), description: t('empty.boardHint') }) }));
+    }
+    return (_jsx("div", { className: "w-full max-w-6xl px-5 py-5 pb-20", children: _jsx(SpaceBlocks, { projectId: projectId, blocks: blocks }) }));
+}
+/** A pinned App, live and interactive, filling the tab. */
+function AppTab({ projectId, slug }) {
+    const t = useTranslations('spaces');
+    const apps = useProjectApps(projectId);
+    const app = apps.data?.find((candidate) => candidate.slug === slug);
+    const live = !!app && !!app.active_deployment_id && appCan(app, 'preview') && app.viewer_can_access !== false;
+    const access = useAppAccess(projectId, live && app ? app.app_id : null, { policy: false, session: live });
+    if (apps.isLoading)
+        return _jsx(Centered, { children: _jsx(Skeleton, { className: "h-64 w-full max-w-4xl rounded-md" }) });
+    if (!app) {
+        return (_jsx(Centered, { children: _jsx(EmptyState, { size: "sm", title: t('missing.app', { slug }) }) }));
+    }
+    return (_jsx(AppPreview, { app: app, url: access.session.data?.url ?? null, accessError: access.session.isError, interactive: true, className: "h-full" }));
+}
+/** A pinned Artifact, its current state in a sandboxed frame. */
+function ArtifactTab({ projectId, artifactId }) {
+    const t = useTranslations('spaces');
+    const artifact = useArtifact(projectId, artifactId);
+    const href = uiRoutes().artifacts(projectId);
+    if (artifact.isLoading)
+        return _jsx(Centered, { children: _jsx(Skeleton, { className: "h-64 w-full max-w-4xl rounded-md" }) });
+    if (!artifact.data) {
+        return (_jsx(Centered, { children: _jsx(EmptyState, { size: "sm", title: t('missing.artifact') }) }));
+    }
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "border-border flex shrink-0 items-center gap-2 border-b px-5 py-1.5", children: [_jsx("span", { className: "text-foreground min-w-0 flex-1 truncate text-sm font-medium", children: artifact.data.title }), href ? (_jsx(Button, { asChild: true, size: "sm", variant: "ghost", children: _jsxs(Link, { href: `${href}/${artifact.data.artifact_id}`, children: [_jsx(ArrowSquareOutIcon, {}), t('openArtifact')] }) })) : null] }), _jsx("iframe", { src: artifact.data.view_url, title: artifact.data.title, sandbox: ARTIFACT_SANDBOX, className: "bg-background min-h-0 w-full flex-1" })] }));
+}
+/** A link: embedded in a sandboxed frame, or a card that opens it. */
+function LinkTab({ tab }) {
+    const t = useTranslations('spaces');
+    const url = tab.url ?? '';
+    const safe = /^https?:\/\//i.test(url);
+    if (safe && tab.embed) {
+        return (_jsx("iframe", { src: url, title: tab.label || hostOf(url), 
+            // As a board's iframe block: a Kortix origin gets an opaque origin (space-blocks.tsx).
+            sandbox: framePolicy('app', url).sandbox, className: "bg-background h-full w-full" }));
+    }
+    return (_jsx(Centered, { children: _jsx(EmptyState, { size: "sm", title: tab.label || hostOf(url), description: _jsx("span", { className: "font-mono wrap-anywhere", children: url }), action: safe ? (_jsx(Button, { asChild: true, size: "sm", variant: "outline", children: _jsxs("a", { href: url, target: "_blank", rel: "noopener noreferrer", children: [_jsx(ArrowSquareOutIcon, {}), t('openLink', { host: hostOf(url) })] }) })) : null }) }));
+}

package/dist/workspace/space/space-templates.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Space templates and the pure `kortix.yaml` edits that create a space and
+ * set its tabs. A space is `spaces.<slug>` (see `ManifestSpace` in
+ * `@kortix/sdk`). Every edit round-trips through the `yaml` document model,
+ * so comments and the rest of the manifest stay as they were. Each edit rewrites
+ * every deprecated shape (`fixManifestText`): a Kortix write saves the latest shape.
+ */
+import { type SpaceTab } from '@kortix/sdk';
+export interface SpaceTemplate {
+    /** Also the catalog key of its name and hint: `spaces.templates.<id>`. */
+    id: 'standard' | 'room' | 'board';
+    /** The tabs after the room. */
+    tabs: SpaceTab[];
+}
+/** The presets the New space dialog offers, in order. The first is the default. */
+export declare function spaceTemplates(t: (key: 'tabs.board' | 'templates.board.brief' | 'templates.board.text') => string): SpaceTemplate[];
+export declare const SPACE_TEMPLATES: SpaceTemplate[];
+/** Turn a space name into a `spaces:` key. The result is also a valid room
+ *  name (the space's room is the room with its slug): at most 63 characters,
+ *  starting with a letter or a digit. */
+export declare function slugifySpace(name: string): string;
+/** Add `spaces.<slug>` to a `kortix.yaml` text. Returns the new text. */
+export declare function addSpaceToManifest(yamlText: string, input: {
+    slug: string;
+    label: string;
+    description?: string;
+    tabs: SpaceTab[];
+}): string;
+/** Replace `spaces.<slug>.tabs` in a `kortix.yaml` text, declaring the space
+ *  when only an agent names it. Returns the new text. */
+export declare function setSpaceTabs(yamlText: string, slug: string, tabs: SpaceTab[]): string;
+/** Append one tab to `spaces.<slug>.tabs` as the file has it now. A space
+ *  with no `tabs` shows the default set, so the new list starts from it. */
+export declare function appendSpaceTab(yamlText: string, slug: string, tab: SpaceTab): string;

package/dist/workspace/space/space-templates.js

@@ -0,0 +1,71 @@
+/**
+ * Space templates and the pure `kortix.yaml` edits that create a space and
+ * set its tabs. A space is `spaces.<slug>` (see `ManifestSpace` in
+ * `@kortix/sdk`). Every edit round-trips through the `yaml` document model,
+ * so comments and the rest of the manifest stay as they were. Each edit rewrites
+ * every deprecated shape (`fixManifestText`): a Kortix write saves the latest shape.
+ */
+import { fixManifestText } from '../../_vendor/kortix-shared.js';
+import { isSeq, parseDocument } from 'yaml';
+import { DEFAULT_SPACE_TABS } from '@kortix/sdk';
+import { createTranslator, defaultUiMessages } from '../../i18n/index.js';
+/** The presets the New space dialog offers, in order. The first is the default. */
+export function spaceTemplates(t) {
+    return [
+        {
+            id: 'standard',
+            tabs: [...DEFAULT_SPACE_TABS],
+        },
+        {
+            id: 'room',
+            tabs: [],
+        },
+        {
+            id: 'board',
+            tabs: [
+                { type: 'board', label: t('tabs.board'), blocks: [{ type: 'text', label: t('templates.board.brief'), text: t('templates.board.text') }] },
+                { type: 'goals' },
+            ],
+        },
+    ];
+}
+export const SPACE_TEMPLATES = spaceTemplates(createTranslator({ locale: 'en', messages: defaultUiMessages, namespace: 'spaces' }));
+/** Turn a space name into a `spaces:` key. The result is also a valid room
+ *  name (the space's room is the room with its slug): at most 63 characters,
+ *  starting with a letter or a digit. */
+export function slugifySpace(name) {
+    const trim = (value) => value.replace(/^[-_]+|[-_]+$/g, '');
+    return (trim(trim(name
+        .toLowerCase()
+        .replace(/[^a-z0-9_-]+/g, '-')
+        .replace(/-{2,}/g, '-')).slice(0, 63)) || 'space');
+}
+function editManifest(yamlText, edit) {
+    // The line, not the key: a comment above it stays.
+    const doc = parseDocument(fixManifestText(yamlText).text);
+    edit(doc);
+    return doc.toString();
+}
+/** Add `spaces.<slug>` to a `kortix.yaml` text. Returns the new text. */
+export function addSpaceToManifest(yamlText, input) {
+    const description = input.description?.trim();
+    return editManifest(yamlText, (doc) => doc.setIn(['spaces', input.slug], {
+        label: input.label,
+        ...(description ? { description } : {}),
+        tabs: input.tabs,
+    }));
+}
+/** Replace `spaces.<slug>.tabs` in a `kortix.yaml` text, declaring the space
+ *  when only an agent names it. Returns the new text. */
+export function setSpaceTabs(yamlText, slug, tabs) {
+    return editManifest(yamlText, (doc) => doc.setIn(['spaces', slug, 'tabs'], tabs));
+}
+/** Append one tab to `spaces.<slug>.tabs` as the file has it now. A space
+ *  with no `tabs` shows the default set, so the new list starts from it. */
+export function appendSpaceTab(yamlText, slug, tab) {
+    return editManifest(yamlText, (doc) => {
+        const current = doc.getIn(['spaces', slug, 'tabs']);
+        const tabs = isSeq(current) ? current.toJSON() : [...DEFAULT_SPACE_TABS];
+        doc.setIn(['spaces', slug, 'tabs'], [...tabs, tab]);
+    });
+}

package/dist/workspace/space/use-space-filter.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The space a list page (Goals, Artifacts) filters to: the `?space=` param
+ * (a space home's "View all" link), else the active space, else
+ * `ALL_SPACES`. A value that names no space of the project (a removed space
+ * still stored as active) is `ALL_SPACES`. `PROJECT_WIDE_SPACE` selects
+ * the project-wide items. Choosing one makes it the active space and drops
+ * the param, so the sidebar, the home and the page agree. With the spaces
+ * flag off (`project_channels`) it is always `ALL_SPACES`.
+ */
+export declare function useSpaceFilter(projectId: string): [string, (value: string) => void];

package/dist/workspace/space/use-space-filter.js

@@ -0,0 +1,40 @@
+'use client';
+import { PROJECT_WIDE_SPACE, listSpaces } from '@kortix/sdk';
+import { useProjectConfig } from '@kortix/sdk/react';
+import { ALL_SPACES } from '../../customize/shared/catalog/catalog-space-tabs.js';
+import { useActiveSpace } from '../../internal/stores/active-space-store.js';
+import { useUiPathname, useUiRouter, useUiSearchParams } from '../../providers/ui-provider.js';
+import { useSpacesEnabled } from '../../internal/lib/space-scope.js';
+/**
+ * The space a list page (Goals, Artifacts) filters to: the `?space=` param
+ * (a space home's "View all" link), else the active space, else
+ * `ALL_SPACES`. A value that names no space of the project (a removed space
+ * still stored as active) is `ALL_SPACES`. `PROJECT_WIDE_SPACE` selects
+ * the project-wide items. Choosing one makes it the active space and drops
+ * the param, so the sidebar, the home and the page agree. With the spaces
+ * flag off (`project_channels`) it is always `ALL_SPACES`.
+ */
+export function useSpaceFilter(projectId) {
+    const [active, setActive] = useActiveSpace(projectId);
+    const config = useProjectConfig(projectId);
+    const searchParams = useUiSearchParams();
+    const router = useUiRouter();
+    const pathname = useUiPathname();
+    const spacesOn = useSpacesEnabled(projectId);
+    const param = searchParams.get('space');
+    const raw = param || active || ALL_SPACES;
+    const known = raw === ALL_SPACES ||
+        raw === PROJECT_WIDE_SPACE ||
+        !config ||
+        listSpaces(config).some((space) => space.name === raw);
+    const value = spacesOn && known ? raw : ALL_SPACES;
+    const onChange = (next) => {
+        // Project-wide is a filter of this page, not a space to make active.
+        setActive(next === ALL_SPACES || next === PROJECT_WIDE_SPACE ? null : next);
+        if (next === PROJECT_WIDE_SPACE)
+            router.replace(`${pathname}?space=${PROJECT_WIDE_SPACE}`);
+        else if (param)
+            router.replace(pathname);
+    };
+    return [value, onChange];
+}

package/dist/workspace/space/use-space-manifest.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Edit the project's `kortix.yaml` on its default branch: read the file,
+ * apply `change` to its text, write it back against the revision it read (a
+ * concurrent edit answers 409 instead of being overwritten), then refetch the
+ * config. Each call is one commit, the same write My Kortix makes through a
+ * change request.
+ */
+export declare function useManifestWrite(projectId: string): (change: (yamlText: string) => string) => Promise<void>;

package/dist/workspace/space/use-space-manifest.js

@@ -0,0 +1,27 @@
+'use client';
+import { useQueryClient } from '@tanstack/react-query';
+import { getProjectDetail, readProjectFile, writeProjectFile } from '@kortix/sdk';
+import { qk } from '@kortix/sdk/react';
+/**
+ * Edit the project's `kortix.yaml` on its default branch: read the file,
+ * apply `change` to its text, write it back against the revision it read (a
+ * concurrent edit answers 409 instead of being overwritten), then refetch the
+ * config. Each call is one commit, the same write My Kortix makes through a
+ * change request.
+ */
+export function useManifestWrite(projectId) {
+    const queryClient = useQueryClient();
+    return async (change) => {
+        const detail = await queryClient.fetchQuery({
+            queryKey: qk.project.detail(projectId),
+            queryFn: () => getProjectDetail(projectId),
+        });
+        const path = detail.config?.manifest_health?.path || detail.project.manifest_path || 'kortix.yaml';
+        const ref = detail.project.default_branch || 'main';
+        const file = await readProjectFile(projectId, path, ref);
+        if (!file.revision)
+            throw new Error(`Could not read ${path}.`);
+        await writeProjectFile(projectId, { path, ref, content: change(file.content), expected_revision: file.revision });
+        await queryClient.invalidateQueries({ queryKey: qk.project.detail(projectId) });
+    };
+}

package/dist/workspace/spaces/space-timeline.js

@@ -1,4 +1,4 @@
-import { capitalizeWords, isMetaAgentName, META_AGENT_DISPLAY_NAME } from '../../_vendor/kortix-shared.js';
+import { capitalizeWords, isMyKortixAgentName, MY_KORTIX_DISPLAY_NAME } from '../../_vendor/kortix-shared.js';
 import { relativeTime } from '../../internal/lib/relative-time.js';
 import { sessionDisplayLabel, sessionDisplayStatus } from '../../session/actions/session-label.js';
 import { parseAgentMentionReferences, parseFileMentionReferences, parseFileReferences, parseSessionReferences, stripReplyContexts, } from '../../session/thread/message-parsing.js';
@@ -105,7 +105,7 @@ export function firstPromptTruncated(session) {
 export const DEFAULT_AGENT_SLUG = 'kortix';
 /** An agent's display name: the sidebar's DM row and the space view say it the same way. */
 export function agentLabel(name) {
-    return isMetaAgentName(name) ? META_AGENT_DISPLAY_NAME : capitalizeWords(name);
+    return isMyKortixAgentName(name) ? MY_KORTIX_DISPLAY_NAME : capitalizeWords(name);
 }
 /**
  * Who is in a space, as far as its loaded threads tell: the people who