Merge branch 'Features/Frontend/Future-Model-Prep'

.gitignore

@@ -25,3 +25,5 @@ pnpm-debug.log*
 # Go build output
 tmp/
 bin/
+
+.cgcignore

Backend/internal/config/config.go

@@ -15,7 +15,6 @@ type Config struct {
 	LogLevel        string
 	WebPort         string
 	APIPort         string
-	WorkerPort      string
 	PostgresURL     string
 	ValkeyURL       string
 	ShutdownTimeout time.Duration
@@ -28,7 +27,6 @@ func Load() *Config {
 		LogLevel:        getEnv("LOG_LEVEL", "debug"),
 		WebPort:         getEnv("BACKEND_WEB_PORT", "8080"),
 		APIPort:         getEnv("BACKEND_API_PORT", "8081"),
-		WorkerPort:      getEnv("BACKEND_WORKER_PORT", "8082"),
 		PostgresURL:     getEnv("DATABASE_URL", "postgres://moku:moku_dev_password@localhost:5432/moku?sslmode=disable"),
 		ValkeyURL:       getEnv("VALKEY_URL", "redis://localhost:6379/0"),
 		ShutdownTimeout: getDurationEnv("BACKEND_SHUTDOWN_TIMEOUT", 10*time.Second),
@@ -43,8 +41,6 @@ func (c *Config) Address(serviceName string) string {
 		port = c.WebPort
 	case "api":
 		port = c.APIPort
-	case "worker":
-		port = c.WorkerPort
 	default:
 		port = c.WebPort
 	}

Documentation/STYLING-THEME-SAMPLE.json

@@ -0,0 +1,177 @@
+{
+	"schemaVersion": "1.0.0",
+	"id": "moku-styling-sample",
+	"name": "Moku Styling Sample",
+	"description": "Sample theme showing the background, surface, border, accent, and primary tokens documented in Documentation/STYLING.md.",
+	"author": "Moku Work",
+	"tokens": {
+		"shared": {
+			"palette": {
+				"gray": {
+					"0": "hsl(210 20% 99%)",
+					"50": "hsl(220 20% 97%)",
+					"100": "hsl(220 16% 93%)",
+					"200": "hsl(220 13% 87%)",
+					"300": "hsl(220 11% 75%)",
+					"400": "hsl(220 9% 58%)",
+					"500": "hsl(220 10% 45%)",
+					"600": "hsl(220 14% 34%)",
+					"700": "hsl(220 18% 24%)",
+					"800": "hsl(220 22% 16%)",
+					"900": "hsl(220 28% 10%)"
+				},
+				"blue": {
+					"400": "hsl(218 88% 61%)",
+					"500": "hsl(221 83% 53%)",
+					"600": "hsl(224 76% 48%)"
+				},
+				"green": {
+					"500": "hsl(154 60% 40%)"
+				},
+				"red": {
+					"500": "hsl(0 72% 54%)"
+				},
+				"amber": {
+					"500": "hsl(36 100% 50%)"
+				}
+			},
+			"space": {
+				"1": "0.25rem",
+				"2": "0.5rem",
+				"3": "0.75rem",
+				"4": "1rem",
+				"5": "1.25rem",
+				"6": "1.5rem",
+				"8": "2rem",
+				"10": "2.5rem",
+				"12": "3rem"
+			},
+			"radius": {
+				"sm": "0.375rem",
+				"md": "0.625rem",
+				"lg": "0.875rem",
+				"xl": "1.25rem",
+				"pill": "999px"
+			},
+			"size": {
+				"controlMd": "2.25rem",
+				"controlLg": "2.5rem",
+				"contentWidthWide": "72rem",
+				"blurOverlay": "18px"
+			},
+			"shadow": {
+				"soft": "0 12px 32px hsl(220 30% 10% / 0.08)",
+				"strong": "0 20px 48px hsl(220 30% 10% / 0.16)"
+			},
+			"zIndex": {
+				"base": "1",
+				"dropdown": "100",
+				"sticky": "200",
+				"overlay": "400",
+				"modal": "500",
+				"toast": "600"
+			},
+			"motion": {
+				"durationFast": "140ms",
+				"durationBase": "220ms",
+				"durationSlow": "320ms",
+				"easeStandard": "cubic-bezier(0.2, 0.8, 0.2, 1)"
+			},
+			"typography": {
+				"fontFamily": {
+					"sans": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+					"heading": "\"Avenir Next\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+					"display": "\"Avenir Next\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+					"serif": "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif",
+					"mono": "ui-monospace, \"SF Mono\", \"SFMono-Regular\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace"
+				},
+				"fontSize": {
+					"caption": "0.75rem",
+					"label": "0.875rem",
+					"body": "1rem",
+					"title": "clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem)",
+					"heading": "clamp(1.5rem, 1.2rem + 1vw, 2.125rem)",
+					"display": "clamp(2.25rem, 1.7rem + 2.2vw, 3.75rem)"
+				},
+				"lineHeight": {
+					"caption": "1.4",
+					"label": "1.35",
+					"body": "1.55",
+					"title": "1.3",
+					"heading": "1.15",
+					"display": "1.05"
+				},
+				"fontWeight": {
+					"caption": "500",
+					"label": "600",
+					"body": "400",
+					"title": "600",
+					"heading": "600",
+					"display": "700"
+				},
+				"letterSpacing": {
+					"caption": "0.01em",
+					"label": "0.005em",
+					"body": "0",
+					"title": "-0.01em",
+					"heading": "-0.02em",
+					"display": "-0.03em"
+				}
+			}
+		},
+		"modes": {
+			"light": {
+				"colorScheme": "light",
+				"colors": {
+					"canvas": "var(--gray-50)",
+					"surface": "hsl(0 0% 100% / 0.9)",
+					"surfaceMuted": "var(--gray-0)",
+					"surfaceHover": "var(--gray-100)",
+					"border": "hsl(220 15% 85% / 0.9)",
+					"borderStrong": "hsl(220 12% 70% / 0.9)",
+					"text": "var(--gray-800)",
+					"textMuted": "var(--gray-500)",
+					"accent": "var(--blue-500)",
+					"accentStrong": "var(--blue-600)",
+					"accentSoft": "hsl(218 88% 61% / 0.12)",
+					"accentContrast": "hsl(0 0% 100%)",
+					"primaryOne": "var(--blue-500)",
+					"primaryTwo": "hsl(271 72% 60%)",
+					"primaryThree": "hsl(192 76% 48%)",
+					"success": "var(--green-500)",
+					"danger": "var(--red-500)",
+					"warning": "var(--amber-500)",
+					"focusRing": "hsl(221 83% 53% / 0.55)"
+				}
+			},
+			"dark": {
+				"colorScheme": "dark",
+				"colors": {
+					"canvas": "var(--gray-900)",
+					"surface": "hsl(220 23% 14% / 0.92)",
+					"surfaceMuted": "hsl(220 22% 12% / 0.96)",
+					"surfaceHover": "hsl(220 18% 20% / 0.96)",
+					"border": "hsl(220 12% 26% / 0.9)",
+					"borderStrong": "hsl(220 12% 38% / 0.9)",
+					"text": "hsl(210 20% 96%)",
+					"textMuted": "hsl(220 12% 70%)",
+					"accent": "hsl(217 91% 67%)",
+					"accentStrong": "hsl(218 88% 61%)",
+					"accentSoft": "hsl(217 91% 67% / 0.18)",
+					"accentContrast": "hsl(220 28% 10%)",
+					"primaryOne": "hsl(217 91% 67%)",
+					"primaryTwo": "hsl(272 80% 70%)",
+					"primaryThree": "hsl(190 84% 62%)",
+					"success": "hsl(154 55% 48%)",
+					"danger": "hsl(0 72% 62%)",
+					"warning": "hsl(36 100% 60%)",
+					"focusRing": "hsl(217 91% 67% / 0.65)"
+				},
+				"shadow": {
+					"soft": "0 16px 40px hsl(220 40% 3% / 0.45)",
+					"strong": "0 24px 60px hsl(220 40% 3% / 0.55)"
+				}
+			}
+		}
+	}
+}

Documentation/STYLING.md

@@ -0,0 +1,327 @@
+# Styling Reference
+
+This document explains which theme tokens control the main backgrounds, surfaces,
+borders, and shell gradients in Moku Work.
+
+It is focused on the current frontend shell scaffold so future visual tuning can
+be done intentionally instead of by guesswork.
+
+## Source Of Truth
+
+There are two places to look when changing styling tokens:
+
+- Runtime theme payload:
+  - `Frontend/public/themes/moku-default.json`
+- SCSS fallback defaults:
+  - `Frontend/src/styles/themes/_light.scss`
+  - `Frontend/src/styles/themes/_dark.scss`
+- Full sample theme file:
+  - `Documentation/STYLING-THEME-SAMPLE.json`
+
+If you want to change the actual themed values used by the app, update the theme
+JSON first. The SCSS files act as fallback/default variables.
+
+---
+
+## Core Surface Tokens
+
+These are the main tokens currently driving shell backgrounds and card surfaces:
+
+- `--color-canvas`
+  - outer page background
+- `--color-surface`
+  - standard panel/card/topbar surface
+- `--color-surface-muted`
+  - quieter secondary panels and dropdown surfaces
+- `--color-surface-hover`
+  - hover state for solid surface rows
+- `--color-border`
+  - standard card/panel border
+- `--color-border-strong`
+  - stronger shell edges, separators, and emphasized borders
+- `--color-text`
+  - primary text color
+- `--color-text-muted`
+  - secondary/meta text color
+- `--color-accent`
+  - primary accent lane
+- `--color-accent-strong`
+  - stronger accent emphasis
+- `--color-accent-soft`
+  - soft accent wash for subtle fills
+
+There are also ring-only multi-primary tokens currently used for the top-right
+profile ring:
+
+- `--color-primary-1`
+- `--color-primary-2`
+- `--color-primary-3`
+
+---
+
+## Light Mode Values
+
+Current light-mode surface values:
+
+```text
+--color-canvas: var(--gray-50)
+--color-surface: hsl(0 0% 100% / 0.9)
+--color-surface-muted: var(--gray-0)
+--color-surface-hover: var(--gray-100)
+--color-border: hsl(220 15% 85% / 0.9)
+--color-border-strong: hsl(220 12% 70% / 0.9)
+--color-text: var(--gray-800)
+--color-text-muted: var(--gray-500)
+--color-accent: var(--blue-500)
+--color-accent-strong: var(--blue-600)
+--color-accent-soft: hsl(218 88% 61% / 0.12)
+--color-primary-1: var(--blue-500)
+--color-primary-2: hsl(271 72% 60%)
+--color-primary-3: hsl(192 76% 48%)
+```
+
+## Dark Mode Values
+
+Current dark-mode surface values:
+
+```text
+--color-canvas: var(--gray-900)
+--color-surface: hsl(220 23% 14% / 0.92)
+--color-surface-muted: hsl(220 22% 12% / 0.96)
+--color-surface-hover: hsl(220 18% 20% / 0.96)
+--color-border: hsl(220 12% 26% / 0.9)
+--color-border-strong: hsl(220 12% 38% / 0.9)
+--color-text: hsl(210 20% 96%)
+--color-text-muted: hsl(220 12% 70%)
+--color-accent: hsl(217 91% 67%)
+--color-accent-strong: hsl(218 88% 61%)
+--color-accent-soft: hsl(217 91% 67% / 0.18)
+--color-primary-1: hsl(217 91% 67%)
+--color-primary-2: hsl(272 80% 70%)
+--color-primary-3: hsl(190 84% 62%)
+```
+
+---
+
+## What Controls What
+
+### 1. App Background
+
+File:
+
+- `Frontend/src/components/shell/AppShell/AppShell.module.scss`
+
+The outer app frame uses:
+
+```scss
+background: var(--color-canvas);
+color: var(--color-text);
+```
+
+So if you want to change the overall page backdrop, change `--color-canvas`.
+
+### 2. Main Shell Split Background
+
+File:
+
+- `Frontend/src/components/shell/AppShell/AppShell.module.scss`
+
+The shell derives two important internal surface blends:
+
+```text
+--sidebar-panel-surface: color-mix(in srgb, var(--color-surface-muted) 92%, transparent)
+--workspace-panel-surface: color-mix(in srgb, var(--color-canvas) 94%, var(--color-surface))
+```
+
+It also derives frame/separator borders:
+
+```text
+--shell-frame-border: color-mix(in srgb, var(--color-border-strong) 44%, transparent)
+--shell-divider-border: color-mix(in srgb, var(--color-border-strong) 34%, transparent)
+```
+
+Surface usage inside the shell:
+
+- `.body` → `var(--color-surface)`
+- `.railColumn` → `var(--color-surface)`
+- `.sidebarColumn` → `var(--sidebar-panel-surface)`
+- `.workspaceMain` → `var(--workspace-panel-surface)`
+
+The major left/right shell background is drawn by `workspaceRegion::before` using a
+horizontal gradient from sidebar surface to workspace surface.
+
+### 3. Standard Content Cards
+
+File:
+
+- `Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.module.scss`
+
+Cards currently use:
+
+```text
+background: var(--color-surface)
+border: 1px solid var(--color-border)
+box-shadow: var(--shadow-soft)
+```
+
+If cards feel too flat or too strong, start by adjusting:
+
+- `--color-surface`
+- `--color-border`
+
+### 4. Top Bar
+
+File:
+
+- `Frontend/src/components/shell/TopBar/TopBar.module.scss`
+
+The top bar itself uses:
+
+```text
+background: var(--color-surface)
+```
+
+Hover/focus states for top-right controls use transparent mixes based on:
+
+- `--color-text`
+- `--color-accent-strong`
+
+So the bar is mostly controlled by `--color-surface`, while the interactive polish
+comes from text/accent tokens.
+
+### 5. Server Dock
+
+File:
+
+- `Frontend/src/components/shell/ServerDock/ServerDock.module.scss`
+
+The dock uses two derived tokens:
+
+```text
+--server-dock-border: color-mix(in srgb, var(--color-border-strong) 75%, transparent)
+--server-dock-surface: color-mix(in srgb, var(--color-surface) 94%, transparent)
+```
+
+That means the dock is visually tied most strongly to:
+
+- `--color-surface`
+- `--color-border-strong`
+
+The server glyph fill uses a soft accent wash derived from:
+
+- `--color-accent-soft`
+
+### 6. Project Drawer
+
+File:
+
+- `Frontend/src/components/shell/ProjectSelector/ProjectSelector.module.scss`
+
+Important layers:
+
+- scrim:
+  - `color-mix(in srgb, black 8%, transparent)`
+- drawer panel surface:
+  - defined in `.drawer::before`
+  - vertical gradient from `--color-surface` to `--color-surface-muted`
+- current-project summary block:
+  - `color-mix(in srgb, var(--color-surface) 72%, transparent)`
+- menu row hover:
+  - based on `--color-surface-hover`
+- menu row active:
+  - based on `--color-surface`
+
+So the drawer’s look is mainly shaped by:
+
+- `--color-surface`
+- `--color-surface-muted`
+- `--color-surface-hover`
+- `--color-border-strong`
+
+### 7. Department Selector Dropdown
+
+File:
+
+- `Frontend/src/components/shell/DepartmentSelector/DepartmentSelector.module.scss`
+
+The department dropdown is intentionally solid, not blurred.
+
+It uses:
+
+```text
+.menu background: var(--color-surface-muted)
+.menu border: 1px solid var(--color-border-strong)
+.menuItem background: var(--color-surface-muted)
+.submenuItem background: var(--color-surface-muted)
+hover/active rows: var(--color-surface)
+```
+
+If the department menu feels too heavy or too subtle, start by adjusting:
+
+- `--color-surface-muted`
+- `--color-surface`
+- `--color-border-strong`
+
+---
+
+## Quick Tuning Guide
+
+If you want to change the overall visual mood quickly, these are the highest-leverage tokens:
+
+### Make the app feel lighter / airier
+
+Adjust:
+
+- `--color-canvas`
+- `--color-surface`
+- `--color-surface-muted`
+
+### Make shells/cards feel more separated
+
+Adjust:
+
+- `--color-border`
+- `--color-border-strong`
+- `--color-surface-muted`
+
+### Make accent washes more or less noticeable
+
+Adjust:
+
+- `--color-accent-soft`
+
+### Change the visual personality of the profile ring
+
+Adjust:
+
+- `--color-primary-1`
+- `--color-primary-2`
+- `--color-primary-3`
+
+---
+
+## Practical Rule Of Thumb
+
+Use this mental model:
+
+```text
+canvas           = app/page background
+surface          = primary panel or card
+surface-muted    = quieter secondary panel
+surface-hover    = solid hover state
+border           = normal edge
+border-strong    = stronger shell edge or divider
+accent-soft      = subtle tinted wash
+primary-1/2/3    = decorative multi-color accents
+```
+
+If you are unsure where to start, tune these in this order:
+
+1. `--color-canvas`
+2. `--color-surface`
+3. `--color-surface-muted`
+4. `--color-border`
+5. `--color-border-strong`
+6. `--color-accent-soft`
+
+That usually gives the biggest visual shift with the fewest unintended side effects.

Env/.env.example

@@ -6,7 +6,6 @@ LOG_LEVEL=debug
 
 BACKEND_WEB_PORT=8080
 BACKEND_API_PORT=8081
-BACKEND_WORKER_PORT=8082
 BACKEND_SHUTDOWN_TIMEOUT=10s
 
 DATABASE_URL=postgres://moku:moku_dev_password@localhost:5432/moku?sslmode=disable

Frontend/public/themes/moku-default.json

@@ -134,6 +134,9 @@
 					"accentStrong": "var(--blue-600)",
 					"accentSoft": "hsl(218 88% 61% / 0.12)",
 					"accentContrast": "hsl(0 0% 100%)",
+					"primaryOne": "var(--blue-500)",
+					"primaryTwo": "hsl(271 72% 60%)",
+					"primaryThree": "hsl(192 76% 48%)",
 					"success": "var(--green-500)",
 					"danger": "var(--red-500)",
 					"warning": "var(--amber-500)",
@@ -155,6 +158,9 @@
 					"accentStrong": "hsl(218 88% 61%)",
 					"accentSoft": "hsl(217 91% 67% / 0.18)",
 					"accentContrast": "hsl(220 28% 10%)",
+					"primaryOne": "hsl(217 91% 67%)",
+					"primaryTwo": "hsl(272 80% 70%)",
+					"primaryThree": "hsl(190 84% 62%)",
 					"success": "hsl(154 55% 48%)",
 					"danger": "hsl(0 72% 62%)",
 					"warning": "hsl(36 100% 60%)",

Frontend/public/themes/moku-midnight.json

@@ -0,0 +1,177 @@
+{
+	"schemaVersion": "1.0.0",
+	"id": "moku-midnight",
+	"name": "Moku Midnight",
+	"description": "A warm, low-light Moku theme inspired by the mood and palette direction of refact0r's Midnight Discord theme, adapted to Moku's token schema.",
+	"author": "Moku Work",
+	"tokens": {
+		"shared": {
+			"palette": {
+				"gray": {
+					"0": "#f9f5d7",
+					"50": "#fbf1c7",
+					"100": "#ebdbb2",
+					"200": "#d5c4a1",
+					"300": "#bdae93",
+					"400": "#a89984",
+					"500": "#928374",
+					"600": "#7c6f64",
+					"700": "#665c54",
+					"800": "#3c3836",
+					"900": "#282828"
+				},
+				"blue": {
+					"400": "hsl(167 24% 68%)",
+					"500": "#7caea3",
+					"600": "hsl(167 24% 48%)"
+				},
+				"green": {
+					"500": "#a8b665"
+				},
+				"red": {
+					"500": "#ea6962"
+				},
+				"amber": {
+					"500": "#d8a656"
+				}
+			},
+			"space": {
+				"1": "0.25rem",
+				"2": "0.5rem",
+				"3": "0.75rem",
+				"4": "1rem",
+				"5": "1.25rem",
+				"6": "1.5rem",
+				"8": "2rem",
+				"10": "2.5rem",
+				"12": "3rem"
+			},
+			"radius": {
+				"sm": "0.375rem",
+				"md": "0.625rem",
+				"lg": "0.875rem",
+				"xl": "1.25rem",
+				"pill": "999px"
+			},
+			"size": {
+				"controlMd": "2.25rem",
+				"controlLg": "2.5rem",
+				"contentWidthWide": "72rem",
+				"blurOverlay": "18px"
+			},
+			"shadow": {
+				"soft": "0 12px 28px hsl(28 16% 12% / 0.08)",
+				"strong": "0 18px 40px hsl(28 18% 10% / 0.14)"
+			},
+			"zIndex": {
+				"base": "1",
+				"dropdown": "100",
+				"sticky": "200",
+				"overlay": "400",
+				"modal": "500",
+				"toast": "600"
+			},
+			"motion": {
+				"durationFast": "140ms",
+				"durationBase": "220ms",
+				"durationSlow": "320ms",
+				"easeStandard": "cubic-bezier(0.2, 0.8, 0.2, 1)"
+			},
+			"typography": {
+				"fontFamily": {
+					"sans": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+					"heading": "Inter, \"Avenir Next\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+					"display": "Inter, \"Avenir Next\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+					"serif": "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif",
+					"mono": "ui-monospace, \"SF Mono\", \"SFMono-Regular\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace"
+				},
+				"fontSize": {
+					"caption": "0.75rem",
+					"label": "0.875rem",
+					"body": "1rem",
+					"title": "clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem)",
+					"heading": "clamp(1.5rem, 1.2rem + 1vw, 2.125rem)",
+					"display": "clamp(2.25rem, 1.7rem + 2.2vw, 3.75rem)"
+				},
+				"lineHeight": {
+					"caption": "1.4",
+					"label": "1.35",
+					"body": "1.55",
+					"title": "1.3",
+					"heading": "1.15",
+					"display": "1.05"
+				},
+				"fontWeight": {
+					"caption": "500",
+					"label": "600",
+					"body": "400",
+					"title": "600",
+					"heading": "600",
+					"display": "700"
+				},
+				"letterSpacing": {
+					"caption": "0.01em",
+					"label": "0.005em",
+					"body": "0",
+					"title": "-0.01em",
+					"heading": "-0.02em",
+					"display": "-0.03em"
+				}
+			}
+		},
+		"modes": {
+			"light": {
+				"colorScheme": "light",
+				"colors": {
+					"canvas": "hsl(38 24% 97%)",
+					"surface": "hsl(36 22% 99% / 0.94)",
+					"surfaceMuted": "hsl(36 20% 96%)",
+					"surfaceHover": "hsl(34 18% 93%)",
+					"border": "hsl(30 14% 76% / 0.72)",
+					"borderStrong": "hsl(28 16% 60% / 0.82)",
+					"text": "hsl(22 16% 22%)",
+					"textMuted": "hsl(28 10% 42%)",
+					"accent": "#d3869b",
+					"accentStrong": "hsl(344 47% 56%)",
+					"accentSoft": "hsl(344 47% 70% / 0.12)",
+					"accentContrast": "var(--gray-0)",
+					"primaryOne": "#7caea3",
+					"primaryTwo": "#d3869b",
+					"primaryThree": "#d8a656",
+					"success": "#a8b665",
+					"danger": "#ea6962",
+					"warning": "#d8a656",
+					"focusRing": "hsl(344 47% 56% / 0.28)"
+				}
+			},
+			"dark": {
+				"colorScheme": "dark",
+				"colors": {
+					"canvas": "var(--gray-900)",
+					"surface": "hsl(20 8% 16% / 0.94)",
+					"surfaceMuted": "var(--gray-800)",
+					"surfaceHover": "hsl(22 9% 24% / 0.96)",
+					"border": "hsl(20 10% 30% / 0.72)",
+					"borderStrong": "hsl(30 14% 55% / 0.62)",
+					"text": "#d4be98",
+					"textMuted": "#a79a83",
+					"accent": "#d3869b",
+					"accentStrong": "hsl(344 47% 63%)",
+					"accentSoft": "hsl(344 47% 63% / 0.18)",
+					"accentContrast": "var(--gray-900)",
+					"primaryOne": "#7caea3",
+					"primaryTwo": "#d3869b",
+					"primaryThree": "#d8a656",
+					"success": "#a8b665",
+					"danger": "#ea6962",
+					"warning": "#d8a656",
+					"focusRing": "hsl(344 47% 63% / 0.45)"
+				},
+				"shadow": {
+					"soft": "0 14px 32px hsl(20 16% 3% / 0.28)",
+					"strong": "0 20px 48px hsl(20 16% 2% / 0.38)"
+				}
+			}
+		}
+	}
+}

Frontend/src/app.tsx

@@ -3,6 +3,7 @@
 import type { JSX } from "solid-js";
 import { AppShell } from "./components/shell/AppShell/AppShell";
 import "./styles/main.scss";
+import "./styles/user-overrides.scss";
 
 const App = (): JSX.Element => {
 	return <AppShell />;

Frontend/src/components/shell/AppShell/AppShell.module.scss

@@ -8,13 +8,16 @@
 }
 
 .body {
+  --shell-dock-clearance: calc(var(--space-12) + var(--space-12) + var(--space-8));
   --rail-width: 4.75rem;
   --sidebar-width: 16.75rem;
+  --mobile-bottom-nav-clearance: 0rem;
   --shell-top-left-radius: calc(var(--radius-xl) + var(--space-1));
   --shell-frame-border: color-mix(in srgb, var(--color-border-strong) 44%, transparent);
   --shell-divider-border: color-mix(in srgb, var(--color-border-strong) 34%, transparent);
   --sidebar-panel-surface: color-mix(in srgb, var(--color-surface-muted) 92%, transparent);
   --workspace-panel-surface: color-mix(in srgb, var(--color-canvas) 94%, var(--color-surface));
+  position: relative;
   min-height: 0;
   display: grid;
   grid-template-columns: var(--rail-width) minmax(0, 1fr);
@@ -22,11 +25,21 @@
   background: var(--color-surface);
 }
 
+.bodyRailCollapsed {
+  --rail-width: 0rem;
+}
+
+.bodySidebarCollapsed {
+  --sidebar-width: 0rem;
+}
+
 .railColumn {
   min-height: 0;
   display: flex;
   position: relative;
-  z-index: 1;
+  z-index: 6;
+  isolation: isolate;
+  overflow: visible;
   background: var(--color-surface);
 }
 
@@ -90,11 +103,22 @@
   border-top-right-radius: 0;
 }
 
+.mobileWorkspaceView {
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  display: grid;
+  box-sizing: border-box;
+  overflow: hidden;
+  background: var(--workspace-panel-surface);
+}
+
 .sidebarDock {
   position: absolute;
-  right: var(--space-1);
   bottom: var(--space-3);
-  left: calc(var(--space-1) - (var(--rail-width) * 0.9));
+  left: calc(var(--space-1) + (var(--rail-width) * 0.1));
+  width: max(12rem, calc(var(--sidebar-width) + (var(--rail-width) * 0.9) - var(--space-2)));
+  right: auto;
   z-index: calc(var(--z-modal) + 1);
   pointer-events: none;
 
@@ -108,6 +132,14 @@
     --rail-width: 5rem;
     --sidebar-width: 17.25rem;
   }
+
+  .bodyRailCollapsed {
+    --rail-width: 0rem;
+  }
+
+  .bodySidebarCollapsed {
+    --sidebar-width: 0rem;
+  }
 }
 
 @include respond-down(tablet) {
@@ -115,21 +147,102 @@
     --rail-width: 4.5rem;
     --sidebar-width: 13.25rem;
   }
