@quolu/lattice 0.20.0 → 0.21.0

package/src/todo-gantt-html-shared.mjs

@@ -0,0 +1,196 @@
+import { renderTodoGanttSvg, TODO_GANTT_STATUS_PRESENTATION } from './todo-gantt-svg.mjs';
+
+export const DOCUMENT_STATUS = TODO_GANTT_STATUS_PRESENTATION;
+
+export 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}`;
+}
+
+export function escapeHtmlAttribute(value) {
+  return String(value).replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;').replaceAll("'", '&#39;').replace(/[\u0000-\u001f\u007f]/gu, '');
+}
+
+export function escapeHtmlText(value) {
+  return String(value).replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+}
+
+export function refKey(ref) {
+  return JSON.stringify([ref.project_id, ref.plan_key, ref.task_id]);
+}
+
+export function compareText(left, right) {
+  return left < right ? -1 : left > right ? 1 : 0;
+}
+
+/** Keys of the ToDos the diagram does not draw, empty when nothing was folded. */
+export function foldIndex(layout) {
+  return new Set((layout?.folded ?? []).map((ref) => refKey(ref)));
+}
+
+export 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が最後に動いた時点。 */
+export 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];
+  }));
+}
+
+export 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('');
+}
+
+export 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])),
+  };
+}
+
+export function taskReference(section, lookup) {
+  const number = lookup.taskNumbers.get(refKey(section.ref));
+  return number === undefined ? `ID ${section.task.task_id}` : `工程 ${number.display_number}`;
+}
+
+export 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. */
+export const SETTLED_PHASE_STATUS = Object.freeze(['accepted', 'rejected']);
+
+export 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>`;
+}
+
+export const SEVERABILITY_LABEL = Object.freeze({
+  code_seam: 'コードの分割で並列化しうる',
+  serial: '共有状態のため直列必須',
+});
+
+export 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>`;
+}
+
+export 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の列より先に視認できるようにする。
+ */
+export 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>`;
+}

package/src/todo-gantt-html-style.mjs

@@ -0,0 +1,107 @@
+export 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)}}
+`;