@kortix/ui 0.14.12 → 0.14.14

package/dist/workspace/sidebar/project-session-list.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { sessionIdFromPath, uiRoutes } from '../../lib/routes.js';
 import { useTranslations } from '../../i18n/index.js';
 import { HoverPrefetchLink } from '../../internal/components/hover-prefetch-link.js';
-import { isMetaCoordinatorSession, matchesSourceFilters, matchesStatusFilters, sessionCanBeStopped, sessionDisplayStatus, sessionIsShared, sessionSource, } from '../../session/actions/session-label.js';
+import { matchesSourceFilters, matchesStatusFilters, sessionCanBeStopped, sessionDisplayStatus, sessionIsShared, sessionSource, } from '../../session/actions/session-label.js';
 import { SessionSharedIcon } from '../projects/session-shared-icon.js';
 import { Button } from '../../primitives/button.js';
 import { CountBadge } from '../../primitives/count-badge.js';
@@ -23,6 +23,7 @@ import { SessionStarterMark, useSessionStarter, } from '../sessions/session-star
 import { SessionsEmptyState } from '../sessions/sessions-empty-state.js';
 import { RenameSessionModal } from './modal/rename-session-modal.js';
 import { SessionDeleteModal } from '../../session/actions/session-delete-modal.js';
+import { subagentTitle } from '../../session/agents/agent-model.js';
 import { SessionLabelsModal } from './modal/session-labels-modal.js';
 import { ShareSessionModal } from './modal/share-session-modal.js';
 import { getSessionDisplayTitle, groupChangeRequestsBySession, projectSessionsRefetchInterval, resolveSessionListViewState, shortRelative, starterSectionOf, } from '../../session/actions/project-session-list-helpers.js';
@@ -42,11 +43,11 @@ import { selectCollapsedSections, selectGroupMode, selectHiddenSections, selectL
 import { shouldBeginSessionSwitch, useSessionSwitchStore } from '../../internal/stores/session-switch-store.js';
 import { directSubsessions, createProjectSession, listChangeRequests, restartProjectSession, sessionParentId, stopProjectSession, } from '@kortix/sdk';
 import { qk, useProjectSession, useProjectSessions, useRuntimeSupports, useSessionChildren, useFeatureFlag, useProjectSessionGroups, useSessionGoal, } from '@kortix/sdk/react';
-import { ArchiveIcon, ArrowsSplitIcon, CaretRightIcon, CheckIcon, DotsThreeIcon, FolderSimpleIcon, FolderSimpleMinusIcon, FolderSimplePlusIcon, PushPinIcon, PushPinSlashIcon, RobotIcon, GitForkIcon, PencilSimpleIcon, ArrowCounterClockwiseIcon as RotateCcw, ShareIcon as Share, SparkleIcon, TargetIcon, SquareIcon as Square, TagIcon, TrashIcon, TreeViewIcon, } from '@phosphor-icons/react';
+import { ArchiveIcon, ArrowsSplitIcon, CaretRightIcon, CheckIcon, DotsThreeIcon, FolderSimpleIcon, FolderSimpleMinusIcon, FolderSimplePlusIcon, PushPinIcon, PushPinSlashIcon, RobotIcon, GitForkIcon, PencilSimpleIcon, ArrowCounterClockwiseIcon as RotateCcw, ShareIcon as Share, TargetIcon, SquareIcon as Square, TagIcon, TrashIcon, TreeViewIcon, } from '@phosphor-icons/react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { formatDistanceToNowStrict } from 'date-fns';
 import { useUiPathname, useUiRouter, useUiSearchParams, useUiViewerId } from '../../providers/ui-provider.js';
-import { useEffect, useId, useMemo, useState } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useSessionListActions } from '../../session/actions/use-session-list-actions.js';
 import { Separator } from '../../primitives/separator.js';
 const SESSION_RELATIVE_TIME_CLASS = 'text-muted-foreground block w-10 min-w-10 max-w-10 shrink-0 truncate text-right text-xs tabular-nums';
@@ -76,6 +77,8 @@ const SESSION_RELATIVE_TIME_CLASS = 'text-muted-foreground block w-10 min-w-10 m
 const SESSION_MENU_TRIGGER_TOUCH_CLASS = cn("max-md:pointer-events-auto max-md:relative max-md:size-8 max-md:translate-y-0 max-md:opacity-100 max-md:after:absolute max-md:after:-inset-2 max-md:after:content-['']", "[@media(hover:none)]:pointer-events-auto [@media(hover:none)]:relative [@media(hover:none)]:size-8 [@media(hover:none)]:translate-y-0 [@media(hover:none)]:opacity-100 [@media(hover:none)]:after:absolute [@media(hover:none)]:after:-inset-2 [@media(hover:none)]:after:content-['']", "pointer-coarse:pointer-events-auto pointer-coarse:relative pointer-coarse:size-8 pointer-coarse:translate-y-0 pointer-coarse:opacity-100 pointer-coarse:after:absolute pointer-coarse:after:-inset-2 pointer-coarse:after:content-['']");
 /** The Pinned section's id in the collapsed-sections store: open unless closed. */
 const PINNED_SECTION_ID = 'section:pinned';
+/** The whole Sessions list, collapsed from its header (same store as the sections). */
+const SESSIONS_SECTION_ID = 'section:sessions';
 /** The newest change requests the session briefs read: one server page. */
 const SIDEBAR_CHANGE_REQUEST_LIMIT = 50;
 // Staggered (unique) widths so the loading state reads as a list of rows, not a
@@ -198,6 +201,27 @@ export function ProjectSessionList({ projectId }) {
         if (activeSection)
             setExpanded(projectId, `section:${activeSection}`, true);
     }, [projectId, activeParentId, activeSection, setExpanded]);
+    // The session you are in opens when it spawns a session, so the new row is
+    // in view. Only a rise while you watch opens it: a row you closed stays
+    // closed on every later read.
+    const activeChildCount = [sessions, pinnedQuery.sessions, sharedQuery.sessions, automatedQuery.sessions]
+        .flat()
+        .find((session) => session.session_id === activeSessionId)?.child_count ?? null;
+    const seenChildCount = useRef({
+        sessionId: null,
+        count: null,
+    });
+    useEffect(() => {
+        const seen = seenChildCount.current;
+        if (activeSessionId &&
+            seen.sessionId === activeSessionId &&
+            seen.count !== null &&
+            activeChildCount !== null &&
+            activeChildCount > seen.count) {
+            setExpanded(projectId, activeSessionId, true);
+        }
+        seenChildCount.current = { sessionId: activeSessionId ?? null, count: activeChildCount };
+    }, [projectId, activeSessionId, activeChildCount, setExpanded]);
     // The brief is a session record, not a Review Center inbox. It therefore
     // loads every CR state, not only the ones awaiting review: the newest
     // SIDEBAR_CHANGE_REQUEST_LIMIT of them, which belong to the recent sessions
