@hanzlaa/rcode 3.5.0 → 3.6.0

package/server/lib/html/client/views/DecisionsView.js

@@ -0,0 +1,102 @@
+/**
+ * DecisionsView — Preact component.
+ *
+ * Ports renderDecisions() from client-main.js to a component.
+ * Filtering is local component state (useState), not the DOM filterItems hack.
+ * Reads decisions from the store via useStore().
+ */
+
+import { html, useState } from '../preact.js';
+import { useStore } from '../store.js';
+import { humanDate } from '../util.js';
+import { CmdHint, CmdHints, showToast } from '../components/shared.js';
+
+const CMD_HINTS = [
+  ['/rihal-council',                   'Convene the council for a new decision'],
+  ['/rihal-discuss [agent] "topic"',   'Discuss with a specific expert'],
+  ['/rihal-decisions',                 'View decision log'],
+];
+
+export function DecisionsView() {
+  const S = useStore();
+  const decisions = S.decisions || [];
+
+  // Filter state — replaces the DOM filterItems hack
+  const [query, setQuery] = useState('');
+  const q = query.toLowerCase().trim();
+
+  if (!decisions.length) {
+    return html`
+      <div id="view-decisions" class="view active">
+        <div class="view-title">Decisions (ADRs)</div>
+        <div class="empty">
+          No decisions recorded yet.
+          <div class="empty-action">Decisions made during /rihal-council appear here</div>
+        </div>
+      </div>
+    `;
+  }
+
+  // Group by phase — same as client-main.js:renderDecisions
+  const grouped = {};
+  for (const d of decisions) {
+    const phase = (typeof d === 'object' ? d.phase : null) || 'General';
+    if (!grouped[phase]) grouped[phase] = [];
+    grouped[phase].push(d);
+  }
+
+  return html`
+    <div id="view-decisions" class="view active">
+      <div class="view-title">Decisions (ADRs)</div>
+      <div class="filter-bar">
+        <input
+          class="filter-input"
+          type="text"
+          placeholder="Filter…"
+          value=${query}
+          onInput=${e => setQuery(e.target.value)}
+        />
+      </div>
+      <div id="decisions-inner">
+        ${Object.entries(grouped).map(([phase, decs]) => {
+          const filteredDecs = q
+            ? decs.filter(d => {
+                const title = typeof d === 'string' ? d : (d.title || d.summary || d.decision || JSON.stringify(d).slice(0, 80));
+                return String(title).toLowerCase().includes(q);
+              })
+            : decs;
+          if (!filteredDecs.length) return null;
+          return html`
+            <div key=${phase}>
+              <div class="memory-group-header">${phase}</div>
+              <div class="decision-list">
+                ${filteredDecs.map((d, i) => {
+                  const title = typeof d === 'string'
+                    ? d
+                    : (d.title || d.summary || d.decision || JSON.stringify(d).slice(0, 80));
+                  const dateInfo = (typeof d === 'object' && d.date)
+                    ? html`<span style="color:var(--text-muted);font-size:var(--text-xs);margin-left:8px;">${humanDate(d.date)}</span>`
+                    : null;
+                  const phaseInfo = (typeof d === 'object' && d.phase)
+                    ? html`<span class="tag">Phase ${d.phase}</span>`
+                    : null;
+                  const rationale = (typeof d === 'object' && d.rationale)
+                    ? html`<div style="color:var(--text-secondary);font-size:var(--text-sm);margin-top:4px;">${d.rationale}</div>`
+                    : null;
+                  return html`
+                    <div key=${i} class="item">
+                      <div class="item-title">${title}${dateInfo}</div>
+                      <div class="item-meta">${phaseInfo}</div>
+                      ${rationale}
+                    </div>
+                  `;
+                })}
+              </div>
+            </div>
+          `;
+        })}
+      </div>
+      <${CmdHints} hints=${CMD_HINTS}/>
+    </div>
+  `;
+}

package/server/lib/html/client/views/FilesView.js