+
+  .bodyRailCollapsed {
+    --rail-width: 0rem;
+  }
+
+  .bodySidebarCollapsed {
+    --sidebar-width: 0rem;
+  }
+}
+
+.bodyRailCollapsed .railColumn {
+  overflow: hidden;
+}
+
+.bodySidebarCollapsed .railColumn {
+  --rail-dock-clearance: 0rem;
+}
+
+.bodySidebarCollapsed:not(.bodyRailCollapsed) .railColumn {
+  --rail-bottom-offset: var(--space-3);
+}
+
+.bodySidebarCollapsed .sidebarColumn {
+  --sidebar-dock-clearance: 0rem;
+  display: none;
+  overflow: hidden;
+  border-left-width: 0;
+  border-top-width: 0;
+}
+
+.bodySidebarCollapsed .workspaceRegion {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.bodySidebarCollapsed .workspaceMain {
+  border-left-color: transparent;
+}
+
+.bodySidebarCollapsed:not(.bodyRailCollapsed) .workspaceMain {
+  border-top-width: 1px;
+  border-top-color: var(--shell-frame-border);
+  border-left-color: var(--shell-frame-border);
+  border-top-left-radius: var(--shell-top-left-radius);
+  box-shadow: none;
+}
+
+.bodySidebarCollapsed:not(.bodyRailCollapsed) .workspaceRegion::before {
+  display: none;
+}
+
+.bodySidebarCollapsed .sidebarDock {
+  display: none;
 }
 
 @include respond-down(mobile) {
   .body {
-    grid-template-columns: 4.5rem minmax(0, 1fr);
-    --rail-width: 4.5rem;
+    grid-template-columns: minmax(0, 1fr);
+    --rail-width: 0rem;
+    --sidebar-width: 0rem;
+    --mobile-bottom-nav-clearance: calc(var(--space-12) + var(--space-10) + env(safe-area-inset-bottom, 0px));
   }
 
   .railColumn {
-    position: sticky;
-    top: 0;
+    display: none;
   }
 
-  .workspaceRegion,
+  .workspaceRegion {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    border-top-left-radius: 0;
+  }
+
+  .workspaceRegion::before {
+    background: var(--workspace-panel-surface);
+    border-left-width: 0;
+    border-right-width: 0;
+    border-top-left-radius: 0;
+  }
+
+  .sidebarColumn,
   .sidebarDock {
     display: none;
   }
+
+  .workspaceMain {
+    border-left-width: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    box-sizing: border-box;
+    padding-bottom: var(--mobile-bottom-nav-clearance);
+  }
+
+  .mobileWorkspaceView {
+    height: 100%;
+    max-height: none;
+    padding-bottom: 0;
+    background: var(--workspace-panel-surface);
+  }
 }

Frontend/src/components/shell/AppShell/AppShell.tsx

@@ -1,19 +1,52 @@
 // Path: Frontend/src/components/shell/AppShell/AppShell.tsx
 
-import { createSignal, onMount, type JSX } from "solid-js";
+import { createSignal, onCleanup, onMount, Show, type JSX } from "solid-js";
 import { getDocumentTheme, setTheme, type Theme } from "../../../theme/runtime";
 import { WorkspaceHome } from "../../workspace-home/WorkspaceHome/WorkspaceHome";
 import { LeftRail } from "../LeftRail/LeftRail";
+import { MobileBottomNav } from "../MobileBottomNav/MobileBottomNav";
+import { MobileWorkspaceBrowser } from "../MobileWorkspaceBrowser/MobileWorkspaceBrowser";
 import { ServerDock } from "../ServerDock/ServerDock";
+import { NotificationsMenu } from "../TopBar/NotificationsMenu";
+import { ProfileMenu } from "../TopBar/ProfileMenu";
 import { TopBar } from "../TopBar/TopBar";
 import { WorkspaceSidebar } from "../WorkspaceSidebar/WorkspaceSidebar";
 import styles from "./AppShell.module.scss";
 
+type MobileWorkspaceView = "notifications" | "profile" | null;
+const MOBILE_VIEWPORT_QUERY = "(max-width: 48rem)";
+
 export const AppShell = (): JSX.Element => {
 	const [themeState, setThemeState] = createSignal<Theme>("light");
+	const [isRailCollapsed, setIsRailCollapsed] = createSignal(false);
+	const [isSidebarCollapsed, setIsSidebarCollapsed] = createSignal(false);
+	const [isMobileViewport, setIsMobileViewport] = createSignal(false);
+	const [isMobileWorkspaceBrowserOpen, setIsMobileWorkspaceBrowserOpen] = createSignal(false);
+	const [activeMobileWorkspaceView, setActiveMobileWorkspaceView] = createSignal<MobileWorkspaceView>(null);
 
 	onMount((): void => {
 		setThemeState(getDocumentTheme());
+
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+			return;
+		}
+
+		const mediaQuery = window.matchMedia(MOBILE_VIEWPORT_QUERY);
+		const syncMobileViewport = (): void => {
+			setIsMobileViewport(mediaQuery.matches);
+
+			if (!mediaQuery.matches) {
+				setIsMobileWorkspaceBrowserOpen(false);
+				setActiveMobileWorkspaceView(null);
+			}
+		};
+
+		syncMobileViewport();
+		mediaQuery.addEventListener("change", syncMobileViewport);
+
+		onCleanup(() => {
+			mediaQuery.removeEventListener("change", syncMobileViewport);
+		});
 	});
 
 	const toggleTheme = (): void => {
@@ -23,28 +56,110 @@ export const AppShell = (): JSX.Element => {
 		setThemeState(next);
 	};
 
+	const openMobileWorkspaceView = (view: Exclude<MobileWorkspaceView, null>): void => {
+		setIsMobileWorkspaceBrowserOpen(false);
+		setActiveMobileWorkspaceView((current) => (current === view ? null : view));
+	};
+
+	const toggleMobileWorkspaceBrowser = (): void => {
+		setActiveMobileWorkspaceView(null);
+		setIsMobileWorkspaceBrowserOpen((open) => !open);
+	};
+
+	const toggleMobileNotifications = (): void => {
+		openMobileWorkspaceView("notifications");
+	};
+
+	const toggleMobileProfile = (): void => {
+		openMobileWorkspaceView("profile");
+	};
+
+	const closeMobileWorkspaceView = (): void => {
+		setActiveMobileWorkspaceView(null);
+	};
+
 	return (
-		<div class={styles.shell}>
-			<TopBar theme={themeState()} onToggleTheme={toggleTheme} />
-			<div class={styles.body}>
-				<div class={styles.railColumn}>
-					<LeftRail />
+		<div class={styles.shell} data-ui="app-shell">
+			<TopBar
+				theme={themeState()}
+				onToggleTheme={toggleTheme}
+				isMobileViewport={isMobileViewport()}
+				isNotificationsOpen={activeMobileWorkspaceView() === "notifications"}
+				isProfileOpen={activeMobileWorkspaceView() === "profile"}
+				onToggleNotifications={toggleMobileNotifications}
+				onToggleProfile={toggleMobileProfile}
+			/>
+
+			<div
+				classList={{
+					[styles.body]: true,
+					[styles.bodyRailCollapsed]: isRailCollapsed(),
+					[styles.bodySidebarCollapsed]: isSidebarCollapsed(),
+				}}
+				data-slot="shell-body"
+				data-rail-collapsed={isRailCollapsed() ? "true" : "false"}
+				data-sidebar-collapsed={isSidebarCollapsed() ? "true" : "false"}
+			>
+				{/* Left server rail */}
+				<div class={styles.railColumn} data-slot="rail-column">
+					<LeftRail collapsed={isRailCollapsed()} />
 				</div>
 
-				<div class={styles.workspaceRegion}>
-					<div class={styles.sidebarColumn}>
-						<WorkspaceSidebar />
-
-						<div class={styles.sidebarDock}>
-							<ServerDock />
-						</div>
+				{/* Sidebar + main workspace frame */}
+				<div class={styles.workspaceRegion} data-slot="workspace-region">
+					<div class={styles.sidebarColumn} data-slot="sidebar-column">
+						<WorkspaceSidebar
+							collapsed={isSidebarCollapsed()}
+							railCollapsed={isRailCollapsed()}
+							onToggleRailCollapse={(): void => {
+								setIsRailCollapsed((collapsed) => !collapsed);
+							}}
+						/>
 					</div>
 
-					<div class={styles.workspaceMain}>
-						<WorkspaceHome />
+					<div class={styles.workspaceMain} data-slot="workspace-main">
+						{/* On mobile, top-bar menus become full workspace views instead of popovers. */}
+						<Show
+							when={isMobileViewport() && activeMobileWorkspaceView() !== null}
+							fallback={
+								<WorkspaceHome
+									sidebarCollapsed={isSidebarCollapsed()}
+									onToggleSidebarCollapse={(): void => {
+										setIsSidebarCollapsed((collapsed) => !collapsed);
+									}}
+								/>
+							}
+						>
+							<div class={styles.mobileWorkspaceView} data-slot="mobile-workspace-view" data-view={activeMobileWorkspaceView() ?? undefined}>
+								<Show when={activeMobileWorkspaceView() === "notifications"}>
+									<NotificationsMenu id="mobile-workspace-notifications" onSelect={closeMobileWorkspaceView} variant="workspace" />
+								</Show>
+								<Show when={activeMobileWorkspaceView() === "profile"}>
+									<ProfileMenu id="mobile-workspace-profile" onSelect={closeMobileWorkspaceView} variant="workspace" />
+								</Show>
+							</div>
+						</Show>
 					</div>
 				</div>
+
+				{/* Floating server dock overlay */}
+				<div class={styles.sidebarDock} data-slot="sidebar-dock">
+					<ServerDock />
+				</div>
 			</div>
+
+			<MobileBottomNav
+				isBrowseOpen={isMobileWorkspaceBrowserOpen()}
+				onBrowseToggle={(): void => {
+					toggleMobileWorkspaceBrowser();
+				}}
+			/>
+			<MobileWorkspaceBrowser
+				open={isMobileWorkspaceBrowserOpen()}
+				onClose={(): void => {
+					setIsMobileWorkspaceBrowserOpen(false);
+				}}
+			/>
 		</div>
 	);
 };

Frontend/src/components/shell/DepartmentSelector/DepartmentSelector.module.scss

@@ -0,0 +1,221 @@
+.root {
+  position: relative;
+  min-width: 0;
+}
+
+.selector {
+  min-width: 0;
+  padding: 0;
+  display: inline-flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+  gap: var(--space-2);
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  text-align: left;
+  transition:
+    background-color 180ms var(--easing-standard),
+    color 180ms var(--easing-standard);
+}
+
+.selectorOpen {
+  .meta,
+  .icon {
+    color: var(--color-text-subtle);
+  }
+}
+
+.selector:hover {
+  .value {
+    color: var(--color-text);
+  }
+
+  .meta,
+  .icon {
+    color: var(--color-text-subtle);
+  }
+}
+
+.selector:focus-visible {
+  outline: none;
+  border-radius: var(--radius-sm);
+  box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-soft) 14%, transparent);
+}
+
+.copy {
+  min-width: 0;
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--space-1);
+}
+
+.value {
+  @include text-title;
+  color: var(--color-text);
+  font-weight: var(--font-weight-title);
+  line-height: 1;
+}
+
+.meta {
+  @include text-caption;
+  color: var(--color-text-muted);
+  line-height: 1;
+  padding-left: var(--space-1);
+}
+
+.icon {
+  flex: 0 0 auto;
+  color: var(--color-text-muted);
+  transition: transform 180ms var(--easing-standard), color 180ms var(--easing-standard);
+}
+
+.iconOpen {
+  transform: rotate(180deg);
+}
+
+.menu {
+  position: absolute;
+  top: calc(100% + var(--space-2));
+  left: 0;
+  min-width: min(18rem, calc(100vw - (var(--space-4) * 2)));
+  display: grid;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-muted);
+  box-shadow: 0 16px 32px color-mix(in srgb, black 18%, transparent);
+  z-index: 20;
+}
+
+.menuSection {
+  display: grid;
+  gap: calc(var(--space-1) / 2);
+}
+
+.menuSectionLabel {
+  @include text-caption;
+  display: block;
+  color: var(--color-text-muted);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  padding-inline: var(--space-1);
+  margin-bottom: var(--space-2);
+}
+
+.menuDivider {
+  height: 1px;
+  background: var(--color-border);
+}
+
+.menuItem {
+  min-width: 0;
+  min-height: 2.75rem;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--space-2) var(--space-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-muted);
+  color: var(--color-text);
+  text-align: left;
+  transition:
+    background-color 160ms var(--easing-standard),
+    border-color 160ms var(--easing-standard);
+}
+
+.menuItem:hover {
+  border-color: var(--color-border);
+  background: var(--color-surface);
+}
+
+.menuItemActive {
+  border-color: var(--color-accent-soft);
+  background: var(--color-surface);
+}
+
+.menuItemCopy {
+  min-width: 0;
+  display: grid;
+  gap: 0;
+}
+
+.menuItemValue {
+  @include text-label;
+  color: var(--color-text);
+  font-weight: var(--font-weight-semibold);
+}
+
+.menuItemMeta {
+  @include text-caption;
+  color: var(--color-text-muted);
+}
+
+.submenuItem {
+  min-width: 0;
+  min-height: 2.5rem;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-muted);
+  color: var(--color-text);
+  text-align: left;
+  transition:
+    background-color 160ms var(--easing-standard),
+    border-color 160ms var(--easing-standard);
+}
+
+.submenuItem:hover {
+  border-color: var(--color-border);
+  background: var(--color-surface);
+}
+
+.submenuItemActive {
+  border-color: var(--color-accent-soft);
+  background: var(--color-surface);
+}
+
+.submenuIndicator {
+  width: calc(var(--space-1) + (var(--space-1) / 2));
+  height: calc(var(--space-1) + (var(--space-1) / 2));
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: var(--color-accent-soft);
+}
+
+@include respond-down(mobile) {
+  .selector {
+    align-items: flex-end;
+    gap: var(--space-1);
+  }
+
+  .copy {
+    gap: var(--space-2);
+  }
+
+  .value {
+    line-height: 0.95;
+  }
+
+  .meta {
+    font-size: 0.68rem;
+    line-height: 1;
+    letter-spacing: 0.01em;
+    padding-bottom: calc(var(--space-1) / 2);
+  }
+
+  .icon {
+    align-self: flex-end;
+    margin-bottom: calc(var(--space-1) / 2);
+  }
+
+  .menu {
+    min-width: min(16rem, calc(100vw - (var(--space-4) * 2)));
+  }
+}

Frontend/src/components/shell/DepartmentSelector/DepartmentSelector.tsx

@@ -0,0 +1,113 @@
+import { For, createSignal, onCleanup, onMount, type JSX } from "solid-js";
+import { ChevronDown } from "../../../lib/icons";
+import { activeDepartment, departmentItems, type DepartmentItem } from "../data/shell.data";
+import styles from "./DepartmentSelector.module.scss";
+
+const defaultDepartment = departmentItems.find((item) => item.id === activeDepartment.id) ?? departmentItems[0];
+const defaultTeamName = departmentItems
+	.find((item) => item.id === activeDepartment.id)
+	?.teams.find((teamName) => teamName === activeDepartment.teamName)
+	?? defaultDepartment?.teams[0]
+	?? "";
+
+export const DepartmentSelector = (): JSX.Element => {
+	const [isOpen, setIsOpen] = createSignal(false);
+	const [selectedDepartment, setSelectedDepartment] = createSignal<DepartmentItem>(defaultDepartment);
+	const [selectedTeamName, setSelectedTeamName] = createSignal(defaultTeamName);
+
+	let rootRef: HTMLDivElement | undefined;
+
+	onMount(() => {
+		const handlePointerDown = (event: PointerEvent): void => {
+			if (!isOpen()) return;
+			if (!rootRef) return;
+
+			const target = event.target;
+			if (target instanceof Node && !rootRef.contains(target)) {
+				setIsOpen(false);
+			}
+		};
+
+		document.addEventListener("pointerdown", handlePointerDown);
+		onCleanup(() => document.removeEventListener("pointerdown", handlePointerDown));
+	});
+
+	const selectDepartment = (item: DepartmentItem): void => {
+		setSelectedDepartment(item);
+		setSelectedTeamName(item.teams[0] ?? "");
+	};
+
+	const selectTeam = (teamName: string): void => {
+		setSelectedTeamName(teamName);
+		setIsOpen(false);
+	};
+
+	return (
+		<div class={styles.root} ref={rootRef}>
+			<button
+				classList={{ [styles.selector]: true, [styles.selectorOpen]: isOpen() }}
+				type="button"
+				aria-label="Select department"
+				title="Select department"
+				aria-haspopup="menu"
+				aria-expanded={isOpen()}
+				onClick={() => setIsOpen((open) => !open)}
+			>
+				<span class={styles.copy}>
+					<strong class={styles.value}>{selectedDepartment().name}</strong>
+					<span class={styles.meta}>{selectedTeamName()}</span>
+				</span>
+
+				<ChevronDown classList={{ [styles.icon]: true, [styles.iconOpen]: isOpen() }} size={16} strokeWidth={2} />
+			</button>
+
+			{isOpen() ? (
+				<div class={styles.menu} role="menu" aria-label="Department selector menu">
+					<div class={styles.menuSection}>
+						<span class={styles.menuSectionLabel}>Departments</span>
+
+						<For each={departmentItems}>
+							{(item): JSX.Element => (
+								<button
+									classList={{ [styles.menuItem]: true, [styles.menuItemActive]: item.id === selectedDepartment().id }}
+									type="button"
+									role="menuitemradio"
+									aria-checked={item.id === selectedDepartment().id}
+									onClick={() => selectDepartment(item)}
+								>
+									<div class={styles.menuItemCopy}>
+										<strong class={styles.menuItemValue}>{item.name}</strong>
+										<span class={styles.menuItemMeta}>{item.teams.length} teams</span>
+									</div>
+								</button>
+							)}
+						</For>
+					</div>
+
+					<div class={styles.menuDivider} aria-hidden="true" />
+
+					<div class={styles.menuSection}>
+						<span class={styles.menuSectionLabel}>Teams in {selectedDepartment().name}</span>
+
+						<For each={selectedDepartment().teams}>
+							{(teamName): JSX.Element => (
+								<button
+									classList={{ [styles.submenuItem]: true, [styles.submenuItemActive]: teamName === selectedTeamName() }}
+									type="button"
+									role="menuitemradio"
+									aria-checked={teamName === selectedTeamName()}
+									onClick={() => selectTeam(teamName)}
+								>
+									<span class={styles.submenuIndicator} aria-hidden="true" />
+									<div class={styles.menuItemCopy}>
+										<strong class={styles.menuItemValue}>{teamName}</strong>
+									</div>
+								</button>
+							)}
+						</For>
+					</div>
+				</div>
+			) : null}
+		</div>
+	);
+};

Frontend/src/components/shell/LeftRail/LeftRail.module.scss

@@ -1,18 +1,26 @@
 .rail {
   --rail-workspace-size: var(--control-size-lg);
-  --rail-action-size: var(--control-size-md);
+  position: relative;
+  z-index: 3;
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-3);
-  padding: var(--space-3) var(--space-2);
-  overflow: hidden;
+  padding: var(--space-3) var(--space-2) calc(var(--space-3) + var(--rail-dock-clearance, var(--shell-dock-clearance)));
+  overflow: visible;
 }
 