@@ -311,7 +335,7 @@ export function ProjectSessionList({ projectId }) {
                         if (shouldBeginSessionSwitch(event, session.session_id, activeSessionId)) {
                             beginSessionSwitch(session.session_id);
                         }
-                    }, displayTitle: getSessionDisplayTitle(session), inSharedGroup: inSharedGroup, spawned: nested, subagentCount: children.length, spawnedCount: spawnedCount, childRunsOpen: childRunsOpen, onToggleChildRuns: () => toggleExpanded(projectId, session.session_id), reviewCount: needsYouBySession[session.session_id] ?? 0, awaitingAnswer: awaitingAnswer.has(session.session_id), changeRequests: changeRequestsBySession.get(session.session_id) ?? [], canShowHoverCard: canShowSessionHoverCard, onDelete: (id, label) => setSessionToDelete({ id, label }), onPin: (id, pinned) => void listActions.setPinned(id, pinned), onArchive: (id, archived) => void listActions.setArchived(id, archived), onShare: (s) => setSessionToShare(s), onRename: (id, name) => setSessionToRename({ id, name }), onEditLabels: setSessionToLabel, 
+                    }, displayTitle: nested ? subagentTitle(getSessionDisplayTitle(session)) : getSessionDisplayTitle(session), inSharedGroup: inSharedGroup, spawned: nested, subagentCount: children.length, spawnedCount: spawnedCount, childRunsOpen: childRunsOpen, onToggleChildRuns: () => toggleExpanded(projectId, session.session_id), reviewCount: needsYouBySession[session.session_id] ?? 0, awaitingAnswer: awaitingAnswer.has(session.session_id), changeRequests: changeRequestsBySession.get(session.session_id) ?? [], canShowHoverCard: canShowSessionHoverCard, onDelete: (id, label) => setSessionToDelete({ id, label }), onPin: (id, pinned) => void listActions.setPinned(id, pinned), onArchive: (id, archived) => void listActions.setArchived(id, archived), onShare: (s) => setSessionToShare(s), onRename: (id, name) => setSessionToRename({ id, name }), onEditLabels: setSessionToLabel, 
                     // Top-level sessions only: a spawned session stays with its parent,
                     // also where it shows on its own (Pinned).
                     groups: groupsEnabled && !nested && sessionParentId(session) === null ? groups : undefined, onMoveToGroup: (id, groupId) => void groupActions.move(id, groupId, { toast: true }), onNewGroupFor: (id) => setGroupCreate({ fileSessionId: id }), onDragStart: groupsEnabled && !nested && sessionParentId(session) === null
@@ -374,7 +398,7 @@ export function ProjectSessionList({ projectId }) {
                     !sharedQuery.hasNextPage &&
                     !automatedQuery.hasNextPage && (_jsx(FirstChatRow, { projectId: projectId, isActive: pathname === uiRoutes().project(projectId) && isFirstChatRequested(searchParams) }))] }));
     }
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col space-y-px", children: [_jsx(SessionListHeader, { projectId: projectId, sessions: sessions, reviewCountBySession: needsYouBySession, onMenuOpenChange: holdPeek, onNewGroup: groupsEnabled ? () => setGroupCreate({ fileSessionId: null }) : undefined }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: renderBody() }), _jsx(ShareSessionModal, { projectId: projectId, session: sessionToShare, open: !!sessionToShare, onOpenChange: (open) => !open && setSessionToShare(null), onSaved: () => queryClient.invalidateQueries({ queryKey: qk.project.sessionsScope(projectId) }) }), _jsx(SessionLabelsModal, { projectId: projectId, session: sessionToLabel, open: !!sessionToLabel, onOpenChange: (open) => !open && setSessionToLabel(null) }), _jsx(RenameSessionModal, { projectId: projectId, sessionId: sessionToRename?.id ?? null, currentName: sessionToRename?.name, open: !!sessionToRename, onOpenChange: (open) => !open && setSessionToRename(null) }), groupsEnabled && (_jsx(SessionGroupNameModal, { projectId: projectId, group: groupToRename, open: !!groupToRename || !!groupCreate, onOpenChange: (open) => {
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col space-y-px", children: [_jsxs(Disclosure, { open: !collapsedSectionIds.has(SESSIONS_SECTION_ID), onOpenChange: () => toggleSectionCollapsed(projectId, SESSIONS_SECTION_ID), className: "group/sessions flex min-h-0 flex-1 flex-col space-y-px", transition: { duration: 0.15, ease: 'easeOut' }, children: [_jsx(SessionListHeader, { projectId: projectId, sessions: sessions, reviewCountBySession: needsYouBySession, onMenuOpenChange: holdPeek, onNewGroup: groupsEnabled ? () => setGroupCreate({ fileSessionId: null }) : undefined }), _jsx(DisclosureContent, { className: "flex min-h-0 flex-1 flex-col", contentClassName: "flex min-h-0 flex-1 flex-col overflow-hidden", children: renderBody() })] }), _jsx(ShareSessionModal, { projectId: projectId, session: sessionToShare, open: !!sessionToShare, onOpenChange: (open) => !open && setSessionToShare(null), onSaved: () => queryClient.invalidateQueries({ queryKey: qk.project.sessionsScope(projectId) }) }), _jsx(SessionLabelsModal, { projectId: projectId, session: sessionToLabel, open: !!sessionToLabel, onOpenChange: (open) => !open && setSessionToLabel(null) }), _jsx(RenameSessionModal, { projectId: projectId, sessionId: sessionToRename?.id ?? null, currentName: sessionToRename?.name, open: !!sessionToRename, onOpenChange: (open) => !open && setSessionToRename(null) }), groupsEnabled && (_jsx(SessionGroupNameModal, { projectId: projectId, group: groupToRename, open: !!groupToRename || !!groupCreate, onOpenChange: (open) => {
                     if (open)
                         return;
                     setGroupToRename(null);
