@hanzlaa/rcode 3.6.15 → 4.0.0

package/rcode/workflows/why.md

@@ -0,0 +1,135 @@
+<purpose>
+Explain the reasoning behind a rcode decision: why this panel was selected, why this question was classified, why this deviation was logged, or cite a prior decision from state.json.
+</purpose>
+
+## Step 0: Usage Check
+
+Verify non-empty argument: `/rcode-why <topic-or-question>`
+
+Examples:
+- `/rcode-why should I use waleed for this question`
+- `/rcode-why did it classify as codebase`
+- `/rcode-why did we deviate from the plan`
+- `/rcode-why choose this tech stack`
+
+If empty: `Usage: /rcode-why <topic-or-question>`
+
+## Step 1: Detect What User Is Asking About
+
+Parse the question to determine category:
+
+1. **Panel selection**: If contains "panel", "waleed", "hussain", "fatima", "sadiq" → Branch to Step 2a
+2. **Classification**: If contains "classify", "type", "question type", "category" → Branch to Step 2b
+3. **Deviation**: If contains "deviation", "deviate", "didn't follow" → Branch to Step 2c
+4. **General decision**: Default → Branch to Step 2d
+
+## Step 2a: Panel Selection Reasoning
+
+Run: `node .rcode/bin/rcode-tools.cjs select-panel "$ARGUMENTS" --explain`
+
+Output shows:
+```json
+{
+  "panel": ["waleed", "hussain"],
+  "scores": { "waleed": 85, "hussain": 78, "fatima": 62 },
+  "question": "user question here"
+}
+```
+
+Format output as:
+
+```
+📋 Panel Selection for: {question}
+
+Selected: {panel agents joined with commas}
+
+Scoring breakdown:
+{table of all agents with scores, sorted descending}
+
+Why this panel:
+- {top agent}: {reason from scoring logic}
+- {next agent}: {reason}
+
+Alternative considered: {2nd place agent} scored {score} but lower fit for this question type
+```
+
+## Step 2b: Question Classification
+
+Run: `node .rcode/bin/rcode-tools.cjs classify-question "$ARGUMENTS"`
+
+Output shows classification type and signals matched.
+
+Format output as:
+
+```
+🏗️ Question Classification: {question}
+
+**Type:** {codebase|discovery|market|greenfield|team|release|design}
+
+**Signals matched:**
+{list the matched phrases from the question}
+
+**What this means:**
+- Codebase: existing code analysis — scan codebase, use engineer panel
+- Discovery: choosing what to build — requires research/market context
+- Market: external context — may need research agents
+- Greenfield: starting from scratch — consider deep requirements phase
+- Team: people/process questions — involve PM, leadership agents
+- Release: production/shipping — involve ops, security agents
+- Design: UX/visual — involve design agents
+
+**Recommendation:** {brief next step based on classification}
+```
+
+## Step 2c: Deviation Reasoning
+
+Read `.rcode/state.json` and extract `executions[].deviations[]`:
+
+For each deviation in the most recent execution:
+
+```
+🛡️ Deviation: {deviation.title}
+
+Reason: {deviation.reason}
+Impact: {deviation.impact}
+Timestamp: {when it occurred}
+Context: {brief context from plan_id that was executed}
+```
+
+If no deviations found: `No deviations logged in current state.`
+
+## Step 2d: General Decision Lookup
+
+Read `.rcode/state.json` and search `decisions[]` for entry matching the topic.
+
+If found:
+
+```
+📋 Decision: {decision.title}
+
+**Made:** {timestamp}
+**Category:** {category}
+**Reasoning:** {decision.reasoning}
+**Alternatives considered:** {decision.alternatives}
+**Next decision point:** {decision.next_checkpoint}
+```
+
+If not found: `No recorded decision matches "{ARGUMENTS}". Use /rcode-progress to see recent context.`
+
+## Success Criteria
+
+- [ ] Category detected correctly
+- [ ] Relevant data fetched from state.json or rcode-tools
+- [ ] Output explains the "why" with data and reasoning
+- [ ] Format is scannable (tables, bullets, clear sections)
+
+## On Error
+
+- rcode-tools error → Show error message
+- state.json missing → `State not initialized. Run /rcode-new-project first.`
+- No match found → Suggest `/rcode-progress` for context
+
+## Next Up
+
+- `/rcode-decisions` — review the full decision history for the project
+- `/rcode-do` — continue with work informed by the reasoning

