Space: shared app-shell sidebar (nav.json IR + sidebar.css/js) wired into Gradio

The same nav.json + sidebar.css + sidebar.js the React app uses (auto-battler
src/shell/*) now drive a slide-in sidebar on the Gradio Space: Python templates
the IR into markup, css_paths injects the shared CSS, head injects the shared
behaviour JS. Proves UI chrome is shareable across React and Gradio from one
source (Pixi excluded — it's canvas-only and already shared).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.gitignore

@@ -0,0 +1,2 @@
+__pycache__/
+*.pyc

app.py

@@ -23,10 +23,38 @@ _manifest = json.load(open(os.path.join(WEB, "assets", "characters.json")))
 CHARACTERS = [(c["name"], c["slug"]) for p in _manifest["packs"] for c in p["characters"]]
 ANIMS = ["idle", "walk", "attack", "dmg", "die"]
 
-HEAD = '<script type="module" src="/web/tiny.js"></script>'
+HEAD = ('<script type="module" src="/web/tiny.js"></script>'
+        '<script src="/web/shell/sidebar.js"></script>')
+SIDEBAR_CSS = os.path.join(WEB, "shell", "sidebar.css")
 STAGE = "height:56vh;border:1px solid #20262e;border-radius:12px;overflow:hidden;background:#0b0e12"
 
 
+# Shared app-shell sidebar: rendered from the SAME nav.json + sidebar.css +
+# sidebar.js the React app uses (src/shell/*). Here we just template the IR into
+# the markup; the CSS styles it and the JS slides/collapses it — proving the
+# chrome is shareable across React and Gradio from one source.
+def build_sidebar(nav):
+    b = nav.get("brand", {})
+    out = ['<aside class="tac-sidebar">',
+           f'<div class="tac-brand"><span class="tac-brand-icon">{b.get("icon","")}</span>'
+           f'<span>{b.get("title","")}</span>'
+           f'<button class="tac-collapse tac-toggle" title="Collapse">‹</button></div>']
+    for sec in nav.get("sections", []):
+        out.append('<div class="tac-section">')
+        if sec.get("title"):
+            out.append(f'<div class="tac-section-title">{sec["title"]}</div>')
+        for it in sec.get("items", []):
+            out.append(f'<a class="tac-nav-item" data-target="{it["target"]}" href="#">'
+                       f'<span class="tac-ico">{it.get("icon","")}</span><span>{it["label"]}</span></a>')
+        out.append('</div>')
+    out.append('</aside>')
+    out.append('<button class="tac-toggle tac-reopen" title="Open menu">›</button>')
+    return "".join(out)
+
+
+SIDEBAR_HTML = build_sidebar(json.load(open(os.path.join(WEB, "shell", "nav.json"))))
+
+
 def diary(unit: str, traits: str) -> str:
     """Stub — replaced during the hack by a local llama.cpp small model."""
     t = (traits or "").strip() or "untested"
@@ -37,6 +65,7 @@ def diary(unit: str, traits: str) -> str:
 
 
 with gr.Blocks(title="Tiny Army") as demo:
+    gr.HTML(SIDEBAR_HTML)
     gr.Markdown("# ⚔️ Tiny Army\n*Every fighter writes its own legend — and the "
                 "legend is true.* Built on Gradio; sprites + engine reused from "
                 "auto-battler, rendered with Pixi.")
@@ -68,7 +97,8 @@ fastapi_app.mount("/web", StaticFiles(directory=WEB), name="web")
 # NOTE: serve sprite assets at /sprites, NOT /assets — Gradio serves its own UI
 # bundle from /assets, and mounting there shadows it (breaks the whole UI).
 fastapi_app.mount("/sprites", StaticFiles(directory=os.path.join(WEB, "assets")), name="sprites")
-app = gr.mount_gradio_app(fastapi_app, demo, path="/", head=HEAD, theme=gr.themes.Soft())
+app = gr.mount_gradio_app(fastapi_app, demo, path="/", head=HEAD,
+                          css_paths=[SIDEBAR_CSS], theme=gr.themes.Soft())
 
 
 if __name__ == "__main__":

web/shell/nav.json

@@ -0,0 +1,23 @@
+{
+  "brand": { "title": "Tiny Army", "icon": "⚔️" },
+  "sections": [
+    {
+      "title": "Play",
+      "items": [
+        { "label": "Battle", "target": "Battle", "icon": "◆" }
+      ]
+    },
+    {
+      "title": "Sandbox",
+      "items": [
+        { "label": "Sprite Animations", "target": "Sprite Animations", "icon": "🎞" }
+      ]
+    },
+    {
+      "title": "Barracks",
+      "items": [
+        { "label": "War Diaries", "target": "Barracks", "icon": "📓" }
+      ]
+    }
+  ]
+}

web/shell/sidebar.css

@@ -0,0 +1,76 @@
+/* Shared app-shell sidebar — ONE source for both the React app and the Gradio
+ * Space. Pure CSS (framework-neutral); behaviour is in sidebar.js, content in
+ * nav.json. Everything is namespaced `.tac-*` so it never collides with Gradio's
+ * own classes. The collapse/slide is driven by a `tac-collapsed` class that
+ * sidebar.js toggles on <body>.
+ */
+
+:root {
+  --tac-w: 248px;
+  --tac-bg: #12161c;
+  --tac-bg-2: #0d1116;
+  --tac-ink: #e7e0cf;
+  --tac-muted: #8b95a3;
+  --tac-accent: #6b5bff;
+  --tac-border: #232a33;
+}
+
+/* The drawer — a fixed slide-in panel (works inside Gradio's flow). */
+.tac-sidebar {
+  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000;
+  width: var(--tac-w); box-sizing: border-box;
+  background: var(--tac-bg); border-right: 1px solid var(--tac-border);
+  color: var(--tac-ink); font-family: ui-monospace, Menlo, monospace;
+  display: flex; flex-direction: column;
+  transform: translateX(0); transition: transform .22s ease;
+  overflow-y: auto;
+}
+body.tac-collapsed .tac-sidebar { transform: translateX(-100%); }
+
+/* Push the page content over on desktop when the drawer is open; on mobile it
+ * just overlays (see media query). */
+.gradio-container { transition: margin-left .22s ease; }
+body:not(.tac-collapsed) .gradio-container { margin-left: var(--tac-w); }
+
+.tac-brand {
+  display: flex; align-items: center; gap: 8px;
+  padding: 14px 14px 10px; font-weight: 700; font-size: 15px; letter-spacing: .02em;
+  border-bottom: 1px solid var(--tac-border);
+}
+.tac-brand .tac-brand-icon { font-size: 18px; }
+.tac-brand .tac-collapse {
+  margin-left: auto; background: none; border: 0; color: var(--tac-muted);
+  cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 6px;
+}
+.tac-brand .tac-collapse:hover { background: var(--tac-bg-2); color: var(--tac-ink); }
+
+.tac-section { padding: 10px 8px 0; }
+.tac-section-title {
+  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
+  color: var(--tac-muted); padding: 4px 8px;
+}
+.tac-nav-item {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  padding: 8px 10px; margin: 1px 0; border: 0; border-radius: 8px;
+  background: none; color: var(--tac-ink); font: inherit; text-align: left;
+  cursor: pointer; text-decoration: none;
+}
+.tac-nav-item:hover { background: var(--tac-bg-2); }
+.tac-nav-item.active { background: color-mix(in srgb, var(--tac-accent) 22%, transparent); }
+.tac-nav-item .tac-ico { width: 18px; text-align: center; opacity: .9; }
+
+/* Edge tab to reopen when collapsed. */
+.tac-reopen {
+  position: fixed; top: 12px; left: 0; z-index: 1001;
+  display: none; background: var(--tac-bg); color: var(--tac-ink);
+  border: 1px solid var(--tac-border); border-left: 0;
+  border-radius: 0 8px 8px 0; padding: 8px 10px; cursor: pointer; font-size: 14px;
+}
+body.tac-collapsed .tac-reopen { display: block; }
+
+/* Mobile: the drawer overlays full-bleed-ish and never pushes content. JS
+ * auto-collapses below this width on load + resize. */
+@media (max-width: 768px) {
+  .tac-sidebar { width: min(280px, 86vw); box-shadow: 4px 0 24px rgba(0,0,0,.5); }
+  body:not(.tac-collapsed) .gradio-container { margin-left: 0; }
+}

web/shell/sidebar.js

@@ -0,0 +1,53 @@
+/* Shared app-shell sidebar behaviour — ONE source for React and Gradio. Pure
+ * vanilla DOM (no framework): it toggles a `tac-collapsed` class on <body> (CSS
+ * does the slide), auto-collapses below 768px on load + resize, and routes nav
+ * clicks to the host (a Gradio tab, or a hash route in React). Because it's all
+ * event-delegation + class toggling, the SAME file runs in both frameworks.
+ */
+(function () {
+  var MOBILE = '(max-width: 768px)'
+  var userToggled = false
+
+  function isMobile() { return window.matchMedia(MOBILE).matches }
+  function collapsed() { return document.body.classList.contains('tac-collapsed') }
+  function setCollapsed(c) { document.body.classList.toggle('tac-collapsed', !!c) }
+
+  // Auto-collapse on mobile unless the user has explicitly toggled this session.
+  function applyResponsive() { if (!userToggled) setCollapsed(isMobile()) }
+
+  // Highlight the active nav item by its target label.
+  function setActive(target) {
+    document.querySelectorAll('.tac-nav-item').forEach(function (el) {
+      el.classList.toggle('active', el.getAttribute('data-target') === target)
+    })
+  }
+
+  // Host hook: how a nav item activates a view. Override window.tacNavigate to
+  // customise; default switches the active Gradio tab by matching its label.
+  window.tacNavigate = window.tacNavigate || function (target) {
+    var tab = Array.prototype.find.call(
+      document.querySelectorAll('button[role="tab"]'),
+      function (b) { return b.textContent.trim() === target })
+    if (tab) tab.click()
+  }
+
+  document.addEventListener('click', function (e) {
+    if (e.target.closest('.tac-toggle')) {
+      userToggled = true; setCollapsed(!collapsed()); return
+    }
+    var item = e.target.closest('.tac-nav-item')
+    if (item) {
+      e.preventDefault()
+      var target = item.getAttribute('data-target')
+      setActive(target)
+      try { window.tacNavigate(target) } catch (_) {}
+      if (isMobile()) setCollapsed(true)   // close the drawer after navigating on phones
+    }
+  })
+
+  window.addEventListener('resize', applyResponsive)
+  // Run once the DOM is ready (the sidebar markup may mount after this script).
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', applyResponsive)
+  } else { applyResponsive() }
+})()