beads-ui 0.1.0

package/app/main.js

@@ -0,0 +1,280 @@
+import { html, render } from 'lit-html';
+import { createDataLayer } from './data/providers.js';
+import { createHashRouter } from './router.js';
+import { createStore } from './state.js';
+import { createBoardView } from './views/board.js';
+import { createDetailView } from './views/detail.js';
+import { createEpicsView } from './views/epics.js';
+import { createListView } from './views/list.js';
+import { createTopNav } from './views/nav.js';
+import { createWsClient } from './ws.js';
+
+/**
+ * Bootstrap the SPA shell with two panels.
+ * @param {HTMLElement} root_element - The container element to render into.
+ */
+export function bootstrap(root_element) {
+  // Render route shells (nav is mounted in header)
+  const shell = html`
+    <section id="issues-root" class="route issues">
+      <aside id="list-panel" class="panel"></aside>
+    </section>
+    <section id="epics-root" class="route epics" hidden></section>
+    <section id="board-root" class="route board" hidden></section>
+    <section id="detail-panel" class="route detail" hidden></section>
+  `;
+  render(shell, root_element);
+
+  /** @type {HTMLElement|null} */
+  const nav_mount = document.getElementById('top-nav');
+  /** @type {HTMLElement|null} */
+  const issues_root = document.getElementById('issues-root');
+  /** @type {HTMLElement|null} */
+  const epics_root = document.getElementById('epics-root');
+  /** @type {HTMLElement|null} */
+  const board_root = document.getElementById('board-root');
+
+  /** @type {HTMLElement|null} */
+  const list_mount = document.getElementById('list-panel');
+  /** @type {HTMLElement|null} */
+  const detail_mount = document.getElementById('detail-panel');
+  if (list_mount && issues_root && epics_root && board_root && detail_mount) {
+    const client = createWsClient();
+    // Load persisted filters (status/search/type) from localStorage
+    /** @type {{ status: 'all'|'open'|'in_progress'|'closed'|'ready', search: string, type: string }} */
+    let persistedFilters = { status: 'all', search: '', type: '' };
+    try {
+      const raw = window.localStorage.getItem('beads-ui.filters');
+      if (raw) {
+        const obj = JSON.parse(raw);
+        if (obj && typeof obj === 'object') {
+          const ALLOWED = ['bug', 'feature', 'task', 'epic', 'chore'];
+          /** @type {string} */
+          let parsed_type = '';
+          if (typeof obj.type === 'string' && ALLOWED.includes(obj.type)) {
+            parsed_type = obj.type;
+          } else if (Array.isArray(obj.types)) {
+            // Backwards compatibility: pick first valid from previous array format
+            /** @type {string} */
+            let first_valid = '';
+            for (const it of obj.types) {
+              if (ALLOWED.includes(String(it))) {
+                first_valid = /** @type {string} */ (it);
+                break;
+              }
+            }
+            parsed_type = first_valid;
+          }
+          persistedFilters = {
+            status: ['all', 'open', 'in_progress', 'closed', 'ready'].includes(
+              obj.status
+            )
+              ? obj.status
+              : 'all',
+            search: typeof obj.search === 'string' ? obj.search : '',
+            type: parsed_type
+          };
+        }
+      }
+    } catch {
+      // ignore parse errors
+    }
+    // Load last-view from storage
+    /** @type {'issues'|'epics'|'board'} */
+    let last_view = 'issues';
+    try {
+      const raw_view = window.localStorage.getItem('beads-ui.view');
+      if (
+        raw_view === 'issues' ||
+        raw_view === 'epics' ||
+        raw_view === 'board'
+      ) {
+        last_view = raw_view;
+      }
+    } catch {
+      // ignore
+    }
+    const store = createStore({ filters: persistedFilters, view: last_view });
+    const router = createHashRouter(store);
+    router.start();
+    /**
+     * @param {string} type
+     * @param {unknown} payload
+     */
+    const transport = async (type, payload) => {
+      try {
+        return await client.send(/** @type {any} */ (type), payload);
+      } catch {
+        return [];
+      }
+    };
+    // Top navigation (optional mount)
+    if (nav_mount) {
+      createTopNav(nav_mount, store, router);
+    }
+
+    const issues_view = createListView(
+      list_mount,
+      transport,
+      (hash) => {
+        const id = hash.replace('#/issue/', '');
+        if (id) {
+          router.gotoIssue(id);
+        }
+      },
+      store
+    );
+    // Persist filter changes to localStorage
+    store.subscribe((s) => {
+      try {
+        const data = {
+          status: s.filters.status,
+          search: s.filters.search,
+          type: typeof s.filters.type === 'string' ? s.filters.type : ''
+        };
+        window.localStorage.setItem('beads-ui.filters', JSON.stringify(data));
+      } catch {
+        // ignore
+      }
+    });
+    void issues_view.load();
+    const detail = createDetailView(detail_mount, transport, (hash) => {
+      const id = hash.replace('#/issue/', '');
+      if (id) {
+        router.gotoIssue(id);
+      }
+    });
+
+    // React to selectedId changes -> show detail page full-width
+    store.subscribe((s) => {
+      const id = s.selected_id;
+      if (id) {
+        void detail.load(id);
+      } else {
+        detail.clear();
+      }
+    });
+
+    // Initial deep-link: if router set a selectedId before subscription, load it now
+    const initialId = store.getState().selected_id;
+    if (initialId) {
+      void detail.load(initialId);
+    } else {
+      detail.clear();
+    }
+
+    // Refresh views on push updates (target minimally and avoid flicker)
+    client.on('issues-changed', (payload) => {
+      const s = store.getState();
+      const hintIds =
+        payload && payload.hint && Array.isArray(payload.hint.ids)
+          ? /** @type {string[]} */ (payload.hint.ids)
+          : null;
+
+      const showingDetail = Boolean(s.selected_id);
+
+      // If a top-level view is visible (and not detail), refresh that view
+      if (!showingDetail) {
+        if (s.view === 'issues') {
+          void issues_view.load();
+        } else if (s.view === 'epics') {
+          void epics_view.load();
+        } else if (s.view === 'board') {
+          void board_view.load();
+        }
+      }
+
+      // If a detail is visible, re-fetch it when relevant or when hints are absent
+      if (showingDetail && s.selected_id) {
+        if (!hintIds || hintIds.includes(s.selected_id)) {
+          void detail.load(s.selected_id);
+        }
+      }
+    });
+
+    // Toggle route shells on view/detail change and persist
+    const data = createDataLayer(/** @type {any} */ (transport), client.on);
+    const epics_view = createEpicsView(epics_root, data, (id) =>
+      router.gotoIssue(id)
+    );
+    const board_view = createBoardView(board_root, data, (id) =>
+      router.gotoIssue(id)
+    );
+    // Preload epics when switching to view
+    /**
+     * @param {{ selected_id: string | null, view: 'issues'|'epics'|'board', filters: any }} s
+     */
+    const onRouteChange = (s) => {
+      const showDetail = Boolean(s.selected_id);
+      if (issues_root && epics_root && board_root && detail_mount) {
+        issues_root.hidden = showDetail || s.view !== 'issues';
+        epics_root.hidden = showDetail || s.view !== 'epics';
+        board_root.hidden = showDetail || s.view !== 'board';
+        detail_mount.hidden = !showDetail;
+      }
+      if (!showDetail && s.view === 'epics') {
+        void epics_view.load();
+      }
+      if (!showDetail && s.view === 'board') {
+        void board_view.load();
+      }
+      try {
+        window.localStorage.setItem('beads-ui.view', s.view);
+      } catch {
+        // ignore
+      }
+    };
+    store.subscribe(onRouteChange);
+    // Ensure initial state is reflected (fixes reload on #/epics)
+    onRouteChange(store.getState());
+  }
+}
+
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  window.addEventListener('DOMContentLoaded', () => {
+    // Initialize theme from saved preference or OS preference
+    try {
+      const saved = window.localStorage.getItem('beads-ui.theme');
+      const prefersDark =
+        window.matchMedia &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const initial =
+        saved === 'dark' || saved === 'light'
+          ? saved
+          : prefersDark
+            ? 'dark'
+            : 'light';
+      document.documentElement.setAttribute('data-theme', initial);
+      const sw = /** @type {HTMLInputElement|null} */ (
+        document.getElementById('theme-switch')
+      );
+      if (sw) {
+        sw.checked = initial === 'dark';
+      }
+    } catch {
+      // ignore theme init errors
+    }
+
+    // Wire up theme switch in header
+    const themeSwitch = /** @type {HTMLInputElement|null} */ (
+      document.getElementById('theme-switch')
+    );
+    if (themeSwitch) {
+      themeSwitch.addEventListener('change', () => {
+        const mode = themeSwitch.checked ? 'dark' : 'light';
+        document.documentElement.setAttribute('data-theme', mode);
+        try {
+          window.localStorage.setItem('beads-ui.theme', mode);
+        } catch {
+          // ignore persistence errors
+        }
+      });
+    }
+
+    /** @type {HTMLElement|null} */
+    const app_root = document.getElementById('app');
+    if (app_root) {
+      bootstrap(app_root);
+    }
+  });
+}

