@hanzlaa/rcode 3.5.0 → 3.6.1

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

@@ -0,0 +1,211 @@
+/**
+ * App — root Preact component.
+ *
+ * Owns:
+ *   - Hash router (view + subId state, hashchange listener)
+ *   - Layout: Sidebar + content area + Topbar + all 12 Preact view components
+ *   - 30s auto-refresh: polls /api/state, diffs lastScanned, calls setState
+ *   - Theme toggle: reads/persists localStorage('majlis-theme')
+ *
+ * Sprint 31.4 completed the Preact migration. All 12 views are Preact
+ * components. Legacy client-main.js, client-render.js, and client-kanban.js
+ * are deleted. No coexistence seam remains.
+ */
+
+import { html, useState, useEffect, useRef, useCallback } from '../preact.js';
+import { getState, setState, subscribe } from '../store.js';
+import { startSessionsPoll, refreshOrchToken } from '../orchestrator.js';
+import { Sidebar } from './Sidebar.js';
+import { Topbar } from './Topbar.js';
+import { XtermPanel } from './XtermPanel.js';
+import { OrchPanel } from './OrchPanel.js';
+import { OverviewView } from '../views/OverviewView.js';
+import { DecisionsView } from '../views/DecisionsView.js';
+import { RoadmapView } from '../views/RoadmapView.js';
+import { MilestonesView } from '../views/MilestonesView.js';
+import { PhasesView } from '../views/PhasesView.js';
+import { SprintsView } from '../views/SprintsView.js';
+import { TasksView } from '../views/TasksView.js';
+import { KanbanView } from '../views/KanbanView.js';
+import { FilesView } from '../views/FilesView.js';
+import { AgentsView } from '../views/AgentsView.js';
+import { MemoryView } from '../views/MemoryView.js';
+import { OrchestrationView } from '../views/OrchestrationView.js';
+
+// Views served by Preact components (migrated)
+// Sprint 31.4: +orchestration → all 12 views Preact. Migration complete.
+const PREACT_VIEWS = {
+  overview:      OverviewView,
+  decisions:     DecisionsView,
+  roadmap:       RoadmapView,
+  milestones:    MilestonesView,
+  phases:        PhasesView,
+  sprints:       SprintsView,
+  tasks:         TasksView,
+  kanban:        KanbanView,
+  files:         FilesView,
+  agents:        AgentsView,
+  memory:        MemoryView,
+  orchestration: OrchestrationView,
+};
+
+// All views are now Preact — no legacy placeholder hosts needed.
+const LEGACY_VIEWS = [];
+
+const ALL_VIEWS = Object.keys(PREACT_VIEWS).concat(LEGACY_VIEWS);
+
+/** Parse location.hash into { view, subId } — port of client-main.js:45-49. */
+function parseHash() {
+  const raw = location.hash.slice(1) || 'overview';
+  const slash = raw.indexOf('/');
+  const view  = slash === -1 ? raw : raw.slice(0, slash);
+  const subId = slash === -1 ? null : raw.slice(slash + 1);
+  // #263: unknown hash falls back to overview
+  const resolvedView = ALL_VIEWS.includes(view) ? view : 'overview';
+  return { view: resolvedView, subId };
+}
+
+/** Root App component. No props needed — reads everything from the store. */
+export function App() {
+  // ---- Router state ----
+  const [{ view, subId }, setRoute] = useState(parseHash);
+
+  useEffect(() => {
+    function onHashChange() { setRoute(parseHash()); }
+    window.addEventListener('hashchange', onHashChange);
+    return () => window.removeEventListener('hashchange', onHashChange);
+  }, []);
+
+  // ---- Store state (for projectName and pass-through to views) ----
+  const [storeState, setStoreState] = useState(getState);
+  useEffect(() => {
+    const unsub = subscribe(newState => setStoreState({ ...newState }));
+    return unsub;
+  }, []);
+
+  // ---- Theme ----
+  const [theme, setTheme] = useState(() => {
+    const saved = localStorage.getItem('majlis-theme') || 'dark';
+    if (saved === 'light') {
+      document.documentElement.setAttribute('data-theme', 'light');
+    }
+    return saved;
+  });
+
+  const toggleTheme = useCallback(() => {
+    const next = theme === 'light' ? 'dark' : 'light';
+    document.documentElement.setAttribute('data-theme', next === 'dark' ? '' : next);
+    localStorage.setItem('majlis-theme', next);
+    setTheme(next);
+  }, [theme]);
+
+  // ---- Sidebar collapse ----
+  const toggleSidebar = useCallback(() => {
+    const sidebar  = document.querySelector('.sidebar');
+    const backdrop = document.getElementById('sidebar-backdrop');
+    if (!sidebar) return;
+    const open = sidebar.classList.toggle('sidebar-open');
+    if (backdrop) backdrop.classList.toggle('active', open);
+    document.body.classList.toggle('sidebar-visible', open);
+  }, []);
+
+  // ---- Updated-ago display ----
+  const [updatedAgo, setUpdatedAgo] = useState('just now');
+  const scanTimeRef = useRef(Date.now());
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      const s = Math.floor((Date.now() - scanTimeRef.current) / 1000);
+      setUpdatedAgo(s < 5 ? 'just now' : s < 60 ? s + 's ago' : Math.floor(s / 60) + 'm ago');
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  // ---- Manual refresh ----
+  const lastScannedRef = useRef(null);
+
+  const fetchAndRerender = useCallback(async () => {
+    const btn = document.getElementById('refresh-btn');
+    if (btn) btn.textContent = '↺ …';
+    try {
+      const r = await fetch('/api/state');
+      if (!r.ok) return;
+      const newState = await r.json();
+      lastScannedRef.current = newState.lastScanned;
+      scanTimeRef.current = Date.now();
+      setUpdatedAgo('just now');
+      if (newState.raw) {
+        setState({
+          phases:           newState.phaseTree            || newState.raw.phases || [],
+          milestone:        newState.raw.milestone        || '',
+          currentPhase:     newState.raw.current_phase    || null,
+          currentSprint:    newState.raw.current_sprint   || null,
+          decisions:        newState.raw.decisions        || [],
+          blockers:         newState.raw.blockers         || [],
+          council_sessions: newState.raw.council_sessions || [],
+          last_session:     newState.raw.last_session     || null,
+        });
+      }
+    } catch { /* network errors ignored */ }
+    if (btn) btn.textContent = '↺ Refresh';
+  }, []);
+
+  // ---- 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.lastScanned !== lastScannedRef.current) await fetchAndRerender();
+      } catch { /* ignore */ }
+    }, 30000);
+    return () => clearInterval(id);
+  }, [fetchAndRerender]);
+
+  // Expose manualRefresh globally for any legacy onclick="manualRefresh()" callers
+  useEffect(() => {
+    window._preactRefresh = fetchAndRerender;
+  }, [fetchAndRerender]);
+
+  // Start the global session poll and refresh the orchestrator token on boot.
+  useEffect(() => {
+    refreshOrchToken();
+    startSessionsPoll();
+  }, []);
+
+  // ---- View rendering ----
+  const PreactView = PREACT_VIEWS[view] || null;
+
+  return html`
+    <div class="app-shell">
+      <${Sidebar} activeView=${view} projectName=${storeState.projectName || ''} />
+
+      <div id="sidebar-backdrop" onClick=${() => {
+        const sidebar  = document.querySelector('.sidebar');
+        const backdrop = document.getElementById('sidebar-backdrop');
+        if (sidebar) sidebar.classList.remove('sidebar-open');
+        if (backdrop) backdrop.classList.remove('active');
+        document.body.classList.remove('sidebar-visible');
+      }}></div>
+
+      <div class="content-area" id="main-content">
+        <${Topbar}
+          projectName=${storeState.projectName || ''}
+          updatedAgo=${updatedAgo}
+          onRefresh=${fetchAndRerender}
+          onToggleTheme=${toggleTheme}
+          onToggleSidebar=${toggleSidebar}
+          themeLabel=${theme}
+        />
+
+        <div class="main-scroll" id="main-scroll">
+          ${PreactView ? html`<${PreactView} subId=${subId} />` : null}
+        </div>
+      </div>
+
+      <${XtermPanel} />
+      <${OrchPanel} />
+    </div>
+  `;
+}

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