package/rcode/workflows/workstream.md

@@ -0,0 +1,215 @@
+# Workflow: rcode-workstream
+
+<purpose>
+Manage parallel workstreams (milestone tracks) in rcode. A workstream is an independent execution path with its own phases and tasks. Multiple workstreams can run in parallel, sharing decisions, blockers, and council sessions. This workflow handles creation, switching, listing, and completion of workstreams stored in state.json.
+</purpose>
+
+<required_reading>
+@.rcode/references/workstream-flag.md
+</required_reading>
+
+## Step 0 — Usage check
+
+If `$ARGUMENTS` is empty or contains only `--help` or `-h`:
+- Print the usage block below
+- STOP — do not proceed to Step 1
+
+**Usage:**
+```
+/rcode-workstream create --name <name>
+/rcode-workstream switch --name <name>
+/rcode-workstream list
+/rcode-workstream status
+/rcode-workstream complete --name <name>
+```
+
+**Examples:**
+```
+/rcode-workstream create --name "Frontend Redesign"
+/rcode-workstream switch --name "Frontend Redesign"
+/rcode-workstream list
+/rcode-workstream status
+/rcode-workstream complete --name "Backend Migration"
+```
+
+Only after the user provides arguments, proceed to Step 1.
+
+## Step 1 — Parse arguments
+
+Extract from `$ARGUMENTS`:
+- `subcommand` — one of: `create`, `switch`, `list`, `status`, `complete`
+- `--name` flag value (for `create`, `switch`, `complete`)
+
+Call the state helper:
+```bash
+RESULT=$(node .rcode/bin/rcode-tools.cjs state workstream-validate "$subcommand" --name "${NAME}" 2>&1)
+```
+
+If validation fails, print error and STOP.
+
+## Step 2 — Execute subcommand
+
+### Subcommand: create
+
+**Check:** name is not empty, does not already exist in state.json workstreams.
+
+**Execute:**
+```bash
+node .rcode/bin/rcode-tools.cjs state workstream-create --name "$NAME" 2>/dev/null || echo '{"ok":false,"error":"workstream-create failed"}'
+```
+
+**Output:**
+```
+✓ Workstream created: {name}
+   ID: {id}
+   Active: false
+   Phases: 0
+```
+
+Set it as active unless user specifies `--no-activate` (not currently supported — leave for future).
+
+### Subcommand: switch
+
+**Check:** name exists in workstreams.
+
+**Execute:**
+```bash
+node .rcode/bin/rcode-tools.cjs state workstream-switch --name "$NAME" 2>/dev/null || echo '{"ok":false,"error":"workstream-switch failed"}'
+```
+
+**Output:**
+```
+✓ Switched to workstream: {name}
+   Previous: {old_name}
+   Phases in this workstream: {count}
+```
+
+### Subcommand: list
+
+**Execute:**
+```bash
+node .rcode/bin/rcode-tools.cjs state workstream-list 2>/dev/null || echo '[]'
+```
+
+**Output (formatted table):**
+```
+Name                     Active  Completed  Phases  Created
+─────────────────────────────────────────────────────────────
+Frontend Redesign        ✓       ✗          3       2026-04-12
+Backend Migration        ✗       ✓          2       2026-04-10
+API Refactor             ✗       ✗          1       2026-04-09
+```
+
+### Subcommand: status
+
+**Execute:**
+```bash
+node .rcode/bin/rcode-tools.cjs state workstream-status 2>/dev/null || echo '{"ok":false,"error":"no active workstream"}'
+```
+
+**Output:**
+```
+📌 Current Workstream
+
+Name: {name}
+Active: {yes|no}
+Completed: {yes|no}
+Phases: {count}
+Created: {date}
+
+Recent phases:
+  - {phase_name} ({date})
+  - {phase_name} ({date})
+```
+
+### Subcommand: complete
+
+**Check:** name exists and is not already completed.
+
+**Execute:**
+```bash
+node .rcode/bin/rcode-tools.cjs state workstream-complete --name "$NAME" 2>/dev/null || echo '{"ok":false,"error":"workstream-complete failed"}'
+```
+
+**Output:**
+```
+✓ Marked workstream complete: {name}
+   Completed at: {ISO date}
+   All phases: {count}
+   Commits in this workstream: {count}
+```
+
+## Step 3 — Update state validation
+
+After any state mutation (create/switch/complete), validate:
+- workstreams array exists
+- active_workstream field is set
+- no duplicate names
+- all workstreams have: name, created (ISO), active (bool), completed (bool), phases (array)
+
+## Data Structure
+
+All workstreams are stored in state.json:
+
+```json
+{
+  "workstreams": [
+    {
+      "name": "Frontend Redesign",
+      "id": "ws-abc123",
+      "created": "2026-04-12T10:30:00Z",
+      "active": true,
+      "completed": false,
+      "phases": []
+    }
+  ],
+  "active_workstream": "Frontend Redesign"
+}
+```
+
+- `name` — human readable workstream name (unique)
+- `id` — short UUID or hash (for future linking)
+- `created` — ISO timestamp when created
+- `active` — boolean, only one workstream is active at a time
+- `completed` — boolean, marks workstream as done
+- `phases` — array of phase objects that belong to this workstream
+
+**Shared state** (NOT scoped to workstream):
+- `decisions` — all decisions apply to all workstreams
+- `blockers` — all blockers apply to all workstreams
+- `council_sessions` — sessions record which workstream they apply to (if any)
+
+**Future:** phases will record which workstream they belong to via `workstream_id` field.
+
+## Success Criteria
+
+- [ ] Requested operation (`create`, `switch`, `list`, `status`, or `complete`) dispatched correctly from arguments
+- [ ] `create`: new workstream entry added to `.rcode/state.json` with its own phases array; workstream directory initialized
+- [ ] `switch`: active workstream pointer updated in `state.json`; user informed of the now-current workstream name
+- [ ] `list`/`status`: all workstreams displayed with their phase counts and current status
+- [ ] `complete`: workstream marked complete in `state.json`; user shown a summary of completed phases and work
+
+## On Error
+
+If arguments are invalid, missing files, or subagent fails:
+- Validate inputs match expected format
+- Check that required files exist
+- Retry with clearer arguments or report the specific error to the user
+
+
+## On Completion
+
+/rcode-plan {next_phase} — plan next phase in this workstream
+/rcode-next — get suggested next action
+/rcode-progress — see all workstreams and phases
+
+## ▶ Next Up
+
+- /rcode-execute {workstream-phase}
+- /rcode-progress
+- /rcode-forensics
+
+## Next Up
+
+- `/rcode-plan` — plan phases in the active workstream
+- `/rcode-list-workspaces` — view all workspaces and their status