package/app/main.live-updates.test.js

@@ -0,0 +1,229 @@
+import { describe, expect, test, vi } from 'vitest';
+import { bootstrap } from './main.js';
+
+// Provide a mutable client instance for module-level mock
+/** @type {any} */
+let CLIENT = null;
+vi.mock('./ws.js', () => ({
+  createWsClient: () => CLIENT
+}));
+
+describe('live updates: issues-changed handling', () => {
+  test('refreshes list only when on issues view and preserves scroll', async () => {
+    /** @type {{ send: import('vitest').Mock, on: (t: string, h: (p:any)=>void)=>void, trigger: (t:string, p:any)=>void }} */
+    CLIENT = {
+      send: vi.fn(async (type) => {
+        if (type === 'list-issues') {
+          return [
+            { id: 'UI-1', title: 'A', status: 'open' },
+            { id: 'UI-2', title: 'B', status: 'open' }
+          ];
+        }
+        if (type === 'show-issue') {
+          return { id: 'UI-1' };
+        }
+        if (type === 'epic-status') {
+          return [];
+        }
+        return null;
+      }),
+      /**
+       * @param {string} _type
+       * @param {(p:any)=>void} handler
+       */
+      on(_type, handler) {
+        this._handler = handler;
+        return () => {};
+      },
+      /**
+       * @param {string} type
+       * @param {any} payload
+       */
+      trigger(type, payload) {
+        if (type === 'issues-changed' && this._handler) this._handler(payload);
+      },
+      close() {},
+      getState() {
+        return 'open';
+      }
+    };
+
+    document.body.innerHTML = '<main id="app"></main>';
+    const root = /** @type {HTMLElement} */ (document.getElementById('app'));
+
+    bootstrap(root);
+    await Promise.resolve();
+
+    // Simulate a scrolled list container
+    const listRoot = /** @type {HTMLElement} */ (
+      document.getElementById('list-root')
+    );
+    if (listRoot) {
+      listRoot.scrollTop = 120;
+    }
+
+    const callsBefore = CLIENT.send.mock.calls.length;
+    CLIENT.trigger('issues-changed', { ts: Date.now() });
+    await Promise.resolve();
+
+    const callsAfter = CLIENT.send.mock.calls.length;
+    // One additional list-issues request, no detail fetch
+    const newCalls = CLIENT.send.mock.calls.slice(callsBefore);
+    const types = newCalls.map(/** @param {any} c */ (c) => c[0]);
+    expect(types).toEqual(['list-issues']);
+
+    // Scroll should remain
+    const listRootAfter = /** @type {HTMLElement} */ (
+      document.getElementById('list-root')
+    );
+    expect(listRootAfter.scrollTop).toBe(120);
+    expect(callsAfter).toBe(callsBefore + 1);
+  });
+
+  test('refreshes detail only when detail is visible and id matches hint', async () => {
+    /** @type {{ send: import('vitest').Mock, on: (t: string, h: (p:any)=>void)=>void, trigger: (t:string, p:any)=>void }} */
+    CLIENT = {
+      send: vi.fn(async (type, payload) => {
+        if (type === 'list-issues') {
+          return [];
+        }
+        if (type === 'show-issue') {
+          return { id: payload.id };
+        }
+        if (type === 'epic-status') {
+          return [];
+        }
+        return null;
+      }),
+      /**
+       * @param {string} _type
+       * @param {(p:any)=>void} handler
+       */
+      on(_type, handler) {
+        this._handler = handler;
+        return () => {};
+      },
+      /**
+       * @param {string} type
+       * @param {any} payload
+       */
+      trigger(type, payload) {
+        if (type === 'issues-changed' && this._handler) this._handler(payload);
+      },
+      close() {},
+      getState() {
+        return 'open';
+      }
+    };
+
+    // Navigate to detail view
+    window.location.hash = '#/issue/UI-1';
+    document.body.innerHTML = '<main id="app"></main>';
+    const root = /** @type {HTMLElement} */ (document.getElementById('app'));
+
+    bootstrap(root);
+    await Promise.resolve();
+
+    CLIENT.send.mockClear();
+    CLIENT.trigger('issues-changed', {
+      ts: Date.now(),
+      hint: { ids: ['UI-1'] }
+    });
+    await Promise.resolve();
+
+    const calls = CLIENT.send.mock.calls.map(/** @param {any} c */ (c) => c[0]);
+    expect(calls).toEqual(['show-issue']);
+  });
+
+  test('refreshes epics when epics view visible', async () => {
+    CLIENT = {
+      send: vi.fn(async (type) => {
+        if (type === 'epic-status') {
+          return [];
+        }
+        return [];
+      }),
+      /**
+       * @param {string} _type
+       * @param {(p:any)=>void} handler
+       */
+      on(_type, handler) {
+        this._handler = handler;
+        return () => {};
+      },
+      /**
+       * @param {string} type
+       * @param {any} payload
+       */
+      trigger(type, payload) {
+        if (type === 'issues-changed' && this._handler) this._handler(payload);
+      },
+      close() {},
+      getState() {
+        return 'open';
+      }
+    };
+
+    window.location.hash = '#/epics';
+    document.body.innerHTML = '<main id="app"></main>';
+    const root = /** @type {HTMLElement} */ (document.getElementById('app'));
+    bootstrap(root);
+    await Promise.resolve();
+
+    // Ignore initial load
+    CLIENT.send.mockClear();
+    CLIENT.trigger('issues-changed', { ts: Date.now() });
+    await Promise.resolve();
+
+    const calls = CLIENT.send.mock.calls.map(/** @param {any} c */ (c) => c[0]);
+    expect(calls).toEqual(['epic-status']);
+  });
+
+  test('refreshes board when board view visible', async () => {
+    CLIENT = {
+      send: vi.fn(async (type) => {
+        if (type === 'list-issues') {
+          return [];
+        }
+        if (type === 'epic-status') {
+          return [];
+        }
+        return [];
+      }),
+      /**
+       * @param {string} _type
+       * @param {(p:any)=>void} handler
+       */
+      on(_type, handler) {
+        this._handler = handler;
+        return () => {};
+      },
+      /**
+       * @param {string} type
+       * @param {any} payload
+       */
+      trigger(type, payload) {
+        if (type === 'issues-changed' && this._handler) this._handler(payload);
+      },
+      close() {},
+      getState() {
+        return 'open';
+      }
+    };
+
+    window.location.hash = '#/board';
+    document.body.innerHTML = '<main id="app"></main>';
+    const root = /** @type {HTMLElement} */ (document.getElementById('app'));
+    bootstrap(root);
+    await Promise.resolve();
+
+    CLIENT.send.mockClear();
+    CLIENT.trigger('issues-changed', { ts: Date.now() });
+    await Promise.resolve();
+
+    const calls = CLIENT.send.mock.calls.map(/** @param {any} c */ (c) => c[0]);
+    // Board loads multiple list-issues, assert at least one
+    expect(calls.length > 0).toBe(true);
+    expect(new Set(calls).has('list-issues')).toBe(true);
+  });
+});