-.topCluster,
-.bottomCluster {
+.railCollapsed {
+  --rail-workspace-size: calc(var(--control-size-md) + 0.1rem);
+  justify-content: flex-start;
+  gap: 0;
+  padding-top: var(--space-4);
+  padding-inline: var(--space-1);
+}
+
+.topCluster {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -20,6 +28,18 @@
   gap: var(--space-2);
 }
 
+.topCluster {
+  gap: var(--space-3);
+}
+
+.railCollapsed .topCluster {
+  gap: var(--space-3);
+}
+
+.railCollapsed .topCluster {
+  align-items: center;
+}
+
 .items {
   width: 100%;
   min-height: 0;
@@ -28,22 +48,101 @@
   flex-direction: column;
   align-items: center;
   gap: var(--space-2);
-  overflow-y: auto;
-  overscroll-behavior: contain;
+  overflow: visible;
   padding-block: var(--space-1);
 }
 
-.logo {
-  width: var(--rail-workspace-size);
-  height: var(--rail-workspace-size);
+.itemSlot {
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  overflow: visible;
+}
+
+.itemSlot:hover,
+.itemSlot:focus-within,
+.itemSlotActive {
+  z-index: 12;
+}
+
+.activeIndicator {
+  position: absolute;
+  left: calc(50% - (var(--rail-workspace-size) / 2) - var(--space-2));
+  top: 50%;
+  width: 0.26rem;
+  height: 0.55rem;
+  border-radius: var(--radius-pill);
+  background: hsl(0 0% 100% / 0.94);
+  transform: translateY(-50%) scaleY(0.72);
+  transform-origin: center;
+  opacity: 0;
+  z-index: 2;
+  transition:
+    opacity 140ms var(--easing-standard),
+    height 180ms var(--easing-standard),
+    transform 180ms var(--easing-standard);
+}
+
+.itemSlot:hover .activeIndicator {
+  opacity: 1;
+  height: 1.1rem;
+  transform: translateY(-50%) scaleY(1);
+}
+
+.itemSlotActive .activeIndicator {
+  opacity: 1;
+  height: 2.1rem;
+  transform: translateY(-50%) scaleY(1);
+}
+
+.hoverLabel {
+  position: absolute;
+  left: calc(100% + var(--space-3));
+  top: 50%;
+  z-index: 8;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-lg);
-  background: var(--color-accent);
-  color: var(--color-accent-contrast);
-  font-weight: 700;
-  letter-spacing: -0.02em;
+  min-height: 2rem;
+  padding: 0 var(--space-3);
+  border: 1px solid color-mix(in srgb, var(--color-border-strong) 52%, transparent);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-muted);
+  color: var(--color-text);
+  white-space: nowrap;
+  box-shadow: 0 12px 28px color-mix(in srgb, black 16%, transparent);
+  @include text-label;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(-50%) translateX(calc(var(--space-2) * -1));
+  transition:
+    opacity 140ms var(--easing-standard),
+    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.hoverLabel::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: calc(var(--space-2) * -1);
+  width: 0.7rem;
+  height: 0.7rem;
+  border-left: 1px solid color-mix(in srgb, var(--color-border-strong) 52%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--color-border-strong) 52%, transparent);
+  background: var(--color-surface-muted);
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.sectionDivider {
+  width: calc(var(--rail-workspace-size) - var(--space-2));
+  height: 1px;
+  border-radius: var(--radius-pill);
+  background: color-mix(in srgb, var(--color-border-strong) 58%, transparent);
+}
+
+.itemSlot:hover .hoverLabel {
+  opacity: 1;
+  transform: translateY(-50%) translateX(0);
 }
 
 .workspaceButton {
@@ -55,28 +154,31 @@
   @include interactive-frame(var(--color-surface-muted), var(--color-border), var(--color-text-muted), var(--radius-lg));
   @include text-label;
   @include interactive-frame-hover();
+  transition:
+    border-radius 180ms var(--easing-standard),
+    background 180ms var(--easing-standard),
+    color 180ms var(--easing-standard),
+    transform 180ms var(--easing-standard);
+}
+
+.personalButton {
+  background: var(--color-accent);
+  border-color: transparent;
+  color: var(--color-accent-contrast);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.itemSlot:hover .workspaceButton,
+.itemSlot:focus-within .workspaceButton {
+  border-radius: var(--radius-md);
+  transform: translateY(-1px);
 }
 
 .workspaceButtonActive {
   background: var(--color-accent);
   border-color: transparent;
   color: var(--color-accent-contrast);
-  box-shadow: var(--shadow-soft);
-}
-
-.addButton {
-  width: var(--rail-action-size);
-  height: var(--rail-action-size);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px dashed var(--color-border-strong);
-  border-radius: var(--radius-pill);
-  background: transparent;
-  color: var(--color-text-muted);
-
-  &:hover {
-    background: var(--color-surface-hover);
-    color: var(--color-text);
-  }
+  border-radius: var(--radius-md);
+  box-shadow: none;
 }

Frontend/src/components/shell/LeftRail/LeftRail.tsx

@@ -1,42 +1,81 @@
 // Path: Frontend/src/components/shell/LeftRail/LeftRail.tsx
 
-import { For, type JSX } from "solid-js";
-import { Plus } from "../../../lib/icons";
-import { railItems } from "../data/shell.data";
+import { For, Show, type JSX } from "solid-js";
+import { railItems, type RailItem } from "../data/shell.data";
 import styles from "./LeftRail.module.scss";
 
-export const LeftRail = (): JSX.Element => {
+type RailEntryProps = {
+	item: RailItem;
+	label: string;
+	abbreviation: string;
+	personal?: boolean;
+};
+
+const RailEntry = (props: RailEntryProps): JSX.Element => {
 	return (
-		<aside class={styles.rail} aria-label="Workspace rail">
+		<div
+			classList={{
+				[styles.itemSlot]: true,
+				[styles.itemSlotActive]: !!props.item.active,
+			}}
+		>
+			<span class={styles.activeIndicator} aria-hidden="true" />
+
+			<button
+				type="button"
+				classList={{
+					[styles.workspaceButton]: true,
+					[styles.workspaceButtonActive]: !!props.item.active,
+					[styles.personalButton]: !!props.personal,
+				}}
+				aria-label={props.label}
+				title={props.label}
+			>
+				{props.abbreviation}
+			</button>
+
+			<span class={styles.hoverLabel} role="presentation">
+				{props.label}
+			</span>
+		</div>
+	);
+};
+
+type LeftRailProps = {
+	collapsed: boolean;
+};
+
+export const LeftRail = (props: LeftRailProps): JSX.Element => {
+	const personalItem = railItems.find((item) => item.kind === "personal");
+	const organizationItems = railItems.filter((item) => item.kind === "organization");
+
+	return (
+		<aside
+			classList={{
+				[styles.rail]: true,
+				[styles.railCollapsed]: props.collapsed,
+			}}
+			aria-label="Server rail"
+		>
 			<div class={styles.topCluster}>
-				<div class={styles.logo} aria-hidden="true">
-					M
-				</div>
-			</div>
-
-			<div class={styles.items}>
-				<For each={railItems}>
+				<Show when={!props.collapsed && personalItem}>
 					{(item): JSX.Element => (
-						<button
-							type="button"
-							classList={{
-								[styles.workspaceButton]: true,
-								[styles.workspaceButtonActive]: !!item.active,
-							}}
-							title={item.label}
-							aria-label={item.label}
-						>
-							{item.abbreviation}
-						</button>
+						<RailEntry item={item()} label={item().label} abbreviation={item().abbreviation} personal />
 					)}
-				</For>
+				</Show>
+
+				<Show when={!props.collapsed}>
+					<div class={styles.sectionDivider} aria-hidden="true" />
+				</Show>
 			</div>
 
-			<div class={styles.bottomCluster}>
-				<button type="button" class={styles.addButton} aria-label="Create workspace" title="Create workspace">
-					<Plus size={16} strokeWidth={2} />
-				</button>
-			</div>
+			<Show when={!props.collapsed}>
+				<div class={styles.items}>
+					<For each={organizationItems}>
+						{(item): JSX.Element => <RailEntry item={item} label={item.label} abbreviation={item.abbreviation} />}
+					</For>
+				</div>
+			</Show>
 		</aside>
 	);
 };

Frontend/src/components/shell/MobileBottomNav/MobileBottomNav.module.scss

@@ -0,0 +1,108 @@
+.mobileNav {
+  display: none;
+}
+
+@include respond-down(mobile) {
+  .mobileNav {
+    --mobile-nav-button-gap: var(--space-1);
+    --mobile-nav-button-padding-inline: var(--space-2);
+    --mobile-nav-button-padding-top: calc(var(--space-2) + (var(--space-1) / 2));
+    --mobile-nav-button-padding-bottom: var(--space-2);
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: grid;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
+    background:
+      linear-gradient(to top, color-mix(in srgb, var(--color-canvas) 98%, transparent), color-mix(in srgb, var(--color-canvas) 92%, transparent));
+    border-top: 1px solid color-mix(in srgb, var(--color-border-strong) 40%, transparent);
+    backdrop-filter: blur(var(--blur-overlay));
+    z-index: var(--z-sticky);
+  }
+
+  .contextBar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    min-width: 0;
+    color: var(--color-text-muted);
+  }
+
+  .contextServer,
+  .contextProject {
+    @include text-caption;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .contextServer {
+    max-width: 45vw;
+  }
+
+  .contextProject {
+    max-width: 30vw;
+  }
+
+  .contextDivider {
+    @include text-caption;
+    color: var(--color-text-subtle);
+  }
+
+	.navGrid {
+	  display: grid;
+	  grid-template-columns: repeat(3, minmax(0, 1fr));
+	  gap: var(--space-2);
+	}
+
+  .navButton {
+    min-width: 0;
+    display: grid;
+    justify-items: center;
+    gap: var(--mobile-nav-button-gap);
+    padding: var(--mobile-nav-button-padding-top) var(--mobile-nav-button-padding-inline) var(--mobile-nav-button-padding-bottom);
+    border: 1px solid transparent;
+    border-radius: var(--radius-xl);
+    background: transparent;
+    color: var(--color-text-muted);
+    transition:
+      background 160ms var(--easing-standard),
+      color 160ms var(--easing-standard),
+      border-color 160ms var(--easing-standard),
+      transform 180ms var(--easing-standard);
+  }
+
+  .navButton:hover,
+  .navButton:focus-visible {
+    color: var(--color-text);
+    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
+    border-color: color-mix(in srgb, var(--color-border-strong) 28%, transparent);
+  }
+
+  .navButton:active {
+    transform: translateY(calc(var(--space-1) / 2));
+  }
+
+  .navButtonActive {
+    color: var(--color-text);
+    background: color-mix(in srgb, var(--color-surface) 90%, transparent);
+    border-color: color-mix(in srgb, var(--color-border-strong) 34%, transparent);
+    box-shadow: var(--shadow-soft);
+  }
+
+  .iconWrap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .label {
+    @include text-caption;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

Frontend/src/components/shell/MobileBottomNav/MobileBottomNav.tsx

@@ -0,0 +1,63 @@
+// Path: Frontend/src/components/shell/MobileBottomNav/MobileBottomNav.tsx
+
+import { For, type JSX } from "solid-js";
+import { activeProject, activeServer, mobileBottomNavItems, type MobileBottomNavItem } from "../data/shell.data";
+import styles from "./MobileBottomNav.module.scss";
+
+type MobileBottomNavProps = {
+	isBrowseOpen: boolean;
+	onBrowseToggle: VoidFunction;
+};
+
+const MobileNavEntry = (props: {
+	item: MobileBottomNavItem;
+	isActive: boolean;
+	onSelect?: VoidFunction;
+}): JSX.Element => {
+	const Icon = props.item.icon;
+
+	return (
+		<button
+			type="button"
+			onClick={() => props.onSelect?.()}
+			classList={{
+				[styles.navButton]: true,
+				[styles.navButtonActive]: props.isActive,
+			}}
+			aria-current={props.isActive ? "page" : undefined}
+			aria-expanded={props.item.id === "browse" ? props.isActive : undefined}
+			aria-label={props.item.label}
+			title={props.item.label}
+		>
+			<span class={styles.iconWrap} aria-hidden="true">
+				<Icon size={18} strokeWidth={2} />
+			</span>
+
+			<span class={styles.label}>{props.item.label}</span>
+		</button>
+	);
+};
+
+export const MobileBottomNav = (props: MobileBottomNavProps): JSX.Element => {
+	return (
+		<nav class={styles.mobileNav} aria-label="Mobile workspace navigation">
+			<div class={styles.contextBar}>
+				<span class={styles.contextServer}>{activeServer.name}</span>
+				<span class={styles.contextDivider}>/</span>
+				<span class={styles.contextProject}>{activeProject.name}</span>
+			</div>
+
+			<div class={styles.navGrid}>
+				<For each={mobileBottomNavItems}>
+					{(item): JSX.Element => (
+						<MobileNavEntry
+							item={item}
+							isActive={item.id === "browse" ? props.isBrowseOpen : (item.active ?? false) && !props.isBrowseOpen}
+							onSelect={item.id === "browse" ? props.onBrowseToggle : undefined}
+						/>
+					)}
+				</For>
+			</div>
+		</nav>
+	);
+};

Frontend/src/components/shell/MobileWorkspaceBrowser/MobileWorkspaceBrowser.module.scss

@@ -0,0 +1,190 @@
+.browserLayer {
+  display: none;
+}
+
+@include respond-down(mobile) {
+  .browserLayer {
+    position: fixed;
+    inset: 0;
+    display: grid;
+    z-index: calc(var(--z-popover, 20) + 2);
+    background: color-mix(in srgb, var(--color-canvas) 96%, black 4%);
+  }
+
+	.sheet {
+    min-height: 100dvh;
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 84%, transparent) 0%, transparent 8rem),
+      color-mix(in srgb, var(--color-canvas) 97%, black 3%);
+    overflow: clip;
+  }
+
+  .sheetHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-4) var(--space-4);
+    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
+  }
+
+  .headerActions {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .brandBlock {
+    min-width: 0;
+    display: grid;
+    gap: var(--space-1);
+  }
+
+  .sectionLabel {
+    @include text-caption;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  .brandEyebrow {
+    @include text-caption;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  .brandTitle {
+    @include text-title;
+    color: var(--color-text);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .brandContext {
+    @include text-caption;
+    color: var(--color-text-subtle);
+  }
+
+  .closeButton {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--control-size-md);
+    height: var(--control-size-md);
+    padding: 0;
+    border: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+    color: var(--color-text-subtle);
+  }
+
+  .createButton {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    min-height: var(--control-size-md);
+    padding: 0 var(--space-3);
+    border: 1px solid color-mix(in srgb, var(--color-border-strong, var(--color-border)) 82%, transparent);
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--color-surface) 94%, var(--color-canvas) 6%);
+    color: var(--color-text);
+    box-shadow: var(--shadow-soft);
+    font: inherit;
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .sheetBody {
+    min-height: 0;
+    display: grid;
+    gap: var(--space-5);
+    padding: var(--space-5) var(--space-5) calc(var(--space-12) + var(--space-10) + env(safe-area-inset-bottom, 0px));
+    overflow: auto;
+  }
+
+  .sectionBlock {
+    display: grid;
+    gap: var(--space-2);
+  }
+
+  .treeList,
+  .treeListItem {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .treeList {
+    display: grid;
+    gap: 0;
+    border-top: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
+  }
+
+  .treeListNested {
+    display: grid;
+    gap: 0;
+  }
+
+  .treeRow {
+    min-width: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    min-height: calc(var(--control-size-lg) + var(--space-3));
+    padding: var(--space-4) var(--space-2) var(--space-4) calc(var(--space-2) + (var(--tree-depth, 0) * var(--space-4)));
+    border: 0;
+    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
+    border-radius: 0;
+    background: transparent;
+    color: var(--color-text);
+    text-align: left;
+  }
+
+  .treeRowActive {
+    color: var(--color-text);
+    background: color-mix(in srgb, var(--color-surface) 72%, transparent);
+  }
+
+  .treeRowBranch {
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .treeRowLead,
+  .treeRowTrail {
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .treeRowTrail {
+    flex: 0 0 auto;
+    color: var(--color-text-muted);
+  }
+
+  .treeLabel {
+    @include text-label;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .treeMeta {
+    @include text-caption;
+    min-width: 1rem;
+    text-align: right;
+  }
+
+  .treeChevron {
+    color: var(--color-text-subtle);
+  }
+
+  .treeListNested > .treeListItem > .treeRow {
+    min-height: calc(var(--control-size-lg) + var(--space-1));
+  }
+}

Frontend/src/components/shell/MobileWorkspaceBrowser/MobileWorkspaceBrowser.tsx

@@ -0,0 +1,248 @@
+import { For, Show, createSignal, type JSX } from "solid-js";
+import { ChevronRight, Plus, X } from "../../../lib/icons";
+import { createLongPressGesture } from "../createLongPressGesture";
+import {
+	activeProject,
+	activeServer,
+	createWorkspaceStaticTarget,
+	createWorkspaceSurfaceTarget,
+	createWorkspaceTreeTarget,
+	getWorkspaceNodeIcon,
+	workspaceStaticItems,
+	workspaceTree,
+	type SidebarItem,
+	type WorkspaceContextMenuAction,
+	type WorkspaceContextMenuTarget,
+	type WorkspaceStaticItem,
+	type WorkspaceTreeNode,
+} from "../data/shell.data";
+import { WorkspaceMobileActionSheet } from "../WorkspaceMobileActionSheet/WorkspaceMobileActionSheet";
+import styles from "./MobileWorkspaceBrowser.module.scss";
+
+type MobileWorkspaceBrowserProps = {
+	open: boolean;
+	onClose: VoidFunction;
+};
+
+const TreeRow = (props: { node: WorkspaceTreeNode; depth?: number }): JSX.Element => {
+	const depth = props.depth ?? 0;
+	const Icon = getWorkspaceNodeIcon(props.node);
+	const hasChildren = (props.node.children?.length ?? 0) > 0;
+
+	return (
+		<button
+			classList={{
+				[styles.treeRow]: true,
+				[styles.treeRowActive]: props.node.active ?? false,
+				[styles.treeRowBranch]: hasChildren,
+			}}
+			type="button"
+			style={{ "--tree-depth": `${depth}` }}
+			data-slot="mobile-workspace-tree-row"
+			data-kind={props.node.kind}
+			data-item-type={props.node.kind === "item" ? props.node.itemType : undefined}
+			data-active={props.node.active ? "true" : "false"}
+		>
+			<span class={styles.treeRowLead}>
+				<Icon size={16} strokeWidth={2} />
+				<span class={styles.treeLabel}>{props.node.label}</span>
+			</span>
+
+			<span class={styles.treeRowTrail}>
+				<Show when={props.node.meta}>
+					<span class={styles.treeMeta}>{props.node.meta}</span>
+				</Show>
+				<Show when={hasChildren}>
+					<ChevronRight size={14} strokeWidth={2} class={styles.treeChevron} />
+				</Show>
+			</span>
+		</button>
+	);
+};
+
+const StaticRow = (props: { item: SidebarItem }): JSX.Element => {
+	const Icon = props.item.icon;
+
+	return (
+		<button classList={{ [styles.treeRow]: true, [styles.treeRowActive]: props.item.active ?? false }} type="button" style={{ "--tree-depth": "0" }} data-slot="mobile-workspace-static-row" data-active={props.item.active ? "true" : "false"}>
+			<span class={styles.treeRowLead}>
+				<Icon size={16} strokeWidth={2} />
+				<span class={styles.treeLabel}>{props.item.label}</span>
+			</span>
+			<span class={styles.treeRowTrail}>
+				<Show when={props.item.meta}>
+					<span class={styles.treeMeta}>{props.item.meta}</span>
+				</Show>
+				<ChevronRight size={14} strokeWidth={2} class={styles.treeChevron} />
+			</span>
+		</button>
+	);
+};
+const WorkspaceStaticRow = (props: {
+	item: WorkspaceStaticItem;
+	onOpenActionSheet: (target: WorkspaceContextMenuTarget) => void;
+}): JSX.Element => {
+	const target = createWorkspaceStaticTarget(props.item);
+	const longPress = createLongPressGesture({
+		onLongPress: () => {
+			props.onOpenActionSheet(target);
+		},
+	});
+
+	return (
+		<li
+			class={styles.treeListItem}
+			data-slot="mobile-workspace-static-item"
+			data-target-kind={target.kind}
+			onContextMenu={(event): void => {
+				event.preventDefault();
+				props.onOpenActionSheet(target);
+			}}
+			{...longPress}
+		>
+			<StaticRow item={props.item} />
+		</li>
+	);
+};
+
+const WorkspaceTreeBranch = (props: {
+	nodes: readonly WorkspaceTreeNode[];
+	depth?: number;
+	onOpenActionSheet: (target: WorkspaceContextMenuTarget) => void;
+}): JSX.Element => {
+	const depth = props.depth ?? 0;
+
+	return (
+		<For each={props.nodes}>
+			{(node): JSX.Element => {
+				const target = createWorkspaceTreeTarget(node);
+				const longPress = createLongPressGesture({
+					onLongPress: () => {
+						props.onOpenActionSheet(target);
+					},
+				});
+
+				return (
+					<li
+						class={styles.treeListItem}
+						data-slot="mobile-workspace-tree-item"
+						data-kind={node.kind}
+						data-item-type={node.kind === "item" ? node.itemType : undefined}
+						onContextMenu={(event): void => {
+							event.preventDefault();
+							props.onOpenActionSheet(target);
+						}}
+						{...longPress}
+					>
+						<TreeRow node={node} depth={depth} />
+
+						<Show when={node.children?.length}>
+							<ul class={styles.treeListNested}>
+								<WorkspaceTreeBranch nodes={node.children ?? []} depth={depth + 1} onOpenActionSheet={props.onOpenActionSheet} />
+							</ul>
+						</Show>
+					</li>
+				);
+			}}
+		</For>
+	);
+};
+
+export const MobileWorkspaceBrowser = (props: MobileWorkspaceBrowserProps): JSX.Element => {
+	const [actionSheetTarget, setActionSheetTarget] = createSignal<WorkspaceContextMenuTarget | null>(null);
+	const sectionNodes = workspaceTree.filter((node) => (node.children?.length ?? 0) > 0);
+	const looseNodes = workspaceTree.filter((node) => (node.children?.length ?? 0) === 0);
+	const workspaceTarget = createWorkspaceSurfaceTarget(activeProject);
+	const openActionSheet = (target: WorkspaceContextMenuTarget): void => {
+		setActionSheetTarget(target);
+	};
+	const closeActionSheet = (): void => {
+		setActionSheetTarget(null);
+	};
+	const openWorkspaceActionSheet = (): void => {
+		openActionSheet(workspaceTarget);
+	};
+
+	const handleActionSelect = (_action: WorkspaceContextMenuAction, _target: WorkspaceContextMenuTarget): void => {
+		// Mobile first pass only establishes the action-sheet IA and long-press behavior.
+	};
+
+	const workspaceLongPress = createLongPressGesture({
+		onLongPress: openWorkspaceActionSheet,
+	});
+
+	return (
+		<Show when={props.open}>
+			<div class={styles.browserLayer} data-ui="mobile-workspace-browser">
+				<section class={styles.sheet} aria-label="Mobile workspace browser" data-slot="mobile-workspace-sheet">
+					<header class={styles.sheetHeader} data-slot="mobile-workspace-header">
+						<div
+							class={styles.brandBlock}
+							data-slot="mobile-workspace-brand"
+							onContextMenu={(event): void => {
+								event.preventDefault();
+								openWorkspaceActionSheet();
+							}}
+							{...workspaceLongPress}
+						>
+							{/* Long-pressing the browser header exposes workspace-level actions on mobile. */}
+							<span class={styles.brandEyebrow}>Moku Work</span>
+							<strong class={styles.brandTitle}>{activeProject.name}</strong>
+							<span class={styles.brandContext}>{activeServer.name}</span>
+						</div>
+
+						<div class={styles.headerActions} data-slot="mobile-workspace-header-actions">
+							<button
+								class={styles.createButton}
+								type="button"
+								aria-label="Create"
+								data-slot="mobile-workspace-create"
+								onClick={openWorkspaceActionSheet}
+							>
+								<Plus size={16} strokeWidth={2.25} />
+								<span>Create</span>
+							</button>
+
+							<button class={styles.closeButton} type="button" aria-label="Close workspace browser" data-slot="mobile-workspace-close" onClick={props.onClose}>
+								<X size={18} strokeWidth={2} />
+							</button>
+						</div>
+					</header>
+
+					<div class={styles.sheetBody} data-slot="mobile-workspace-body">
+						<section class={styles.sectionBlock} data-slot="mobile-workspace-section" data-section-id="workspace">
+							<span class={styles.sectionLabel}>Workspace</span>
+							<ul class={styles.treeList} data-slot="mobile-workspace-list" data-section-id="workspace">
+						<For each={workspaceStaticItems}>
+							{(item): JSX.Element => <WorkspaceStaticRow item={item} onOpenActionSheet={openActionSheet} />}
+						</For>
+							</ul>
+						</section>
+
+						<section class={styles.sectionBlock} data-slot="mobile-workspace-section" data-section-id="items">
+							<span class={styles.sectionLabel}>Items</span>
+							<ul class={styles.treeList} data-slot="mobile-workspace-list" data-section-id="items">
+								<WorkspaceTreeBranch nodes={sectionNodes} onOpenActionSheet={openActionSheet} />
+							</ul>
+						</section>
+
+						<Show when={looseNodes.length > 0}>
+							<section class={styles.sectionBlock} data-slot="mobile-workspace-section" data-section-id="more">
+								<span class={styles.sectionLabel}>More</span>
+								<ul class={styles.treeList} data-slot="mobile-workspace-list" data-section-id="more">
+									<WorkspaceTreeBranch nodes={looseNodes} onOpenActionSheet={openActionSheet} />
+								</ul>
+							</section>
+						</Show>
+					</div>
+				</section>
+
+				<WorkspaceMobileActionSheet
+					target={actionSheetTarget()}
+					onClose={closeActionSheet}
+					onSelect={handleActionSelect}
+				/>
+			</div>
+		</Show>
+	);
+};

Frontend/src/components/shell/ProjectSelector/ProjectSelector.module.scss

@@ -0,0 +1,234 @@
+.root {
+  display: grid;
+  --project-drawer-gap: var(--space-3);
+  --project-drawer-top: calc(var(--space-4) + var(--control-size-lg));
+  --project-drawer-bottom: calc(var(--sidebar-dock-clearance, var(--shell-dock-clearance)) + var(--project-drawer-gap));
+}
+
+.rootCompact {
+  justify-items: center;
+}
+
+.trigger {
+  width: 100%;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: calc(var(--control-size-lg) + var(--space-2));
+  padding: var(--space-2) var(--space-3) calc(var(--space-2) + 0.2rem);
+  border: 1px solid color-mix(in srgb, var(--color-border-strong) 44%, transparent);
+  border-radius: calc(var(--radius-lg) + var(--space-1));
+  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
+  box-shadow: var(--shadow-soft);
+  text-align: left;
+  position: relative;
+  z-index: 5;
+  transition:
+    border-color var(--duration-fast) var(--easing-standard),
+    background var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard),
+    transform 180ms var(--easing-standard);
+}
+
+.trigger:hover {
+  background: var(--color-surface-hover);
+  border-color: var(--color-border);
+}
+
+.triggerOpen {
+  border-color: color-mix(in srgb, var(--color-border-strong) 22%, transparent);
+  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+  box-shadow: var(--shadow-soft);
+}
+
+.triggerCompact {
+  width: var(--control-size-xl);
+  min-height: var(--control-size-xl);
+  grid-template-columns: auto;
+  justify-items: center;
+  gap: 0.15rem;
+  padding: var(--space-2) 0;
+  border-radius: var(--radius-xl);
+}
+
+.triggerCompact .triggerLead {
+  width: var(--control-size-md);
+  height: var(--control-size-md);
+}
+
+.triggerCompact .triggerIcon {
+  transform: rotate(0deg);
+}
+
+.triggerCompact .triggerIconOpen {
+  transform: rotate(180deg);
+}
+
+.triggerLead {
+  width: var(--control-size-md);
+  height: var(--control-size-md);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--color-accent-soft) 82%, transparent);
+  color: var(--color-accent-strong);
+}
+
+.triggerCopy {
+  min-width: 0;
+  display: grid;
+  gap: 0.12rem;
+}
+
+.eyebrow,
+.projectItemDescription {
+  @include text-caption;
+  color: var(--color-text-muted);
+}
+
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.value,
+.projectItemName {
+  @include text-label;
+}
+
+.triggerIcon {
+  color: var(--color-text-muted);
+  transform: rotate(-90deg);
+  transition: transform var(--duration-fast) var(--easing-standard);
+}
+
+.triggerIconOpen {
+  transform: rotate(0deg);
+}
+
+.scrim {
+  position: absolute;
+  inset: calc(var(--project-drawer-top) + var(--project-drawer-gap)) var(--space-4)
+    var(--project-drawer-bottom) var(--space-4);
+  z-index: 2;
+  opacity: 0;
+  pointer-events: none;
+  background: color-mix(in srgb, black 8%, transparent);
+  border-radius: var(--radius-lg);
+  transition: opacity 260ms var(--easing-standard);
+}
+
+.scrimOpen {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.rootCompact .scrim,
+.rootCompact .drawer {
+  left: 0;
+  right: auto;
+  width: min(18rem, calc(100vw - 6rem));
+}
+
+.drawer {
+  position: absolute;
+  inset: calc(var(--project-drawer-top) + var(--project-drawer-gap)) var(--space-4)
+    var(--project-drawer-bottom) var(--space-4);
+  z-index: 3;
+  display: grid;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(calc(-1 * (var(--space-5) + 12%)));
+  will-change: transform, opacity;
+  transition:
+    opacity 240ms var(--easing-standard),
+    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.drawerOpen {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+}
+
+.drawer::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  border: 1px solid color-mix(in srgb, var(--color-border-strong) 52%, transparent);
+  background: var(--color-surface-muted);
+  box-shadow:
+    14px 0 30px color-mix(in srgb, black 7%, transparent),
+    inset -1px 0 0 color-mix(in srgb, white 4%, transparent);
+  pointer-events: none;
+}
+
+.drawerBody {
+  position: relative;
+  z-index: 1;
+  min-height: 0;
+  display: grid;
+  align-content: start;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+}
+
+.drawerBody::-webkit-scrollbar {
+	width: 0;
+}
+
+.projectList {
+  list-style: none;
+  display: grid;
+  gap: 0.2rem;
+  padding: 0;
+}
+
+.projectItem {
+  width: 100%;
+  min-width: 0;
+  min-height: calc(var(--control-size-md) + var(--space-2));
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-muted);
+  transition:
+    background 160ms var(--easing-standard),
+    color 160ms var(--easing-standard),
+    border-color 160ms var(--easing-standard),
+    transform 180ms var(--easing-standard);
+  text-align: left;
+}
+
+.projectItem:hover {
+  background: color-mix(in srgb, var(--color-surface-hover) 82%, transparent);
+  color: var(--color-text);
+  border-color: color-mix(in srgb, var(--color-border) 22%, transparent);
+}
+
+.projectItemActive {
+  border-color: color-mix(in srgb, var(--color-border) 28%, transparent);
+  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
+  color: var(--color-text);
+  box-shadow: none;
+}
+
+.projectItemCopy {
+  min-width: 0;
+  display: grid;
+  gap: 0.05rem;
+}
+
+.projectItemDescription {
+  color: color-mix(in srgb, var(--color-text-muted) 84%, transparent);
+}

Frontend/src/components/shell/ProjectSelector/ProjectSelector.tsx

@@ -0,0 +1,163 @@
+// Path: Frontend/src/components/shell/ProjectSelector/ProjectSelector.tsx
+
+import { For, createSignal, onCleanup, onMount, type JSX } from "solid-js";
+import { ChevronDown, Folder } from "../../../lib/icons";
+import { activeProject, projectItems } from "../data/shell.data";
+import styles from "./ProjectSelector.module.scss";
+
+type ProjectSelectorProps = {
+	compact?: boolean;
+	isOpen: boolean;
+	onToggle: () => void;
+	onClose: () => void;
+};
+
+const defaultProject = projectItems.find((item) => item.id === activeProject.id) ?? projectItems[0];
+
+export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
+	const [selectedProject, setSelectedProject] = createSignal({ id: defaultProject.id, name: defaultProject.name });
+	const [drawerTop, setDrawerTop] = createSignal<number>(0);
+	let triggerRef: HTMLButtonElement | undefined;
+
+	onMount(() => {
+		if (!triggerRef) {
+			return;
+		}
+
+		const updateDrawerTop = (): void => {
+			if (!triggerRef) {
+				return;
+			}
+
+			setDrawerTop(triggerRef.offsetTop + triggerRef.offsetHeight);
+		};
+
+		updateDrawerTop();
+
+		const observer = new ResizeObserver(() => {
+			updateDrawerTop();
+		});
+
+		observer.observe(triggerRef);
+		window.addEventListener("resize", updateDrawerTop);
+
+		onCleanup(() => {
+			observer.disconnect();
+			window.removeEventListener("resize", updateDrawerTop);
+		});
+	});
+
+	const toggleOpen = (): void => {
+		if (!props.isOpen) {
+			props.onToggle();
+			return;
+		}
+
+		props.onClose();
+	};
+
+	const selectProject = (projectId: string): void => {
+		const nextProject = projectItems.find((item): boolean => item.id === projectId);
+
+		if (!nextProject) {
+			return;
+		}
+
+		setSelectedProject({ id: nextProject.id, name: nextProject.name });
+		props.onClose();
+	};
+
+	return (
+		<div
+			classList={{
+				[styles.root]: true,
+				[styles.rootCompact]: !!props.compact,
+			}}
+			style={{
+				"--project-drawer-top": `${drawerTop()}px`,
+			}}
+		>
+			{/* Project trigger */}
+			<button
+				type="button"
+				ref={triggerRef}
+				classList={{
+					[styles.trigger]: true,
+					[styles.triggerCompact]: !!props.compact,
+					[styles.triggerOpen]: props.isOpen,
+				}}
+				aria-label={`Open left workspace sidebar menu for ${selectedProject().name}`}
+				aria-expanded={props.isOpen}
+				title={selectedProject().name}
+				onClick={toggleOpen}
+			>
+				<span class={styles.triggerLead} aria-hidden="true">
+					<Folder size={18} strokeWidth={2} />
+				</span>
+				{!props.compact ? (
+					<span class={styles.triggerCopy}>
+						<span class={styles.eyebrow}>Projects</span>
+						<span class={styles.value}>{selectedProject().name}</span>
+					</span>
+				) : null}
+				<ChevronDown
+					classList={{
+						[styles.triggerIcon]: true,
+						[styles.triggerIconOpen]: props.isOpen,
+					}}
+					size={16}
+					strokeWidth={2}
+				/>
+			</button>
+
+			{/* Outside-click scrim */}
+			<button
+				type="button"
+				classList={{
+					[styles.scrim]: true,
+					[styles.scrimOpen]: props.isOpen,
+				}}
+				aria-hidden={!props.isOpen}
+				tabIndex={props.isOpen ? 0 : -1}
+				onClick={props.onClose}
+			/>
+
+			{/* Slide-out project list */}
+			<div
+				classList={{
+					[styles.drawer]: true,
+					[styles.drawerOpen]: props.isOpen,
+				}}
+				aria-hidden={!props.isOpen}
+			>
+				<div class={styles.drawerBody}>
+					<ul class={styles.projectList} role="list">
+						<For each={projectItems}>
+							{(item): JSX.Element => {
+								const isSelected = (): boolean => selectedProject().id === item.id;
+
+								return (
+									<li>
+										<button
+											type="button"
+											classList={{
+												[styles.projectItem]: true,
+												[styles.projectItemActive]: isSelected(),
+											}}
+											onClick={(): void => selectProject(item.id)}
+										>
+											<span class={styles.projectItemCopy}>
+												<span class={styles.projectItemName}>{item.name}</span>
+												<span class={styles.projectItemDescription}>{item.description}</span>
+											</span>
+										</button>
+									</li>
+								);
+							}}
+						</For>
+					</ul>
+				</div>
+			</div>
+		</div>
+	);
+};

Frontend/src/components/shell/ServerDock/ServerDock.tsx

@@ -6,12 +6,12 @@ import styles from "./ServerDock.module.scss";
 
 export const ServerDock = (): JSX.Element => {
 	return (
-		<section class={styles.panel} aria-label="Server dock">
-			<div class={styles.identity}>
+		<section class={styles.panel} aria-label="Server dock" data-ui="server-dock" data-server-kind={activeServer.kind}>
+			<div class={styles.identity} data-slot="server-dock-identity">
 				<div class={styles.glyph} aria-hidden="true">
 					{activeServer.abbreviation}
 				</div>
-				<div class={styles.copy}>
+				<div class={styles.copy} data-slot="server-dock-copy">
 					<span class={styles.name}>{activeServer.name}</span>
 					<Show
 						when={activeServer.kind === "organization"}
@@ -26,13 +26,13 @@ export const ServerDock = (): JSX.Element => {
 			</div>
 
 			<Show when={activeServer.dockActions.length > 0}>
-				<div class={styles.actions}>
+				<div class={styles.actions} data-slot="server-dock-actions">
 					<For each={activeServer.dockActions}>
 						{(item): JSX.Element => {
 							const Icon = item.icon;
 
 							return (
-								<button type="button" class={styles.action} aria-label={item.label} title={item.label}>
+								<button type="button" class={styles.action} aria-label={item.label} title={item.label} data-slot="server-dock-action" data-action-id={item.id}>
 									<Icon size={16} strokeWidth={2} />
 									<span class={styles.actionLabel}>{item.label}</span>
 								</button>

Frontend/src/components/shell/TopBar/NotificationsButton.module.scss

@@ -0,0 +1,66 @@
+.button {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	width: 2.75rem;
+	height: 2.75rem;
+	aspect-ratio: 1;
+	padding: 0;
+	border: 0;
+	border-radius: 999px;
+	flex-shrink: 0;
+	cursor: pointer;
+	background: transparent;
+	color: var(--color-text-muted);
+	transition:
+		background-color 220ms var(--easing-standard),
+		color 220ms var(--easing-standard),
+		transform 180ms var(--easing-standard);
+}
+
+.button:hover {
+	background: color-mix(in srgb, var(--color-text) 8%, transparent);
+	color: var(--color-text);
+}
+
+.buttonOpen {
+	background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+	color: var(--color-text);
+}
+
+.button:focus-visible {
+	outline: none;
+	background: color-mix(in srgb, var(--color-accent-strong) 12%, transparent);
+	box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-strong) 28%, transparent);
+	color: var(--color-text);
+}
+
+.iconWrap {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1.5rem;
+	height: 1.5rem;
+}
+
+.badge {
+	@include text-caption;
+	position: absolute;
+	top: -0.45rem;
+	right: -0.7rem;
+	min-width: 1rem;
+	height: 1rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0 0.24rem;
+	border: 1px solid color-mix(in srgb, var(--color-surface) 68%, transparent);
+	border-radius: 999px;
+	background: color-mix(in srgb, var(--color-primary-3) 84%, black 16%);
+	color: white;
+	font-weight: var(--font-weight-semibold);
+	line-height: 1;
+	box-shadow: 0 6px 14px color-mix(in srgb, black 18%, transparent);
+	pointer-events: none;
+}

Frontend/src/components/shell/TopBar/NotificationsButton.tsx

@@ -0,0 +1,36 @@
+import type { JSX } from "solid-js";
+import { Bell } from "../../../lib/icons";
+import { unreadNotificationCount } from "../data/shell.data";
+import styles from "./NotificationsButton.module.scss";
+
+type NotificationsButtonProps = {
+	isOpen: boolean;
+	menuId: string;
+	onToggle: () => void;
+};
+
+export const NotificationsButton = (props: NotificationsButtonProps): JSX.Element => {
+	const hasUnread = unreadNotificationCount > 0;
+	const unreadLabel = hasUnread ? `, ${unreadNotificationCount} unread` : "";
+
+	return (
+		<button
+			classList={{
+				[styles.button]: true,
+				[styles.buttonOpen]: props.isOpen,
+			}}
+			type="button"
+			aria-label={`${props.isOpen ? "Close" : "Open"} notifications${unreadLabel}`}
+			title={`${props.isOpen ? "Close" : "Open"} notifications`}
+			aria-haspopup="menu"
+			aria-controls={props.menuId}
+			aria-expanded={props.isOpen}
+			onClick={props.onToggle}
+		>
+			<span class={styles.iconWrap} aria-hidden="true">
+				<Bell size={18} strokeWidth={2} />
+				{hasUnread ? <span class={styles.badge}>{unreadNotificationCount}</span> : null}
+			</span>
+		</button>
+	);
+};

Frontend/src/components/shell/TopBar/NotificationsMenu.module.scss

@@ -0,0 +1,271 @@
+.menu {
+	position: absolute;
+	top: calc(100% + var(--space-2));
+	right: 0;
+	width: min(24rem, calc(100vw - (var(--space-4) * 2)));
+	display: grid;
+	gap: var(--space-3);
+	padding: var(--space-3);
+	border: 1px solid var(--color-border-strong);
+	border-radius: calc(var(--radius-lg) + (var(--space-1) / 2));
+	background: color-mix(in srgb, var(--color-surface-muted) 96%, transparent);
+	box-shadow: var(--shadow-strong);
+	backdrop-filter: blur(var(--blur-overlay));
+	z-index: var(--z-dropdown);
+}
+
+.menu.menuWorkspace {
+	position: static;
+	top: auto;
+	right: auto;
+	left: auto;
+	bottom: auto;
+	width: 100%;
+	max-width: none;
+	height: 100%;
+	min-height: 0;
+	display: grid;
+	grid-template-rows: auto minmax(0, 1fr) auto;
+	gap: var(--space-4);
+	padding: var(--space-4);
+	border: 0;
+	border-radius: 0;
+	background: transparent;
+	box-shadow: none;
+	backdrop-filter: none;
+	z-index: auto;
+	overflow: hidden;
+}
+
+.header,
+.footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--space-3);
+}
+
+.header {
+	padding-bottom: var(--space-3);
+	border-bottom: 1px solid var(--color-border);
+}
+
+.headerCopy {
+	min-width: 0;
+	display: grid;
+	gap: calc(var(--space-1) / 2);
+}
+
+.title {
+	@include text-label;
+	color: var(--color-text);
+}
+
+.subtitle,
+.sectionLabel,
+.itemMeta,
+.itemTime {
+	@include text-caption;
+	color: var(--color-text-muted);
+}
+
+.headerAction,
+.footerAction {
+	@include text-caption;
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-1);
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: var(--color-text-muted);
+	transition: color 160ms var(--easing-standard);
+}
+
+.headerAction:hover,
+.headerAction:focus-visible,
+.footerAction:hover,
+.footerAction:focus-visible {
+	outline: none;
+	color: var(--color-text);
+}
+
+.listWrap {
+	display: grid;
+	gap: var(--space-3);
+	max-height: min(24rem, 60vh);
+	overflow-y: auto;
+	padding-right: var(--space-1);
+	margin-right: calc(var(--space-1) * -1);
+}
+
+.stateCard {
+	display: grid;
+	justify-items: start;
+	gap: var(--space-2);
+	padding: var(--space-3);
+	border: 1px solid color-mix(in srgb, var(--color-border) 18%, transparent);
+	border-radius: var(--radius-md);
+	background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+}
+
+.stateIcon {
+	width: 2.2rem;
+	height: 2.2rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 999px;
+	background: color-mix(in srgb, var(--color-surface-muted) 88%, transparent);
+	color: var(--color-text);
+}
+
+.stateTitle {
+	@include text-label;
+	color: var(--color-text);
+}
+
+.stateCopy {
+	@include text-caption;
+	color: var(--color-text-muted);
+}
+
+.section {
+	display: grid;
+	gap: var(--space-2);
+}
+
+.section + .section {
+	padding-top: var(--space-3);
+	border-top: 1px solid var(--color-border);
+}
+
+.sectionLabel {
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+	color: var(--color-text-subtle);
+}
+
+.list {
+	display: grid;
+	gap: var(--space-1);
+}
+
+.item {
+	width: 100%;
+	min-width: 0;
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr) auto;
+	align-items: start;
+	gap: var(--space-2);
+	padding: var(--space-2);
+	border: 1px solid transparent;
+	border-radius: var(--radius-sm);
+	background: transparent;
+	color: var(--color-text);
+	text-align: left;
+	transition:
+		background-color 160ms var(--easing-standard),
+		border-color 160ms var(--easing-standard),
+		color 160ms var(--easing-standard);
+}
+
+.item:hover {
+	background: color-mix(in srgb, var(--color-surface) 88%, transparent);
+	border-color: color-mix(in srgb, var(--color-border) 20%, transparent);
+}
+
+.item:focus-visible {
+	outline: none;
+	background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+	border-color: color-mix(in srgb, var(--color-accent-soft) 52%, transparent);
+	box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-soft) 14%, transparent);
+}
+
+.itemUnread {
+	background: color-mix(in srgb, var(--color-surface) 90%, transparent);
+	border-color: color-mix(in srgb, var(--color-border) 16%, transparent);
+}
+
+.itemMarker,
+.itemMarkerMuted {
+	width: 0.5rem;
+	height: 0.5rem;
+	margin-top: 0.45rem;
+	border-radius: 999px;
+	flex-shrink: 0;
+	background: color-mix(in srgb, var(--color-primary-2) 78%, white 22%);
+}
+
+.itemMarkerMuted {
+	background: color-mix(in srgb, var(--color-text-subtle) 36%, transparent);
+}
+
+.itemBody {
+	min-width: 0;
+	display: grid;
+	gap: calc(var(--space-1) / 2);
+}
+
+.itemTitle {
+	@include text-label;
+	color: var(--color-text);
+}
+
+.itemTime {
+	padding-top: calc(var(--space-1) / 4);
+	white-space: nowrap;
+	color: var(--color-text-subtle);
+}
+
+.footer {
+	padding-top: var(--space-3);
+	border-top: 1px solid var(--color-border);
+	justify-content: space-between;
+	flex-wrap: wrap;
+}
+
+.menu.menuWorkspace .listWrap {
+	min-height: 0;
+	max-height: none;
+	height: 100%;
+	padding-right: 0;
+	margin-right: 0;
+}
+
+.menu.menuWorkspace .header,
+.menu.menuWorkspace .footer {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+@include respond-down(mobile) {
+	.menu.menuWorkspace {
+		height: 100%;
+		min-height: 0;
+		padding: var(--space-5);
+	}
+
+	.menu.menuWorkspace .listWrap {
+		min-height: 0;
+		max-height: none;
+	}
+
+	.menu.menuWorkspace .item {
+		grid-template-columns: auto minmax(0, 1fr);
+	}
+
+	.menu.menuWorkspace .itemTime {
+		grid-column: 2;
+		padding-top: 0;
+	}
+
+	.menu.menuWorkspace .footer {
+		align-items: flex-start;
+		flex-direction: column;
+	}
+
+	.menu.menuWorkspace .footerAction {
+		padding: var(--space-1) 0;
+	}
+}

Frontend/src/components/shell/TopBar/NotificationsMenu.tsx

@@ -0,0 +1,125 @@
+import { For, Show, type JSX } from "solid-js";
+import { Bell, Settings } from "../../../lib/icons";
+import { notificationItems, unreadNotificationCount } from "../data/shell.data";
+import styles from "./NotificationsMenu.module.scss";
+
+type NotificationsMenuProps = {
+	id: string;
+	menuRef?: (element: HTMLDivElement) => void;
+	onSelect: () => void;
+	variant?: "popover" | "workspace";
+};
+
+export const NotificationsMenu = (props: NotificationsMenuProps): JSX.Element => {
+	const unreadItems = notificationItems.filter((item) => item.unread);
+	const earlierItems = notificationItems.filter((item) => !item.unread);
+	const hasNotifications = notificationItems.length > 0;
+	const isCaughtUp = unreadItems.length === 0 && hasNotifications;
+	const variant = props.variant ?? "popover";
+
+	return (
+		<div
+			id={props.id}
+			classList={{
+				[styles.menu]: true,
+				[styles.menuWorkspace]: variant === "workspace",
+			}}
+			role="menu"
+			aria-label="Notifications"
+			ref={props.menuRef}
+			data-ui="notifications-menu"
+			data-variant={variant}
+		>
+			<div class={styles.header} data-slot="notifications-header">
+				<div class={styles.headerCopy} data-slot="notifications-header-copy">
+					<strong class={styles.title}>Notifications</strong>
+					<span class={styles.subtitle}>
+						{unreadNotificationCount > 0
+							? `You have ${unreadNotificationCount} unread`
+							: "You’re all caught up"}
+					</span>
+				</div>
+
+				<Show when={unreadNotificationCount > 0}>
+					<button type="button" role="menuitem" class={styles.headerAction} onClick={props.onSelect}>
+						Mark all read
+					</button>
+				</Show>
+			</div>
+
+			<div class={styles.listWrap} data-slot="notifications-body">
+				<Show when={!hasNotifications}>
+					<div class={styles.stateCard}>
+						<span class={styles.stateIcon} aria-hidden="true">
+							<Bell size={18} strokeWidth={2} />
+						</span>
+						<strong class={styles.stateTitle}>No notifications yet</strong>
+						<span class={styles.stateCopy}>When activity starts across your workspace, it’ll show up here.</span>
+					</div>
+				</Show>
+
+				<Show when={isCaughtUp}>
+					<div class={styles.stateCard}>
+						<span class={styles.stateIcon} aria-hidden="true">
+							<Bell size={18} strokeWidth={2} />
+						</span>
+						<strong class={styles.stateTitle}>You’re all caught up</strong>
+						<span class={styles.stateCopy}>No unread notifications right now. Earlier activity is still available below.</span>
+					</div>
+				</Show>
+
+				<Show when={unreadItems.length > 0}>
+					<section class={styles.section} aria-label="Unread notifications" data-slot="notifications-section" data-section-id="unread">
+						<span class={styles.sectionLabel}>Unread</span>
+						<div class={styles.list} data-slot="notifications-list" data-section-id="unread">
+							<For each={unreadItems}>
+								{(item): JSX.Element => (
+									<button type="button" role="menuitem" classList={{ [styles.item]: true, [styles.itemUnread]: true }} data-slot="notification-item" data-state="unread" onClick={props.onSelect}>
+										<span class={styles.itemMarker} aria-hidden="true" />
+										<div class={styles.itemBody}>
+											<span class={styles.itemTitle}>{item.title}</span>
+											<span class={styles.itemMeta}>{item.contextLabel}</span>
+										</div>
+										<span class={styles.itemTime}>{item.timeLabel}</span>
+									</button>
+								)}
+							</For>
+						</div>
+					</section>
+				</Show>
+
+				<Show when={earlierItems.length > 0}>
+					<section class={styles.section} aria-label="Earlier notifications" data-slot="notifications-section" data-section-id="earlier">
+						<span class={styles.sectionLabel}>Earlier</span>
+						<div class={styles.list} data-slot="notifications-list" data-section-id="earlier">
+							<For each={earlierItems}>
+								{(item): JSX.Element => (
+									<button type="button" role="menuitem" class={styles.item} data-slot="notification-item" data-state="read" onClick={props.onSelect}>
+										<span class={styles.itemMarkerMuted} aria-hidden="true" />
+										<div class={styles.itemBody}>
+											<span class={styles.itemTitle}>{item.title}</span>
+											<span class={styles.itemMeta}>{item.contextLabel}</span>
+										</div>
+										<span class={styles.itemTime}>{item.timeLabel}</span>
+									</button>
+								)}
+							</For>
+						</div>
+					</section>
+				</Show>
+			</div>
+
+			<div class={styles.footer} data-slot="notifications-footer">
+				<button type="button" role="menuitem" class={styles.footerAction} onClick={props.onSelect}>
+					<Settings size={16} strokeWidth={2} />
+					<span>Notification settings</span>
+				</button>
+
+				<button type="button" role="menuitem" class={styles.footerAction} onClick={props.onSelect}>
+					<Bell size={16} strokeWidth={2} />
+					<span>View all notifications</span>
+				</button>
+			</div>
+		</div>
+	);
+};

Frontend/src/components/shell/TopBar/NotificationsNav.module.scss

@@ -0,0 +1,5 @@
+.root {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+}

Frontend/src/components/shell/TopBar/NotificationsNav.tsx

@@ -0,0 +1,38 @@
+import { createUniqueId, Show, type JSX } from "solid-js";
+import { NotificationsButton } from "./NotificationsButton";
+import { NotificationsMenu } from "./NotificationsMenu";
+import { createDesktopMenuController } from "./createDesktopMenuController";
+import styles from "./NotificationsNav.module.scss";
+
+type NotificationsNavProps = {
+	isMobileViewport: boolean;
+	isMobileWorkspaceOpen: boolean;
+	onToggleMobileWorkspace: VoidFunction;
+};
+
+export const NotificationsNav = (props: NotificationsNavProps): JSX.Element => {
+	const menuId = createUniqueId();
+
+	return (
+		<Show
+			when={props.isMobileViewport}
+			fallback={<DesktopNotificationsNav />}
+		>
+			<div class={styles.root}>
+				<NotificationsButton isOpen={props.isMobileWorkspaceOpen} menuId={menuId} onToggle={props.onToggleMobileWorkspace} />
+			</div>
+		</Show>
+	);
+};
+
+const DesktopNotificationsNav = (): JSX.Element => {
+	const controller = createDesktopMenuController();
+	const menuId = createUniqueId();
+
+	return (
+		<div class={styles.root} ref={controller.setRootRef}>
+			<NotificationsButton isOpen={controller.isOpen()} menuId={menuId} onToggle={controller.toggleMenu} />
+			{controller.isOpen() ? <NotificationsMenu id={menuId} menuRef={controller.setMenuRef} onSelect={controller.closeMenu} /> : null}
+		</div>
+	);
+};

Frontend/src/components/shell/TopBar/ProfileMenu.module.scss

@@ -0,0 +1,200 @@
+.menu {
+  position: absolute;
+  top: calc(100% + var(--space-2));
+  right: 0;
+  width: min(21rem, calc(100vw - (var(--space-4) * 2)));
+  display: grid;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border: 1px solid var(--color-border-strong);
+  border-radius: calc(var(--radius-lg) + (var(--space-1) / 2));
+  background: color-mix(in srgb, var(--color-surface-muted) 96%, transparent);
+  box-shadow: var(--shadow-strong);
+  backdrop-filter: blur(var(--blur-overlay));
+  z-index: var(--z-dropdown);
+}
+
+.menu.menuWorkspace {
+  position: static;
+  top: auto;
+  right: auto;
+  left: auto;
+  bottom: auto;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: var(--space-4);
+  padding: var(--space-4);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+  z-index: auto;
+  overflow: hidden;
+}
+
+.sections {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.summary {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--space-3);
+  align-items: center;
+  padding-bottom: var(--space-3);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  align-self: center;
+  margin-right: var(--space-1);
+}
+
+.avatarRing {
+  position: absolute;
+  inset: 0;
+  border-radius: 999px;
+  background:
+    conic-gradient(
+      from 0deg,
+      transparent 0deg 24deg,
+      var(--color-primary-1) 24deg 118deg,
+      transparent 118deg 144deg,
+      var(--color-primary-2) 144deg 238deg,
+      transparent 238deg 264deg,
+      var(--color-primary-3) 264deg 356deg,
+      transparent 356deg 360deg
+    );
+  mask: radial-gradient(circle, transparent 64%, black 67%);
+  -webkit-mask: radial-gradient(circle, transparent 64%, black 67%);
+}
+
+.avatarCore {
+  @include text-label;
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 78%;
+  height: 78%;
+  border-radius: 999px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-weight: var(--font-weight-semibold);
+}
+
+.summaryCopy {
+  min-width: 0;
+  display: grid;
+  gap: calc(var(--space-1) / 2);
+}
+
+.name,
+.itemLabel {
+  @include text-label;
+}
+
+.name {
+  color: var(--color-text);
+}
+
+.email,
+.role,
+.context {
+  @include text-caption;
+  color: var(--color-text-muted);
+}
+
+.context {
+  margin-top: var(--space-1);
+  color: var(--color-text-subtle);
+}
+
+.section {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.section + .section {
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--color-border);
+}
+
+.item {
+  width: 100%;
+  min-width: 0;
+  min-height: calc(var(--control-size-lg) + (var(--space-1) / 2));
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text);
+  text-align: left;
+  transition:
+    background-color 160ms var(--easing-standard),
+    border-color 160ms var(--easing-standard),
+    color 160ms var(--easing-standard);
+}
+
+.item:hover {
+  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
+  border-color: color-mix(in srgb, var(--color-border) 20%, transparent);
+}
+
+.item:focus-visible {
+  outline: none;
+  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+  border-color: color-mix(in srgb, var(--color-accent-soft) 52%, transparent);
+  box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-soft) 14%, transparent);
+}
+
+.itemDanger {
+  color: color-mix(in srgb, var(--color-primary-3) 74%, var(--color-text) 26%);
+}
+
+.itemDanger:hover,
+.itemDanger:focus-visible {
+  background: color-mix(in srgb, var(--color-primary-3) 8%, transparent);
+  border-color: color-mix(in srgb, var(--color-primary-3) 16%, transparent);
+}
+
+.itemIcon {
+  width: calc(var(--control-size-lg) - var(--space-2));
+  height: calc(var(--control-size-lg) - var(--space-2));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+  color: currentColor;
+}
+
+.menu.menuWorkspace .sections {
+  min-height: 0;
+  height: 100%;
+  align-content: start;
+  overflow-y: auto;
+}
+
+.menu.menuWorkspace .summary,
+.menu.menuWorkspace .sections {
+  padding-left: 0;
+  padding-right: 0;
+}

