@kortix/ui 0.14.8 → 0.14.10

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

@@ -8,7 +8,7 @@ import { SessionSharedIcon } from '../projects/session-shared-icon.js';
 import { Button } from '../../primitives/button.js';
 import { CountBadge } from '../../primitives/count-badge.js';
 import { Disclosure, DisclosureContent, DisclosureTrigger } from '../../primitives/disclosure.js';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../../primitives/dropdown-menu.js';
+import { DropdownMenu, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../../primitives/dropdown-menu.js';
 import { FadedScrollArea } from '../../primitives/faded-scroll-area.js';
 import Hint from '../../primitives/hint.js';
 import { KortixLogo } from '../../primitives/kortix-logo.js';
@@ -28,6 +28,8 @@ import { ShareSessionModal } from './modal/share-session-modal.js';
 import { getSessionDisplayTitle, groupChangeRequestsBySession, projectSessionsRefetchInterval, resolveSessionListViewState, shortRelative, starterSectionOf, } from '../../session/actions/project-session-list-helpers.js';
 import { MobileSessionCreatedTime, SessionBriefDescription, SessionBriefCardHost, SessionBriefHoverCard, SubagentHoverCard, } from './session-brief-hover-card.js';
 import { SessionFilterMenu } from './session-filter-menu.js';
+import { SESSION_MENU_TRIGGER_CLASS, SESSION_ROW_HEIGHT_CLASS, SIDEBAR_PAGE_SIZE, ShowMoreButton, } from './session-list-chrome.js';
+import { SessionGroupNameModal, SessionGroupSections, UngroupDropArea, startSessionDrag, useSessionGroupActions, } from './session-group-sections.js';
 import { groupSessions, } from './session-grouping.js';
 import { useSessionOpenIntent } from './session-open-intent.js';
 import { isReviewOverdue, SessionStatusMark } from './session-status-mark.js';
@@ -39,8 +41,8 @@ import { selectExpandedIds, useSessionExpandedStore } from '../../internal/store
 import { selectCollapsedSections, selectGroupMode, selectHiddenSections, selectLabelFilters, selectOrderMode, selectSourceFilters, selectStatusFilters, useSessionFilterStore, } from '../../internal/stores/session-filter-store.js';
 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, useSessionGoal, } from '@kortix/sdk/react';
