@worca/app 1.0.0 → 1.1.1

package/ui/public/chat-settings-view.mjs

@@ -32,11 +32,13 @@ export function renderChatSettings({ prefs, channels } = {}, { doc = globalThis.
   evBox.appendChild(h(doc, 'div', 'label-row', 'Notify on'));
   for (const [key, label, hint] of EVENTS) {
     const row = h(doc, 'label', 'chat-event-row');
-    const cb = h(doc, 'input', 'chat-ev');
+    const cb = h(doc, 'input', 'sw-input chat-ev');
     cb.type = 'checkbox';
     cb.dataset.ev = key;
     cb.checked = p.notify?.[key] !== false;
+    cb.setAttribute('aria-label', label);
     row.appendChild(cb);
+    row.appendChild(h(doc, 'span', 'switch switch-sm'));
     row.appendChild(h(doc, 'span', '', label));
     if (hint) row.appendChild(h(doc, 'small', 'hint', hint));
     evBox.appendChild(row);
@@ -54,11 +56,13 @@ export function renderChatSettings({ prefs, channels } = {}, { doc = globalThis.
     const row = h(doc, 'div', 'chat-channel-row');
     row.dataset.channelKey = key;
     const toggle = h(doc, 'label', 'chat-channel-toggle');
-    const cb = h(doc, 'input', 'chat-ch');
+    const cb = h(doc, 'input', 'sw-input chat-ch');
     cb.type = 'checkbox';
     cb.dataset.channelKey = key;
     cb.checked = p.channels?.[key]?.enabled !== false;
+    cb.setAttribute('aria-label', `Enable ${c.displayName || c.channelId}`);
     toggle.appendChild(cb);
+    toggle.appendChild(h(doc, 'span', 'switch switch-sm'));
     toggle.appendChild(h(doc, 'span', '', `${c.displayName || c.channelId} (${c.platform})`));
     row.appendChild(toggle);
     const stateCls = { connected: 'green', degraded: 'waiting', connecting: 'waiting', unconfigured: 'waiting' }[c.state] || 'red';

package/ui/public/diff-view.mjs

@@ -4,7 +4,32 @@
 // workspace runs concatenate per-member patches, each prefixed with a
 // "# <projectKey>" comment line (orchestrator.mjs:3443).
 
-export const MAX_FILE_SECTION_BYTES = 500_000;
+// The ONLY cap here: it bounds parsing work and is the only point where rows
+// are lost (and said so via `truncated`). Bounding the DOM is the renderer's
+// job — app.js connects rows in windows — so a 6,000-line lockfile hunk parses
+// in full and stays one click away instead of silently disappearing.
+export const MAX_FILE_SECTION_CODE_UNITS = 500_000;
+
+// `[^\n]` rather than `.`: git copies the function-context line verbatim, and
+// `.` excludes CR, U+2028 and U+2029 — a header such as
+// `@@ -5,7 +5,7 @@ function f(sep = "\u2028") {` would otherwise lose its range,
+// blanking both gutters and disabling highlighting for the hunk.
+const HUNK_RANGE_RE = /^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@(?: [^\n]*)?$/;
+
+export function hunkRange(header) {
+  const raw = String(header || '');
+  const m = HUNK_RANGE_RE.exec(raw.endsWith('\r') ? raw.slice(0, -1) : raw);
+  if (!m) return null;
+  const values = [m[1], m[2] ?? '1', m[3], m[4] ?? '1'].map(Number);
+  if (!values.every((n) => Number.isSafeInteger(n) && n >= 0)) return null;
+  const [oldStart, oldCount, newStart, newCount] = values;
+  const safeRange = (start, count) => {
+    if (count === 0) return start >= 0;
+    return start >= 1 && start <= Number.MAX_SAFE_INTEGER - (count - 1);
+  };
+  if (!safeRange(oldStart, oldCount) || !safeRange(newStart, newCount)) return null;
+  return { oldStart, oldCount, newStart, newCount };
+}
 
 // One cheap pass: split the patch into per-file sections. Lines outside any
 // "diff --git" section are ignored, EXCEPT "# <key>" markers, which set the
@@ -88,15 +113,15 @@ function stripSide(s) {
 export function parseFileSection(raw) {
   let text = String(raw || '');
   let truncated = false;
-  if (text.length > MAX_FILE_SECTION_BYTES) {
-    const cut = text.lastIndexOf('\n', MAX_FILE_SECTION_BYTES);
+  if (text.length > MAX_FILE_SECTION_CODE_UNITS) {
+    const cut = text.lastIndexOf('\n', MAX_FILE_SECTION_CODE_UNITS);
     if (cut > 0) {
       text = text.slice(0, cut);                    // snapped to a line boundary
     } else {
       // One line longer than the whole cap: there is no newline to snap to, so
       // cut mid-line and drop a trailing LONE HIGH SURROGATE (a '\n' can never
       // sit inside a pair, which is why the snapped path needs no such guard).
-      text = text.slice(0, MAX_FILE_SECTION_BYTES);
+      text = text.slice(0, MAX_FILE_SECTION_CODE_UNITS);
       const last = text.charCodeAt(text.length - 1);
       if (last >= 0xd800 && last <= 0xdbff) text = text.slice(0, -1);
     }
@@ -104,6 +129,10 @@ export function parseFileSection(raw) {
   }
   const res = { binary: false, truncated, hunks: [] };
   let hunk = null;
+  let oldNo = null;
+  let newNo = null;
+  let oldRemaining = 0;
+  let newRemaining = 0;
   const rows = text.split('\n');
   // A \n-terminated section yields a trailing '' from split (and the workspace
   // '\n\n' member join leaves extras at each seam); without the pop each becomes
@@ -111,20 +140,46 @@ export function parseFileSection(raw) {
   // (one space), never '', so popping every trailing '' is safe.
   while (rows.length && rows[rows.length - 1] === '') rows.pop();
   for (const line of rows) {
-    if (line.startsWith('Binary files ') || line === 'GIT binary patch') {
+    const structuralLine = line.endsWith('\r') ? line.slice(0, -1) : line;
+    if (structuralLine.startsWith('Binary files ')
+      || structuralLine === 'GIT binary patch') {
       res.binary = true;
       continue;
     }
-    if (line.startsWith('@@')) {
-      hunk = { header: line, lines: [] };
+    if (structuralLine.startsWith('@@')) {
+      const range = hunkRange(structuralLine);
+      hunk = {
+        header: structuralLine,
+        oldStart: range?.oldStart ?? null,
+        oldCount: range?.oldCount ?? null,
+        newStart: range?.newStart ?? null,
+        newCount: range?.newCount ?? null,
+        lines: [],
+      };
+      oldNo = range?.oldStart ?? null;
+      newNo = range?.newStart ?? null;
+      oldRemaining = range?.oldCount ?? 0;
+      newRemaining = range?.newCount ?? 0;
       res.hunks.push(hunk);
       continue;
     }
     if (!hunk) continue; // still in the header block
-    if (line.startsWith('+')) hunk.lines.push({ kind: 'add', text: line.slice(1) });
-    else if (line.startsWith('-')) hunk.lines.push({ kind: 'del', text: line.slice(1) });
-    else if (line.startsWith('\\')) continue; // ""
-    else hunk.lines.push({ kind: 'ctx', text: line.startsWith(' ') ? line.slice(1) : line });
+    if (line.startsWith('\\')) continue; // ""
+
+    const kind = line.startsWith('+') ? 'add' : line.startsWith('-') ? 'del' : 'ctx';
+    const source = kind === 'ctx'
+      ? (line.startsWith(' ') ? line.slice(1) : line)
+      : line.slice(1);
+    const numbered = { kind, text: source, oldNo: null, newNo: null };
+    if (kind !== 'add' && oldNo != null && oldRemaining > 0) {
+      numbered.oldNo = oldNo++;
+      oldRemaining -= 1;
+    }
+    if (kind !== 'del' && newNo != null && newRemaining > 0) {
+      numbered.newNo = newNo++;
+      newRemaining -= 1;
+    }
+    hunk.lines.push(numbered);
   }
   return res;
 }

package/ui/public/file-tree.mjs

@@ -0,0 +1,305 @@
+// Deterministic, project-scoped model and renderer for changed-file navigation.
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+function svgNode(doc, tag, attrs = {}) {
+  const node = doc.createElementNS(SVG_NS, tag);
+  for (const [name, value] of Object.entries(attrs)) node.setAttribute(name, String(value));
+  return node;
+}
+
+function treeIcon(doc, kind) {
+  const svg = svgNode(doc, 'svg', {
+    viewBox: '0 0 20 20', fill: 'none', stroke: 'currentColor',
+    'stroke-width': '1.7', 'stroke-linecap': 'round', 'stroke-linejoin': 'round',
+    'aria-hidden': 'true', focusable: 'false',
+  });
+
+  if (kind === 'folder') {
+    svg.classList.add('hd-tree-folder-icon');
+    svg.appendChild(svgNode(doc, 'path', {
+      d: 'M2.5 5.25h5l1.7 2h8.3v7.5a1.5 1.5 0 0 1-1.5 1.5H4a1.5 1.5 0 0 1-1.5-1.5z',
+    }));
+    return svg;
+  }
+
+  svg.classList.add('hd-tree-file-icon');
+  svg.setAttribute('stroke-width', '1.45');
+  svg.append(
+    svgNode(doc, 'path', { d: 'M5 2.5h6.5l3.5 3.5v11.5H5z' }),
+    svgNode(doc, 'path', { d: 'M11.5 2.5V6H15' }),
+  );
+  if (kind === 'add') {
+    svg.appendChild(svgNode(doc, 'path', { d: 'M7.5 12h5M10 9.5v5' }));
+  } else if (kind === 'del') {
+    svg.appendChild(svgNode(doc, 'path', { d: 'M7.5 12h5' }));
+  } else {
+    svg.append(
+      svgNode(doc, 'path', { d: 'M7.5 10h5' }),
+      svgNode(doc, 'path', { d: 'M7.5 13h5' }),
+    );
+  }
+  return svg;
+}
+
+function chevronIcon(doc) {
+  const svg = svgNode(doc, 'svg', {
+    viewBox: '0 0 18 20', fill: 'none', stroke: 'currentColor',
+    'stroke-width': '1.8', 'stroke-linecap': 'round', 'stroke-linejoin': 'round',
+    'aria-hidden': 'true', focusable: 'false',
+  });
+  svg.classList.add('hd-tree-chevron');
+  svg.appendChild(svgNode(doc, 'path', { d: 'M6.5 5.5 11 10l-4.5 4.5' }));
+  return svg;
+}
+
+const nodeKey = (project, type, fullPath) =>
+  JSON.stringify([project ?? null, type, fullPath]);
+
+const cmpText = (a, b) => {
+  const af = a.toLowerCase();
+  const bf = b.toLowerCase();
+  return af < bf ? -1 : af > bf ? 1 : a < b ? -1 : a > b ? 1 : 0;
+};
+
+const sortNodes = (nodes) => nodes.sort((a, b) => {
+  if (a.type !== b.type) {
+    if (a.type === 'project') return -1;
+    if (b.type === 'project') return 1;
+    return a.type === 'dir' ? -1 : 1;
+  }
+  return cmpText(a.name, b.name);
+});
+
+function compactDir(node) {
+  let current = node;
+  const names = [current.name];
+  while (current.children.length === 1 && current.children[0].type === 'dir') {
+    current = current.children[0];
+    names.push(current.name);
+  }
+  return {
+    ...current,
+    name: names.join('/'),
+    children: current.children.map((child) =>
+      child.type === 'dir' ? compactDir(child) : child),
+  };
+}
+
+function makeChildren(rows, project) {
+  const root = new Map();
+  const seenFiles = new Set();
+  for (const entry of rows) {
+    const path = String(entry?.f?.path || '');
+    if (!path) continue;
+    const parts = path.split('/').filter(Boolean);
+    if (!parts.length) continue;
+    const fileKey = nodeKey(project, 'file', path);
+    if (seenFiles.has(fileKey)) continue;
+    seenFiles.add(fileKey);
+    let children = root;
+    let dirPath = '';
+    for (const segment of parts.slice(0, -1)) {
+      dirPath = dirPath ? `${dirPath}/${segment}` : segment;
+      const childKey = JSON.stringify(['dir', segment]);
+      let dir = children.get(childKey);
+      if (!dir) {
+        dir = {
+          type: 'dir', key: nodeKey(project, 'dir', dirPath), name: segment,
+          path: dirPath, project, childMap: new Map(),
+        };
+        children.set(childKey, dir);
+      }
+      children = dir.childMap;
+    }
+    const name = parts[parts.length - 1];
+    children.set(JSON.stringify(['file', name]), {
+      type: 'file', key: fileKey, name, path, project, entry,
+    });
+  }
+
+  const materialize = (children) => sortNodes([...children.values()].map((node) => {
+    if (node.type === 'file') return node;
+    const { childMap, ...dir } = node;
+    return compactDir({ ...dir, children: materialize(childMap) });
+  }));
+  return materialize(root);
+}
+
+export function buildFileTree(rows) {
+  const input = Array.isArray(rows) ? rows : [];
+  const projectRows = new Map();
+  const plainRows = [];
+  for (const entry of input) {
+    if (!entry?.f?.path) continue;
+    if (entry.project == null) {
+      plainRows.push(entry);
+      continue;
+    }
+    const project = String(entry.project);
+    if (!projectRows.has(project)) projectRows.set(project, []);
+    projectRows.get(project).push(entry);
+  }
+  const nodes = makeChildren(plainRows, null);
+  for (const project of [...projectRows.keys()].sort(cmpText)) {
+    nodes.push({
+      type: 'project',
+      key: nodeKey(project, 'project', project),
+      name: project,
+      project,
+      children: makeChildren(projectRows.get(project), project),
+    });
+  }
+  return sortNodes(nodes);
+}
+
+export function firstFile(nodes) {
+  for (const node of Array.isArray(nodes) ? nodes : []) {
+    if (node?.type === 'file') return node;
+    if (node?.children) {
+      const found = firstFile(node.children);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+export function fileStatus(entry) {
+  if (entry?.isNew || entry?.f?.status === 'A' || entry?.f?.status === 'C') return 'add';
+  if (entry?.f?.status === 'D') return 'del';
+  return 'mod';
+}
+
+let nextTreeInstance = 0;
+
+export function renderFileTree(nodes, options = {}) {
+  // `collapsed` is a Set of DIRECTORY keys the caller owns across re-renders; this
+  // function reads it for the initial state and writes it on every toggle. The
+  // default is a throwaway Set, so a caller that does not pass one keeps the old
+  // always-expanded behaviour.
+  const { doc = document, onPick, counts = () => doc.createTextNode(''), initialKey,
+    collapsed = new Set() } = options;
+  const idPrefix = `hd-tree-${nextTreeInstance++}`;
+  let nextGroup = 0;
+  const nav = doc.createElement('nav');
+  nav.className = 'hd-tree';
+  nav.setAttribute('aria-label', 'Changed files');
+  const fileButtons = new Map();
+  let activeButton = null;
+
+  function activate(button) {
+    if (!button) return;
+    if (activeButton && activeButton !== button) {
+      activeButton.classList.remove('active');
+      activeButton.removeAttribute('aria-current');
+    }
+    activeButton = button;
+    button.classList.add('active');
+    button.setAttribute('aria-current', 'true');
+  }
+
+  function renderFile(node, depth) {
+    const button = doc.createElement('button');
+    button.type = 'button';
+    const state = fileStatus(node.entry);
+    button.className = `hd-diff-file hd-tree-file ${state}`;
+    if (state === 'add') button.classList.add('new');
+    if (state === 'del') button.classList.add('deleted');
+    button.dataset.fileKey = node.key;
+    button.dataset.project = node.project ?? '';
+    button.dataset.path = node.path;
+    button.style.setProperty('--tree-indent', `${10 + depth * 14}px`);
+
+    const f = node.entry?.f || {};
+    const status = ({ A: 'Added', C: 'Copied', D: 'Deleted', R: 'Renamed', M: 'Modified' })[f.status]
+      || (node.entry?.isNew ? 'Added' : 'Changed');
+    const scope = node.project ? ` in project ${node.project}` : '';
+    const identity = f.from
+      ? `from ${String(f.from)} to ${node.path}`
+      : `file ${node.path}`;
+    const amount = f.binary
+      ? 'binary file'
+      : `${Number(f.added) || 0} lines added, ${Number(f.removed) || 0} lines removed`;
+    const label = `${status} ${identity}${scope}, ${amount}`;
+    button.setAttribute('aria-label', label);
+    button.title = label;
+
+    const marker = doc.createElement('span');
+    marker.className = 'hd-tree-status';
+    marker.setAttribute('aria-hidden', 'true');
+    marker.appendChild(treeIcon(doc, state));
+    const path = doc.createElement('span');
+    path.className = 'hd-diff-path mono';
+    path.textContent = node.name;
+    const countNode = counts(node.entry);
+    button.append(marker, path);
+    if (countNode) button.appendChild(countNode);
+    button.addEventListener('click', () => {
+      activate(button);
+      onPick?.(node.entry, node.key);
+    });
+    fileButtons.set(node.key, button);
+    return button;
+  }
+
+  function renderDir(node, depth) {
+    const fragment = doc.createDocumentFragment();
+    const button = doc.createElement('button');
+    button.type = 'button';
+    button.className = 'hd-tree-dir';
+    button.style.setProperty('--tree-indent', `${10 + depth * 14}px`);
+    button.dataset.dirKey = node.key;
+    const open = !collapsed.has(node.key);
+    button.setAttribute('aria-expanded', String(open));
+    const fullLabel = node.project ? `${node.project}/${node.path}` : node.path;
+    button.setAttribute('aria-label', `${open ? 'Collapse' : 'Expand'} directory ${fullLabel}`);
+    const group = doc.createElement('div');
+    group.className = 'hd-tree-group';
+    group.id = `${idPrefix}-group-${nextGroup++}`;
+    group.hidden = !open;
+    button.setAttribute('aria-controls', group.id);
+    const chevron = chevronIcon(doc);
+    const folder = treeIcon(doc, 'folder');
+    const label = doc.createElement('span');
+    label.className = 'hd-tree-dir-label mono';
+    label.textContent = node.name;
+    button.append(chevron, folder, label);
+    renderNodes(node.children, group, depth + 1);
+    button.addEventListener('click', () => {
+      const expanded = button.getAttribute('aria-expanded') === 'true';
+      button.setAttribute('aria-expanded', String(!expanded));
+      group.hidden = expanded;
+      if (expanded) collapsed.add(node.key); else collapsed.delete(node.key);
+      button.setAttribute('aria-label',
+        `${expanded ? 'Expand' : 'Collapse'} directory ${fullLabel}`);
+    });
+    fragment.append(button, group);
+    return fragment;
+  }
+
+  function renderNodes(items, host, depth) {
+    for (const node of items || []) {
+      if (node.type === 'file') {
+        host.appendChild(renderFile(node, depth));
+      } else if (node.type === 'dir') {
+        host.appendChild(renderDir(node, depth));
+      } else if (node.type === 'project') {
+        const heading = doc.createElement('div');
+        heading.className = 'hd-tree-project';
+        heading.setAttribute('role', 'heading');
+        heading.setAttribute('aria-level', '3');
+        heading.textContent = node.name;
+        const group = doc.createElement('div');
+        group.className = 'hd-tree-group';
+        group.id = `${idPrefix}-group-${nextGroup++}`;
+        renderNodes(node.children, group, depth);
+        host.append(heading, group);
+      }
+    }
+  }
+
+  renderNodes(nodes, nav, 0);
+  const initial = fileButtons.get(initialKey);
+  if (initial) activate(initial);
+  return nav;
+}