Frontend/src/components/shell/TopBar/ProfileMenu.tsx

@@ -0,0 +1,80 @@
+import { For, type JSX } from "solid-js";
+import { User } from "../../../lib/icons";
+import { activeUserProfile, profileMenuSections } from "../data/shell.data";
+import styles from "./ProfileMenu.module.scss";
+
+type ProfileMenuProps = {
+	id: string;
+	menuRef?: (element: HTMLDivElement) => void;
+	onSelect: () => void;
+	variant?: "popover" | "workspace";
+};
+
+export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
+	const variant = props.variant ?? "popover";
+
+	return (
+		<div
+			id={props.id}
+			classList={{
+				[styles.menu]: true,
+				[styles.menuWorkspace]: variant === "workspace",
+			}}
+			role="menu"
+			aria-label="Profile menu"
+			ref={props.menuRef}
+			data-ui="profile-menu"
+			data-variant={variant}
+		>
+			<div class={styles.summary} data-slot="profile-summary">
+				<div class={styles.avatar} aria-hidden="true">
+					<span class={styles.avatarRing} />
+					<span class={styles.avatarCore}>
+						<User size={16} strokeWidth={2} />
+					</span>
+				</div>
+
+				<div class={styles.summaryCopy}>
+					<strong class={styles.name}>{activeUserProfile.name}</strong>
+					<span class={styles.email}>{activeUserProfile.email}</span>
+					<span class={styles.role}>{activeUserProfile.roleLabel}</span>
+					<span class={styles.context}>{activeUserProfile.contextLabel}</span>
+				</div>
+			</div>
+
+			<div class={styles.sections} data-slot="profile-sections">
+				<For each={profileMenuSections}>
+					{(section): JSX.Element => (
+						<div class={styles.section} data-slot="profile-section" data-section-id={section.id}>
+							<For each={section.items}>
+								{(item): JSX.Element => {
+									const Icon = item.icon;
+
+									return (
+										<button
+											type="button"
+											role="menuitem"
+										classList={{
+											[styles.item]: true,
+											[styles.itemDanger]: item.tone === "danger",
+										}}
+										data-slot="profile-action"
+										data-action-id={item.id}
+										data-tone={item.tone ?? "default"}
+										onClick={props.onSelect}
+										>
+											<span class={styles.itemIcon} aria-hidden="true">
+												<Icon size={16} strokeWidth={2} />
+											</span>
+											<span class={styles.itemLabel}>{item.label}</span>
+										</button>
+									);
+								}}
+							</For>
+						</div>
+					)}
+				</For>
+			</div>
+		</div>
+	);
+};