-import { ArchiveIcon, ArrowsSplitIcon, CaretRightIcon, DotsThreeIcon, PushPinIcon, PushPinSlashIcon, RobotIcon, GitForkIcon, PencilSimpleIcon, ArrowCounterClockwiseIcon as RotateCcw, ShareIcon as Share, SparkleIcon, TargetIcon, SquareIcon as Square, TagIcon, TrashIcon, TreeViewIcon, } from '@phosphor-icons/react';
+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 { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { formatDistanceToNowStrict } from 'date-fns';
 import { useUiPathname, useUiRouter, useUiSearchParams, useUiViewerId } from '../../providers/ui-provider.js';
@@ -48,38 +50,6 @@ import { useEffect, useId, useMemo, 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';
-/** The one `⋯` box. All three menus in this file — the `Sessions` header, every
- *  section header, and every session row — render `Button variant="ghost"
- *  size="icon-xs"` with THIS class, so the glyph sits on a single vertical
- *  axis at every level of the tree.
- *
- *  The geometry, given every row is `px-2` inside the same column: the trigger
- *  is flush to the right edge of that padded box, so its 24px square spans
- *  `[W-32, W-8]` and the 16px glyph inside spans `[W-28, W-12]` — identical for
- *  all three, at any sidebar width.
- *
- *  Do NOT rebuild this from `SidebarMenuButton`. That primitive's base carries
- *  `p-2 w-full h-8 gap-2 overflow-hidden`; `size-6` only beats `w-full`/`h-8`
- *  through tailwind-merge, and `p-2` survives outright — leaving a 16px icon
- *  overflowing an 8px content box, centered by coincidence rather than by
- *  layout, with a different hover fill than the other two. */
-const SESSION_MENU_TRIGGER_CLASS = cn('text-muted-foreground shrink-0 transition-none', 
-// An OPAQUE hover fill, and the reason it has to be opaque:
-//
-// `variant="ghost"` hovers to `bg-foreground/10`. `background-color` is one
-// property, so on the row trigger that 10% tint did not sit on top of the
-// `bg-(--session-row-surface)` mask — it REPLACED it. The mask exists to hide
-// the truncated session title running underneath the glyph, so hovering
-// punched a translucent hole in it and the title bled through: the washed-out
-// grey square in the bug report, with a muted `⋯` floating in it.
-//
-// `sidebar-row-control` is one opaque step above the row's own fill
-// (`--sidebar-row`) on hover, in both themes. The square reads as lifted, stays a solid
-// mask, and needs no pseudo-element to stack a tint above a fill.
-'hover:bg-sidebar-row-control data-[state=open]:bg-sidebar-row-control', 
-// Full contrast once the pointer is on it — the glyph is a control now, not a
-// marker.
-'hover:text-foreground data-[state=open]:text-foreground');
 /** The same trigger on a touch device.
  *
  *  It cannot stay hover-revealed and absolutely positioned — there is no hover,
@@ -104,12 +74,6 @@ const SESSION_MENU_TRIGGER_CLASS = cn('text-muted-foreground shrink-0 transition
  *  (`min-width: 768px` AND `hover: hover` AND `pointer: fine`), which is why the
  *  same block is written narrow-viewport, no-hover, and coarse-pointer. */
 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-['']");
-/** Every row that can carry a `⋯` is this tall, so the trigger's 24px square is
- *  centered in an identical 32px line at all three levels. */
-const SESSION_ROW_HEIGHT_CLASS = 'h-8';
-/** Rows per page of an expanded parent, and per page of the Shared and
- *  Automated sections. */
-const SIDEBAR_PAGE_SIZE = 20;
 /** The Pinned section's id in the collapsed-sections store: open unless closed. */
 const PINNED_SECTION_ID = 'section:pinned';
 /** The newest change requests the session briefs read: one server page. */
@@ -145,6 +109,23 @@ export function ProjectSessionList({ projectId }) {
     // carry every selected label, so a match on an unloaded page still shows.
     const labelFilters = useSessionFilterStore(selectLabelFilters(projectId));
     const labels = labelFilters.length > 0 ? labelFilters : undefined;
+    // Session groups (`session_groups`): every group is its own section above
+    // the rest, so the lists below hold only the sessions in no group. While the
+    // flag is unknown the lists wait: a list keyed without `group` would load,
+    // then load again with it.
+    const sessionGroupsFlag = useFeatureFlag(projectId, 'session_groups');
+    const groupsQuery = useProjectSessionGroups(projectId, { enabled: sessionGroupsFlag.enabled });
+    // Groups render once their list loaded. Until then the lists below wait; if
+    // the list cannot load, they list every session (as with the flag off), so
+    // a grouped session never disappears behind a failed read.
+    const groupsEnabled = sessionGroupsFlag.enabled && groupsQuery.isSuccess;
+    const listsReady = !sessionGroupsFlag.isLoading && !(sessionGroupsFlag.enabled && groupsQuery.isPending);
+    const groupFilter = groupsEnabled ? 'none' : undefined;
+    const groups = useMemo(() => (groupsEnabled ? (groupsQuery.data ?? []) : []), [groupsEnabled, groupsQuery.data]);
+    const groupActions = useSessionGroupActions(projectId, groups);
+    const [groupToRename, setGroupToRename] = useState(null);
+    // `fileSessionId`: the row whose "New group…" opened the dialog goes into the new group.
+    const [groupCreate, setGroupCreate] = useState(null);
     // Paged, not the whole inventory. This list is the always-mounted poller: it
     // re-fetches every 5s while any loaded row is still provisioning, so its cost
     // per tick is the cost of the whole surface. Unbounded, a 12,617-session
@@ -158,6 +139,8 @@ export function ProjectSessionList({ projectId }) {
         parent: 'root',
         startedBy: 'me',
         labels,
+        group: groupFilter,
+        enabled: listsReady,
         refetchInterval: (loaded) => projectSessionsRefetchInterval({
             sessions: loaded,
             hasOpenSession: Boolean(activeSessionId),
@@ -175,6 +158,8 @@ export function ProjectSessionList({ projectId }) {
         parent: 'root',
         startedBy: 'others',
         labels,
+        group: groupFilter,
+        enabled: listsReady,
         limit: SIDEBAR_PAGE_SIZE,
         refetchOnWindowFocus: true,
     });
@@ -182,6 +167,8 @@ export function ProjectSessionList({ projectId }) {
         parent: 'root',
         startedBy: 'automated',
         labels,
+        group: groupFilter,
+        enabled: listsReady,
         limit: SIDEBAR_PAGE_SIZE,
         refetchOnWindowFocus: true,
     });
@@ -278,13 +265,14 @@ export function ProjectSessionList({ projectId }) {
     const passesFacets = (session) => matchesStatusFilters(session, statusFilters) &&
         matchesSourceFilters(session, sourceFilters, tI18nComplete);
     const visiblePinned = pinnedQuery.sessions.filter(passesFacets);
-    const unpinned = (session) => !session.pinned_at && passesFacets(session);
+    // A row filed into a group a moment ago leaves these lists before their refetch lands.
+    const unpinned = (session) => !session.pinned_at && !(groupsEnabled && session.group_id) && passesFacets(session);
     const visibleSessions = sessions.filter(unpinned);
     const visibleShared = sharedQuery.sessions.filter(unpinned);
     const visibleAutomated = automatedQuery.sessions.filter(unpinned);
     const otherCount = sharedQuery.sessions.length + automatedQuery.sessions.length + pinnedQuery.sessions.length;
     const visibleOtherCount = visibleShared.length + visibleAutomated.length + visiblePinned.length;
-    const viewState = resolveSessionListViewState({
+    const resolvedViewState = resolveSessionListViewState({
         hasData: data !== undefined,
         isError,
         totalCount: sessions.length + otherCount,
@@ -293,6 +281,11 @@ export function ProjectSessionList({ projectId }) {
         scanning: isScanning || sharedQuery.isScanning || automatedQuery.isScanning || pinnedQuery.isScanning,
         hasMore: hasNextPage || sharedQuery.hasNextPage || automatedQuery.hasNextPage || pinnedQuery.hasNextPage,
     });
+    // The groups are content too: a project whose every session sits in a group
+    // is not empty, and a filter that matches nothing below still shows them.
+    const viewState = groups.length > 0 && (resolvedViewState === 'empty' || resolvedViewState === 'no-matches')
+        ? 'content'
+        : resolvedViewState;
     // One session row, its opencode sub-sessions, and (top-level rows only) the
     // sessions it spawned, loaded when the row opens. `nested` marks a spawned
     // row: the connector already carries the link, and it has no children of its
@@ -318,7 +311,12 @@ 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, onRestart: (id, label) => restartMutation.mutate({ sessionId: id, label }), isRestarting: restartMutation.isPending && restartMutation.variables?.sessionId === session.session_id, onStop: (id, label) => stopMutation.mutate({ sessionId: id, label }), isStopping: stopMutation.isPending && stopMutation.variables?.sessionId === session.session_id, canFork: runtimeForks &&
+                    }, 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, 
+                    // 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
+                        ? (event) => startSessionDrag(event, session.session_id)
+                        : undefined, onRestart: (id, label) => restartMutation.mutate({ sessionId: id, label }), isRestarting: restartMutation.isPending && restartMutation.variables?.sessionId === session.session_id, onStop: (id, label) => stopMutation.mutate({ sessionId: id, label }), isStopping: stopMutation.isPending && stopMutation.variables?.sessionId === session.session_id, canFork: runtimeForks &&
                         session.session_id === activeSessionId &&
                         !!(session.runtime_session_id ?? session.opencode_session_id), isForking: forkSession.isPending &&
                         forkSession.variables?.sessionId ===
@@ -364,15 +362,28 @@ export function ProjectSessionList({ projectId }) {
         // that case here instead of letting `FadedScrollArea` render nothing with
         // no explanation.
         // `more`: no row yet, but a list has a next page. Its Load more renders below.
-        if (viewState !== 'more' && grouped.sections.length === 0 && visibleOtherCount === 0) {
+        if (viewState !== 'more' && grouped.sections.length === 0 && visibleOtherCount === 0 && groups.length === 0) {
             return (_jsx("div", { className: "text-muted-foreground px-2 pt-1 pb-2 text-xs", children: t('allSectionsHidden') }));
         }
-        return (_jsxs(FadedScrollArea, { fadeColor: "from-background", className: "h-full min-h-0 space-y-px", children: [_jsx(StarterSection, { title: tPinArchive('section'), query: pinnedQuery, sessions: visiblePinned, open: !collapsedSectionIds.has(PINNED_SECTION_ID), onToggle: () => toggleSectionCollapsed(projectId, PINNED_SECTION_ID), renderNode: (session) => renderSessionNode(session, false), caretOnHover: true }), visiblePinned.length > 0 && !grouped.showHeaders && (_jsx("div", { className: "px-2 py-1", children: _jsx(Separator, {}) })), grouped.sections.map((section) => (_jsx(SessionListSection, { section: section, projectId: projectId, sessions: sessions, reviewCountBySession: needsYouBySession, showHeader: grouped.showHeaders, open: !collapsedSectionIds.has(section.id), onOpenChange: () => toggleSectionCollapsed(projectId, section.id), children: section.sessions.map((session) => renderSessionNode(session, false)) }, section.id))), hasNextPage && (_jsx(ShowMoreButton, { loading: isFetchingNextPage, failed: isFetchNextPageError, label: t('loadMore'), onClick: () => fetchNextPage() })), _jsx(StarterSection, { title: t('startedBy.others'), query: sharedQuery, sessions: visibleShared, open: expandedIdSet.has('section:shared'), onToggle: () => toggleExpanded(projectId, 'section:shared'), renderNode: (session) => renderSessionNode(session, false, true) }), _jsx(StarterSection, { title: t('startedBy.automated'), query: automatedQuery, sessions: visibleAutomated, open: expandedIdSet.has('section:automated'), onToggle: () => toggleExpanded(projectId, 'section:automated'), renderNode: (session) => renderSessionNode(session, false), caretOnHover: true }), firstChatPending &&
+        return (_jsxs(FadedScrollArea, { fadeColor: "from-background", className: "h-full min-h-0 space-y-px", children: [_jsx(StarterSection, { title: tPinArchive('section'), query: pinnedQuery, sessions: visiblePinned, open: !collapsedSectionIds.has(PINNED_SECTION_ID), onToggle: () => toggleSectionCollapsed(projectId, PINNED_SECTION_ID), renderNode: (session) => renderSessionNode(session, false), caretOnHover: true }), groups.length > 0 && (_jsx(SessionGroupSections, { projectId: projectId, groups: groups, labels: labels, collapsedSectionIds: collapsedSectionIds, onToggleSection: (sectionId) => toggleSectionCollapsed(projectId, sectionId), passesFacets: passesFacets, renderNode: (session) => renderSessionNode(session, false), actions: groupActions, onRename: setGroupToRename })), (visiblePinned.length > 0 || groups.length > 0) && !grouped.showHeaders && (_jsx("div", { className: "px-2 py-1", children: _jsx(Separator, {}) })), groupsEnabled ? (_jsx(UngroupDropArea, { onDropSession: (sessionId) => void groupActions.move(sessionId, null), children: renderUngrouped(grouped) })) : (renderUngrouped(grouped))] }));
+    }
+    /** The sessions in no group: the grouped sections, Load more, Shared, Automated and the first chat. */
+    function renderUngrouped(grouped) {
+        return (_jsxs(_Fragment, { children: [grouped.sections.map((section) => (_jsx(SessionListSection, { section: section, projectId: projectId, sessions: sessions, reviewCountBySession: needsYouBySession, showHeader: grouped.showHeaders, open: !collapsedSectionIds.has(section.id), onOpenChange: () => toggleSectionCollapsed(projectId, section.id), children: section.sessions.map((session) => renderSessionNode(session, false)) }, section.id))), hasNextPage && (_jsx(ShowMoreButton, { loading: isFetchingNextPage, failed: isFetchNextPageError, label: t('loadMore'), onClick: () => fetchNextPage() })), _jsx(StarterSection, { title: t('startedBy.others'), query: sharedQuery, sessions: visibleShared, open: expandedIdSet.has('section:shared'), onToggle: () => toggleExpanded(projectId, 'section:shared'), renderNode: (session) => renderSessionNode(session, false, true) }), _jsx(StarterSection, { title: t('startedBy.automated'), query: automatedQuery, sessions: visibleAutomated, open: expandedIdSet.has('section:automated'), onToggle: () => toggleExpanded(projectId, 'section:automated'), renderNode: (session) => renderSessionNode(session, false), caretOnHover: true }), firstChatPending &&
                     !hasNextPage &&
                     !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 }), _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) }), _jsx(SessionDeleteModal, { projectId: projectId, sessionId: sessionToDelete?.id ?? null, sessionLabel: sessionToDelete?.label, open: !!sessionToDelete, onOpenChange: (open) => !open && setSessionToDelete(null) }), canShowSessionHoverCard && _jsx(SessionBriefCardHost, {})] }));
+    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) => {
+                    if (open)
+                        return;
+                    setGroupToRename(null);
+                    setGroupCreate(null);
+                }, onCreated: (group) => {
+                    // The row whose menu opened it goes in; the group appearing with it is the result.
+                    if (groupCreate?.fileSessionId)
+                        void groupActions.move(groupCreate.fileSessionId, group.group_id);
+                } })), _jsx(SessionDeleteModal, { projectId: projectId, sessionId: sessionToDelete?.id ?? null, sessionLabel: sessionToDelete?.label, open: !!sessionToDelete, onOpenChange: (open) => !open && setSessionToDelete(null) }), canShowSessionHoverCard && _jsx(SessionBriefCardHost, {})] }));
 }
 /** The `Sessions` row above the list. Lives here — not in `project-sidebar.tsx`
  *  — because everything it needs (the session list, the review summary, the
@@ -381,10 +392,11 @@ export function ProjectSessionList({ projectId }) {
  *  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. */
