refactor: implement gallery mode and update shell architecture

This commit overhauls the app to support dual operating modes: workspace and gallery. Key changes include:
- Added gallery mode sidebar with section navigation and editor panels
- Refactored site header to support non-closable scene tabs
- Updated component capability defaults and layout policies
- Created new UI components: alert, alert-dialog, footer-menu-stack
- Improved sidebar styling with tone variants and better spacing
- Added project delete confirmation dialogs
- Updated design documentation to reflect the new mode model
- Refactored artifact profile storage validation
- Swapped command separator usage and updated theme provider exports
- Fixed test snapshots for new layout and component changes

Author: Sayhi-bzb

apps/agent-html/.agent-html-dev.err

@@ -1 +1,2 @@
 1:03:50 PM [vite] (client) Pre-transform error: Failed to load url /src/components/nav-user.tsx (resolved id: D:/codes/Agent-HTML-Sandbox/apps/agent-html/src/components/nav-user.tsx) in D:/codes/Agent-HTML-Sandbox/apps/agent-html/src/components/app-sidebar.tsx. Does the file exist?
+2:10:47 PM [vite] (client) Pre-transform error: Failed to load url /src/components/theme-view.tsx (resolved id: D:/codes/Agent-HTML-Sandbox/apps/agent-html/src/components/theme-view.tsx) in D:/codes/Agent-HTML-Sandbox/apps/agent-html/src/App.tsx. Does the file exist?

apps/agent-html/.agent-html-dev.out

@@ -28,3 +28,56 @@ Port 4173 is in use, trying another one...
 1:24:31 PM [vite] (client) hmr update /src/components/app-sidebar.tsx, /src/index.css
 1:24:31 PM [vite] (client) hmr update /src/components/nav-projects.tsx, /src/index.css
 1:27:08 PM [vite] (client) hmr update /src/index.css, /src/components/settings-menu.tsx