Frontend/src/components/shell/TopBar/ThemeToggle.module.scss

@@ -0,0 +1,68 @@
+.toggleButton {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  aspect-ratio: 1;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  flex-shrink: 0;
+  cursor: pointer;
+  background: transparent;
+  color: var(--color-text-muted);
+  transition:
+    background-color 500ms ease,
+    color 220ms var(--easing-standard),
+    transform 180ms var(--easing-standard);
+}
+
+.toggleButton:hover {
+  background: color-mix(in srgb, var(--color-text) 8%, transparent);
+  color: var(--color-text);
+}
+
+.toggleButton:focus-visible {
+  outline: none;
+  background: color-mix(in srgb, var(--color-accent-strong) 12%, transparent);
+  box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-strong) 28%, transparent);
+  color: var(--color-text);
+}
+
+.iconContainer {
+  position: relative;
+  width: 1.375rem;
+  height: 1.375rem;
+}
+
+.iconLayer {
+  position: absolute;
+  inset: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    transform 1000ms ease,
+    opacity 500ms ease;
+}
+
+.moonLayer {
+  transform: rotate(90deg);
+  opacity: 0;
+
+  :global([data-theme="dark"]) & {
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+}
+
+.sunLayer {
+  transform: rotate(0deg);
+  opacity: 1;
+
+  :global([data-theme="dark"]) & {
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+}

Frontend/src/components/shell/TopBar/ThemeToggle.tsx

@@ -0,0 +1,32 @@
+// Path: Frontend/src/components/shell/TopBar/ThemeToggle.tsx
+
+import type { JSX } from "solid-js";
+import type { Theme } from "../../../theme/runtime";
+import { Moon, Sun } from "../../../lib/icons";
+import styles from "./ThemeToggle.module.scss";
+
+type ThemeToggleProps = {
+	theme: Theme;
+	onToggle: VoidFunction;
+};
+
+export const ThemeToggle = (props: ThemeToggleProps): JSX.Element => {
+	return (
+		<button
+			class={styles.toggleButton}
+			type="button"
+			onClick={props.onToggle}
+			aria-label={`Switch to ${props.theme === "dark" ? "light" : "dark"} theme`}
+			title={`Switch to ${props.theme === "dark" ? "light" : "dark"} theme`}
+		>
+			<span class={styles.iconContainer} aria-hidden="true">
+				<span class={`${styles.iconLayer} ${styles.moonLayer}`}>
+					<Moon size={18} strokeWidth={2} />
+				</span>
+				<span class={`${styles.iconLayer} ${styles.sunLayer}`}>
+					<Sun size={18} strokeWidth={2} />
+				</span>
+			</span>
+		</button>
+	);
+};

Frontend/src/components/shell/TopBar/TopBar.module.scss

@@ -1,8 +1,8 @@
 .topBar {
-  --topbar-control-size: var(--control-size-md);
+  --topbar-control-size: 2.5rem;
   min-height: 4rem;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--space-3);
   padding: var(--space-3) var(--space-4) var(--space-3);
@@ -12,6 +12,7 @@
 .identity {
   min-width: 0;
   display: grid;
+  justify-items: start;
   gap: 0;
 }
 
@@ -22,55 +23,50 @@
   letter-spacing: 0.08em;
 }
 
-.title {
-  @include text-title;
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-
-  strong {
-    font: inherit;
-    font-weight: var(--font-weight-title);
-  }
-}
-
-.context {
-  color: var(--color-text-muted);
-}
-
+.controls,
 .actions {
   display: flex;
   align-items: center;
+}
+
+.controls {
   gap: var(--space-1);
 }
 
-.actionButton,
-.themeButton {
-  height: var(--topbar-control-size);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  @include interactive-frame();
+.actions {
+  gap: var(--space-1);
 }
 
 .actionButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: var(--topbar-control-size);
+  height: var(--topbar-control-size);
+  aspect-ratio: 1;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  flex-shrink: 0;
+  cursor: pointer;
+  background: transparent;
+  color: var(--color-text-muted);
+  transition:
+    background-color 220ms var(--easing-standard),
+    color 220ms var(--easing-standard),
+    transform 180ms var(--easing-standard);
 }
 
-.themeButton {
-  width: auto;
-  padding-inline: var(--space-2);
-  gap: var(--space-1);
+.actionButton:hover {
+  background: color-mix(in srgb, var(--color-text) 8%, transparent);
   color: var(--color-text);
 }
 
-.actionButton,
-.themeButton {
-  @include interactive-frame-hover();
-}
-
-.themeLabel {
-  @include text-label;
+.actionButton:focus-visible {
+  outline: none;
+  background: color-mix(in srgb, var(--color-accent-strong) 12%, transparent);
+  box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-strong) 28%, transparent);
+  color: var(--color-text);
 }
 
 @include respond-down(mobile) {
@@ -82,4 +78,8 @@
   .actions {
     display: none;
   }
+
+  .controls {
+    gap: 0;
+  }
 }

Frontend/src/components/shell/TopBar/TopBar.tsx

@@ -1,44 +1,58 @@
 // Path: Frontend/src/components/shell/TopBar/TopBar.tsx
 
 import { For, type JSX } from "solid-js";
-import { ChevronDown } from "../../../lib/icons";
 import type { Theme } from "../../../theme/runtime";
 import { topBarActions } from "../data/shell.data";
+import { DepartmentSelector } from "../DepartmentSelector/DepartmentSelector";
+import { NotificationsNav } from "./NotificationsNav";
+import { ThemeToggle } from "./ThemeToggle";
+import { UserNav } from "./UserNav";
 import styles from "./TopBar.module.scss";
 
 type TopBarProps = {
 	theme: Theme;
 	onToggleTheme: VoidFunction;
+	isMobileViewport: boolean;
+	isNotificationsOpen: boolean;
+	isProfileOpen: boolean;
+	onToggleNotifications: VoidFunction;
+	onToggleProfile: VoidFunction;
 };
 
 export const TopBar = (props: TopBarProps): JSX.Element => {
 	return (
-		<header class={styles.topBar}>
-			<div class={styles.identity}>
+		<header class={styles.topBar} data-ui="top-bar">
+			<div class={styles.identity} data-slot="top-bar-identity">
 				<span class={styles.eyebrow}>Moku Work</span>
-				<div class={styles.title}>
-					<strong>Workspace Shell</strong>
-					<span class={styles.context}>Moku / Product</span>
-					<ChevronDown size={16} strokeWidth={2} />
-				</div>
+				<DepartmentSelector />
 			</div>
 
-			<button class={styles.themeButton} type="button" onClick={props.onToggleTheme}>
-				<span class={styles.themeLabel}>{props.theme === "dark" ? "Dark" : "Light"}</span>
-			</button>
+			<div class={styles.controls} data-slot="top-bar-controls">
+				<div class={styles.actions} data-slot="top-bar-actions">
+					<For each={topBarActions}>
+						{(item): JSX.Element => {
+							const Icon = item.icon;
 
-			<div class={styles.actions}>
-				<For each={topBarActions}>
-					{(item): JSX.Element => {
-						const Icon = item.icon;
+							return (
+								<button class={styles.actionButton} type="button" aria-label={item.label} title={item.label} data-slot="top-bar-action" data-action-id={item.id}>
+									<Icon size={18} strokeWidth={2} />
+								</button>
+							);
+						}}
+					</For>
+				</div>
 
-						return (
-							<button class={styles.actionButton} type="button" aria-label={item.label} title={item.label}>
-								<Icon size={18} strokeWidth={2} />
-							</button>
-						);
-					}}
-				</For>
+				<NotificationsNav
+					isMobileViewport={props.isMobileViewport}
+					isMobileWorkspaceOpen={props.isNotificationsOpen}
+					onToggleMobileWorkspace={props.onToggleNotifications}
+				/>
+				<ThemeToggle theme={props.theme} onToggle={props.onToggleTheme} />
+				<UserNav
+					isMobileViewport={props.isMobileViewport}
+					isMobileWorkspaceOpen={props.isProfileOpen}
+					onToggleMobileWorkspace={props.onToggleProfile}
+				/>
 			</div>
 		</header>
 	);

Frontend/src/components/shell/TopBar/UserNav.module.scss

@@ -0,0 +1,5 @@
+.root {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+}

Frontend/src/components/shell/TopBar/UserNav.tsx

@@ -0,0 +1,38 @@
+import { createUniqueId, Show, type JSX } from "solid-js";
+import { ProfileMenu } from "./ProfileMenu";
+import { UserNavButton } from "./UserNavButton";
+import { createDesktopMenuController } from "./createDesktopMenuController";
+import styles from "./UserNav.module.scss";
+
+type UserNavProps = {
+	isMobileViewport: boolean;
+	isMobileWorkspaceOpen: boolean;
+	onToggleMobileWorkspace: VoidFunction;
+};
+
+export const UserNav = (props: UserNavProps): JSX.Element => {
+	const menuId = createUniqueId();
+
+	return (
+		<Show
+			when={props.isMobileViewport}
+			fallback={<DesktopUserNav />}
+		>
+			<div class={styles.root}>
+				<UserNavButton isOpen={props.isMobileWorkspaceOpen} menuId={menuId} onToggle={props.onToggleMobileWorkspace} />
+			</div>
+		</Show>
+	);
+};
+
+const DesktopUserNav = (): JSX.Element => {
+	const controller = createDesktopMenuController();
+	const menuId = createUniqueId();
+
+	return (
+		<div class={styles.root} ref={controller.setRootRef}>
+			<UserNavButton isOpen={controller.isOpen()} menuId={menuId} onToggle={controller.toggleMenu} />
+			{controller.isOpen() ? <ProfileMenu id={menuId} menuRef={controller.setMenuRef} onSelect={controller.closeMenu} /> : null}
+		</div>
+	);
+};

Frontend/src/components/shell/TopBar/UserNavButton.module.scss

@@ -0,0 +1,105 @@
+.userButton {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  margin-left: var(--space-1);
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  overflow: hidden;
+  transition:
+    transform 180ms var(--easing-standard),
+    color 220ms var(--easing-standard);
+}
+
+.userButton:hover {
+  transform: scale(1.05);
+  color: var(--color-text);
+}
+
+.userButtonOpen {
+  color: var(--color-text);
+}
+
+.userButton:hover .spinContainer,
+.userButtonOpen .spinContainer {
+  animation-play-state: running;
+  opacity: 1;
+}
+
+.userButton:focus-visible {
+  outline: none;
+  color: var(--color-text);
+  box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-strong) 28%, transparent);
+}
+
+.spinContainer {
+  position: absolute;
+  inset: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.72;
+  transition: opacity 220ms var(--easing-standard);
+  animation: spin-reverse 1.5s ease-in-out infinite reverse;
+  animation-play-state: paused;
+  pointer-events: none;
+}
+
+.spinRing {
+  width: 100%;
+  height: 100%;
+  border-radius: 999px;
+  background:
+    conic-gradient(
+      from 0deg,
+      transparent 0deg 28deg,
+      var(--color-primary-1) 28deg 118deg,
+      transparent 118deg 148deg,
+      var(--color-primary-2) 148deg 238deg,
+      transparent 238deg 268deg,
+      var(--color-primary-3) 268deg 358deg,
+      transparent 358deg 360deg
+    );
+  mask: radial-gradient(circle, transparent 63%, black 66%);
+  -webkit-mask: radial-gradient(circle, transparent 63%, black 66%);
+  animation: spin-forward 14s linear infinite;
+}
+
+.userCore {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 78%;
+  height: 78%;
+  border-radius: 999px;
+  background: var(--color-surface-muted);
+}
+
+@keyframes spin-forward {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin-reverse {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(-360deg);
+  }
+}

Frontend/src/components/shell/TopBar/UserNavButton.tsx

@@ -0,0 +1,37 @@
+// Path: Frontend/src/components/shell/TopBar/UserNavButton.tsx
+
+import type { JSX } from "solid-js";
+import { User } from "../../../lib/icons";
+import styles from "./UserNavButton.module.scss";
+
+type UserNavButtonProps = {
+	isOpen: boolean;
+	menuId: string;
+	onToggle: () => void;
+};
+
+export const UserNavButton = (props: UserNavButtonProps): JSX.Element => {
+	return (
+		<button
+			classList={{
+				[styles.userButton]: true,
+				[styles.userButtonOpen]: props.isOpen,
+			}}
+			type="button"
+			aria-label={props.isOpen ? "Close profile menu" : "Open profile menu"}
+			title={props.isOpen ? "Close profile menu" : "Open profile menu"}
+			aria-haspopup="menu"
+			aria-controls={props.menuId}
+			aria-expanded={props.isOpen}
+			onClick={props.onToggle}
+		>
+			<span class={styles.spinContainer} aria-hidden="true">
+				<span class={styles.spinRing} />
+			</span>
+
+			<span class={styles.userCore} aria-hidden="true">
+				<User size={16} strokeWidth={2.2} />
+			</span>
+		</button>
+	);
+};

Frontend/src/components/shell/TopBar/createDesktopMenuController.ts

@@ -0,0 +1,72 @@
+import { createEffect, createSignal, onCleanup } from "solid-js";
+
+type DesktopMenuController = {
+	isOpen: () => boolean;
+	rootRef: HTMLDivElement | undefined;
+	menuRef: HTMLDivElement | undefined;
+	setRootRef: (element: HTMLDivElement) => void;
+	setMenuRef: (element: HTMLDivElement) => void;
+	closeMenu: VoidFunction;
+	toggleMenu: VoidFunction;
+};
+
+// Shared desktop popover behavior for top-bar menus.
+export const createDesktopMenuController = (): DesktopMenuController => {
+	const [isOpen, setIsOpen] = createSignal(false);
+	let rootRef: HTMLDivElement | undefined;
+	let menuRef: HTMLDivElement | undefined;
+
+	const closeMenu = (): void => {
+		setIsOpen(false);
+	};
+
+	const toggleMenu = (): void => {
+		setIsOpen((open) => !open);
+	};
+
+	createEffect(() => {
+		if (!isOpen()) return;
+
+		const handlePointerDown = (event: PointerEvent): void => {
+			if (!rootRef) return;
+
+			const target = event.target;
+			if (target instanceof Node && !rootRef.contains(target)) {
+				closeMenu();
+			}
+		};
+
+		const handleKeyDown = (event: KeyboardEvent): void => {
+			if (event.key === "Escape") {
+				closeMenu();
+			}
+		};
+
+		document.addEventListener("pointerdown", handlePointerDown);
+		document.addEventListener("keydown", handleKeyDown);
+		menuRef?.querySelector<HTMLButtonElement>("[role='menuitem']")?.focus();
+
+		onCleanup(() => {
+			document.removeEventListener("pointerdown", handlePointerDown);
+			document.removeEventListener("keydown", handleKeyDown);
+		});
+	});
+
+	return {
+		isOpen,
+		get rootRef() {
+			return rootRef;
+		},
+		get menuRef() {
+			return menuRef;
+		},
+		setRootRef: (element: HTMLDivElement): void => {
+			rootRef = element;
+		},
+		setMenuRef: (element: HTMLDivElement): void => {
+			menuRef = element;
+		},
+		closeMenu,
+		toggleMenu,
+	};
+};

Frontend/src/components/shell/WorkspaceContextMenu/WorkspaceContextMenu.module.scss

@@ -0,0 +1,194 @@
+.menu {
+	--context-menu-width: 13.5rem;
+	position: fixed;
+	width: min(var(--context-menu-width), calc(100vw - (var(--space-4) * 2)));
+	display: grid;
+	gap: 0;
+	padding: var(--space-1);
+	border: 1px solid color-mix(in srgb, var(--color-border-strong) 56%, transparent);
+	border-radius: calc(var(--radius-md) + (var(--space-1) / 2));
+	background: var(--color-surface);
+	box-shadow: var(--shadow-soft);
+	z-index: 2147483647;
+	user-select: none;
+}
+
+.header {
+	display: grid;
+	gap: calc(var(--space-1) / 2);
+	padding: var(--space-2) calc(var(--space-2) + (var(--space-1) / 2));
+}
+
+.eyebrow {
+	@include text-caption;
+	color: var(--color-text-muted);
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+}
+
+.title {
+	@include text-label;
+	color: var(--color-text);
+	font-weight: var(--font-weight-title);
+}
+
+.sectionList {
+	display: grid;
+	gap: 0;
+}
+
+.sectionListCompact {
+	gap: calc(var(--space-1) / 2);
+}
+
+.section {
+	display: grid;
+	gap: 0;
+}
+
+.section:first-child {
+	padding-top: calc(var(--space-1) / 2);
+}
+
+.section + .section {
+	margin-top: calc(var(--space-1) / 2);
+	padding-top: var(--space-2);
+	border-top: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
+}
+
+.sectionLabel {
+	@include text-caption;
+	color: var(--color-text-subtle);
+	padding: 0 var(--space-2);
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+}
+
+.actionList {
+	display: grid;
+	gap: 0;
+}
+
+.actionItem {
+	position: relative;
+}
+
+.action {
+	width: 100%;
+	min-height: calc(var(--control-size-md) - var(--space-2));
+	display: inline-flex;
+	align-items: center;
+	justify-content: flex-start;
+	gap: var(--space-2);
+	padding: var(--space-2) calc(var(--space-2) + (var(--space-1) / 2));
+	border: 1px solid transparent;
+	border-radius: var(--radius-sm);
+	background: transparent;
+	color: var(--color-text);
+	text-align: left;
+	font-size: var(--font-size-label);
+	line-height: var(--line-height-label);
+	font-weight: var(--font-weight-label);
+	transition:
+		background var(--motion-duration-fast) var(--motion-ease-standard),
+		border-color var(--motion-duration-fast) var(--motion-ease-standard),
+		color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.actionCreate {
+	border-color: transparent;
+	background: transparent;
+	font-weight: var(--font-weight-title);
+	box-shadow: none;
+}
+
+.actionCreate:hover,
+.actionCreate:focus-visible,
+.actionCreate.actionSubmenuOpen {
+	background: color-mix(in srgb, var(--color-surface-hover) 82%, var(--color-surface));
+	border-color: color-mix(in srgb, var(--color-border) 72%, transparent);
+}
+
+.actionCreateIcon {
+	width: calc(var(--control-size-md) - var(--space-3));
+	height: calc(var(--control-size-md) - var(--space-3));
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--radius-sm);
+	background: color-mix(in srgb, var(--color-surface-hover) 72%, var(--color-surface));
+	color: var(--color-text);
+	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 74%, transparent);
+}
+
+.actionLabel {
+	min-width: 0;
+}
+
+.actionMeta {
+	margin-left: auto;
+	display: inline-flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: var(--space-2);
+	padding-left: var(--space-3);
+}
+
+.actionShortcut {
+	color: var(--color-text-muted);
+	font-size: var(--font-size-caption);
+	line-height: var(--line-height-caption);
+	font-weight: var(--font-weight-caption);
+	white-space: nowrap;
+}
+
+.actionChevron {
+	color: var(--color-text-subtle);
+	flex: 0 0 auto;
+}
+
+.actionSubmenuOpen {
+	background: color-mix(in srgb, var(--color-surface-hover) 82%, var(--color-surface));
+	border-color: color-mix(in srgb, var(--color-border-strong) 72%, transparent);
+}
+
+.action:hover,
+.action:focus-visible {
+	background: color-mix(in srgb, var(--color-surface-hover) 78%, var(--color-surface));
+	border-color: color-mix(in srgb, var(--color-border) 72%, transparent);
+}
+
+.actionDanger {
+	color: var(--color-danger-text, var(--color-text));
+}
+
+.actionDanger:hover,
+.actionDanger:focus-visible {
+	background: color-mix(in srgb, var(--color-danger-soft, var(--color-surface-hover)) 72%, transparent);
+	border-color: color-mix(in srgb, var(--color-danger-border, var(--color-border)) 72%, transparent);
+	color: var(--color-danger-text, var(--color-text));
+}
+
+.submenu {
+	position: absolute;
+	top: calc(var(--space-1) * -1);
+	left: calc(100% + var(--space-2));
+	width: min(var(--context-menu-width), calc(100vw - (var(--space-4) * 2)));
+	padding: var(--space-1);
+	border: 1px solid color-mix(in srgb, var(--color-border-strong) 56%, transparent);
+	border-radius: calc(var(--radius-md) + (var(--space-1) / 2));
+	background: var(--color-surface);
+	box-shadow: var(--shadow-soft);
+	z-index: 2147483647;
+}
+
+.submenuList {
+	display: grid;
+	gap: var(--space-1);
+}
+
+@include respond-down(mobile) {
+	.menu {
+		display: none;
+	}
+}

