@hydraharness/harness-client-ui-sidebar 0.0.0-stage → 0.1.1-rc.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 DeepSeek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,31 @@
-# Temporary Holding Version
+# @hydraharness/harness-client-ui-sidebar
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Sidebar shell plugin: the brand row, New Session action, layout-owned collapse control, scroll-aware region seat, and bottom-pinned Settings seat. [ui-workspace](../ui-workspace/README.md) owns the Workspace and Session browser rendered into `sidebar.workspaces`; this package neither derives its rows nor owns its view preferences. Collapse into the layout-owned 56px rail remains presentation-local. Contract: the [slot system standard](../../../.agents/notes/implemented/architecture/2026-07-22-slot-type-chain-implementation.md).
+
+The expanded brand row renders `sidebar.brand.mark` and `sidebar.brand.name` as independent single slots, while the collapsed rail renders the same mark slot. Without occupants, the shell uses the shared Hydra harness wordmark carrying the build's 7-character `HYDRA_CLIENT_COMMIT_HASH` badge. A deployment package can replace either value without replacing the New Session control or rail geometry; declaration-aware `slots.inject()` lets such a package activate before or after the sidebar.
+
+New Session starts the runtime's page-local frontend Session Intent. The runtime targets the explicit Workspace used by a scoped action, otherwise the current Session's Workspace, otherwise the most recently active Workspace; when none exists it clears into the blank New Session page. Workspace-specific controls and the shared picker belong to ui-workspace.
+
+`SidebarRootComponentProps` composes the layout owner share, the global `useSessions` and `useWorkspaces` hooks, the declared brand, `sidebar.workspaces`, and `sidebar.settings` child slots, and injected `startSession` plus sidebar-toggle callbacks. There is no plugin store.
+
+During a live collapse, the shell holds the expanded content at its current width while it fades out for 150ms. The four upper controls—the shell toggle and New Session plus add and search rendered through `sidebar.workspaces`—then share one 150ms fade and 49px leftward translation into the 56px rail, ending with the layout's 300ms column slide; every 36px control box follows the same path to the rail's 10px left inset. The bottom-pinned `sidebar.settings` control shares the fade timing but has no horizontal translation. A page that starts collapsed renders the rail statically, and reduced-motion mode disables both transitions.
+
+Scrollbars in the column are a pointer affordance: the shell rebinds ui-theme's [scrollbar indirection](../ui-theme/README.md) to `transparent` whenever the pointer is outside it, and keeps the thumb drawn for 2s after the pointer leaves, so a list nobody is pointing at carries no bar. The reservation that keeps rows from moving belongs to the scrolling region ([ui-workspace](../ui-workspace/README.md)), so revealing a thumb never reflows.
+
+The foot is the `sidebar.settings` seat: the sidebar renders only the bottom-pinned layout slot and shares its column state (`wide`); ui-settings registers the trigger row and settings panel there.
+
+The `/client` exports are the plugin body (`apply`/`inject`) plus the contract types only; SidebarRoot, the row components, and the tree derivation remain package-internal behind the slot registration.
+
+## Model Experience
+
+None, as the sidebar renders the browser session list; nothing here reaches a model request.
+
+#### KV Cache effect
+
+None; this package neither assembles nor sends a provider request.
+
+## Known Limitations and Deferred Work
+
+- **Session state-dot rendering is owned by [ui-workspace](../ui-workspace/README.md)** — no done/error notification sources are available.
+- **Workspace browser behavior is composition-owned** — grouping, ordering, search, and row state belong to [ui-workspace](../ui-workspace/README.md), not this shell.
+- **"New task completed" unread marking is local viewing state** — completion-time > last-seen never reaches the host.

package/lib/client.js

