feat(output): pure four-act model for the output tab

Author: New1Direction

output-acts.js

@@ -0,0 +1,65 @@
+// output-acts.js
+// Pure act model for the output tab. Groups the existing tab indices (the #t0..#t27
+// panels) into four ordered "acts" — Decide, Understand, Go Deeper, Act — for a
+// two-tier nav. No DOM, no network, no imports: this is the testable contract the
+// nav rendering and show() build on. Tab indices and slugs are unchanged from the
+// existing TAB_SLUGS, so deep links and per-repo recall keep working.
+
+export const ACTS = [
+  { id: 'decide', label: 'Decide', tabs: [9] },
+  { id: 'understand', label: 'Understand', tabs: [0, 1, 2, 3, 4, 5, 8, 6, 7, 15] },
+  { id: 'deeper', label: 'Go Deeper', tabs: [10, 27, 11, 12, 13, 14, 21, 22, 23, 24] },
+  { id: 'act', label: 'Act', tabs: [25, 16, 17, 18, 19, 20, 26] },
+];
+
+export const ACT_ORDER = ACTS.map((a) => a.id);
+
+// Tab index → human label (mirrors the current nav button text; used to render
+// the secondary row from the model instead of hardcoded HTML).
+export const TAB_LABELS = {
+  9: 'Verdict',
+  0: 'ELI5',
+  1: 'Technical',
+  2: 'Use Cases',
+  3: 'Skip If',
+  4: 'Enables',
+  5: 'Pros / Cons',
+  8: 'Red Flags',
+  6: 'Alternatives',
+  7: 'Health',
+  15: 'Tech Stack',
+  10: 'Deep Dive',
+  27: 'Canvas',
+  11: 'Systems',
+  12: 'Ideate',
+  13: 'Prioritize',
+  14: 'SKTPG',
+  21: 'Docs Quality',
+  22: 'Maintenance',
+  23: 'License',
+  24: 'Since Last Scan',
+  25: 'Fits MY Stack?',
+  16: 'Similar',
+  17: 'Versus',
+  18: 'Synergies',
+  19: 'Connections',
+  20: 'Combine',
+  26: 'Ask',
+};
+
+const ACT_BY_TAB = (() => {
+  const m = {};
+  for (const a of ACTS) for (const t of a.tabs) m[t] = a.id;
+  return m;
+})();
+
+/** @returns {string|null} the act id owning tab `n`, or null. */
+export function actForTab(n) {
+  return Object.prototype.hasOwnProperty.call(ACT_BY_TAB, n) ? ACT_BY_TAB[n] : null;
+}
+
+/** @returns {number[]} the tab indices in an act, in display order. */
+export function tabsForAct(id) {
+  const a = ACTS.find((x) => x.id === id);
+  return a ? a.tabs : [];
+}

tests/output-acts.test.js

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { ACTS, ACT_ORDER, TAB_LABELS, actForTab, tabsForAct } from '../output-acts.js';
+
+describe('act model', () => {
+  it('orders the four acts', () => {
+    expect(ACT_ORDER).toEqual(['decide', 'understand', 'deeper', 'act']);
+  });
+
+  it('covers every tab index 0..27 exactly once', () => {
+    const all = ACTS.flatMap((a) => a.tabs).sort((x, y) => x - y);
+    expect(all).toEqual(Array.from({ length: 28 }, (_, i) => i));
+    expect(new Set(all).size).toBe(28); // no duplicates
+  });
+
+  it('maps a tab to its owning act', () => {
+    expect(actForTab(9)).toBe('decide');
+    expect(actForTab(7)).toBe('understand'); // Health
+    expect(actForTab(10)).toBe('deeper'); // Deep Dive
+    expect(actForTab(17)).toBe('act'); // Versus
+    expect(actForTab(99)).toBeNull();
+  });
+
+  it('lists tabs for an act in display order', () => {
+    expect(tabsForAct('decide')).toEqual([9]);
+    expect(tabsForAct('understand')[0]).toBe(0); // ELI5 leads
+    expect(tabsForAct('nope')).toEqual([]);
+  });
+
+  it('has a label for every tab it groups', () => {
+    for (const t of ACTS.flatMap((a) => a.tabs)) {
+      expect(typeof TAB_LABELS[t]).toBe('string');
+      expect(TAB_LABELS[t].length).toBeGreaterThan(0);
+    }
+  });
+});