Frontend/src/components/shell/WorkspaceContextMenu/WorkspaceContextMenu.tsx

@@ -0,0 +1,242 @@
+import { For, Show, createEffect, createMemo, createSignal, onMount, type JSX } from "solid-js";
+import { Portal } from "solid-js/web";
+import { ChevronRight, Plus } from "../../../lib/icons";
+import {
+	getWorkspaceContextMenuEyebrow,
+	getWorkspaceContextMenuSections,
+	type WorkspaceContextMenuAction,
+	type WorkspaceContextMenuShortcut,
+	type WorkspaceContextMenuTarget,
+} from "../data/shell.data";
+import styles from "./WorkspaceContextMenu.module.scss";
+
+type ShortcutPlatform = "mac" | "windows";
+
+type NavigatorWithUserAgentData = Navigator & {
+	userAgentData?: {
+		platform?: string;
+	};
+};
+
+type WorkspaceContextMenuPosition = {
+	x: number;
+	y: number;
+};
+
+type WorkspaceContextMenuProps = {
+	target: WorkspaceContextMenuTarget | null;
+	position: WorkspaceContextMenuPosition | null;
+	onClose: VoidFunction;
+	onSelect: (action: WorkspaceContextMenuAction, target: WorkspaceContextMenuTarget) => void;
+	menuRef: (element: HTMLDivElement) => void;
+};
+
+const getShortcutPlatform = (): ShortcutPlatform => {
+	if (typeof navigator === "undefined") {
+		return "mac";
+	}
+
+	const navigatorWithUserAgentData = navigator as NavigatorWithUserAgentData;
+
+	const platform =
+		typeof navigatorWithUserAgentData.userAgentData?.platform === "string"
+			? navigatorWithUserAgentData.userAgentData.platform
+			: navigator.platform;
+
+	return /mac|iphone|ipad|ipod/i.test(platform) ? "mac" : "windows";
+};
+
+const formatShortcut = (shortcut: WorkspaceContextMenuShortcut, platform: ShortcutPlatform): string => {
+	const keyLabel = (() => {
+		switch (shortcut.key) {
+			case "enter":
+				return platform === "mac" ? "↩" : "Enter";
+			case "delete":
+				return platform === "mac" ? "⌫" : "Del";
+			default:
+				return shortcut.key.toUpperCase();
+		}
+	})();
+
+	const modifierLabels =
+		shortcut.modifiers?.map((modifier) => {
+			switch (modifier) {
+				case "meta":
+					return platform === "mac" ? "⌘" : "Ctrl";
+				case "alt":
+					return platform === "mac" ? "⌥" : "Alt";
+				case "shift":
+					return platform === "mac" ? "⇧" : "Shift";
+			}
+		}) ?? [];
+
+	if (platform === "mac") {
+		return `${modifierLabels.join("")}${keyLabel}`;
+	}
+
+	return [...modifierLabels, keyLabel].join("+");
+};
+
+export const WorkspaceContextMenu = (props: WorkspaceContextMenuProps): JSX.Element => {
+	const [activeSubmenuActionId, setActiveSubmenuActionId] = createSignal<string | null>(null);
+	const [shortcutPlatform, setShortcutPlatform] = createSignal<ShortcutPlatform>("mac");
+	const sections = createMemo(() => (props.target ? getWorkspaceContextMenuSections(props.target) : []));
+	const handleActionSelect = (action: WorkspaceContextMenuAction, target: WorkspaceContextMenuTarget): void => {
+		props.onSelect(action, target);
+		props.onClose();
+	};
+	const menuState = createMemo<{
+		target: WorkspaceContextMenuTarget;
+		position: WorkspaceContextMenuPosition;
+	} | null>(() =>
+		props.target && props.position
+			? {
+				target: props.target,
+				position: props.position,
+			}
+			: null,
+	);
+	const showHeader = (): boolean => props.target?.kind !== "workspace";
+	const sectionHasLabel = createMemo(() => sections().some((section) => Boolean(section.label)));
+
+	onMount(() => {
+		setShortcutPlatform(getShortcutPlatform());
+	});
+
+	createEffect(() => {
+		void props.target;
+		setActiveSubmenuActionId(null);
+	});
+
+	return (
+		<Show when={menuState()}>
+			{(resolvedMenuState): JSX.Element => {
+				const target = resolvedMenuState().target;
+				const position = resolvedMenuState().position;
+
+				return (
+					<Portal>
+						<div
+							ref={props.menuRef}
+							class={styles.menu}
+							role="menu"
+							aria-label={`${target.label} context menu`}
+							data-ui="workspace-context-menu"
+							data-target-kind={target.kind}
+							data-item-type={target.kind === "item" ? target.itemType : undefined}
+							style={{
+								left: `${position.x}px`,
+								top: `${position.y}px`,
+							}}
+						>
+							<Show when={target.kind !== "workspace"}>
+								<header class={styles.header} data-slot="context-menu-header">
+									<span class={styles.eyebrow}>{getWorkspaceContextMenuEyebrow(target)}</span>
+									<strong class={styles.title}>{target.label}</strong>
+								</header>
+							</Show>
+
+							<div classList={{ [styles.sectionList]: true, [styles.sectionListCompact]: !sectionHasLabel() }} data-slot="context-menu-sections">
+								<For each={sections()}>
+									{(section): JSX.Element => (
+											<section class={styles.section} data-slot="context-menu-section" data-section-id={section.id}>
+												<Show when={section.label}>
+													<span class={styles.sectionLabel}>{section.label}</span>
+												</Show>
+
+												<div class={styles.actionList} data-slot="context-menu-action-list">
+													<For each={section.items}>
+														{(action): JSX.Element => {
+															const isSubmenuOpen = () => activeSubmenuActionId() === action.id;
+
+															return (
+														<div
+															class={styles.actionItem}
+															data-slot="context-menu-action-item"
+															data-action-id={action.id}
+															onMouseEnter={() => {
+																		setActiveSubmenuActionId(action.children ? action.id : null);
+																	}}
+																>
+															<button
+																type="button"
+																role="menuitem"
+																		classList={{
+																			[styles.action]: true,
+																			[styles.actionCreate]: action.id === "create",
+																	[styles.actionDanger]: action.tone === "danger",
+																	[styles.actionSubmenuOpen]: isSubmenuOpen(),
+																}}
+																data-slot="context-menu-action"
+																data-action-id={action.id}
+																data-tone={action.tone ?? "default"}
+															onClick={() => {
+																if (action.children) {
+																	setActiveSubmenuActionId(isSubmenuOpen() ? null : action.id);
+																	return;
+																}
+
+																handleActionSelect(action, target);
+															}}
+														>
+																		<Show when={action.id === "create"}>
+																			<span class={styles.actionCreateIcon} aria-hidden="true">
+																				<Plus size={14} strokeWidth={2.25} />
+																			</span>
+																		</Show>
+																		<span class={styles.actionLabel}>{action.label}</span>
+																		<div class={styles.actionMeta}>
+																			<Show when={action.shortcut}>
+																				<span class={styles.actionShortcut}>{formatShortcut(action.shortcut!, shortcutPlatform())}</span>
+																			</Show>
+																			<Show when={action.children}>
+																				<ChevronRight class={styles.actionChevron} size={16} strokeWidth={2} />
+																			</Show>
+																		</div>
+																	</button>
+
+																	<Show when={action.children && isSubmenuOpen()}>
+																<div class={styles.submenu} role="menu" aria-label={`${action.label} submenu`} data-slot="context-menu-submenu">
+																	<div class={styles.submenuList} data-slot="context-menu-submenu-list">
+																				<For each={action.children ?? []}>
+																					{(childAction): JSX.Element => (
+																			<button
+																				type="button"
+																				role="menuitem"
+																	classList={{
+																					[styles.action]: true,
+																					[styles.actionDanger]: childAction.tone === "danger",
+																				}}
+																				data-slot="context-menu-submenu-action"
+																				data-action-id={childAction.id}
+																				data-tone={childAction.tone ?? "default"}
+																				onClick={() => handleActionSelect(childAction, target)}
+																>
+																							<span class={styles.actionLabel}>{childAction.label}</span>
+																							<div class={styles.actionMeta}>
+																								<Show when={childAction.shortcut}>
+																									<span class={styles.actionShortcut}>{formatShortcut(childAction.shortcut!, shortcutPlatform())}</span>
+																								</Show>
+																							</div>
+																						</button>
+																					)}
+																				</For>
+																			</div>
+																		</div>
+																	</Show>
+																</div>
+															);
+														}}
+													</For>
+												</div>
+											</section>
+										)}
+								</For>
+							</div>
+						</div>
+					</Portal>
+				);
+			}}
+		</Show>
+	);
+};

Frontend/src/components/shell/WorkspaceContextMenu/createWorkspaceContextMenuController.ts

@@ -0,0 +1,134 @@
+import { createEffect, createSignal, onCleanup } from "solid-js";
+import type { WorkspaceContextMenuTarget } from "../data/shell.data";
+
+type WorkspaceContextMenuState = {
+	target: WorkspaceContextMenuTarget;
+	x: number;
+	y: number;
+};
+
+const readRootPixelToken = (name: string, fallback: number): number => {
+	if (typeof window === "undefined") {
+		return fallback;
+	}
+
+	const value = window.getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+	const parsed = Number.parseFloat(value);
+
+	if (!Number.isFinite(parsed)) {
+		return fallback;
+	}
+
+	if (value.endsWith("px")) {
+		return parsed;
+	}
+
+	return parsed * 16;
+};
+
+const clampMenuPosition = (value: number, min: number, max: number): number => {
+	if (max <= min) {
+		return min;
+	}
+
+	return Math.min(Math.max(value, min), max);
+};
+
+export const createWorkspaceContextMenuController = () => {
+	const [menuState, setMenuState] = createSignal<WorkspaceContextMenuState | null>(null);
+	let menuRef: HTMLDivElement | undefined;
+
+	const closeMenu = (): void => {
+		setMenuState(null);
+	};
+
+	const repositionMenu = (): void => {
+		if (typeof window === "undefined" || !menuRef) {
+			return;
+		}
+
+		const current = menuState();
+
+		if (!current) {
+			return;
+		}
+
+		const viewportPadding = readRootPixelToken("--space-4", 16);
+		const rect = menuRef.getBoundingClientRect();
+		const nextX = clampMenuPosition(current.x, viewportPadding, window.innerWidth - rect.width - viewportPadding);
+		const nextY = clampMenuPosition(current.y, viewportPadding, window.innerHeight - rect.height - viewportPadding);
+
+		if (nextX === current.x && nextY === current.y) {
+			return;
+		}
+
+		setMenuState({ ...current, x: nextX, y: nextY });
+	};
+
+	const openMenu = (event: MouseEvent, target: WorkspaceContextMenuTarget): void => {
+		event.preventDefault();
+		setMenuState({ target, x: event.clientX, y: event.clientY });
+	};
+
+	const openMenuFromElement = (element: HTMLElement, target: WorkspaceContextMenuTarget): void => {
+		const rect = element.getBoundingClientRect();
+		setMenuState({
+			target,
+			x: rect.left + rect.width / 2,
+			y: rect.top + rect.height / 2,
+		});
+	};
+
+	createEffect(() => {
+		if (!menuState()) {
+			return;
+		}
+
+		if (typeof window === "undefined") {
+			return;
+		}
+
+		const frame = window.requestAnimationFrame(() => {
+			repositionMenu();
+		});
+
+		const handlePointerDown = (event: PointerEvent): void => {
+			if (!menuRef?.contains(event.target as Node)) {
+				closeMenu();
+			}
+		};
+
+		const handleKeyDown = (event: KeyboardEvent): void => {
+			if (event.key === "Escape") {
+				closeMenu();
+			}
+		};
+
+		const handleViewportChange = (): void => {
+			closeMenu();
+		};
+
+		document.addEventListener("pointerdown", handlePointerDown);
+		window.addEventListener("resize", handleViewportChange);
+		window.addEventListener("scroll", handleViewportChange, true);
+		window.addEventListener("keydown", handleKeyDown);
+
+		onCleanup(() => {
+			window.cancelAnimationFrame(frame);
+			document.removeEventListener("pointerdown", handlePointerDown);
+			window.removeEventListener("resize", handleViewportChange);
+			window.removeEventListener("scroll", handleViewportChange, true);
+			window.removeEventListener("keydown", handleKeyDown);
+		});
+	});
+
+	return {
+		menuState,
+		openMenu,
+		openMenuFromElement,
+		closeMenu,
+		setMenuRef: (element: HTMLDivElement): void => {
+			menuRef = element;
+		},
+	};
+};

Frontend/src/components/shell/WorkspaceMobileActionSheet/WorkspaceMobileActionSheet.module.scss

@@ -0,0 +1,146 @@
+.layer {
+	display: none;
+}
+
+@include respond-down(mobile) {
+	.layer {
+		position: fixed;
+		inset: 0;
+		display: block;
+		z-index: var(--z-modal);
+	}
+
+	.backdrop {
+		position: absolute;
+		inset: 0;
+		border: 0;
+		background: color-mix(in srgb, black 52%, transparent);
+	}
+
+	.sheet {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		max-height: calc(100dvh - (var(--space-12) * 2));
+		display: grid;
+		gap: var(--space-3);
+		padding: var(--space-3) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
+		border-top: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
+		border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+		background: var(--color-surface);
+		box-shadow: var(--shadow-strong);
+		overflow: auto;
+	}
+
+	.handle {
+		width: var(--space-10);
+		height: var(--space-1);
+		margin: 0 auto;
+		border-radius: var(--radius-pill);
+		background: color-mix(in srgb, var(--color-text-muted) 24%, transparent);
+	}
+
+	.header {
+		display: flex;
+		align-items: start;
+		justify-content: space-between;
+		gap: var(--space-3);
+		padding-bottom: var(--space-3);
+		border-bottom: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
+	}
+
+	.headerCopy {
+		min-width: 0;
+		display: grid;
+		gap: calc(var(--space-1) / 2);
+	}
+
+	.eyebrow {
+		@include text-caption;
+		color: var(--color-text-muted);
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+	}
+
+	.title {
+		@include text-title;
+		color: var(--color-text);
+		font-weight: var(--font-weight-semibold);
+	}
+
+	.closeButton {
+		flex: 0 0 auto;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--control-size-md);
+		height: var(--control-size-md);
+		padding: 0;
+		border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
+		border-radius: var(--radius-pill);
+		background: color-mix(in srgb, var(--color-surface) 84%, var(--color-surface-elevated, var(--color-surface)) 16%);
+		color: var(--color-text-subtle);
+	}
+
+	.sectionList {
+		display: grid;
+		gap: var(--space-3);
+	}
+
+	.section {
+		display: grid;
+		gap: var(--space-2);
+	}
+
+	.section + .section {
+		padding-top: var(--space-3);
+		border-top: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
+	}
+
+	.sectionLabel {
+		@include text-caption;
+		padding-inline: var(--space-1);
+		color: var(--color-text-muted);
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+	}
+
+	.actionList {
+		display: grid;
+		overflow: hidden;
+		border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
+		border-radius: var(--radius-lg);
+		background: color-mix(in srgb, var(--color-surface) 88%, var(--color-surface-elevated, var(--color-surface)) 12%);
+	}
+
+	.action {
+		min-width: 0;
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		min-height: calc(var(--control-size-lg) + var(--space-2));
+		padding: 0 var(--space-3);
+		border: 0;
+		background: transparent;
+		color: var(--color-text);
+		text-align: left;
+	}
+
+	.action:active {
+		background: color-mix(in srgb, var(--color-text) 6%, transparent);
+	}
+
+	.action + .action {
+		border-top: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
+	}
+
+	.actionLabel {
+		@include text-label;
+	}
+
+	.actionDanger {
+		color: var(--color-danger-text, var(--color-text));
+	}
+}

Frontend/src/components/shell/WorkspaceMobileActionSheet/WorkspaceMobileActionSheet.tsx

@@ -0,0 +1,134 @@
+import { For, Show, createMemo, type JSX } from "solid-js";
+import { Portal } from "solid-js/web";
+import { X } from "../../../lib/icons";
+import {
+	getWorkspaceContextMenuEyebrow,
+	getWorkspaceContextMenuSections,
+	type WorkspaceContextMenuAction,
+	type WorkspaceContextMenuSection,
+	type WorkspaceContextMenuTarget,
+} from "../data/shell.data";
+import styles from "./WorkspaceMobileActionSheet.module.scss";
+
+type WorkspaceMobileActionSheetProps = {
+	target: WorkspaceContextMenuTarget | null;
+	onClose: VoidFunction;
+	onSelect: (action: WorkspaceContextMenuAction, target: WorkspaceContextMenuTarget) => void;
+};
+
+type FlattenedActionSection = {
+	id: string;
+	label?: string;
+	items: readonly WorkspaceContextMenuAction[];
+};
+
+const flattenMobileSections = (
+	sections: readonly WorkspaceContextMenuSection[],
+): readonly FlattenedActionSection[] => {
+	// Mobile uses a flat action-sheet model, so desktop flyout groups become
+	// standalone labeled sections instead of nested menus.
+	return sections.flatMap((section) => {
+		const directActions = section.items.filter((action) => !action.children?.length);
+		const nestedSections = section.items
+			.filter((action) => action.children?.length)
+			.map((action) => ({
+				id: `${section.id}-${action.id}`,
+				label: action.label,
+				items: action.children ?? [],
+			}));
+
+		const flattenedSections: FlattenedActionSection[] = [];
+
+		if (directActions.length > 0) {
+			flattenedSections.push({
+				id: section.id,
+				label: section.label,
+				items: directActions,
+			});
+		}
+
+		return [...flattenedSections, ...nestedSections];
+	});
+};
+
+export const WorkspaceMobileActionSheet = (props: WorkspaceMobileActionSheetProps): JSX.Element => {
+	const sheetState = createMemo(() => {
+		if (!props.target) {
+			return null;
+		}
+
+		return {
+			target: props.target,
+			sections: flattenMobileSections(getWorkspaceContextMenuSections(props.target)),
+		};
+	});
+
+	const handleActionSelect = (action: WorkspaceContextMenuAction, target: WorkspaceContextMenuTarget): void => {
+		props.onSelect(action, target);
+		props.onClose();
+	};
+
+	return (
+		<Show when={sheetState()}>
+			{(sheetState): JSX.Element => {
+				const target = sheetState().target;
+				const sections = sheetState().sections;
+
+				return (
+					<Portal>
+					<div class={styles.layer} data-ui="workspace-mobile-action-sheet" data-target-kind={target.kind} data-item-type={target.kind === "item" ? target.itemType : undefined}>
+						<button class={styles.backdrop} type="button" aria-label="Close action sheet" data-slot="mobile-action-sheet-backdrop" onClick={props.onClose} />
+
+						<section class={styles.sheet} aria-label={`${target.label} actions`} data-slot="mobile-action-sheet-panel">
+							<div class={styles.handle} data-slot="mobile-action-sheet-handle" aria-hidden="true" />
+
+							<header class={styles.header} data-slot="mobile-action-sheet-header">
+								<div class={styles.headerCopy} data-slot="mobile-action-sheet-header-copy">
+										<span class={styles.eyebrow}>{getWorkspaceContextMenuEyebrow(target)}</span>
+										<strong class={styles.title}>{target.label}</strong>
+									</div>
+
+								<button class={styles.closeButton} type="button" aria-label="Close action sheet" data-slot="mobile-action-sheet-close" onClick={props.onClose}>
+										<X size={18} strokeWidth={2} />
+									</button>
+								</header>
+
+							<div class={styles.sectionList} data-slot="mobile-action-sheet-sections">
+									<For each={sections}>
+										{(section): JSX.Element => (
+											<section class={styles.section} data-slot="mobile-action-sheet-section" data-section-id={section.id}>
+												<Show when={section.label}>
+													<span class={styles.sectionLabel}>{section.label}</span>
+												</Show>
+
+												<div class={styles.actionList} data-slot="mobile-action-sheet-action-list">
+													<For each={section.items}>
+														{(action): JSX.Element => (
+															<button
+																type="button"
+																classList={{
+																	[styles.action]: true,
+																	[styles.actionDanger]: action.tone === "danger",
+																}}
+																data-slot="mobile-action-sheet-action"
+																data-action-id={action.id}
+																data-tone={action.tone ?? "default"}
+																onClick={() => handleActionSelect(action, target)}
+															>
+																<span class={styles.actionLabel}>{action.label}</span>
+															</button>
+														)}
+													</For>
+												</div>
+											</section>
+										)}
+									</For>
+								</div>
+							</section>
+						</div>
+					</Portal>
+				);
+			}}
+		</Show>
+	);
+};

Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.module.scss

@@ -1,6 +1,6 @@
 .sidebar {
   --sidebar-nav-item-min-height: var(--control-size-lg);
-  --sidebar-dock-clearance: 8rem;
+  position: relative;
   min-width: 0;
   min-height: 0;
   display: grid;
@@ -8,28 +8,64 @@
   gap: var(--space-4);
   padding: var(--space-4);
   overflow: hidden;
+  border-top-left-radius: inherit;
+  isolation: isolate;
 }
 
 .header {
   display: grid;
-  gap: 0.2rem;
+  gap: var(--space-3);
 }
 