@@ -0,0 +1,223 @@
+/**
+ * FilesView — Preact port of the Files view from client-main.js.
+ *
+ * On mount: fetches /api/files to build the grouped file tree.
+ * Clicking a file: fetches /api/file?path=... and renders markdown via the
+ * global `marked` CDN lib (stays a CDN global — unchanged from legacy).
+ *
+ * Agent-jump bridge: when the store field `requestedFile` is set (by
+ * AgentsView), FilesView picks it up and pre-fills the search filter, then
+ * clears the field so subsequent renders don't re-trigger.
+ */
+
+import { html, useState, useEffect, useCallback } from '../preact.js';
+import { useStore, setState } from '../store.js';
+import { showToast } from '../components/shared.js';
+
+// ---- Markdown helpers (ported from client-main.js:287-294) ----
+function stripFrontmatter(md) {
+  if (!md.startsWith('---')) return md;
+  const end = md.indexOf('\n---', 3);
+  return end === -1 ? md : md.slice(end + 4).trimStart();
+}
+
+function renderMd(md) {
+  const clean = stripFrontmatter(md);
+  return (typeof marked !== 'undefined')
+    ? marked.parse(clean)
+    : '<pre>' + clean.replace(/</g, '&lt;') + '</pre>';
+}
+
+// ---- File tree components ----
+function FileEntry({ file, extraText, onSelect, isSelected }) {
+  return html`
+    <div
+      class=${'item item-clickable inline-file-entry' + (isSelected ? ' selected' : '')}
+      data-path=${file.path}
+      onClick=${() => onSelect(file)}
+      style="padding:var(--space-2) var(--space-3);font-family:'SF Mono',Monaco,Consolas,monospace;font-size:var(--text-xs);"
+    >
+      ${file.label}
+    </div>
+  `;
+}
+
+function FileGroup({ group, onSelect, selectedPath, filter }) {
+  function matchesFilter(file, extra) {
+    if (!filter) return true;
+    const q = filter.toLowerCase();
+    return (file.label + ' ' + file.path + (extra ? ' ' + extra : '')).toLowerCase().includes(q);
+  }
+
+  if (group.subGroups) {
+    return html`
+      <div class="inline-file-group" style="margin-bottom:var(--space-3);">
+        <div style="font-size:var(--text-xs);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.07em;padding:var(--space-1) var(--space-3);">
+          ${group.group}
+        </div>
+        ${group.subGroups.map(sg => {
+          const visible = sg.files.filter(f => matchesFilter(f, sg.subGroup));
+          if (!visible.length) return null;
+          return html`
+            <details class="inline-subgroup" open style="margin-left:var(--space-2);margin-bottom:var(--space-1);">
+              <summary style="font-size:var(--text-xs);font-weight:500;color:var(--text-secondary);cursor:pointer;padding:var(--space-1) var(--space-3);user-select:none;">
+                ${sg.subGroup} <span style="color:var(--text-muted);font-weight:400;">(${visible.length})</span>
+              </summary>
+              ${visible.map(f => html`
+                <${FileEntry}
+                  key=${f.path}
+                  file=${f}
+                  extraText=${sg.subGroup}
+                  onSelect=${onSelect}
+                  isSelected=${selectedPath === f.path}
+                />
+              `)}
+            </details>
+          `;
+        })}
+      </div>
+    `;
+  }
+
+  if (group.files) {
+    const visible = group.files.filter(f => matchesFilter(f, ''));
+    if (!visible.length) return null;
+    return html`
+      <div class="inline-file-group" style="margin-bottom:var(--space-3);">
+        <div style="font-size:var(--text-xs);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.07em;padding:var(--space-1) var(--space-3);">
+          ${group.group}
+        </div>
+        ${visible.map(f => html`
+          <${FileEntry}
+            key=${f.path}
+            file=${f}
+            onSelect=${onSelect}
+            isSelected=${selectedPath === f.path}
+          />
+        `)}
+      </div>
+    `;
+  }
+
+  return null;
+}
+
+// ---- File content pane ----
+function FileContent({ path, html: htmlContent, loading, error }) {
+  if (loading) {
+    return html`
+      <div id="file-view">
+        <div class="skeleton"></div>
+        <div class="skeleton" style="height:200px;"></div>
+      </div>
+    `;
+  }
+  if (error) {
+    return html`
+      <div id="file-view">
+        <div style="color:var(--accent-red);padding:16px;">${error}</div>
+      </div>
+    `;
+  }
+  if (!path || !htmlContent) return html`<div id="file-view"></div>`;
+
+  function copyPath() {
+    navigator.clipboard.writeText(path).then(() => {
+      showToast('Path copied!');
+    }).catch(() => {});
+  }
+
+  return html`
+    <div id="file-view">
+      <div class="file-path-header">
+        <span>${path}</span>
+        <button class="copy-btn" onClick=${copyPath}>Copy</button>
+      </div>
+      <div class="md-render" dangerouslySetInnerHTML=${{ __html: htmlContent }} />
+    </div>
+  `;
+}
+
+// ---- Root FilesView ----
+export function FilesView() {
+  const { requestedFile } = useStore();
+
+  const [groups, setGroups]         = useState([]);
+  const [loading, setLoading]       = useState(true);
+  const [filter, setFilter]         = useState('');
+  const [selectedPath, setSelectedPath] = useState(null);
+  const [fileContent, setFileContent]   = useState({ html: null, loading: false, error: null });
+
+  // Fetch file tree on mount
+  useEffect(() => {
+    setLoading(true);
+    fetch('/api/files')
+      .then(r => r.json())
+      .then(data => { setGroups(Array.isArray(data) ? data : []); })
+      .catch(() => setGroups([]))
+      .finally(() => setLoading(false));
+  }, []);
+
+  // Agent-jump bridge: requestedFile set by AgentsView
+  useEffect(() => {
+    if (!requestedFile) return;
+    setFilter(requestedFile);
+    // Clear the bridge field so this doesn't re-trigger
+    setState({ requestedFile: null });
+  }, [requestedFile]);
+
+  const loadFile = useCallback(async (file) => {
+    setSelectedPath(file.path);
+    setFileContent({ html: null, loading: true, error: null });
+    try {
+      const resp = await fetch('/api/file?path=' + encodeURIComponent(file.path));
+      if (!resp.ok) {
+        setFileContent({ html: null, loading: false, error: 'Failed to load file.' });
+        return;
+      }
+      const text = await resp.text();
+      setFileContent({ html: renderMd(text), loading: false, error: null });
+    } catch {
+      setFileContent({ html: null, loading: false, error: 'Network error.' });
+    }
+  }, []);
+
+  return html`
+    <div class="view active" id="view-files">
+      <div class="view-title">Files</div>
+      <div id="file-list-inline">
+        <div class="filter-bar">
+          <input
+            class="filter-input"
+            type="text"
+            placeholder="Search files…"
+            value=${filter}
+            onInput=${e => setFilter(e.target.value)}
+          />
+        </div>
+        <div id="inline-file-items" class="phase-list">
+          ${loading
+            ? html`<div class="empty" style="margin:16px;">Loading…</div>`
+            : groups.length === 0
+              ? html`<div class="empty" style="margin:16px;">No files found.</div>`
+              : groups.map(g => html`
+                  <${FileGroup}
+                    key=${g.group}
+                    group=${g}
+                    onSelect=${loadFile}
+                    selectedPath=${selectedPath}
+                    filter=${filter}
+                  />
+                `)
+          }
+        </div>
+      </div>
+      <${FileContent}
+        path=${selectedPath}
+        html=${fileContent.html}
+        loading=${fileContent.loading}
+        error=${fileContent.error}
+      />
+    </div>
+  `;
+}