package/server/dashboard.js

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 /**
- * Majlis — Rihal Code Dashboard Server
+ * Majlis — rcode Dashboard Server
  *
- * View-only Node server that scans .rihal/ directory and renders
+ * View-only Node server that scans .rcode/ directory and renders
  * a live HTML dashboard showing project state, phases, progress,
  * decisions, and artifacts.
  *
@@ -10,7 +10,7 @@
  *
  * Architecture:
  *   server/dashboard.js          - HTTP server + routing (this file)
- *   server/lib/scanner.js        - State scanning from .rihal/
+ *   server/lib/scanner.js        - State scanning from .rcode/
  *   server/lib/api.js            - API route handlers
  *   server/lib/html/shell.js     - HTML page composition
  *   server/lib/html/css.js       - All CSS styles
@@ -36,16 +36,16 @@ const { renderHtml } = require('./lib/html/shell');
 
 // ---------- Configuration ----------
 const PORT = parseInt(process.env.PORT || '7717', 10);
-const RIHAL_DIR = process.env.RIHAL_DIR || path.join(process.cwd(), '.rihal');
-const PROJECT_ROOT = path.dirname(RIHAL_DIR);
+const RCODE_DIR = process.env.RCODE_DIR || path.join(process.cwd(), '.rcode');
+const PROJECT_ROOT = path.dirname(RCODE_DIR);
 
 // Shared orchestrator token — passed to the orchestrator via env and embedded
-// in the HTML. Persisted to ~/.rihal/orch-token so it stays STABLE across
+// in the HTML. Persisted to ~/.rcode/orch-token so it stays STABLE across
 // dashboard restarts; otherwise every restart invalidates the token baked
 // into already-open browser tabs and their API calls 401.
 function loadOrchToken() {
   if (process.env.ORCH_TOKEN) return process.env.ORCH_TOKEN;
-  const tokenFile = path.join(os.homedir(), '.rihal', 'orch-token');
+  const tokenFile = path.join(os.homedir(), '.rcode', 'orch-token');
   try {
     const existing = fs.readFileSync(tokenFile, 'utf8').trim();
     if (existing) return existing;
@@ -65,12 +65,12 @@ const server = http.createServer((req, res) => {
 
   if (url === '/health') {
     res.writeHead(200, { 'Content-Type': 'application/json' });
-    res.end(JSON.stringify({ status: 'ok', mode: 'view-only', rihal_dir: RIHAL_DIR }));
+    res.end(JSON.stringify({ status: 'ok', mode: 'view-only', rcode_dir: RCODE_DIR }));
     return;
   }
 
   if (url === '/api/state') {
-    handleApiState(req, res, RIHAL_DIR);
+    handleApiState(req, res, RCODE_DIR);
     return;
   }
 
@@ -85,12 +85,12 @@ const server = http.createServer((req, res) => {
   }
 
   if (url === '/api/hierarchy') {
-    handleApiHierarchy(req, res, RIHAL_DIR);
+    handleApiHierarchy(req, res, RCODE_DIR);
     return;
   }
 
   if (url === '/api/memory') {
-    handleApiMemory(req, res, RIHAL_DIR);
+    handleApiMemory(req, res, RCODE_DIR);
     return;
   }
 
@@ -118,7 +118,7 @@ const server = http.createServer((req, res) => {
       if (err) { res.writeHead(404); res.end('Not found'); return; }
       res.writeHead(200, {
         'Content-Type':  'application/javascript; charset=utf-8',
-        'Cache-Control': 'no-cache',
+        'Cache-Control': 'public, max-age=300',
       });
       res.end(data);
     });
@@ -126,9 +126,9 @@ const server = http.createServer((req, res) => {
   }
 
   if (url === '/' || url === '/index.html') {
-    const state = scanState(RIHAL_DIR);
+    const state = scanState(RCODE_DIR);
     const html = renderHtml(state, ORCH_TOKEN);
-    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8', 'Cache-Control': 'no-cache' });
     res.end(html);
     return;
   }
@@ -138,11 +138,11 @@ const server = http.createServer((req, res) => {
 });
 
 server.listen(PORT, '127.0.0.1', () => {
-  console.log(`\n🕌 Majlis (مجلس) — Rihal Code Dashboard`);
+  console.log(`\n🕌 Majlis (مجلس) — rcode Dashboard`);
   console.log(`━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
   console.log(`   Mode:       view-only`);
   console.log(`   URL:        http://localhost:${PORT}`);
-  console.log(`   Scanning:   ${RIHAL_DIR}`);
+  console.log(`   Scanning:   ${RCODE_DIR}`);
   console.log(`   Refresh:    30s soft poll`);
   console.log(`   Keys:       R=refresh  1-9=views  F=filter`);
   console.log(`   Stop:       kill $(lsof -t -i:${PORT})`);
@@ -205,7 +205,7 @@ function spawnOrchestrator() {
   try {
     _orchProc = spawn(process.execPath, [ORCH_BIN], {
       cwd: path.join(__dirname, '..'),
-      env: { ...process.env, ORCH_TOKEN, RIHAL_DIR, PROJECT_ROOT },
+      env: { ...process.env, ORCH_TOKEN, RCODE_DIR, PROJECT_ROOT },
       stdio: 'pipe',
     });
     _orchProc.stdout.on('data', chunk => {
@@ -219,6 +219,11 @@ function spawnOrchestrator() {
     _orchProc.on('exit', (code, signal) => {
       _orchProc = null;
       if (signal !== 'SIGTERM' && signal !== 'SIGINT') {
+        if (code === 2) {
+          // Port-conflict exit — don't loop. Dashboard stays fully functional.
+          console.log(`[orch] orchestrator port already in use — not restarting. Set ORCH_PORT=<N> env var to use a different port. Dashboard is still functional.`);
+          return;
+        }
         console.log(`[orch] exited (${code}) — restarting in 3s…`);
         setTimeout(spawnOrchestrator, 3000);
       }

package/server/lib/api.js

@@ -5,8 +5,8 @@ const fs = require('fs');
 const path = require('path');
 const { scanState, scanMemoryBank } = require('./scanner');
 
-function handleApiState(req, res, rihalDir) {
-  const state = scanState(rihalDir);
+function handleApiState(req, res, rcodeDir) {
+  const state = scanState(rcodeDir);
   res.writeHead(200, { 'Content-Type': 'application/json' });
   res.end(JSON.stringify(state, null, 2));
 }
@@ -150,9 +150,28 @@ function handleApiFile(req, res, projectRoot) {
 }
 
 // Fix #265: hierarchy endpoint
-function handleApiHierarchy(req, res, rihalDir) {
-  const state = scanState(rihalDir);
-  const phases = state.raw?.phases || [];
+function handleApiHierarchy(req, res, rcodeDir) {
+  const state = scanState(rcodeDir);
+  let phases = state.raw?.phases || [];
+
+  // When state.json has no registered phases, fall back to disk scan so the
+  // hierarchy view is not blank on a fresh install that hasn't run state-sync.
+  if (phases.length === 0) {
+    const phasesDir = path.join(path.dirname(rcodeDir), '.planning', 'phases');
+    try {
+      const dirs = fs.readdirSync(phasesDir, { withFileTypes: true })
+        .filter(d => d.isDirectory() && !d.name.startsWith('.'))
+        .sort((a, b) => a.name.localeCompare(b.name));
+      phases = dirs.map(d => {
+        const m = d.name.match(/^(\d+)-(.+)$/);
+        const id = m ? parseInt(m[1], 10) : d.name;
+        const slug = m ? m[2] : d.name;
+        const name = slug.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+        return { id, name, status: 'planned', sprints: [] };
+      });
+    } catch { /* no phases dir — leave phases empty */ }
+  }
+
   const hierarchy = {
     milestone: state.milestone || 'M1',
     phases: phases.map(p => ({
@@ -176,8 +195,8 @@ function handleApiHierarchy(req, res, rihalDir) {
   res.end(JSON.stringify(hierarchy, null, 2));
 }
 
-function handleApiMemory(req, res, rihalDir) {
-  const memory = scanMemoryBank(rihalDir);
+function handleApiMemory(req, res, rcodeDir) {
+  const memory = scanMemoryBank(rcodeDir);
   res.writeHead(200, { 'Content-Type': 'application/json' });
   res.end(JSON.stringify(memory, null, 2));
 }

package/server/lib/html/client/components/App.js

@@ -13,7 +13,7 @@
  */
 
 import { html, useState, useEffect, useRef, useCallback } from '../preact.js';
-import { getState, setState, subscribe } from '../store.js';
+import { getState, setState, subscribe, registerRefresh } from '../store.js';
 import { startSessionsPoll, refreshOrchToken } from '../orchestrator.js';
 import { Sidebar } from './Sidebar.js';
 import { Topbar } from './Topbar.js';
@@ -65,6 +65,35 @@ function parseHash() {
   return { view: resolvedView, subId };
 }
 
+/** Full-width banner shown when /api/state polling is failing. */
+function OfflineBanner({ offline }) {
+  if (!offline) return null;
+  const s = 'display:flex;align-items:center;gap:var(--space-2);'
+    + 'padding:var(--space-2) var(--space-4);background:var(--red,#eb5757);'
+    + 'color:#fff;font-size:var(--text-sm);font-weight:600;';
+  return html`<div style=${s}>⚠ Dashboard offline — retrying every 30s…</div>`;
+}
+
+/** Thin IDE-style status bar: project path · rcode version · last refresh. */
+function StatusBar({ projectRoot, projectName, version, updatedAgo, offline, refreshing }) {
+  const bar = 'display:flex;align-items:center;gap:var(--space-4);height:24px;'
+    + 'padding:0 var(--space-4);background:var(--bg-elev-1);'
+    + 'border-top:1px solid var(--border-subtle);font-family:var(--font-mono);'
+    + 'font-size:var(--text-2xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;';
+  const dot = 'width:6px;height:6px;border-radius:50%;flex-shrink:0;background:'
+    + (offline ? 'var(--red,#eb5757)' : 'var(--accent-green)') + ';'
+    + (refreshing ? 'animation:pulse-dot 1s ease-in-out infinite;' : '');
+  const path = projectRoot || projectName || 'no project';
+  return html`
+    <footer style=${bar}>
+      <span style=${dot}></span>
+      <span style="overflow:hidden;text-overflow:ellipsis;" title=${path}>${path}</span>
+      <span style="margin-left:auto;">rcode v${version || '?'}</span>
+      <span>${offline ? 'offline' : refreshing ? 'syncing…' : 'updated ' + updatedAgo}</span>
+    </footer>
+  `;
+}
+
 /** Root App component. No props needed — reads everything from the store. */
 export function App() {
   // ---- Router state ----
@@ -121,21 +150,21 @@ export function App() {
     return () => clearInterval(id);
   }, []);
 
-  // ---- Manual refresh ----
+  // ---- Refresh (manual + 30s poll share this) ----
   const lastScannedRef = useRef(null);
 
   const fetchAndRerender = useCallback(async () => {
-    const btn = document.getElementById('refresh-btn');
-    if (btn) btn.textContent = '↺ …';
+    setState({ refreshing: true });
     try {
       const r = await fetch('/api/state');
-      if (!r.ok) return;
+      if (!r.ok) { setState({ refreshing: false, offline: true }); return; }
       const newState = await r.json();
       lastScannedRef.current = newState.lastScanned;
       scanTimeRef.current = Date.now();
       setUpdatedAgo('just now');
+      const patch = { refreshing: false, offline: false, lastRefresh: Date.now() };
       if (newState.raw) {
-        setState({
+        Object.assign(patch, {
           phases:           newState.phaseTree            || newState.raw.phases || [],
           milestone:        newState.raw.milestone        || '',
           currentPhase:     newState.raw.current_phase    || null,
@@ -146,26 +175,23 @@ export function App() {
           last_session:     newState.raw.last_session     || null,
         });
       }
-    } catch { /* network errors ignored */ }
-    if (btn) btn.textContent = '↺ Refresh';
+      setState(patch);
+    } catch {
+      // Network failure → mark offline so the banner shows; the poll keeps retrying.
+      setState({ refreshing: false, offline: true });
+    }
   }, []);
 
   // ---- 30s auto-refresh ----
   useEffect(() => {
-    const id = setInterval(async () => {
-      try {
-        const r = await fetch('/api/state');
-        if (!r.ok) return;
-        const s = await r.json();
-        if (s && s.lastScanned !== lastScannedRef.current) await fetchAndRerender();
-      } catch { /* ignore */ }
-    }, 30000);
+    const id = setInterval(fetchAndRerender, 30000);
     return () => clearInterval(id);
   }, [fetchAndRerender]);
 
-  // Expose manualRefresh globally for any legacy onclick="manualRefresh()" callers
+  // Register the refresh handler with the store so any component can call
+  // refresh() directly. Also keeps window._preactRefresh in sync for legacy.
   useEffect(() => {
-    window._preactRefresh = fetchAndRerender;
+    registerRefresh(fetchAndRerender);
   }, [fetchAndRerender]);
 
   // Start the global session poll and refresh the orchestrator token on boot.
@@ -189,10 +215,11 @@ export function App() {
         document.body.classList.remove('sidebar-visible');
       }}></div>
 
-      <div class="content-area" id="main-content">
+      <div class="content-area" id="main-content" style="grid-template-rows:44px 1fr auto;">
         <${Topbar}
           projectName=${storeState.projectName || ''}
           updatedAgo=${updatedAgo}
+          refreshing=${storeState.refreshing}
           onRefresh=${fetchAndRerender}
           onToggleTheme=${toggleTheme}
           onToggleSidebar=${toggleSidebar}
@@ -200,8 +227,18 @@ export function App() {
         />
 
         <div class="main-scroll" id="main-scroll">
+          <${OfflineBanner} offline=${storeState.offline} />
           ${PreactView ? html`<${PreactView} subId=${subId} />` : null}
         </div>
+
+        <${StatusBar}
+          projectRoot=${storeState.projectRoot}
+          projectName=${storeState.projectName}
+          version=${storeState.version}
+          updatedAgo=${updatedAgo}
+          offline=${storeState.offline}
+          refreshing=${storeState.refreshing}
+        />
       </div>
 
       <${XtermPanel} />