create-pmos 0.15.0 → 0.16.1

package/workspace/public/pm/panel-initiatives.js

@@ -0,0 +1,426 @@
+/* pm/panel-initiatives.js — panel 2, the Slack-style initiative board.
+ *
+ * A PORT of the prototype's column 1 (template lines 117–322, derivation lines 1411–1466). Every
+ * inline `style` string below is copied from that file character for character, and every literal
+ * is the prototype's literal: the acceptance bar for this surface is a mechanical diff, so a
+ * reworded label or a "tidied" padding is a defect, not an improvement.
+ *
+ * ── Two structural facts the port has to honour ─────────────────────────────────────────────
+ *
+ * 1. INTERPOLATIONS ARE WRAPPED. The prototype's runtime renders every `{{ expr }}` as
+ *    `<span class="sc-interp">value</span>` INSIDE the styled element, while literal template text
+ *    stays a bare text node. That is not cosmetic: the comparator indexes nodes by their own text
+ *    and then diffs computed style and geometry, so the node carrying "O1" is an inline span in the
+ *    prototype and would be a blockified 9px-wide flex item if the text were placed directly on the
+ *    styled span. `iv()` below reproduces the wrapper; bare text is used exactly where the
+ *    prototype's template has bare text (`#`, `●`, `＋`, `⌕`, `⟨`, and the two italic lines).
+ *
+ * 2. THE SEARCH INPUT IS PERSISTENT. Typing sets `q`, which re-renders this panel; an input node
+ *    rebuilt on every keystroke loses focus and caret after the first character. The header and the
+ *    search box are therefore built ONCE at module load and re-used on every render, and only the
+ *    list below them is rebuilt. `setChildren` keeps their identity in the host.
+ *
+ * ── Where the data comes from ───────────────────────────────────────────────────────────────
+ * Fixture mode reads `fixture.js` directly. Normal mode is the same code path with two optional
+ * overrides the data layer may publish into state — `state.board` ({repoId: group[]}) and
+ * `state.records` ({slug: record}). Nothing here caches anything derivable (D33): groups, counts,
+ * search hits and the selected row are computed at read time, every render.
+ */
+
+import { el, setChildren } from './dom.js';
+import { state, setState, FIXTURE } from './state.js';
+import * as FX from './fixture.js';
+
+/* ── the prototype's small helpers, verbatim in behaviour ──────────────────────────────────── */
+
+/** `{{ expr }}` — an interpolated value, wrapped the way the prototype's runtime wraps it. */
+const iv = (v) => el('span', null, v === null || v === undefined ? '' : String(v));
+
+/** selRow (line 1402) — an active row is washed and gets the 2px brand left border. */
+const selRow = (on) => ({
+  bg: on ? 'var(--accent)' : 'transparent',
+  bl: on ? 'var(--brand)' : 'transparent',
+});
+
+/* The seed board is reachable ONLY in fixture mode. In normal mode an unpublished board is an
+ * EMPTY board — the prototype's own copy for a repository with nothing filed — never the seed data.
+ * "The beautiful shell" in the PRD's failure-mode list is exactly this: fixture rows rendering in
+ * the real app, so the diff looks clean while nothing is connected. */
+const seedBoard = () => (FIXTURE ? FX.ALLGROUPS : {});
+const seedRecords = () => (FIXTURE ? FX.DATA : {});
+const boardOf = () => (state.board && typeof state.board === 'object' ? state.board : seedBoard());
+
+/** The repository whose board is showing (line 1395). */
+function currentProduct() {
+  if (state.product) return state.product;
+  const keys = Object.keys(boardOf());
+  return keys.length ? keys[0] : 'workspace';
+}
+
+/** The Objective/KR groups a repository starts from, before user-filed additions. */
+function baseGroups(product) {
+  const board = boardOf();
+  if (board[product]) return board[product];
+  // The prototype falls back to the workspace board for an unknown repository (line 1425). Only
+  // fixture mode can honour that; in normal mode an unknown repository has an empty board.
+  return FIXTURE && !state.board ? (FX.ALLGROUPS[product] || FX.ALLGROUPS.workspace) : [];
+}
+
+/** Every initiative record: the board's own records, with user-filed ones layered on (line 1392). */
+function records() {
+  const base = state.records && typeof state.records === 'object' ? state.records : seedRecords();
+  return { ...base, ...state.userInits };
+}
+
+/** GROUPS (lines 1425–1430) — user groups appended, user KRs and user initiatives folded in. */
+function groupsFor(product) {
+  const extraGroups = (state.userGroups && state.userGroups[product]) || [];
+  return [...baseGroups(product), ...extraGroups].map((g) => {
+    const extra = (state.addedInits && state.addedInits[product + '|' + g.gid]) || [];
+    const kr = state.userKrs && state.userKrs[product + '|' + g.gid];
+    const slugs2 = [...(g.slugs || []), ...extra];
+    return {
+      ...g,
+      slugs: slugs2,
+      ...(kr ? { hasKr: true, krid: kr.krid, krname: kr.krname, krct: String(slugs2.length) } : {}),
+      gct: g.dyn ? String(slugs2.length) : g.gct,
+    };
+  });
+}
+
+/** The initiative selected when nothing has been picked yet (line 1397 / line 1440). */
+function firstSlugOf(product) {
+  const g0 = baseGroups(product)[0];
+  return g0 && g0.slugs && g0.slugs.length ? g0.slugs[0] : null;
+}
+
+const selectedSlug = () => (state.sel !== null && state.sel !== undefined ? state.sel : firstSlugOf(currentProduct()));
+
+/** sessionsOf (line 1398) — a record that failed to read has no sessions, it does not throw. */
+function sessionsOf(slug, DATA) {
+  const i = DATA[slug];
+  if (!i || i.readError) return [];
+  return [...(i.sessions || []), ...((state.extraSess && state.extraSess[slug]) || [])];
+}
+
+/** Which repository owns each slug (lines 1963–1965) — the tab-scoping key. */
+function slugProduct() {
+  const map = {};
+  const boards = boardOf();
+  Object.keys(boards).forEach((prod) => {
+    (boards[prod] || []).forEach((g) => (g.slugs || []).forEach((s) => { map[s] = prod; }));
+  });
+  Object.keys(state.addedInits || {}).forEach((key) => {
+    const prod = key.split('|')[0];
+    (state.addedInits[key] || []).forEach((s) => { map[s] = prod; });
+  });
+  return map;
+}
+
+/* ── the two tab openers (lines 1380–1385, 1399–1400) ──────────────────────────────────────── */
+
+/** openTab (line 1380) — an already-open tab is focused, never duplicated. */
+export function openTab(tab) {
+  setState((s) => ({
+    tabs: s.tabs.find((t) => t.id === tab.id) ? s.tabs : [...s.tabs, tab],
+    active: tab.id,
+  }));
+}
+
+export function openTerm(slug, sess) {
+  openTab({
+    id: 'term:' + slug + ':' + sess.name, kind: 'term', title: sess.name, slug,
+    repo: slugProduct()[slug], sess: sess.name, state: sess.st, profile: sess.profile || 'claude-work',
+  });
+}
+
+export function openDoc(slug, path, role) {
+  openTab({
+    id: 'doc:' + path, kind: 'doc', title: path.split('/').pop(), slug,
+    repo: slugProduct()[slug], path, role: role || 'DOC',
+  });
+}
+
+/* ── persistent chrome: the sticky header and the search box ───────────────────────────────── */
+
+const titleText = el('span', null, 'initiatives');
+
+const header = el('div', {
+  style: 'display:flex;align-items:center;gap:8px;padding:11px 14px 10px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--sidebar);z-index:2',
+},
+  el('span', { style: 'font-size:14px;font-weight:600;letter-spacing:.01em' }, titleText),
+  el('button', {
+    onClick: () => setState((s) => ({ col1: !s.col1 })),
+    style: 'margin-left:auto;color:var(--muted-foreground);font-size:14px;padding:2px 7px;min-height:26px',
+    hover: 'color:var(--foreground)',
+  }, '⟨'),
+);
+
+/* `search everything…` — one input, filtering everything, in every mode. ⌘K focuses it, which is
+ * why it carries `data-pm-search`: app.js looks the target up by that attribute rather than by a
+ * placeholder string that a translation would break. */
+const searchInput = el('input', {
+  onInput: (e) => setState({ q: e.target.value }),
+  placeholder: 'search everything…',
+  'data-pm-search': '',
+  style: 'flex:1;min-width:0;font-size:12.5px',
+});
+
+const searchBox = el('div', { style: 'padding:8px 12px 4px' },
+  el('div', { style: 'display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--input);min-height:32px' },
+    el('span', { style: 'color:var(--muted-foreground);font-size:12px' }, '⌕'),
+    searchInput,
+  ),
+);
+
+const fileNewRow = el('button', {
+  onClick: () => setState({ detail: { kind: 'new' }, col2: true }),
+  style: 'display:flex;align-items:center;gap:7px;width:100%;padding:8px 12px;margin-top:4px;color:var(--muted-foreground)',
+  hover: 'color:var(--foreground);background:var(--accent)',
+},
+  el('span', { style: 'flex:none;width:9px;text-align:center;font-size:14px' }, '＋'),
+  el('span', { style: 'font-size:12px' }, 'add objective · KR · initiative'),
+);
+
+/* ── one group: header, optional KR sub-row, initiative rows, empty line ───────────────────── */
+
+function groupNode(g, product) {
+  const gkey = product + '|' + g.gid;
+  // An active search FORCES every group open — a collapsed group must never hide a match.
+  const isOpen = state.q ? true : !state.collapsedGroups[gkey];
+  const gshort = g.gname.length > 34 ? g.gname.slice(0, 34).trim() + '…' : g.gname;
+
+  const groupHeader = el('button', {
+    onClick: () => setState((s) => ({ collapsedGroups: { ...s.collapsedGroups, [gkey]: !s.collapsedGroups[gkey] } })),
+    style: 'display:flex;align-items:center;gap:6px;width:100%;padding:8px 12px 5px',
+    hover: 'opacity:.75',
+  },
+    el('span', { style: 'flex:none;width:9px;font-size:9px;color:var(--muted-foreground)' }, iv(isOpen ? '▾' : '▸')),
+    el('span', { style: 'flex:none;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;color:' + g.idc }, iv(g.gid)),
+    el('span', { style: 'font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(gshort)),
+    el('span', { style: 'margin-left:auto;flex:none;font-size:10px;color:var(--muted-foreground)' }, iv(g.gct)),
+  );
+
+  const body = [];
+  if (isOpen) {
+    if (g.hasKr) {
+      body.push(el('div', { style: 'display:flex;align-items:baseline;gap:6px;padding:2px 12px 3px 27px' },
+        el('span', { style: 'flex:none;font-family:var(--mono);font-size:10px;color:var(--brand)' }, iv(g.krid)),
+        el('span', { style: 'font-size:10.5px;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(g.krname)),
+      ));
+    }
+    for (const it of g.inits) {
+      body.push(el('button', {
+        onClick: () => setState({ sel: it.slug, detail: { kind: 'init' }, col2: true }),
+        style: 'display:flex;align-items:center;gap:7px;width:100%;padding:5px 12px 5px 27px;min-height:32px;border-left:2px solid ' + it.bl + ';background:' + it.bg,
+        hover: 'background:var(--accent)',
+      },
+        el('span', { style: 'flex:none;font-size:12px;color:var(--muted-foreground)' }, '#'),
+        el('span', { style: 'font-family:var(--mono);font-size:12.5px;color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(it.slug)),
+        el('span', { style: 'margin-left:auto;flex:none;font-size:9px;color:' + it.l2c, title: it.l2b }, '●'),
+      ));
+    }
+    if (g.isEmpty) {
+      body.push(el('div', { style: 'padding:5px 12px 6px 27px;font-size:11px;color:var(--muted-foreground);font-style:italic' },
+        'nothing filed yet — a successful read of nothing'));
+    }
+  }
+
+  return el('div', { style: 'margin-top:4px' }, groupHeader, body);
+}
+
+/* ── "matches elsewhere" — artifacts and sessions that the group list cannot show ──────────── */
+
+function searchHits(q, DATA) {
+  const hits = [];
+  if (!q) return hits;
+  Object.keys(DATA).forEach((slug) => {
+    (DATA[slug].arts || []).forEach((a) => {
+      if (a.path.toLowerCase().includes(q)) {
+        hits.push({ kind: 'artifact · ' + a.role, label: a.path, on: () => openDoc(slug, a.path, a.role) });
+      }
+    });
+    sessionsOf(slug, DATA).forEach((s) => {
+      if (s.name.toLowerCase().includes(q)) {
+        hits.push({
+          kind: 'session · ' + slug, label: s.name + ' · ' + s.label,
+          on: () => { setState({ sel: slug, detail: { kind: 'init' } }); openTerm(slug, s); },
+        });
+      }
+    });
+  });
+  return hits.slice(0, 8);
+}
+
+function hitNode(ht) {
+  return el('button', {
+    onClick: ht.on,
+    style: 'display:block;width:100%;padding:6px 12px;min-height:40px',
+    hover: 'background:var(--accent)',
+  },
+    el('span', { style: 'display:block;font-family:var(--mono);font-size:10px;color:var(--info)' }, iv(ht.kind)),
+    el('span', { style: 'display:block;font-family:var(--mono);font-size:11px;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(ht.label)),
+  );
+}
+
+/* ── the file-new form's view model (prototype `nw`, lines 1620–1687) ──────────────────────────
+ * The form itself renders in PANEL 3 (`detail.kind === 'new'`), which panel-detail.js owns — but
+ * every field it edits and every record it files belongs to this board, so the model is derived
+ * and exported here rather than duplicated there. panel-detail.js renders `fileNewModel()`.
+ */
+export function fileNewModel() {
+  const product = currentProduct();
+  const GROUPS = groupsFor(product);
+  const DATA = records();
+  const flowsMap = state.flowsMap || FX.FLOWS;
+  const ty = state.newType;
+  const chip = (onSel, sel) => ({
+    bg: sel ? 'var(--secondary)' : 'transparent',
+    bc: sel ? 'var(--input)' : 'var(--border)',
+    color: sel ? 'var(--foreground)' : 'var(--muted-foreground)',
+    on: onSel,
+  });
+  const krTargets = GROUPS.filter((g) => !g.hasKr && /^O\d+$/.test(g.gid));
+  const anch = state.newAnchor !== null && state.newAnchor !== undefined
+    ? state.newAnchor
+    : (ty === 'kr' ? (krTargets[0] ? krTargets[0].gid : null) : (GROUPS[0] ? GROUPS[0].gid : 'none'));
+
+  const anchorRows = ty === 'kr'
+    ? krTargets.map((g) => ({ label: g.gid, sub: g.gname, ...chip(() => setState({ newAnchor: g.gid }), anch === g.gid) }))
+    : [
+      ...GROUPS.filter((g) => g.gid !== 'unanchored').map((g) => ({
+        label: g.hasKr ? g.gid + ' · ' + g.krid : g.gid,
+        sub: g.hasKr ? g.krname : g.gname,
+        ...chip(() => setState({ newAnchor: g.gid }), anch === g.gid),
+      })),
+      { label: 'none', sub: 'no anchor — rejected under D59', ...chip(() => setState({ newAnchor: 'none' }), anch === 'none') },
+    ];
+
+  // Rejected work is filed, never hidden (D59): if the repository has no "unanchored" group yet,
+  // one is created so the rejection has somewhere honest to land.
+  const ensureUnanchored = (s) => {
+    const ug = s.userGroups[product] || [];
+    const hasBase = baseGroups(product).some((g) => g.gid === 'unanchored') || ug.some((g) => g.gid === 'unanchored');
+    return hasBase ? s.userGroups : { ...s.userGroups, [product]: [...ug, FX.unanchoredGroup()] };
+  };
+
+  return {
+    isObj: ty === 'obj', isKr: ty === 'kr', isInit: ty === 'init',
+    typeBtns: FX.NEW_TYPES.map(([id, l]) => ({ l, ...chip(() => setState({ newType: id, newAnchor: null }), ty === id) })),
+    name: state.newName, slug: state.newSlug,
+    onName: (e) => setState({ newName: e.target.value }),
+    onSlug: (e) => setState({ newSlug: e.target.value }),
+    anchors: anchorRows, noKrTargets: ty === 'kr' && krTargets.length === 0,
+    flowsBtns: Object.keys(flowsMap).map((fn) => ({ l: fn, ...chip(() => setState({ newFlow: fn }), state.newFlow === fn) })),
+    showD59: ty === 'init' && anch === 'none',
+    createLabel: FX.CREATE_LABELS[ty] || FX.CREATE_LABELS.init,
+    onCreate: () => {
+      if (ty === 'obj') {
+        const name = state.newName.trim();
+        if (!name) return;
+        const ug = state.userGroups[product] || [];
+        const n = GROUPS.filter((g) => /^O\d+$/.test(g.gid)).length + 1;
+        setState({
+          userGroups: { ...state.userGroups, [product]: [...ug, FX.userObjectiveGroup('O' + n, name)] },
+          newName: '',
+        });
+      } else if (ty === 'kr') {
+        const name = state.newName.trim();
+        if (!name || !anch) return;
+        setState({
+          userKrs: { ...state.userKrs, [product + '|' + anch]: { krid: 'KR1', krname: name } },
+          newName: '', newAnchor: null,
+        });
+      } else {
+        const slug = state.newSlug.trim().toLowerCase().replace(/\s+/g, '-');
+        if (!slug || DATA[slug]) return;
+        const anchored = anch !== 'none';
+        const group = GROUPS.find((x) => x.gid === anch);
+        const entry = FX.newInitiativeRecord({ slug, anchored, group, flow: state.newFlow, flowsMap });
+        const key = product + '|' + (anchored ? anch : 'unanchored');
+        setState((s) => ({
+          userInits: { ...s.userInits, [slug]: entry },
+          userGroups: anchored ? s.userGroups : ensureUnanchored(s),
+          addedInits: { ...s.addedInits, [key]: [...(s.addedInits[key] || []), slug] },
+          sel: slug, detail: { kind: 'init' }, newSlug: '', newAnchor: null,
+        }));
+      }
+    },
+  };
+}
+
+/* ── the secondary modes ───────────────────────────────────────────────────────────────────────
+ * The seven modes behind the settings drawer are modes.js's; this panel only owns its header and
+ * its search box, which every mode keeps. modes.js is loaded on first use rather than at boot —
+ * the product board is what a PM opens on, and a mode that is never entered costs nothing. It is
+ * handed no detail host: panel 3 is painted by its own owner, and two modules writing one host is
+ * the one thing the ownership table forbids. A missing modes.js leaves the header and the search
+ * box on screen instead of taking the panel down.
+ */
+let modesMod;               // undefined = not tried · null = loading or unavailable · module = ready
+
+function modesModule() {
+  if (modesMod !== undefined) return modesMod;
+  modesMod = null;
+  import('./modes.js')
+    .then((m) => { modesMod = m; setState({}); })
+    .catch(() => { modesMod = null; });
+  return null;
+}
+
+/* ── render ────────────────────────────────────────────────────────────────────────────────── */
+
+export function renderInitiatives(host) {
+  const mode = state.mode || 'product';
+  titleText.textContent = FX.modeTitle(mode);
+  // The input is uncontrolled while it has focus — writing `value` on every render would drop the
+  // caret to the end mid-word. It is only re-synced when state and DOM have actually diverged.
+  if (searchInput.value !== state.q) searchInput.value = state.q;
+
+  if (mode !== 'product') {
+    setChildren(host, [header, searchBox]);
+    const modes = modesModule();
+    if (modes && typeof modes.renderMode === 'function') {
+      try { modes.renderMode(host, null, mode); } catch (e) { console.error('[pm] renderMode failed:', e); }
+    }
+    return host;
+  }
+
+  const q = (state.q || '').toLowerCase();
+  const product = currentProduct();
+  const DATA = records();
+  const selSlug = selectedSlug();
+  const detKind = (state.detail && state.detail.kind) || '';
+
+  let total = 0;
+  const groups = groupsFor(product).map((g) => {
+    const inits = g.slugs.filter((s) => !q || s.includes(q)).map((slug) => {
+      const i = DATA[slug];
+      // The prototype reads `i.l2` unguarded; a real repository can hand back a slug with no
+      // record at all, and a board that throws is worse than a row that reads "no record".
+      const l2 = (i && i.l2) || ['', '', FX.C.mut];
+      return { slug, ...selRow(slug === selSlug && detKind === 'init'), l2a: l2[0], l2b: l2[1], l2c: l2[2] };
+    });
+    total += inits.length;
+    return { ...g, inits, isEmpty: inits.length === 0 };
+  }).filter((g) => g.inits.length > 0 || (g.dyn && !q));
+
+  const hits = searchHits(q, DATA);
+
+  const kids = [header, searchBox];
+  for (const g of groups) kids.push(groupNode(g, product));
+  kids.push(fileNewRow);
+  if (hits.length) {
+    kids.push(el('div', { style: 'padding:4px 12px 4px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);border-bottom:1px solid var(--border)' },
+      'matches elsewhere'));
+    for (const ht of hits) kids.push(hitNode(ht));
+  }
+  if (total === 0 && hits.length === 0) {
+    kids.push(el('div', { style: 'padding:10px 14px;font-size:12px;color:var(--muted-foreground);font-style:italic' },
+      'nothing matches — a successful read of nothing'));
+  }
+
+  return setChildren(host, kids);
+}
+
+export default renderInitiatives;