@@ -389,14 +413,14 @@ export function ProjectSessionList({ projectId }) {
  *  — because everything it needs (the session list, the review summary, the
  *  filter facets) is already read by `ProjectSessionList`; hoisting it up meant
  *  a second `qk.project.sessions(projectId)` query and two files owning the
- *  same horizontal padding. The label opens the full sessions page; the `⋯`
- *  opens the nested Grouping/Ordering/Show/Filters menu (`SessionFilterMenu`)
- *  and appears whenever there is at least one session. */
+ *  same horizontal padding. The label is the trigger of the list's disclosure
+ *  (a caret on hover, the sidebar row's rounded hover fill); the full sessions
+ *  page is the first item of the `⋯` menu (`SessionFilterMenu`), which appears
+ *  whenever there is at least one session. */
 function SessionListHeader({ projectId, sessions, reviewCountBySession, onMenuOpenChange, onNewGroup, }) {
     const t = useTranslations('sidebar');
     const tGroups = useTranslations('sidebar.sessionGroups');
-    const sessionsHref = uiRoutes().sessions(projectId);
-    return (_jsxs("div", { className: cn('flex w-full shrink-0 flex-row items-center gap-1 px-2', SESSION_ROW_HEIGHT_CLASS), children: [sessionsHref ? (_jsx(HoverPrefetchLink, { href: sessionsHref, className: "text-muted-foreground hover:text-sidebar-foreground flex min-w-0 flex-1 flex-row items-center self-stretch text-sm font-medium", children: _jsx("span", { className: "truncate", children: t('sessions') }) })) : (_jsx("span", { className: "text-muted-foreground flex min-w-0 flex-1 flex-row items-center self-stretch text-sm font-medium", children: _jsx("span", { className: "truncate", children: t('sessions') }) })), onNewGroup && (_jsx(Hint, { side: "top", label: tGroups('newGroup'), children: _jsx(Button, { variant: "ghost", size: "icon-xs", type: "button", "aria-label": tGroups('newGroup'), className: SESSION_MENU_TRIGGER_CLASS, onClick: onNewGroup, children: _jsx(FolderSimplePlusIcon, { className: "size-4" }) }) })), sessions.length > 0 && (_jsxs(DropdownMenu, { onOpenChange: onMenuOpenChange, children: [_jsx(SessionFilterMenu, { projectId: projectId, sessions: sessions, reviewCountBySession: reviewCountBySession, align: "start" }), _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-xs", type: "button", "aria-label": t('sessionViewOptions'), className: SESSION_MENU_TRIGGER_CLASS, children: _jsx(DotsThreeIcon, { className: "size-4" }) }) })] }))] }));
+    return (_jsxs("div", { className: cn('group/sessions-header hover:bg-sidebar-row flex w-full shrink-0 flex-row items-center gap-1 rounded-md px-2 transition-colors', SESSION_ROW_HEIGHT_CLASS), children: [_jsx(DisclosureTrigger, { children: _jsxs("div", { className: "text-muted-foreground group-hover/sessions-header:text-sidebar-foreground flex min-w-0 flex-1 cursor-pointer flex-row items-center gap-1 self-stretch text-sm font-medium focus-visible:outline-none", children: [_jsx("span", { className: "truncate", children: t('sessions') }), _jsx(CaretRightIcon, { "aria-hidden": true, className: "duration-normal size-3 shrink-0 opacity-0 transition-transform ease-out group-hover/sessions-header:opacity-100 group-data-[state=open]/sessions:rotate-90" })] }) }), onNewGroup && (_jsx(Hint, { side: "top", label: tGroups('newGroup'), children: _jsx(Button, { variant: "ghost", size: "icon-xs", type: "button", "aria-label": tGroups('newGroup'), className: SESSION_MENU_TRIGGER_CLASS, onClick: onNewGroup, children: _jsx(FolderSimplePlusIcon, { className: "size-4" }) }) })), sessions.length > 0 && (_jsxs(DropdownMenu, { onOpenChange: onMenuOpenChange, children: [_jsx(SessionFilterMenu, { projectId: projectId, sessions: sessions, reviewCountBySession: reviewCountBySession, align: "start" }), _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-xs", type: "button", "aria-label": t('sessionViewOptions'), className: SESSION_MENU_TRIGGER_CLASS, children: _jsx(DotsThreeIcon, { className: "size-4" }) }) })] }))] }));
 }
 /** Non-sticky by design: FadedScrollArea masks its own edges, and a sticky
  *  header fights that mask.
@@ -535,7 +559,6 @@ function ProjectSessionRow({ session, href, isActive, isSwitching, onNavigate, d
         requestAnimationFrame(() => fn());
     };
     const source = sessionSource(session, tI18nComplete);
-    const isMeta = isMetaCoordinatorSession(session);
     // The conversation the runtime can fork: the pinned root conversation id,
     // not the project-session id — `POST /session/{id}/fork` addresses the
     // runtime's own id space (`ses_…`). canFork already guarantees one.
@@ -558,7 +581,7 @@ function ProjectSessionRow({ session, href, isActive, isSwitching, onNavigate, d
     // same `reviewCount` prop, so they agree by construction rather than by luck.
     const displayStatus = sessionDisplayStatus(session, reviewCount);
     const waitingOn = awaitingAnswer ? 'answer' : 'review';
-    const sessionLink = (_jsxs(HoverPrefetchLink, { href: href, prefetch: true, onClick: onNavigate, ...openIntent, "aria-busy": isSwitching || undefined, "aria-current": isActive ? 'page' : undefined, "aria-describedby": descriptionId, className: "focus-visible:ring-kortix-base flex min-w-0 flex-1 items-center gap-2 self-stretch rounded-md py-1 focus-visible:ring-[0.6px] focus-visible:outline-none", children: [_jsx("div", { className: "size-4 shrink-0", children: spawned ? (_jsx(ArrowsSplitIcon, { "aria-hidden": true, className: "text-muted-foreground size-4" })) : (_jsx(SessionStatusDot, { session: session, reviewCount: reviewCount, waitingOn: waitingOn, changeRequests: changeRequests })) }), _jsx(SessionGoalMark, { projectId: session.project_id, sessionId: session.session_id }), isMeta && (_jsx(Hint, { side: "top", label: t('metaCoordinator'), children: _jsx("span", { className: "text-muted-foreground flex size-4 shrink-0 items-center justify-center", children: _jsx(SparkleIcon, { className: "size-3.5", weight: "fill" }) }) })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx(SessionTitle, { title: displayTitle, className: cn('min-w-0', isActive && 'font-medium') }), _jsx("span", { className: "hidden max-md:block pointer-coarse:block [@media(hover:none)]:block", "aria-hidden": true, "data-session-mobile-created-at": "true", children: _jsx(MobileSessionCreatedTime, { createdAt: session.created_at }) })] }), subagentCount + spawnedCount > 0 && onToggleChildRuns && (_jsx(ChildRunsToggle, { count: subagentCount + spawnedCount, open: childRunsOpen, onToggle: onToggleChildRuns, clearOfMenu: !hasIndicators })), hasIndicators && (_jsxs("div", { className: cn('flex shrink-0 items-center gap-0 transition-none', 'max-md:hidden pointer-coarse:hidden [@media(hover:none)]:hidden', 'group-hover/session-list:pointer-events-none group-hover/session-list:opacity-0', 'group-has-data-[state=open]/session-list:pointer-events-none group-has-data-[state=open]/session-list:opacity-0'), "data-session-indicators": "true", children: [showStarter && (_jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", "data-session-source": "true", "data-session-starter": starter.type, children: _jsx(Hint, { side: "top", label: t('startedByLabel', { name: starter.label }), children: _jsx("span", { className: "text-muted-foreground flex size-5 items-center justify-center", children: _jsx(SessionStarterMark, { session: session, starter: starter, iconClassName: "size-3", avatarClassName: "size-5" }) }) }) })), !inSharedGroup && _jsx(SessionSharedIcon, { session: session })] }))] }));
+    const sessionLink = (_jsxs(HoverPrefetchLink, { href: href, prefetch: true, onClick: onNavigate, ...openIntent, "aria-busy": isSwitching || undefined, "aria-current": isActive ? 'page' : undefined, "aria-describedby": descriptionId, className: "focus-visible:ring-kortix-base flex min-w-0 flex-1 items-center gap-2 self-stretch rounded-md py-1 focus-visible:ring-[0.6px] focus-visible:outline-none", children: [_jsx("div", { className: "size-4 shrink-0", children: spawned ? (_jsx(ArrowsSplitIcon, { "aria-hidden": true, className: "text-muted-foreground size-4" })) : (_jsx(SessionStatusDot, { session: session, reviewCount: reviewCount, waitingOn: waitingOn, changeRequests: changeRequests })) }), _jsx(SessionGoalMark, { projectId: session.project_id, sessionId: session.session_id }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx(SessionTitle, { title: displayTitle, className: cn('min-w-0', isActive && 'font-medium') }), _jsx("span", { className: "hidden max-md:block pointer-coarse:block [@media(hover:none)]:block", "aria-hidden": true, "data-session-mobile-created-at": "true", children: _jsx(MobileSessionCreatedTime, { createdAt: session.created_at }) })] }), subagentCount + spawnedCount > 0 && onToggleChildRuns && (_jsx(ChildRunsToggle, { count: subagentCount + spawnedCount, open: childRunsOpen, onToggle: onToggleChildRuns, clearOfMenu: !hasIndicators })), hasIndicators && (_jsxs("div", { className: cn('flex shrink-0 items-center gap-0 transition-none', 'max-md:hidden pointer-coarse:hidden [@media(hover:none)]:hidden', 'group-hover/session-list:pointer-events-none group-hover/session-list:opacity-0', 'group-has-data-[state=open]/session-list:pointer-events-none group-has-data-[state=open]/session-list:opacity-0'), "data-session-indicators": "true", children: [showStarter && (_jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", "data-session-source": "true", "data-session-starter": starter.type, children: _jsx(Hint, { side: "top", label: t('startedByLabel', { name: starter.label }), children: _jsx("span", { className: "text-muted-foreground flex size-5 items-center justify-center", children: _jsx(SessionStarterMark, { session: session, starter: starter, iconClassName: "size-3", avatarClassName: "size-5" }) }) }) })), !inSharedGroup && _jsx(SessionSharedIcon, { session: session })] }))] }));
     return (_jsx("div", { className: "group/session-list block", onDragStart: onDragStart, children: _jsxs("div", { className: cn(
             // --session-row-surface paints the row AND the title fade in the same
             // style pass. Do not transition background — transition-colors made the

package/dist/workspace/sidebar/project-sidebar.js

@@ -10,10 +10,11 @@ import { ComputerConnectModal } from '../../internal/tunnel/computer-connect.js'
 import { ConnectMcpModal } from '../../internal/layout/connect-mcp-modal.js';
 import { ProjectMcpNavItem } from './footer/project-mcp-nav.js';
 import { ProjectComputerNavItem } from './footer/project-computer-nav.js';
-import { ProjectManifestUpgradeAlert } from './footer/project-manifest-upgrade-alert.js';
+import { ProjectManifestIssuesAlert } from './footer/project-manifest-issues-alert.js';
 import { ProjectSandboxAlert } from './footer/project-sandbox-alert.js';
 import { ProjectRepositoryDisconnectedAlert } from '../repository-disconnected.js';
 import { CustomizeSidebarModal } from './customize-sidebar-modal.js';
+import { NewAgentModalProvider } from './new-agent-modal-provider.js';
 import { ProjectMemoryNavItem } from './footer/project-memory-nav.js';
 import { ProjectNavItems } from './project-nav-items.js';
 import { ProjectSessionList } from './project-session-list.js';
@@ -95,7 +96,9 @@ export function ProjectSidebar({ projectId, menu, onOpenSearch, }) {
         window.addEventListener('keydown', handler);
         return () => window.removeEventListener('keydown', handler);
     }, [channels, handleNewSession]);
-    return (_jsxs(_Fragment, { children: [_jsxs(Sidebar, { collapsible: "offcanvas", variant: "inset", 
+    return (
+    // The New agent modal mounts beside <Sidebar>, outside the mobile sheet.
+    _jsxs(NewAgentModalProvider, { projectId: projectId, children: [_jsxs(Sidebar, { collapsible: "offcanvas", variant: "inset", 
                 // No background here. This className lands on the sidebar CONTAINER —
                 // the square positioning box — while the visible card is the rounded
                 // inner box, which already carries `bg-sidebar`. Painting it twice put a
@@ -108,5 +111,5 @@ export function ProjectSidebar({ projectId, menu, onOpenSearch, }) {
                                                 // box clears the 44px floor with the vertical-only extension —
                                                 // vertical-only because this titlebar row packs several
                                                 // controls side by side (KRTX-2004).
-                                                className: "shrink-0 hit-area-y-3", children: _jsx(MagnifyingGlassIcon, { className: "size-4" }) }) })), isMobile && (_jsx(Button, { type: "button", "aria-label": tCommon('close'), variant: "ghost", size: "icon", onClick: () => setOpenMobile(false), className: "shrink-0 hit-area-y-3", children: _jsx(Close, {}) })), !isMobile && !peek && (_jsx(Hint, { side: "bottom", label: _jsxs("span", { className: "flex items-center gap-1.5", children: [isExpanded ? t('collapse') : t('pin'), _jsxs(KbdGroup, { children: [_jsx(Kbd, { className: "font-mono", children: modSymbol }), _jsx(Kbd, { className: "font-mono", children: "B" })] })] }), children: _jsx(Button, { type: "button", "aria-label": isExpanded ? t('collapse') : t('pin'), variant: "ghost", size: "icon", onClick: toggleSidebar, className: "shrink-0", children: _jsx(PanelLeft, { className: "cn-rtl-flip" }) }) }))] })] }) }), _jsx(SidebarContent, { className: "relative min-h-0 flex-1 [scrollbar-width:'none'] overflow-hidden [-ms-overflow-style:'none'] [&::-webkit-scrollbar]:hidden [&_[data-sidebar=menu-button]]:pl-2", children: _jsxs("div", { className: "flex h-full min-h-0 flex-col space-y-2", children: [_jsx(SidebarGroup, { className: "py-0", children: _jsxs(SidebarMenu, { children: [channels ? null : (_jsx(SidebarMenuItem, { children: creatingSession ? (_jsx(SidebarMenuButton, { disabled: true, "aria-busy": true, className: "group/menu-button text-sidebar-foreground relative", children: newSessionRowBody })) : (_jsx(SidebarMenuButton, { asChild: true, className: "group/menu-button text-sidebar-foreground relative", children: _jsx(Link, { href: uiRoutes().project(projectId), prefetch: true, onClick: handleNewSessionClick, children: newSessionRowBody }) })) })), channels ? _jsx(ProjectMemoryNavItem, { projectId: projectId }) : null, _jsx(ProjectNavItems, { projectId: projectId })] }) }), _jsx(SidebarGroup, { className: "min-h-0 flex-1 flex-col py-0", ref: sessionsGroupRef, children: channels ? (_jsx(ProjectSpacesNav, { projectId: projectId })) : (_jsx(ProjectSessionList, { projectId: projectId })) }), _jsx(SidebarGroup, { className: "mt-auto", children: _jsxs(SidebarMenu, { className: "gap-1", children: [_jsx(ProjectRepositoryDisconnectedAlert, { projectId: projectId }), _jsx(ProjectSandboxAlert, { projectId: projectId }), _jsx(ProjectManifestUpgradeAlert, { projectId: projectId }), _jsx(SidebarBalanceWarning, { accountId: accountId }), _jsx("li", { className: "not-has-[li]:hidden", children: _jsxs(SidebarMenu, { className: "gap-px [&>li:not(:first-child)>[data-sidebar=menu-button]]:rounded-t-sm [&>li:not(:last-child)>[data-sidebar=menu-button]]:rounded-b-sm", children: [_jsx(ProjectMcpNavItem, { onOpenConnect: () => setConnectMcpOpen(true) }), _jsx(ProjectComputerNavItem, { projectId: projectId, onOpenConnect: () => setComputerConnectOpen(true) }), chrome ? (_jsx(ProjectChromeNavItem, { onOpenConnect: () => useAppsModalStore.getState().setOpen(true) })) : null] }) }), _jsx(SidebarUpgradeButton, { accountId: accountId })] }) })] }) }), _jsx(SidebarRail, { "aria-label": t('resize'), title: t('resizeHelp') })] }), _jsx(ComputerConnectModal, { projectId: projectId, open: computerConnectOpen, onOpenChange: setComputerConnectOpen }), _jsx(AppsModal, { chrome: chrome, onOpenComputer: () => setComputerConnectOpen(true), onOpenMcp: () => setConnectMcpOpen(true) }), _jsx(ConnectMcpModal, { open: connectMcpOpen, onOpenChange: setConnectMcpOpen }), _jsx(CustomizeSidebarModal, { projectId: projectId })] }));
+                                                className: "shrink-0 hit-area-y-3", children: _jsx(MagnifyingGlassIcon, { className: "size-4" }) }) })), isMobile && (_jsx(Button, { type: "button", "aria-label": tCommon('close'), variant: "ghost", size: "icon", onClick: () => setOpenMobile(false), className: "shrink-0 hit-area-y-3", children: _jsx(Close, {}) })), !isMobile && !peek && (_jsx(Hint, { side: "bottom", label: _jsxs("span", { className: "flex items-center gap-1.5", children: [isExpanded ? t('collapse') : t('pin'), _jsxs(KbdGroup, { children: [_jsx(Kbd, { className: "font-mono", children: modSymbol }), _jsx(Kbd, { className: "font-mono", children: "B" })] })] }), children: _jsx(Button, { type: "button", "aria-label": isExpanded ? t('collapse') : t('pin'), variant: "ghost", size: "icon", onClick: toggleSidebar, className: "shrink-0", children: _jsx(PanelLeft, { className: "cn-rtl-flip" }) }) }))] })] }) }), _jsx(SidebarContent, { className: "relative min-h-0 flex-1 [scrollbar-width:'none'] overflow-hidden [-ms-overflow-style:'none'] [&::-webkit-scrollbar]:hidden [&_[data-sidebar=menu-button]]:pl-2", children: _jsxs("div", { className: "flex h-full min-h-0 flex-col space-y-2", children: [_jsx(SidebarGroup, { className: "py-0", children: _jsxs(SidebarMenu, { children: [channels ? null : (_jsx(SidebarMenuItem, { children: creatingSession ? (_jsx(SidebarMenuButton, { disabled: true, "aria-busy": true, className: "group/menu-button text-sidebar-foreground relative", children: newSessionRowBody })) : (_jsx(SidebarMenuButton, { asChild: true, className: "group/menu-button text-sidebar-foreground relative", children: _jsx(Link, { href: uiRoutes().project(projectId), prefetch: true, onClick: handleNewSessionClick, children: newSessionRowBody }) })) })), channels ? _jsx(ProjectMemoryNavItem, { projectId: projectId }) : null, _jsx(ProjectNavItems, { projectId: projectId })] }) }), _jsx(SidebarGroup, { className: "min-h-0 flex-1 flex-col py-0", ref: sessionsGroupRef, children: channels ? (_jsx(ProjectSpacesNav, { projectId: projectId })) : (_jsx(ProjectSessionList, { projectId: projectId })) }), _jsx(SidebarGroup, { className: "mt-auto", children: _jsxs(SidebarMenu, { className: "gap-1", children: [_jsx(ProjectRepositoryDisconnectedAlert, { projectId: projectId }), _jsx(ProjectSandboxAlert, { projectId: projectId }), _jsx(ProjectManifestIssuesAlert, { projectId: projectId }), _jsx(SidebarBalanceWarning, { accountId: accountId }), _jsx("li", { className: "not-has-[li]:hidden", children: _jsxs(SidebarMenu, { className: "gap-px [&>li:not(:first-child)>[data-sidebar=menu-button]]:rounded-t-sm [&>li:not(:last-child)>[data-sidebar=menu-button]]:rounded-b-sm", children: [_jsx(ProjectMcpNavItem, { onOpenConnect: () => setConnectMcpOpen(true) }), _jsx(ProjectComputerNavItem, { projectId: projectId, onOpenConnect: () => setComputerConnectOpen(true) }), chrome ? (_jsx(ProjectChromeNavItem, { onOpenConnect: () => useAppsModalStore.getState().setOpen(true) })) : null] }) }), _jsx(SidebarUpgradeButton, { accountId: accountId })] }) })] }) }), _jsx(SidebarRail, { "aria-label": t('resize'), title: t('resizeHelp') })] }), _jsx(ComputerConnectModal, { projectId: projectId, open: computerConnectOpen, onOpenChange: setComputerConnectOpen }), _jsx(AppsModal, { chrome: chrome, onOpenComputer: () => setComputerConnectOpen(true), onOpenMcp: () => setConnectMcpOpen(true) }), _jsx(ConnectMcpModal, { open: connectMcpOpen, onOpenChange: setConnectMcpOpen }), _jsx(CustomizeSidebarModal, { projectId: projectId })] }));
 }

package/dist/workspace/sidebar/session-filter-menu.js

@@ -112,6 +112,7 @@ export function SessionFilterMenu({ projectId, sessions, align = 'start', side =
     const t = useTranslations('sidebar.filter');
     const tPinArchive = useTranslations('sidebar.pinArchive');
     const tDeleted = useTranslations('sidebar.recentlyDeleted');
+    const sessionsHref = uiRoutes().sessions(projectId);
     const archivedHref = uiRoutes().sessions(projectId, 'archived');
     const deletedHref = uiRoutes().sessions(projectId, 'deleted');
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
@@ -240,7 +241,7 @@ export function SessionFilterMenu({ projectId, sessions, align = 'start', side =
                         }) })), showAccessFacet && (_jsx(FilterSubmenu, { trigger: _jsxs(_Fragment, { children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: t('access') }), activeAccess.length > 0 && _jsx(FacetActiveDot, {})] }), className: "w-52 p-1", children: accessOptions.map((option) => {
                             const OptionIcon = SESSION_ACCESS_ICONS[option.value];
                             return (_jsxs(FilterCheckboxItem, { checked: accessFilterSet.has(option.value), onCheckedChange: () => toggleAccessFilter(projectId, option.value, surface), children: [_jsx(OptionIcon, { className: "size-4" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: accessLabels[option.value] }), _jsx(CountBadge, { count: option.count, className: "ml-auto" })] }, option.value));
-                        }) })), ' '] })), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => collapseAllSections(projectId, resolveRenderedSectionIds(sessions, groupMode, orderMode, hiddenSections, tI18nComplete, reviewCountBySession, ownerLabels), surface), children: t('collapseAll') }), !pageFacets && archivedHref && deletedHref && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuItem, { asChild: true, className: "cursor-pointer", children: _jsx(Link, { href: archivedHref, children: tPinArchive('showArchived') }) }), _jsx(DropdownMenuItem, { asChild: true, className: "cursor-pointer", children: _jsx(Link, { href: deletedHref, children: tDeleted('view') }) })] }))] }));
+                        }) })), ' '] })), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => collapseAllSections(projectId, resolveRenderedSectionIds(sessions, groupMode, orderMode, hiddenSections, tI18nComplete, reviewCountBySession, ownerLabels), surface), children: t('collapseAll') }), !pageFacets && sessionsHref && archivedHref && deletedHref && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { asChild: true, className: "cursor-pointer", children: _jsx(Link, { href: sessionsHref, children: tI18nComplete.raw('text78648d4d6649') }) }), _jsx(DropdownMenuItem, { asChild: true, className: "cursor-pointer", children: _jsx(Link, { href: archivedHref, children: tPinArchive('showArchived') }) }), _jsx(DropdownMenuItem, { asChild: true, className: "cursor-pointer", children: _jsx(Link, { href: deletedHref, children: tDeleted('view') }) })] }))] }));
 }
 function FilterSubmenu({ trigger, className, children, }) {
     return (_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: trigger }), _jsx(DropdownMenuSubContent, { className: className, children: children })] }));

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

@@ -0,0 +1,25 @@
+import type { SpaceBlock } from '@kortix/sdk';
+/**
+ * A space's board tab, rendered as a simple responsive grid of blocks.
+ *
+ * A board is agent-configurable: the agent declares the tab's `blocks` in
+ * `kortix.yaml` (`spaces.<slug>.tabs[]`, `type: board`), and this renderer
+ * lays them out — it does not decide what a board contains. v1 is deliberately flat: one card per block, two columns on
+ * `sm`, each card showing the block's `label` and its embed. No drag, no
+ * resize, no nesting — the grid IS the layout (Marko: "simple & elegant, not
+ * overwhelming").
+ *
+ * Every embed degrades gracefully: a block with its payload missing (an iframe
+ * with no `url`, an artifact with no `path`, an `app` slug that resolves to no
+ * App) renders a muted "nothing here yet" line rather than an empty frame or a
+ * crash, because the config is authored by an agent mid-edit as often as a
+ * finished one.
+ *
+ * Block renderers: `text` is markdown, `iframe` a sandboxed frame, `artifact`
+ * opens the Files viewer, `app` the live pooled `AppPreview` for the resolved
+ * slug, `chat` the project room named `room` (`SpaceRoom`, flag `agent_rooms`).
+ */
+export declare function SpaceBlocks({ projectId, blocks, }: {
+    projectId: string;
+    blocks: SpaceBlock[];
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1,124 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppAccess, useProjectApps } from '@kortix/sdk/react';
+import { AppWindowIcon, ChatCircleIcon, FileTextIcon, GlobeIcon, TextAaIcon, } from '@phosphor-icons/react';
+import { AppPreview } from '../../apps/app-preview.js';
+import { useTranslations } from '../../i18n/index.js';
+import { appCan } from '../../apps/app-shared.js';
+import { UnifiedMarkdown } from '../../markdown/index.js';
+import Loading from '../../primitives/loading.js';
+import { useFilePreviewStore } from '../../internal/stores/file-preview-store.js';
+import { framePolicy } from '../../files/viewer/preview-policy.js';
+import { cn } from '../../lib/utils.js';
+import { SpaceRoom } from './space-room.js';
+/**
+ * A space's board tab, rendered as a simple responsive grid of blocks.
+ *
+ * A board is agent-configurable: the agent declares the tab's `blocks` in
+ * `kortix.yaml` (`spaces.<slug>.tabs[]`, `type: board`), and this renderer
+ * lays them out — it does not decide what a board contains. v1 is deliberately flat: one card per block, two columns on
+ * `sm`, each card showing the block's `label` and its embed. No drag, no
+ * resize, no nesting — the grid IS the layout (Marko: "simple & elegant, not
+ * overwhelming").
+ *
+ * Every embed degrades gracefully: a block with its payload missing (an iframe
+ * with no `url`, an artifact with no `path`, an `app` slug that resolves to no
+ * App) renders a muted "nothing here yet" line rather than an empty frame or a
+ * crash, because the config is authored by an agent mid-edit as often as a
+ * finished one.
+ *
+ * Block renderers: `text` is markdown, `iframe` a sandboxed frame, `artifact`
+ * opens the Files viewer, `app` the live pooled `AppPreview` for the resolved
+ * slug, `chat` the project room named `room` (`SpaceRoom`, flag `agent_rooms`).
+ */
+export function SpaceBlocks({ projectId, blocks, }) {
+    if (!blocks.length)
+        return null;
+    return (_jsx("div", { className: "grid w-full gap-4 sm:grid-cols-2", children: blocks.map((block, index) => (_jsx(SpaceBlockCard, { projectId: projectId, block: block }, index))) }));
+}
+const TYPE_ICON = {
+    chat: ChatCircleIcon,
+    artifact: FileTextIcon,
+    app: AppWindowIcon,
+    iframe: GlobeIcon,
+    text: TextAaIcon,
+};
+const TYPE_FALLBACK_LABEL = {
+    chat: 'Chat',
+    artifact: 'Artifact',
+    app: 'App',
+    iframe: 'Embed',
+    text: 'Note',
+};
+// In flow on the page: the page surface and a hairline (color.md, in-flow section).
+const PANEL = 'bg-background flex min-w-0 flex-col overflow-hidden rounded-md border';
+function SpaceBlockCard({ projectId, block }) {
+    const openPreview = useFilePreviewStore((state) => state.openPreview);
+    const Icon = TYPE_ICON[block.type];
+    const label = block.label?.trim() || TYPE_FALLBACK_LABEL[block.type];
+    const t = useTranslations('spaces');
+    // A chat block is a room: the host's room panel draws its own frame.
+    if (block.type === 'chat') {
+        return block.room?.trim() ? (_jsx(SpaceRoom, { projectId: projectId, roomName: block.room.trim(), className: "min-w-0" })) : (_jsxs("div", { className: PANEL, children: [_jsx("div", { className: "flex items-center gap-2 px-4 py-2.5", children: _jsx(BlockTitle, { icon: Icon, label: label }) }), _jsx(EmptyLine, { children: t('noRoom') })] }));
+    }
+    // A clickable artifact is its own `<button>` (whole card opens the file), so
+    // the header is shared by the rest and skipped there.
+    if (block.type === 'artifact') {
+        if (!block.path)
+            return _jsx(EmptyBlock, { icon: Icon, label: label });
+        return (_jsxs("button", { type: "button", onClick: () => openPreview(block.path), className: cn(PANEL, 'hover:bg-hover items-start gap-1.5 px-4 py-3 text-left transition-colors'), children: [_jsx(BlockTitle, { icon: Icon, label: label }), _jsx("span", { className: "text-muted-foreground w-full truncate font-mono text-xs", children: block.path })] }));
+    }
+    return (_jsxs("div", { className: PANEL, children: [_jsx("div", { className: "flex items-center gap-2 px-4 py-2.5", children: _jsx(BlockTitle, { icon: Icon, label: label }) }), _jsx(BlockBody, { projectId: projectId, block: block })] }));
+}
+function BlockTitle({ icon: Icon, label, }) {
+    return (_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Icon, { className: "text-muted-foreground size-4 shrink-0" }), _jsx("span", { className: "text-foreground truncate text-sm font-medium", children: label })] }));
+}
+function BlockBody({ projectId, block }) {
+    const t = useTranslations('spaces');
+    switch (block.type) {
+        case 'text':
+            return block.text?.trim() ? (_jsx("div", { className: "border-border border-t px-4 py-3", children: _jsx(UnifiedMarkdown, { content: block.text, trust: "agent" }) })) : (_jsx(EmptyLine, { children: t('blocks.noContent') }));
+        case 'iframe':
+            return block.url ? (_jsx("iframe", { src: block.url, title: block.label || 'Embed', 
+                // A Kortix origin (the app, the API, the sandbox proxy) gets an opaque origin: the
+                // frame can never reach the page's tokens. Any other site keeps its own origin.
+                sandbox: framePolicy('app', block.url).sandbox, className: "border-border h-64 w-full border-t" })) : (_jsx(EmptyLine, { children: t('blocks.noUrl') }));
+        case 'app':
+            return block.app ? (_jsx(SpaceAppBlock, { projectId: projectId, slug: block.app })) : (_jsx(EmptyLine, { children: t('blocks.noApp') }));
+        default:
+            return null;
+    }
+}
+/**
+ * The live App preview for an `app` block. Resolves the block's slug against
+ * the project's App inventory, mints a short-lived access session for an App
+ * the viewer may open, and renders the same pooled `AppPreview` thumbnail the
+ * Apps page and the session browser use. Every not-ready state degrades to a
+ * muted line or `AppPreview`'s own notice — it never crashes a Space.
+ */
+function SpaceAppBlock({ projectId, slug }) {
+    const t = useTranslations('spaces');
+    const apps = useProjectApps(projectId);
+    const app = apps.data?.find((a) => a.slug === slug);
+    // A card thumbnail only needs the SESSION, and only for an App that is live
+    // and the viewer may open — matching the Apps grid, which fires neither the
+    // policy read nor the access-session mint for an App it only lists.
+    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(EmptyLine, { children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Loading, { className: "size-4 shrink-0" }), t('blocks.loadingApp')] }) }));
+    }
+    if (!app)
+        return _jsx(EmptyLine, { children: t('missing.app', { slug }) });
+    return (_jsx("div", { className: "border-border border-t", children: _jsx(AppPreview, { app: app, url: access.session.data?.url ?? null, accessError: access.session.isError, interactive: false }) }));
+}
+function EmptyLine({ children }) {
+    return (_jsx("div", { className: "border-border border-t px-4 py-3", children: _jsx("span", { className: "text-muted-foreground text-xs", children: children }) }));
+}
+function EmptyBlock({ icon: Icon, label, }) {
+    const t = useTranslations('spaces');
+    return (_jsxs("div", { className: PANEL, children: [_jsx("div", { className: "flex items-center gap-2 px-4 py-2.5", children: _jsx(BlockTitle, { icon: Icon, label: label }) }), _jsx(EmptyLine, { children: t('blocks.noFile') })] }));
+}

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

@@ -0,0 +1,17 @@
+import { type SpaceGroup, type ManifestSpace } from '@kortix/sdk';
+/**
+ * The space filter of a list page (Goals, Artifacts): `All`, one tab per
+ * space of the project (an empty one included, with 0), then `Project-wide`.
+ * Built from the spaces, not from the items, so the selected space always has
+ * a tab. Renders nothing for a project without spaces.
+ */
+export declare function SpaceFilterTabs<T>({ spaces, groups, value, onValueChange, }: {
+    /** `listSpaces(config)`. */
+    spaces: ManifestSpace[];
+    /** `groupBySpace(items, …)`: the counts. */
+    groups: Array<SpaceGroup<T>>;
+    value: string;
+    onValueChange: (value: string) => void;
+}): import("react").JSX.Element | null;
+/** The name a filtered empty state shows for `value`. */
+export declare function spaceFilterLabel(value: string, spaces: ManifestSpace[], projectWide: string): string;

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

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PROJECT_WIDE_SPACE } from '@kortix/sdk';
+import { ALL_SPACES } from '../../customize/shared/catalog/catalog-space-tabs.js';
+import { useTranslations } from '../../i18n/index.js';
+import { CountBadge } from '../../primitives/count-badge.js';
+import { Tabs, TabsListCompact, TabsTriggerCompact } from '../../primitives/tabs.js';
+/**
+ * The space filter of a list page (Goals, Artifacts): `All`, one tab per
+ * space of the project (an empty one included, with 0), then `Project-wide`.
+ * Built from the spaces, not from the items, so the selected space always has
+ * a tab. Renders nothing for a project without spaces.
+ */
+export function SpaceFilterTabs({ spaces, groups, value, onValueChange, }) {
+    const t = useTranslations('spaces');
+    if (spaces.length === 0 && value === ALL_SPACES)
+        return null;
+    const counts = new Map(groups.map((group) => [group.name, group.items.length]));
+    const tabs = [
+        ...spaces.map((space) => ({ name: space.name, label: space.label || space.name })),
+        { name: PROJECT_WIDE_SPACE, label: t('projectWide') },
+    ];
+    return (_jsx(Tabs, { value: value, onValueChange: onValueChange, className: "max-w-full overflow-x-auto", children: _jsxs(TabsListCompact, { "aria-label": t('filter'), children: [_jsx(TabsTriggerCompact, { value: ALL_SPACES, children: t('all') }), tabs.map((tab) => (_jsxs(TabsTriggerCompact, { value: tab.name, children: [tab.label, _jsx(CountBadge, { count: counts.get(tab.name) ?? 0, tone: "neutral" })] }, tab.name)))] }) }));
+}
+/** The name a filtered empty state shows for `value`. */
+export function spaceFilterLabel(value, spaces, projectWide) {
+    if (value === PROJECT_WIDE_SPACE)
+        return projectWide;
+    const space = spaces.find((candidate) => candidate.name === value);
+    return space?.label || space?.name || value;
+}

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

@@ -0,0 +1,24 @@
+import { type ManifestSpace, type SpaceTab } from '@kortix/sdk';
+/** The key of the room tab, always first. */
+export declare const ROOM_TAB = "room";
+/** The tabs a viewer sees, in order: a tab of a feature the project has off is hidden. */
+export declare function visibleSpaceTabs(space: ManifestSpace, flags: {
+    goals: boolean;
+    artifacts: boolean;
+}): Array<{
+    key: string;
+    tab: SpaceTab;
+    index: number;
+}>;
+/**
+ * /projects/[id]/spaces/[slug]: a space is a channel. One header block: the
+ * title bar names it and shows what `spaces.<slug>.header` picks (its agents,
+ * the people in its room, the sessions that wait on you, and the actions),
+ * and the tabs sit directly under it. The first tab is always the room; the
+ * tabs after it come from `spaces.<slug>.tabs`. `?tab=` deep links a tab.
+ * The "+" menu and Edit tabs write the same manifest list.
+ */
+export declare function SpacePage({ projectId, slug }: {
+    projectId: string;
+    slug: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,157 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MY_KORTIX_AGENT_NAME } from '../../_vendor/kortix-shared.js';
+import { agentsInSpace, listSpaces, spaceHeader, spaceTabKey, spaceTabs, } from '@kortix/sdk';
+import { sessionNeedsInputCount, useFeatureFlag, useProjectConfig, useProjectSessions, useRoom, useSessionsNeedingInput, useSpaceRoom, } from '@kortix/sdk/react';
+import { HashIcon, PlusIcon } from '@phosphor-icons/react';
+import { useConfigureThread } from '../../customize/use-configure-thread.js';
+import { useTranslations } from '../../i18n/index.js';
+import { AgentMark } from '../../internal/components/agent-mark.js';
+import { ProjectPageHeader } from '../../internal/layout/project-page-header.js';
+import { SidebarToggle } from '../../internal/layout/sidebar-toggle.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 { uiRoutes } from '../../lib/routes.js';
+import { UiLink as Link, useUiPathname, useUiRouter, useUiSearchParams } from '../../providers/ui-provider.js';
+import { Button } from '../../primitives/button.js';
+import { CountBadge } from '../../primitives/count-badge.js';
+import { EmptyState } from '../../primitives/empty-state.js';
+import { useOptionalSidebar } from '../../primitives/sidebar.js';
+import { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs.js';
+import { UserAvatar } from '../../primitives/user-avatar.js';
+import { SpaceTabMenu } from './space-tab-menu.js';
+import { SpaceTabPanel, useTabLabel } from './space-tab-panels.js';
+/** The key of the room tab, always first. */
+export const ROOM_TAB = 'room';
+/** How many faces a pile shows before "+N". */
+const PILE = 4;
+/** The tabs a viewer sees, in order: a tab of a feature the project has off is hidden. */
+export function visibleSpaceTabs(space, flags) {
+    return spaceTabs(space)
+        .map((tab, index) => ({ key: spaceTabKey(tab, index), tab, index }))
+        .filter(({ tab }) => {
+        if (tab.type === 'goals')
+            return flags.goals;
+        if (tab.type === 'artifacts' || tab.type === 'artifact')
+            return flags.artifacts;
+        return true;
+    });
+}
+/**
+ * /projects/[id]/spaces/[slug]: a space is a channel. One header block: the
+ * title bar names it and shows what `spaces.<slug>.header` picks (its agents,
+ * the people in its room, the sessions that wait on you, and the actions),
+ * and the tabs sit directly under it. The first tab is always the room; the
+ * tabs after it come from `spaces.<slug>.tabs`. `?tab=` deep links a tab.
+ * The "+" menu and Edit tabs write the same manifest list.
+ */
+export function SpacePage({ projectId, slug }) {
+    const t = useTranslations('spaces');
+    const config = useProjectConfig(projectId);
+    const goalsOn = useFeatureFlag(projectId, 'goals').enabled;
+    const artifactsOn = useFeatureFlag(projectId, 'artifacts').enabled;
+    const canWrite = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_FILE_WRITE).allowed === true;
+    const router = useUiRouter();
+    const pathname = useUiPathname();
+    const params = useUiSearchParams();
+    const space = config ? listSpaces(config).find((candidate) => candidate.name === slug) : undefined;
+    if (!config)
+        return _jsx(ProjectPageHeader, { title: `# ${slug}` });
+    if (!space) {
+        return (_jsxs("div", { className: "flex h-svh flex-col overflow-hidden", children: [_jsx(ProjectPageHeader, { title: `# ${slug}` }), _jsx("div", { className: "flex flex-1 items-center justify-center px-4", children: _jsx(EmptyState, { title: t('gone.title'), description: t('gone.hint'), action: _jsx(Button, { asChild: true, size: "sm", variant: "outline", children: _jsx(Link, { href: uiRoutes().project(projectId), children: t('gone.back') }) }) }) })] }));
+    }
+    const tabs = visibleSpaceTabs(space, { goals: goalsOn, artifacts: artifactsOn });
+    const requested = params.get('tab');
+    const active = tabs.some((entry) => entry.key === requested) ? requested : ROOM_TAB;
+    const selectTab = (key) => {
+        router.replace(key === ROOM_TAB ? pathname : `${pathname}?tab=${encodeURIComponent(key)}`);
+    };
+    return (_jsxs("div", { className: "flex h-svh flex-col overflow-hidden", children: [_jsx(SpaceHeader, { projectId: projectId, space: space }), _jsxs(Tabs, { value: active, onValueChange: selectTab, className: "flex min-h-0 flex-1 flex-col gap-0", children: [_jsxs(TabsList, { type: "underline", className: "w-full shrink-0 justify-start overflow-x-auto px-5", children: [_jsx(TabsTrigger, { value: ROOM_TAB, className: "w-fit flex-none", children: t('tabs.room') }), tabs.map((entry) => (_jsx(SpaceTabTrigger, { value: entry.key, tab: entry.tab }, entry.key))), canWrite ? (_jsx(SpaceTabMenu, { projectId: projectId, space: space, onAdded: selectTab, children: _jsx(Button, { size: "icon-xs", variant: "ghost", "aria-label": t('addTab'), className: "ml-1 shrink-0", children: _jsx(PlusIcon, {}) }) })) : null] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx(SpaceTabPanel, { projectId: projectId, space: space, tab: active === ROOM_TAB ? null : (tabs.find((entry) => entry.key === active)?.tab ?? null) }) })] })] }));
+}
+function SpaceTabTrigger({ value, tab }) {
+    const label = useTabLabel(tab);
+    return (_jsx(TabsTrigger, { value: value, className: "w-fit flex-none", children: label }));
+}
+/**
+ * The space's one header row, in the title bar: `#` and the name (the page's
+ * `<h1>`), the description beside it when the row has room, then the items
+ * `spaces.<slug>.header` picks, in its order. It wears the title-bar classes
+ * of `ProjectPageHeader`, so it clears the desktop window controls the same
+ * way. Below `@3xl` the action buttons drop their labels.
+ */
+function SpaceHeader({ projectId, space }) {
+    const config = useProjectConfig(projectId);
+    const sidebar = useOptionalSidebar();
+    const roomsOn = useFeatureFlag(projectId, 'agent_rooms').enabled;
+    // `builtin_agents.my_kortix: false` turns My Kortix off: no Ask button then.
+    const items = spaceHeader(space).filter((item) => item !== 'ask_my_kortix' || config?.builtin_agents?.my_kortix !== false);
+    const agents = agentsInSpace(space.name, config?.agents ?? []);
+    const strip = [];
+    for (const item of items) {
+        if (item === 'agents' && agents.length)
+            strip.push(_jsx(SpaceAgents, { projectId: projectId, agents: agents }, item));
+        if (item === 'members' && roomsOn)
+            strip.push(_jsx(SpaceMembers, { projectId: projectId, slug: space.name }, item));
+        if (item === 'needs_you')
+            strip.push(_jsx(SpaceNeedsYou, { projectId: projectId, agents: agents }, item));
+    }
+    // The primary action sits on the trailing edge, whatever the config order.
+    const actions = [
+        items.includes('ask_my_kortix') ? _jsx(AskMyKortix, { projectId: projectId, space: space }, "ask") : null,
+        items.includes('new_session') ? _jsx(NewSessionInSpace, { projectId: projectId, slug: space.name }, "new") : null,
+    ].filter(Boolean);
+    return (_jsxs("header", { className: "kx-titlebar-row kx-capability-titlebar @container/space-header relative flex shrink-0 items-center gap-1 px-2", "data-sidebar-collapsed": sidebar?.state === 'collapsed' || undefined, children: [_jsx(SidebarToggle, {}), _jsxs("div", { className: "kx-titlebar-tabs flex h-10 min-w-0 flex-1 items-center gap-2.5 px-3", children: [_jsxs("h1", { className: "text-foreground flex min-w-0 shrink-0 items-center gap-1 text-sm font-medium", children: [_jsx(HashIcon, { "aria-hidden": true, className: "text-muted-foreground size-4 shrink-0" }), _jsx("span", { className: "max-w-60 truncate", children: space.label || space.name })] }), space.description ? (_jsx("p", { className: "text-muted-foreground hidden min-w-0 truncate text-xs @2xl/space-header:block", children: space.description })) : null] }), strip.length || actions.length ? (_jsxs("div", { className: "flex shrink-0 items-center gap-3 pr-1", children: [strip, actions.length ? _jsx("div", { className: "flex items-center gap-1", children: actions }) : null] })) : null] }));
+}
+function SpaceAgents({ projectId, agents }) {
+    const t = useTranslations('spaces');
+    return (_jsxs("span", { role: "group", "aria-label": t('agents'), className: "flex items-center -space-x-1", children: [agents.slice(0, PILE).map((name) => (_jsx(Link, { href: agentHref(projectId, name), className: "rounded-sm", "aria-label": t('openAgent', { name }), children: _jsx(AgentMark, { slug: name, tile: 22, className: "ring-background ring-2" }) }, name))), agents.length > PILE ? _jsx(PileMore, { count: agents.length - PILE }) : null] }));
+}
+function PileMore({ count }) {
+    return (_jsxs("span", { className: "bg-muted text-muted-foreground ring-background relative flex h-6 min-w-6 items-center justify-center rounded-sm px-1 text-xs tabular-nums ring-2", children: ["+", count] }));
+}
+/** The people in the space's room, as a face pile. Nothing before the room exists. */
+function SpaceMembers({ projectId, slug }) {
+    const t = useTranslations('spaces');
+    const room = useSpaceRoom(projectId, slug);
+    const detail = useRoom(projectId, room.data?.room_id ?? null);
+    const people = (detail.data?.members ?? []).filter((member) => member.kind === 'person');
+    if (!people.length)
+        return null;
+    return (_jsxs("span", { role: "group", "aria-label": t('members', { count: people.length }), className: "flex items-center -space-x-1", children: [people.slice(0, PILE).map((person) => (_jsx(UserAvatar, { name: person.label, email: person.user_id ?? person.label, size: "sm", ring: true, hint: person.label }, person.member_id))), people.length > PILE ? _jsx(PileMore, { count: people.length - PILE }) : null] }));
+}
+/** The sessions of the space's agents that wait on the viewer. Hidden at 0. */
+function SpaceNeedsYou({ projectId, agents }) {
+    const t = useTranslations('spaces');
+    const summary = useSessionsNeedingInput(projectId, { enabled: agents.length > 0 });
+    const { sessions } = useProjectSessions(projectId, { enabled: agents.length > 0 && !!summary.data?.total });
+    const count = sessions
+        .filter((session) => session.agent_name && agents.includes(session.agent_name))
+        .reduce((sum, session) => sum + sessionNeedsInputCount(summary.data, session), 0);
+    if (!count)
+        return null;
+    const href = uiRoutes().sessions(projectId);
+    const body = (_jsxs(_Fragment, { children: [_jsx(CountBadge, { count: count, tone: "waiting" }), _jsx("span", { className: "text-foreground text-xs", children: t('needsYou') })] }));
+    return href ? (_jsx(Link, { href: href, className: "hover:bg-hover flex h-7 items-center gap-1.5 rounded-md px-1.5 transition-colors", children: body })) : (_jsx("span", { className: "flex items-center gap-1.5", children: body }));
+}
+function NewSessionInSpace({ projectId, slug }) {
+    const t = useTranslations('spaces');
+    const router = useUiRouter();
+    const [, setActive] = useActiveSpace(projectId);
+    return (_jsxs(Button, { size: "sm", "aria-label": t('newSession'), onClick: () => {
+            // The project home with the space active: the composer starts only this space's agents.
+            setActive(slug);
+            router.push(uiRoutes().project(projectId));
+        }, children: [_jsx(PlusIcon, {}), _jsx("span", { className: "hidden @3xl/space-header:inline", children: t('newSession') })] }));
+}
+function AskMyKortix({ projectId, space }) {
+    const t = useTranslations('spaces');
+    const configure = useConfigureThread(projectId);
+    return (_jsxs(Button, { size: "sm", variant: "ghost", "aria-label": t('askMyKortix'), disabled: configure.pending, "aria-busy": configure.pending || undefined, onClick: () => configure.start({
+            text: t('askPrompt', { name: space.label || space.name, slug: space.name }),
+            agent: MY_KORTIX_AGENT_NAME,
+            model: null,
+            variant: null,
+        }), children: [_jsx(AgentMark, { slug: MY_KORTIX_AGENT_NAME }), _jsx("span", { className: "hidden @3xl/space-header:inline", children: t('askMyKortix') })] }));
+}