@@ -0,0 +1,293 @@
+/**
+ * OrchPanel — Preact port of the #orch-panel orchestrator side panel.
+ *
+ * Displays a tab strip of SSE-streamed agent sessions with live output,
+ * file-change tracking, and footer controls (Stop / Clear / Clean).
+ *
+ * Driven by store.orchPanel = { open, storyId }.
+ * Session data is held in component state (sessionsMap) — each session has:
+ *   { title, lines: [], fileOps: [], status }
+ *
+ * The SSE stream (connectOrchestratorStream) appends chunks/lines/fileOps
+ * as component state updates, which causes Preact to re-render the terminal
+ * body. No direct DOM manipulation.
+ */
+
+import { html, useState, useEffect, useRef, useCallback } from '../preact.js';
+import { useStore, setState } from '../store.js';
+import { orchToken, stopSession, cleanSessions, ORCH_HTTP } from '../orchestrator.js';
+import { showToast } from './shared.js';
+import { Icon } from '../icons-client.js';
+
+// ── Session map helpers ───────────────────────────────────────────────────────
+
+function mkSession(title) {
+  return { title: title || 'Session', lines: [], fileOps: [], status: 'starting' };
+}
+
+// ── SSE streams (module-scoped — one EventSource per storyId) ────────────────
+const _streams = {};
+
+function closeStream(storyId) {
+  if (_streams[storyId]) { _streams[storyId].close(); delete _streams[storyId]; }
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function OrchPanel() {
+  const { orchPanel } = useStore();
+  const open     = !!(orchPanel && orchPanel.open);
+  const reqStory = orchPanel && orchPanel.storyId;
+
+  // sessionsMap: { [storyId]: { title, lines, fileOps, status } }
+  const [sessionsMap, setSessionsMap] = useState({});
+  const [activeTab,   setActiveTab  ] = useState(null);
+  const bodyRef = useRef(null);
+
+  // Scroll to bottom whenever lines change for the active tab
+  useEffect(() => {
+    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
+  }, [sessionsMap, activeTab]);
+
+  // Close all SSE streams on unmount to prevent leaking EventSource connections.
+  useEffect(() => {
+    return () => {
+      Object.keys(_streams).forEach(closeStream);
+    };
+  }, []);
+
+  // When orchPanel is opened with a storyId, create the tab and connect SSE
+  useEffect(() => {
+    if (!reqStory) return;
+    setSessionsMap(prev => {
+      if (prev[reqStory]) return prev;
+      return { ...prev, [reqStory]: mkSession(reqStory) };
+    });
+    setActiveTab(reqStory);
+    // Connect SSE if not already connected
+    if (!_streams[reqStory]) {
+      connectStream(reqStory);
+    }
+  }, [reqStory]);
+
+  function connectStream(storyId) {
+    const tok = orchToken();
+    const es = new EventSource(
+      ORCH_HTTP + '/api/stream/' + encodeURIComponent(storyId) +
+      '?token=' + encodeURIComponent(tok || '')
+    );
+    _streams[storyId] = es;
+
+    function appendLine(storyId, line, cls) {
+      setSessionsMap(prev => {
+        const sess = prev[storyId];
+        if (!sess) return prev;
+        return {
+          ...prev,
+          [storyId]: { ...sess, lines: [...sess.lines, { text: line, cls }] },
+        };
+      });
+    }
+
+    function appendChunk(storyId, chunk) {
+      setSessionsMap(prev => {
+        const sess = prev[storyId];
+        if (!sess) return prev;
+        const lines = sess.lines;
+        const last = lines[lines.length - 1];
+        if (last && last.cls === 'kt-stream') {
+          const updated = [...lines];
+          updated[updated.length - 1] = { ...last, text: last.text + chunk };
+          return { ...prev, [storyId]: { ...sess, lines: updated } };
+        }
+        return {
+          ...prev,
+          [storyId]: { ...sess, lines: [...lines, { text: chunk, cls: 'kt-stream' }] },
+        };
+      });
+    }
+
+    function appendFileOp(storyId, fileOp) {
+      setSessionsMap(prev => {
+        const sess = prev[storyId];
+        if (!sess) return prev;
+        return {
+          ...prev,
+          [storyId]: { ...sess, fileOps: [...sess.fileOps, fileOp] },
+        };
+      });
+    }
+
+    function setTabStatus(storyId, status) {
+      setSessionsMap(prev => {
+        const sess = prev[storyId];
+        if (!sess) return prev;
+        return { ...prev, [storyId]: { ...sess, status } };
+      });
+    }
+
+    es.onmessage = e => {
+      try {
+        const d = JSON.parse(e.data);
+        if (d.chunk)  appendChunk(storyId, d.chunk);
+        if (d.line)   {
+          let cls = 'kt-line';
+          const l = d.line;
+          if (l.startsWith('⚙'))  cls += ' tool';
+          else if (l.startsWith('⚠')) cls += ' warn';
+          else if (l.startsWith('✗')) cls += ' err';
+          else if (l.startsWith('✅')) cls += ' done-line';
+          else if (l.startsWith('▶') || l.startsWith('◉') || l.startsWith('■')) cls += ' meta';
+          appendLine(storyId, l, cls);
+        }
+        if (d.fileOp) appendFileOp(storyId, d.fileOp);
+        if (d.status) {
+          setTabStatus(storyId, d.status);
+          if (d.status === 'done')    appendLine(storyId, '✅ Done', 'kt-line done-line');
+          if (d.status === 'stopped') appendLine(storyId, '■ Stopped', 'kt-line meta');
+          if (d.status !== 'running') { closeStream(storyId); }
+        }
+      } catch { /* ignore parse errors */ }
+    };
+    es.onerror = () => {
+      setTabStatus(storyId, 'error');
+      closeStream(storyId);
+    };
+  }
+
+  const handleClose = useCallback(() => {
+    setState({ orchPanel: null });
+  }, []);
+
+  function handleTabClick(storyId) {
+    setActiveTab(storyId);
+  }
+
+  function handleTabClose(e, storyId) {
+    e.stopPropagation();
+    closeStream(storyId);
+    setSessionsMap(prev => {
+      const next = { ...prev };
+      delete next[storyId];
+      return next;
+    });
+    if (activeTab === storyId) {
+      const remaining = Object.keys(sessionsMap).filter(k => k !== storyId);
+      setActiveTab(remaining[0] || null);
+    }
+  }
+
+  function handleStop() {
+    if (activeTab) stopSession(activeTab);
+  }
+
+  function handleClear() {
+    if (!activeTab) return;
+    setSessionsMap(prev => {
+      const sess = prev[activeTab];
+      if (!sess) return prev;
+      return { ...prev, [activeTab]: { ...sess, lines: [], fileOps: [] } };
+    });
+  }
+
+  function handleClean() {
+    cleanSessions().then(d => {
+      showToast('Cleaned ' + (d.removed || 0) + ' sessions');
+    });
+  }
+
+  const tabs = Object.keys(sessionsMap);
+  const activeSess = activeTab ? sessionsMap[activeTab] : null;
+  const hasStream = activeTab && !!_streams[activeTab];
+  const runningCount = Object.keys(_streams).length;
+
+  const panelCls = 'orch-panel' + (open ? ' open' : '');
+
+  return html`
+    <div class=${panelCls}>
+      <div class="orch-panel-header">
+        <div class="orch-panel-title">
+          <span class=${'orch-status-dot' + (runningCount > 0 ? ' up' : '')}></span>
+          Agent Sessions
+        </div>
+        <button class="orch-panel-close" onClick=${handleClose} title="Close" aria-label="Close panel"><${Icon} name="x" size=${14}/></button>
+      </div>
+
+      <!-- Tab strip -->
+      <div class="orch-tabs">
+        ${tabs.length === 0 ? html`
+          <div class="orch-term-empty orch-empty-tab">
+            No active sessions
+          </div>
+        ` : tabs.map(sid => {
+          const sess = sessionsMap[sid];
+          const isActive = sid === activeTab;
+          return html`
+            <button
+              key=${sid}
+              class=${'orch-tab' + (isActive ? ' active' : '')}
+              onClick=${() => handleTabClick(sid)}
+            >
+              <span class=${'tab-status-dot ' + (sess.status || 'starting')}></span>
+              <span>${(sess.title || sid).slice(0, 20)}</span>
+              <button
+                class="orch-tab-close"
+                onClick=${e => handleTabClose(e, sid)}
+                title="Close"
+                aria-label="Close tab"
+              ><${Icon} name="x" size=${12}/></button>
+            </button>
+          `;
+        })}
+      </div>
+
+      <!-- Terminal body -->
+      <div class="orch-terminal">
+        <div class="orch-term-body" ref=${bodyRef}>
+          ${!activeSess ? html`
+            <div class="orch-term-empty">
+              <div>Select a session or run a story card</div>
+            </div>
+          ` : activeSess.lines.length === 0 ? html`
+            <div class="orch-term-empty">
+              <div>No output yet for ${activeTab}</div>
+            </div>
+          ` : activeSess.lines.map((line, i) => html`
+            <div key=${i} class=${line.cls}>${line.text}</div>
+          `)}
+        </div>
+        ${activeSess && activeSess.fileOps.length > 0 ? html`
+          <div class="orch-files">
+            <div class="orch-files-head">File changes</div>
+            ${activeSess.fileOps.map((fo, i) => {
+              const opClass = fo.op === 'write' ? 'op-w' : fo.op === 'bash' ? 'op-b' : 'op-r';
+              const opLabel = fo.op === 'write' ? '✎' : fo.op === 'bash' ? '$' : null;
+              const label   = fo.path || fo.cmd || fo.tool || '';
+              return html`
+                <div key=${i} class="kt-file">
+                  <span class=${'op-icon ' + opClass}>${fo.op !== 'write' && fo.op !== 'bash' ? html`<${Icon} name="eye" size=${12}/>` : opLabel}</span> ${label}
+                </div>
+              `;
+            })}
+          </div>
+        ` : null}
+      </div>
+
+      <!-- Footer -->
+      <div class="orch-panel-footer">
+        <!-- style= here is intentional: dynamic display:none toggle — replacing with a CSS class would require extra state wiring -->
+        <button
+          class="orch-footer-btn stop"
+          style=${hasStream ? '' : 'display:none'}
+          onClick=${handleStop}
+        >■ Stop</button>
+        <button class="orch-footer-btn" onClick=${handleClear}>Clear</button>
+        <button class="orch-footer-btn" onClick=${handleClean}>Clean sessions…</button>
+        <div class="orch-footer-spacer"></div>
+        <span class="orch-footer-status">
+          ${runningCount > 0 ? runningCount + ' running' : ''}
+        </span>
+      </div>
+    </div>
+  `;
+}

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

@@ -0,0 +1,73 @@
+/**
+ * Sidebar component — project label, nav sections, 12 nav-link buttons.
+ *
+ * Reuses existing CSS classes from css.js: sidebar, nav-section, nav-link,
+ * data-view, active. Emoji replaced with SVG icons from icons-client.js.
+ */
+
+import { html } from '../preact.js';
+import { Icon } from '../icons-client.js';
+
+// Nav structure: [ { section, links: [ { view, icon, label } ] } ]
+const NAV_SECTIONS = [
+  {
+    section: 'Overview',
+    links: [
+      { view: 'overview',      icon: 'home',        label: 'Overview'      },
+      { view: 'orchestration', icon: 'activity',    label: 'Orchestration' },
+      { view: 'roadmap',       icon: 'map',         label: 'Roadmap'       },
+    ],
+  },
+  {
+    section: 'Planning',
+    links: [
+      { view: 'milestones', icon: 'target',      label: 'Milestones' },
+      { view: 'phases',     icon: 'layers',      label: 'Phases'     },
+      { view: 'sprints',    icon: 'zap',         label: 'Sprints'    },
+      { view: 'tasks',      icon: 'checkSquare', label: 'Tasks'      },
+      { view: 'kanban',     icon: 'kanban',      label: 'Kanban'     },
+    ],
+  },
+  {
+    section: 'Workspace',
+    links: [
+      { view: 'files',     icon: 'file',     label: 'Files'     },
+      { view: 'agents',    icon: 'users',    label: 'Agents'    },
+      { view: 'decisions', icon: 'scale',    label: 'Decisions' },
+      { view: 'memory',    icon: 'database', label: 'Memory'    },
+    ],
+  },
+];
+
+/**
+ * Sidebar component.
+ *
+ * Props:
+ *   activeView  {string}  — currently active view key
+ *   projectName {string}  — displayed under the "Rihal" label
+ */
+export function Sidebar({ activeView, projectName }) {
+  return html`
+    <aside class="sidebar" id="sidebar">
+      <div class="sidebar-project">
+        <div class="project-label">Rihal</div>
+        <span>${projectName || ''}</span>
+      </div>
+      <nav>
+        ${NAV_SECTIONS.map(({ section, links }) => html`
+          <div class="nav-section">${section}</div>
+          ${links.map(({ view, icon, label }) => html`
+            <button
+              class=${'nav-link' + (activeView === view ? ' active' : '')}
+              data-view=${view}
+              onClick=${() => { location.hash = view; }}
+            >
+              <${Icon} name=${icon} size=${14} />
+              ${' ' + label}
+            </button>
+          `)}
+        `)}
+      </nav>
+    </aside>
+  `;
+}

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

@@ -0,0 +1,53 @@
+/**
+ * Topbar component — brand, live dot, updated-ago, action buttons.
+ *
+ * Reuses existing CSS classes: header-actions, header-btn, live, hamburger-btn.
+ *
+ * Props:
+ *   projectName   {string}   — shown in the brand subtitle
+ *   updatedAgo    {string}   — text for the "updated N ago" span
+ *   onRefresh     {function} — called when Refresh button is clicked
+ *   onToggleTheme {function} — called when theme button is clicked
+ *   onToggleSidebar {function} — called when hamburger is clicked
+ *   themeLabel    {string}   — 'light' or 'dark' — controls which icon the theme button shows
+ */
+
+import { html } from '../preact.js';
+import { Icon } from '../icons-client.js';
+
+export function Topbar({ projectName, updatedAgo, onRefresh, onToggleTheme, onToggleSidebar, themeLabel }) {
+  return html`
+    <header>
+      <div class="topbar-start-group">
+        <button
+          class="hamburger-btn"
+          id="hamburger-btn"
+          onClick=${onToggleSidebar}
+          aria-label="Toggle menu"
+        >
+          <span></span><span></span><span></span>
+        </button>
+        <div class="brand">
+          <div class="icon"><${Icon} name="building" size=${16} cls="brand-icon"/></div>
+          <div>
+            <h1>Majlis — The Council</h1>
+            <div class="arabic">مجلس · ${projectName || ''}</div>
+          </div>
+        </div>
+      </div>
+      <div class="header-actions">
+        <span class="live" id="live-dot" title="Live"></span>
+        <span id="updated-ago" class="updated-ago">${updatedAgo || 'just now'}</span>
+        <button class="header-btn" id="refresh-btn" onClick=${onRefresh}>↺ Refresh</button>
+        <!-- icon shows TARGET state (not current): dark→sun means "click to go light"; light→moon means "click to go dark" -->
+        <button class="header-btn" id="theme-btn" onClick=${onToggleTheme} title="Toggle theme"><${Icon} name=${themeLabel === 'light' ? 'moon' : 'sun'} size=${14}/></button>
+        <button class="header-btn" onClick=${() => {
+          navigator.clipboard.writeText(location.href);
+          // Show a toast if available
+          const toast = document.getElementById('toast');
+          if (toast) { toast.textContent = 'URL copied!'; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2500); }
+        }} title="Copy URL">⎘ Link</button>
+      </div>
+    </header>
+  `;
+}