feat(docpage): D3 절 구조 탐색기 — 슬림 인사이트 레일 + 절 트리 (frontend only)

문서 상세 /documents/[id] 재구성 (BE 무변경): - 우측 탭(정보/AI/관리) → 슬림 전역 인사이트 레일: 요약·심층·불일치를 탭 게이트 없이 상시 노출(details open, 모바일은 접기 가능), 정보/관리는 접이. → 가공 자료가 탭/온디맨드에 묻히던 IA 문제(G1) 해소. - SectionOutline 절 목차 레벨 기반 들여쓰기(평탄→트리 모양). - 모바일: 본문 메인 + 절목차/인사이트/정보/관리 접이 + 절 탭 본문 이동(기존 구조 활용). 관련 문서(See Also)는 v1 제외(자리만 유지). 심화 목업 = comparisons/2026-06-13-ds-docpage-d3-deepened.html. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Merge feat/safety-library-a1 (C-1 후속 version_status+facets) into ds-board-merged
2026-06-13 15:18:15 +09:00 · 2026-06-13 15:08:24 +09:00 · 2026-06-13 14:53:34 +09:00 · 2026-06-13 14:01:50 +09:00 · 2026-06-13 13:54:39 +09:00
8 changed files with 329 additions and 138 deletions
@@ -59,6 +59,20 @@ class SummarizeEta(BaseModel):
    eta_minutes: int | None


+class MachineDone(BaseModel):
+    """머신 1대의 summarize 완료 실적 (분담 표시용)."""
+    done_1h: int
+    done_today: int
+
+
+class SummarizeByMachine(BaseModel):
+    """summarize 풀의 머신별 완료 실적 분담 — 보드 레인의 '맥미니 vs 맥북'
+    오프로드 가시화용. rows_to_summarize_split 이 이미 계산하던 값의 노출
+    (ds-board-merged A-1, 신규 수집 SQL 0)."""
+    macmini: MachineDone
+    macbook: MachineDone
+
+
 class TrendBucket(BaseModel):
    """summarize 24h 추이 버킷 — hour 는 KST "HH:00" 라벨."""
    hour: str
@@ -93,6 +107,7 @@ class QueueOverviewResponse(BaseModel):
    machines: list[MachineCard]
    stages: list[StageRow]
    summarize_eta: SummarizeEta
+    summarize_by_machine: SummarizeByMachine
    trend_24h: list[TrendBucket]
    totals: Totals

@@ -213,6 +213,16 @@ def build_summarize_eta(stage_stats: dict[str, dict]) -> dict:
    }


+def build_summarize_by_machine(summarize_split: dict[str, dict]) -> dict:
+    """summarize 머신별 완료 실적 분담 (macmini vs macbook) — 보드 레인의
+    오프로드 가시화용. rows_to_summarize_split 이 이미 만든 값을 응답 형태로
+    투영(done_1h/done_today 만, done_15m 은 내부 state 판정 전용이라 제외)."""
+    def m(key: str) -> dict:
+        s = summarize_split.get(key, {})
+        return {"done_1h": int(s.get("done_1h", 0)), "done_today": int(s.get("done_today", 0))}
+    return {"macmini": m("macmini"), "macbook": m("macbook")}
+
+
 def build_trend(
    inflow_buckets: dict[str, int],
    done_buckets: dict[str, int],
@@ -292,6 +302,7 @@ def compose_overview(
        ),
        "stages": build_stages(stage_stats),
        "summarize_eta": build_summarize_eta(stage_stats),
+        "summarize_by_machine": build_summarize_by_machine(summarize_split),
        "trend_24h": build_trend(inflow_buckets, done_buckets, now_kst),
        "totals": build_totals(stage_stats),
    }
@@ -1,16 +1,18 @@
 <script lang="ts">
-  // 처리 머신 보드 v2 — 파이프라인 흐름 뷰 (plan ds-board-engines-1, R2 통합안).
-  // 메인 = 좌→우 흐름 노드(병목 amber·실패 뱃지), 노드 클릭 = 상세 패널(안1 변형),
-  // 실패 뱃지 클릭 = 실패 처리 드로어 (재시도/건너뛰기 — 영구 실패의 유일한 조치 경로).
-  // 데이터 = GET /api/queue/overview (60s 폴링 store) + GET /api/queue/failed (드로어 열 때).
+  // 처리 머신 보드 v3 — 통합안 (plan ds-board-merged: C2 머신레인 + C3 번다운/정직ETA).
+  //   · 머신 3레인(GPU/맥미니/맥북) = "누가 일하나" + 요약 오프로드(맥북 합류) 가시화
+  //   · 지배 백로그 번다운 패널 = "언제 끝나나" + 유입 차감한 정직 ETA(summarize_eta)
+  //   · 신선도 '갱신 N초 전' + stale 경고 / 실패 드로어·상세 패널은 v2 자산 재사용.
+  // 데이터 = GET /api/queue/overview (60s 폴링 store) + GET /api/queue/failed (드로어).
  import { api } from '$lib/api';