@@ -0,0 +1,320 @@
+window.__ModuleLoader__.load({
+	id: "@hydraharness/harness-client-ui-sidebar",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let react_jsx_runtime = require("react/jsx-runtime");
+		let react = require("react");
+		let _hydraharness_harness_client_ui_primitives = require("@hydraharness/harness-client-ui-primitives");
+		//#region ../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+		function r(e) {
+			var t, f, n = "";
+			if ("string" == typeof e || "number" == typeof e) n += e;
+			else if ("object" == typeof e) if (Array.isArray(e)) {
+				var o = e.length;
+				for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+			} else for (f in e) e[f] && (n && (n += " "), n += f);
+			return n;
+		}
+		function clsx() {
+			for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+			return n;
+		}
+		//#endregion
+		//#region \0hydra-css:/home/runner/work/Hydra-Harness/Hydra-Harness/packages/client/ui-sidebar/src/client/SidebarRoot.module.css.mjs
+		const css = "._8h6Zdq_root{--hydra-sidebar-inline-padding:12px;height:100%;padding:6px var(--hydra-sidebar-inline-padding);box-sizing:border-box;background:var(--dsw-specific-sidebar-fill);color:var(--dsw-alias-label-primary);--hydra-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2);--hydra-scrollbar-thumb-hover:var(--dsw-alias-scrollbar-hover-l2);flex-direction:column;font-size:14px;display:flex}._8h6Zdq_root._8h6Zdq_collapsed{padding:18px 10px 6px}._8h6Zdq_root._8h6Zdq_quietBars{--hydra-scrollbar-thumb:transparent;--hydra-scrollbar-thumb-hover:transparent}._8h6Zdq_fading>*{opacity:0;transition:opacity .15s var(--ds-ease-in-out)}._8h6Zdq_wide{animation:_8h6Zdq_wide-in .2s var(--ds-ease-in-out)}@keyframes _8h6Zdq_wide-in{0%{opacity:0}}._8h6Zdq_railIn ._8h6Zdq_iconButton,._8h6Zdq_railIn ._8h6Zdq_newSession,._8h6Zdq_railIn ._8h6Zdq_regionArea{animation:_8h6Zdq_rail-in .15s var(--ds-ease-in-out) backwards}._8h6Zdq_railIn ._8h6Zdq_footArea{animation:_8h6Zdq_rail-fade-in .15s var(--ds-ease-in-out) backwards}@keyframes _8h6Zdq_rail-in{0%{opacity:0;transform:translate(49px)}}@keyframes _8h6Zdq_rail-fade-in{0%{opacity:0}}._8h6Zdq_logoRow{box-sizing:border-box;flex:none;justify-content:flex-end;align-items:center;gap:8px;height:60px;margin-bottom:8px;padding:8px 0 8px 4px;display:flex;overflow:hidden}._8h6Zdq_collapsed ._8h6Zdq_logoRow{justify-content:flex-start;height:36px;margin-bottom:12px;padding:0}._8h6Zdq_brand{min-width:0;color:inherit;cursor:pointer;background:0 0;border:none;flex:1;align-items:center;padding:0;display:inline-flex;overflow:hidden}._8h6Zdq_brandIdentity{align-items:center;gap:8px;min-width:0;height:24px;display:inline-flex}._8h6Zdq_brandMark{flex:none;justify-content:center;align-items:center;display:inline-flex}._8h6Zdq_brandMark:has(>[data-slot=\"sidebar.brand.mark\"]:empty){display:none}._8h6Zdq_brandName{letter-spacing:.04em;align-items:center;gap:6px;min-width:0;height:24px;font-size:18px;font-weight:600;line-height:24px;display:inline-flex}._8h6Zdq_fallbackBrandName{letter-spacing:0;white-space:nowrap;font-size:17px}._8h6Zdq_localBrandLogo{flex:none}._8h6Zdq_iconButton{border-radius:var(--dsw-radius-control);cursor:pointer;width:28px;height:28px;color:var(--dsw-alias-label-secondary);transition:background-color var(--ds-transition-duration-fast) var(--ds-ease-in-out);background:0 0;border:none;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}._8h6Zdq_iconButton:hover{background:var(--dsw-alias-interactive-bg-hover)}._8h6Zdq_collapsed ._8h6Zdq_iconButton{width:36px;height:36px}._8h6Zdq_collapsed ._8h6Zdq_toggle ._8h6Zdq_panelIcon{display:none}._8h6Zdq_collapsed ._8h6Zdq_toggle:hover ._8h6Zdq_panelIcon{display:inline}._8h6Zdq_collapsed ._8h6Zdq_toggle:hover ._8h6Zdq_railMark{display:none}._8h6Zdq_railMark{justify-content:center;align-items:center;display:inline-flex}._8h6Zdq_collapsed ._8h6Zdq_iconButton{color:var(--dsw-alias-label-primary)}._8h6Zdq_buildRevision{height:16px;color:var(--dsw-alias-label-primary-inverted);background:var(--dsw-alias-label-primary);font-family:var(--ds-font-family-code);border-radius:3px;align-items:center;padding:0 4px;font-size:8px;font-weight:500;line-height:16px;display:inline-flex}._8h6Zdq_newSession{box-sizing:border-box;border:1px solid var(--dsw-alias-border-l1);border-radius:var(--dsw-radius-control);background:var(--dsw-alias-button-elevated-fill);height:38px;box-shadow:var(--dsw-shadow-lv1);color:var(--dsw-alias-label-primary);cursor:pointer;transition:background-color var(--ds-transition-duration-fast) var(--ds-ease-in-out), box-shadow var(--ds-transition-duration-fast) var(--ds-ease-in-out);flex:none;justify-content:center;align-items:center;gap:6px;margin:0 2px 8px;padding:8px 16px;font-size:14px;font-weight:500;line-height:22px;display:flex;overflow:hidden}._8h6Zdq_newSession:hover{background:var(--dsw-alias-button-floating-hover);box-shadow:var(--dsw-shadow-lv1-blur)}._8h6Zdq_collapsed ._8h6Zdq_newSession{background:0 0;border-color:#0000;align-self:flex-start;gap:0;width:36px;height:36px;margin:0 0 12px;padding:0}._8h6Zdq_collapsed ._8h6Zdq_newSession:hover{background:var(--dsw-alias-interactive-bg-hover)}._8h6Zdq_newSessionLabel{white-space:nowrap;max-width:200px;overflow:hidden}._8h6Zdq_collapsed ._8h6Zdq_newSessionLabel{max-width:0}._8h6Zdq_regionArea{min-height:0;margin-left:-4px;margin-right:calc(-1 * var(--hydra-sidebar-inline-padding));flex-direction:column;flex:1;padding-left:4px;display:flex;overflow:hidden}._8h6Zdq_collapsed ._8h6Zdq_regionArea{margin-left:0;margin-right:0;padding-left:0}._8h6Zdq_footArea{flex-direction:column;flex:none;display:flex}._8h6Zdq_settingsArea,._8h6Zdq_footerActions{flex:none;width:100%;min-width:0}._8h6Zdq_footerActions{display:flex}._8h6Zdq_collapsed ._8h6Zdq_footArea{align-items:center}._8h6Zdq_collapsed ._8h6Zdq_settingsArea,._8h6Zdq_collapsed ._8h6Zdq_footerActions{justify-content:center;width:auto;display:flex}@media (prefers-reduced-motion:reduce){._8h6Zdq_wide,._8h6Zdq_fading>*,._8h6Zdq_railIn ._8h6Zdq_iconButton,._8h6Zdq_railIn ._8h6Zdq_newSession,._8h6Zdq_railIn ._8h6Zdq_footArea,._8h6Zdq_railIn ._8h6Zdq_regionArea{transition:none;animation:none}}";
+		const tagId = "@hydraharness/harness-client-ui-sidebar/SidebarRoot.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "@hydraharness/harness-client-ui-sidebar";
+			tag.dataset.pluginCss = tagId;
+			tag.textContent = css;
+			document.head.appendChild(tag);
+		}
+		var SidebarRoot_module_css_default = {
+			"brand": "_8h6Zdq_brand",
+			"brandIdentity": "_8h6Zdq_brandIdentity",
+			"brandMark": "_8h6Zdq_brandMark",
+			"brandName": "_8h6Zdq_brandName",
+			"buildRevision": "_8h6Zdq_buildRevision",
+			"collapsed": "_8h6Zdq_collapsed",
+			"fading": "_8h6Zdq_fading",
+			"fallbackBrandName": "_8h6Zdq_fallbackBrandName",
+			"footArea": "_8h6Zdq_footArea",
+			"footerActions": "_8h6Zdq_footerActions",
+			"iconButton": "_8h6Zdq_iconButton",
+			"localBrandLogo": "_8h6Zdq_localBrandLogo",
+			"logoRow": "_8h6Zdq_logoRow",
+			"newSession": "_8h6Zdq_newSession",
+			"newSessionLabel": "_8h6Zdq_newSessionLabel",
+			"panelIcon": "_8h6Zdq_panelIcon",
+			"quietBars": "_8h6Zdq_quietBars",
+			"rail-fade-in": "_8h6Zdq_rail-fade-in",
+			"rail-in": "_8h6Zdq_rail-in",
+			"railIn": "_8h6Zdq_railIn",
+			"railMark": "_8h6Zdq_railMark",
+			"regionArea": "_8h6Zdq_regionArea",
+			"root": "_8h6Zdq_root",
+			"settingsArea": "_8h6Zdq_settingsArea",
+			"toggle": "_8h6Zdq_toggle",
+			"wide": "_8h6Zdq_wide",
+			"wide-in": "_8h6Zdq_wide-in"
+		};
+		//#endregion
+		//#region lib/types/client/HydraSidebarBrand.js
+		/**
+		* Render the Hydra harness name and mark in the sidebar.
+		* @param props - Optional layout class.
+		* @returns the shared brand wordmark.
+		*/
+		function HydraSidebarBrand({ className }) {
+			return (0, react_jsx_runtime.jsx)(_hydraharness_harness_client_ui_primitives.BrandWordmark, { className });
+		}
+		//#endregion
+		//#region lib/types/client/SidebarRoot.js
+		/**
+		* Sidebar shell: column geometry only. Collapse is a slide plus crossfade:
+		* content freezes at its expanded width (inline style) and fades out in place
+		* while the sliding column (AppFrame grid tracks) clips it — nothing reflows
+		* mid-slide. At settle the wide-only content unmounts and the four upper
+		* controls enter the 56px rail from the same horizontal offset (one icon each,
+		* same top-down order) on one fade that ends with the slide. The bottom-pinned
+		* settings control only fades. The workspace/session browsing region between
+		* the New Session button and the foot is the `sidebar.workspaces` registrant's,
+		* and the foot holds `sidebar.settings` plus `sidebar.footer.action`; the shell
+		* hands them the wide flag (plus an expand request callback for the browser).
+		*
+		* The column also owns whether the scroll regions nested in it draw a
+		* scrollbar at all: the shell tracks the pointer and rebinds ui-theme's
+		* scrollbar indirection away while it is elsewhere, so a list the user is not
+		* pointing at carries no bar.
+		*/
+		/** Wide-content unmount delay; matches the 150ms wide-content fade-out. */
+		const COLLAPSE_SETTLE_MS = 150;
+		/**
+		* How long the column's scrollbars stay drawn after the pointer leaves it.
+		* The bar is a pointer affordance here, and hiding it on the leave event
+		* itself makes it blink out while the pointer is only crossing the column's
+		* edge — on the way to the conversation, or around a portalled menu.
+		*/
+		const SCROLLBAR_LINGER_MS = 2e3;
+		/**
+		* Render the sidebar column shell.
+		* @param props - composed slot props (runtime share + injected callbacks, contract/slots.ts).
+		* @returns the sidebar element tree.
+		*/
+		function SidebarRoot({ collapsed, width, startSession, toggleSidebar, t, renderSlot }) {
+			const [settled, setSettled] = (0, react.useState)(collapsed);
+			(0, react.useEffect)(() => {
+				if (!collapsed) {
+					setSettled(false);
+					return;
+				}
+				const timer = window.setTimeout(() => {
+					setSettled(true);
+				}, COLLAPSE_SETTLE_MS);
+				return () => {
+					window.clearTimeout(timer);
+				};
+			}, [collapsed]);
+			const wide = !collapsed || !settled;
+			const lastWideWidth = (0, react.useRef)(width);
+			if (!collapsed) lastWideWidth.current = width;
+			const everWide = (0, react.useRef)(!collapsed);
+			if (!collapsed) everWide.current = true;
+			const column = (0, react.useRef)(null);
+			const [pointerInside, setPointerInside] = (0, react.useState)(false);
+			const lingerTimer = (0, react.useRef)(void 0);
+			const armLinger = () => {
+				if (lingerTimer.current !== void 0) return;
+				lingerTimer.current = window.setTimeout(() => {
+					lingerTimer.current = void 0;
+					setPointerInside(false);
+				}, SCROLLBAR_LINGER_MS);
+			};
+			const cancelLinger = () => {
+				window.clearTimeout(lingerTimer.current);
+				lingerTimer.current = void 0;
+			};
+			(0, react.useEffect)(() => {
+				if (!pointerInside) return;
+				const onMove = (event) => {
+					const rect = column.current?.getBoundingClientRect();
+					/* v8 ignore next -- the listener only exists while the column is mounted and revealed. */
+					if (rect === void 0) return;
+					if (event.clientX >= rect.left && event.clientX < rect.right && event.clientY >= rect.top && event.clientY < rect.bottom) cancelLinger();
+					else armLinger();
+				};
+				document.addEventListener("pointermove", onMove);
+				return () => {
+					document.removeEventListener("pointermove", onMove);
+					cancelLinger();
+				};
+			}, [pointerInside]);
+			return (0, react_jsx_runtime.jsxs)("div", {
+				ref: column,
+				className: clsx(SidebarRoot_module_css_default.root, !wide && SidebarRoot_module_css_default.collapsed, !wide && everWide.current && SidebarRoot_module_css_default.railIn, collapsed && wide && SidebarRoot_module_css_default.fading, !pointerInside && SidebarRoot_module_css_default.quietBars),
+				style: wide ? { width: collapsed ? lastWideWidth.current : width } : void 0,
+				onPointerEnter: () => {
+					cancelLinger();
+					setPointerInside(true);
+				},
+				onPointerLeave: () => {
+					armLinger();
+				},
+				children: [
+					(0, react_jsx_runtime.jsxs)("div", {
+						className: SidebarRoot_module_css_default.logoRow,
+						children: [wide && (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: clsx(SidebarRoot_module_css_default.brand, SidebarRoot_module_css_default.wide),
+							"aria-label": t("session.new.label"),
+							onClick: () => {
+								startSession();
+							},
+							children: (0, react_jsx_runtime.jsxs)("span", {
+								className: SidebarRoot_module_css_default.brandIdentity,
+								"aria-hidden": "true",
+								children: [(0, react_jsx_runtime.jsx)("span", {
+									className: SidebarRoot_module_css_default.brandMark,
+									children: renderSlot("sidebar.brand.mark", { size: 24 }, { fallback: null })
+								}), (0, react_jsx_runtime.jsx)("span", {
+									className: SidebarRoot_module_css_default.brandName,
+									children: renderSlot("sidebar.brand.name", {}, { fallback: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)(HydraSidebarBrand, { className: SidebarRoot_module_css_default.localBrandLogo }), (0, react_jsx_runtime.jsx)("span", {
+										className: SidebarRoot_module_css_default.buildRevision,
+										children: "cdc4224"
+									})] }) })
+								})]
+							})
+						}), (0, react_jsx_runtime.jsx)(_hydraharness_harness_client_ui_primitives.Tooltip, {
+							label: collapsed ? t("toggle.open") : t("toggle.collapse"),
+							delayMs: 500,
+							children: (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: clsx(SidebarRoot_module_css_default.iconButton, SidebarRoot_module_css_default.toggle),
+								"aria-label": collapsed ? t("toggle.open") : t("toggle.collapse"),
+								onClick: () => {
+									toggleSidebar();
+								},
+								children: [!wide && (0, react_jsx_runtime.jsx)("span", {
+									className: SidebarRoot_module_css_default.railMark,
+									"aria-hidden": "true",
+									children: renderSlot("sidebar.brand.mark", { size: 24 }, { fallback: (0, react_jsx_runtime.jsx)(_hydraharness_harness_client_ui_primitives.HydraLogo, { size: 24 }) })
+								}), (0, react_jsx_runtime.jsx)(_hydraharness_harness_client_ui_primitives.IconPanelLeftOutline16, {
+									className: SidebarRoot_module_css_default.panelIcon,
+									size: wide ? 16 : 18
+								})]
+							})
+						})]
+					}),
+					(0, react_jsx_runtime.jsx)(_hydraharness_harness_client_ui_primitives.Tooltip, {
+						label: t("session.new.label"),
+						delayMs: 500,
+						disabled: wide,
+						children: (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							className: SidebarRoot_module_css_default.newSession,
+							"aria-label": t("session.new.label"),
+							onClick: () => {
+								startSession();
+							},
+							children: [(0, react_jsx_runtime.jsx)(_hydraharness_harness_client_ui_primitives.IconNewChatOutline16, { size: wide ? 14 : 18 }), wide && (0, react_jsx_runtime.jsx)("span", {
+								className: clsx(SidebarRoot_module_css_default.newSessionLabel, SidebarRoot_module_css_default.wide),
+								children: t("session.new")
+							})]
+						})
+					}),
+					(0, react_jsx_runtime.jsx)("div", {
+						className: SidebarRoot_module_css_default.regionArea,
+						children: renderSlot("sidebar.workspaces", {
+							wide,
+							expandSidebar: () => {
+								if (collapsed) toggleSidebar();
+							}
+						})
+					}),
+					(0, react_jsx_runtime.jsxs)("div", {
+						className: SidebarRoot_module_css_default.footArea,
+						children: [(0, react_jsx_runtime.jsx)("div", {
+							className: SidebarRoot_module_css_default.footerActions,
+							children: renderSlot("sidebar.footer.action", { wide })
+						}), (0, react_jsx_runtime.jsx)("div", {
+							className: SidebarRoot_module_css_default.settingsArea,
+							children: renderSlot("sidebar.settings", { wide })
+						})]
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region lib/types/client/locales.js
+		/** `sidebar` namespace dictionaries: shell controls (brand row, New Session, fold toggle). */
+		/** English dictionary (the key-set source of truth). */
+		const en = {
+			"session.new": "New Session",
+			"session.new.label": "New session",
+			"toggle.open": "Open sidebar",
+			"toggle.collapse": "Collapse sidebar"
+		};
+		//#endregion
+		//#region lib/types/client/index.js
+		/** Dictionary namespace owned by this plugin (shell controls copy). */
+		const NS = "sidebar";
+		/** Services required by the sidebar plugin. */
+		const inject = [
+			"slots",
+			"layout",
+			"sessions",
+			"workspaces",
+			"locale"
+		];
+		/** Registers the sidebar shell and its service callbacks.
+		* @param ctx - Client root context.
+		*/
+		function apply(ctx) {
+			ctx.effect(() => ctx.locale.register(NS, { en }), "ui-sidebar: dictionaries");
+			const injectProps = () => ({
+				startSession: (workspaceId) => {
+					ctx.workspaces.startSession(workspaceId);
+				},
+				toggleSidebar: () => {
+					ctx.layout.toggleSidebar();
+				}
+			});
+			ctx.effect(() => ctx.slots.register({
+				name: "sidebar",
+				locale: NS,
+				children: {
+					"sidebar.brand.mark": {
+						kind: "single",
+						scope: "root"
+					},
+					"sidebar.brand.name": {
+						kind: "single",
+						scope: "root"
+					},
+					"sidebar.workspaces": {
+						kind: "single",
+						scope: "root"
+					},
+					"sidebar.settings": {
+						kind: "single",
+						scope: "root"
+					},
+					"sidebar.footer.action": {
+						kind: "list",
+						scope: "root"
+					}
+				},
+				inject: injectProps
+			}, SidebarRoot), "ui-sidebar: slot registration");
+		}
+		//#endregion
+		exports.apply = apply;
+		exports.inject = inject;
+		return module.exports;
+	}
+});
+
+//# sourceMappingURL=client.js.map