+1:37:48 PM [vite] (client) hmr update /src/index.css, /src/components/settings-menu.tsx
+1:37:48 PM [vite] (client) hmr update /src/index.css, /src/components/settings-menu.tsx
+1:38:34 PM [vite] (client) hmr update /src/components/nav-projects.tsx, /src/index.css
+1:38:54 PM [vite] (client) hmr update /src/components/search-command.tsx, /src/index.css
+1:39:56 PM [vite] (client) hmr update /src/components/nav-projects.tsx, /src/index.css
+1:42:51 PM [vite] (client) hmr update /src/index.css, /src/components/settings-menu.tsx
+1:42:51 PM [vite] (client) hmr update /src/components/app-sidebar.tsx, /src/index.css
+1:43:12 PM [vite] (client) hmr update /src/index.css, /src/components/theme-menu.tsx
+1:43:33 PM [vite] (client) hmr update /src/components/ui/sidebar.tsx, /src/index.css
+1:43:34 PM [vite] (client) hmr invalidate /src/components/ui/sidebar.tsx Could not Fast Refresh ("useSidebar" export is incompatible). Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports
+1:43:34 PM [vite] (client) hmr update /src/App.tsx, /src/components/app-sidebar.tsx, /src/components/site-header.tsx, /src/components/search-command.tsx, /src/components/nav-secondary.tsx, /src/components/nav-projects.tsx, /src/components/settings-menu.tsx, /src/components/theme-menu.tsx, /src/components/footer-menu-stack.tsx
+1:45:23 PM [vite] (client) hmr update /src/components/app-sidebar.tsx, /src/index.css
+1:55:22 PM [vite] (client) hmr update /src/components/ui/sidebar.tsx, /src/index.css
+1:55:22 PM [vite] (client) hmr invalidate /src/components/ui/sidebar.tsx Could not Fast Refresh ("useSidebar" export is incompatible). Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports
+1:55:22 PM [vite] (client) hmr update /src/App.tsx, /src/components/app-sidebar.tsx, /src/components/site-header.tsx, /src/components/search-command.tsx, /src/components/nav-secondary.tsx, /src/components/nav-projects.tsx, /src/components/settings-menu.tsx, /src/components/theme-menu.tsx, /src/components/footer-menu-stack.tsx
+1:55:30 PM [vite] (client) hmr update /src/index.css, /src/components/theme-menu.tsx
+1:59:16 PM [vite] (client) hmr update /src/components/ui/sidebar.tsx, /src/index.css
+1:59:16 PM [vite] (client) hmr invalidate /src/components/ui/sidebar.tsx Could not Fast Refresh ("useSidebar" export is incompatible). Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports
+1:59:16 PM [vite] (client) hmr update /src/App.tsx, /src/components/app-sidebar.tsx, /src/components/site-header.tsx, /src/components/search-command.tsx, /src/components/nav-secondary.tsx, /src/components/nav-projects.tsx, /src/components/settings-menu.tsx, /src/components/theme-menu.tsx, /src/components/footer-menu-stack.tsx
+2:02:16 PM [vite] (client) hmr update /src/index.css, /src/components/theme-menu.tsx
+2:02:16 PM [vite] (client) hmr update /src/components/app-sidebar.tsx, /src/index.css
+2:02:16 PM [vite] (client) hmr update /src/App.tsx, /src/index.css
+2:02:16 PM [vite] (client) hmr update /src/components/theme-provider.tsx, /src/index.css
+2:02:58 PM [vite] (client) hmr update /src/App.tsx, /src/index.css
+2:02:58 PM [vite] (client) hmr update /src/components/app-sidebar.tsx, /src/index.css
+2:08:01 PM [vite] (client) hmr update /src/components/app-sidebar.tsx, /src/index.css
+2:08:21 PM [vite] (client) hmr update /src/components/app-sidebar.tsx, /src/index.css
+2:10:47 PM [vite] (client) hmr update /src/index.css, /src/components/theme-view.tsx
+2:10:47 PM [vite] (client) hmr update /src/components/app-sidebar.tsx, /src/index.css
+2:10:47 PM [vite] (client) hmr update /src/App.tsx, /src/index.css
+2:17:06 PM [vite] (client) hmr update /src/components/ui/sidebar.tsx, /src/index.css
+2:17:07 PM [vite] (client) hmr invalidate /src/components/ui/sidebar.tsx Could not Fast Refresh ("useSidebar" export is incompatible). Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports
+2:17:07 PM [vite] (client) hmr update /src/App.tsx, /src/components/app-sidebar.tsx, /src/components/site-header.tsx, /src/components/search-command.tsx, /src/components/nav-secondary.tsx, /src/components/nav-projects.tsx, /src/components/settings-menu.tsx, /src/components/footer-menu-stack.tsx
+2:23:13 PM [vite] (client) hmr update /src/components/ui/sidebar.tsx, /src/index.css
+2:23:14 PM [vite] (client) hmr invalidate /src/components/ui/sidebar.tsx Could not Fast Refresh ("useSidebar" export is incompatible). Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports
+2:23:14 PM [vite] (client) hmr update /src/App.tsx, /src/components/app-sidebar.tsx, /src/components/site-header.tsx, /src/components/search-command.tsx, /src/components/nav-secondary.tsx, /src/components/nav-projects.tsx, /src/components/settings-menu.tsx, /src/components/footer-menu-stack.tsx
+2:24:52 PM [vite] (client) hmr update /src/index.css, /src/components/gallery-view.tsx
+2:24:53 PM [vite] (client) hmr update /src/components/app-sidebar.tsx, /src/index.css
+2:24:53 PM [vite] (client) hmr update /src/components/site-header.tsx, /src/index.css
+2:24:54 PM [vite] (client) hmr update /src/App.tsx, /src/index.css
+2:25:17 PM [vite] (client) hmr update /src/index.css, /src/components/gallery-view.tsx
+2:25:19 PM [vite] (client) hmr invalidate /src/components/gallery-view.tsx Could not Fast Refresh ("galleryScenes" export is incompatible). Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports
+2:25:19 PM [vite] (client) hmr update /src/App.tsx, /src/components/app-sidebar.tsx
+2:27:37 PM [vite] (client) hmr update /src/components/site-header.tsx, /src/index.css
+2:27:52 PM [vite] (client) hmr update /src/components/site-header.tsx, /src/index.css
+2:28:15 PM [vite] (client) hmr update /src/components/site-header.tsx, /src/index.css
+2:28:15 PM [vite] (client) hmr update /src/App.tsx, /src/index.css
+2:31:29 PM [vite] (client) hmr update /src/index.css
+2:32:07 PM [vite] (client) hmr update /src/index.css
+2:32:48 PM [vite] (client) hmr update /src/index.css
+2:33:23 PM [vite] (client) hmr update /src/index.css
+2:33:55 PM [vite] (client) hmr update /src/index.css
+2:34:34 PM [vite] (client) hmr update /src/index.css