-  import { refreshQueueOverview } from '$lib/stores/queueOverview';
+  import { refreshQueueOverview, queueUpdatedAt } from '$lib/stores/queueOverview';
  import { addToast } from '$lib/stores/toast';
  import {
    AUX_NODES,
    FLOW_NODES,
    MACHINE_META,
    type FlowNodeDef,
+    type FlowMachine,
    etaShort,
    flowStageLabel,
    formatAgeSec,
@@ -20,6 +22,7 @@
    FailedItem,
    FailedListResponse,
    MachineCurrentItem,
+    MachineOverview,
    QueueOverview,
    QueueStageRow,
    RetryResponse,
@@ -82,14 +85,6 @@
  );
  const totalFailed = $derived(overview.totals.failed);

-  // 머신 스트립 — overview.machines 의 state/처리율 + 정적 모델 메타
-  const machineStrip = $derived(
-    overview.machines.map((m) => ({
-      ...m,
-      meta: MACHINE_META[m.key],
-    })),
-  );
-
  // ─── 선택 상태 (노드 상세 / 실패 드로어 — 동시에 하나만) ───
  let selected = $state<string | null>(null);
  let failOpen = $state(false);
@@ -194,22 +189,105 @@
    await Promise.all([loadFailures(), refreshQueueOverview()]);
  }