package/lib/index.js

@@ -0,0 +1,6 @@
+//#region lib/types/index.js
+/** Host loader entry for the browser-only sidebar plugin. */
+/** Provides no host-side behavior. */
+function apply() {}
+//#endregion
+export { apply };

package/lib/invariant.js

@@ -0,0 +1,25 @@
+//#region lib/types/invariant.js
+/**
+* Package-owned invariant companion for `@hydraharness/harness-client-ui-sidebar`.
+* @module @hydraharness/harness-client-ui-sidebar/invariant
+*/
+const PACKAGE_NAME = "@hydraharness/harness-client-ui-sidebar";
+/** Cordis companion plugin name. */
+const name = "client-ui-sidebar-invariant";
+/** Service required before the companion can reserve package ownership. */
+const inject = ["invariants"];
+/**
+* No runtime invariant: a pure-consumer plugin deriving its rows in-component
+* from the standard useSessions delivery — it emits no cordis events and owns
+* no cross-plugin mutable state; derivation and interaction behavior are
+* asserted directly by this package's tree/component specs.
+*/
+const install = () => {};
+/**
+* Register this package's invariant companion.
+* @param ctx - Cordis context carrying the invariant service.
+* @returns the installed registration's disposer after setup succeeds.
+*/
+const apply = (ctx) => Promise.resolve(ctx.invariants.register(PACKAGE_NAME, install));
+//#endregion
+export { apply, inject, name };