-function SessionListHeader({ projectId, sessions, reviewCountBySession, onMenuOpenChange, }) {
+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') }) })), 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('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" }) }) })] }))] }));
 }
 /** Non-sticky by design: FadedScrollArea masks its own edges, and a sticky
  *  header fights that mask.
@@ -479,10 +491,6 @@ function StarterSection({ title, query, sessions, open, onToggle, renderNode, ca
     return (_jsxs(Disclosure, { open: open, onOpenChange: onToggle, className: "group/section space-y-1", transition: { duration: 0.15, ease: 'easeOut' }, children: [_jsx(DisclosureTrigger, { children: _jsxs("div", { className: cn('group/section-header text-muted-foreground flex items-center gap-1 px-2 text-sm font-medium', SESSION_ROW_HEIGHT_CLASS), children: [_jsx("span", { className: "truncate", children: title }), _jsx(CaretRightIcon, { "aria-hidden": true, className: cn('duration-normal size-3 shrink-0 transition-[transform,opacity] ease-out group-data-[state=open]/section:rotate-90', caretOnHover &&
                                 'opacity-0 group-hover/section-header:opacity-100 group-focus-visible/section-header:opacity-100') })] }) }), _jsxs(DisclosureContent, { contentClassName: "space-y-px", children: [sessions.map(renderNode), query.hasNextPage && (_jsx(ShowMoreButton, { loading: query.isFetchingNextPage, failed: query.isFetchNextPageError, label: t('loadMore'), onClick: () => query.fetchNextPage() }))] })] }));
 }
-function ShowMoreButton({ loading, failed, label, onClick, }) {
-    const t = useTranslations('sidebar');
-    return (_jsx(Button, { variant: "ghost", size: "sm", className: "text-muted-foreground hover:text-foreground h-8 w-full justify-start px-2 text-xs", disabled: loading, onClick: onClick, children: loading ? t('loadingMore') : failed ? t('retry') : label }));
-}
 /**
  * Everything one session started, on ONE trunk: its sub-agents first, then the
  * sessions it spawned (fetched when the row opens, 20 at a time). `ml-4` puts
@@ -512,10 +520,11 @@ function SpawnedSessions({ projectId, parentId, renderNode, }) {
     const rows = children.sessions;
     return (_jsxs(_Fragment, { children: [rows.map((child, index) => (_jsx(ChildRunBranch, { continues: index < rows.length - 1 || children.hasNextPage, children: renderNode(child) }, child.session_id))), children.hasNextPage && (_jsx(ChildRunBranch, { continues: false, children: _jsx(ShowMoreButton, { loading: children.isFetchingNextPage, failed: children.isFetchNextPageError, label: t('sessionList.showMore'), onClick: () => children.fetchNextPage() }) }))] }));
 }
-function ProjectSessionRow({ session, href, isActive, isSwitching, onNavigate, displayTitle, onDelete, onPin, onArchive, onShare, onRename, onEditLabels, onRestart, isRestarting, onStop, isStopping, canFork = false, isForking = false, onFork, spawned = false, subagentCount = 0, spawnedCount = 0, childRunsOpen = false, onToggleChildRuns, reviewCount = 0, awaitingAnswer = false, changeRequests, canShowHoverCard, inSharedGroup = false, }) {
+function ProjectSessionRow({ session, href, isActive, isSwitching, onNavigate, displayTitle, onDelete, onPin, onArchive, onShare, onRename, onEditLabels, groups, onMoveToGroup, onNewGroupFor, onDragStart, onRestart, isRestarting, onStop, isStopping, canFork = false, isForking = false, onFork, spawned = false, subagentCount = 0, spawnedCount = 0, childRunsOpen = false, onToggleChildRuns, reviewCount = 0, awaitingAnswer = false, changeRequests, canShowHoverCard, inSharedGroup = false, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const t = useTranslations('sidebar');
     const tPinArchive = useTranslations('sidebar.pinArchive');
+    const tGroups = useTranslations('sidebar.sessionGroups');
     const [menuOpen, setMenuOpen] = useState(false);
     const descriptionId = useId();
     // Start the session's open read (snapshot + row) on intent, so the click
@@ -550,7 +559,7 @@ function ProjectSessionRow({ session, href, isActive, isSwitching, onNavigate, d
     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 })] }))] }));
-    return (_jsx("div", { className: "group/session-list block", children: _jsxs("div", { className: cn(
+    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
             // fill ease for 150ms while the fade snapped, which read as a flicker.
@@ -561,7 +570,10 @@ function ProjectSessionRow({ session, href, isActive, isSwitching, onNavigate, d
                 : 'text-muted-foreground hover:text-sidebar-foreground bg-(--session-row-surface) [--session-row-surface:var(--background)] hover:[--session-row-surface:var(--sidebar-row)]'), children: [canShowHoverCard ? (_jsx(SessionBriefHoverCard, { sessionId: session.session_id, title: displayTitle, status: displayStatus, createdAt: session.created_at, source: source, changeRequests: changeRequests, waitingOn: waitingOn, spawned: spawned, subagentCount: subagentCount, spawnedCount: spawnedCount, labels: session.labels, projectId: session.project_id, children: sessionLink })) : (sessionLink), _jsx(SessionBriefDescription, { id: descriptionId, status: displayStatus, createdAt: session.created_at, source: source, changeRequests: changeRequests, waitingOn: waitingOn }), _jsxs(DropdownMenu, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", type: "button", "aria-label": t('sessionList.actionsFor', { title: displayTitle }), className: cn(SESSION_MENU_TRIGGER_CLASS, 'absolute top-1/2 right-1 z-10 -translate-y-1/2', 'bg-(--session-row-surface)', 'pointer-events-none opacity-0', 'group-hover/session-list:pointer-events-auto group-hover/session-list:opacity-100', 'focus-visible:pointer-events-auto focus-visible:opacity-100', 'data-[state=open]:pointer-events-auto data-[state=open]:opacity-100', SESSION_MENU_TRIGGER_TOUCH_CLASS), onClick: (e) => {
                                     e.preventDefault();
                                     e.stopPropagation();
-                                }, children: _jsx(DotsThreeIcon, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "start", side: "right", className: "w-44", children: [_jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => onRename(session.session_id, displayTitle)), children: [_jsx(PencilSimpleIcon, {}), tI18nComplete.raw('text3064d79a295c')] }), _jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => onEditLabels(session)), children: [_jsx(TagIcon, {}), t('labels.menu')] }), _jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => onShare(session)), children: [_jsx(Share, {}), session.can_manage_sharing !== false
+                                }, children: _jsx(DotsThreeIcon, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "start", side: "right", className: "w-44", children: [_jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => onRename(session.session_id, displayTitle)), children: [_jsx(PencilSimpleIcon, {}), tI18nComplete.raw('text3064d79a295c')] }), _jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => onEditLabels(session)), children: [_jsx(TagIcon, {}), t('labels.menu')] }), groups && onMoveToGroup && (_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { className: "cursor-pointer", children: [_jsx(FolderSimpleIcon, {}), tGroups('moveTo')] }), _jsxs(DropdownMenuSubContent, { className: "w-48", children: [groups.map((group) => {
+                                                    const current = session.group_id === group.group_id;
+                                                    return (_jsxs(DropdownMenuItem, { className: "cursor-pointer", disabled: current, onSelect: () => deferAfterClose(() => onMoveToGroup(session.session_id, group.group_id)), children: [current ? _jsx(CheckIcon, {}) : _jsx(FolderSimpleIcon, {}), _jsx("span", { className: "truncate", children: group.name })] }, group.group_id));
+                                                }), groups.length > 0 && _jsx(DropdownMenuSeparator, {}), onNewGroupFor && (_jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => onNewGroupFor(session.session_id)), children: [_jsx(FolderSimplePlusIcon, {}), tGroups('newGroupFromMenu')] })), session.group_id && (_jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => onMoveToGroup(session.session_id, null)), children: [_jsx(FolderSimpleMinusIcon, {}), tGroups('removeFromGroup')] }))] })] })), _jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => onShare(session)), children: [_jsx(Share, {}), session.can_manage_sharing !== false
                                             ? 'Share'
                                             : tI18nComplete.raw('textadc01d813da0')] }), session.pinned_at !== undefined && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => onPin(session.session_id, !session.pinned_at)), children: [session.pinned_at ? _jsx(PushPinSlashIcon, {}) : _jsx(PushPinIcon, {}), tPinArchive(session.pinned_at ? 'unpin' : 'pin')] }), _jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => onArchive(session.session_id, !session.archived_at)), children: [_jsx(ArchiveIcon, {}), tPinArchive(session.archived_at ? 'unarchive' : 'archive')] })] })), session.can_manage_lifecycle !== false && (_jsxs(DropdownMenuItem, { className: "cursor-pointer", disabled: isRestarting, onSelect: () => deferAfterClose(() => onRestart(session.session_id, displayTitle)), children: [isRestarting ? _jsx(Loading, { className: "size-4 shrink-0" }) : _jsx(RotateCcw, {}), tI18nComplete.raw('text6b983a81e5e8')] })), sessionCanBeStopped(session) && session.can_manage_lifecycle !== false && (_jsxs(DropdownMenuItem, { className: "cursor-pointer", disabled: isStopping, onSelect: () => deferAfterClose(() => onStop(session.session_id, displayTitle)), children: [isStopping ? _jsx(Loading, { className: "size-4 shrink-0" }) : _jsx(Square, {}), tI18nComplete.raw('textcae7d57bc067')] })), canFork && runtimeRootId && (_jsxs(DropdownMenuItem, { className: "cursor-pointer", disabled: isForking, onSelect: () => deferAfterClose(() => onFork(runtimeRootId, href)), children: [isForking ? _jsx(Loading, { className: "size-4 shrink-0" }) : _jsx(GitForkIcon, {}), tI18nComplete.raw('text0e5f7f6732e0')] })), session.can_manage_lifecycle !== false && (_jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => onDelete(session.session_id, displayTitle)), children: [_jsx(TrashIcon, {}), tI18nComplete.raw('texte2d0a54968ea')] }))] })] })] }) }));
 }

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

@@ -14,14 +14,20 @@ import { ProjectManifestUpgradeAlert } from './footer/project-manifest-upgrade-a
 import { ProjectSandboxAlert } from './footer/project-sandbox-alert.js';
 import { ProjectRepositoryDisconnectedAlert } from '../repository-disconnected.js';
 import { CustomizeSidebarModal } from './customize-sidebar-modal.js';
+import { ProjectMemoryNavItem } from './footer/project-memory-nav.js';
 import { ProjectNavItems } from './project-nav-items.js';
 import { ProjectSessionList } from './project-session-list.js';
+import { ProjectSpacesNav } from './project-spaces-nav.js';
 import { useIsCreatingProjectSession } from '../../internal/hooks/projects/new-session-guard.js';
 import { useNewProjectSession } from '../../internal/hooks/projects/use-new-project-session.js';
 import { useIsMobile } from '../../internal/hooks/index.js';
 import { useTranslations } from '../../i18n/index.js';
 import { cn } from '../../internal/lib/utils.js';
 import { useBillingAccountId } from '../../internal/stores/billing-account-context.js';
+import { useFeatureFlag } from '@kortix/sdk/react';
+import { AppsModal } from '../../internal/apps-and-extensions/apps-modal.js';
+import { useAppsModalStore } from '../../internal/stores/apps-modal-store.js';
+import { ProjectChromeNavItem } from './footer/project-chrome-nav.js';
 import { MagnifyingGlassIcon, NavigationArrowIcon, } from '@phosphor-icons/react';
 import { UiLink as Link } from '../../providers/ui-provider.js';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -43,6 +49,9 @@ export function ProjectSidebar({ projectId, menu, onOpenSearch, }) {
     const [computerConnectOpen, setComputerConnectOpen] = useState(false);
     const [connectMcpOpen, setConnectMcpOpen] = useState(false);
     const accountId = useBillingAccountId();
+    // Channels replace New session and the session list (fail-closed: off until the project answers).
+    const channels = useFeatureFlag(projectId, 'project_channels').enabled;
+    const chrome = useFeatureFlag(projectId, 'chrome').enabled;
     // Open the project composer without creating a durable session.
     const newSession = useNewProjectSession(projectId);
     const creatingSession = useIsCreatingProjectSession(projectId);
@@ -72,6 +81,8 @@ export function ProjectSidebar({ projectId, menu, onOpenSearch, }) {
         onOpenSearch?.();
     }, [isMobile, setOpenMobile, onOpenSearch]);
     useEffect(() => {
+        if (channels)
+            return;
         const handler = (event) => {
             if ((event.metaKey || event.ctrlKey) &&
                 !event.shiftKey &&
@@ -83,7 +94,7 @@ export function ProjectSidebar({ projectId, menu, onOpenSearch, }) {
         };
         window.addEventListener('keydown', handler);
         return () => window.removeEventListener('keydown', handler);
-    }, [handleNewSession]);
+    }, [channels, handleNewSession]);
     return (_jsxs(_Fragment, { 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
@@ -97,5 +108,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: [_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 }) })) }), _jsx(ProjectNavItems, { projectId: projectId })] }) }), _jsx(SidebarGroup, { className: "min-h-0 flex-1 flex-col py-0", ref: sessionsGroupRef, children: _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) })] }) }), _jsx(SidebarUpgradeButton, { accountId: accountId })] }) })] }) }), _jsx(SidebarRail, { "aria-label": t('resize'), title: t('resizeHelp') })] }), _jsx(ComputerConnectModal, { projectId: projectId, open: computerConnectOpen, onOpenChange: setComputerConnectOpen }), _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(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 })] }));
 }

package/dist/workspace/sidebar/project-spaces-nav.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The sidebar under the `project_channels` flag: Channels, then Direct
+ * messages, in the slot the session list holds with the flag off. A section
+ * renders once its data arrives: no skeleton rows for navigation.
+ */
+export declare function ProjectSpacesNav({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProjectSpaces, useVisibleAgents } from '@kortix/sdk/react';
+import { CaretRightIcon, PlusIcon } from '@phosphor-icons/react';
+import { useMemo, useState } from 'react';
+import { useTranslations } from '../../i18n/index.js';
+import { AgentMark } from '../../internal/components/agent-mark.js';
+import { ProjectNavRow } from '../../internal/layout/project-nav-row.js';
+import { cn } from '../../internal/lib/utils.js';
+import { selectCollapsedSections, useSessionFilterStore, } from '../../internal/stores/session-filter-store.js';
+import { customizePath, uiRoutes } from '../../lib/routes.js';
+import { Button } from '../../primitives/button.js';
+import { Disclosure, DisclosureContent, DisclosureTrigger } from '../../primitives/disclosure.js';
+import { FadedScrollArea } from '../../primitives/faded-scroll-area.js';
+import Hint from '../../primitives/hint.js';
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '../../primitives/sidebar.js';
+import { useUiPathname, useUiRouter } from '../../providers/ui-provider.js';
+import { CreateChannelDialog } from '../spaces/create-channel-dialog.js';
+import { PrivateChannelsNotInRow } from '../spaces/private-channels-not-in.js';
+import { agentLabel } from '../spaces/space-timeline.js';
+import { ChannelGlyph } from '../spaces/channel-glyph.js';
+/** Collapse state lives in the persisted session-filter store, beside the session sections. */
+const CHANNELS_SECTION_ID = 'section:channels';
+const DMS_SECTION_ID = 'section:dms';
+/** `href`, or a page under it. */
+function isAt(pathname, href) {
+    return !!pathname && (pathname === href || pathname.startsWith(`${href}/`));
+}
+/**
+ * The sidebar under the `project_channels` flag: Channels, then Direct
+ * messages, in the slot the session list holds with the flag off. A section
+ * renders once its data arrives: no skeleton rows for navigation.
+ */
+export function ProjectSpacesNav({ projectId }) {
+    const t = useTranslations('sidebar');
+    const pathname = useUiPathname();
+    const router = useUiRouter();
+    const spaces = useProjectSpaces(projectId);
+    const agents = useVisibleAgents({ projectId });
+    const [createOpen, setCreateOpen] = useState(false);
+    const collapsedSections = useSessionFilterStore(selectCollapsedSections(projectId));
+    const collapsed = useMemo(() => new Set(collapsedSections), [collapsedSections]);
+    const toggleSectionCollapsed = useSessionFilterStore((s) => s.toggleSectionCollapsed);
+    const channels = spaces.data?.filter((space) => space.kind === 'channel' && !space.archived_at);
+    return (_jsxs(FadedScrollArea, { fadeColor: "from-background", className: "h-full min-h-0 space-y-2", children: [spaces.isError && !spaces.data ? (_jsxs("div", { className: "space-y-1.5 px-2 py-2", children: [_jsx("p", { className: "text-destructive/80 text-xs", children: t('spaces.loadError') }), _jsx(Button, { variant: "outline", size: "xs", onClick: () => spaces.refetch(), children: t('retry') })] })) : null, channels ? (_jsxs(SpacesSection, { title: t('spaces.channels'), open: !collapsed.has(CHANNELS_SECTION_ID), onToggle: () => toggleSectionCollapsed(projectId, CHANNELS_SECTION_ID), action: { label: t('spaces.addChannel'), onClick: () => setCreateOpen(true) }, children: [channels.map((channel) => {
+                        const href = uiRoutes().channel(projectId, channel.slug ?? '');
+                        return (_jsxs(ProjectNavRow, { href: href, active: isAt(pathname, href), label: `#${channel.slug}`, children: [_jsx(ChannelGlyph, { visibility: channel.visibility }), _jsx("span", { children: channel.slug })] }, channel.space_id));
+                    }), _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { onClick: () => setCreateOpen(true), className: "text-muted-foreground hover:text-sidebar-foreground", children: [_jsx(PlusIcon, {}), _jsx("span", { children: t('spaces.addChannel') })] }) }), _jsx(PrivateChannelsNotInRow, { projectId: projectId })] })) : null, spaces.data && agents.length > 0 ? (_jsx(SpacesSection, { title: t('spaces.directMessages'), open: !collapsed.has(DMS_SECTION_ID), onToggle: () => toggleSectionCollapsed(projectId, DMS_SECTION_ID), 
+                // Every visible agent already has a DM row: the `+` makes a new agent.
+                action: { label: t('spaces.newAgent'), onClick: () => router.push(customizePath(projectId, 'agents')) }, children: agents.map((agent) => {
+                    const name = agentLabel(agent.name);
+                    const href = uiRoutes().dm(projectId, agent.name);
+                    return (_jsxs(ProjectNavRow, { href: href, active: isAt(pathname, href), label: name, 
+                        // The row forces every svg to size-4: the pixel mark keeps its 14px glyph.
+                        className: "[&_[data-slot=agent-mark]>svg]:size-[14px]!", children: [_jsx(AgentMark, { slug: agent.name, size: 14 }), _jsx("span", { children: name })] }, agent.name));
+                }) })) : null, _jsx(CreateChannelDialog, { projectId: projectId, open: createOpen, onOpenChange: setCreateOpen })] }));
+}
+/**
+ * A collapsible section: the muted label, then the caret, then a `+` at the
+ * trailing edge. The caret and the `+` stay hidden until the header is hovered
+ * or focused, so the list reads as names, not chrome. A collapsed section keeps
+ * its caret, so a closed section still says it holds more.
+ *
+ * The `+` is a sibling of the trigger, not inside it: a button nested in a
+ * `role="button"` is invalid, and its click would also toggle the section.
+ */
+function SpacesSection({ title, open, onToggle, action, children, }) {
+    return (_jsxs(Disclosure, { open: open, onOpenChange: onToggle, className: "group/section", transition: { duration: 0.15, ease: 'easeOut' }, children: [_jsxs("div", { className: "group/section-header flex h-8 items-center gap-1 pr-1", children: [_jsx(DisclosureTrigger, { children: _jsxs("div", { className: cn('text-muted-foreground hover:text-sidebar-foreground flex h-full min-w-0 flex-1 cursor-pointer items-center gap-1 rounded-md px-2 text-sm font-medium', 'focus-visible:ring-kortix-base focus-visible:ring-[0.6px] focus-visible:outline-none'), children: [_jsx("span", { className: "truncate", children: title }), _jsx(CaretRightIcon, { "aria-hidden": true, className: cn('duration-normal size-3 shrink-0 transition-[rotate,opacity] ease-out', 'opacity-0 group-focus-within/section-header:opacity-100 group-hover/section-header:opacity-100', 'group-data-[state=closed]/section:opacity-100 group-data-[state=open]/section:rotate-90') })] }) }), _jsx(Hint, { label: action.label, side: "right", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", "aria-label": action.label, onClick: action.onClick, className: "text-muted-foreground hover:text-sidebar-foreground shrink-0 opacity-0 group-focus-within/section-header:opacity-100 group-hover/section-header:opacity-100 focus-visible:opacity-100", children: _jsx(PlusIcon, { className: "size-3.5" }) }) })] }), _jsx(DisclosureContent, { contentClassName: "pt-px", children: _jsx(SidebarMenu, { className: "gap-px", children: children }) })] }));
+}

package/dist/workspace/sidebar/session-group-order.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The project's session groups in a new order, for `PUT /session-groups/order`
+ * (every id, once). Null when nothing would move, so a caller sends no request
+ * and a menu item can render disabled.
+ */
+/** `ids` with `id` moved to `index`, clamped to the ends: a group dropped on another takes its place. */
+export declare function moveGroupTo(ids: readonly string[], id: string, index: number): string[] | null;
+/** `ids` with `id` moved one place up (`-1`) or down (`1`). Null at that end. */
+export declare function moveGroupBy(ids: readonly string[], id: string, delta: -1 | 1): string[] | null;

package/dist/workspace/sidebar/session-group-order.js

@@ -0,0 +1,25 @@
+/**
+ * The project's session groups in a new order, for `PUT /session-groups/order`
+ * (every id, once). Null when nothing would move, so a caller sends no request
+ * and a menu item can render disabled.
+ */
+/** `ids` with `id` moved to `index`, clamped to the ends: a group dropped on another takes its place. */
+export function moveGroupTo(ids, id, index) {
+    const from = ids.indexOf(id);
+    if (from === -1)
+        return null;
+    const to = Math.max(0, Math.min(ids.length - 1, index));
+    if (to === from)
+        return null;
+    const next = ids.filter((other) => other !== id);
+    next.splice(to, 0, id);
+    return next;
+}
+/** `ids` with `id` moved one place up (`-1`) or down (`1`). Null at that end. */
+export function moveGroupBy(ids, id, delta) {
+    const from = ids.indexOf(id);
+    const to = from + delta;
+    if (from === -1 || to < 0 || to >= ids.length)
+        return null;
+    return moveGroupTo(ids, id, to);
+}

package/dist/workspace/sidebar/session-group-sections.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Session groups in the sidebar (`session_groups` flag): the project's shared,
+ * named folders of sessions, between Pinned and the rest of the list.
+ *
+ * Each group is a section. Its rows load when it is open (one paged list per
+ * group, any starter, any depth), and its open state is the viewer's own,
+ * beside the other sections in the session-filter store. A session moves into
+ * a group from its `⋯` menu or by dragging its row onto the group; a group
+ * moves by dragging its header onto another group, or with Move up / Move
+ * down. Dragging a row onto the rest of the list takes it out of its group.
+ */
+import { type ProjectSession, type ProjectSessionGroup } from '@kortix/sdk';
+import { type DragEvent, type ReactNode } from 'react';
+/** The collapsed-sections id of one group. */
+export declare function sessionGroupSectionId(groupId: string): string;
+/** `onDragStart` of a session row: the row's link drag also carries the session id. */
+export declare function startSessionDrag(event: DragEvent, sessionId: string): void;
+/** Filing and reordering, with their result toasts. One instance per list. */
+export declare function useSessionGroupActions(projectId: string, groups: readonly ProjectSessionGroup[]): {
+    /** `toast`: a menu move reports where the row went; a drop shows it in place. */
+    move: (sessionId: string, groupId: string | null, options?: {
+        toast?: boolean;
+    }) => Promise<void>;
+    reorder: (groupIds: string[] | null) => Promise<void>;
+};
+/**
+ * Create a group (`group` null) or rename one. A taken name and the group
+ * limit show in the dialog; the dialog closes with a toast once the list holds
+ * the change. `onCreated` receives the new group (a row's "New group…" files
+ * its session into it).
+ */
+export declare function SessionGroupNameModal({ projectId, group, open, onOpenChange, onCreated, }: {
+    projectId: string;
+    group: ProjectSessionGroup | null;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onCreated?: (group: ProjectSessionGroup) => void;
+}): import("react").JSX.Element;
+interface SessionGroupSectionsProps {
+    projectId: string;
+    groups: readonly ProjectSessionGroup[];
+    /** The Labels facet, sent to every group's list like the main list's. */
+    labels: string[] | undefined;
+    collapsedSectionIds: ReadonlySet<string>;
+    onToggleSection: (sectionId: string) => void;
+    /** The status and source facets, applied to each group's rows. */
+    passesFacets: (session: ProjectSession) => boolean;
+    renderNode: (session: ProjectSession) => ReactNode;
+    actions: ReturnType<typeof useSessionGroupActions>;
+    onRename: (group: ProjectSessionGroup) => void;
+}
+/** Every group of the project, in order. */
+export declare function SessionGroupSections({ groups, ...rest }: SessionGroupSectionsProps): import("react").JSX.Element;
+/**
+ * The rest of the list as a drop target: a session row dropped here leaves
+ * its group. Highlights only while a row is over it.
+ */
+export declare function UngroupDropArea({ onDropSession, children, }: {
+    onDropSession: (sessionId: string) => void;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};