@jhizzard/termdeck 0.4.3 → 0.4.6

package/packages/client/public/app.js

@@ -1852,6 +1852,15 @@
       const grid = document.getElementById('termGrid');
       grid.className = `grid-container layout-${layout}`;
 
+      // Orchestrator layout: set column count based on worker panels (total - 1)
+      if (layout === 'orch') {
+        const panelCount = grid.querySelectorAll('.term-panel').length;
+        const workerCount = Math.max(0, panelCount - 1);
+        grid.setAttribute('data-orch-cols', String(workerCount || panelCount));
+      } else {
+        grid.removeAttribute('data-orch-cols');
+      }
+
       // Remove focus/half states
       document.querySelectorAll('.term-panel').forEach(p => {
         p.classList.remove('focused', 'primary');
@@ -2019,6 +2028,20 @@
       }
     }
 
+    // Debounce: collapse a burst of calls (e.g. a window-resize drag firing
+    // dozens of events/sec) into a single invocation after `wait` ms of quiet.
+    function debounce(fn, wait) {
+      let timer = null;
+      return function debounced(...args) {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(() => { timer = null; fn.apply(this, args); }, wait);
+      };
+    }
+
+    const fitAllDebounced = debounce(() => {
+      requestAnimationFrame(() => fitAll());
+    }, 100);
+
     // ===== ONBOARDING TOUR =====
     // Spotlight + tooltip walkthrough of every TermDeck surface. Runs once on
     // first visit (localStorage gate) and replays on demand via the "how this
