@quolu/lattice 0.20.1 → 0.21.0

package/src/todo-gantt-html.mjs

@@ -2,18 +2,14 @@ import { createHash } from 'node:crypto';
 
 import { serializeJsonForScript } from './todo-markdown-renderer.mjs';
 import { renderTodoGanttSvg, TODO_GANTT_STATUS_PRESENTATION } from './todo-gantt-svg.mjs';
+import { renderDiagramLegend, renderRightPane } from './todo-gantt-html-independence.mjs';
+import { escapeHtmlAttribute, escapeHtmlText, refKey } from './todo-gantt-html-shared.mjs';
+import { CSS } from './todo-gantt-html-style.mjs';
 
 export const TODO_GANTT_RENDERER_VERSION = 'lattice.todo_gantt_renderer.v17';
 export const TODO_GANTT_PROSE_MAX_BYTES = 8 * 1024 * 1024;
 export const TODO_GANTT_HTML_MAX_BYTES = 24 * 1024 * 1024;
 
-const DOCUMENT_STATUS = TODO_GANTT_STATUS_PRESENTATION;
-
-function statusMarkup(status, suffix = '') {
-  const value = DOCUMENT_STATUS[status] ?? { mark: '?', label: '状態不明' };
-  return `<span class="status-symbol status-${escapeHtmlAttribute(status)}" role="img" aria-label="${escapeHtmlAttribute(value.label)}">${escapeHtmlText(value.mark)}</span>${suffix}`;
-}
-
 function projectDisplayName(readModel, metadata) {
   for (const candidate of [metadata?.project_display_name, metadata?.project_name]) {
     if (typeof candidate === 'string' && candidate.trim() !== '') return candidate.trim();
@@ -30,23 +26,6 @@ export class TodoGanttRenderError extends Error {
   }
 }
 
-function escapeHtmlAttribute(value) {
-  return String(value).replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;').replaceAll("'", '&#39;').replace(/[\u0000-\u001f\u007f]/gu, '');
-}
-
-function escapeHtmlText(value) {
-  return String(value).replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
-}
-
-function refKey(ref) {
-  return JSON.stringify([ref.project_id, ref.plan_key, ref.task_id]);
-}
-
-function compareText(left, right) {
-  return left < right ? -1 : left > right ? 1 : 0;
-}
-
 function digest(value) {
   return createHash('sha256').update(value, 'utf8').digest('hex');
 }
@@ -96,441 +75,6 @@ function normalizeSections(readModel, narratives, anchorOutcomes) {
   return { sections: result, proseBytes };
 }
 
-/** Keys of the ToDos the diagram does not draw, empty when nothing was folded. */
-function foldIndex(layout) {
-  return new Set((layout?.folded ?? []).map((ref) => refKey(ref)));
-}
-
-function renderTaskIndexEntry(section, lookup) {
-  const key = refKey(section.ref);
-  const status = DOCUMENT_STATUS[section.state.status] ?? { mark: '?', label: '状態不明' };
-  const blockedReason = section.state.status === 'blocked'
-    ? `<span class="task-index-blocked-reason">— ${escapeHtmlText(section.state.blocked_reason ?? '理由未記録')}</span>` : '';
-  // A ToDo the diagram does not draw keeps its row here — the index is the
-  // complete list — and it selects its own detail, which exists either way.
-  const selectKey = key;
-  return `<li><button type="button" data-select-node-key="${escapeHtmlAttribute(selectKey)}"><span class="task-index-status status-${escapeHtmlAttribute(section.state.status)}" role="img" aria-label="${escapeHtmlAttribute(status.label)}">${escapeHtmlText(status.mark)}</span><span class="task-index-reference">${escapeHtmlText(taskReference(section, lookup))}</span><strong>${escapeHtmlText(section.task.title)}</strong>${blockedReason}</button></li>`;
-}
-
-/** plan_key -> 最終活動時刻。journalの末尾eventが、そのplanが最後に動いた時点。 */
-function planActivity(readModel) {
-  return new Map((readModel?.members ?? []).map((member) => {
-    const events = member.journal?.events ?? [];
-    const last = events.at(-1)?.recorded_at ?? events[0]?.recorded_at ?? '';
-    return [member.plan.plan_key, last];
-  }));
-}
-
-function renderTaskIndex(sections, lookup, folds = new Set(), activity = new Map()) {
-  const byPlan = new Map();
-  for (const section of sections) {
-    if (!byPlan.has(section.ref.plan_key)) byPlan.set(section.ref.plan_key, []);
-    byPlan.get(section.ref.plan_key).push(section);
-  }
-  // 全ToDoが図から外れたplanは終わった仕事。読む側が先に見たいのは動いているplanなので、
-  // 動いているものを最終活動の新しい順で上へ、終わったものを古い順で下へまとめる。
-  // plan内のToDo順は登録順のまま触らない。
-  const plans = [...byPlan.entries()].map(([planKey, tasks]) => ({
-    planKey,
-    tasks,
-    settled: tasks.every((section) => folds.has(refKey(section.ref))),
-    lastActivity: activity.get(planKey) ?? '',
-  }));
-  plans.sort((left, right) => {
-    if (left.settled !== right.settled) return left.settled ? 1 : -1;
-    const order = left.settled
-      ? compareText(left.lastActivity, right.lastActivity)
-      : compareText(right.lastActivity, left.lastActivity);
-    return order !== 0 ? order : compareText(left.planKey, right.planKey);
-  });
-  return plans.map((plan) => {
-    const drawn = plan.tasks.filter((section) => !folds.has(refKey(section.ref)));
-    const folded = plan.tasks.filter((section) => folds.has(refKey(section.ref)));
-    const drawnList = drawn.length === 0 ? ''
-      : `<ol class="task-index-list">${drawn.map((section) => renderTaskIndexEntry(section, lookup)).join('')}</ol>`;
-    const foldedList = folded.length === 0 ? ''
-      : `<details class="task-index-folded"><summary>完走済みとして畳んだ工程 ${folded.length}件</summary><ol class="task-index-list">${folded.map((section) => renderTaskIndexEntry(section, lookup)).join('')}</ol></details>`;
-    return `<section class="task-index-plan"><h2><code>${escapeHtmlText(plan.planKey)}</code></h2>${drawnList}${foldedList}</section>`;
-  }).join('');
-}
-
-function presentationLookup(presentation) {
-  return {
-    lanes: new Map((presentation?.lanes ?? []).map((lane) => [JSON.stringify([lane.plan_key, lane.lane]), lane])),
-    taskNumbers: new Map((presentation?.task_numbers ?? []).map((entry) => [refKey(entry), entry])),
-  };
-}
-
-function taskReference(section, lookup) {
-  const number = lookup.taskNumbers.get(refKey(section.ref));
-  return number === undefined ? `ID ${section.task.task_id}` : `工程 ${number.display_number}`;
-}
-
-function renderRelationList(relations, sectionByKey, lookup, emptyText, folds = new Set()) {
-  if (relations.length === 0) return `<p class="relation-empty">${escapeHtmlText(emptyText)}</p>`;
-  return `<ul class="relation-list">${relations.map((relation) => {
-    const targetKey = refKey(relation.ref);
-    const target = sectionByKey.get(targetKey);
-    if (target === undefined) return '';
-    const join = relation.joinIds.length === 0 ? ''
-      : `<span class="relation-kind">合流条件: ${escapeHtmlText(relation.joinIds.join(', '))}</span>`;
-    // Say which ones the diagram does not draw, so the reader stops looking.
-    const reference = folds.has(targetKey)
-      ? `${taskReference(target, lookup)}（図では非表示）` : taskReference(target, lookup);
-    return `<li><button type="button" data-select-node-key="${escapeHtmlAttribute(targetKey)}"><strong>${escapeHtmlText(reference)}</strong><span>${escapeHtmlText(target.task.title)}</span></button>${join}</li>`;
-  }).join('')}</ul>`;
-}
-
-/** Phase states that are over: nothing is dispatched or judged under them again. */
-const SETTLED_PHASE_STATUS = Object.freeze(['accepted', 'rejected']);
-
-function renderPhaseProgress(readModel) {
-  const rows = [];
-  const settledRows = [];
-  for (const member of readModel.members) {
-    if (!['lattice.todo_plan.v4', 'lattice.todo_plan.v5'].includes(member.plan.schema)) continue;
-    const phases = new Map(member.snapshot.phases.map((phase) => [phase.phase_id, phase]));
-    for (const phase of member.plan.phases) {
-      const tasks = member.plan.tasks.filter((task) => task.phase_id === phase.phase_id);
-      const states = new Map(member.tasks.map((task) => [task.task_id, task.status]));
-      const done = tasks.filter((task) => states.get(task.task_id) === 'done').length;
-      const state = phases.get(phase.phase_id);
-      const row = `<li class="phase-progress status-${escapeHtmlAttribute(state.status)}"><header><strong>${escapeHtmlText(phase.title ?? phase.phase_id)}</strong><span>${escapeHtmlText(state.status)}</span></header><p><code>${escapeHtmlText(`${member.plan.plan_key}/${phase.phase_id}`)}</code> — policy <code>${escapeHtmlText(phase.gate_policy)}</code> — ToDo ${done}/${tasks.length}</p><progress max="${tasks.length}" value="${done}">${done}/${tasks.length}</progress></li>`;
-      // A settled Phase is history. It stays reachable, but it does not push the
-      // live ones off the first screen.
-      (SETTLED_PHASE_STATUS.includes(state.status) ? settledRows : rows).push(row);
-    }
-  }
-  const decoupled = readModel.members.some(({ plan }) => plan.schema === 'lattice.todo_plan.v5');
-  const guidance = decoupled
-    ? 'ToDo完了とPhase受理は別です。Phaseは重監査の順序を表し、通常ToDoの開始順はToDo依存だけで決まります。'
-    : 'ToDo完了とPhase受理は別です。<code>gate_ready</code>では後続Phaseはまだ解放されません。';
-  if (rows.length === 0 && settledRows.length === 0) return '';
-  const liveList = rows.length === 0
-    ? '<p class="readiness-note">進行中のPhaseはありません。</p>'
-    : `<ol>${rows.join('')}</ol>`;
-  const settledList = settledRows.length === 0 ? ''
-    : `<details class="phase-settled"><summary>決着済みPhase ${settledRows.length}件</summary><ol>${settledRows.join('')}</ol></details>`;
-  return `<section class="phase-overview"><h2>Phase進捗</h2><p>${guidance}</p>${liveList}${settledList}</section>`;
-}
-
-/**
- * 図の外が語るための独立性要約を、plan単位の投影から引ける形へ畳む（ADR 0129 Decision 3）。
- */
-function summarizeIndependence(layout) {
-  if (layout.independence === null) return null;
-  const byPlan = new Map(layout.independence.plans.map((plan) => [plan.plan_key, plan]));
-  return {
-    plans: layout.independence.plans,
-    byPlan,
-    verifiedTaskCount: layout.independence.plans
-      .reduce((total, plan) => total + plan.verified_task_count, 0),
-    unknownTaskCount: layout.independence.plans
-      .reduce((total, plan) => total + plan.unknown_task_ids.length, 0),
-    serializePairCount: layout.independence.plans
-      .reduce((total, plan) => total + plan.serialize_pairs.length, 0),
-  };
-}
-
-/** 記録が無いときだけADR 0063の既定をそのまま述べる。 */
-function dispatchBasis(summary) {
-  if (summary === null) {
-    return 'ready frontier全件が既定です。一部だけを直列着手する場合は理由が必要です。';
-  }
-  const parts = [`検証済み並列 ${summary.verifiedTaskCount}工程`];
-  if (summary.serializePairCount > 0) parts.push(`要直列 ${summary.serializePairCount}組`);
-  if (summary.unknownTaskCount > 0) parts.push(`未検査 ${summary.unknownTaskCount}工程`);
-  return `${parts.join('、')}。未検査は依存線が無くても並列可の根拠になりません。`;
-}
-
-const SEVERABILITY_LABEL = Object.freeze({
-  code_seam: 'コードの分割で並列化しうる',
-  serial: '共有状態のため直列必須',
-});
-
-/** 個別ToDoについて、競合相手と切断可能性を言葉で示す。 */
-function renderIndependenceNote(ref, node, summary) {
-  if (summary === null || node === undefined) return '';
-  const plan = summary.byPlan.get(ref.plan_key);
-  if (plan === undefined) return '';
-  const taskId = ref.task_id;
-  const state = node.visibility.independence;
-  if (state === null) return '';
-  if (state === 'verified') {
-    return '<p class="readiness-note"><strong>並列可否:</strong> 独立検証済です。記録時点の宣言境界では他のready工程と干渉しません。</p>';
-  }
-  if (state === 'unknown') {
-    return '<p class="readiness-note"><strong>並列可否:</strong> 未検査です。競合が無いのではなく、まだ判定していません。</p>';
-  }
-  const pairs = [
-    ...plan.serialize_pairs
-      .filter((pair) => pair.task_ids.includes(taskId))
-      .map((pair) => ({
-        other: pair.task_ids.find((id) => id !== taskId),
-        severability: pair.severability,
-        detail: pair.detail,
-      })),
-    ...plan.conflicts_with_active
-      .filter((entry) => entry.ready_task_id === taskId)
-      .map((entry) => ({
-        other: `${entry.active_task_id}（作業中）`,
-        severability: entry.severability,
-        detail: entry.detail,
-      })),
-  ];
-  const items = pairs.map((pair) => `<li>${escapeHtmlText(pair.other)} — ${escapeHtmlText(SEVERABILITY_LABEL[pair.severability] ?? pair.severability)}（資源 ${escapeHtmlText(pair.detail)}）</li>`).join('');
-  return `<p class="readiness-note"><strong>並列可否:</strong> 要直列です。</p><ul class="independence-conflicts">${items}</ul>`;
-}
-
-function renderSeamComponent(component) {
-  const conflicts = component.conflicts.map((conflict) => {
-    const pairs = conflict.task_pairs
-      .map(([left, right]) => `<span class="seam-task-pair"><code>${escapeHtmlText(left)}</code><span aria-hidden="true"> ↔ </span><code>${escapeHtmlText(right)}</code></span>`)
-      .join('');
-    return `<li class="seam-conflict"><strong class="seam-target">${escapeHtmlText(conflict.target)}</strong><span class="seam-conflict-kind"><code>${escapeHtmlText(conflict.kind)}</code></span><span class="seam-pairs">${pairs}</span></li>`;
-  }).join('');
-  const unknowns = component.unknowns.length === 0 ? '' : `<section class="seam-evidence-needed"><h4>次に必要な証拠</h4><ul>${component.unknowns.map((unknown) => {
-    const reference = component.task_ids.includes(unknown.ref)
-      ? `ToDo <code>${escapeHtmlText(unknown.ref)}</code>`
-      : `ref <code>${escapeHtmlText(unknown.ref)}</code>`;
-    return `<li><code>${escapeHtmlText(unknown.kind)}</code><span>${reference}</span></li>`;
-  }).join('')}</ul></section>`;
-  const reasons = component.reasons.length === 0 ? '' : `<section class="seam-reasons"><h4>判定理由</h4><ul>${component.reasons.map((reason) => `<li><code>${escapeHtmlText(reason.code)}</code><span>${escapeHtmlText(reason.detail)}</span></li>`).join('')}</ul></section>`;
-  const proposed = component.proposed_surfaces.length === 0 ? '' : `<section class="seam-surfaces"><h4>提案する所有境界</h4><ul>${component.proposed_surfaces.map((surface) => `<li><strong>${escapeHtmlText(surface.target)}</strong><span><code>${escapeHtmlText(surface.kind)}</code> / <code>${escapeHtmlText(surface.role)}</code> / owner ${surface.owner_task_ids.map((taskId) => `<code>${escapeHtmlText(taskId)}</code>`).join(', ') || '—'}</span></li>`).join('')}</ul></section>`;
-  const affectedTests = component.affected_tests.length === 0 ? ''
-    : `<p class="seam-tests"><strong>影響test:</strong> ${component.affected_tests.map((testRef) => `<code>${escapeHtmlText(testRef)}</code>`).join(', ')}</p>`;
-  return `<article class="seam-component verdict-${escapeHtmlAttribute(component.verdict)}"><header><span>Seam判定</span><code>${escapeHtmlText(component.verdict)}</code></header><ul class="seam-conflicts">${conflicts}</ul>${unknowns}${reasons}${proposed}${affectedTests}</article>`;
-}
-
-function renderSeamPlan(plan, { compact = false } = {}) {
-  const components = plan.components.map(renderSeamComponent).join('');
-  const count = plan.component_count === null ? '—' : String(plan.component_count);
-  const nextAction = plan.guidance.next_action === 'none' ? ''
-    : `<p class="seam-next-action"><strong>次の一歩:</strong> <code>${escapeHtmlText(plan.guidance.next_action)}</code></p>`;
-  return `<section class="seam-plan${compact ? ' seam-plan-compact' : ''}" data-seam-plan="${escapeHtmlAttribute(plan.plan_key)}"><header><code>${escapeHtmlText(plan.plan_key)}</code><span class="seam-coverage coverage-${escapeHtmlAttribute(plan.coverage)}">${escapeHtmlText(plan.guidance.code)}</span><span class="seam-component-count">component ${escapeHtmlText(count)}件</span></header><p class="seam-guidance">${escapeHtmlText(plan.guidance.message)}</p>${nextAction}${components}</section>`;
-}
-
-/**
- * componentがあるplanを先に展開し、0件planはcoverageごとに畳む。
- * 実データのunknownと係争資源を、未生成planの列より先に視認できるようにする。
- */
-function renderSeamProposalOverview(layout) {
-  const plans = layout.seam_proposals?.plans;
-  if (!Array.isArray(plans)) return '';
-  const withComponents = plans.filter((plan) => plan.components.length > 0);
-  const emptyByGuidance = new Map();
-  for (const plan of plans.filter((entry) => entry.components.length === 0)) {
-    if (!emptyByGuidance.has(plan.guidance.code)) emptyByGuidance.set(plan.guidance.code, []);
-    emptyByGuidance.get(plan.guidance.code).push(plan);
-  }
-  const decisions = withComponents.map((plan) => renderSeamPlan(plan)).join('');
-  const emptyGroups = [...emptyByGuidance.entries()].sort(([left], [right]) => compareText(left, right))
-    .map(([code, grouped]) => `<details class="seam-empty-group"><summary><code>${escapeHtmlText(code)}</code><span>${grouped.length} plan</span></summary>${grouped.map((plan) => renderSeamPlan(plan, { compact: true })).join('')}</details>`)
-    .join('');
-  return `<section class="seam-overview"><h2>Seam提案</h2>${decisions}${emptyGroups}</section>`;
-}
-
-function renderRightPane(sections, layout, presentation, readModel) {
-  const lookup = presentationLookup(presentation);
-  const sectionByKey = new Map(sections.map((section) => [refKey(section.ref), section]));
-  const nodeByKey = new Map(layout.nodes.map((node) => [refKey(node.ref), node]));
-  const folds = foldIndex(layout);
-  const incoming = new Map(sections.map((section) => [refKey(section.ref), []]));
-  const outgoing = new Map(sections.map((section) => [refKey(section.ref), []]));
-  const addRelation = (relations, ownerKey, ref, joinIds) => {
-    const entries = relations.get(ownerKey);
-    if (entries === undefined) return;
-    let entry = entries.find((candidate) => refKey(candidate.ref) === refKey(ref));
-    if (entry === undefined) {
-      entry = { ref, joinIds: [] };
-      entries.push(entry);
-    }
-    entry.joinIds = [...new Set([...entry.joinIds, ...joinIds])].sort();
-  };
-  // Premises and successors come from the FULL graph. `layout.edges` is the
-  // drawn graph, where a fold unit's interior dependencies have been contracted
-  // away — reading those here would tell a folded ToDo it has no premises.
-  for (const edge of layout.full_edges ?? layout.edges) {
-    addRelation(incoming, refKey(edge.to), edge.from, edge.join_ids);
-    addRelation(outgoing, refKey(edge.from), edge.to, edge.join_ids);
-  }
-  const counts = { pending: 0, 'in-progress': 0, blocked: 0, done: 0 };
-  for (const section of sections) counts[section.state.status] += 1;
-  const active = sections.filter((section) => section.state.status === 'in-progress');
-  const ready = layout.nodes.filter((node) => node.visibility.next_ready);
-  const independenceSummary = summarizeIndependence(layout);
-  const readyHeadline = ready.length > 1
-    ? `<p class="readiness-note"><strong>同時dispatch推奨:</strong> ${ready.length}工程。${escapeHtmlText(dispatchBasis(independenceSummary))}</p>`
-    : ready.length === 1
-      ? '<p class="readiness-note"><strong>着手候補:</strong> 1工程です。</p>'
-      : '<p class="readiness-note">現在のready frontierは空です。</p>';
-  // ready件数によらず、記録があるなら内訳を述べる。1件の時だけ黙ると、
-  // その1件が未検査でも「候補が1つある」としか伝わらない。
-  const independenceNote = independenceSummary === null || ready.length > 1 ? ''
-    : `<p class="readiness-note"><strong>並列可否:</strong> ${escapeHtmlText(dispatchBasis(independenceSummary))}</p>`;
-  const dispatchSummary = `${readyHeadline}${independenceNote}`;
-  const activeLinks = active.length === 0 ? '<p>作業中の工程はありません。</p>'
-    : `<ul class="active-list">${active.map((section) => `<li><button type="button" data-select-node-key="${escapeHtmlAttribute(refKey(section.ref))}">${escapeHtmlText(taskReference(section, lookup))} — ${escapeHtmlText(section.task.title)}</button></li>`).join('')}</ul>`;
-  const overview = `<section class="right-overview" data-right-panel="overview"><h1>工程を選択してください</h1><p>左の依存工程図から工程を選ぶと、題名・状態・前提・後続を表示します。</p><div class="status-summary"><span>☐ 未着手 ${counts.pending}</span><span>▶ 作業中 ${counts['in-progress']}</span><span>✅ 完了 ${counts.done}</span><span>⛔ ブロック中 ${counts.blocked}</span></div>${dispatchSummary}${renderSeamProposalOverview(layout)}${renderPhaseProgress(readModel)}<h2>作業中</h2>${activeLinks}</section>`;
-  const details = sections.map((section) => {
-    const key = refKey(section.ref);
-    const node = nodeByKey.get(key);
-    const status = DOCUMENT_STATUS[section.state.status] ?? { mark: '?', label: '状態不明' };
-    const lane = lookup.lanes.get(JSON.stringify([section.ref.plan_key, section.task.lane]));
-    const category = lane === undefined ? section.task.lane : `${section.task.lane} — ${lane.name}`;
-    const categoryDescription = lane === undefined ? '' : `<p class="category-description">${escapeHtmlText(lane.description)}</p>`;
-    const blockedReason = section.state.status === 'blocked'
-      ? `<p><strong>ブロック理由:</strong> ${escapeHtmlText(section.state.blocked_reason ?? '理由未記録')}</p>` : '';
-    const sourceLine = section.anchorOutcome.origin_line === null ? '' : `:${section.anchorOutcome.origin_line}`;
-    const sourceRef = section.narrativeRef ?? '参照なし';
-    const anchorText = section.anchorOutcome.anchored
-      ? `元plan: ${sourceRef}${sourceLine} — 行対応を確認済み`
-      : `元plan: ${sourceRef}${sourceLine} — 行対応を確認できないため、本文位置との対応は表示していません`;
-    const readiness = node?.visibility.next_ready
-      ? `<p class="readiness-note">ready frontierの一員です。${ready.length > 1 ? '他のready工程と同時着手できるかは下の並列可否で判断してください。' : '現在の唯一の着手候補です。'}</p>`
-      : incoming.get(key).length === 0 ? '<p class="readiness-note">登録済みの前提工程はありません。図だけではdispatch可否を判定しません。</p>' : '';
-    const independenceNote = renderIndependenceNote(section.ref, node, independenceSummary);
-    // Say it plainly when the reader will not find this ToDo on the diagram.
-    const foldedNote = !folds.has(key) ? ''
-      : '<p class="fold-note">完走済みのため図には描いていません。図に出すには <code>lattice todo gantt --scope all</code> を実行してください。</p>';
-    return `<article class="task-detail" data-detail-key="${escapeHtmlAttribute(key)}" hidden><header><span class="detail-status status-${escapeHtmlAttribute(section.state.status)}">${escapeHtmlText(status.mark)} ${escapeHtmlText(status.label)}</span><span class="detail-reference">${escapeHtmlText(taskReference(section, lookup))}</span></header><h1>${escapeHtmlText(section.task.title)}</h1><p class="detail-category"><strong>カテゴリ:</strong> ${escapeHtmlText(category)}</p>${categoryDescription}<p><strong>正規ID:</strong> <code>${escapeHtmlText(`${section.ref.plan_key}/${section.task.task_id}`)}</code></p>${blockedReason}${readiness}${independenceNote}${foldedNote}<section><h2>前提工程</h2>${renderRelationList(incoming.get(key), sectionByKey, lookup, '登録済みの前提工程はありません。', folds)}</section><section><h2>後続工程</h2>${renderRelationList(outgoing.get(key), sectionByKey, lookup, '登録済みの後続工程はありません。', folds)}</section><p class="anchor-status">${escapeHtmlText(anchorText)}</p><details class="task-diagnostics"><summary>開発者向け診断</summary><dl><dt>canonical ref</dt><dd><code>${escapeHtmlText(`${section.ref.project_id}/${section.ref.plan_key}/${section.task.task_id}`)}</code></dd><dt>anchor</dt><dd>${escapeHtmlText(section.anchorOutcome.anchored ? 'verified' : section.anchorOutcome.reason)}</dd></dl></details></article>`;
-  }).join('');
-  const taskIndex = renderTaskIndex(sections, lookup, folds, planActivity(readModel));
-  return `<div class="right-toolbar"><button type="button" data-show-overview>概要</button><button type="button" data-show-selected hidden>選択工程へ戻る</button><button type="button" data-show-task-index>全工程一覧</button></div><div class="right-content">${overview}<div data-right-panel="details" hidden>${details}</div><section class="task-index" data-right-panel="task-index" hidden><h1>全工程</h1><p>Latticeに登録された全工程を現在の状態とともに表示しています。planは動いているものを最終活動の新しい順で上に、完走したものを古い順で下にまとめ、plan内は登録順です。</p>${taskIndex}</section></div>`;
-}
-
-function renderDiagramLegend(presentation, layout = null, expandable = false) {
-  const categories = (presentation?.lanes ?? []).map((lane) => `<div class="category-entry"><dt><code>${escapeHtmlText(lane.lane)}</code> — ${escapeHtmlText(lane.name)}</dt><dd>${escapeHtmlText(lane.description)}</dd></div>`).join('');
-  const categoryDetails = categories === '' ? '' : `<details class="category-legend"><summary>カテゴリ説明</summary><dl>${categories}</dl></details>`;
-  const foldedCount = layout?.scope?.folded_task_count ?? 0;
-  // The badge says what is missing from the diagram, so it is also the control
-  // that brings it back — a reader who notices the count is exactly the reader
-  // who wants to see it.
-  const foldChip = foldedCount === 0 ? ''
-    : expandable
-      ? `<button type="button" class="fold-chip" data-toggle-expanded aria-expanded="false"><span data-toggle-label data-collapsed-label="完走済み ${foldedCount}件を非表示（押すと表示）" data-expanded-label="完走済み ${foldedCount}件を表示中（押すと非表示）">完走済み ${foldedCount}件を非表示（押すと表示）</span></button>`
-      : `<span class="fold-chip">完走済み ${foldedCount}件を非表示</span>`;
-  const foldNote = foldedCount === 0 ? ''
-    : expandable
-      ? '<p class="fold-note">後続に作業中・未着手が残っていない完了工程は図から外しています。生きた工程とその直接の前提工程は必ず描きます。上のバッジを押すと外した工程も含めて描きます。総数・進捗・最長依存鎖は外す前の全工程で数えています。</p>'
-      : '<p class="fold-note">後続に作業中・未着手が残っていない完了工程は図から外しています。生きた工程とその直接の前提工程は必ず描きます。外した工程は右の「全工程」から辿れ、図に出すには <code>lattice todo gantt --scope all</code> を実行してください。総数・進捗・最長依存鎖は外す前の全工程で数えています。</p>';
-  const independenceLegend = layout.independence === null ? ''
-    : '<span>∥ 独立検証済</span><span>⛓ 要直列</span><span>? 未検査</span>';
-  // 独立性の記録がある間は「全件同時dispatchが既定」と無条件に述べない（ADR 0129 Decision 3）。
-  const dispatchSentence = layout.independence === null
-    ? 'ready frontierは全件同時dispatchが既定です。未登録の資源・host制約によりsubsetだけを選ぶ場合は理由を記録します。'
-    : '同時着手できるかはカードの並列可否で判断してください。未検査の工程は依存線が無くても並列可の根拠になりません。';
-  return `<div class="diagram-legend" aria-label="工程図の凡例"><span>${statusMarkup('pending', ' 未着手')}</span><span>${statusMarkup('in-progress', ' 作業中')}</span><span>${statusMarkup('done', ' 完了')}</span><span>${statusMarkup('blocked', ' ブロック中')}</span><span>破線枠: ready frontier</span>${independenceLegend}<span>太線: 構造上の最長依存鎖</span><span>半円: 非接触の線交差</span><span>黒丸: 論理上の合流</span>${foldChip}${categoryDetails}${foldNote}<p>縦方向は時間ではなく、登録済み依存関係による工程段階です。${dispatchSentence}構造上の最長依存鎖は各工程を同じ重みとして数え、実時間・工数・納期を表しません。</p></div>`;
-}
-
-const CSS = `
-:root{
-  color-scheme:light;
-  --surface-1:#fcfcfb;
-  --surface-2:#f4f4f2;
-  --text-primary:#0b0b0b;
-  --text-secondary:#52514e;
-  --border:#d9d8d4;
-  --accent:#2a78d6;
-  --good:#0ca30c;
-  --critical:#d03b3b;
-  font-family:system-ui,-apple-system,"Hiragino Sans","Yu Gothic UI",sans-serif;
-  font-size:13.5px;
-  font-weight:400;
-  line-height:1.6;
-}
-*{box-sizing:border-box}
-body{display:grid;grid-template-rows:minmax(0,1fr);height:100vh;margin:0;background:var(--surface-1);color:var(--text-primary)}
-.shell{display:grid;grid-template-columns:minmax(0,var(--split,58%)) auto minmax(24rem,1fr);min-width:0;min-height:0}
-.gantt-pane{display:grid;grid-template-rows:auto auto minmax(0,1fr);min-width:0;min-height:0;overflow:hidden;background:var(--surface-1)}
-.pane-divider{width:8px;cursor:col-resize;background:rgba(217,216,212,.5);touch-action:none}
-.diagram-toolbar{z-index:3;display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--surface-2);color:var(--text-secondary)}
-.diagram-toolbar button{min-height:32px;padding:0 8px;border:1px solid var(--border);border-radius:4px;background:var(--surface-2);color:var(--text-primary);font:500 12px/1.6 system-ui,-apple-system,"Hiragino Sans","Yu Gothic UI",sans-serif}
-.diagram-toolbar button:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}
-.zoom-readout{min-width:48px;text-align:center;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
-.diagram-note{margin-left:auto;color:var(--text-secondary);font-size:12px;font-weight:500}
-.project-heading{margin-right:8px;color:var(--text-primary);font-size:13px;font-weight:650;white-space:nowrap}.status-symbol.status-in-progress{color:var(--accent)}.status-symbol.status-done{color:var(--good)}.status-symbol.status-blocked{color:var(--critical)}
-.diagram-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--surface-1);color:var(--text-secondary);font-size:12px;font-weight:500}
-.diagram-legend>span{white-space:nowrap}.diagram-legend>p{flex:1 0 100%;margin:0;font-weight:400}
-.category-legend{margin-left:auto}.category-legend summary{cursor:pointer;color:var(--text-primary)}
-.category-legend dl{position:absolute;z-index:4;right:16px;max-width:38rem;margin:8px 0 0;padding:12px 16px;border:1px solid var(--border);background:var(--surface-1);box-shadow:0 4px 16px rgba(11,11,11,.12)}
-.category-entry+ .category-entry{margin-top:8px}.category-entry dt{color:var(--text-primary)}.category-entry dd{margin:0;color:var(--text-secondary);font-weight:400}
-.diagram-scroll{min-width:0;min-height:0;max-width:calc(100% - 16px);margin:8px;overflow:auto;overscroll-behavior:contain;border:1px solid rgba(217,216,212,.5)}
-.todo-gantt{display:block;max-width:none}
-.narrative-pane{min-width:0;overflow:auto;background:var(--surface-1)}
-[hidden]{display:none!important}
-.right-toolbar{position:sticky;z-index:3;top:0;display:flex;gap:8px;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--surface-1)}
-.right-toolbar button,.relation-list button,.active-list button,.task-index-list button{padding:6px 8px;border:1px solid var(--border);border-radius:4px;background:var(--surface-2);color:var(--text-primary);font:500 12px/1.6 system-ui,-apple-system,"Hiragino Sans","Yu Gothic UI",sans-serif;text-align:left;cursor:pointer}
-.right-toolbar button:focus-visible,.relation-list button:focus-visible,.active-list button:focus-visible,.task-index-list button:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}
-.right-content{max-width:72ch;margin:0 auto;padding:16px 24px 48px}
-.right-overview h1,.task-detail h1{margin:0 0 16px;font-size:19px;font-weight:650;line-height:1.45}
-.right-overview h2,.task-detail h2{margin:24px 0 8px;font-size:16px;font-weight:600}
-.status-summary{display:flex;flex-wrap:wrap;gap:8px 16px;margin:16px 0;padding:12px;background:var(--surface-2)}
-.seam-overview{margin:24px 0}.seam-overview>h2{margin-bottom:8px}
-.seam-plan{margin:8px 0;padding:12px;border:1px solid var(--border);border-left:4px solid var(--accent);background:var(--surface-2)}
-.seam-plan>header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}.seam-plan>header>code{font-weight:650}.seam-component-count{margin-left:auto;color:var(--text-secondary);font-size:12px}
-.seam-coverage{padding:1px 7px;border:1px solid var(--border);border-radius:9999px;background:var(--surface-1);font-size:11px;font-weight:650}.seam-coverage.coverage-missing,.seam-coverage.coverage-stale,.seam-coverage.coverage-superseded{border-color:var(--critical);color:var(--critical)}
-.seam-guidance,.seam-next-action{margin:6px 0 0;color:var(--text-secondary);font-size:12px}.seam-next-action code{color:var(--text-primary);font-weight:650}
-.seam-component{margin-top:10px;padding:10px;border:1px solid var(--border);border-left:4px solid var(--text-secondary);background:var(--surface-1)}.seam-component.verdict-seam_candidate{border-left-color:var(--good)}.seam-component.verdict-intentional_serial{border-left-color:var(--critical)}.seam-component.verdict-unknown_requires_evidence{border-left-color:var(--accent)}
-.seam-component>header{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;font-weight:650}.seam-component>header code{overflow-wrap:anywhere}
-.seam-conflicts,.seam-evidence-needed ul,.seam-reasons ul,.seam-surfaces ul{margin:8px 0 0;padding:0;list-style:none}.seam-conflict{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:8px;border:1px solid var(--border)}.seam-conflict+.seam-conflict{margin-top:6px}
-.seam-target{font-size:13.5px;overflow-wrap:anywhere}.seam-conflict-kind{color:var(--text-secondary);font-size:11px}.seam-pairs{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:4px 10px}.seam-task-pair{font-weight:650}
-.seam-evidence-needed,.seam-reasons,.seam-surfaces{margin-top:10px}.seam-evidence-needed h4,.seam-reasons h4,.seam-surfaces h4{margin:0;font-size:12px}.seam-evidence-needed li,.seam-reasons li,.seam-surfaces li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:5px 8px;background:var(--surface-2)}.seam-evidence-needed li+li,.seam-reasons li+li,.seam-surfaces li+li{margin-top:4px}.seam-evidence-needed li>code{font-weight:650}.seam-evidence-needed li>span,.seam-reasons li>span,.seam-surfaces li>span{color:var(--text-secondary)}
-.seam-tests{margin:8px 0 0;color:var(--text-secondary);font-size:12px}.seam-empty-group{margin-top:8px;border-top:1px solid var(--border)}.seam-empty-group>summary{display:flex;gap:10px;padding:8px 0;cursor:pointer;color:var(--text-secondary)}.seam-empty-group>summary span{margin-left:auto}.seam-plan-compact{border-left-width:1px}
-.phase-overview>p{color:var(--text-secondary)}.phase-overview>ol{display:grid;gap:8px;margin:0;padding:0;list-style:none}.phase-progress{padding:10px 12px;border:1px solid var(--border);border-left-width:4px;background:var(--surface-2)}.phase-progress>header{display:flex;justify-content:space-between;gap:12px}.phase-progress>p{margin:4px 0;color:var(--text-secondary);font-size:12px}.phase-progress progress{display:block;width:100%}.phase-progress.status-accepted{border-left-color:var(--good)}.phase-progress.status-reviewing,.phase-progress.status-gate_ready{border-left-color:var(--accent)}.phase-progress.status-rejected{border-left-color:var(--critical)}
-.active-list,.relation-list{margin:0;padding:0;list-style:none}.active-list li+li,.relation-list li+li{margin-top:8px}
-.active-list button{width:100%}.anchor-status,.readiness-note,.category-description,.relation-empty{color:var(--text-secondary)}
-.task-detail>header{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}.detail-status,.detail-reference{font-size:12px;font-weight:600}.detail-reference{color:var(--text-secondary)}
-.relation-list button{display:flex;width:100%;flex-direction:column}.relation-list button span{font-weight:400}.relation-kind{display:block;margin-top:4px;color:var(--text-secondary);font-size:12px}
-.task-diagnostics{margin:16px 0;color:var(--text-secondary);font-size:12px}.task-diagnostics summary{cursor:pointer;color:var(--text-primary);font-weight:600}.task-diagnostics dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px}.task-diagnostics dd{margin:0;overflow-wrap:anywhere}
-.task-index>h1{margin:0 0 8px;font-size:19px;font-weight:650;line-height:1.45}.task-index>p{margin:0 0 24px;color:var(--text-secondary)}
-.task-index-plan+.task-index-plan{margin-top:32px}.task-index-plan h2{margin:0 0 12px;font-size:16px;font-weight:600}.task-index-plan h2 code{font-size:inherit}
-.task-index-list{margin:0;padding:0;list-style:none}.task-index-list li+li{margin-top:8px}.task-index-list button{display:grid;width:100%;grid-template-columns:1.5rem auto minmax(0,1fr);gap:4px 8px;align-items:baseline}
-.task-index-status{grid-row:1 / span 2;color:var(--text-secondary);font-size:13.5px;text-align:center}.task-index-status.status-in-progress{color:var(--accent)}.task-index-status.status-done{color:var(--good)}.task-index-status.status-blocked{color:var(--critical)}
-.task-index-reference{color:var(--text-secondary);font-size:12px;white-space:nowrap}.task-index-list strong{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}.task-index-blocked-reason{grid-column:2 / -1;color:var(--text-secondary);font-size:12px;overflow-wrap:anywhere}
-.todo-gantt text{font-family:system-ui,-apple-system,"Hiragino Sans","Yu Gothic UI",sans-serif;pointer-events:none}
-.todo-node .node-surface{fill:var(--surface-2);stroke:var(--border);stroke-width:1}
-.todo-node .node-meta{fill:var(--text-secondary);font-size:12px;font-weight:500}
-.todo-node .node-title{fill:var(--text-primary);font-size:13.5px;font-weight:400}
-.todo-node .node-title-line{font-size:13.5px;font-weight:400}
-.todo-node .status-mark{fill:var(--text-secondary);font-size:13.5px;font-weight:400}
-.fold-chip{padding:2px 8px;border:1px solid var(--border);border-radius:9999px;background:var(--surface-2);color:var(--text-primary);font:650 13.5px/1.6 system-ui,-apple-system,"Hiragino Sans","Yu Gothic UI",sans-serif}
-button.fold-chip{cursor:pointer}button.fold-chip:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}
-button.fold-chip[aria-expanded="true"]{border-color:var(--text-primary)}
-[data-diagram][hidden]{display:none}
-.fold-note{flex:1 0 100%;margin:4px 0 0;color:var(--text-secondary);font-weight:400}
-.task-index-folded{margin-top:8px}
-.task-index-folded>summary,.phase-settled>summary{cursor:pointer;padding:6px 0;color:var(--text-secondary);font-weight:600}
-.phase-settled>summary:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}
-.status-in-progress .node-surface{fill:var(--surface-1);stroke:var(--accent);stroke-width:2}
-.status-in-progress .status-mark{fill:var(--accent)}
-.status-in-progress .status-bar{stroke:var(--accent);stroke-width:2;stroke-linecap:round}
-.status-done .node-surface{fill:var(--surface-2);stroke:var(--border);stroke-width:1}
-.status-done .status-mark{fill:var(--good)}
-.status-blocked .node-surface{fill:var(--surface-1);stroke:var(--critical);stroke-width:2}
-.status-blocked .status-mark{fill:var(--critical)}
-.next-ready-node .node-surface{stroke:var(--accent);stroke-width:2;stroke-dasharray:4 3}
-/* 独立性は記号と色で示す。枠線はstatusとready frontierが使い切っている（ADR 0129）。 */
-.independence-badge{font-size:10px;font-weight:600;letter-spacing:0.02em}
-.independence-verified .independence-badge{fill:var(--good)}
-.independence-conflict .independence-badge{fill:var(--critical)}
-.independence-unknown .independence-badge{fill:var(--text-secondary)}
-.todo-node:focus .node-surface,.selected-node .node-surface{stroke:var(--text-primary);stroke-width:2.5}
-.dependency-edge .edge-route{fill:none;stroke:var(--text-secondary);stroke-width:1.5;stroke-linejoin:round;opacity:.4}
-.dependency-edge .edge-arrow{fill:var(--text-secondary);opacity:.7}
-.longest-chain-edge .edge-route,.selected-incident-edge .edge-route{stroke:var(--text-primary);stroke-width:2.5;opacity:1}
-.longest-chain-edge .edge-arrow,.selected-incident-edge .edge-arrow{fill:var(--text-primary);opacity:1}
-.join-marker circle{fill:var(--text-primary);stroke:none}
-.join-contact-marker{fill:var(--text-primary);stroke:none}.join-connector .edge-route{fill:none;stroke:var(--text-secondary);stroke-width:1.5;opacity:.7}
-.summary-container{fill:var(--surface-1);stroke:var(--border);stroke-width:1;stroke-opacity:.5}
-.summary-chip{fill:var(--surface-2);stroke:none}
-.summary-plan text{fill:var(--text-primary);font-size:12px;font-weight:500}
-.summary-lane text{fill:var(--text-secondary);font-size:12px;font-weight:500}
-.summary-lane{cursor:pointer}
-.lane-dimmed{opacity:.35}
-@media(max-width:900px){body{display:block;height:auto}.shell{display:block}.pane-divider{display:none}.gantt-pane,.narrative-pane{height:70vh}.gantt-pane{border-bottom:1px solid var(--border)}}
-`;
-
 const CONTROLLER = `
 (()=>{
   const root=document.querySelector('[data-gantt-root]');if(!root)return;