diff --git a/services/web-ui/public/shell.jsx b/services/web-ui/public/shell.jsx
new file mode 100644
index 0000000..58345d6
--- /dev/null
+++ b/services/web-ui/public/shell.jsx
@@ -0,0 +1,167 @@
+// shell.jsx - app shell: sidebar nav, topbar, route container
+
+const NAV_TREE = [
+  { id: "home", label: "Home", icon: "home" },
+  { id: "library", label: "Library", icon: "library" },
+  { id: "projects", label: "Projects", icon: "folder" },
+  {
+    id: "ingest", label: "Ingest", icon: "upload", group: true,
+    children: [
+      { id: "upload", label: "Upload", icon: "upload" },
+      { id: "recorders", label: "Recorders", icon: "record", badge: { kind: "live", text: "4" } },
+      { id: "capture", label: "Capture", icon: "capture" },
+      { id: "monitors", label: "Monitors", icon: "monitor" },
+    ],
+  },
+  { id: "jobs", label: "Jobs", icon: "jobs", badge: { kind: "neutral", text: "3" } },
+  { id: "editor", label: "Editor", icon: "editor", badge: { kind: "dev", text: "DEV" } },
+];
+
+const ADMIN_TREE = [
+  { id: "users", label: "Users", icon: "users" },
+  { id: "tokens", label: "Tokens", icon: "token" },
+  { id: "containers", label: "Containers", icon: "container" },
+  { id: "cluster", label: "Cluster", icon: "cluster" },
+  { id: "settings", label: "Settings", icon: "settings" },
+];
+
+function NavItem({ item, active, onSelect, depth = 0, openGroups, toggleGroup }) {
+  const isGroup = item.group && item.children;
+  const isOpen = isGroup && openGroups.has(item.id);
+  const isActive = active === item.id || (isGroup && item.children.some(c => c.id === active));
+
+  return (
+    <>
+      <div
+        className={`nav-item ${isActive && !isGroup ? "active" : ""} ${isGroup ? "has-children" : ""} ${isOpen ? "open" : ""}`}
+        onClick={() => {
+          if (isGroup) toggleGroup(item.id);
+          else onSelect(item.id);
+        }}
+      >
+        <Icon name={item.icon} size={15} className="nav-icon" />
+        <span>{item.label}</span>
+        {item.badge && (
+          <span className={`nav-badge ${item.badge.kind}`}>{item.badge.text}</span>
+        )}
+        {isGroup && <Icon name="chevron" size={12} className="nav-caret" />}
+      </div>
+      {isGroup && isOpen && (
+        <div className="nav-children">
+          {item.children.map(c => (
+            <div
+              key={c.id}
+              className={`nav-item ${active === c.id ? "active" : ""}`}
+              onClick={() => onSelect(c.id)}
+            >
+              <Icon name={c.icon} size={14} className="nav-icon" />
+              <span>{c.label}</span>
+              {c.badge && <span className={`nav-badge ${c.badge.kind}`}>{c.badge.text}</span>}
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
+
+function Sidebar({ active, onNavigate }) {
+  const [openGroups, setOpenGroups] = React.useState(new Set(["ingest"]));
+  const toggleGroup = (id) => {
+    setOpenGroups(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  React.useEffect(() => {
+    const ingestChildren = ["upload", "recorders", "capture", "monitors"];
+    if (ingestChildren.includes(active)) {
+      setOpenGroups(prev => prev.has("ingest") ? prev : new Set([...prev, "ingest"]));
+    }
+  }, [active]);
+
+  return (
+    <aside className="sidebar">
+      <div className="sidebar-header">
+        <div className="brand-mark">D</div>
+        <div>
+          <div className="brand-name">Dragonflight</div>
+        </div>
+        <div className="brand-sub">v1.2.0</div>
+      </div>
+      <div className="sidebar-scroll">
+        {NAV_TREE.map(item => (
+          <NavItem
+            key={item.id}
+            item={item}
+            active={active}
+            onSelect={onNavigate}
+            openGroups={openGroups}
+            toggleGroup={toggleGroup}
+          />
+        ))}
+        <div className="nav-section-label">Admin</div>
+        {ADMIN_TREE.map(item => (
+          <NavItem
+            key={item.id}
+            item={item}
+            active={active}
+            onSelect={onNavigate}
+            openGroups={openGroups}
+            toggleGroup={toggleGroup}
+          />
+        ))}
+      </div>
+      <div className="sidebar-footer">
+        <div className="avatar">ZG</div>
+        <div className="user-meta">
+          <div className="user-name">Zach Gaetano</div>
+          <div className="user-role">admin · broadcast</div>
+        </div>
+        <button className="icon-btn" data-tip="Sign out"><Icon name="power" /></button>
+      </div>
+    </aside>
+  );
+}
+
+function Topbar({ crumbs, onNavigate, right }) {
+  return (
+    <header className="topbar">
+      <div className="crumb">
+        {crumbs.map((c, i) => (
+          <React.Fragment key={i}>
+            {i > 0 && <Icon name="chevron" size={12} className="sep" />}
+            <span
+              className={i === crumbs.length - 1 ? "current" : ""}
+              style={{ cursor: c.to && i < crumbs.length - 1 ? "pointer" : "default" }}
+              onClick={() => c.to && onNavigate && onNavigate(c.to)}
+            >
+              {c.label}
+            </span>
+          </React.Fragment>
+        ))}
+      </div>
+      <div className="spacer" />
+      <div className="search">
+        <Icon name="search" className="search-icon" />
+        <input placeholder="Search assets, projects, comments…" />
+        <span className="kbd">⌘K</span>
+      </div>
+      <div className="status-pip">
+        <span className="dot" />
+        <span>cluster healthy</span>
+      </div>
+      <button className="icon-btn" data-tip="Notifications">
+        <Icon name="bell" />
+      </button>
+      {right}
+    </header>
+  );
+}
+
+window.Sidebar = Sidebar;
+window.Topbar = Topbar;
+window.NAV_TREE = NAV_TREE;