-  // ─── trend_24h 스파크라인 (summarize 유입 vs 소화 — API 가 주는데 미렌더이던 슬롯) ───
-  const spark = $derived.by(() => {
+  // ─── 머신 레인 (C2) — mainNodes 를 머신별로 그룹 + 머신 카드(state/처리율) 결합 ───
+  const machineByKey = $derived(
+    new Map<FlowMachine, MachineOverview>(overview.machines.map((m) => [m.key as FlowMachine, m])),
+  );
+  const LANE_ORDER: FlowMachine[] = ['gpu', 'macmini', 'macbook'];
+  const lanes = $derived(
+    LANE_ORDER.map((key) => ({
+      key,
+      meta: MACHINE_META[key],
+      card: machineByKey.get(key) ?? null,
+      nodes: mainNodes.filter((n) => n.def.machine === key),
+    })),
+  );
+
+  // 요약 오프로드 분담 — 맥미니 vs 맥북 (A-1 summarize_by_machine)
+  const split = $derived(overview.summarize_by_machine);
+  const splitTotal1h = $derived(Math.max(1, split.macmini.done_1h + split.macbook.done_1h));
+  const macbookSharePct = $derived(Math.round((split.macbook.done_1h / splitTotal1h) * 100));
+  // 맥북이 요약을 실제로 가져가는 중인가 (합류 표식 게이트)
+  const offloadActive = $derived(split.macbook.done_1h > 0);
+
+  // ─── 지배 백로그 = 요약. 정직 ETA(유입 차감) — summarize_eta ───
+  const eta = $derived(overview.summarize_eta);
+  // 정직 ETA 라벨: eta_minutes null = 유입이 소화를 앞섬(소진 불가)
+  const honestEtaLabel = $derived(
+    eta.pending === 0
+      ? '비어 있음'
+      : eta.eta_minutes != null
+        ? etaShort(eta.eta_minutes)
+        : '소진 불가',
+  );
+  const honestEtaWarn = $derived(eta.pending > 0 && eta.eta_minutes == null);
+
+  /** 단계별 정직 ETA(순소화율) — 노드용. 유입>소화면 null(소진 불가) */
+  function netEtaLabel(n: NodeStats): string | null {
+    if (n.pending === 0) return '한가';
+    const net = n.done1h - n.created1h;
+    if (net > 0) return etaShort(Math.round((n.pending / net) * 60));
+    if (n.created1h > n.done1h) return '유입 우세';
+    return null;
+  }
+
+  // ─── 신선도 (B-4) — '갱신 N초 전' + stale 경고 (폴링 60s) ───
+  let now = $state(Date.now());
+  $effect(() => {
+    const id = setInterval(() => (now = Date.now()), 1000);
+    return () => clearInterval(id);
+  });
+  const ageSec = $derived(
+    $queueUpdatedAt != null ? Math.max(0, Math.round((now - $queueUpdatedAt) / 1000)) : null,
+  );
+  const stale = $derived(ageSec != null && ageSec > 90);
+  const freshLabel = $derived(
+    ageSec == null
+      ? '갱신 대기'
+      : ageSec < 60
+        ? `갱신 ${ageSec}초 전`
+        : `갱신 ${Math.round(ageSec / 60)}분 전`,
+  );
+
+  // ─── 24h 번다운 (C3) — 요약 유입 vs 소화 + 맥북 합류 변곡점 마커 ───
+  const burn = $derived.by(() => {
    const t = overview.trend_24h;
    if (!t || t.length === 0) return null;
    const max = Math.max(1, ...t.map((b) => Math.max(b.inflow, b.done)));
-    const w = 120;
-    const h = 24;
+    const w = 300;
+    const h = 64;
    const step = w / Math.max(1, t.length - 1);
-    const pts = (sel: (b: (typeof t)[number]) => number) =>
-      t.map((b, i) => `${(i * step).toFixed(1)},${(h - (sel(b) / max) * (h - 3) + 1).toFixed(1)}`).join(' ');
-    return { inflow: pts((b) => b.inflow), done: pts((b) => b.done) };
+    const y = (v: number) => (h - (v / max) * (h - 8) + 4).toFixed(1);
+    const line = (sel: (b: (typeof t)[number]) => number) =>
+      t.map((b, i) => `${(i * step).toFixed(1)},${y(sel(b))}`).join(' ');
+    const doneLine = line((b) => b.done);
+    const area = `0,${h} ${doneLine} ${w.toFixed(1)},${h}`;
+    // 합류 변곡점 = done 최대 버킷 (맥북 야간 drain 합류 추정)
+    let mi = 0;
+    t.forEach((b, i) => {
+      if (b.done > t[mi].done) mi = i;
+    });
+    return {
+      w,
+      h,
+      area,
+      doneLine,
+      inflowLine: line((b) => b.inflow),
+      markX: (mi * step).toFixed(1),
+      markHour: t[mi].hour,
+      markDone: t[mi].done,
+      peak: max,
+    };
  });
+
+  // 머신 상태 dot 색 클래스
+  function dotClass(state: string): string {
+    return state === 'active' ? 'bg-success' : state === 'deferred' ? 'bg-warning' : 'bg-faint';
+  }
 </script>

 <div class="mt-5">
-  <!-- 헤더: 타이틀 + 요약 24h 스파크라인 + 실패 합계 -->
+  <!-- 헤더: 타이틀 + 신선도 + 실패 합계 -->
  <div class="flex items-center justify-between gap-3 mb-3">
    <div class="text-[11px] font-bold text-dim uppercase tracking-wider">처리 머신</div>
    <div class="flex items-center gap-3">
@@ -219,80 +297,107 @@
          onclick={openFailures}
        >실패 {totalFailed}건 처리</button>
      {/if}
-      {#if spark}
-        <div class="flex items-center gap-2 text-[10px] text-faint tabular-nums" title="요약(summarize) 단계 24시간 — 유입(회색) vs 소화(녹색)">
-          <svg width="120" height="24" viewBox="0 0 120 24" class="block">
-            <polyline points={spark.inflow} fill="none" stroke="currentColor" stroke-width="1.5" class="text-faint" />
-            <polyline points={spark.done} fill="none" stroke="currentColor" stroke-width="1.5" class="text-success" />
-          </svg>
-          <span>요약 24h 유입/소화</span>
-        </div>
-      {/if}
+      <span class="flex items-center gap-1.5 text-[10px] tabular-nums {stale ? 'text-warning' : 'text-faint'}" title="60초 폴링">
+        <span class="w-1.5 h-1.5 rounded-full {stale ? 'bg-warning' : 'bg-success'}"></span>
+        {freshLabel}{#if stale} · 갱신 지연{/if}
+      </span>
    </div>
  </div>

-  <!-- 머신 스트립 -->
-  <div class="flex flex-wrap gap-2 mb-3">
-    {#each machineStrip as m (m.key)}
-      <div class="flex items-center gap-2 bg-surface border border-default rounded-full px-3.5 py-1.5 text-xs">
-        <span class="w-2 h-2 rounded-full shrink-0 {m.state === 'active' ? 'bg-success' : m.state === 'deferred' ? 'bg-warning' : 'bg-faint'}"></span>
-        <span class="font-bold text-text">{m.meta?.label ?? m.label}</span>
-        <span class="text-[10px] text-faint font-mono">{m.meta?.model}</span>
-        <span class="text-[11px] text-dim tabular-nums">{formatRate(m.done_1h)}/h</span>
-        {#if m.key === 'macbook' && m.deferred_pending > 0}
-          <span class="text-[10px] font-semibold text-warning tabular-nums">보류 {m.deferred_pending}</span>
-        {/if}
+  <!-- 지배 백로그 스트립 (요약) + 정직 ETA -->
+  <div class="flex items-center flex-wrap gap-x-3 gap-y-1 bg-surface border border-warning/50 rounded-card px-3.5 py-2 mb-3">
+    <span class="text-[9px] font-bold text-warning border border-warning/60 rounded-full px-2 py-px">지배 백로그</span>
+    <span class="text-xs font-bold text-text">요약</span>
+    <span class="text-[11px] text-dim tabular-nums">대기 <b class="text-text">{eta.pending.toLocaleString()}</b> · 순소화 <b class="text-text">{formatRate(eta.done_rate_1h)}</b>/h · 유입 {formatRate(eta.inflow_rate_1h)}/h</span>
+    <span class="ml-auto flex items-center gap-1.5 border rounded-full px-2.5 py-0.5 {honestEtaWarn ? 'border-warning text-warning' : 'border-accent text-accent'}">
+      <span class="text-[10px] font-semibold">정직 ETA</span>
+      <span class="text-xs font-bold tabular-nums">{honestEtaLabel}</span>
+    </span>
+  </div>
+
+  <!-- 머신 레인 (누가 일하나 + 요약 오프로드) -->
+  <div class="grid gap-2 mb-3">
+    {#each lanes as lane (lane.key)}
+      <div class="bg-surface border border-default rounded-card px-3.5 py-2.5">
+        <div class="flex items-center gap-2 flex-wrap mb-2">
+          <span class="w-2 h-2 rounded-full shrink-0 {dotClass(lane.card?.state ?? 'idle')}"></span>
+          <span class="text-[9px] font-bold rounded px-1.5 py-px mtag-{lane.key}">{lane.meta.label}</span>
+          <span class="text-[10px] text-faint font-mono">{lane.meta.model}</span>
+          <span class="text-[11px] text-dim tabular-nums ml-1">{formatRate(lane.card?.done_1h ?? 0)}/h</span>
+          {#if lane.key === 'macbook' && (lane.card?.deferred_pending ?? 0) > 0}
+            <span class="text-[10px] font-semibold text-warning tabular-nums">보류 {lane.card?.deferred_pending}</span>
+          {/if}
+          {#if lane.card?.state === 'deferred'}
+            <span class="text-[9px] text-warning">잠듦 — 요약은 맥미니로 복귀</span>
+          {/if}
+        </div>
+        <div class="flex items-stretch gap-1.5 flex-wrap">
+          {#each lane.nodes as n (n.def.key)}
+            {@const idle = n.pending + n.processing + n.doneToday + n.failed === 0}
+            <button
+              class="relative text-left rounded-lg border px-2.5 py-1.5 transition-colors cursor-pointer hover:bg-surface-hover min-w-[96px]
+                {idle ? 'border-dashed border-default opacity-55' : n.inflowDominant ? 'border-warning' : 'border-default'}
+                {selected === n.def.key ? 'node-sel' : ''}"
+              onclick={() => toggleNode(n.def.key)}
+              title="{n.def.label} — 클릭하면 상세"
+            >
+              {#if n.failed > 0}
+                <span class="absolute -top-1.5 -right-1 text-[9px] font-extrabold bg-error text-white rounded-full px-1.5">{n.failed}</span>
+              {/if}
+              <div class="flex items-center gap-1 text-[11px] font-semibold text-text whitespace-nowrap">
+                {n.def.label}
+                {#if n.processing > 0}<span class="inline-block w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>{/if}
+              </div>
+              <div class="text-sm font-extrabold tabular-nums leading-tight text-text">{n.pending.toLocaleString()}<span class="text-[9px] text-faint font-normal ml-0.5">대기</span></div>
+              <div class="text-[9px] text-dim tabular-nums whitespace-nowrap">{formatRate(n.done1h)}/h · 오늘 {n.doneToday.toLocaleString()}</div>
+              {#if n.def.key === 'summarize'}
+                <div class="mt-1 h-1 w-full rounded-full overflow-hidden flex" title="맥미니 {split.macmini.done_1h}/h · 맥북 {split.macbook.done_1h}/h">
+                  <span class="block h-full mtag-macmini-bar" style="width:{100 - macbookSharePct}%"></span>
+                  <span class="block h-full mtag-macbook-bar" style="width:{macbookSharePct}%"></span>
+                </div>
+                <div class="text-[9px] text-faint tabular-nums whitespace-nowrap mt-0.5">맥미니 {split.macmini.done_1h} · 맥북 {split.macbook.done_1h}/h</div>
+              {/if}
+            </button>
+          {/each}
+          {#if lane.key === 'macbook' && offloadActive}
+            <button
+              class="text-left rounded-lg border border-dashed border-warning/50 px-2.5 py-1.5 cursor-pointer hover:bg-surface-hover min-w-[96px]"
+              onclick={() => toggleNode('summarize')}
+              title="맥북이 요약을 맥미니에서 가져와 처리 중"
+            >
+              <div class="flex items-center gap-1 text-[11px] font-semibold text-text whitespace-nowrap">요약 합류 <span class="text-[8px] font-bold text-warning">OFFLOAD</span></div>
+              <div class="text-sm font-extrabold tabular-nums leading-tight text-text">{split.macbook.done_1h}<span class="text-[9px] text-faint font-normal ml-0.5">/h</span></div>
+              <div class="text-[9px] text-dim tabular-nums whitespace-nowrap">요약의 {macbookSharePct}% 담당</div>
+            </button>
+          {/if}
+        </div>
      </div>
    {/each}
  </div>

-  <!-- 흐름 노드 — pt/px 헤드룸 = 실패 뱃지(-top/-right 돌출)가 스크롤 컨테이너에 잘리지 않게 -->
-  <div class="flex items-stretch overflow-x-auto pt-2.5 pb-1 px-2 -mx-2">
-    {#each mainNodes as n, i (n.def.key)}
-      {#if i > 0}
-        <div class="flex items-center text-faint text-sm px-1.5 shrink-0" aria-hidden="true">→</div>
-      {/if}
-      <div
-        class="relative bg-surface border-[1.5px] rounded-card px-3 py-2.5 min-w-[124px] shrink-0 text-left transition-colors cursor-pointer hover:bg-surface-hover
-          {n.inflowDominant ? 'border-warning' : n.etaMinutes != null && n.def.stages.includes('chunk') ? 'border-success' : 'border-default'}
-          {selected === n.def.key ? 'node-sel' : ''}"
-        role="button"
-        tabindex="0"
-        onclick={() => toggleNode(n.def.key)}
-        onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleNode(n.def.key); } }}
-        title="{n.def.label} — 클릭하면 상세"
-      >
-        {#if n.failed > 0}
-          <button
-            class="absolute -top-2 -right-1.5 text-[9px] font-extrabold bg-error text-white rounded-full px-1.5 py-px shadow cursor-pointer"
-            onclick={(e) => { e.stopPropagation(); openFailures(); }}
-            title="실패 {n.failed}건 — 클릭하면 실패 처리"
-          >{n.failed}</button>
-        {/if}
-        <span class="inline-block text-[9px] font-bold rounded px-1.5 py-px mb-1.5 mtag-{n.def.machine}">
-          {MACHINE_META[n.def.machine].label} · {n.def.engine}
-        </span>
-        <div class="text-xs font-bold text-text flex items-center gap-1.5">
-          {n.def.label}
-          {#if n.processing > 0}
-            <span class="inline-block w-1.5 h-1.5 rounded-full bg-accent animate-pulse" title="처리 중 {n.processing}"></span>
-          {/if}
-          {#if n.inflowDominant}
-            <span class="text-[9px] font-bold text-warning">유입 우세</span>
-          {/if}
-        </div>
-        <div class="text-base font-extrabold tabular-nums tracking-tight leading-tight mt-0.5 text-text">
-          {n.pending.toLocaleString()}
-        </div>
-        <div class="text-[10px] text-dim tabular-nums">
-          {formatRate(n.done1h)}/h · 오늘 {n.doneToday.toLocaleString()}
-          {#if n.etaMinutes != null && !n.inflowDominant && n.pending > 0}
-            · <span class="text-accent font-semibold">{etaShort(n.etaMinutes)}</span>
-          {/if}
-        </div>
+  <!-- 번다운 / ETA 패널 -->
+  {#if burn}
+    <div class="bg-surface border border-default rounded-card px-3.5 py-3 mb-1">
+      <div class="flex items-center gap-2 mb-2">
+        <span class="text-[11px] font-bold text-text">요약 백로그 24시간</span>
+        <span class="text-[9px] text-faint">유입(회색) vs 소화(녹색)</span>
+        {#if offloadActive}<span class="text-[9px] text-warning ml-auto">맥북 합류 {burn.markHour} — 소화 급증</span>{/if}
      </div>
-    {/each}
-  </div>
+      <svg viewBox="0 0 {burn.w} {burn.h}" class="block w-full" style="height:64px" preserveAspectRatio="none" role="img" aria-label="요약 백로그 24시간 번다운">
+        <polygon points={burn.area} fill="currentColor" class="text-success" opacity="0.12" />
+        <polyline points={burn.inflowLine} fill="none" stroke="currentColor" stroke-width="1.2" class="text-faint" />
+        <polyline points={burn.doneLine} fill="none" stroke="currentColor" stroke-width="1.6" class="text-success" />
+        {#if offloadActive}
+          <line x1={burn.markX} y1="0" x2={burn.markX} y2={burn.h} stroke="currentColor" stroke-width="1" stroke-dasharray="2 2" class="text-warning" opacity="0.7" />
+        {/if}
+      </svg>
+      <div class="flex flex-wrap gap-x-4 gap-y-1 mt-2 pt-2 border-t border-default text-[10px] text-dim tabular-nums">
+        {#each mainNodes.filter((n) => n.pending > 0 && n.def.key !== 'summarize') as n (n.def.key)}
+          <span class="whitespace-nowrap">{n.def.label} 대기 <b class="text-text">{n.pending.toLocaleString()}</b>{#if netEtaLabel(n)} · <span class="text-accent font-semibold">{netEtaLabel(n)}</span>{/if}</span>
+        {/each}
+      </div>
+    </div>
+  {/if}

  <!-- 보조 라인 -->
  <p class="text-[10px] text-faint mt-1.5 tabular-nums">
@@ -413,6 +518,9 @@
  .mtag-gpu { background: #e7eef6; color: #3b6ea5; }
  .mtag-macmini { background: #efe9f7; color: #8a5fbf; }
  .mtag-macbook { background: #f7eedd; color: #b07a10; }
+  /* 요약 오프로드 분담 막대 채움 (맥미니 보라 / 맥북 황) */
+  .mtag-macmini-bar { background: #8a5fbf; }
+  .mtag-macbook-bar { background: #b07a10; }
  .node-sel { outline: 2px solid #3b6ea5; outline-offset: 1px; }
  .detail-frame { border-color: #3b6ea5; }
  .detail-head { background: #e7eef6; }
@@ -43,14 +43,17 @@
  {@const open = selectedId === s.chunk_id}
  {@const active = activeKey != null && activeKey === s.chunk_id}
  {@const typeLabel = sectionTypeLabel(s.section_type)}
+  {@const depth = Math.max(0, (s.level ?? 1) - 1)}
  <li>
    <button
      type="button"
      onclick={() => { toggle(item); onJump?.(s.chunk_id); }}
      aria-expanded={open}
      aria-current={active ? 'true' : undefined}
+      style="padding-left:{8 + depth * 13}px"
      class={[
-        'w-full text-left px-2 py-1.5 rounded-md text-xs flex items-start gap-1.5 transition-colors border-l-2',
+        'w-full text-left pr-2 py-1.5 rounded-md text-xs flex items-start gap-1.5 transition-colors border-l-2',
+        depth > 0 ? 'text-[11px]' : '',
        open ? 'bg-surface-active text-text border-accent' : active ? 'bg-surface text-accent-hover border-accent' : 'text-dim hover:bg-surface hover:text-text border-transparent',
      ].join(' ')}
    >
@@ -17,6 +17,11 @@ let pollHandle: ReturnType<typeof setInterval> | null = null;
 let subscriberCount = 0;
 let inFlight: Promise<void> | null = null;

+// 마지막 성공 갱신 시각(epoch ms) — 보드 신선도 '갱신 N초 전' + stale 경고용
+// (ds-board-merged B-4). 실패(null 수렴) 시엔 갱신 안 함 → age 가 늘어 stale 로 드러남.
+const updatedAt = writable<number | null>(null);
+export const queueUpdatedAt = { subscribe: updatedAt.subscribe };
+
 const internal = writable<QueueOverview | null>(null, (_set) => {
  subscriberCount += 1;
  if (subscriberCount === 1 && browser) {
@@ -54,7 +59,9 @@ export async function refreshQueueOverview(): Promise<void> {
  if (inFlight) return inFlight;
  inFlight = (async () => {
    try {
-      internal.set(await fetchOverview());
+      const ov = await fetchOverview();
+      internal.set(ov);
+      if (ov) updatedAt.set(Date.now()); // 성공 시에만 신선도 갱신 (실패=stale 유지)
    } finally {
      inFlight = null;
    }
@@ -43,13 +43,19 @@ export interface SummarizeEta {
  eta_minutes: number | null;
 }

-/** 시간당 유입 vs 소화 (이번 트랙 미렌더 — 후속 추세 위젯 슬롯) */
+/** 시간당 유입 vs 소화 (요약 24h 추이) */
 export interface TrendPoint {
  hour: string;
  inflow: number;
  done: number;
 }

+/** summarize 머신별 완료 실적 분담 (오프로드 가시화 — ds-board-merged A-1) */
+export interface SummarizeByMachine {
+  macmini: { done_1h: number; done_today: number };
+  macbook: { done_1h: number; done_today: number };
+}
+
 export interface QueueTotals {
  pending: number;
  processing: number;
@@ -72,6 +78,7 @@ export interface QueueStageRow {
 export interface QueueOverview {
  machines: MachineOverview[];
  summarize_eta: SummarizeEta;
+  summarize_by_machine: SummarizeByMachine;
  trend_24h: TrendPoint[];
  stages: QueueStageRow[];
  totals: QueueTotals;
@@ -30,7 +30,6 @@
  import AnalysisPanel from '$lib/components/AnalysisPanel.svelte';
  import ReadCounter from '$lib/components/ReadCounter.svelte';
  import SectionOutline from '$lib/components/SectionOutline.svelte';
-  import Tabs from '$lib/components/ui/Tabs.svelte';

  marked.use({ mangle: false, headerIds: false });
  function renderMd(text) {
@@ -460,53 +459,68 @@
        {/if}
      </div>

-      <!-- 오른쪽 — 메타 Tabs [정보 | AI | 관리] (카드 11개 수직 스프롤 해소) -->
-      <aside class="min-w-0">
-        <Card>
-          <Tabs
-            tabs={[
-              { id: 'info', label: '정보' },
-              { id: 'ai', label: 'AI' },
-              { id: 'manage', label: '관리' },
-            ]}
-          >
-            {#snippet children(tab)}
-              <div class="pt-3 space-y-4">
-                {#if tab === 'info'}
-                  {#if doc.category === 'library'}
-                    <ReadCounter
-                      documentId={doc.id}
-                      initialCount={doc.read_count ?? 0}
-                      initialLastReadAt={doc.last_read_at ?? null}
-                    />
-                  {/if}
-                  <FileInfoView {doc} />
-                  <ProcessingStatusView {doc} />
-                {:else if tab === 'ai'}
-                  <AnalysisPanel docId={doc.id} doc={doc} />
-                  <AIClassificationEditor {doc} />
-                  <div>
-                    <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">관련 문서</h4>
-                    <!-- TODO(backend): GET /documents/{id}/related?limit=10 (벡터 유사도) -->
-                    <EmptyState
-                      icon={FileText}
-                      title="추후 지원"
-                      description="관련 문서 추천은 backend 연동 후 제공됩니다."
-                    />
-                  </div>
-                {:else}
-                  <LibraryPathEditor {doc} />
-                  <NoteEditor {doc} />
-                  <EditUrlEditor {doc} />
-                  <TagsEditor {doc} />
-                  <div class="pt-2 border-t border-default">
-                    <DocumentDangerZone {doc} ondelete={handleDocDelete} />
-                  </div>
-                {/if}
-              </div>
-            {/snippet}
-          </Tabs>
-        </Card>
+      <!-- 오른쪽 — 슬림 전역 인사이트 레일 (D3: 탭 게이트 제거, 요약·심층·불일치 상시 노출).
+           정보/관리는 접이(<details>) — 데스크탑은 인사이트 상시, 모바일은 본문 메인 + 열어서 확인. -->
+      <aside class="min-w-0 space-y-3">
+        {#if doc.category === 'library'}
+          <Card>
+            <ReadCounter
+              documentId={doc.id}
+              initialCount={doc.read_count ?? 0}
+              initialLastReadAt={doc.last_read_at ?? null}
+            />
+          </Card>
+        {/if}
+
+        <!-- 요약·분석 — 기본 펼침(데스크탑 상시감, 모바일 접기 가능) -->
+        <details open class="bg-surface border border-default rounded-card overflow-hidden group">
+          <summary class="cursor-pointer list-none flex items-center justify-between px-3.5 py-2.5 text-xs font-semibold text-dim uppercase tracking-wide select-none">
+            <span>요약 · 분석</span>
+            <ChevronRight size={14} class="transition-transform group-open:rotate-90 text-faint" />
+          </summary>
+          <div class="px-3.5 pb-3.5 space-y-4">
+            <AnalysisPanel docId={doc.id} doc={doc} />
+            <AIClassificationEditor {doc} />
+            <div>
+              <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">관련 문서</h4>
+              <!-- TODO(backend): GET /documents/{id}/related?limit=10 (벡터 유사도) — v1 제외(자리만) -->
+              <EmptyState
+                icon={FileText}
+                title="추후 지원"
+                description="관련 문서 추천은 backend 연동 후 제공됩니다."
+              />
+            </div>
+          </div>
+        </details>
+
+        <!-- 문서 정보 — 접이(기본 닫힘) -->
+        <details class="bg-surface border border-default rounded-card overflow-hidden group">
+          <summary class="cursor-pointer list-none flex items-center justify-between px-3.5 py-2.5 text-xs font-semibold text-dim uppercase tracking-wide select-none">
+            <span>문서 정보</span>
+            <ChevronRight size={14} class="transition-transform group-open:rotate-90 text-faint" />
+          </summary>
+          <div class="px-3.5 pb-3.5 space-y-3">
+            <FileInfoView {doc} />
+            <ProcessingStatusView {doc} />
+          </div>
+        </details>
+
+        <!-- 관리 — 접이(기본 닫힘) -->
+        <details class="bg-surface border border-default rounded-card overflow-hidden group">
+          <summary class="cursor-pointer list-none flex items-center justify-between px-3.5 py-2.5 text-xs font-semibold text-dim uppercase tracking-wide select-none">
+            <span>관리</span>
+            <ChevronRight size={14} class="transition-transform group-open:rotate-90 text-faint" />
+          </summary>
+          <div class="px-3.5 pb-3.5 space-y-3">
+            <LibraryPathEditor {doc} />
+            <NoteEditor {doc} />
+            <EditUrlEditor {doc} />
+            <TagsEditor {doc} />
+            <div class="pt-2 border-t border-default">
+              <DocumentDangerZone {doc} ondelete={handleDocDelete} />
+            </div>
+          </div>
+        </details>
      </aside>
    </div>

@@ -103,6 +103,32 @@ def test_summarize_pool_split_attribution():
    assert macbook["pending"] == 0              # 풀 pending 은 macmini 만


+def test_summarize_by_machine_projection():
+    """build_summarize_by_machine = split 의 done_1h/done_today 를 머신별로 투영
+    (done_15m 은 제외 — 내부 state 판정 전용)."""
+    from services.queue_overview import build_summarize_by_machine
+    split = _split(
+        macbook={"done_1h": 226, "done_today": 312, "done_15m": 60},
+        macmini={"done_1h": 37, "done_today": 94, "done_15m": 9},
+    )
+    sbm = build_summarize_by_machine(split)
+    assert sbm == {
+        "macmini": {"done_1h": 37, "done_today": 94},
+        "macbook": {"done_1h": 226, "done_today": 312},
+    }
+    assert "done_15m" not in sbm["macbook"]
+
+
+def test_compose_overview_includes_summarize_by_machine():
+    """compose_overview 응답 계약에 summarize_by_machine 포함 (FE 레인 분담 재료)."""
+    now_kst = datetime(2026, 6, 13, 13, 0, tzinfo=KST)
+    stats = {"summarize": _stage(pending=1317, done_1h=264)}
+    split = _split(macbook={"done_1h": 226, "done_today": 312}, macmini={"done_1h": 37, "done_today": 94})
+    ov = compose_overview(stats, split, {}, {}, [], deep_enabled=True, now_kst=now_kst)
+    assert ov["summarize_by_machine"]["macbook"]["done_1h"] == 226
+    assert ov["summarize_by_machine"]["macmini"]["done_today"] == 94
+
+
 def test_deep_disabled_deep_summary_counts_to_macmini():
    stats = {"deep_summary": _stage(pending=2, processing=1, done_1h=3, done_today=4)}
    machines = build_machines(stats, _split(), [], deep_enabled=False)
Author	SHA1	Message	Date
hyungi	540bc00dba	feat(docpage): D3 절 구조 탐색기 — 슬림 인사이트 레일 + 절 트리 (frontend only) 문서 상세 /documents/[id] 재구성 (BE 무변경): - 우측 탭(정보/AI/관리) → 슬림 전역 인사이트 레일: 요약·심층·불일치를 탭 게이트 없이 상시 노출(details open, 모바일은 접기 가능), 정보/관리는 접이. → 가공 자료가 탭/온디맨드에 묻히던 IA 문제(G1) 해소. - SectionOutline 절 목차 레벨 기반 들여쓰기(평탄→트리 모양). - 모바일: 본문 메인 + 절목차/인사이트/정보/관리 접이 + 절 탭 본문 이동(기존 구조 활용). 관련 문서(See Also)는 v1 제외(자리만 유지). 심화 목업 = comparisons/2026-06-13-ds-docpage-d3-deepened.html. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-06-13 15:18:15 +09:00
hyungi	30c235e4c1	Merge feat/safety-library-a1 (C-1 후속 version_status+facets) into ds-board-merged 검색 결과 wrapper decoration: 법령 version_status + facets 집계(ranking 무관·additive).	2026-06-13 15:08:24 +09:00
hyungi	cd439b0ff4	Merge feat/safety-library-a1 (B-4 licensed_restricted + watch 폴더 license) into ds-board-merged B-4 PR①②: licensed_restricted 단일 술어(retrieval 3-leg/digest/briefing/study 풀이 공유) + file_watcher Books/Manuals/Papers_Purchased license 주입. prod 통합 브랜치 배포용.	2026-06-13 14:53:34 +09:00
hyungi	595f4b7d5e	feat(board): 통합 보드 v3 — 머신 레인 + 정직 번다운/ETA (B-1·2·3·5) ProcessingFlowBoard 를 통합안으로 재작성: - 머신 3레인(GPU/맥미니/맥북) = "누가 일하나" + 요약 오프로드 가시화 (요약 칩 분담 막대 맥미니 vs 맥북 + 맥북 레인 '요약 합류' 칩, summarize_by_machine 소비) - 지배 백로그 스트립 + 정직 ETA(summarize_eta, 유입 차감 / null=소진 불가) - 24h 번다운 SVG(유입 vs 소화) + 맥북 합류 변곡점 + 단계별 정직 ETA 미니리스트 - 신선도 '갱신 N초 전' + stale 경고(queueUpdatedAt, B-4) - 실패 드로어 + 노드 상세 패널은 v2 자산 그대로 재사용 - 레인 stack + 칩 wrap 으로 모바일 반응형 svelte-check: 변경 파일 에러 0. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-06-13 14:01:50 +09:00
hyungi	b630c31077	feat(board): expose summarize_by_machine for offload visibility (A-1) 요약 풀의 머신별 완료 실적(맥미니 vs 맥북)을 /api/queue/overview 응답에 summarize_by_machine 로 노출. rows_to_summarize_split 이 이미 계산하던 값의 additive 투영 — 신규 수집 SQL/마이그 0. 통합 보드 레인의 오프로드 가시화 (맥북이 요약 86% 처리) 재료. + FE 타입 동기 + store 신선도 timestamp(B-4). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-06-13 13:54:39 +09:00