@hanzlaa/rcode 4.5.0 → 4.7.0

package/server/lib/html/client/util.js

@@ -75,7 +75,7 @@ export function allSprints(phases) {
 export function allTasks(phases) {
   return (phases || []).flatMap(p =>
     (p.sprints || []).flatMap(s =>
-      (s.stories || []).map(t => Object.assign({}, t, { sprintId: s.id, phaseId: p.id, phaseName: p.name }))
+      (s.stories || []).map(t => Object.assign({}, t, { sprintId: s.id, phaseId: p.id, phaseName: p.name, file: s.file || null }))
     )
   );
 }
@@ -139,27 +139,6 @@ export function sessionChip(status) {
   return { cls, label: status };
 }
 
-/**
- * Props for a clickable card row that navigates to a hash route.
- * Spread onto a list row (`<li ...${rowLink('tasks')}>`) to make it act like
- * a link: pointer + keyboard activation and an accessible role. Pair with the
- * `ovr-link` class for the hover/focus affordance.
- *
- * @param {string} hash — target hash route without the leading '#'.
- * @returns {object} Preact props (role, tabindex, onClick, onKeyDown).
- */
-export function rowLink(hash) {
-  const go = () => { location.hash = hash; };
-  return {
-    role: 'link',
-    tabindex: 0,
-    onClick: go,
-    onKeyDown: (e) => {
-      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go(); }
-    },
-  };
-}
-
 /**
  * Human-readable elapsed time since an ISO timestamp.
  * Ported from _orchElapsed() in client-main.js.

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

@@ -0,0 +1,44 @@
+/**
+ * BacklogView — Preact component.
+ *
+ * Lists phases that haven't started yet (state.dashboard.backlog, derived
+ * server-side in scanner.js from phases with state === 'todo'). Each row
+ * links to that phase's detail page — same navigation PhaseCard/SprintCard
+ * already use elsewhere, no new routing concept.
+ */
+
+import { html } from '../preact.js';
+import { useStore } from '../store.js';
+import { pressable } from '../components/shared.js';
+import { Icon } from '../icons-client.js';
+
+export function BacklogView() {
+  const S = useStore();
+  const backlog = S.backlog || [];
+
+  return html`
+    <div id="view-backlog" class="view active">
+      <div class="view-title">Backlog</div>
+      ${backlog.length === 0
+        ? html`
+          <div class="empty">
+            No phases waiting in the backlog.
+            <div class="empty-action">Run /rcode-add-phase to queue up new work</div>
+          </div>
+        `
+        : html`
+          <div class="phase-list">
+            ${backlog.map(p => html`
+              <div key=${p.id} class="item item-clickable"
+                ...${pressable(() => { location.hash = 'phases/' + p.id; })}>
+                <div class="item-title">
+                  <${Icon} name="clipboard-list" size=${16}/> Phase ${p.id} — ${p.name}
+                </div>
+                ${p.range ? html`<div class="item-meta">${p.range}</div>` : null}
+              </div>
+            `)}
+          </div>
+        `}
+    </div>
+  `;
+}

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

@@ -7,9 +7,9 @@
  */
 
 import { html, useState } from '../preact.js';
-import { useStore } from '../store.js';
+import { useStore, openDecisionViewer } from '../store.js';
 import { humanDate } from '../util.js';
