zidane-ui 9.0.4 → 9.1.3

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

@@ -0,0 +1,38 @@
+import { SidebarRowChip, SidebarRowDecoration } from "../headless/sidebar/query.js";
+import { CSSProperties } from "react";
+//#region src/chat/sidebar/SidebarDecoration.d.ts
+/** Props of {@link SidebarChip}. */
+interface SidebarChipProps {
+  /** The chip. */
+  chip: SidebarRowChip;
+  /** Extra classes on the chip. */
+  className?: string;
+  /** Inline styles on the chip. */
+  style?: CSSProperties;
+}
+/**
+ * One chip of a decoration or an item: its icon and text in its tone.
+ *
+ * @param props - The chip, `className` and `style`.
+ */
+declare function SidebarChip({ chip, className, style }: SidebarChipProps): import("react").JSX.Element;
+/** Props of {@link SidebarDecoration}. */
+interface SidebarDecorationProps {
+  /** The row's merged decoration. */
+  decoration: SidebarRowDecoration;
+  /** The session the row lists: a decoration's component gets it as `sessionId`. */
+  sessionId: string;
+  /** Extra classes on the root. */
+  className?: string;
+  /** Inline styles on the root. */
+  style?: CSSProperties;
+}
+/**
+ * The decorations' icon and chips on a session row; a component one of them names in place of that
+ * decoration's own icon and chips, which are its fallback.
+ *
+ * @param props - The decoration, the session, `className` and `style`.
+ */
+declare const SidebarDecoration: import("react").MemoExoticComponent<({ decoration, sessionId, className, style }: SidebarDecorationProps) => import("react").JSX.Element>;
+//#endregion
+export { SidebarChip, SidebarChipProps, SidebarDecoration, SidebarDecorationProps };

package/dist/chat/sidebar/SidebarDecoration.js

@@ -0,0 +1,61 @@
+import { ExtensionComponent } from "../../extensions/ExtensionComponent.js";
+import { badgeToneClass } from "../../session/ArtifactRowChips.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+//#region src/chat/sidebar/SidebarDecoration.tsx
+/**
+* What extensions put on a sidebar row: the decorations' icon and chips
+* (`SidebarRowDecoration`, merged by `createDecorator`). A component one of
+* them names is drawn through the extensions' component resolver in place of
+* that decoration's own icon and chips, its fallback (while it loads, without
+* a loader, after a throw); the other decorations' chips stay beside it.
+*/
+const CHIP = "zg-row-badge zg-meta inline-flex items-center gap-1 h-[18px] px-1.5 rounded-zg-sm whitespace-nowrap";
+/**
+* One chip of a decoration or an item: its icon and text in its tone.
+*
+* @param props - The chip, `className` and `style`.
+*/
+function SidebarChip({ chip, className = "", style }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-testid": "row-chip",
+		className: `${CHIP} ${badgeToneClass(chip.tone)} ${className}`.trim(),
+		style,
+		children: [chip.icon && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: `${chip.icon} text-zg-meta`
+		}), chip.text]
+	});
+}
+/**
+* The decorations' icon and chips on a session row; a component one of them names in place of that
+* decoration's own icon and chips, which are its fallback.
+*
+* @param props - The decoration, the session, `className` and `style`.
+*/
+const SidebarDecoration = memo(function SidebarDecoration({ decoration, sessionId, className = "", style }) {
+	const { component } = decoration;
+	const own = new Set(component?.chips);
+	const icon = (cls) => cls && /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: `${cls} text-zg-meta ${badgeToneClass(decoration.tone)}`
+	});
+	const chipsOf = (list) => list.map((chip, i) => /* @__PURE__ */ jsx(SidebarChip, { chip }, `${i}:${chip.text}`));
+	return /* @__PURE__ */ jsxs("span", {
+		"data-testid": "row-decoration",
+		className: `inline-flex items-center gap-1 min-w-0 shrink-0 ${className}`.trim(),
+		style,
+		children: [
+			component && component.icon === decoration.icon ? null : icon(decoration.icon),
+			component && /* @__PURE__ */ jsx(ExtensionComponent, {
+				extension: component.extension,
+				component: component.component,
+				props: { sessionId },
+				fallback: /* @__PURE__ */ jsxs(Fragment, { children: [icon(component.icon), chipsOf(component.chips)] })
+			}),
+			chipsOf(decoration.chips.filter((chip) => !own.has(chip)))
+		]
+	});
+});
+//#endregion
+export { SidebarChip, SidebarDecoration };

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

