From 022719aaed835c2475c90561fc45294c473a8a45 Mon Sep 17 00:00:00 2001
From: Si Hyeong Lee <sihyeongdev@gmail.com>
Date: Thu, 4 Jun 2026 17:16:13 -0700
Subject: [PATCH] feat: live auto-refresh + cross-project "Next" view
 (DECK-11/14)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- DECK-11: shouldAutoRefresh (pure) + a 15s tick in the projects deck that
  reloads every 45s while it's the focused, active view (no background churn).
- DECK-14: new 📋 "Next" rail view aggregating each project's manual note
  (preferred) or auto resume cue into one "what's next" list, sorted by
  activity, each with an Open button. collectNextItems is pure + unit-tested.
- i18n nav.next / next.title / next.empty across all 4 locales. 101 tests.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 scripts/demo-capture.mjs       |  5 ++++
 src/renderer/index.html        |  2 ++
 src/renderer/locales/en.json   |  3 +++
 src/renderer/locales/ja.json   |  3 +++
 src/renderer/locales/ko.json   |  3 +++
 src/renderer/locales/zh.json   |  3 +++
 src/renderer/main.ts           |  7 ++++--
 src/renderer/nav.ts            |  2 +-
 src/renderer/nextView.ts       | 43 ++++++++++++++++++++++++++++++++++
 src/renderer/projectsView.ts   | 13 ++++++++++
 src/renderer/styles.css        |  9 +++++++
 src/shared/autoRefresh.test.ts | 22 +++++++++++++++++
 src/shared/autoRefresh.ts      | 16 +++++++++++++
 src/shared/nextItems.test.ts   | 35 +++++++++++++++++++++++++++
 src/shared/nextItems.ts        | 30 ++++++++++++++++++++++++
 15 files changed, 193 insertions(+), 3 deletions(-)
 create mode 100644 src/renderer/nextView.ts
 create mode 100644 src/shared/autoRefresh.test.ts
 create mode 100644 src/shared/autoRefresh.ts
 create mode 100644 src/shared/nextItems.test.ts
 create mode 100644 src/shared/nextItems.ts

diff --git a/scripts/demo-capture.mjs b/scripts/demo-capture.mjs
index a8e8f1a..ee7d1e5 100644
--- a/scripts/demo-capture.mjs
+++ b/scripts/demo-capture.mjs
@@ -54,6 +54,11 @@ await shot('demo-usage');
 // 5) settings
 await showView('settings');
 await shot('demo-settings');
+// 6) Next (cross-project "what's next") — set a note on one project so it mixes notes + cues
+await win.evaluate((p) => window.devdeck.setNote(p, 'ship the v0.3 release notes'), join(REPOS, 'acme-dashboard'));
+await showView('next');
+await win.waitForTimeout(500);
+await shot('demo-next');
 
 await app.close();
 console.log('done — qa/shots/demo-*.png');
diff --git a/src/renderer/index.html b/src/renderer/index.html
index 46c42aa..4ed37dc 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -29,6 +29,7 @@
         <button class="rail-item active" data-view="projects" title="Projects" aria-current="page" aria-label="Projects">📁</button>
         <button class="rail-item" data-view="usage" title="Usage" aria-label="Usage">📊</button>
         <button class="rail-item" data-view="settings" title="Settings" aria-label="Settings">⚙</button>
+        <button class="rail-item" data-view="next" title="Next" aria-label="Next">📋</button>
         <span class="rail-spacer"></span>
         <button id="lang-btn" class="rail-item" title="Language" aria-label="Language">🌐</button>
       </nav>
@@ -51,6 +52,7 @@
         </section>
         <section id="view-usage" class="view"></section>
         <section id="view-settings" class="view"><div id="settings-form"></div></section>
+        <section id="view-next" class="view"></section>
       </main>
     </div>
     <div id="toast-host" aria-live="assertive"></div>
