@hanzlaa/rcode 3.5.0 → 3.6.0

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(7).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>
+  `;
+}

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

@@ -0,0 +1,220 @@
+/**
+ * XtermPanel — Preact wrapper around the CDN xterm.js terminal.
+ *
+ * xterm.js is NOT replaced — it stays the CDN global (Terminal, FitAddon)
+ * loaded by shell.js. This component manages:
+ *   - One shared xterm instance (built once in a useRef, reused per session)
+ *   - WebSocket lifecycle: connect on open, write output, send keystrokes/resize
+ *   - Panel visibility: open / minimized-pill / fullscreen controlled by store
+ *
+ * Store field: state.terminal = { open, storyId, title, minimized, fullscreen }
+ * Setting state.terminal via orchestrator.js triggers this component.
+ */
+
+import { html, useEffect, useRef, useCallback } from '../preact.js';
+import { useStore, setState } from '../store.js';
+import { orchToken, stopSession, ORCH_WS } from '../orchestrator.js';
+
+// ── Internal state (module-scoped, one panel at a time) ──────────────────────
+// These refs are NOT component state because the xterm instance must persist
+// across panel open/close cycles and Preact re-renders.
+let _term    = null;
+let _termFit = null;
+let _termWs  = null;
+
+function setStatus(dotStatus) {
+  // Propagate connection status via a store signal so the pill/header can react
+  setState({ termStatus: dotStatus || '' });
+}
+
+function _resize() {
+  if (_termFit) { try { _termFit.fit(); } catch (_e) {} }
+  if (_term && _termWs && _termWs.readyState === 1) {
+    _termWs.send(JSON.stringify({ t: 'r', cols: _term.cols, rows: _term.rows }));
+  }
+}
+
+/** Build the xterm instance exactly once; attach to `containerEl`. */
+function ensureTerm(containerEl) {
+  if (_term || typeof Terminal === 'undefined') return;
+  _term = new Terminal({
+    theme: {
+      background: '#0c0c0e', foreground: '#c9d1d9',
+      cursor: '#58a6ff', selectionBackground: 'rgba(94,106,210,0.25)',
+      black: '#0c0c0e', red: '#ff4444', green: '#3fb950',
+      yellow: '#d29922', blue: '#58a6ff', magenta: '#bc8cff',
+      cyan: '#39c5cf', white: '#b1bac4', brightBlack: '#6e7681',
+    },
+    fontFamily: '"JetBrains Mono","SF Mono",Consolas,monospace',
+    fontSize: 12, lineHeight: 1.4,
+    // PTY output already carries CRLF — converting again would double lines.
+    convertEol: false,
+    scrollback: 8000, cursorBlink: true,
+  });
+  if (typeof FitAddon !== 'undefined') {
+    _termFit = new FitAddon.FitAddon();
+    _term.loadAddon(_termFit);
+  }
+  _term.open(containerEl);
+  if (_termFit) { try { _termFit.fit(); } catch (_e) {} }
+  // Keystrokes → PTY
+  _term.onData(data => {
+    if (_termWs && _termWs.readyState === 1) {
+      _termWs.send(JSON.stringify({ t: 'i', d: data }));
+    }
+  });
+}
+
+/** Open a WebSocket to the orchestrator PTY for storyId. */
+function connectWs(storyId) {
+  if (_termWs) { try { _termWs.close(); } catch (_e) {} _termWs = null; }
+  const tok = orchToken();
+  if (!tok) {
+    if (_term) _term.writeln('\r\n\x1b[31m✗ No orchestrator token — restart the dashboard\x1b[0m');
+    return;
+  }
+  setStatus('connecting');
+  const url = ORCH_WS + '/ws/' + encodeURIComponent(storyId) + '?token=' + encodeURIComponent(tok);
+  const ws = new WebSocket(url);
+  _termWs = ws;
+
+  ws.onopen = () => { _resize(); };
+  ws.onmessage = e => {
+    let m;
+    try { m = JSON.parse(e.data); } catch { return; }
+    if (m.t === 'o' || m.t === 'hist') {
+      if (_term) _term.write(m.d);
+    } else if (m.t === 's') {
+      setStatus(m.s);
+      if (m.s === 'done' || m.s === 'exited' || m.s === 'stopped' || m.s === 'error') {
+        if (_term) _term.writeln('\r\n\x1b[90m── session ' + m.s + ' ──\x1b[0m');
+      }
+    }
+  };
+  ws.onerror = () => { setStatus('error'); };
+  ws.onclose = () => { if (_termWs === ws) _termWs = null; };
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function XtermPanel() {
+  const { terminal, termStatus } = useStore();
+  const containerRef = useRef(null);
+  const currentStoryRef = useRef(null);
+
+  const t = terminal || {};
+  const open       = !!t.open;
+  const minimized  = !!t.minimized;
+  const fullscreen = !!t.fullscreen;
+  const storyId    = t.storyId || '';
+  const title      = t.title   || 'Terminal';
+
+  // Build xterm instance on first open; reconnect when storyId changes.
+  // The resize listener is registered here (not inside ensureTerm) so the
+  // cleanup return can mirror it on unmount.
+  useEffect(() => {
+    if (!open || !containerRef.current) return;
+    ensureTerm(containerRef.current);
+    if (_term) { _term.clear(); _resize(); }
+    if (storyId && storyId !== currentStoryRef.current) {
+      currentStoryRef.current = storyId;
+      connectWs(storyId);
+    }
+    window.addEventListener('resize', _resize);
+    return () => window.removeEventListener('resize', _resize);
+  }, [open, storyId]);
+
+  // Resize when entering/leaving fullscreen or on open
+  useEffect(() => {
+    if (open) { setTimeout(_resize, 50); }
+  }, [open, fullscreen]);
+
+  // Escape key closes
+  useEffect(() => {
+    function onKey(e) {
+      if (e.key === 'Escape' && open && !minimized) {
+        setState({ terminal: { ...t, open: false } });
+      }
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, minimized, t]);
+
+  const dotCls = 'term-status-dot ' + (termStatus || '');
+
+  // ── Actions ──
+  const handleMinimize = useCallback(() => {
+    setState({ terminal: { ...t, open: true, minimized: true } });
+  }, [t]);
+
+  const handleRestore = useCallback(() => {
+    setState({ terminal: { ...t, open: true, minimized: false } });
+    setTimeout(_resize, 50);
+  }, [t]);
+
+  const handleClose = useCallback(() => {
+    if (_termWs) { try { _termWs.close(); } catch (_e) {} _termWs = null; }
+    setState({ terminal: null });
+  }, []);
+
+  const handleStop = useCallback(() => {
+    if (storyId) stopSession(storyId);
+  }, [storyId]);
+
+  const handleToggleFull = useCallback(() => {
+    setState({ terminal: { ...t, fullscreen: !fullscreen } });
+    setTimeout(_resize, 50);
+  }, [t, fullscreen]);
+
+  // ── Pill (minimized state) ──
+  const pill = html`
+    <div
+      class=${'term-pill' + (minimized ? ' show' : '')}
+      onClick=${handleRestore}
+      title="Restore terminal"
+    >
+      <span class=${dotCls}></span>
+      <span>${title}</span>
+      <span class="term-pill-icon">▢</span>
+    </div>
+  `;
+
+  // ── Backdrop ──
+  const backdrop = html`
+    <div class=${'term-backdrop' + (open && !minimized ? ' open' : '')}></div>
+  `;
+
+  // ── Panel ──
+  const panelCls = 'term-panel' +
+    (open && !minimized ? ' open' : '') +
+    (fullscreen         ? ' fullscreen' : '');
+
+  const panel = html`
+    <div class=${panelCls}>
+      <div class="term-header">
+        <div class="term-header-left">
+          <div class=${dotCls}></div>
+          <span class="term-title">${title}</span>
+        </div>
+        <div class="term-header-right">
+          <button class="term-btn" onClick=${handleToggleFull} title="Toggle full screen">
+            ⛶ Full
+          </button>
+          <button class="term-btn" onClick=${handleMinimize} title="Minimize — session keeps running">
+            — Min
+          </button>
+          <button class="term-btn term-stop-btn" onClick=${handleStop} title="End the agent session">
+            ■ Stop
+          </button>
+          <button class="term-btn" onClick=${handleClose} title="Close viewer — session keeps running">
+            ✕ Close
+          </button>
+        </div>
+      </div>
+      <div class="term-hint">Click the terminal and type to talk to the agent — Enter sends, Ctrl+C interrupts.</div>
+      <div ref=${containerRef} id="term-container"></div>
+    </div>
+  `;
+
+  return [backdrop, panel, pill];
+}