zidane-ui 9.0.4 → 9.1.3

package/dist/chat/rich-composer/use-extension-composer.js

@@ -0,0 +1,46 @@
+import { isFocusedComposer } from "../composer/composer-bus.js";
+import { useExtensionEffects } from "../../extensions/hooks.js";
+//#region src/chat/rich-composer/use-extension-composer.ts
+let attachSeq = 0;
+/**
+* The attachment an extension's file becomes, or `null` for a path (a browser can't read it).
+*
+* @param file - The file `ctx.composer.attach` sent.
+*/
+function extensionFileAttachment(file) {
+	if (!("data" in file)) return null;
+	const padding = file.data.endsWith("==") ? 2 : file.data.endsWith("=") ? 1 : 0;
+	return {
+		id: `ext-att-${++attachSeq}`,
+		name: file.name,
+		mediaType: file.mimeType,
+		size: Math.max(0, Math.floor(file.data.length * 3 / 4) - padding),
+		dataUrl: `data:${file.mimeType};base64,${file.data}`
+	};
+}
+/**
+* Applies the extensions' composer edits meant for this composer.
+*
+* @param target - The composer: its session, scope, and what it does with each edit.
+*/
+function useExtensionComposerEffects(target) {
+	useExtensionEffects((effect) => {
+		if (effect.kind !== "composer") return false;
+		const op = effect.op;
+		if (op.op === "insert") return target.insert(op.text);
+		if (op.op === "setText") return target.setText(op.text);
+		let staged = 0;
+		for (const file of op.files) {
+			const attachment = extensionFileAttachment(file);
+			if (!attachment) continue;
+			target.attach(attachment);
+			staged++;
+		}
+		return staged > 0;
+	}, {
+		accepts: (effect) => effect.kind === "composer" && target.enabled && (effect.sessionId !== void 0 ? effect.sessionId === target.sessionId : isFocusedComposer(target.scopeKey)),
+		priority: 10
+	});
+}
+//#endregion
+export { extensionFileAttachment, useExtensionComposerEffects };

package/dist/chat/sidebar/MainSessionRow.js