-import { CmdHint, CmdHints, showToast } from '../components/shared.js';
+import { CmdHint, CmdHints, showToast, pressable } from '../components/shared.js';
 
 const CMD_HINTS = [
   ['/rcode-council',                   'Convene the council for a new decision'],
@@ -83,8 +83,9 @@ export function DecisionsView() {
                   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;
+                  const decisionObj = typeof d === 'object' ? d : { title: d };
                   return html`
-                    <div key=${i} class="item">
+                    <div key=${i} class="item item-clickable" ...${pressable(() => openDecisionViewer(decisionObj))}>
                       <div class="item-title">${title}${dateInfo}</div>
                       <div class="item-meta">${phaseInfo}</div>
                       ${rationale}

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

@@ -10,20 +10,27 @@
  * clears the field so subsequent renders don't re-trigger.
  */
 
-import { html, useState, useEffect } from '../preact.js';
+import { html, useState, useEffect, useMemo } from '../preact.js';
 import { useStore, setState } from '../store.js';
 import { FileReader } from '../components/FileReader.js';
+import { Icon } from '../icons-client.js';
+
+// File-type icon — markdown gets its own glyph, everything else a plain file.
+function fileIcon(label) {
+  return /\.md$/i.test(label || '') ? 'file-text' : 'file';
+}
 
 // ---- File tree components ----
-function FileEntry({ file, extraText, onSelect, isSelected }) {
+function FileEntry({ file, onSelect, isSelected }) {
   return html`
     <div
-      class=${'item item-clickable inline-file-entry' + (isSelected ? ' selected' : '')}
+      class=${'inline-file-entry' + (isSelected ? ' selected' : '')}
       data-path=${file.path}
+      title=${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}
+      <${Icon} name=${fileIcon(file.label)} size=${13}/>
+      <span class="inline-file-label">${file.label}</span>
     </div>
   `;
 }
@@ -36,31 +43,31 @@ function FileGroup({ group, onSelect, selectedPath, filter }) {
   }
 
   if (group.subGroups) {
+    const subGroupsVisible = group.subGroups
+      .map(sg => ({ sg, visible: sg.files.filter(f => matchesFilter(f, sg.subGroup)) }))
+      .filter(x => x.visible.length);
+    if (!subGroupsVisible.length) return null;
+    const total = subGroupsVisible.reduce((n, x) => n + x.visible.length, 0);
     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 class="inline-file-group">
+        <div class="inline-file-group-title">
+          ${group.group} <span class="inline-file-group-count">${total}</span>
         </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>
-          `;
-        })}
+        ${subGroupsVisible.map(({ sg, visible }) => html`
+          <details class="inline-subgroup" open>
+            <summary class="inline-subgroup-summary">
+              ${sg.subGroup} <span class="inline-file-group-count">${visible.length}</span>
+            </summary>
+            ${visible.map(f => html`
+              <${FileEntry}
+                key=${f.path}
+                file=${f}
+                onSelect=${onSelect}
+                isSelected=${selectedPath === f.path}
+              />
+            `)}
+          </details>
+        `)}
       </div>
     `;
   }
@@ -69,9 +76,9 @@ function FileGroup({ group, onSelect, selectedPath, filter }) {
     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 class="inline-file-group">
+        <div class="inline-file-group-title">
+          ${group.group} <span class="inline-file-group-count">${visible.length}</span>
         </div>
         ${visible.map(f => html`
           <${FileEntry}
@@ -116,9 +123,15 @@ export function FilesView() {
     setState({ requestedFile: null });
   }, [requestedFile]);
 
+  const total = useMemo(() => groups.reduce((n, g) =>
+    n + (g.files ? g.files.length : (g.subGroups || []).reduce((m, sg) => m + sg.files.length, 0)), 0),
+    [groups]);
+
   return html`
     <div class="view active" id="view-files">
-      <div class="view-title">Files</div>
+      <div class="view-title">
+        Files ${total > 0 ? html`<span class="inline-file-total">${total}</span>` : null}
+      </div>
       <div id="file-list-inline">
         <div class="filter-bar">
           <input
@@ -131,9 +144,9 @@ export function FilesView() {
         </div>
         <div id="inline-file-items" class="phase-list">
           ${loading
-            ? html`<div class="empty" style="margin:16px;">Loading…</div>`
+            ? html`<div class="empty">Loading…</div>`
             : groups.length === 0
-              ? html`<div class="empty" style="margin:16px;">No files found.</div>`
+              ? html`<div class="empty">No files found.</div>`
               : groups.map(g => html`
                   <${FileGroup}
                     key=${g.group}

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

@@ -11,6 +11,7 @@ import { html, useState, useCallback } from '../preact.js';
 import { useStore, refresh } from '../store.js';
 import { allTasks, currentPhaseName } from '../util.js';
 import { stopStory, openOrchPanel, openTermPanel, setTaskStatus } from '../orchestrator.js';
+import { openFileViewer } from '../store.js';
 import { openRunnerPicker } from '../components/RunnerPicker.js';
 import { showToast } from '../components/shared.js';
 
@@ -66,6 +67,10 @@ function KanbanCard({ task, col, live, orchDown, onDragStart, onDragEnd }) {
     e.stopPropagation();
     openOrchPanel(sid);
   }
+  function handleViewFile(e) {
+    e.stopPropagation();
+    openFileViewer(task.file, task.title || sid);
+  }
 
   return html`
     <div
@@ -92,6 +97,9 @@ function KanbanCard({ task, col, live, orchDown, onDragStart, onDragEnd }) {
       ` : null}
       ${sid ? html`
         <div class="kanban-card-actions">
+          ${task.file ? html`
+            <button class="kanban-view-btn" title=${'View ' + task.file} onClick=${handleViewFile}>📄 File</button>
+          ` : null}
           ${canRun ? html`
             <button class="kanban-run-btn" disabled=${orchDown}
               title=${orchDown ? 'Orchestrator unreachable' : 'Run ' + sid}