@@ -2038,7 +2061,7 @@
       {
         target: '.topbar-center',
         title: 'Layout modes',
-        body: `Eight preset grid layouts — <kbd>1x1</kbd> through <kbd>4x2</kbd>, <strong>orch</strong> (1 large + stacked, for 4+1 sprints), plus <strong>control</strong> (aggregate activity feed). Click any layout to switch instantly; all terminals re-fit to the new grid. Keyboard shortcuts <kbd>Cmd+Shift+1</kbd>–<kbd>Cmd+Shift+7</kbd> (or <kbd>Ctrl+Shift+1</kbd>–<kbd>7</kbd>) do the same.`,
+        body: `Eight preset grid layouts — <kbd>1x1</kbd> through <kbd>4x2</kbd>, <strong>orch</strong> (4 workers across the top + 1 full-width orchestrator across the bottom, for 4+1 sprints), plus <strong>control</strong> (aggregate activity feed). Click any layout to switch instantly; all terminals re-fit to the new grid. Keyboard shortcuts <kbd>Cmd+Shift+1</kbd>–<kbd>Cmd+Shift+7</kbd> (or <kbd>Ctrl+Shift+1</kbd>–<kbd>7</kbd>) do the same.`,
       },
       {
         target: '#termSwitcher',
@@ -2555,15 +2578,21 @@
           ? 'active'
           : status === 'partial' ? 'partial' : 'not configured';
         const isCurrent = Number(tier.id) === currentTier + 1 && status !== 'active';
-        const cmds = (status === 'active' || tier.commands.length === 0)
-          ? ''
-          : `<div class="setup-cmds">${tier.commands.map((c) => {
-              const copyable = /^termdeck\s/.test(c);
-              return `<div class="setup-cmd">
-                <code>${escapeHtml(c)}</code>
-                ${copyable ? `<button type="button" class="setup-copy" data-copy="${escapeHtml(c)}">copy</button>` : ''}
-              </div>`;
-            }).join('')}</div>`;
+
+        // Sprint 23 T2: tier 2 renders a credential form instead of CLI commands
+        // when not active, so users can paste URL/keys directly in the browser.
+        const isCredentialForm = tier.id === '2' && status !== 'active';
+        const cmds = isCredentialForm
+          ? renderSetupCredentialForm()
+          : (status === 'active' || tier.commands.length === 0)
+            ? ''
+            : `<div class="setup-cmds">${tier.commands.map((c) => {
+                const copyable = /^termdeck\s/.test(c);
+                return `<div class="setup-cmd">
+                  <code>${escapeHtml(c)}</code>
+                  ${copyable ? `<button type="button" class="setup-copy" data-copy="${escapeHtml(c)}">copy</button>` : ''}
+                </div>`;
+              }).join('')}</div>`;
 
         return `
           <div class="setup-tier setup-tier-${status}${isCurrent ? ' setup-tier-next' : ''}">
@@ -2600,26 +2629,263 @@
           }).catch(() => {});
         });
       });
+
+      const credSaveBtn = tiersEl.querySelector('#setupCredSave');
+      if (credSaveBtn) {
+        credSaveBtn.addEventListener('click', submitSetupCredentials);
+      }
+      const credForm = tiersEl.querySelector('#setupCredForm');
+      if (credForm) {
+        credForm.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            submitSetupCredentials();
+          }
+        });
+      }
+    }
+
+    // Sprint 23 T2 — credential form for Tier 2.
+    // Uses inline styles because wizard CSS is owned by T1 this sprint; these
+    // stubs fall back to CSS vars already defined in style.css so they inherit
+    // theme colours automatically.
+    function renderSetupCredentialForm() {
+      const inputStyle = 'width:100%;padding:6px 8px;background:var(--bg, #0f1017);color:var(--text, #e2e3e8);border:1px solid var(--border, #2a2c3a);border-radius:4px;font-family:monospace;font-size:12px;margin-top:4px;box-sizing:border-box;';
+      const labelStyle = 'display:block;font-size:11px;color:var(--text-dim, #8a8d9a);margin-top:10px;';
+      const helpStyle = 'font-size:10px;color:var(--text-dim, #8a8d9a);margin-top:3px;min-height:12px;';
+      const btnStyle = 'margin-top:14px;padding:8px 18px;background:var(--accent, #7aa2f7);color:#000;border:none;border-radius:4px;font-weight:600;cursor:pointer;font-size:12px;';
+      return `
+        <form class="setup-credentials" id="setupCredForm" autocomplete="off" style="margin-top:10px;padding:12px;background:rgba(0,0,0,0.2);border-radius:6px;border:1px solid var(--border, #2a2c3a);">
+          <div style="font-size:11px;color:var(--text-dim, #8a8d9a);margin-bottom:4px;">
+            Paste your Supabase + OpenAI credentials. They are written to <code>~/.termdeck/secrets.env</code> (chmod 600) and never leave this machine.
+          </div>
+          <label style="${labelStyle}">
+            Supabase URL
+            <input type="text" name="supabaseUrl" placeholder="https://xxxxxx.supabase.co" spellcheck="false" autocapitalize="off" autocorrect="off" style="${inputStyle}">
+          </label>
+          <div class="setup-cred-status" data-field="supabase" style="${helpStyle}"></div>
+          <label style="${labelStyle}">
+            Service Role Key
+            <input type="password" name="supabaseServiceRoleKey" placeholder="sb_secret_..." spellcheck="false" autocomplete="new-password" style="${inputStyle}">
+          </label>
+          <label style="${labelStyle}">
+            OpenAI API Key
+            <input type="password" name="openaiApiKey" placeholder="sk-proj-..." spellcheck="false" autocomplete="new-password" style="${inputStyle}">
+          </label>
+          <div class="setup-cred-status" data-field="openai" style="${helpStyle}"></div>
+          <label style="${labelStyle}">
+            Database URL
+            <input type="password" name="databaseUrl" placeholder="postgresql://postgres:...@...pooler.supabase.com:6543/postgres" spellcheck="false" autocomplete="new-password" style="${inputStyle}">
+          </label>
+          <div class="setup-cred-status" data-field="database" style="${helpStyle}"></div>
+          <label style="${labelStyle}">
+            Anthropic API Key <span style="opacity:0.6;">(optional — powers session-log summaries)</span>
+            <input type="password" name="anthropicApiKey" placeholder="sk-ant-..." spellcheck="false" autocomplete="new-password" style="${inputStyle}">
+          </label>
+          <div class="setup-cred-error" id="setupCredError" style="font-size:11px;margin-top:10px;min-height:14px;"></div>
+          <button type="button" class="setup-cred-save" id="setupCredSave" style="${btnStyle}">Save &amp; Connect</button>
+        </form>
+      `;
+    }
+
+    async function submitSetupCredentials() {
+      const form = document.getElementById('setupCredForm');
+      if (!form) return;
+      const btn = document.getElementById('setupCredSave');
+      const errorEl = document.getElementById('setupCredError');
+      const statuses = form.querySelectorAll('.setup-cred-status');
+
+      // Reset state
+      if (errorEl) { errorEl.textContent = ''; errorEl.style.color = ''; }
+      statuses.forEach((el) => { el.textContent = ''; el.style.color = ''; });
+
+      const body = {
+        supabaseUrl: (form.supabaseUrl.value || '').trim(),
+        supabaseServiceRoleKey: (form.supabaseServiceRoleKey.value || '').trim(),
+        openaiApiKey: (form.openaiApiKey.value || '').trim(),
+        anthropicApiKey: (form.anthropicApiKey.value || '').trim(),
+        databaseUrl: (form.databaseUrl.value || '').trim()
+      };
+
+      const missing = [];
+      if (!body.supabaseUrl) missing.push('Supabase URL');
+      if (!body.supabaseServiceRoleKey) missing.push('Service Role Key');
+      if (!body.openaiApiKey) missing.push('OpenAI API Key');
+      if (!body.databaseUrl) missing.push('Database URL');
+      if (missing.length) {
+        if (errorEl) {
+          errorEl.textContent = `Please fill in: ${missing.join(', ')} (Anthropic is optional).`;
+          errorEl.style.color = 'var(--red, #f7768e)';
+        }
+        return;
+      }
+
+      if (btn) { btn.disabled = true; btn.textContent = 'Validating…'; }
+      try {
+        const res = await fetch(`${API}/api/setup/configure`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        let data = {};
+        try { data = await res.json(); } catch { data = {}; }
+
+        if (data && data.validation) {
+          for (const field of ['supabase', 'openai', 'database']) {
+            const result = data.validation[field];
+            if (!result) continue;
+            const el = form.querySelector(`.setup-cred-status[data-field="${field}"]`);
+            if (el) {
+              el.textContent = (result.ok ? '✓ ' : '✗ ') + (result.detail || '');
+              el.style.color = result.ok ? 'var(--green, #9ece6a)' : 'var(--red, #f7768e)';
+            }
+          }
+        }
+
+        if (res.ok && data && data.success) {
+          if (errorEl) {
+            errorEl.textContent = (data.detail || 'Credentials saved.') + ' Running migrations…';
+            errorEl.style.color = 'var(--green, #9ece6a)';
+          }
+          if (btn) btn.textContent = 'Migrating…';
+          await runSetupMigrations(errorEl);
+          setTimeout(() => { refreshSetupStatus(); }, 600);
+        } else {
+          if (errorEl) {
+            errorEl.textContent = (data && data.error) || `Configuration failed (HTTP ${res.status})`;
+            errorEl.style.color = 'var(--red, #f7768e)';
+          }
+        }
+      } catch (err) {
+        if (errorEl) {
+          errorEl.textContent = `Request failed: ${err && err.message ? err.message : String(err)}`;
+          errorEl.style.color = 'var(--red, #f7768e)';
+        }
+      } finally {
+        if (btn) { btn.disabled = false; btn.textContent = 'Save & Connect'; }
+      }
+    }
+
+    // Sprint 23 audit fix: chain /api/setup/migrate after credentials save so
+    // the wizard fulfills the sprint mission ("write config AND run migrations")
+    // in a single click instead of leaving the user to run `termdeck init`.
+    async function runSetupMigrations(statusEl) {
+      try {
+        const res = await fetch(`${API}/api/setup/migrate`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: '{}'
+        });
+        let data = {};
+        try { data = await res.json(); } catch { data = {}; }
+        if (statusEl) {
+          if (res.ok && data && data.ok) {
+            statusEl.textContent = `Migrations applied (${data.applied}/${data.total}). Tier 2 active.`;
+            statusEl.style.color = 'var(--green, #9ece6a)';
+          } else {
+            const applied = (data && data.applied != null) ? `${data.applied}/${data.total} applied` : '';
+            const detail = (data && data.error) ? data.error : `HTTP ${res.status}`;
+            statusEl.textContent = `Migrations failed: ${detail}${applied ? ` (${applied})` : ''}`;
+            statusEl.style.color = 'var(--red, #f7768e)';
+          }
+        }
+      } catch (err) {
+        if (statusEl) {
+          statusEl.textContent = `Migration request failed: ${err && err.message ? err.message : String(err)}`;
+          statusEl.style.color = 'var(--red, #f7768e)';
+        }
+      }
     }
 
     async function maybeAutoOpenSetupWizard() {
-      // Auto-open only when the server reports firstRun=true and we're not
-      // already in the middle of the onboarding tour. Silent-fail if the
-      // endpoint doesn't exist (server predates Sprint 19 T1).
+      // First-run users get the full wizard; returning users with at least
+      // tier 1 configured get a brief welcome-back toast (Sprint 23 T4).
+      // Silent-fail if the endpoint doesn't exist (server predates Sprint 19 T1).
       try {
         const res = await fetch(`${API}/api/setup`);
         if (!res.ok) return;
         const data = await res.json();
-        if (data && data.firstRun && !tourState.active) {
+        if (!data || tourState.active) return;
+        if (data.firstRun) {
           setTimeout(() => {
             if (!tourState.active && !setupModalOpen) openSetupModal();
           }, 800);
+        } else if (Number(data.tier) >= 1) {
+          setTimeout(() => {
+            if (!tourState.active && !setupModalOpen) showWelcomeBackToast(data);
+          }, 800);
         }
       } catch {
         // API not available — skip silently
       }
     }
 
+    // Sprint 23 T4: returning-user welcome-back toast. Non-blocking, dismisses
+    // on click or after 5s. Inline-styled so we don't touch style.css (T1's
+    // ownership). The config button still opens the full wizard.
+    function showWelcomeBackToast(data) {
+      const existing = document.getElementById('welcomeBackToast');
+      if (existing) existing.remove();
+
+      const tier = Number(data.tier) || 1;
+      const tierNames = {
+        1: 'TermDeck core',
+        2: 'TermDeck + Mnestra',
+        3: 'TermDeck + Mnestra + Rumen',
+        4: 'Full stack + projects'
+      };
+      const stackLabel = tierNames[tier] || 'TermDeck';
+
+      const tiers = data.tiers || {};
+      const mnestraDetail = (tiers[2] && tiers[2].detail) || '';
+      const rumenDetail = (tiers[3] && tiers[3].detail) || '';
+
+      const memMatch = mnestraDetail.match(/([\d,]+)\s*memories/i);
+      const memoryCount = memMatch ? memMatch[1] : null;
+      const rumenMatch = rumenDetail.match(/last job\s+([^,]+?)(?:\s+ago|,|$)/i);
+      const rumenAgo = rumenMatch ? rumenMatch[1].trim() : null;
+
+      const parts = [`Stack: ${stackLabel}.`];
+      if (memoryCount) parts.push(`${memoryCount} memories.`);
+      if (rumenAgo) parts.push(`Last Rumen job: ${rumenAgo} ago.`);
+
+      const toast = document.createElement('div');
+      toast.id = 'welcomeBackToast';
+      toast.setAttribute('role', 'status');
+      toast.style.cssText = [
+        'position:fixed',
+        'top:64px',
+        'right:16px',
+        'z-index:9999',
+        'max-width:360px',
+        'padding:10px 14px',
+        'background:rgba(20,22,28,0.95)',
+        'color:#cdd6f4',
+        'border:1px solid rgba(137,180,250,0.35)',
+        'border-radius:6px',
+        'box-shadow:0 4px 18px rgba(0,0,0,0.4)',
+        'font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace',
+        'cursor:pointer',
+        'opacity:0',
+        'transition:opacity 180ms ease'
+      ].join(';');
+      toast.innerHTML = `
+        <div style="font-weight:600;color:#89b4fa;margin-bottom:2px">Welcome back</div>
+        <div>${parts.map(p => escapeHtml(p)).join(' ')}</div>
+      `;
+
+      document.body.appendChild(toast);
+      requestAnimationFrame(() => { toast.style.opacity = '1'; });
+
+      const dismiss = () => {
+        clearTimeout(timer);
+        toast.style.opacity = '0';
+        setTimeout(() => toast.remove(), 200);
+      };
+      toast.addEventListener('click', dismiss);
+      const timer = setTimeout(dismiss, 5000);
+    }
+
     function fmtUptime(sec) {
       const s = Math.floor(sec);
       const h = Math.floor(s / 3600);
@@ -2675,10 +2941,8 @@
       if (e.target.id === 'tourBackdrop') endTour();
     });
 
-    // Resize handler
-    window.addEventListener('resize', () => {
-      requestAnimationFrame(() => fitAll());
-    });
+    // Resize handler — debounced so a resize drag doesn't re-fit every frame.
+    window.addEventListener('resize', fitAllDebounced);
 
     // Re-render the tour on viewport changes so the spotlight tracks resizes
     window.addEventListener('resize', () => {

package/packages/client/public/index.html

@@ -41,7 +41,7 @@
         <button class="layout-btn" data-layout="3x2">3x2</button>
         <button class="layout-btn" data-layout="2x4">2x4</button>
         <button class="layout-btn" data-layout="4x2">4x2</button>
-        <button class="layout-btn" data-layout="orch" title="Orchestrator: 1 large left + stacked right">orch</button>
+        <button class="layout-btn" data-layout="orch" title="Orchestrator: 4 workers across top, 1 full-width orchestrator across bottom">orch</button>
         <button class="layout-btn control-btn" data-layout="control" title="Aggregate activity feed">control</button>
       </div>
     </div>

package/packages/client/public/style.css

@@ -312,14 +312,25 @@
     .grid-container.layout-4x2 { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
     .grid-container.layout-2x4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; }
 
-    /* Orchestrator: 1 large left panel (60%), remaining stack on the right (40%). */
+    /* Orchestrator: workers across the top (60%), one full-width orchestrator
+       panel across the bottom (40%). The last panel is always the orchestrator.
+       JS sets a data-orch-cols attribute on the grid to match the worker count. */
+    /* Orchestrator: 2x2 workers on top (60%), full-width orchestrator bottom (40%) */
     .grid-container.layout-orch {
-      grid-template-columns: 3fr 2fr;
-      grid-template-rows: repeat(4, 1fr);
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: 2fr 2fr 2fr;
     }
-    .grid-container.layout-orch .term-panel:first-child {
-      grid-row: 1 / span 4;
-      grid-column: 1;
+    .grid-container.layout-orch .term-panel:last-child {
+      grid-column: 1 / -1;
+      grid-row: 3;
+    }
+    /* Single panel: fill entire grid */
+    .grid-container.layout-orch[data-orch-cols="0"] {
+      grid-template-rows: 1fr;
+      grid-template-columns: 1fr;
+    }
+    .grid-container.layout-orch[data-orch-cols="0"] .term-panel:last-child {
+      grid-row: 1;
     }
 
     /* Focus mode: single terminal fills the grid */
@@ -344,7 +355,8 @@
       border-radius: var(--tg-radius);
       overflow: hidden;
       transition: border-color 0.2s;
-      min-height: 0;
+      min-height: 150px;
+      min-width: 200px;
     }
 
     .term-panel:hover { border-color: var(--tg-border-active); }
@@ -2278,3 +2290,57 @@
     ::-webkit-scrollbar-track { background: transparent; }
     ::-webkit-scrollbar-thumb { background: var(--tg-border); border-radius: 3px; }
     ::-webkit-scrollbar-thumb:hover { background: var(--tg-border-active); }
+
+    /* ===== RESPONSIVE BREAKPOINTS (Sprint 23 T1) =====
+       13" MacBook Air (1280x800 / 1440x900) up through 27" iMac (2560x1440).
+       Goals: (1) compact toolbar on short viewports to reclaim vertical space
+       for terminals, (2) collapse wide grids (3x2, 4x2) to 2 columns on
+       narrow viewports so panels never drop below readable size (combined
+       with the 200px min-width on .term-panel). */
+
+    /* Short viewports (13" laptops at 1280x800 / 1440x900): shrink the two
+       toolbar rows from 74px to 64px total, and tighten button padding so
+       the quick-launch + layout buttons still fit on one row at 1280px. */
+    @media (max-height: 800px) {
+      .topbar-row-1 { height: 36px; }
+      .topbar-row-2 { height: 28px; }
+      .layout-btn { padding: 3px 7px; font-size: 10px; }
+      .topbar-right button { padding: 3px 6px; font-size: 10px; }
+      .topbar-ql-btn { padding: 3px 6px; font-size: 10px; }
+    }
+
+    /* Narrow viewports: 3x2 (6 panels) and 4x2 (8 panels) become
+       too cramped below ~1280px given the 200px panel min-width. Degrade to
+       2 columns and add rows so every panel stays visible. */
+    @media (max-width: 1280px) {
+      .grid-container.layout-3x2 {
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(3, 1fr);
+      }
+      .grid-container.layout-4x2 {
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(4, 1fr);
+      }
+    }
+
+    /* Very narrow viewports (rare — sub-1024 widths): also collapse 2x4
+       and orch to something sane. 2x4 already uses 2 columns, so we just
+       let it scroll; orch falls back to a single-column stack. */
+    @media (max-width: 900px) {
+      .grid-container.layout-orch {
+        grid-template-columns: 1fr;
+        grid-template-rows: repeat(var(--orch-worker-rows, 3), 1fr) 1.2fr;
+      }
+      .grid-container.layout-orch .term-panel:last-child {
+        grid-column: 1;
+      }
+      .grid-container { overflow: auto; }
+    }
+
+    /* Large viewports (27" iMac and ultrawide monitors): keep panels filling
+       their allocated grid area. Raise the panel floor so a single terminal
+       in 1x1 mode on a 2560-wide display still fills its space rather than
+       sitting at the 150px min. */
+    @media (min-width: 1920px) {
+      .term-panel { min-height: 200px; min-width: 300px; }
+    }