diff --git a/src/renderer/locales/en.json b/src/renderer/locales/en.json
index a29fe51..bdc0ab5 100644
--- a/src/renderer/locales/en.json
+++ b/src/renderer/locales/en.json
@@ -5,6 +5,9 @@
   "nav.usage": "Usage",
   "nav.settings": "Settings",
   "nav.language": "Language",
+  "nav.next": "Next",
+  "next.title": "What's next across your projects",
+  "next.empty": "Nothing queued — add a note or open a session.",
   "proj.neglected_only": "Neglected only",
   "proj.hidden": "Hidden",
   "proj.no_branch": "(no branch)",
diff --git a/src/renderer/locales/ja.json b/src/renderer/locales/ja.json
index 5a8cc3b..5f6cd63 100644
--- a/src/renderer/locales/ja.json
+++ b/src/renderer/locales/ja.json
@@ -5,6 +5,9 @@
   "nav.usage": "使用量",
   "nav.settings": "設定",
   "nav.language": "言語",
+  "nav.next": "次に",
+  "next.title": "次にやること（全プロジェクト）",
+  "next.empty": "次のタスクはありません — ノートを追加するかセッションを開いてください。",
   "proj.neglected_only": "放置のみ",
   "proj.hidden": "非表示",
   "proj.no_branch": "(ブランチなし)",
diff --git a/src/renderer/locales/ko.json b/src/renderer/locales/ko.json
index fe05d27..ec40d8e 100644
--- a/src/renderer/locales/ko.json
+++ b/src/renderer/locales/ko.json
@@ -5,6 +5,9 @@
   "nav.usage": "사용량",
   "nav.settings": "설정",
   "nav.language": "언어",
+  "nav.next": "다음",
+  "next.title": "다음 할 일 (전체 프로젝트)",
+  "next.empty": "표시할 다음 할 일이 없습니다 — 노트를 추가하거나 세션을 여세요.",
   "proj.neglected_only": "방치만",
   "proj.hidden": "숨김",
   "proj.no_branch": "(브랜치 없음)",
diff --git a/src/renderer/locales/zh.json b/src/renderer/locales/zh.json
index 5e10973..1b1e780 100644
--- a/src/renderer/locales/zh.json
+++ b/src/renderer/locales/zh.json
@@ -5,6 +5,9 @@
   "nav.usage": "用量",
   "nav.settings": "设置",
   "nav.language": "语言",
+  "nav.next": "待办",
+  "next.title": "接下来要做的（所有项目）",
+  "next.empty": "暂无待办 — 添加备注或打开会话。",
   "proj.neglected_only": "仅显示搁置",
   "proj.hidden": "已隐藏",
   "proj.no_branch": "（无分支）",
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index 246d09a..b35d1fd 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -2,6 +2,7 @@ import { mountProjects, renderProjects, reloadProjects } from './projectsView';
 import { mountNav } from './nav';
 import { mountUsage, showUsage } from './usageView';
 import { mountSettings, showSettings } from './settingsView';
+import { mountNext, showNext } from './nextView';
 import { setLanguage, tr, currentLang, SUPPORTED } from './i18n-runtime';
 
 const toastHost = document.getElementById('toast-host')!;