-.eyebrow {
-  @include text-caption;
+.headerActions {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: var(--space-2);
+  justify-items: stretch;
+}
+
+.headerControls {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+}
+
+.headerDrawerOpen {
+  z-index: 4;
+}
+
+.headerActionButton {
+  width: 100%;
+  min-height: var(--control-size-md);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid color-mix(in srgb, var(--color-border-strong) 44%, transparent);
+  border-radius: var(--radius-pill);
+  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
   color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
+  box-shadow: var(--shadow-soft);
+  transition:
+    background 160ms var(--easing-standard),
+    color 160ms var(--easing-standard),
+    border-color 160ms var(--easing-standard),
+    transform 180ms var(--easing-standard);
 }
 
-.title {
-  @include text-title;
+.headerActionButton:hover,
+.headerActionButton:focus-visible {
+  background: var(--color-surface-hover);
+  border-color: var(--color-border);
+  color: var(--color-text);
 }
 
-.meta {
-  @include text-caption;
-  color: var(--color-text-muted);
-  max-width: 28ch;
+.headerActionButton:hover {
+  transform: translateY(-1px);
+}
+
+.headerCollapseButton {
+  background: color-mix(in srgb, var(--color-accent-soft) 58%, transparent);
+  color: var(--color-accent-strong);
 }
 
 .section {
@@ -37,6 +73,17 @@
   grid-template-rows: auto minmax(0, 1fr);
   gap: var(--space-2);
   min-height: 0;
+  position: relative;
+  z-index: 1;
+  transition:
+    opacity 180ms var(--easing-standard),
+    transform 220ms var(--easing-standard);
+}
+
+.sectionHidden {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(var(--space-3));
 }
 
 .navScroller {
@@ -44,7 +91,7 @@
   overflow-y: auto;
   overscroll-behavior: contain;
   padding-right: var(--space-1);
-  padding-bottom: calc(var(--space-4) + var(--sidebar-dock-clearance));
+	padding-bottom: calc(var(--space-4) + var(--sidebar-dock-clearance, var(--shell-dock-clearance)));
   margin-right: calc(var(--space-1) * -1);
 }
 
@@ -60,6 +107,22 @@
   padding: 0;
 }
 
+.treeSectionLabel {
+  @include text-caption;
+  margin: var(--space-3) 0 var(--space-2);
+  padding: 0 var(--space-3);
+  color: var(--color-text-subtle);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.treeList {
+  list-style: none;
+  display: grid;
+  gap: var(--space-1);
+  padding: 0;
+}
+
 .navItem {
   width: 100%;
   min-width: 0;
@@ -74,11 +137,50 @@
   @include interactive-frame-hover(var(--color-surface-hover), transparent, var(--color-text));
 }
 
+.treeItem {
+  width: 100%;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: calc(var(--control-size-lg) - var(--space-2));
+  padding: var(--space-2) var(--space-3);
+  padding-left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
+  border: 1px solid transparent;
+  border-radius: var(--radius-lg);
+  background: transparent;
+  color: var(--color-text-muted);
+  text-align: left;
+  transition:
+    background 160ms var(--easing-standard),
+    color 160ms var(--easing-standard),
+    border-color 160ms var(--easing-standard),
+    transform 180ms var(--easing-standard);
+}
+
+.treeItem:hover,
+.treeItem:focus-visible {
+  background: var(--color-surface-hover);
+  color: var(--color-text);
+}
+
+.treeItemFolder {
+  color: var(--color-text);
+}
+
+.treeItemActive {
+  border-color: var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
+}
+
 .navItemActive {
   border-color: var(--color-border);
   background: var(--color-surface);
   color: var(--color-text);
-  box-shadow: var(--shadow-soft);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
 }
 
 .icon {
@@ -96,6 +198,52 @@
   color: var(--color-text-muted);
 }
 
+.sidebarCollapsed {
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-2);
+}
+
+.sidebarCollapsed .headerActions {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.sidebarCollapsed .headerControls {
+  justify-items: center;
+}
+
+.sidebarCollapsed .header {
+  justify-items: center;
+}
+
+.sidebarCollapsed .navScroller {
+  padding-right: 0;
+  margin-right: 0;
+}
+
+.sidebarCollapsed .navItem {
+  grid-template-columns: auto;
+  justify-content: center;
+  gap: 0;
+  min-height: calc(var(--control-size-lg) - var(--space-1));
+  padding: var(--space-2);
+  border-radius: var(--radius-md);
+}
+
+.sidebarCollapsed .label,
+.sidebarCollapsed .itemMeta,
+.sidebarCollapsed .treeSectionLabel,
+.sidebarCollapsed .treeList {
+  display: none;
+}
+
+.sidebarCollapsed .icon {
+  opacity: 1;
+}
+
+.sidebarCollapsed .section {
+  gap: var(--space-3);
+}
+
 @include respond-down(mobile) {
   .sidebar {
     display: none;

Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx

@@ -1,48 +1,277 @@
 // Path: Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx
 
-import { For, Show, type JSX } from "solid-js";
-import { workspaceSidebarItems } from "../data/shell.data";
+import { For, Show, createMemo, createSignal, type JSX } from "solid-js";
+import { ChevronLeft, ChevronRight } from "../../../lib/icons";
+import { ProjectSelector } from "../ProjectSelector/ProjectSelector";
+import {
+	activeProject,
+	createWorkspaceStaticTarget,
+	createWorkspaceSurfaceTarget,
+	createWorkspaceTreeTarget,
+	getWorkspaceNodeIcon,
+	workspaceSidebarHeaderActions,
+	workspaceStaticItems,
+	workspaceTree,
+	type WorkspaceContextMenuAction,
+	type WorkspaceContextMenuTarget,
+	type WorkspaceStaticItem,
+	type WorkspaceTreeNode,
+} from "../data/shell.data";
+import { WorkspaceContextMenu } from "../WorkspaceContextMenu/WorkspaceContextMenu";
+import { createWorkspaceContextMenuController } from "../WorkspaceContextMenu/createWorkspaceContextMenuController";
 import styles from "./WorkspaceSidebar.module.scss";
 
-export const WorkspaceSidebar = (): JSX.Element => {
-	return (
-		<aside class={styles.sidebar} aria-label="Workspace navigation">
-			<div class={styles.header}>
-				<span class={styles.eyebrow}>Workspace</span>
-				<h2 class={styles.title}>Product Operations</h2>
-				<p class={styles.meta}>A barebone shell for Moku’s first real workspace layout.</p>
-			</div>
+type WorkspaceSidebarProps = {
+	collapsed: boolean;
+	railCollapsed: boolean;
+	onToggleRailCollapse: () => void;
+};
 
-			<div class={styles.section}>
-				<span class={styles.sectionLabel}>Navigation</span>
-				<div class={styles.navScroller}>
-					<ul class={styles.navList} role="list">
-						<For each={workspaceSidebarItems}>
-							{(item): JSX.Element => {
-								const Icon = item.icon;
+const isContextMenuKeyboardTrigger = (event: KeyboardEvent): boolean => event.key === "ContextMenu" || (event.shiftKey && event.key === "F10");
+
+const WorkspaceHomeEntry = (props: {
+	item: WorkspaceStaticItem;
+	onOpenContextMenu: (event: MouseEvent, target: WorkspaceContextMenuTarget) => void;
+	onOpenContextMenuFromKeyboard: (element: HTMLElement, target: WorkspaceContextMenuTarget) => void;
+}): JSX.Element => {
+	const Icon = props.item.icon;
+	const target = createWorkspaceStaticTarget(props.item);
+
+	return (
+		<li>
+			<button
+				type="button"
+				classList={{
+					[styles.navItem]: true,
+					[styles.navItemActive]: !!props.item.active,
+				}}
+				aria-current={props.item.active ? "page" : undefined}
+				aria-label={props.item.label}
+				title={props.item.label}
+				data-slot="workspace-static-item"
+				data-target-kind={target.kind}
+				data-active={props.item.active ? "true" : "false"}
+				onContextMenu={(event): void => {
+					event.stopPropagation();
+					props.onOpenContextMenu(event, target);
+				}}
+				onKeyDown={(event): void => {
+					if (!isContextMenuKeyboardTrigger(event)) {
+						return;
+					}
+
+					event.preventDefault();
+					props.onOpenContextMenuFromKeyboard(event.currentTarget, target);
+				}}
+			>
+				<Icon class={styles.icon} size={18} strokeWidth={2} />
+				<span class={styles.label}>{props.item.label}</span>
+				<Show when={props.item.meta}>
+					<span class={styles.itemMeta}>{props.item.meta}</span>
+				</Show>
+			</button>
+		</li>
+	);
+};
+
+const WorkspaceTreeBranch = (props: {
+	nodes: readonly WorkspaceTreeNode[];
+	depth?: number;
+	onOpenContextMenu: (event: MouseEvent, target: WorkspaceContextMenuTarget) => void;
+	onOpenContextMenuFromKeyboard: (element: HTMLElement, target: WorkspaceContextMenuTarget) => void;
+}): JSX.Element => {
+	const depth = () => props.depth ?? 0;
+
+	return (
+		<ul class={styles.treeList} role="list">
+			<For each={props.nodes}>
+				{(node): JSX.Element => {
+					const Icon = getWorkspaceNodeIcon(node);
+					const target = createWorkspaceTreeTarget(node);
+
+					return (
+						<li>
+							<button
+								type="button"
+								classList={{
+									[styles.treeItem]: true,
+									[styles.treeItemActive]: !!node.active,
+									[styles.treeItemFolder]: node.kind === "folder",
+								}}
+								style={{ "--tree-depth": String(depth()) }}
+								aria-current={node.active ? "page" : undefined}
+								aria-label={node.label}
+								title={node.label}
+								data-slot="workspace-tree-item"
+								data-kind={node.kind}
+								data-item-type={node.kind === "item" ? node.itemType : undefined}
+								data-active={node.active ? "true" : "false"}
+								onContextMenu={(event): void => {
+									event.stopPropagation();
+									props.onOpenContextMenu(event, target);
+								}}
+								onKeyDown={(event): void => {
+									if (!isContextMenuKeyboardTrigger(event)) {
+										return;
+									}
+
+									event.preventDefault();
+									props.onOpenContextMenuFromKeyboard(event.currentTarget, target);
+								}}
+							>
+								<Icon class={styles.icon} size={18} strokeWidth={2} />
+								<span class={styles.label}>{node.label}</span>
+								<Show when={node.meta}>
+									<span class={styles.itemMeta}>{node.meta}</span>
+								</Show>
+							</button>
+
+							<Show when={node.children?.length}>
+								<WorkspaceTreeBranch
+									nodes={node.children ?? []}
+									depth={depth() + 1}
+									onOpenContextMenu={props.onOpenContextMenu}
+									onOpenContextMenuFromKeyboard={props.onOpenContextMenuFromKeyboard}
+								/>
+							</Show>
+						</li>
+					);
+				}}
+			</For>
+		</ul>
+	);
+};
+
+	export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
+	const [isProjectDrawerOpen, setIsProjectDrawerOpen] = createSignal(false);
+	const contextMenu = createWorkspaceContextMenuController();
+	const railToggleLabel = (): string => (props.railCollapsed ? "Expand server rail" : "Collapse server rail");
+	const sidebarContextMenuTarget = createWorkspaceSurfaceTarget(activeProject);
+	const contextMenuTarget = createMemo(() => contextMenu.menuState()?.target ?? null);
+	const contextMenuPosition = createMemo(() => {
+		const state = contextMenu.menuState();
+
+		return state
+			? {
+				x: state.x,
+				y: state.y,
+			}
+			: null;
+	});
+
+	const handleContextActionSelect = (_action: WorkspaceContextMenuAction, _target: WorkspaceContextMenuTarget): void => {
+		// Initial implementation only establishes the menu IA and placement.
+	};
+
+	return (
+		<>
+			<aside
+				classList={{
+					[styles.sidebar]: true,
+					[styles.sidebarCollapsed]: props.collapsed,
+				}}
+				aria-label="Left workspace sidebar"
+				data-ui="workspace-sidebar"
+				data-collapsed={props.collapsed ? "true" : "false"}
+				onContextMenu={(event): void => {
+					contextMenu.openMenu(event, sidebarContextMenuTarget);
+				}}
+			>
+				<div
+					classList={{
+						[styles.header]: true,
+						[styles.headerDrawerOpen]: isProjectDrawerOpen(),
+					}}
+					data-slot="workspace-sidebar-header"
+					data-drawer-open={isProjectDrawerOpen() ? "true" : "false"}
+				>
+					<div class={styles.headerActions} data-slot="workspace-sidebar-header-actions">
+						<button
+							type="button"
+							classList={{
+								[styles.headerActionButton]: true,
+								[styles.headerCollapseButton]: true,
+							}}
+							aria-label={railToggleLabel()}
+							title={railToggleLabel()}
+							data-slot="workspace-sidebar-rail-toggle"
+							onClick={props.onToggleRailCollapse}
+						>
+							{props.railCollapsed ? <ChevronRight size={16} strokeWidth={2} /> : <ChevronLeft size={16} strokeWidth={2} />}
+						</button>
+
+						<For each={workspaceSidebarHeaderActions}>
+							{(action): JSX.Element => {
+								const Icon = action.icon;
 
 								return (
-									<li>
-										<button
-											type="button"
-											classList={{
-												[styles.navItem]: true,
-												[styles.navItemActive]: !!item.active,
-											}}
-										>
-											<Icon class={styles.icon} size={18} strokeWidth={2} />
-											<span class={styles.label}>{item.label}</span>
-											<Show when={item.meta}>
-												<span class={styles.itemMeta}>{item.meta}</span>
-											</Show>
-										</button>
-									</li>
+									<button type="button" class={styles.headerActionButton} aria-label={action.label} title={action.label} data-slot="workspace-sidebar-header-action" data-action-id={action.id}>
+										<Icon size={16} strokeWidth={2} />
+									</button>
 								);
 							}}
 						</For>
-					</ul>
+					</div>
+
+					<div class={styles.headerControls} data-slot="workspace-sidebar-header-controls">
+						<ProjectSelector
+							compact={props.collapsed}
+							isOpen={isProjectDrawerOpen()}
+							onToggle={(): void => {
+								setIsProjectDrawerOpen(true);
+							}}
+							onClose={(): void => {
+								setIsProjectDrawerOpen(false);
+							}}
+						/>
+					</div>
 				</div>
-			</div>
-		</aside>
+
+				<div
+					classList={{
+						[styles.section]: true,
+						[styles.sectionHidden]: isProjectDrawerOpen(),
+					}}
+					data-slot="workspace-sidebar-section"
+				>
+					<Show when={!props.collapsed}>
+						<span class={styles.sectionLabel}>Workspace</span>
+					</Show>
+					<div class={styles.navScroller} data-slot="workspace-sidebar-nav-scroller">
+						<ul class={styles.navList} role="list" data-slot="workspace-static-list">
+							<For each={workspaceStaticItems}>
+								{(item): JSX.Element => (
+									<WorkspaceHomeEntry
+										item={item}
+										onOpenContextMenu={contextMenu.openMenu}
+										onOpenContextMenuFromKeyboard={contextMenu.openMenuFromElement}
+									/>
+								)}
+							</For>
+						</ul>
+
+						<Show when={!props.collapsed}>
+							<div class={styles.treeSectionLabel}>Items</div>
+						</Show>
+
+						<div data-slot="workspace-tree-root">
+						<WorkspaceTreeBranch
+							nodes={workspaceTree}
+							onOpenContextMenu={contextMenu.openMenu}
+							onOpenContextMenuFromKeyboard={contextMenu.openMenuFromElement}
+						/>
+						</div>
+					</div>
+				</div>
+			</aside>
+
+			<WorkspaceContextMenu
+				target={contextMenuTarget()}
+				position={contextMenuPosition()}
+				menuRef={contextMenu.setMenuRef}
+				onClose={contextMenu.closeMenu}
+				onSelect={handleContextActionSelect}
+			/>
+		</>
 	);
 };

Frontend/src/components/shell/createLongPressGesture.ts

@@ -0,0 +1,73 @@
+import type { JSX } from "solid-js";
+
+type PointerHandler = NonNullable<JSX.DOMAttributes<Element>["onPointerDown"]>;
+
+type LongPressGestureOptions = {
+	onLongPress: () => void;
+	delay?: number;
+	movementThreshold?: number;
+};
+
+type LongPressGestureHandlers = {
+	onPointerDown: PointerHandler;
+	onPointerMove: PointerHandler;
+	onPointerUp: PointerHandler;
+	onPointerCancel: PointerHandler;
+	onPointerLeave: PointerHandler;
+};
+
+export const createLongPressGesture = (options: LongPressGestureOptions): LongPressGestureHandlers => {
+	let timeoutId: number | undefined;
+	let originX = 0;
+	let originY = 0;
+
+	const delay = options.delay ?? 420;
+	const movementThreshold = options.movementThreshold ?? 10;
+
+	const clearPendingLongPress = (): void => {
+		if (typeof timeoutId === "number") {
+			window.clearTimeout(timeoutId);
+			timeoutId = undefined;
+		}
+	};
+
+	const onPointerDown: PointerHandler = (event): void => {
+		// Mobile long-press should only respond to the primary touch/pen pointer.
+		if (event.pointerType === "mouse" || !event.isPrimary) {
+			return;
+		}
+
+		originX = event.clientX;
+		originY = event.clientY;
+		clearPendingLongPress();
+		timeoutId = window.setTimeout(() => {
+			timeoutId = undefined;
+			options.onLongPress();
+		}, delay);
+	};
+
+	const onPointerMove: PointerHandler = (event): void => {
+		if (typeof timeoutId !== "number") {
+			return;
+		}
+
+		const deltaX = Math.abs(event.clientX - originX);
+		const deltaY = Math.abs(event.clientY - originY);
+
+		if (deltaX > movementThreshold || deltaY > movementThreshold) {
+			clearPendingLongPress();
+		}
+	};
+
+	const onPointerUp: PointerHandler = (): void => {
+		clearPendingLongPress();
+	};
+
+	return {
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel: onPointerUp,
+		onPointerLeave: onPointerUp,
+	};
+};

Frontend/src/components/shell/data/shell.data.ts

@@ -1,7 +1,21 @@
 // Path: Frontend/src/components/shell/data/shell.data.ts
 
 import type { Component } from "solid-js";
-import { Bell, Folder, Home, LayoutGrid, Plus, Search, Settings, User } from "../../../lib/icons";
+import {
+	Bell,
+	CircleHelp,
+	FileText,
+	Folder,
+	Home,
+	Keyboard,
+	LayoutGrid,
+	LogOut,
+	Repeat,
+	Search,
+	Settings,
+	Shield,
+	User,
+} from "../../../lib/icons";
 
 type ShellIconProps = {
 	class?: string;
@@ -15,6 +29,7 @@ export type RailItem = {
 	id: string;
 	label: string;
 	abbreviation: string;
+	kind: "personal" | "organization";
 	active?: boolean;
 };
 
@@ -34,6 +49,31 @@ export type ActiveServer = {
 	dockActions: readonly ServerDockAction[];
 };
 
+export type ActiveProject = {
+	id: string;
+	name: string;
+};
+
+export type ActiveDepartment = {
+	id: string;
+	name: string;
+	teamName: string;
+};
+
+export type DepartmentItem = {
+	id: string;
+	name: string;
+	teams: readonly string[];
+	active?: boolean;
+};
+
+export type ProjectItem = {
+	id: string;
+	name: string;
+	description: string;
+	active?: boolean;
+};
+
 export type SidebarItem = {
 	id: string;
 	label: string;
@@ -42,21 +82,264 @@ export type SidebarItem = {
 	meta?: string;
 };
 
+export type WorkspaceStaticKind = "workspace" | "home" | "settings";
+
+// Keep this open-ended so future server-driven or plugin-provided item types do
+// not require a frontend source edit before they can be represented safely.
+export type WorkspaceItemTypeId = string;
+
+export type WorkspaceStaticItem = SidebarItem & {
+	contextKind: WorkspaceStaticKind;
+};
+
+export type WorkspaceFolderNode = {
+	id: string;
+	label: string;
+	kind: "folder";
+	icon: ShellIcon;
+	active?: boolean;
+	meta?: string;
+	children?: readonly WorkspaceTreeNode[];
+};
+
+export type WorkspaceItemNode = {
+	id: string;
+	label: string;
+	kind: "item";
+	itemType: WorkspaceItemTypeId;
+	active?: boolean;
+	meta?: string;
+	children?: undefined;
+};
+
+export type WorkspaceTreeNode = WorkspaceFolderNode | WorkspaceItemNode;
+
+export type WorkspaceItemTypeDefinition = {
+	id: WorkspaceItemTypeId;
+	label: string;
+	shortLabel: string;
+	icon: ShellIcon;
+	noun: string;
+	actionPrefix: string;
+	defaultCreateLabel: string;
+	includeInWorkspaceCreate?: boolean;
+	description?: string;
+};
+
+export type SidebarHeaderAction = {
+	id: string;
+	label: string;
+	icon: ShellIcon;
+};
+
 export type TopBarAction = {
 	id: string;
 	label: string;
 	icon: ShellIcon;
 };
 
-const organizationServerActions: readonly ServerDockAction[] = [
+export type MobileBottomNavItem = {
+	id: string;
+	label: string;
+	icon: ShellIcon;
+	active?: boolean;
+};
+
+export type WorkspaceContextMenuTarget =
+	| {
+		id: string;
+		label: string;
+		kind: WorkspaceStaticKind;
+	  }
+	| {
+		id: string;
+		label: string;
+		kind: "folder";
+	  }
+	| {
+		id: string;
+		label: string;
+		kind: "item";
+		itemType: WorkspaceItemTypeId;
+	  };
+
+export type WorkspaceContextMenuAction = {
+	id: string;
+	label: string;
+	tone?: "default" | "danger";
+	shortcut?: WorkspaceContextMenuShortcut;
+	children?: readonly WorkspaceContextMenuAction[];
+};
+
+export type WorkspaceContextMenuShortcutModifier = "meta" | "alt" | "shift";
+
+export type WorkspaceContextMenuShortcutKey = "b" | "c" | "d" | "delete" | "enter" | "f" | "m" | "r";
+
+export type WorkspaceContextMenuShortcut = {
+	modifiers?: readonly WorkspaceContextMenuShortcutModifier[];
+	key: WorkspaceContextMenuShortcutKey;
+};
+
+export type WorkspaceContextMenuSection = {
+	id: string;
+	label?: string;
+	items: readonly WorkspaceContextMenuAction[];
+};
+
+export const firstPartyWorkspaceItemTypes: readonly WorkspaceItemTypeDefinition[] = [
+	{
+		id: "core.doc",
+		label: "Doc",
+		shortLabel: "Doc",
+		icon: FileText,
+		noun: "doc",
+		actionPrefix: "doc",
+		defaultCreateLabel: "New doc",
+		includeInWorkspaceCreate: true,
+		description: "Rich text documents and notes.",
+	},
+	{
+		id: "core.board.kanban",
+		label: "Kanban board",
+		shortLabel: "Board",
+		icon: LayoutGrid,
+		noun: "board",
+		actionPrefix: "board",
+		defaultCreateLabel: "New board",
+		includeInWorkspaceCreate: true,
+		description: "Default board-style workspace item.",
+	},
+	{
+		id: "core.board.list",
+		label: "List board",
+		shortLabel: "Board",
+		icon: LayoutGrid,
+		noun: "board",
+		actionPrefix: "list-board",
+		defaultCreateLabel: "New list board",
+		description: "Alternate first-party board view prepared for the future registry.",
+	},
+] as const;
+
+const workspaceItemTypeMap = new Map<WorkspaceItemTypeId, WorkspaceItemTypeDefinition>(
+	firstPartyWorkspaceItemTypes.map((definition) => [definition.id, definition]),
+);
+
+const createUnknownWorkspaceItemTypeDefinition = (
+	itemType: WorkspaceItemTypeId,
+): WorkspaceItemTypeDefinition => ({
+	id: itemType,
+	label: "Item",
+	shortLabel: "Item",
+	icon: FileText,
+	noun: "item",
+	actionPrefix: "item",
+	defaultCreateLabel: "New item",
+	description: "Fallback definition for unknown or future workspace item types.",
+});
+
+export const getWorkspaceItemTypeDefinition = (itemType: WorkspaceItemTypeId): WorkspaceItemTypeDefinition => {
+	return workspaceItemTypeMap.get(itemType) ?? createUnknownWorkspaceItemTypeDefinition(itemType);
+};
+
+export const getWorkspaceNodeIcon = (node: WorkspaceTreeNode): ShellIcon =>
+	node.kind === "folder" ? node.icon : getWorkspaceItemTypeDefinition(node.itemType).icon;
+
+const getWorkspaceCreateActions = (): readonly WorkspaceContextMenuAction[] => [
+	{ id: "new-folder", label: "New folder", shortcut: { modifiers: ["alt"], key: "f" } },
+	...firstPartyWorkspaceItemTypes
+		.filter((definition) => definition.includeInWorkspaceCreate)
+		.map((definition) => ({
+			id: `create-${definition.actionPrefix}`,
+			label: definition.defaultCreateLabel,
+			shortcut:
+				definition.id === "core.board.kanban"
+					? ({ modifiers: ["alt"], key: "b" } as const)
+					: definition.id === "core.doc"
+						? ({ modifiers: ["alt"], key: "d" } as const)
+						: undefined,
+		})),
+];
+
+export const getWorkspaceContextMenuEyebrow = (target: WorkspaceContextMenuTarget): string => {
+	switch (target.kind) {
+		case "workspace":
+		case "home":
+			return "Workspace";
+		case "settings":
+			return "Configuration";
+		case "folder":
+			return "Folder";
+		case "item":
+			return getWorkspaceItemTypeDefinition(target.itemType).shortLabel;
+	}
+};
+
+export const createWorkspaceSurfaceTarget = (workspace: ActiveProject): WorkspaceContextMenuTarget => ({
+	id: `workspace-${workspace.id}`,
+	label: workspace.name,
+	kind: "workspace",
+});
+
+export const createWorkspaceStaticTarget = (item: WorkspaceStaticItem): WorkspaceContextMenuTarget => ({
+	id: item.id,
+	label: item.label,
+	kind: item.contextKind,
+});
+
+export const createWorkspaceTreeTarget = (node: WorkspaceTreeNode): WorkspaceContextMenuTarget => ({
+	id: node.id,
+	label: node.label,
+	...(node.kind === "folder"
+		? { kind: "folder" as const }
+		: {
+			kind: "item" as const,
+			itemType: node.itemType,
+		}),
+});
+
+export type NotificationItem = {
+	id: string;
+	title: string;
+	contextLabel: string;
+	timeLabel: string;
+	unread?: boolean;
+};
+
+export type ProfileMenuAction = {
+	id: string;
+	label: string;
+	icon: ShellIcon;
+	tone?: "default" | "danger";
+};
+
+export type ProfileMenuSection = {
+	id: string;
+	items: readonly ProfileMenuAction[];
+};
+
+export type ActiveUserProfile = {
+	name: string;
+	email: string;
+	roleLabel: string;
+	contextLabel: string;
+};
+
+const personalDockActions: readonly ServerDockAction[] = [
+	{ id: "account", label: "Account", icon: User },
+	{ id: "settings", label: "Settings", icon: Settings },
+] as const;
+
+const organizationAdminDockActions: readonly ServerDockAction[] = [
 	{ id: "members", label: "Members", icon: User },
 	{ id: "server", label: "Server", icon: Settings },
 ] as const;
 
+// Server shell scaffold data
 export const railItems: readonly RailItem[] = [
-	{ id: "personal", label: "Personal", abbreviation: "P" },
-	{ id: "moku", label: "Moku", abbreviation: "M", active: true },
-	{ id: "labs", label: "Labs", abbreviation: "L" },
+	{ id: "personal-server", label: "Personal Server Name", abbreviation: "P", kind: "personal" },
+	{ id: "organization-server", label: "Organization Name", abbreviation: "O", kind: "organization", active: true },
+	{ id: "design-review", label: "Design Review", abbreviation: "D", kind: "organization" },
 ] as const;
 
 export const activeServer: ActiveServer = {
@@ -65,19 +348,256 @@ export const activeServer: ActiveServer = {
 	abbreviation: "O",
 	kind: "organization",
 	connectedLabel: "12 connected",
-	dockActions: organizationServerActions,
+	dockActions: organizationAdminDockActions,
 };
 
-export const workspaceSidebarItems: readonly SidebarItem[] = [
-	{ id: "home", label: "Home", icon: Home, active: true },
-	{ id: "boards", label: "Boards", icon: LayoutGrid, meta: "0" },
-	{ id: "docs", label: "Docs", icon: Folder, meta: "0" },
-	{ id: "settings", label: "Settings", icon: Settings },
+// Workspace framing scaffold data
+export const activeProject: ActiveProject = {
+	id: "general",
+	name: "General",
+};
+
+export const activeDepartment: ActiveDepartment = {
+	id: "product",
+	name: "Product",
+	teamName: "Design Systems",
+};
+
+export const projectItems: readonly ProjectItem[] = [
+	{ id: "general", name: "General", description: "Default shared project", active: true },
+	{ id: "operations", name: "Operations", description: "Cross-team planning and delivery" },
+	{ id: "hiring", name: "Hiring", description: "Candidate pipeline and interview loops" },
 ] as const;
 
+export const departmentItems: readonly DepartmentItem[] = [
+	{ id: "product", name: "Product", teams: ["Design Systems", "Research Ops"], active: true },
+	{ id: "engineering", name: "Engineering", teams: ["Platform", "Realtime Collaboration"] },
+	{ id: "operations", name: "Operations", teams: ["Shared Services", "People Ops"] },
+] as const;
+
+// Sidebar and topbar scaffold data
+// These static entries stay pinned in both desktop and mobile workspace navigation.
+export const workspaceStaticItems: readonly WorkspaceStaticItem[] = [
+	{ id: "home", label: "Home", icon: Home, active: true, contextKind: "home" },
+	{ id: "workspace-settings", label: "Settings", icon: Settings, contextKind: "settings" },
+] as const;
+
+// Freeform workspace tree scaffold: folders are structural, while non-folder
+// nodes already flow through the future-safe itemType registry seam.
+export const workspaceTree: readonly WorkspaceTreeNode[] = [
+	{
+		id: "product-workspace",
+		label: "Product",
+		kind: "folder",
+		icon: Folder,
+		children: [
+			{ id: "roadmap-board", label: "Roadmap", kind: "item", itemType: "core.board.kanban", active: true },
+			{ id: "launch-brief", label: "Launch Brief", kind: "item", itemType: "core.doc" },
+			{
+				id: "research-folder",
+				label: "Research",
+				kind: "folder",
+				icon: Folder,
+				children: [
+					{ id: "interviews-doc", label: "Interviews", kind: "item", itemType: "core.doc" },
+					{ id: "signals-board", label: "Signals", kind: "item", itemType: "core.board.kanban", meta: "2" },
+				],
+			},
+		],
+	},
+	{
+		id: "design-folder",
+		label: "Design",
+		kind: "folder",
+		icon: Folder,
+		children: [
+			{ id: "system-doc", label: "Design System", kind: "item", itemType: "core.doc" },
+			{ id: "review-board", label: "Review Queue", kind: "item", itemType: "core.board.kanban" },
+		],
+	},
+	{ id: "general-notes", label: "General Notes", kind: "item", itemType: "core.doc" },
+] as const;
+
+export const workspaceSidebarHeaderActions: readonly SidebarHeaderAction[] = [
+	{ id: "search-workspace", label: "Search workspace", icon: Search },
+] as const;
+
+export const mobileBottomNavItems: readonly MobileBottomNavItem[] = [
+	{ id: "home", label: "Home", icon: Home, active: true },
+	{ id: "search", label: "Search", icon: Search },
+	{ id: "browse", label: "Browse", icon: Folder },
+] as const;
+
+// Initial context-menu IA scaffold. Behavior wiring can evolve later, but the
+// target kinds and action grouping should stay shared across workspace surfaces.
+export const getWorkspaceContextMenuSections = (
+	target: WorkspaceContextMenuTarget,
+): readonly WorkspaceContextMenuSection[] => {
+	const createActions = getWorkspaceCreateActions();
+
+	const createSubmenuAction = {
+		id: "create",
+		label: "Create",
+		children: createActions,
+	} as const;
+
+	switch (target.kind) {
+		case "workspace":
+			return [
+				{
+					id: "create",
+					label: undefined,
+					items: [createSubmenuAction],
+				},
+				{
+					id: "workspace",
+					label: undefined,
+					items: [
+						{ id: "rename-workspace", label: "Rename workspace", shortcut: { key: "enter" } },
+						{ id: "copy-workspace-link", label: "Copy link", shortcut: { modifiers: ["meta"], key: "c" } },
+					],
+				},
+			] as const;
+		case "home":
+			return [
+				{
+					id: "create",
+					label: undefined,
+					items: [createSubmenuAction],
+				},
+				{
+					id: "workspace",
+					label: undefined,
+					items: [{ id: "open-home", label: "Open home", shortcut: { key: "enter" } }],
+				},
+			] as const;
+		case "settings":
+			return [
+				{
+					id: "settings",
+					label: undefined,
+					items: [
+						{ id: "open-settings", label: "Open settings", shortcut: { key: "enter" } },
+						{ id: "copy-settings-link", label: "Copy link", shortcut: { modifiers: ["meta"], key: "c" } },
+					],
+				},
+			] as const;
+		case "folder":
+			return [
+				{
+					id: "open",
+					items: [
+						{ id: "open-folder", label: "Open folder", shortcut: { key: "enter" } },
+						{ id: "rename-folder", label: "Rename", shortcut: { modifiers: ["meta"], key: "r" } },
+					],
+				},
+				{
+					id: "create",
+					label: undefined,
+					items: [createSubmenuAction],
+				},
+				{
+					id: "organize",
+					label: undefined,
+					items: [
+						{ id: "duplicate-folder", label: "Duplicate", shortcut: { modifiers: ["meta"], key: "d" } },
+						{ id: "move-folder", label: "Move", shortcut: { modifiers: ["meta"], key: "m" } },
+						{ id: "delete-folder", label: "Delete", shortcut: { modifiers: ["meta"], key: "delete" }, tone: "danger" },
+					],
+				},
+			] as const;
+		case "item": {
+			const definition = getWorkspaceItemTypeDefinition(target.itemType);
+			const actionPrefix = definition.actionPrefix;
+			const nounLabel = definition.noun;
+
+			return [
+				{
+					id: `${actionPrefix}-primary`,
+					items: [
+						{ id: `open-${actionPrefix}`, label: `Open ${nounLabel}`, shortcut: { key: "enter" } },
+						{ id: `rename-${actionPrefix}`, label: "Rename", shortcut: { modifiers: ["meta"], key: "r" } },
+					],
+				},
+				{
+					id: "organize",
+					label: undefined,
+					items: [
+						{ id: `duplicate-${actionPrefix}`, label: "Duplicate", shortcut: { modifiers: ["meta"], key: "d" } },
+						{ id: `move-${actionPrefix}`, label: "Move", shortcut: { modifiers: ["meta"], key: "m" } },
+						{ id: `delete-${actionPrefix}`, label: "Delete", shortcut: { modifiers: ["meta"], key: "delete" }, tone: "danger" },
+					],
+				},
+			] as const;
+		}
+	}
+};
+
 export const topBarActions: readonly TopBarAction[] = [
 	{ id: "search", label: "Search", icon: Search },
-	{ id: "create", label: "Create", icon: Plus },
-	{ id: "inbox", label: "Inbox", icon: Bell },
-	{ id: "profile", label: "Profile", icon: User },
+] as const;
+
+export const notificationItems: readonly NotificationItem[] = [
+	{
+		id: "comment-design-systems",
+		title: "New comment on Design Systems",
+		contextLabel: "Product • Review thread updated",
+		timeLabel: "2m ago",
+		unread: true,
+	},
+	{
+		id: "sprint-platform",
+		title: "Sprint updated in Platform",
+		contextLabel: "Engineering • Scope changed",
+		timeLabel: "15m ago",
+		unread: true,
+	},
+	{
+		id: "member-joined",
+		title: "New member joined Operations",
+		contextLabel: "Organization Name • Access granted",
+		timeLabel: "1h ago",
+	},
+	{
+		id: "daily-summary",
+		title: "Daily summary is ready",
+		contextLabel: "General • 8 updates across boards",
+		timeLabel: "Today, 8:00 AM",
+	},
+] as const;
+
+export const unreadNotificationCount = notificationItems.filter((item) => item.unread).length;
+
+export const activeUserProfile: ActiveUserProfile = {
+	name: "Demo Account",
+	email: "demo@moku.work",
+	roleLabel: "Founder · Product",
+	contextLabel: "Organization Name • Design Systems",
+};
+
+export const profileMenuSections: readonly ProfileMenuSection[] = [
+	{
+		id: "account",
+		items: [
+			{ id: "profile", label: "Profile", icon: User },
+			{ id: "account-settings", label: "Account Settings", icon: Settings },
+			{ id: "notifications", label: "Notifications", icon: Bell },
+			{ id: "security", label: "Security", icon: Shield },
+		],
+	},
+	{
+		id: "preferences",
+		items: [
+			{ id: "keyboard-shortcuts", label: "Keyboard Shortcuts", icon: Keyboard },
+			{ id: "theme-preferences", label: "Theme Preferences", icon: Settings },
+			{ id: "help-support", label: "Help & Support", icon: CircleHelp },
+		],
+	},
+	{
+		id: "session",
+		items: [
+			{ id: "switch-account", label: "Switch Account", icon: Repeat },
+			{ id: "sign-out", label: "Sign Out", icon: LogOut, tone: "danger" },
+		],
+	},
 ] as const;

Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.module.scss

@@ -9,6 +9,71 @@
   padding: var(--space-5) var(--space-6);
 }
 
+.workspaceTopBar {
+  width: 100%;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+	gap: var(--space-2);
+	min-height: calc(var(--control-size-md) - var(--space-3));
+	padding: 0;
+}
+
+.workspaceTopBarStart,
+.workspaceTopBarEnd {
+	min-width: calc(var(--control-size-md) - 0.5rem);
+  display: inline-flex;
+  align-items: center;
+}
+
+.workspaceTopBarEnd {
+  justify-content: flex-end;
+}
+
+.workspaceTopBarCenter {
+  min-width: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.workspaceBreadcrumb {
+	@include text-caption;
+  min-width: 0;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.workspaceCollapseButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+	width: calc(var(--control-size-md) - 0.5rem);
+	height: calc(var(--control-size-md) - 0.5rem);
+  border: 1px solid color-mix(in srgb, var(--color-border-strong) 44%, transparent);
+  border-radius: var(--radius-pill);
+  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
+  color: var(--color-text-muted);
+  box-shadow: var(--shadow-soft);
+  transition:
+    background 160ms var(--easing-standard),
+    color 160ms var(--easing-standard),
+    border-color 160ms var(--easing-standard),
+    transform 180ms var(--easing-standard);
+}
+
+.workspaceCollapseButton:hover,
+.workspaceCollapseButton:focus-visible {
+  background: var(--color-surface-hover);
+  border-color: var(--color-border);
+  color: var(--color-text);
+}
+
+.workspaceCollapseButton:hover {
+  transform: translateY(-1px);
+}
+
 .hero {
   display: grid;
   gap: var(--space-3);
@@ -74,6 +139,20 @@
 @include respond-down(mobile) {
   .viewport {
     gap: var(--space-4);
-    padding: var(--space-4);
+    padding: var(--space-4) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
+  }
+
+  .workspaceTopBar {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .workspaceTopBarStart,
+  .workspaceTopBarEnd,
+  .workspaceCollapseButton {
+    display: none;
+  }
+
+  .workspaceTopBarCenter {
+    justify-content: flex-start;
   }
 }

Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.tsx

@@ -1,6 +1,8 @@
 // Path: Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.tsx
 
 import { For, type JSX } from "solid-js";
+import { ChevronLeft, ChevronRight } from "../../../lib/icons";
+import { activeProject, activeServer } from "../../shell/data/shell.data";
 import styles from "./WorkspaceHome.module.scss";
 
 type ShellCheckpointCard = {
@@ -11,37 +13,66 @@ type ShellCheckpointCard = {
 
 const shellCheckpointCards: readonly ShellCheckpointCard[] = [
 	{
-		title: "App shell",
-		copy: "Top bar, left rail, workspace sidebar, and content viewport are now split into modular components.",
+		title: "Server shell",
+		copy: "Top bar, server rail, sidebar, and content viewport are now split into modular components.",
 		meta: "Layout foundation",
 	},
 	{
-		title: "Workspace context",
-		copy: "The shell already has clear places for org context, workspace switching, and future surface navigation.",
-		meta: "Navigation foundation",
+		title: "Presence foundation",
+		copy: "The dock now distinguishes personal and organization servers, leaving clear space for future presence and server-aware controls.",
+		meta: "Server foundation",
 	},
 	{
 		title: "Next build target",
-		copy: "You can now plug in workspace home content, auth state, and early primitives without redesigning the whole frame.",
+		copy: "You can now plug in auth state, server onboarding, and live presence without redesigning the whole frame.",
 		meta: "Ready for v0.1.0 work",
 	},
 ];
 
-export const WorkspaceHome = (): JSX.Element => {
+type WorkspaceHomeProps = {
+	sidebarCollapsed: boolean;
+	onToggleSidebarCollapse: () => void;
+};
+
+export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
+	const sidebarToggleLabel = (): string => (props.sidebarCollapsed ? "Expand left workspace sidebar" : "Collapse left workspace sidebar");
+	const breadcrumb = (): string => `${activeServer.name} / ${activeProject.name} / Home`;
+
 	return (
-		<main class={styles.viewport}>
-			<section class={styles.hero}>
-				<span class={styles.eyebrow}>Workspace home</span>
-				<h1 class={styles.title}>Moku is ready for its first real shell.</h1>
+		<main class={styles.viewport} data-ui="workspace-home">
+			<div class={styles.workspaceTopBar} data-slot="workspace-home-top-bar">
+				<div class={styles.workspaceTopBarStart} data-slot="workspace-home-top-bar-start">
+					<button
+						type="button"
+						class={styles.workspaceCollapseButton}
+						aria-label={sidebarToggleLabel()}
+						title={sidebarToggleLabel()}
+						data-slot="workspace-home-sidebar-toggle"
+						onClick={props.onToggleSidebarCollapse}
+					>
+						{props.sidebarCollapsed ? <ChevronRight size={16} strokeWidth={2} /> : <ChevronLeft size={16} strokeWidth={2} />}
+					</button>
+				</div>
+
+				<div class={styles.workspaceTopBarCenter} data-slot="workspace-home-top-bar-center">
+					<span class={styles.workspaceBreadcrumb}>{breadcrumb()}</span>
+				</div>
+
+				<div class={styles.workspaceTopBarEnd} data-slot="workspace-home-top-bar-end" aria-hidden="true" />
+			</div>
+
+			<section class={styles.hero} data-slot="workspace-home-hero">
+				<span class={styles.eyebrow}>Server home</span>
+				<h1 class={styles.title}>{activeServer.name} is ready for its first real shell.</h1>
 				<p class={styles.description}>
-					This is the barebone app frame for v0.1.0 — enough structure to start building real frontend surfaces on top of a real backend core.
+					This is the barebone app frame for v0.1.0 — enough structure to start building a real self-hosted server experience on top of the backend core.
 				</p>
 			</section>
 
-			<section class={styles.grid} aria-label="Shell checkpoints">
+			<section class={styles.grid} aria-label="Shell checkpoints" data-slot="workspace-home-grid">
 				<For each={shellCheckpointCards}>
 					{(card): JSX.Element => (
-						<article class={styles.card}>
+						<article class={styles.card} data-slot="workspace-home-card">
 							<h2 class={styles.cardTitle}>{card.title}</h2>
 							<p class={styles.cardCopy}>{card.copy}</p>
 							<span class={styles.cardMeta}>{card.meta}</span>

Frontend/src/lib/icons/index.ts

@@ -1,11 +1,22 @@
 // Path: Frontend/src/lib/icons/index.ts
 
 export { default as Bell } from "lucide-solid/icons/bell";
+export { default as CircleHelp } from "lucide-solid/icons/circle-help";
 export { default as ChevronDown } from "lucide-solid/icons/chevron-down";
+export { default as ChevronLeft } from "lucide-solid/icons/chevron-left";
+export { default as ChevronRight } from "lucide-solid/icons/chevron-right";
+export { default as FileText } from "lucide-solid/icons/file-text";
 export { default as Folder } from "lucide-solid/icons/folder";
 export { default as Home } from "lucide-solid/icons/house";
+export { default as Keyboard } from "lucide-solid/icons/keyboard";
 export { default as LayoutGrid } from "lucide-solid/icons/layout-grid";
+export { default as LogOut } from "lucide-solid/icons/log-out";
+export { default as Moon } from "lucide-solid/icons/moon";
 export { default as Plus } from "lucide-solid/icons/plus";
+export { default as Repeat } from "lucide-solid/icons/repeat";
 export { default as Search } from "lucide-solid/icons/search";
 export { default as Settings } from "lucide-solid/icons/settings";
+export { default as Shield } from "lucide-solid/icons/shield";
+export { default as Sun } from "lucide-solid/icons/sun";
 export { default as User } from "lucide-solid/icons/user";
+export { default as X } from "lucide-solid/icons/x";

Frontend/src/styles/themes/_dark.scss

@@ -17,6 +17,9 @@
   --color-accent-strong: hsl(218 88% 61%);
   --color-accent-soft: hsl(217 91% 67% / 0.18);
   --color-accent-contrast: hsl(220 28% 10%);
+  --color-primary-1: hsl(217 91% 67%);
+  --color-primary-2: hsl(272 80% 70%);
+  --color-primary-3: hsl(190 84% 62%);
 
   --color-success: hsl(154 55% 48%);
   --color-danger: hsl(0 72% 62%);

Frontend/src/styles/themes/_light.scss

@@ -18,6 +18,9 @@
   --color-accent-strong: var(--blue-600);
   --color-accent-soft: hsl(218 88% 61% / 0.12);
   --color-accent-contrast: hsl(0 0% 100%);
+  --color-primary-1: var(--blue-500);
+  --color-primary-2: hsl(271 72% 60%);
+  --color-primary-3: hsl(192 76% 48%);
 
   --color-success: var(--green-500);
   --color-danger: var(--red-500);

Frontend/src/styles/user-overrides.scss

@@ -0,0 +1,41 @@
+/* Path: Frontend/src/styles/user-overrides.scss */
+
+/*
+	Optional global frontend override seam.
+
+	This file is imported after the core app styles so user or deployment-specific
+	overrides can layer on top without reshaping component code first.
+
+	Examples for later:
+	- import a tenant branding bundle
+	- apply a self-hosted custom theme
+	- override shared shell spacing or color tokens
+	- target stable `data-ui`, `data-slot`, or state attributes added in the app shell
+
+	You can either place raw overrides here directly or layer another stylesheet:
+
+	@use "./my-brand" as *;
+*/
+
+/*
+	Stable override hooks are intentionally exposed with global data attributes so
+	manual overrides do not depend on CSS module hash names.
+
+	Examples:
+
+	[data-ui="top-bar"] {
+		backdrop-filter: blur(24px);
+	}
+
+	[data-ui="workspace-sidebar"] [data-slot="workspace-tree-item"][data-kind="item"] {
+		border-radius: 12px;
+	}
+
+	[data-ui="workspace-context-menu"] [data-action-id="delete"] {
+		letter-spacing: 0.01em;
+	}
+
+	[data-ui="notifications-menu"][data-variant="workspace"] {
+		max-width: none;
+	}
+*/

Frontend/src/theme/presets.ts

@@ -2,10 +2,31 @@
 
 import type { ThemeDefinition } from "./schema";
 
-export const defaultThemePresetPath = "/themes/moku-default.json";
+export const themePresetMetas = [
+	{
+		id: "moku-default",
+		name: "Moku Default",
+		description: "The baseline Moku theme preset, matching the original shell styling tokens.",
+		path: "/themes/moku-default.json",
+	},
+	{
+		id: "moku-midnight",
+		name: "Moku Midnight",
+		description: "The active warm, low-light Moku theme preset inspired by the Midnight Discord palette direction.",
+		path: "/themes/moku-midnight.json",
+	},
+] as const satisfies readonly (Pick<ThemeDefinition, "id" | "name" | "description"> & { path: string })[];
+
+export const defaultThemePresetPath = "/themes/moku-midnight.json";
 
 export const defaultThemePresetMeta = {
-	id: "moku-default",
-	name: "Moku Default",
-	description: "The baseline Moku theme preset, matching the current shell styling tokens.",
+	id: "moku-midnight",
+	name: "Moku Midnight",
+	description: "The active warm, low-light Moku theme preset inspired by the Midnight Discord palette direction.",
 } satisfies Pick<ThemeDefinition, "id" | "name" | "description">;
+
+export const resolveThemePresetPath = (presetId: string): string | null => {
+	const match = themePresetMetas.find((preset) => preset.id === presetId);
+
+	return match?.path ?? null;
+};

Frontend/src/theme/runtime.ts

@@ -1,11 +1,12 @@
 // Path: Frontend/src/theme/runtime.ts
 
-import { defaultThemePresetPath } from "./presets";
+import { defaultThemePresetMeta, defaultThemePresetPath, resolveThemePresetPath } from "./presets";
 import { createCssVariableMap, isThemeModeName, validateThemeDefinition, type ThemeDefinition, type ThemeModeName } from "./schema";
 
 export type Theme = ThemeModeName;
 
 export const THEME_STORAGE_KEY = "theme";
+export const THEME_PRESET_STORAGE_KEY = "theme-preset";
 export const DEFAULT_THEME: Theme = "light";
 
 let activeThemeDefinition: ThemeDefinition | null = null;
@@ -21,6 +22,14 @@ const getRootElement = (): HTMLElement | null => {
 	return canUseDom() ? document.documentElement : null;
 };
 
+const persistThemePreset = (themeDefinition: ThemeDefinition): void => {
+	if (!canUseStorage()) {
+		return;
+	}
+
+	localStorage.setItem(THEME_PRESET_STORAGE_KEY, themeDefinition.id);
+};
+
 const setDocumentThemeMode = (theme: Theme): void => {
 	const rootElement = getRootElement();
 
@@ -71,10 +80,31 @@ export const getDocumentTheme = (): Theme => {
 
 export const applyThemeDefinition = (themeDefinition: ThemeDefinition, theme: Theme): void => {
 	activeThemeDefinition = themeDefinition;
+	persistThemePreset(themeDefinition);
 	setDocumentThemeMode(theme);
 	applyThemeVariables(themeDefinition, theme);
 };
 
+export const resolvePreferredThemePresetId = (): string => {
+	if (!canUseStorage()) {
+		return defaultThemePresetMeta.id;
+	}
+
+	const stored = localStorage.getItem(THEME_PRESET_STORAGE_KEY);
+
+	if (stored && resolveThemePresetPath(stored)) {
+		return stored;
+	}
+
+	return defaultThemePresetMeta.id;
+};
+
+export const resolvePreferredThemePresetPath = (): string => {
+	const presetId = resolvePreferredThemePresetId();
+
+	return resolveThemePresetPath(presetId) ?? defaultThemePresetPath;
+};
+
 export const initializeThemeRuntime = async (): Promise<ThemeDefinition | null> => {
 	if (typeof window === "undefined") {
 		return null;
@@ -88,7 +118,7 @@ export const initializeThemeRuntime = async (): Promise<ThemeDefinition | null>
 	if (!themeInitializationPromise) {
 		themeInitializationPromise = (async (): Promise<ThemeDefinition | null> => {
 			try {
-				const response = await fetch(defaultThemePresetPath, {
+				const response = await fetch(resolvePreferredThemePresetPath(), {
 					headers: {
 						Accept: "application/json",
 					},

Frontend/src/theme/schema.ts

@@ -17,7 +17,7 @@ export const THEME_Z_INDEX_KEYS = ["base", "dropdown", "sticky", "overlay", "mod
 export const THEME_MOTION_KEYS = ["durationFast", "durationBase", "durationSlow", "easeStandard"] as const;
 export const THEME_TYPE_SCALE_KEYS = ["caption", "label", "body", "title", "heading", "display"] as const;
 export const THEME_FONT_FAMILY_KEYS = ["sans", "heading", "display", "serif", "mono"] as const;
-export const THEME_MODE_COLOR_KEYS = ["canvas", "surface", "surfaceMuted", "surfaceHover", "border", "borderStrong", "text", "textMuted", "accent", "accentStrong", "accentSoft", "accentContrast", "success", "danger", "warning", "focusRing"] as const;
+export const THEME_MODE_COLOR_KEYS = ["canvas", "surface", "surfaceMuted", "surfaceHover", "border", "borderStrong", "text", "textMuted", "accent", "accentStrong", "accentSoft", "accentContrast", "primaryOne", "primaryTwo", "primaryThree", "success", "danger", "warning", "focusRing"] as const;
 
 export type ThemeModeName = (typeof THEME_MODE_NAMES)[number];
 
@@ -334,6 +334,9 @@ export const createCssVariableMap = (theme: ThemeDefinition, mode: ThemeModeName
 		"--color-accent-strong": modeTokens.colors.accentStrong,
 		"--color-accent-soft": modeTokens.colors.accentSoft,
 		"--color-accent-contrast": modeTokens.colors.accentContrast,
+		"--color-primary-1": modeTokens.colors.primaryOne,
+		"--color-primary-2": modeTokens.colors.primaryTwo,
+		"--color-primary-3": modeTokens.colors.primaryThree,
 		"--color-success": modeTokens.colors.success,
 		"--color-danger": modeTokens.colors.danger,
 		"--color-warning": modeTokens.colors.warning,