apps/agent-html/design/DESIGN.md

@@ -1,10 +1,10 @@
-# Design System: Agent HTML Workspace Shell
+# Design System: Agent HTML Operating Shell
 **Project ID:** local-vite-react-shell
 
 ## 1. Visual Theme & Atmosphere
-This product uses a calm workspace-shell aesthetic rather than a marketing or editorial aesthetic.
-The interface should feel operational, neutral, and dependable. It is designed for scanning status,
-moving through tools, and staying oriented during longer sessions.
+This product uses a calm operating-shell aesthetic rather than a marketing or editorial aesthetic.
+The interface should feel operational, neutral, and dependable. It is designed for moving between
+working contexts, scanning structural cues, and staying oriented during longer sessions.
 
 The emotional tone is intentionally low-drama:
 
@@ -16,7 +16,23 @@ The emotional tone is intentionally low-drama:
 The left navigation rail is the strongest compositional signal.
 It makes the app read like a console or workbench, not a landing page.
 
-## 2. Visual Character
+## 2. Operating Model
+The current product is organized around one durable shell with two operating modes:
+
+- `workspace` mode for project navigation and project-backed work tabs
+- `gallery` mode for shell studies, scene tabs, and sidebar editor panels
+
+The shell stays materially stable while the active work surface changes role.
+This is a mode swap, not a route-family fork.
+
+The header, sidebar, and footer remain part of the same operational frame in both modes.
+What changes is the content they host:
+
+- project tabs vs. scene tabs in the header
+- navigation list vs. editor panels in the sidebar body
+- utility footer vs. passive gallery footer content
+
+## 3. Visual Character
 The shell is neutral-first.
 Light mode is paper-clean and border-led.
 Dark mode is control-room dark and low-glare.
@@ -26,12 +42,12 @@ The system should continue to feel:
 - border-defined rather than shadow-defined
 - utility-dense rather than airy
 - modular rather than narrative
-- consistent across screens rather than visually reinvented per route
+- consistent across modes rather than visually reinvented per view
 
 Accent color should remain sparse and purposeful.
 It exists to support orientation and action priority, not to create a brand-saturated surface.
 
-## 3. Typography Character
+## 4. Typography Character
 Typography should feel contemporary, technical, and restrained.
 It should support hierarchy through weight, scale, and contrast rather than through ornamental
 styling.
@@ -45,7 +61,7 @@ The preferred reading impression is:
 
 Product screens should never feel like they are borrowing a marketing hero system.
 
-## 4. Interaction Character
+## 5. Interaction Character
 Controls should feel compact, direct, and predictable.
 Hover, focus, active, invalid, and disabled states should remain clear without becoming loud.
 
@@ -56,23 +72,27 @@ The interaction language should read as:
 - low ambiguity
 - low visual friction
 
-## 5. Layout Character
+## 6. Layout Character
 Pages should inherit a clear shell hierarchy:
 
 - sticky top chrome
 - left-side navigation spine
-- modular content well
+- mode-aware content well
 - responsive collapse through reflow, not redesign
 
 The main content area should favor dashboard-like modules, panels, and structured sections over
 long, undifferentiated reading flows.
 
-## 6. Spatial Philosophy
+In `gallery` mode, the main content area becomes a scene-preview surface rather than a standard
+project workspace, but it must still read as a hosted work plane inside the same shell.
+
+## 7. Spatial Philosophy
 This product is organized around two spatial roles: `shell` and `workspace`.
 
 The shell is the durable container for navigation, global actions, open-context tabs, and product
 orientation.
-The workspace is the focused surface where reading, editing, reviewing, and tool execution happen.
+The workspace is the focused surface where reading, editing, reviewing, scene inspection, and tool
+execution happen.
 
 These roles must feel different:
 
@@ -88,7 +108,7 @@ This is also why the main content well should feel inset rather than merely adja
 Rounded corners, margin offsets, and surface contrast should make the workspace feel placed into
 the shell, like a work board inside a chassis.
 