package/app/main.test.js

@@ -0,0 +1,17 @@
+import { describe, expect, test } from 'vitest';
+import { bootstrap } from './main.js';
+
+describe('app/main (jsdom)', () => {
+  test('renders two-panel shell into root', () => {
+    document.body.innerHTML = '<main id="app"></main>';
+    const root_element = /** @type {HTMLElement} */ (
+      document.getElementById('app')
+    );
+    bootstrap(root_element);
+
+    const list_panel = root_element.querySelector('#list-panel');
+    const detail_panel = root_element.querySelector('#detail-panel');
+    expect(list_panel).not.toBeNull();
+    expect(detail_panel).not.toBeNull();
+  });
+});

package/app/main.theme.test.js

@@ -0,0 +1,41 @@
+import { describe, expect, test } from 'vitest';
+
+describe('theme toggle', () => {
+  test('sets dark data-theme and persists preference', async () => {
+    document.body.innerHTML = `
+      <header class="app-header">
+        <h1 class="app-title">beads-ui</h1>
+        <div class="header-actions">
+          <label class="theme-toggle">
+            <span>Dark</span>
+            <input id="theme-switch" type="checkbox" />
+          </label>
+        </div>
+      </header>
+      <main id="app"></main>`;
+
+    // Simulate the DOMContentLoaded logic from main.js
+    const themeSwitch = /** @type {HTMLInputElement} */ (
+      document.getElementById('theme-switch')
+    );
+    themeSwitch.checked = true;
+    themeSwitch.dispatchEvent(new Event('change'));
+
+    // Apply attribute as in main.js handler
+    document.documentElement.setAttribute('data-theme', 'dark');
+    window.localStorage.setItem('beads-ui.theme', 'dark');
+
+    expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+    expect(window.localStorage.getItem('beads-ui.theme')).toBe('dark');
+  });
+
+  test('can switch back to light explicitly', async () => {
+    document.documentElement.setAttribute('data-theme', 'dark');
+    window.localStorage.setItem('beads-ui.theme', 'dark');
+    // Simulate toggle off
+    document.documentElement.setAttribute('data-theme', 'light');
+    window.localStorage.setItem('beads-ui.theme', 'light');
+    expect(document.documentElement.getAttribute('data-theme')).toBe('light');
+    expect(window.localStorage.getItem('beads-ui.theme')).toBe('light');
+  });
+});