package/lib/types/client/HydraSidebarBrand.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Render the Hydra harness name and mark in the sidebar.
+ * @param props - Optional layout class.
+ * @returns the shared brand wordmark.
+ */
+export declare function HydraSidebarBrand({ className }: {
+    className?: string | undefined;
+}): import("react").JSX.Element;
+//# sourceMappingURL=HydraSidebarBrand.d.ts.map

package/lib/types/client/SidebarRoot.d.ts

@@ -0,0 +1,8 @@
+import type { SidebarRootComponentProps } from './contract/slots.ts';
+/**
+ * Render the sidebar column shell.
+ * @param props - composed slot props (runtime share + injected callbacks, contract/slots.ts).
+ * @returns the sidebar element tree.
+ */
+export declare function SidebarRoot({ collapsed, width, startSession, toggleSidebar, t, renderSlot, }: SidebarRootComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=SidebarRoot.d.ts.map

package/lib/types/client/contract/slots.d.ts

@@ -0,0 +1,119 @@
+/**
+ * Sidebar slot contract: the registrant-side props composition for the
+ * layout-owned `sidebar` slot, plus the holes this shell declares. The shell
+ * owns column geometry (fold state machine, brand row, New Session);
+ * everything between the section header and the list bottom is the
+ * `sidebar.workspaces` registrant's (ui-workspace), and the foot is the
+ * `sidebar.settings` registrant's (ui-settings), followed by optional footer
+ * actions in `sidebar.footer.action`.
+ */
+import type { PropsLocale, PropsRenderSlots, PropsRuntime } from '@hydraharness/harness-client-ui-slots';
+import type { WorkspaceId } from '@hydraharness/harness-client-runtime/client';
+declare module '@hydraharness/harness-client-ui-slots' {
+    interface SlotMap {
+        /**
+         * Brand mark rendered in the expanded brand row and collapsed rail.
+         * Declared by this package's `sidebar` entry; deployments may replace
+         * the shell's local mark fallback without replacing the surrounding controls.
+         */
+        'sidebar.brand.mark': {
+            kind: 'single';
+            scope: 'root';
+            owner: SidebarBrandMarkOwnerProps;
+        };
+        /**
+         * Brand name rendered beside the expanded mark. Declared by this
+         * package's `sidebar` entry; the shell supplies a generic text fallback.
+         */
+        'sidebar.brand.name': {
+            kind: 'single';
+            scope: 'root';
+            owner: SidebarBrandNameOwnerProps;
+        };
+        /**
+         * The workspace/session browsing region: section header, search, the
+         * grouped/flat session list, and every workspace dialog. Declared by this
+         * package's 'sidebar' entry (declaring is claiming); ui-workspace
+         * registers the browser.
+         */
+        'sidebar.workspaces': {
+            kind: 'single';
+            scope: 'root';
+            owner: SidebarSectionOwnerProps;
+        };
+        /**
+         * The settings seat at the sidebar foot. Declared by this package's
+         * 'sidebar' entry; ui-settings registers its trigger row + modal panel.
+         * The sidebar passes only its column state — it holds no settings state.
+         */
+        'sidebar.settings': {
+            kind: 'single';
+            scope: 'root';
+            owner: SidebarSettingsOwnerProps;
+        };
+        /**
+         * Optional actions beside Settings at the sidebar foot. Declared by this
+         * package's 'sidebar' entry; each action receives only the column state.
+         */
+        'sidebar.footer.action': {
+            kind: 'list';
+            scope: 'root';
+            owner: SidebarFooterActionOwnerProps;
+        };
+    }
+}
+/** Geometry supplied to the sidebar brand-mark occupant. */
+export interface SidebarBrandMarkOwnerProps {
+    /** Requested square edge in pixels. */
+    size: number;
+}
+/** Empty owner share for the sidebar brand-name occupant. */
+export interface SidebarBrandNameOwnerProps {
+    /** Marker field: the occupant owns its own content and width. */
+    children?: never;
+}
+/**
+ * Owner share of the browser hole — the only facts crossing the shell/region
+ * boundary. Business data and actions arrive through the region's own inject.
+ */
+export interface SidebarSectionOwnerProps {
+    /** Shell fold-state output: wide renders the full browser, rail the icon column. */
+    wide: boolean;
+    /** Rail icons request expansion; the browser rides the wide flip for focus. */
+    expandSidebar: () => void;
+}
+/**
+ * Owner share of the sidebar settings seat: the column display state the
+ * occupant's trigger row must render against (wide row vs rail icon).
+ */
+export interface SidebarSettingsOwnerProps {
+    /** Whether the sidebar renders wide content (false = 56px rail). */
+    wide: boolean;
+}
+/** Owner share of an action rendered beside Settings at the sidebar foot. */
+export interface SidebarFooterActionOwnerProps {
+    /** Whether the sidebar renders wide content (false = 56px rail). */
+    wide: boolean;
+}
+/**
+ * Registrant-private injected share (arrives via the register inject
+ * factory). The shell keeps only its own controls: starting a Session from
+ * the New Session button and toggling the column.
+ */
+export type SidebarRootInjected = {
+    /**
+     * Start a New Session: with a workspace, reuse-or-create its blank session
+     * and open it; without one, inherit the current Session Workspace, then the
+     * recent Workspace, or clear into the New Session pure view when none exist.
+     */
+    startSession: (workspaceId?: WorkspaceId) => void;
+    /** Toggle the sidebar column through the layout service. */
+    toggleSidebar: () => void;
+};
+/**
+ * Full component props: layout owner state/actions plus the declared holes'
+ * render shares, this package's injected callbacks, and the standard locale
+ * seat. No store is registered.
+ */
+export type SidebarRootComponentProps = PropsRuntime<'sidebar'> & PropsRenderSlots<'sidebar.brand.mark' | 'sidebar.brand.name' | 'sidebar.workspaces' | 'sidebar.settings' | 'sidebar.footer.action'> & SidebarRootInjected & PropsLocale<'sidebar'>;
+//# sourceMappingURL=slots.d.ts.map

package/lib/types/client/index.d.ts

@@ -0,0 +1,18 @@
+/** Registers the sidebar shell into the layout-owned slot. */
+import type { ClientContext } from '@hydraharness/harness-client-runtime/client';
+import { type SidebarKey } from './locales.ts';
+export type { SidebarBrandMarkOwnerProps, SidebarBrandNameOwnerProps, SidebarFooterActionOwnerProps, SidebarRootComponentProps, SidebarRootInjected, SidebarSectionOwnerProps, SidebarSettingsOwnerProps, } from './contract/slots.ts';
+export type { SidebarKey } from './locales.ts';
+declare module '@hydraharness/harness-client-ui-slots' {
+    interface LocaleNamespaceMap {
+        /** Sidebar shell controls copy. */
+        sidebar: SidebarKey;
+    }
+}
+/** Services required by the sidebar plugin. */
+export declare const inject: string[];
+/** Registers the sidebar shell and its service callbacks.
+ * @param ctx - Client root context.
+ */
+export declare function apply(ctx: ClientContext): void;
+//# sourceMappingURL=index.d.ts.map

package/lib/types/client/locales.d.ts

@@ -0,0 +1,11 @@
+/** `sidebar` namespace dictionaries: shell controls (brand row, New Session, fold toggle). */
+/** English dictionary (the key-set source of truth). */
+export declare const en: {
+    'session.new': string;
+    'session.new.label': string;
+    'toggle.open': string;
+    'toggle.collapse': string;
+};
+/** The sidebar namespace key union. */
+export type SidebarKey = keyof typeof en;
+//# sourceMappingURL=locales.d.ts.map

package/lib/types/index.d.ts

@@ -0,0 +1,4 @@
+/** Host loader entry for the browser-only sidebar plugin. */
+/** Provides no host-side behavior. */
+export declare function apply(): void;
+//# sourceMappingURL=index.d.ts.map

package/lib/types/invariant.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Package-owned invariant companion for `@hydraharness/harness-client-ui-sidebar`.
+ * @module @hydraharness/harness-client-ui-sidebar/invariant
+ */
+import type { Context } from '@hydraharness/cordis';
+/** Cordis companion plugin name. */
+export declare const name = "client-ui-sidebar-invariant";
+/** Service required before the companion can reserve package ownership. */
+export declare const inject: string[];
+/**
+ * Register this package's invariant companion.
+ * @param ctx - Cordis context carrying the invariant service.
+ * @returns the installed registration's disposer after setup succeeds.
+ */
+export declare const apply: (ctx: Context) => Promise<() => void>;
+//# sourceMappingURL=invariant.d.ts.map

package/package.json

@@ -1,6 +1,78 @@
 {
   "name": "@hydraharness/harness-client-ui-sidebar",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "description": "Sidebar plugin: session multi-level tree, search, grouping, state dots",
+  "version": "0.1.1-rc.6",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MaiHongPhong1902/Hydra-Harness.git",
+    "directory": "packages/client/ui-sidebar"
+  },
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./invariant": {
+      "types": "./lib/types/invariant.d.ts",
+      "default": "./lib/invariant.js"
+    },
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "hydra": {
+    "plugin": {
+      "application": "Find, group, and switch between conversations and their child sessions."
+    },
+    "client": {
+      "inject": [
+        "@hydraharness/harness-client-runtime",
+        "@hydraharness/harness-client-ui-layout",
+        "@hydraharness/harness-client-locale"
+      ],
+      "platform": "web"
+    }
+  },
+  "license": "MIT",
+  "dependencies": {
+    "clsx": "^2.0.0"
+  },
+  "peerDependencies": {
+    "@hydraharness/harness-invariants": "^0.1.1-rc.6",
+    "@hydraharness/harness-client-locale": "^0.1.1-rc.6",
+    "@hydraharness/harness-client-ui-layout": "^0.1.1-rc.6",
+    "@hydraharness/harness-client-runtime": "^0.1.1-rc.6",
+    "@hydraharness/cordis": "^4.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "~18.3.1",
+    "react": "^18.2.0",
+    "@hydraharness/harness-client-locale": "^0.1.1-rc.6",
+    "@hydraharness/harness-client-runtime": "^0.1.1-rc.6",
+    "@hydraharness/harness-client-test-runtime": "^0.1.1-rc.6",
+    "@hydraharness/harness-client-ui-layout": "^0.1.1-rc.6",
+    "@hydraharness/harness-client-ui-primitives": "^0.1.1-rc.6",
+    "@hydraharness/harness-client-ui-slots": "^0.1.1-rc.6",
+    "@hydraharness/cordis": "^4.0.2",
+    "@hydraharness/harness-invariants": "^0.1.1-rc.6"
+  },
+  "files": [
+    "lib/index.js",
+    "lib/invariant.js",
+    "lib/client.js",
+    "lib/types/**/*.d.ts"
+  ],
+  "scripts": {
+    "bundle": "tsdown",
+    "watch": "tsdown --watch"
+  }
 }