-## 7. Surface Hierarchy
+## 8. Surface Hierarchy
 The product should establish hierarchy through surfaces before it relies on borders.
 
 Preferred reading order:
@@ -102,14 +122,14 @@ Implications:
 - shell-level regions should share a base color family whenever possible
 - borders should organize local structure, not serve as the main tool for separating major zones
 - shadows should stay light and structural rather than theatrical
-- selected states may claim a stronger surface when they represent a focused workspace context
+- selected states may claim a stronger surface when they represent a focused context
 
 In the current implementation, the shell reads from `background` while the main workspace surface
 reads from `card`.
 
 The interface should feel assembled from calm planes rather than carved into many outlined boxes.
 
-## 8. Interaction Philosophy
+## 9. Interaction Philosophy
 Interaction feedback should reinforce spatial roles instead of competing with them.
 
 Shell interactions should stay stable and quiet.
@@ -122,13 +142,20 @@ than promotional.
 The goal is not visual excitement.
 The goal is durable orientation during long working sessions.
 
-## 9. Design Philosophy
+In the current shell:
+
+- secondary sidebar controls default to weakened text
+- hover may strengthen text without introducing a new background
+- active sidebar items should rely on background and foreground, not on heavier font weight
+
+## 10. Design Philosophy
 The system should stay aligned with these principles:
 
 - Prefer neutral surfaces over brand-colored surfaces.
 - Prefer thin borders over dramatic depth.
 - Prefer compact utility spacing over theatrical whitespace.
 - Prefer stable shell patterns over one-off page expression.
+- Prefer mode swaps inside the shell over fragmenting the product into unrelated frames.
 - Prefer compositional discipline over stylistic novelty.
 
 Implementation rules, token structure, typography roles, layout standards, and component standards

apps/agent-html/design/README.md

@@ -1,20 +1,28 @@
 # Design Standards
 
-This directory contains the working frontend design standards for the `agent-html` app.
+This directory contains the implementation-facing design standards for the `agent-html` app as it
+exists today.
+
+The current product model is a dual-mode operating shell:
+
+- `workspace` mode for project-backed work tabs and the main working surface
+- `gallery` mode for design-study scenes, scene tabs, and sidebar editor panels
+
+These documents should describe the real shell, not a historical placeholder concept.
 
 ## Ownership
 
-This package owns the implementation-facing design rules for the app frontend.
+This package owns the frontend design rules for the app.
 High-level visual philosophy is defined in [`DESIGN.md`](./DESIGN.md), while the rest of this
 directory translates that philosophy into implementation-facing rules.
 
 ## Reading Order
 
-1. [`DESIGN.md`](./DESIGN.md) for visual philosophy and product feel
+1. [`DESIGN.md`](./DESIGN.md) for product feel and operating-shell philosophy
 2. [`constitution.md`](./constitution.md) for global design-system law
-3. [`tokens.md`](./tokens.md) for token layers, naming, and consumption
+3. [`tokens.md`](./tokens.md) for token layers, semantic interfaces, and shell constants
 4. [`typography.md`](./typography.md) for text roles and hierarchy
-5. [`layout.md`](./layout.md) for shell, spacing, and responsive structure
+5. [`layout.md`](./layout.md) for shell modes, spacing, and responsive structure
 6. [`components.md`](./components.md) for component-family standards
 7. [`code-structure.md`](./code-structure.md) for implementation boundaries and review rules
 
@@ -24,11 +32,14 @@ directory translates that philosophy into implementation-facing rules.
 - If the question is "what is globally allowed or forbidden," read `constitution.md`.
 - If the question is "where does this visual value come from," read `tokens.md`.
 - If the question is "what text role should this use," read `typography.md`.
-- If the question is "how should this page be structured," read `layout.md`.
+- If the question is "how should this shell or mode be structured," read `layout.md`.
 - If the question is "how should this component family behave," read `components.md`.
 - If the question is "where should this code live," read `code-structure.md`.
 
 ## Boundary Rule
 
 Each file in this directory should answer one class of question.
 If a rule is fully specified in one file, other files should link to it rather than restate it.
+
+When the operating shell changes, the corresponding rules in this directory should be updated in
+the same stream rather than left behind as aspirational design text.