@@ -16,7 +17,7 @@ function applyStaticLabels(): void {
   const refreshBtn = document.querySelector<HTMLButtonElement>('#refresh')!;
   refreshBtn.title = tr('app.refresh');
   refreshBtn.setAttribute('aria-label', tr('app.refresh'));
-  const map: [string, string][] = [['[data-view="projects"]', 'nav.projects'], ['[data-view="usage"]', 'nav.usage'], ['[data-view="settings"]', 'nav.settings'], ['#lang-btn', 'nav.language']];
+  const map: [string, string][] = [['[data-view="projects"]', 'nav.projects'], ['[data-view="usage"]', 'nav.usage'], ['[data-view="settings"]', 'nav.settings'], ['[data-view="next"]', 'nav.next'], ['#lang-btn', 'nav.language']];
   for (const [sel, key] of map) { const el = document.querySelector<HTMLElement>(sel); if (el) { el.title = tr(key); el.setAttribute('aria-label', tr(key)); } }
   const chk = document.querySelector('#view-projects .chk');
   if (chk?.lastChild) chk.lastChild.textContent = ' ' + tr('proj.neglected_only');
@@ -43,7 +44,8 @@ async function boot(): Promise<void> {
   mountProjects();
   mountUsage();
   mountSettings(() => { applyStaticLabels(); reloadProjects(); });
-  mountNav((view) => { if (view === 'usage') showUsage(); if (view === 'settings') showSettings(); });
+  mountNext();
+  mountNav((view) => { if (view === 'usage') showUsage(); if (view === 'settings') showSettings(); if (view === 'next') showNext(); });
 
   document.getElementById('lang-btn')!.addEventListener('click', async () => {
     const i = SUPPORTED.indexOf(currentLang());
@@ -54,6 +56,7 @@ async function boot(): Promise<void> {
     renderProjects();
     if (document.getElementById('view-usage')!.classList.contains('active')) showUsage();
     if (document.getElementById('view-settings')!.classList.contains('active')) showSettings();
+    if (document.getElementById('view-next')!.classList.contains('active')) showNext();
   });
 }
 
diff --git a/src/renderer/nav.ts b/src/renderer/nav.ts
index 2198654..0cc893d 100644
--- a/src/renderer/nav.ts
+++ b/src/renderer/nav.ts
@@ -1,7 +1,7 @@
 export function mountNav(onShow: (view: string) => void): void {
   const items = Array.from(document.querySelectorAll<HTMLButtonElement>('.rail-item[data-view]'));
   const views = new Map<string, HTMLElement>();
-  for (const id of ['projects', 'usage', 'settings']) views.set(id, document.getElementById('view-' + id)!);
+  for (const id of ['projects', 'usage', 'settings', 'next']) views.set(id, document.getElementById('view-' + id)!);
   function show(view: string): void {
     for (const it of items) {
       const isActive = it.dataset.view === view;
diff --git a/src/renderer/nextView.ts b/src/renderer/nextView.ts
new file mode 100644
index 0000000..8617134
--- /dev/null
+++ b/src/renderer/nextView.ts
@@ -0,0 +1,43 @@
+import { tr } from './i18n-runtime';
+import { collectNextItems, type NextItem } from '../shared/nextItems';
+
+let viewEl: HTMLElement;
+
+async function load(): Promise<void> {
+  const projects = await window.devdeck.listProjects();
+  render(collectNextItems(projects));
+}
+
+function render(items: NextItem[]): void {
+  viewEl.replaceChildren();
+
+  const head = document.createElement('div'); head.className = 'next-head';
+  head.textContent = `${tr('next.title')} · ${items.length}`;
+  viewEl.appendChild(head);
+
+  if (items.length === 0) {
+    const e = document.createElement('div'); e.className = 'empty'; e.textContent = tr('next.empty');
+    viewEl.appendChild(e);
+    return;
+  }
+
+  const list = document.createElement('div'); list.className = 'next-list'; list.setAttribute('role', 'list');
+  for (const it of items) {
+    const row = document.createElement('div'); row.className = 'next-row'; row.setAttribute('role', 'listitem');
+    const main = document.createElement('div'); main.className = 'next-main';
+    const name = document.createElement('span'); name.className = 'next-name'; name.textContent = it.name;
+    const text = document.createElement('span');
+    text.className = 'next-text' + (it.kind === 'cue' ? ' next-text--cue' : '');
+    text.textContent = (it.kind === 'cue' ? '↩ ' : '') + it.text;
+    text.title = it.text;
+    main.append(name, text);
+    const open = document.createElement('button'); open.className = 'primary'; open.textContent = '▶ ' + tr('proj.open');
+    open.addEventListener('click', () => window.devdeck.open([{ path: it.path, sessionId: null }]));
+    row.append(main, open);
+    list.appendChild(row);
+  }
+  viewEl.appendChild(list);
+}
+
+export function mountNext(): void { viewEl = document.getElementById('view-next')!; }
+export function showNext(): void { void load(); }
diff --git a/src/renderer/projectsView.ts b/src/renderer/projectsView.ts
index a9d4d19..00c4377 100644
--- a/src/renderer/projectsView.ts
+++ b/src/renderer/projectsView.ts
@@ -1,4 +1,7 @@
 import { tr, localeTag } from './i18n-runtime';
+import { shouldAutoRefresh } from '../shared/autoRefresh';
+
+const AUTO_REFRESH_MS = 45_000;
 
 type ProjectViewModel = Awaited<ReturnType<Window['devdeck']['listProjects']>>[number];
 
@@ -348,6 +351,16 @@ export function mountProjects(): void {
   window.addEventListener('focus', () => {
     if (document.getElementById('view-projects')!.classList.contains('active') && Date.now() - lastLoadMs > 10_000) reload();
   });
+  // Keep the always-open deck live: periodically re-scan while it is the focused, active view.
+  setInterval(() => {
+    if (shouldAutoRefresh({
+      now: Date.now(),
+      lastLoadMs,
+      intervalMs: AUTO_REFRESH_MS,
+      viewActive: document.getElementById('view-projects')!.classList.contains('active'),
+      windowFocused: document.hasFocus(),
+    })) reload();
+  }, 15_000);
   document.addEventListener('click', () => {
     document.querySelectorAll('.menu:not(.hidden)').forEach((m) => {
       m.classList.add('hidden');
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 0075605..45a629c 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -124,6 +124,15 @@ button.primary:hover { background: var(--accent-hover); }
 .cardfoot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
 .cardfoot .spacer { flex: 1; }
 
+.next-head { padding: 14px 16px 8px; font-size: 14px; font-weight: 600; color: var(--text); }
+.next-list { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 16px; }
+.next-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
+.next-row:hover { background: var(--surface-hover); border-color: var(--border-strong); }
+.next-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.next-name { font-size: 13px; font-weight: 600; color: var(--text); }
+.next-text { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.next-text--cue { color: var(--text-faint); }
+
 #toast-host { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
 .toast { background: #2a1416; border: 1px solid #5c1a1a; color: #f3d6d6; padding: 10px 14px; border-radius: 8px; font-size: 13px; max-width: 360px; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
 
diff --git a/src/shared/autoRefresh.test.ts b/src/shared/autoRefresh.test.ts
new file mode 100644
index 0000000..bc4247e
--- /dev/null
+++ b/src/shared/autoRefresh.test.ts
@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest';
+import { shouldAutoRefresh } from './autoRefresh';
+
+const base = { now: 100_000, lastLoadMs: 0, intervalMs: 45_000, viewActive: true, windowFocused: true };
+
+describe('shouldAutoRefresh', () => {
+  it('refreshes when active, focused, and the interval has elapsed', () => {
+    expect(shouldAutoRefresh(base)).toBe(true);
+  });
+  it('does not refresh too soon', () => {
+    expect(shouldAutoRefresh({ ...base, now: 10_000 })).toBe(false);
+  });
+  it('does not refresh when the view is inactive', () => {
+    expect(shouldAutoRefresh({ ...base, viewActive: false })).toBe(false);
+  });
+  it('does not refresh when the window is unfocused', () => {
+    expect(shouldAutoRefresh({ ...base, windowFocused: false })).toBe(false);
+  });
+  it('refreshes exactly at the interval boundary', () => {
+    expect(shouldAutoRefresh({ ...base, now: 45_000, lastLoadMs: 0 })).toBe(true);
+  });
+});
diff --git a/src/shared/autoRefresh.ts b/src/shared/autoRefresh.ts
new file mode 100644
index 0000000..948b6d0
--- /dev/null
+++ b/src/shared/autoRefresh.ts
@@ -0,0 +1,16 @@
+export interface AutoRefreshCtx {
+  now: number;
+  lastLoadMs: number;
+  intervalMs: number;
+  viewActive: boolean;
+  windowFocused: boolean;
+}
+
+/**
+ * Whether the projects deck should auto-reload on this tick: only when it is the
+ * active view AND the window is focused (don't churn in the background) AND at
+ * least intervalMs has passed since the last load.
+ */
+export function shouldAutoRefresh(c: AutoRefreshCtx): boolean {
+  return c.viewActive && c.windowFocused && c.now - c.lastLoadMs >= c.intervalMs;
+}
diff --git a/src/shared/nextItems.test.ts b/src/shared/nextItems.test.ts
new file mode 100644
index 0000000..a236f97
--- /dev/null
+++ b/src/shared/nextItems.test.ts
@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { collectNextItems } from './nextItems';
+
+type Src = Parameters<typeof collectNextItems>[0][number];
+const s = (over: Partial<Src> = {}): Src =>
+  ({ path: '/p', name: 'p', note: '', resumeCue: null, hidden: false, activityMs: 0, ...over });
+
+describe('collectNextItems', () => {
+  it('uses the manual note when present (trimmed)', () => {
+    expect(collectNextItems([s({ name: 'a', note: '  fix the bug  ' })]))
+      .toEqual([{ path: '/p', name: 'a', text: 'fix the bug', kind: 'note' }]);
+  });
+
+  it('falls back to the resume cue when there is no note', () => {
+    expect(collectNextItems([s({ name: 'b', resumeCue: { kind: 'lastMessage', text: 'do X' } })]))
+      .toEqual([{ path: '/p', name: 'b', text: 'do X', kind: 'cue' }]);
+  });
+
+  it('prefers a note over a cue', () => {
+    const out = collectNextItems([s({ note: 'note wins', resumeCue: { kind: 'lastMessage', text: 'cue' } })]);
+    expect(out[0]).toMatchObject({ text: 'note wins', kind: 'note' });
+  });
+
+  it('skips projects with neither, and hidden projects', () => {
+    expect(collectNextItems([s({ note: '', resumeCue: null }), s({ hidden: true, note: 'x' })])).toEqual([]);
+  });
+
+  it('sorts by activity, most recent first', () => {
+    const out = collectNextItems([
+      s({ name: 'old', note: 'o', activityMs: 1 }),
+      s({ name: 'new', note: 'n', activityMs: 9 }),
+    ]);
+    expect(out.map((i) => i.name)).toEqual(['new', 'old']);
+  });
+});
diff --git a/src/shared/nextItems.ts b/src/shared/nextItems.ts
new file mode 100644
index 0000000..54887b8
--- /dev/null
+++ b/src/shared/nextItems.ts
@@ -0,0 +1,30 @@
+import type { ProjectViewModel } from './types';
+
+export interface NextItem {
+  path: string;
+  name: string;
+  text: string;
+  kind: 'note' | 'cue';
+}
+
+type NextSource = Pick<ProjectViewModel, 'path' | 'name' | 'note' | 'resumeCue' | 'hidden' | 'activityMs'>;
+
+/**
+ * Cross-project "what's next" list: each visible project's manual note (preferred)
+ * or, if it has none, its auto resume cue. Projects with neither are omitted.
+ * Sorted by recent activity.
+ */
+export function collectNextItems(projects: NextSource[]): NextItem[] {
+  const items: (NextItem & { activityMs: number | null })[] = [];
+  for (const p of projects) {
+    if (p.hidden) continue;
+    const note = (p.note ?? '').trim();
+    if (note) {
+      items.push({ path: p.path, name: p.name, text: note, kind: 'note', activityMs: p.activityMs });
+    } else if (p.resumeCue) {
+      items.push({ path: p.path, name: p.name, text: p.resumeCue.text, kind: 'cue', activityMs: p.activityMs });
+    }
+  }
+  items.sort((a, b) => (b.activityMs ?? -Infinity) - (a.activityMs ?? -Infinity));
+  return items.map((i) => ({ path: i.path, name: i.name, text: i.text, kind: i.kind }));
+}