@@ -1,4 +1,5 @@
 import { SidebarView } from "../headless/sidebar/types.js";
+import { SidebarQueryLayer } from "../headless/sidebar/query.js";
 //#region src/chat/sidebar/SidebarFilterMenu.d.ts
 /** Props of {@link SidebarFilterMenu}. */
 interface SidebarFilterMenuProps {
@@ -10,14 +11,26 @@ interface SidebarFilterMenuProps {
   onChange: (patch: Partial<SidebarView>) => void;
   /** Remote hosts are on: offer the per-host view. */
   hosts?: boolean;
+  /** The agents the space's sessions run (`AgentProfile.id`): the agent filter's choices. Absent or empty: no agent filter. */
+  agents?: readonly string[];
+  /** Agent names by id. Default: the composer host's agent catalog. An agent left out shows its id. */
+  agentNames?: Readonly<Record<string, string>>;
+  /**
+   * The space and what the extensions offer it (`SessionDirectoryView.query`): their filters, sorts
+   * and groupings join the menu, and the space's own grouping and sort are a choice.
+   */
+  query?: Pick<SidebarQueryLayer, 'space' | 'filters' | 'sorts' | 'groups'>;
+  /** Saves the view as a space of its own. Absent: no such row. */
+  onSaveView?: () => void;
   /** Extra classes on the trigger button. */
   className?: string;
 }
 /**
- * The sidebar's five filter axes in the kit's filter menu.
+ * The sidebar's filter axes in the kit's filter menu: view, status, project, activity, agent, sort,
+ * and what extensions contribute (filters, sorts, groupings), with Save view as space.
  *
  * @param props - The {@link SidebarFilterMenuProps}.
  */
-declare function SidebarFilterMenu({ view, projects, onChange, hosts, className }: SidebarFilterMenuProps): import("react").JSX.Element;
+declare function SidebarFilterMenu({ view, projects, onChange, hosts, agents, agentNames: agentNamesProp, query, onSaveView, className }: SidebarFilterMenuProps): import("react").JSX.Element;
 //#endregion
 export { SidebarFilterMenu, SidebarFilterMenuProps };

package/dist/chat/sidebar/SidebarFilterMenu.js

@@ -1,27 +1,243 @@
+import { useChatLabels } from "../useChatLabels.js";
 import { SessionFilterMenu } from "../SessionFilterMenu.js";
+import { VIEW_CHOICE } from "../headless/sidebar/types.js";
+import { useAgentNames } from "./useAgentNames.js";
 import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 //#region src/chat/sidebar/SidebarFilterMenu.tsx
+const VIEWS = [
+	"project",
+	"none",
+	"date",
+	"state",
+	"agent"
+];
 const VIEWS_WITH_HOST = [
 	"project",
 	"host",
 	"none",
 	"date",
-	"state"
+	"state",
+	"agent"
+];
+const SORTS = [
+	"alphabetical",
+	"createdTime",
+	"recency"
 ];
+const ALL_AGENTS = "__all__";
+const ANY = "__any__";
+const SPACE = "@space";
+const NO_GROUPS = [];
+const NO_SORTS = [];
+/** The extension layer with one change, empty parts dropped. */
+function withExtension(view, change) {
+	const next = {
+		filters: {},
+		...view.extension,
+		...change
+	};
+	const out = { filters: next.filters };
+	if (next.sort) out.sort = next.sort;
+	if (next.group) out.group = next.group;
+	return out;
+}
 /**
-* The sidebar's five filter axes in the kit's filter menu.
+* The sidebar's filter axes in the kit's filter menu: view, status, project, activity, agent, sort,
+* and what extensions contribute (filters, sorts, groupings), with Save view as space.
 *
 * @param props - The {@link SidebarFilterMenuProps}.
 */
-function SidebarFilterMenu({ view, projects, onChange, hosts = false, className }) {
+function SidebarFilterMenu({ view, projects, onChange, hosts = false, agents, agentNames: agentNamesProp, query, onSaveView, className }) {
+	const labels = useChatLabels();
+	const catalogNames = useAgentNames();
+	const agentNames = agentNamesProp ?? catalogNames;
 	const { groupBy } = view;
+	const viewOptions = hosts || groupBy === "host" ? VIEWS_WITH_HOST : VIEWS;
+	const space = query?.space;
+	const groups = query?.groups ?? NO_GROUPS;
+	const sorts = query?.sorts ?? NO_SORTS;
+	const groupChoice = groups.length > 0 || Boolean(space?.groupBy);
+	const sortChoice = sorts.length > 0 || Boolean(space?.sortBy);
+	const extras = useMemo(() => {
+		const out = [];
+		const ext = view.extension;
+		if (groupChoice) {
+			const picked = ext?.group;
+			const contributed = picked ? groups.find((g) => g.item.id === picked) : void 0;
+			const current = contributed ? contributed.item.id : space?.groupBy && picked !== "@view" ? SPACE : groupBy;
+			const options = [
+				...space?.groupBy ? [{
+					id: SPACE,
+					label: labels.filterSpaceDefault
+				}] : [],
+				...viewOptions.map((id) => ({
+					id,
+					label: labels.filterViews[id]
+				})),
+				...groups.map((g) => ({
+					id: g.item.id,
+					label: g.item.label
+				}))
+			];
+			out.push({
+				kind: "choice",
+				id: "view",
+				label: labels.filterView,
+				placement: "view",
+				value: options.find((o) => o.id === current)?.label ?? current,
+				atDefault: current === (space?.groupBy ? SPACE : "project"),
+				options,
+				current,
+				onChange: (next) => {
+					if (next === SPACE) onChange({ extension: withExtension(view, { group: void 0 }) });
+					else if (groups.some((g) => g.item.id === next)) onChange({ extension: withExtension(view, { group: next }) });
+					else onChange({
+						groupBy: next,
+						extension: withExtension(view, { group: space?.groupBy ? VIEW_CHOICE : void 0 })
+					});
+				}
+			});
+		}
+		for (const { item } of query?.filters ?? []) {
+			const value = ext?.filters[item.id];
+			const set = (next) => {
+				const filters = { ...view.extension?.filters };
+				if (next === void 0 || next === false || Array.isArray(next) && next.length === 0) delete filters[item.id];
+				else filters[item.id] = next;
+				onChange({ extension: withExtension(view, { filters }) });
+			};
+			const options = (item.options ?? []).map((o) => ({
+				id: o.id,
+				label: o.label
+			}));
+			if (item.kind === "toggle") out.push({
+				kind: "toggle",
+				id: item.id,
+				label: item.label,
+				placement: "filter",
+				checked: value === true,
+				onChange: (checked) => set(checked)
+			});
+			else if (item.kind === "select") {
+				const current = typeof value === "string" && options.some((o) => o.id === value) ? value : ANY;
+				out.push({
+					kind: "choice",
+					id: item.id,
+					label: item.label,
+					placement: "filter",
+					value: options.find((o) => o.id === current)?.label ?? labels.filterAny,
+					atDefault: current === ANY,
+					options: [{
+						id: ANY,
+						label: labels.filterAny
+					}, ...options],
+					current,
+					onChange: (next) => set(next === ANY ? void 0 : next)
+				});
+			} else {
+				const current = Array.isArray(value) ? value.filter((id) => options.some((o) => o.id === id)) : [];
+				out.push({
+					kind: "multi",
+					id: item.id,
+					label: item.label,
+					placement: "filter",
+					value: current.length === 0 ? labels.filterAny : current.length === 1 ? options.find((o) => o.id === current[0])?.label ?? current[0] : labels.filterPicked(current.length),
+					options,
+					current,
+					onChange: (next) => set(next)
+				});
+			}
+		}
+		if (sortChoice) {
+			const picked = ext?.sort;
+			const contributed = picked ? sorts.find((s) => s.item.id === picked) : void 0;
+			const current = contributed ? contributed.item.id : space?.sortBy && picked !== "@view" ? SPACE : view.sortBy;
+			const options = [
+				...space?.sortBy ? [{
+					id: SPACE,
+					label: labels.filterSpaceDefault
+				}] : [],
+				...SORTS.map((id) => ({
+					id,
+					label: labels.filterSorts[id]
+				})),
+				...sorts.map((s) => ({
+					id: s.item.id,
+					label: s.item.label
+				}))
+			];
+			out.push({
+				kind: "choice",
+				id: "sort",
+				label: labels.filterSort,
+				placement: "sort",
+				value: options.find((o) => o.id === current)?.label ?? current,
+				atDefault: current === (space?.sortBy ? SPACE : "recency"),
+				options,
+				current,
+				onChange: (next) => {
+					if (next === SPACE) onChange({ extension: withExtension(view, { sort: void 0 }) });
+					else if (sorts.some((s) => s.item.id === next)) onChange({ extension: withExtension(view, { sort: next }) });
+					else onChange({
+						sortBy: next,
+						extension: withExtension(view, { sort: space?.sortBy ? VIEW_CHOICE : void 0 })
+					});
+				}
+			});
+		}
+		const agentList = agents ?? [];
+		if (agentList.length > 0 || view.agent) {
+			const current = view.agent ?? ALL_AGENTS;
+			const name = (id) => agentNames?.[id] ?? id;
+			const ids = view.agent && !agentList.includes(view.agent) ? [...agentList, view.agent] : agentList;
+			out.push({
+				kind: "choice",
+				id: "agent",
+				label: labels.filterAgent,
+				placement: "filter",
+				value: view.agent ? name(view.agent) : labels.filterAllAgents,
+				atDefault: !view.agent,
+				options: [{
+					id: ALL_AGENTS,
+					label: labels.filterAllAgentsOption
+				}, ...ids.map((id) => ({
+					id,
+					label: name(id)
+				}))],
+				current,
+				onChange: (next) => onChange({ agent: next === ALL_AGENTS ? null : next })
+			});
+		}
+		return out;
+	}, [
+		view,
+		groupBy,
+		viewOptions,
+		space,
+		groups,
+		sorts,
+		groupChoice,
+		sortChoice,
+		query,
+		agents,
+		agentNames,
+		labels,
+		onChange
+	]);
+	const actions = useMemo(() => onSaveView ? [{
+		id: "save-view",
+		label: labels.filterSaveView,
+		icon: "i-ph-bookmark-simple",
+		onSelect: onSaveView
+	}] : [], [onSaveView, labels]);
 	return /* @__PURE__ */ jsx(SessionFilterMenu, {
 		...className ? { className } : {},
-		view: {
+		...groupChoice ? {} : { view: {
 			value: groupBy,
 			onChange: (next) => onChange({ groupBy: next }),
-			...hosts || groupBy === "host" ? { options: VIEWS_WITH_HOST } : {}
-		},
+			options: viewOptions
+		} },
 		status: {
 			value: view.archive,
 			onChange: (archive) => onChange({ archive })
@@ -35,10 +251,12 @@ function SidebarFilterMenu({ view, projects, onChange, hosts = false, className
 			value: view.activity,
 			onChange: (activity) => onChange({ activity })
 		},
-		sort: {
+		...sortChoice ? {} : { sort: {
 			value: view.sortBy,
 			onChange: (sortBy) => onChange({ sortBy })
-		}
+		} },
+		extras,
+		actions
 	});
 }
 //#endregion

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

@@ -19,6 +19,8 @@ interface SidebarFooterProps {
   onOpenSettings: () => void;
   /** Something waiting in Settings. */
   settingsNote?: SidebarSettingsNote;
+  /** The session on screen: its extensions' `sidebar.footer` and `app.statusbar` items show too. */
+  sessionId?: string;
   /** Extra classes on the strip. */
   className?: string;
   /** Inline styles on the strip. */
@@ -29,7 +31,7 @@ interface SidebarFooterProps {
  *
  * @param props - The status side, the spaces switcher, the settings gear, `className` and `style`.
  */
-declare function SidebarFooter({ status, spaces, onOpenSettings, settingsNote, className, style }: SidebarFooterProps): import("react").JSX.Element;
+declare function SidebarFooter({ status, spaces, onOpenSettings, settingsNote, sessionId, className, style }: SidebarFooterProps): import("react").JSX.Element;
 /** Props of {@link SidebarSignInPrompt}. */
 interface SidebarSignInPromptProps {
   /** Opens the sign-in. */

package/dist/chat/sidebar/SidebarFooter.js

@@ -1,4 +1,5 @@
 import { IconButton } from "../../components/IconButton.js";
+import { ExtensionSlot } from "../../extensions/ExtensionSlot.js";
 import { Throbber } from "../Throbber.js";
 import { useSidebarLabels } from "./useSidebarLabels.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -11,7 +12,8 @@ import { activeSnapshotFor, compactingParts, formatUsagePercent, mostConstrained
 *   [status …]   [spaces]   [settings]
 *
 * The status side holds what the app puts there (the daemon dot, the sign-in
-* prompt, the usage chip, the compacting indicator, each below); the spaces
+* prompt, the usage chip, the compacting indicator, each below), then what
+* extensions put in `sidebar.footer` and `app.statusbar`; the spaces
 * switcher sits at the TRUE center (equal `1fr` sides, each clipping rather
 * than pushing it; without it the status side runs up to the gear, clipping
 * there); the gear opens Settings, with a dot when something waits
@@ -22,15 +24,26 @@ import { activeSnapshotFor, compactingParts, formatUsagePercent, mostConstrained
 *
 * @param props - The status side, the spaces switcher, the settings gear, `className` and `style`.
 */
-function SidebarFooter({ status, spaces, onOpenSettings, settingsNote, className = "", style }) {
+function SidebarFooter({ status, spaces, onOpenSettings, settingsNote, sessionId, className = "", style }) {
+	const scoped = sessionId ? { sessionId } : {};
 	const labels = useSidebarLabels();
 	return /* @__PURE__ */ jsxs("div", {
 		className: `grid ${spaces ? "grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]" : "grid-cols-[minmax(0,1fr)_auto]"} items-center gap-2 px-2 pt-[5px] pb-1 text-zg-meta text-[var(--zg-text-muted)] shrink-0${className ? ` ${className}` : ""}`,
 		style,
 		children: [
-			/* @__PURE__ */ jsx("div", {
+			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2 min-w-0 -mx-1.5 px-1.5 [overflow-x:clip]",
-				children: status
+				children: [
+					status,
+					/* @__PURE__ */ jsx(ExtensionSlot, {
+						at: "sidebar.footer",
+						...scoped
+					}),
+					/* @__PURE__ */ jsx(ExtensionSlot, {
+						at: "app.statusbar",
+						...scoped
+					})
+				]
 			}),
 			spaces && /* @__PURE__ */ jsx("div", {
 				className: "flex items-center justify-center min-w-0",

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

@@ -1,13 +1,20 @@
 import { SidebarGroupBy } from "../headless/sidebar/types.js";
 import { HostView } from "../headless/hosts.js";
-import { SidebarRow } from "../headless/sidebar/rows.js";
+import { SidebarListRow } from "../headless/sidebar/rows.js";
 import { ProjectIcon } from "../headless/sidebar/project-icons.js";
 import { SidebarProject } from "./session-menu.js";
 import { CSSProperties } from "react";
 import { Space } from "zidane/chat/pure";
 //#region src/chat/sidebar/SidebarGroupHeader.d.ts
+/** A project folder as the sidebar names it: its path, and the server it is on (absent: this computer). */
+interface SidebarProjectRef {
+  /** The folder. */
+  path: string;
+  /** The saved server; absent: this computer. */
+  hostId?: string;
+}
 /** A group header row. */
-type SidebarHeaderRow = Extract<SidebarRow, {
+type SidebarHeaderRow = Extract<SidebarListRow, {
   kind: 'header';
 }>;
 /** Props of {@link SidebarGroupHeader}. */
@@ -42,6 +49,12 @@ interface SidebarGroupHeaderProps {
   onDeleteProject: (project: SidebarProject, label: string) => void;
   /** The remote host a server folder's header names, as a badge that opens the host's settings. */
   server?: HostView;
+  /** Opens a project folder's home. Absent: the name toggles collapse. */
+  onOpenProject?: (project: SidebarProjectRef) => void;
+  /** Starts a new chat with no folder from the Chats name. Absent: the name toggles collapse. */
+  onOpenChats?: () => void;
+  /** This project's home, or for Chats a new chat with no folder, is the one shown. */
+  open?: boolean;
   /** Extra classes on the header. */
   className?: string;
   /** Inline styles on the header. */
@@ -52,6 +65,6 @@ interface SidebarGroupHeaderProps {
  *
  * @param props - The header row, the view, its icon and the project actions.
  */
-declare function SidebarGroupHeader({ row, groupBy, icon, onAssignIcon, onToggle, onNewSessionIn, spaces, spaceId, onMoveProject, pinned, onSetPinned, canArchive, onArchiveProject, onDeleteProject, server, className, style }: SidebarGroupHeaderProps): import("react").JSX.Element;
+declare function SidebarGroupHeader({ row, groupBy, icon, onAssignIcon, onToggle, onNewSessionIn, spaces, spaceId, onMoveProject, pinned, onSetPinned, canArchive, onArchiveProject, onDeleteProject, server, onOpenProject, onOpenChats, open, className, style }: SidebarGroupHeaderProps): import("react").JSX.Element;
 //#endregion
-export { SidebarGroupHeader, SidebarGroupHeaderProps, SidebarHeaderRow };
+export { SidebarGroupHeader, SidebarGroupHeaderProps, SidebarHeaderRow, SidebarProjectRef };

package/dist/chat/sidebar/SidebarGroupHeader.js

@@ -20,18 +20,24 @@ import { resolveSessionSpace } from "zidane/chat/pure";
 * to the top of the list while its rows scroll (`.zg-sticky-head`).
 *
 * The icon slot and the "+" are SIBLINGS of the collapse button (never nested).
+*
+* With `onOpenProject` (the project home), a project folder's name opens its
+* home (a server's too) and its collapse is a chevron after the buttons; the
+* header of the home on show is `open`. With `onOpenChats`, the Chats name
+* starts a new chat with no folder the same way, and is `open` while it shows.
 */
 /**
 * Renders a group header of the sidebar list.
 *
 * @param props - The header row, the view, its icon and the project actions.
 */
-function SidebarGroupHeader({ row, groupBy, icon, onAssignIcon, onToggle, onNewSessionIn, spaces, spaceId, onMoveProject, pinned, onSetPinned, canArchive, onArchiveProject, onDeleteProject, server, className = "", style }) {
+function SidebarGroupHeader({ row, groupBy, icon, onAssignIcon, onToggle, onNewSessionIn, spaces, spaceId, onMoveProject, pinned, onSetPinned, canArchive, onArchiveProject, onDeleteProject, server, onOpenProject, onOpenChats, open = false, className = "", style }) {
 	const labels = useSidebarLabels();
 	const { revealPath, openHostSettings } = useSidebarHost();
 	const byFolder = groupsByFolder(groupBy);
 	const isProjectFolder = byFolder && !row.chats && !row.favorites;
 	const path = isProjectFolder ? row.fullPath : void 0;
+	const repo = row.repoKey ? { repoKey: row.repoKey } : {};
 	/** Where the right-click opened the project's menu; `null` while it is closed. */
 	const [menuAt, setMenuAt] = useState(null);
 	const menuItems = path ? [
@@ -63,7 +69,8 @@ function SidebarGroupHeader({ row, groupBy, icon, onAssignIcon, onToggle, onNewS
 			group: "spaces",
 			items: spaceRows(spaces, resolveSessionSpace(spaceId, spaces), (to) => onMoveProject({
 				path,
-				spaceId
+				spaceId,
+				...repo
 			}, to))
 		}] : [],
 		...canArchive ? [{
@@ -72,7 +79,8 @@ function SidebarGroupHeader({ row, groupBy, icon, onAssignIcon, onToggle, onNewS
 			group: "project-sessions",
 			onSelect: () => onArchiveProject({
 				path,
-				spaceId
+				spaceId,
+				...repo
 			}, row.label)
 		}] : [],
 		{
@@ -82,7 +90,8 @@ function SidebarGroupHeader({ row, groupBy, icon, onAssignIcon, onToggle, onNewS
 			destructive: true,
 			onSelect: () => onDeleteProject({
 				path,
-				spaceId
+				spaceId,
+				...repo
 			}, row.label)
 		}
 	] : [];
@@ -100,6 +109,16 @@ function SidebarGroupHeader({ row, groupBy, icon, onAssignIcon, onToggle, onNewS
 		label: row.label,
 		collapsed: row.collapsed,
 		onToggle,
+		...onOpenProject && isProjectFolder && row.fullPath ? {
+			onOpen: () => onOpenProject({
+				path: row.fullPath,
+				...row.hostId ? { hostId: row.hostId } : {}
+			}),
+			active: open
+		} : onOpenChats && row.chats ? {
+			onOpen: onOpenChats,
+			active: open
+		} : {},
 		icon: row.favorites ? /* @__PURE__ */ jsx(GroupGlyph, { icon: "i-ph-star" }) : row.chats ? /* @__PURE__ */ jsx(GroupGlyph, { icon: "i-ph-chats" }) : byFolder ? /* @__PURE__ */ jsx(ProjectIconButton, {
 			fullPath: row.fullPath,
 			label: row.label,

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

@@ -0,0 +1,30 @@
+import { ExtensionItem, SidebarRowActionWire } from "../../extensions/headless/wire.js";
+import { CSSProperties, ReactNode } from "react";
+//#region src/chat/sidebar/SidebarRowView.d.ts
+/** Props of {@link SidebarRowView}. */
+interface SidebarRowViewProps {
+  /** The row's id (`i-<item id>`): collapse is kept under it. */
+  rowId: string;
+  /** The item. */
+  entry: ExtensionItem<'sidebar-row'>;
+  /** Its sessions are hidden. */
+  collapsed: boolean;
+  /** How many sessions it lists. */
+  childCount: number;
+  /** Opens the item's target. */
+  onOpen: (entry: ExtensionItem<'sidebar-row'>) => void;
+  /** Runs one of its actions. Absent: the actions show disabled. */
+  onRunAction?: (entry: ExtensionItem<'sidebar-row'>, action: SidebarRowActionWire) => void;
+  /** Shows or hides its sessions. */
+  onToggle: (rowId: string) => void;
+  /** Its child session rows, drawn under it while expanded. */
+  children?: ReactNode;
+  /** Extra classes on the root. */
+  className?: string;
+  /** Inline styles on the root. */
+  style?: CSSProperties;
+}
+/** Renders an extension item of the sidebar list. Memoized: keep every prop stable. */
+declare const SidebarRowView: import("react").MemoExoticComponent<({ rowId, entry, collapsed, childCount, onOpen, onRunAction, onToggle, children, className, style }: SidebarRowViewProps) => import("react").JSX.Element>;
+//#endregion
+export { SidebarRowView, SidebarRowViewProps };