@@ -16,7 +16,7 @@ function MainSessionRowInner({ sessionId, isActive, icon, onAssignIcon, onSelect
 	const labels = useSidebarLabels();
 	const handleSelect = useCallback(() => onSelect(sessionId), [sessionId, onSelect]);
 	return /* @__PURE__ */ jsx("li", {
-		className: ["zg-session-row group relative rounded-zg-md", className].filter(Boolean).join(" "),
+		className: ["zg-session-row zg-press-host group relative rounded-zg-md", className].filter(Boolean).join(" "),
 		style,
 		"data-session-id": sessionId,
 		"data-active": isActive ? "true" : void 0,

package/dist/chat/sidebar/ProjectIcon.d.ts

@@ -1,15 +1,34 @@
 import { ProjectIcon, ProjectIconMap } from "../headless/sidebar/project-icons.js";
 import { CSSProperties } from "react";
 //#region src/chat/sidebar/ProjectIcon.d.ts
-/**
- * Icon map + setter. State-first, storage-second: the localStorage write
- * is best-effort (quota overflow from many image icons must not break
- * the in-session assignment).
- */
+/** Forget the shared map (tests: a fresh read from storage). */
+declare function resetProjectIconsForTests(): void;
+/** Icon map + setter, shared by every caller on the page. */
 declare function useProjectIcons(): {
   icons: ProjectIconMap;
   setIcon: (fullPath: string, icon: ProjectIcon | null) => void;
 };
+/** Props of {@link ProjectIconGlyph}. */
+interface ProjectIconGlyphProps {
+  /** The icon assigned to the folder, if any. */
+  icon?: ProjectIcon;
+  /** No icon assigned: a git branch for a repository, else a folder. */
+  isGitRepo?: boolean;
+  /** Default glyph class when nothing is assigned; overrides the folder / git-branch choice. */
+  defaultGlyph?: string;
+  /** `sm`: the sidebar's 18px slot. `lg`: a heading's 28px slot (the project home). */
+  size?: 'sm' | 'lg';
+  /** Extra classes on the slot. */
+  className?: string;
+  /** Inline styles on the slot. */
+  style?: CSSProperties;
+}
+/**
+ * A project's icon, display only: the same picked icon or default glyph its sidebar header shows.
+ *
+ * @param props - The {@link ProjectIconGlyphProps}.
+ */
+declare function ProjectIconGlyph({ icon, isGitRepo, defaultGlyph, size, className, style }: ProjectIconGlyphProps): import("react").JSX.Element;
 /** Props of {@link ProjectIconButton}. */
 interface ProjectIconButtonProps {
   /**
@@ -68,4 +87,4 @@ interface IconPickerProps {
  */
 declare function IconPicker({ hasIcon, onPick, resetLabel }: IconPickerProps): import("react").JSX.Element;
 //#endregion
-export { ICON_PICKER_WIDTH, IconPicker, IconPickerProps, ProjectIconButton, ProjectIconButtonProps, useProjectIcons };
+export { ICON_PICKER_WIDTH, IconPicker, IconPickerProps, ProjectIconButton, ProjectIconButtonProps, ProjectIconGlyph, ProjectIconGlyphProps, resetProjectIconsForTests, useProjectIcons };

package/dist/chat/sidebar/ProjectIcon.js

@@ -5,7 +5,7 @@ import { readPersisted, writePersisted } from "../../hooks/usePersistedState.js"
 import { COMMON_EMOJI, PROJECT_ICONS_KEY, firstGrapheme, parseProjectIcons } from "../headless/sidebar/project-icons.js";
 import { useSidebarLabels } from "./useSidebarLabels.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from "react";
+import { useRef, useState, useSyncExternalStore } from "react";
 //#region src/chat/sidebar/ProjectIcon.tsx
 /**
 * Per-project custom icons for the sidebar's grouped view.
@@ -22,31 +22,87 @@ import { useCallback, useRef, useState } from "react";
 * basename, but two projects sharing a basename must not share an icon.
 * Reads are guarded with try/catch + per-entry shape validation, same
 * defensive pattern as the sidebar view map (`headless/sidebar/view.ts`).
+* One map per page, shared by every `useProjectIcons`: a pick in the
+* sidebar shows at once wherever the project's icon is drawn (the project
+* home's header, `ProjectIconGlyph`).
 *
 * **Popover.** The shared floating surface under the trigger
 * (`usePopover`: outside press and Esc close, Esc never reaches App).
 */
 const loadProjectIcons = () => readPersisted("zg-sidebar-project-icons", parseProjectIcons) ?? {};
+/** The page's one icon map, read from storage on first use. */
+let sharedIcons = null;
+const iconListeners = /* @__PURE__ */ new Set();
+const readIcons = () => sharedIcons ??= loadProjectIcons();
+const subscribeIcons = (listener) => {
+	iconListeners.add(listener);
+	return () => iconListeners.delete(listener);
+};
 /**
-* Icon map + setter. State-first, storage-second: the localStorage write
-* is best-effort (quota overflow from many image icons must not break
-* the in-session assignment).
+* Assigns (or, with `null`, resets) a folder's icon. State-first, storage-second: the localStorage write is
+* best-effort (quota overflow from many image icons must not break the in-session assignment).
 */
+function setProjectIcon(fullPath, icon) {
+	const next = { ...readIcons() };
+	if (icon) next[fullPath] = icon;
+	else delete next[fullPath];
+	sharedIcons = next;
+	writePersisted(PROJECT_ICONS_KEY, JSON.stringify(next));
+	for (const listener of iconListeners) listener();
+}
+/** Forget the shared map (tests: a fresh read from storage). */
+function resetProjectIconsForTests() {
+	sharedIcons = null;
+}
+/** Icon map + setter, shared by every caller on the page. */
 function useProjectIcons() {
-	const [icons, setIcons] = useState(loadProjectIcons);
 	return {
-		icons,
-		setIcon: useCallback((fullPath, icon) => {
-			setIcons((current) => {
-				const next = { ...current };
-				if (icon) next[fullPath] = icon;
-				else delete next[fullPath];
-				writePersisted(PROJECT_ICONS_KEY, JSON.stringify(next));
-				return next;
-			});
-		}, [])
+		icons: useSyncExternalStore(subscribeIcons, readIcons, readIcons),
+		setIcon: setProjectIcon
 	};
 }
+const GLYPH_SIZE = {
+	sm: {
+		slot: "w-[18px] h-[18px] rounded-zg-sm",
+		emoji: "text-zg-ui",
+		glyph: "text-sm"
+	},
+	lg: {
+		slot: "w-7 h-7 rounded-zg-md",
+		emoji: "text-zg-title",
+		glyph: "text-zg-title"
+	}
+};
+/** The glyph inside a project's icon slot: the picked image or emoji, else the default glyph. */
+function iconGlyph(icon, isGitRepo, defaultGlyph, size) {
+	const s = GLYPH_SIZE[size];
+	return icon?.kind === "image" ? /* @__PURE__ */ jsx("img", {
+		src: icon.value,
+		alt: "",
+		draggable: false,
+		className: "w-full h-full object-cover"
+	}) : icon?.kind === "emoji" ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: `${s.emoji} leading-none`,
+		children: icon.value
+	}) : /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: `${defaultGlyph ?? (isGitRepo ? "i-ph-git-branch" : "i-ph-folder")} ${s.glyph}`
+	});
+}
+/**
+* A project's icon, display only: the same picked icon or default glyph its sidebar header shows.
+*
+* @param props - The {@link ProjectIconGlyphProps}.
+*/
+function ProjectIconGlyph({ icon, isGitRepo, defaultGlyph, size = "sm", className, style }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: [`inline-flex items-center justify-center shrink-0 overflow-hidden ${GLYPH_SIZE[size].slot}`, className].filter(Boolean).join(" "),
+		style,
+		children: iconGlyph(icon, isGitRepo, defaultGlyph, size)
+	});
+}
 /** Downscale target in px: well above the 18px display slot so it stays sharp on retina, ~2–4 KB as webp. */
 const ICON_PX = 48;
 /**
@@ -84,24 +140,13 @@ function ProjectIconButton({ fullPath, label, icon, isGitRepo, defaultGlyph, tit
 	const labels = useSidebarLabels();
 	const popover = usePopover();
 	const { triggerRef, surfaceRef } = popover;
-	const glyph = icon?.kind === "image" ? /* @__PURE__ */ jsx("img", {
-		src: icon.value,
-		alt: "",
-		draggable: false,
-		className: "w-full h-full object-cover"
-	}) : icon?.kind === "emoji" ? /* @__PURE__ */ jsx("span", {
-		"aria-hidden": true,
-		className: "text-zg-ui leading-none",
-		children: icon.value
-	}) : /* @__PURE__ */ jsx("span", {
-		"aria-hidden": true,
-		className: `${defaultGlyph ?? (isGitRepo ? "i-ph-git-branch" : "i-ph-folder")} text-sm`
-	});
-	if (!fullPath) return /* @__PURE__ */ jsx("span", {
-		"aria-hidden": true,
-		className: ["inline-flex items-center justify-center w-[18px] h-[18px] shrink-0 rounded-zg-sm overflow-hidden", className].filter(Boolean).join(" "),
-		style,
-		children: glyph
+	const glyph = iconGlyph(icon, isGitRepo, defaultGlyph, "sm");
+	if (!fullPath) return /* @__PURE__ */ jsx(ProjectIconGlyph, {
+		...icon ? { icon } : {},
+		...isGitRepo !== void 0 ? { isGitRepo } : {},
+		...defaultGlyph ? { defaultGlyph } : {},
+		...className ? { className } : {},
+		...style ? { style } : {}
 	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
 		ref: (node) => {
@@ -231,4 +276,4 @@ function IconPicker({ hasIcon, onPick, resetLabel }) {
 	] });
 }
 //#endregion
-export { ICON_PICKER_WIDTH, IconPicker, ProjectIconButton, useProjectIcons };
+export { ICON_PICKER_WIDTH, IconPicker, ProjectIconButton, ProjectIconGlyph, resetProjectIconsForTests, useProjectIcons };

package/dist/chat/sidebar/SessionSidebar.d.ts

@@ -1,7 +1,10 @@
-import { SessionArchiveFilter, SidebarGroupBy, SidebarListSession, SidebarSortBy } from "../headless/sidebar/types.js";
+import { ExtensionItem } from "../../extensions/headless/wire.js";
+import { SessionArchiveFilter, SidebarGroupBy, SidebarListSession, SidebarSortBy, SidebarView } from "../headless/sidebar/types.js";
+import { SidebarQueryLayer } from "../headless/sidebar/query.js";
 import { HostView } from "../headless/hosts.js";
 import { SidebarProject } from "./session-menu.js";
 import { SidebarChromeInset } from "./SidebarFrame.js";
+import { SidebarProjectRef } from "./SidebarGroupHeader.js";
 import { SidebarLive } from "./sidebar-live.js";
 import { SessionContentSearch } from "./useSessionSearch.js";
 import { CSSProperties, ReactNode } from "react";
@@ -58,6 +61,17 @@ interface SessionSidebarProps<S extends SidebarRowSession> {
   onNewSession: () => void;
   /** Starts a new session in a project's folder. */
   onNewSessionIn: (path: string) => void;
+  /**
+   * Opens a project's home (its name clicked; a server's project too). Present: project names open it and
+   * their collapse moves to a chevron after their buttons. Absent: names toggle collapse.
+   */
+  onOpenProject?: (project: SidebarProjectRef) => void;
+  /** The project whose home shows: its header wears the active chip. */
+  openProject?: SidebarProjectRef | null;
+  /** Starts a new chat with no folder (the Chats name clicked). Present: the Chats collapse moves to a chevron. */
+  onOpenChats?: () => void;
+  /** A new chat with no folder shows: the Chats header wears the active chip. */
+  chatsOpen?: boolean;
   /** Renames a session. */
   onRename: (sessionId: S['id'], title: string) => Promise<void>;
   /** Archives or restores a session. */
@@ -82,6 +96,25 @@ interface SessionSidebarProps<S extends SidebarRowSession> {
   onDeleteProject: (project: SidebarProject, label: string, onRemoved: () => void) => void;
   /** The keys belong elsewhere now (a modal is open). */
   keyboardBlocked?: () => boolean;
+  /**
+   * The shown space's query layer (`SessionDirectoryView.query`): the grouping and sort that apply
+   * (a space's, an extension's, the agents'), the row decorations and the extension items. Absent:
+   * the built-in grouping and sort, no decorations, no items.
+   */
+  query?: SidebarQueryLayer;
+  /**
+   * Changes the shown space's view: the empty list's reset turns its filters off with it, when
+   * filters hid every session (needs `query`). Absent: the empty list offers no reset.
+   */
+  onViewChange?: (patch: Partial<SidebarView>) => void;
+  /** Agent names by id: the agent grouping's headers. Default: the composer host's agent catalog. An agent left out shows its id. */
+  agentNames?: Readonly<Record<string, string>>;
+  /**
+   * Opens an extension item's target. Default: a session opens, a command runs through the extensions
+   * host with the item's `args`, a panel focuses in the workspace, a screen opens on the modal layer.
+   * The wire's ids are already full (`SidebarRowWire`): they are used as they are.
+   */
+  onOpenItem?: (open: NonNullable<ExtensionItem<'sidebar-row'>['item']['open']>, item: ExtensionItem<'sidebar-row'>) => void;
   /** Beside the search well: the filter menu. */
   filter?: ReactNode;
   /** Under the list: the footer strip. */

package/dist/chat/sidebar/SessionSidebar.js

@@ -1,18 +1,26 @@
 import { useWithFade } from "../../motion/springs.js";
 import { basename } from "../../path.js";
+import { useExtensionsHost } from "../../extensions/ExtensionsProvider.js";
 import { useSidebarNotice } from "./SidebarHostProvider.js";
+import { compareSessions } from "../headless/session-list.js";
+import { useOptionalWorkspaceActions } from "../../workspace/WorkspaceProvider.js";
+import { ExtensionSlot } from "../../extensions/ExtensionSlot.js";
 import { ShowMoreRow } from "../SessionGroupHeader.js";
 import { SessionHostHeader } from "../SessionHostHeader.js";
 import { KeyHint } from "../../keybindings/KeyHint.js";
+import { useExtensionScreen } from "../../extensions/ExtensionScreen.js";
 import "../headless/sidebar/project-icons.js";
 import { useSidebarLabels } from "./useSidebarLabels.js";
 import { useProjectIcons } from "./ProjectIcon.js";
-import { buildHostSidebarRows, groupsByFolder, nestSidebarRows, partitionMainSession } from "../headless/sidebar/rows.js";
+import { buildHostSidebarRows, buildQuerySidebarRows, groupsByFolder, itemRows, nestSidebarRows, partitionMainSession } from "../headless/sidebar/rows.js";
+import { AGENT_GROUPING, claimChildSessions, clearedViewFilters, createDecorator, viewFiltersOn } from "../headless/sidebar/query.js";
 import { MainSessionRow } from "./MainSessionRow.js";
 import { useEnvironmentCommands } from "./session-menu.js";
 import { holdFocusIn } from "./sidebar-focus-hold.js";
 import { SidebarFrame, useSidebarFrame } from "./SidebarFrame.js";
 import { SidebarGroupHeader } from "./SidebarGroupHeader.js";
+import { SidebarRowView } from "./SidebarRowView.js";
+import { useAgentNames } from "./useAgentNames.js";
 import { SidebarSearchRow } from "./SidebarSearchRow.js";
 import { SidebarSessionRow } from "./SidebarSessionRow.js";
 import { usePinnedProjects } from "./usePinnedProjects.js";
@@ -21,13 +29,19 @@ import { useSidebarKeyboardNav } from "./useSidebarKeyboardNav.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { AnimatePresence, LazyMotion, domAnimation, m, useIsPresent } from "motion/react";
+import { sortRows } from "zidane/chat/pure";
 //#region src/chat/sidebar/SessionSidebar.tsx
 /**
 * The session sidebar, whole: its frame (`SidebarFrame`), the top band (the
 * orchestration Main, New session, the search well with the filter menu),
 * the list (grouped sections whose headers stick, the search results, one
-* list per space that slides on a user switch) and the footer the app puts
-* under it. The keyboard walks the list (`useSidebarKeyboardNav`).
+* list per space that slides on a user switch), the extensions' `sidebar.top`
+* and `sidebar.bottom` blocks pinned right above and below the list (they
+* never scroll with it) and the footer the app puts under it. The keyboard walks the list (`useSidebarKeyboardNav`): ↑ / ↓ go
+* from session to session and skip extension item rows (landing on one would
+* open its target, which may run an extension command); Tab reaches them.
+* An empty list says why: no chats yet, or none matching the view's filters,
+* with a reset when the app passes `onViewChange`.
 *
 * The data comes in as props, the session directory's view
 * (`useSessionDirectoryView`) with the app's actions; the live parts of the
@@ -40,6 +54,11 @@ const LIST_STYLE = {
 	maskImage: LIST_MASK,
 	WebkitMaskImage: LIST_MASK
 };
+/**
+* The `sidebar.top` and `sidebar.bottom` blocks: pinned (the list scrolls, they don't), each at most 30% of the
+* sidebar so the list keeps most of it, scrolling on their own past that. An empty one draws nothing.
+*/
+const PINNED_SLOT = "shrink-0 max-h-[30%] overflow-y-auto px-2 py-1";
 /** The space list slide's duration (s). */
 const SPACE_SLIDE_S = .22;
 const SPACE_LIST_VARIANTS = {
@@ -115,13 +134,15 @@ function NewSessionButton({ onNewSession, isActive, className = "", style }) {
 	});
 }
 const messageOf = (err) => err?.message ?? String(err);
+const NO_ITEMS = [];
+const NO_DECORATIONS = [];
 /**
 * Renders the session sidebar.
 *
 * @param props - The directory's view, the app's actions, the live row parts, the footer and the frame.
 */
 function SessionSidebar(props) {
-	const { sessions: allSessions, hosts, groupBy, sortBy, archiveFilter, activeSessionId, onActivate, orchestration, spacesOn, spaces, listSpaceId, spaceSlide: lastSpaceSwitch, search, live, runDetails = true, artifactBadges = true, onNewSession, onNewSessionIn: newSessionIn, onRename, onSetArchived, onSetFavorite, onDelete, onMoveToSpace, onMoveSession, onMoveProjectToSpace, onArchiveProject, onDeleteProject: deleteProject, keyboardBlocked, filter, footer, collapsed, width, onWidthCommit, chromeInset, ariaLabel, className, style } = props;
+	const { sessions: allSessions, hosts, groupBy, sortBy, archiveFilter, activeSessionId, onActivate, orchestration, spacesOn, spaces, listSpaceId, spaceSlide: lastSpaceSwitch, search, live, runDetails = true, artifactBadges = true, onNewSession, onNewSessionIn: newSessionIn, onOpenProject, openProject, onOpenChats, chatsOpen = false, onRename, onSetArchived, onSetFavorite, onDelete, onMoveToSpace, onMoveSession, onMoveProjectToSpace, onArchiveProject, onDeleteProject: deleteProject, keyboardBlocked, query, onViewChange, agentNames: agentNamesProp, onOpenItem, filter, footer, collapsed, width, onWidthCommit, chromeInset, ariaLabel, className, style } = props;
 	const labels = useSidebarLabels();
 	const notify = useSidebarNotice();
 	const environment = useEnvironmentCommands();
@@ -159,31 +180,78 @@ function SessionSidebar(props) {
 	const { pinned: pinnedProjects, setPinned: setProjectPinned } = usePinnedProjects(listSpaceId);
 	/** The pinned Main renders once, above every group, instead of also in its own bucket. */
 	const { main: mainSession, rest: groupableSessions } = useMemo(() => partitionMainSession(sessions, orchestration), [sessions, orchestration]);
+	const catalogNames = useAgentNames();
+	const agentNames = agentNamesProp ?? catalogNames;
+	/** The grouping that applies: the query layer's, else the view's ('agent' as a query grouping). */
+	const grouping = useMemo(() => query?.grouping ?? (groupBy === "agent" ? {
+		kind: "query",
+		groupBy: AGENT_GROUPING,
+		source: "agent"
+	} : {
+		kind: "builtin",
+		groupBy
+	}), [query?.grouping, groupBy]);
+	/** The grouping the headers and chips read: a query grouping's groups are no folders. */
+	const listGroupBy = grouping.kind === "builtin" ? grouping.groupBy : "none";
+	/** The view narrows the space's sessions: an empty list then says so, not "no chats yet". */
+	const filtersOn = useMemo(() => query ? viewFiltersOn(query.view, query.filters) : false, [query]);
+	const querySort = query?.sort ?? null;
+	/** The extension items of this space, each with the sessions its query lists under it (taken out of the list). */
+	const claimed = useMemo(() => claimChildSessions(query?.items ?? NO_ITEMS, groupableSessions), [query?.items, groupableSessions]);
+	/** What decorations put on each row (`null` for every row while no extension decorates, so the rows' memo holds). */
+	const decorate = useMemo(() => createDecorator(query?.decorations ?? NO_DECORATIONS), [query?.decorations]);
+	const decorations = useMemo(() => new Map(sessions.map((s) => [s.id, decorate(s)])), [sessions, decorate]);
+	const decorationOf = (session) => decorations.get(session.id) ?? null;
 	/**
 	* Sorted + grouped rows. Collapse and the per-project cap are applied inside the builder, so arrow-key nav
 	* (which walks the session rows) can never land on a hidden row.
 	*/
-	const rows = useMemo(() => buildHostSidebarRows(groupableSessions, hosts, groupBy, sortBy, {
-		collapsedGroups,
-		showMoreExpanded,
-		pinnedProjects
-	}), [
-		groupableSessions,
+	const rows = useMemo(() => {
+		const rest = claimed.rest;
+		const sorted = querySort ? sortRows(rest, querySort) : null;
+		if (grouping.kind === "query") return buildQuerySidebarRows(sorted ?? rest.slice().sort((a, b) => compareSessions(a, b, sortBy)), grouping.groupBy, {
+			collapsedGroups,
+			...grouping.source === "agent" ? { labels: agentNames } : {},
+			missingLabel: grouping.source === "agent" ? labels.agentGroupDefault : labels.queryGroupOther,
+			favoritesLabel: labels.favorites,
+			isFavorite: (s) => s.favorite === true,
+			items: claimed.items
+		});
+		const order = sorted ? new Map(sorted.map((s, i) => [s.id, i])) : null;
+		return [...claimed.items.flatMap((item) => itemRows(item, collapsedGroups)), ...buildHostSidebarRows(rest, hosts, grouping.groupBy, sortBy, {
+			collapsedGroups,
+			showMoreExpanded,
+			pinnedProjects,
+			...order ? { compare: (a, b) => (order.get(a.id) ?? 0) - (order.get(b.id) ?? 0) } : {}
+		})];
+	}, [
+		claimed,
+		querySort,
+		grouping,
 		hosts,
-		groupBy,
 		sortBy,
 		collapsedGroups,
 		showMoreExpanded,
-		pinnedProjects
+		pinnedProjects,
+		agentNames,
+		labels
 	]);
 	/** The rows as the list draws them: each header with the rows under it, a section whose header sticks. */
 	const sections = useMemo(() => nestSidebarRows(rows), [rows]);
 	const hostById = useMemo(() => new Map(hosts.map((h) => [h.id, h])), [hosts]);
 	/** This machine's project folders with a listed conversation not archived yet. */
 	const archivableProjects = useMemo(() => {
-		const out = /* @__PURE__ */ new Set();
-		for (const s of groupableSessions) if (!s.hostId && !s.archived) out.add((s.projectRoot || s.cwd).replace(/\/+$/, "") || "/");
-		return out;
+		const folders = /* @__PURE__ */ new Set();
+		const repos = /* @__PURE__ */ new Set();
+		for (const s of groupableSessions) {
+			if (s.archived) continue;
+			if (!s.hostId) folders.add((s.projectRoot || s.cwd).replace(/\/+$/, "") || "/");
+			else if (s.repoKey) repos.add(s.repoKey);
+		}
+		return {
+			folders,
+			repos
+		};
 	}, [groupableSessions]);
 	const favoriteProjects = useMemo(() => {
 		const out = /* @__PURE__ */ new Map();
@@ -286,6 +354,34 @@ function SessionSidebar(props) {
 		labels
 	]);
 	const onDeleteProject = useCallback((project, label) => deleteProject(project, label, () => setProjectPinned(project.path, false)), [deleteProject, setProjectPinned]);
+	const runCommand = useExtensionsHost()?.commands?.run;
+	const workspace = useOptionalWorkspaceActions();
+	const openScreen = useExtensionScreen();
+	const onOpenItemTarget = useCallback((entry) => {
+		const open = entry.item.open;
+		if (!open) return;
+		if (onOpenItem) return onOpenItem(open, entry);
+		if ("session" in open) commitImmediate(open.session);
+		else if ("command" in open) runCommand?.(open.command, { args: entry.item.args }).catch((err) => notify(labels.itemOpenFailed(messageOf(err))));
+		else if ("panel" in open) workspace?.focusTab(open.panel);
+		else openScreen(open.screen);
+	}, [
+		onOpenItem,
+		commitImmediate,
+		runCommand,
+		notify,
+		labels,
+		workspace,
+		openScreen
+	]);
+	const onRunItemAction = useCallback((entry, action) => {
+		if (!action.command || !runCommand) return;
+		runCommand(action.command, { args: entry.item.args }).catch((err) => notify(labels.itemOpenFailed(messageOf(err))));
+	}, [
+		runCommand,
+		notify,
+		labels
+	]);
 	const onRowOpenMenu = useCallback((sessionId) => setMenuForId(sessionId), []);
 	const onRowCloseMenu = useCallback((sessionId) => {
 		setMenuForId((current) => current === sessionId ? null : current);
@@ -359,7 +455,7 @@ function SessionSidebar(props) {
 		onWidthCommit
 	});
 	if (!frame.mounted) return null;
-	const renderNode = (node) => {
+	const renderNode = (node, serverOfGroup) => {
 		if (node.kind === "section") {
 			const { header } = node;
 			return /* @__PURE__ */ jsx("li", {
@@ -374,7 +470,7 @@ function SessionSidebar(props) {
 						className: "zg-sticky-head"
 					}) : /* @__PURE__ */ jsx(SidebarGroupHeader, {
 						row: header,
-						groupBy,
+						groupBy: listGroupBy,
 						icon: header.fullPath ? projectIcons[header.fullPath] : void 0,
 						onAssignIcon: setProjectIcon,
 						onToggle: toggleGroup,
@@ -384,11 +480,19 @@ function SessionSidebar(props) {
 						onMoveProject: onRowMoveProjectToSpace,
 						pinned: header.pinned === true,
 						onSetPinned: setProjectPinned,
-						canArchive: header.fullPath !== void 0 && archivableProjects.has(header.fullPath),
+						canArchive: header.fullPath !== void 0 && archivableProjects.folders.has(header.fullPath) || header.repoKey !== void 0 && archivableProjects.repos.has(header.repoKey),
 						onArchiveProject,
 						onDeleteProject,
-						...header.hostId && hostById.get(header.hostId) ? { server: hostById.get(header.hostId) } : {}
-					}), node.children.map(renderNode)]
+						...header.hostId && hostById.get(header.hostId) ? { server: hostById.get(header.hostId) } : {},
+						...onOpenProject ? {
+							onOpenProject,
+							open: activeSessionId == null && openProject != null && openProject.path === header.fullPath && openProject.hostId === header.hostId
+						} : {},
+						...onOpenChats && header.chats ? {
+							onOpenChats,
+							open: activeSessionId == null && chatsOpen
+						} : {}
+					}), node.children.map((child) => renderNode(child, header.kind === "host" ? header.host.id : header.hostId))]
 				})
 			}, node.id);
 		}
@@ -396,6 +500,16 @@ function SessionSidebar(props) {
 			hiddenCount: node.hiddenCount,
 			onExpand: () => expandGroup(node.groupId)
 		}, node.id);
+		if (node.kind === "item") return /* @__PURE__ */ jsx(SidebarRowView, {
+			rowId: node.id,
+			entry: node.row.entry,
+			collapsed: node.row.collapsed,
+			childCount: node.row.childCount,
+			onOpen: onOpenItemTarget,
+			...runCommand ? { onRunAction: onRunItemAction } : {},
+			onToggle: toggleGroup,
+			children: node.children.map((child) => renderNode(child, serverOfGroup))
+		}, node.id);
 		const session = node.session;
 		const isRenaming = session.id === renamingId;
 		return /* @__PURE__ */ jsx(SidebarSessionRow, {
@@ -403,7 +517,7 @@ function SessionSidebar(props) {
 			title: session.title,
 			cwd: session.cwd,
 			hostId: session.hostId,
-			hostBadge: node.favorites === true || !groupsByFolder(groupBy),
+			hostBadge: node.favorites === true || !groupsByFolder(listGroupBy) || session.hostId !== serverOfGroup,
 			spaceId: session.spaceId,
 			isMain: session.isMain,
 			updatedAt: session.updatedAt,
@@ -417,9 +531,12 @@ function SessionSidebar(props) {
 			...rowDetails,
 			spaces: spaceList,
 			environment: session.environment,
-			project: favoriteProjects.get(session.id)
+			project: favoriteProjects.get(session.id),
+			decoration: decorationOf(session)
 		}, session.id);
 	};
+	/** The pinned blocks show the open session's items with the unscoped ones. */
+	const slotScope = activeSessionId != null ? { sessionId: activeSessionId } : {};
 	const searchRow = (session, excerpt) => /* @__PURE__ */ jsx(SidebarSessionRow, {
 		sessionId: session.id,
 		title: session.title,
@@ -437,6 +554,7 @@ function SessionSidebar(props) {
 		...rowDetails,
 		spaces: spaceList,
 		environment: session.environment,
+		decoration: decorationOf(session),
 		...excerpt !== void 0 ? {
 			excerpt,
 			excerptQuery: trimmedQuery
@@ -464,7 +582,7 @@ function SessionSidebar(props) {
 					}),
 					/* @__PURE__ */ jsx(NewSessionButton, {
 						onNewSession: handleNewSession,
-						isActive: activeSessionId == null
+						isActive: activeSessionId == null && openProject == null && !chatsOpen
 					}),
 					/* @__PURE__ */ jsx(SidebarSearchRow, {
 						value: searchQuery,
@@ -473,6 +591,11 @@ function SessionSidebar(props) {
 					})
 				]
 			}),
+			/* @__PURE__ */ jsx(ExtensionSlot, {
+				at: "sidebar.top",
+				...slotScope,
+				className: PINNED_SLOT
+			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: listBox,
 				className: "relative flex-1 min-h-0 overflow-hidden flex flex-col",
@@ -506,14 +629,27 @@ function SessionSidebar(props) {
 									className: "text-xs text-[var(--zg-text-muted)] px-3 pt-1 select-none",
 									children: labels.sidebarNoMatches
 								})
-							] }) : sections.map(renderNode), !searchMode && sessions.length === 0 && /* @__PURE__ */ jsx("li", {
+							] }) : sections.map((node) => renderNode(node)), !searchMode && sessions.length === 0 && claimed.items.length === 0 && (filtersOn && query ? /* @__PURE__ */ jsxs("li", {
+								className: "text-xs text-[var(--zg-text-muted)] px-3 pt-1 flex flex-col items-start gap-1",
+								children: [/* @__PURE__ */ jsx("span", { children: labels.noChatsMatchFilters }), onViewChange && /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "p-0 bg-transparent border-0 text-xs text-[var(--zg-text)] hover:underline cursor-pointer",
+									onClick: () => onViewChange(clearedViewFilters(query.view)),
+									children: labels.resetFilters
+								})]
+							}) : /* @__PURE__ */ jsx("li", {
 								className: "text-xs text-[var(--zg-text-muted)] px-3 pt-1",
 								children: labels.noChatsYet
-							})]
+							}))]
 						}, listKey)
 					})
 				})
 			}),
+			/* @__PURE__ */ jsx(ExtensionSlot, {
+				at: "sidebar.bottom",
+				...slotScope,
+				className: PINNED_SLOT
+			}),
 			footer
 		]
 	});