package/server/lib/html/client/views/KanbanView.js

@@ -0,0 +1,236 @@
+/**
+ * KanbanView — Preact port of renderKanban() from client-kanban.js.
+ *
+ * Displays a 4-column board (todo / in_progress / blocked / done) with
+ * draggable cards. Drag-and-drop is visual-only (not persisted).
+ *
+ * Run/Stop/View card buttons call imported orchestrator functions (Sprint 31.4).
+ */
+
+import { html, useState, useCallback } from '../preact.js';
+import { useStore } from '../store.js';
+import { allTasks } from '../util.js';
+import { runStory, stopStory, openOrchPanel } from '../orchestrator.js';
+import { showToast } from '../components/shared.js';
+
+// ---- Column descriptors ----
+const COLS = [
+  { id: 'todo',        label: 'Todo',       cssClass: 'col-todo' },
+  { id: 'in_progress', label: 'In Progress', cssClass: 'col-prog' },
+  { id: 'blocked',     label: 'Blocked',    cssClass: 'col-blocked' },
+  { id: 'done',        label: 'Done',       cssClass: 'col-done' },
+];
+
+/** Map a stored task status to a canonical column id. */
+function kanbanCol(status) {
+  if (status === 'done' || status === 'completed') return 'done';
+  if (status === 'in_progress' || status === 'active' || status === 'running') return 'in_progress';
+  if (status === 'blocked') return 'blocked';
+  return 'todo';
+}
+
+/** Return the effective column, hoisting to in_progress if a live session exists. */
+function effCol(task, activeSessions) {
+  const running = Array.isArray(activeSessions)
+    ? activeSessions.some(s => s.storyId === task.id && s.status === 'running')
+    : false;
+  return (task.id && running) ? 'in_progress' : kanbanCol(task.status);
+}
+
+// ---- Card component ----
+function KanbanCard({ task, col, onDragStart, onDragEnd }) {
+  const sid    = task.id || '';
+  const c      = col;
+  const isRunning = c === 'in_progress';
+  const canRun    = c === 'todo' || c === 'blocked';
+  const pts       = task.points ? task.points + 'p' : null;
+  const phase     = task.phaseId ? 'P' + task.phaseId : null;
+  const sprintMeta = [pts, phase].filter(Boolean).join(' · ');
+
+  function handleRun(e) {
+    e.stopPropagation();
+    runStory(sid);
+  }
+  function handleStop(e) {
+    e.stopPropagation();
+    stopStory(sid);
+  }
+  function handleView(e) {
+    e.stopPropagation();
+    openOrchPanel(sid);
+  }
+
+  return html`
+    <div
+      class=${'kanban-card s-' + c + (isRunning ? ' running' : '')}
+      data-story-id=${sid}
+      draggable=${!!sid}
+      onDragStart=${sid ? onDragStart : undefined}
+      onDragEnd=${sid ? onDragEnd : undefined}
+    >
+      <div class="kanban-card-header">
+        <div class="kanban-card-title">${task.title || task.id || 'Untitled'}</div>
+        ${sid ? html`<div class="kanban-card-id">${sid.slice(0, 8)}</div>` : null}
+      </div>
+      ${sprintMeta ? html`
+        <div class="kanban-card-meta">
+          <span class="kanban-card-sprint">${sprintMeta}</span>
+          <span class="kanban-card-status">${COLS.find(co => co.id === c)?.label || c}</span>
+        </div>
+      ` : null}
+      ${isRunning ? html`
+        <div class="card-run-indicator" id=${'run-ind-' + sid}>
+          <span class="run-pulse"></span>running
+        </div>
+      ` : null}
+      ${sid ? html`
+        <div class="kanban-card-actions">
+          ${canRun ? html`
+            <button class="kanban-run-btn" onClick=${handleRun}>▶ Run</button>
+          ` : isRunning ? html`
+            <button class="kanban-stop-btn" onClick=${handleStop}>■ Stop</button>
+            <button class="kanban-view-btn" onClick=${handleView}>↗ View</button>
+          ` : html`
+            <button class="kanban-view-btn" onClick=${handleView}>↗ Logs</button>
+          `}
+        </div>
+      ` : null}
+    </div>
+  `;
+}
+
+// ---- Column component ----
+function KanbanColumn({ col, cards, onDragStart, onDragEnd, onDragOver, onDrop }) {
+  return html`
+    <div class=${'kanban-col ' + col.cssClass} data-col=${col.id}>
+      <div class="kanban-col-head">
+        <span class="col-label">
+          <span class="col-status-dot"></span>
+          ${col.label}
+        </span>
+        <span class="kanban-count">${cards.length}</span>
+      </div>
+      <div
+        class="kanban-col-body"
+        onDragOver=${e => { e.preventDefault(); onDragOver(e, col.id); }}
+        onDrop=${e => { e.preventDefault(); onDrop(e, col.id); }}
+      >
+        ${cards.map(t => html`
+          <${KanbanCard}
+            key=${t.id || t.title}
+            task=${t}
+            col=${col.id}
+            onDragStart=${e => onDragStart(e, t)}
+            onDragEnd=${onDragEnd}
+          />
+        `)}
+      </div>
+    </div>
+  `;
+}
+
+// ---- Root KanbanView ----
+export function KanbanView() {
+  const { phases, activeSessions } = useStore();
+  const tasks = allTasks(phases);
+
+  // ---- Local column state (visual DnD overrides) ----
+  // Map<taskId, colId> — overrides the store-derived column for visual-only moves.
+  const [visualMoves, setVisualMoves] = useState({});
+  const [dragging, setDragging] = useState(null); // task being dragged
+
+  function getColFor(task) {
+    if (visualMoves[task.id]) return visualMoves[task.id];
+    return effCol(task, activeSessions);
+  }
+
+  // Build buckets
+  const buckets = { todo: [], in_progress: [], blocked: [], done: [] };
+  for (const t of tasks) {
+    const c = getColFor(t);
+    if (buckets[c]) buckets[c].push(t);
+    else buckets.todo.push(t);
+  }
+
+  // ---- DnD handlers ----
+  function handleDragStart(e, task) {
+    if (e.target.tagName === 'BUTTON') { e.preventDefault(); return; }
+    setDragging(task);
+    e.dataTransfer.effectAllowed = 'move';
+    if (e.currentTarget) e.currentTarget.style.opacity = '0.5';
+  }
+
+  function handleDragEnd(e) {
+    if (e.currentTarget) e.currentTarget.style.opacity = '';
+    setDragging(null);
+  }
+
+  function handleDragOver(e, colId) {
+    e.preventDefault();
+  }
+
+  function handleDrop(e, colId) {
+    if (!dragging || !dragging.id) return;
+    setVisualMoves(prev => ({ ...prev, [dragging.id]: colId }));
+    setDragging(null);
+    showToast('Moved (visual only — not persisted)'); // visual only — not persisted
+  }
+
+  // ---- Manual refresh ----
+  function handleSync() {
+    if (typeof window._preactRefresh === 'function') window._preactRefresh();
+  }
+
+  function handleSessions() {
+    window.location.hash = 'orchestration';
+  }
+
+  if (!tasks.length) {
+    return html`
+      <div class="view active" id="view-kanban">
+        <div class="kanban-topbar">
+          <div class="kanban-topbar-title">
+            <span class="orch-status-dot" id="orch-dot"></span>
+            Kanban
+          </div>
+          <div class="kanban-topbar-actions">
+            <button class="kanban-refresh-btn" onClick=${handleSync}>⟳ Sync</button>
+            <button class="kanban-refresh-btn" style="margin-left:4px;" onClick=${handleSessions}>⊞ Sessions</button>
+          </div>
+        </div>
+        <div class="empty" style="margin:24px;">
+          No stories yet.
+          <div class="empty-action">/rihal-plan to generate tasks</div>
+        </div>
+      </div>
+    `;
+  }
+
+  return html`
+    <div class="view active" id="view-kanban">
+      <div class="kanban-topbar">
+        <div class="kanban-topbar-title">
+          <span class="orch-status-dot" id="orch-dot"></span>
+          Kanban
+        </div>
+        <div class="kanban-topbar-actions">
+          <button class="kanban-refresh-btn" onClick=${handleSync}>⟳ Sync</button>
+          <button class="kanban-refresh-btn" style="margin-left:4px;" onClick=${handleSessions}>⊞ Sessions</button>
+        </div>
+      </div>
+      <div class="kanban-board">
+        ${COLS.map(col => html`
+          <${KanbanColumn}
+            key=${col.id}
+            col=${col}
+            cards=${buckets[col.id] || []}
+            onDragStart=${handleDragStart}
+            onDragEnd=${handleDragEnd}
+            onDragOver=${handleDragOver}
+            onDrop=${handleDrop}
+          />
+        `)}
+      </div>
+    </div>
+  `;
+}