package/app/main.view-sync.test.js

@@ -0,0 +1,54 @@
+import { describe, expect, test, vi } from 'vitest';
+import { bootstrap } from './main.js';
+
+// Mock WS client before importing the app
+vi.mock('./ws.js', () => ({
+  createWsClient: () => ({
+    /**
+     * @param {string} type
+     */
+    async send(type) {
+      // Return minimal data for the list view
+      if (type === 'list-issues') {
+        return [];
+      }
+      if (type === 'show-issue') {
+        return null;
+      }
+      if (type === 'epic-status') {
+        return [];
+      }
+      return null;
+    },
+    on() {
+      return () => {};
+    },
+    close() {},
+    getState() {
+      return 'open';
+    }
+  })
+}));
+
+describe('initial view sync on reload (#/epics)', () => {
+  test('shows Epics view when hash is #/epics', async () => {
+    window.location.hash = '#/epics';
+    document.body.innerHTML = '<main id="app"></main>';
+    const root = /** @type {HTMLElement} */ (document.getElementById('app'));
+
+    bootstrap(root);
+
+    // Allow any microtasks to flush
+    await Promise.resolve();
+
+    const issuesRoot = /** @type {HTMLElement} */ (
+      document.getElementById('issues-root')
+    );
+    const epicsRoot = /** @type {HTMLElement} */ (
+      document.getElementById('epics-root')
+    );
+
+    expect(issuesRoot.hidden).toBe(true);
+    expect(epicsRoot.hidden).toBe(false);
+  });
+});