@bakapiano/ccsm 0.22.3 → 0.22.5

package/public/js/components/EntityFormModal.js

@@ -1,153 +1,153 @@
-// Generic create/edit form rendered inside a Modal. Field shape mirrors
-// the createFields prop used by Picker.js so the same field-definition
-// objects power both the inline-create-in-popover flow and the standalone
-// edit flow used from Configure.
-//
-// Usage:
-//   <${EntityFormModal}
-//     title="Edit CLI"
-//     fields=${cliFields}
-//     initial=${currentValues}
-//     onSubmit=${async (values) => { ... }}
-//     onClose=${close} />
-
-import { html } from '../html.js';
-import { useState } from 'preact/hooks';
-import { Modal } from './Modal.js';
-
-export function EntityFormModal({
-  title, fields, initial = {}, submitLabel = 'Save',
-  readOnlyKeys = [],
-  onSubmit, onClose, onTest, testLabel = 'Test',
-  danger,
-}) {
-  const [draft, setDraft] = useState(() => ({ ...initialFrom(fields), ...initial }));
-  const [saving, setSaving] = useState(false);
-  const [testing, setTesting] = useState(false);
-  const [testResult, setTestResult] = useState(null);
-
-  // A field is read-only if its key is in the static `readOnlyKeys`
-  // prop OR its own `readOnly` predicate (called with the current
-  // draft) returns true. The predicate lets a field react to other
-  // fields' values — e.g. lock newSessionIdArgs once a known `type`
-  // is picked, since those args are an integration contract with the
-  // upstream CLI, not a user knob.
-  const isReadOnly = (field) => {
-    if (readOnlyKeys.includes(field.key)) return true;
-    if (typeof field.readOnly === 'function') {
-      try { return !!field.readOnly(draft); } catch { return false; }
-    }
-    return !!field.readOnly;
-  };
-
-  const submit = async (ev) => {
-    ev?.preventDefault?.();
-    for (const f of fields) {
-      if (f.required && !String(draft[f.key] || '').trim()) return;
-    }
-    setSaving(true);
-    try { await onSubmit?.(draft); onClose?.(); }
-    catch { /* caller toasts; stay open */ }
-    finally { setSaving(false); }
-  };
-
-  const runTest = async () => {
-    if (!onTest) return;
-    setTesting(true);
-    setTestResult(null);
-    try {
-      const r = await onTest(draft);
-      setTestResult(r);
-    } catch (e) {
-      setTestResult({ ok: false, spawnError: String(e?.message || e) });
-    } finally {
-      setTesting(false);
-    }
-  };
-
-  const footer = html`
-    ${onTest ? html`
-      <button type="button" class="action small subtle entity-test-button"
-              disabled=${testing} onClick=${runTest}>
-        ${testing ? 'Testing…' : testLabel}
-      </button>` : null}
-    <button type="button" class="action small subtle" onClick=${onClose}>Cancel</button>
-    <button type="submit" form="entity-form-modal" class=${`action small ${danger ? 'danger' : 'primary'}`}
-            disabled=${saving}>
-      ${saving ? 'Saving…' : submitLabel}
-    </button>`;
-
-  return html`
-    <${Modal} title=${title} onClose=${onClose} width=${440} footer=${footer}>
-      <form id="entity-form-modal" class="entity-form" onSubmit=${submit}>
-        ${fields.map((f) => html`
-          <label class="entity-field" key=${f.key}>
-            <span class="entity-field-label">${f.label}</span>
-            ${f.type === 'select' ? html`
-              <select class="input" value=${draft[f.key] || ''}
-                      disabled=${isReadOnly(f)}
-                      onChange=${(e) => {
-                        const next = { ...draft, [f.key]: e.target.value };
-                        const sideEffects = f.onChange?.(e.target.value, next);
-                        setDraft(sideEffects ? { ...next, ...sideEffects } : next);
-                      }}>
-                ${(f.options || []).map((opt) => html`
-                  <option value=${opt.value}>${opt.label}</option>`)}
-              </select>
-            ` : f.type === 'iconRadio' ? html`
-              <div class=${`icon-radio${isReadOnly(f) ? ' is-disabled' : ''}`}>
-                ${(f.options || []).map((opt) => html`
-                  <button type="button" key=${opt.value}
-                          class=${`icon-radio-opt${draft[f.key] === opt.value ? ' is-active' : ''}`}
-                          disabled=${isReadOnly(f)}
-                          onClick=${() => {
-                            if (isReadOnly(f)) return;
-                            const next = { ...draft, [f.key]: opt.value };
-                            const sideEffects = f.onChange?.(opt.value, next);
-                            setDraft(sideEffects ? { ...next, ...sideEffects } : next);
-                          }}>
-                    ${opt.icon ? html`<span class="icon-radio-icon">${opt.icon}</span>` : null}
-                    <span>${opt.label}</span>
-                  </button>`)}
-              </div>
-            ` : f.type === 'checkbox' ? html`
-              <span class="entity-checkbox-row">
-                <input type="checkbox" checked=${!!draft[f.key]}
-                       disabled=${isReadOnly(f)}
-                       onChange=${(e) => setDraft({ ...draft, [f.key]: e.target.checked })} />
-                ${f.hint ? html`<span class="entity-field-hint">${typeof f.hint === 'function' ? f.hint(draft) : f.hint}</span>` : null}
-              </span>
-            ` : html`
-              <input type=${f.type || 'text'}
-                     class=${`input${f.mono ? ' mono' : ''}`}
-                     placeholder=${f.placeholder || ''}
-                     value=${draft[f.key] || ''}
-                     readonly=${isReadOnly(f)}
-                     onInput=${(e) => setDraft({ ...draft, [f.key]: e.target.value })}
-                     autoFocus=${f.autoFocus && !isReadOnly(f)} />`}
-            ${f.hint && f.type !== 'checkbox' ? html`
-              <span class="entity-field-hint">${typeof f.hint === 'function' ? f.hint(draft) : f.hint}</span>` : null}
-          </label>`)}
-        ${testResult ? html`
-          <div class=${`entity-test-result ${testResult.ok ? 'is-ok' : 'is-fail'}`}>
-            <div class="entity-test-summary">
-              ${testResult.ok ? '✓' : '✗'} ${testResult.ok ? 'works' : 'failed'}
-              ${typeof testResult.exitCode === 'number' ? html` · exit ${testResult.exitCode}` : null}
-              ${typeof testResult.durationMs === 'number' ? html` · ${testResult.durationMs}ms` : null}
-              ${testResult.timedOut ? html` · timed out` : null}
-              ${testResult.matchedType === true ? html` · type matches ${testResult.expectedType}` : null}
-              ${testResult.matchedType === false ? html` · type mismatch (expected ${testResult.expectedType})` : null}
-            </div>
-            ${testResult.spawnError ? html`<pre class="entity-test-out">${testResult.spawnError}</pre>` : null}
-            ${testResult.stdout ? html`<pre class="entity-test-out">${testResult.stdout}</pre>` : null}
-            ${testResult.stderr ? html`<pre class="entity-test-out is-stderr">${testResult.stderr}</pre>` : null}
-          </div>` : null}
-      </form>
-    </${Modal}>`;
-}
-
-function initialFrom(fields) {
-  const out = {};
-  for (const f of fields) out[f.key] = f.default ?? '';
-  return out;
-}
+// Generic create/edit form rendered inside a Modal. Field shape mirrors
+// the createFields prop used by Picker.js so the same field-definition
+// objects power both the inline-create-in-popover flow and the standalone
+// edit flow used from Configure.
+//
+// Usage:
+//   <${EntityFormModal}
+//     title="Edit CLI"
+//     fields=${cliFields}
+//     initial=${currentValues}
+//     onSubmit=${async (values) => { ... }}
+//     onClose=${close} />
+
+import { html } from '../html.js';
+import { useState } from 'preact/hooks';
+import { Modal } from './Modal.js';
+
+export function EntityFormModal({
+  title, fields, initial = {}, submitLabel = 'Save',
+  readOnlyKeys = [],
+  onSubmit, onClose, onTest, testLabel = 'Test',
+  danger,
+}) {
+  const [draft, setDraft] = useState(() => ({ ...initialFrom(fields), ...initial }));
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState(null);
+
+  // A field is read-only if its key is in the static `readOnlyKeys`
+  // prop OR its own `readOnly` predicate (called with the current
+  // draft) returns true. The predicate lets a field react to other
+  // fields' values — e.g. lock newSessionIdArgs once a known `type`
+  // is picked, since those args are an integration contract with the
+  // upstream CLI, not a user knob.
+  const isReadOnly = (field) => {
+    if (readOnlyKeys.includes(field.key)) return true;
+    if (typeof field.readOnly === 'function') {
+      try { return !!field.readOnly(draft); } catch { return false; }
+    }
+    return !!field.readOnly;
+  };
+
+  const submit = async (ev) => {
+    ev?.preventDefault?.();
+    for (const f of fields) {
+      if (f.required && !String(draft[f.key] || '').trim()) return;
+    }
+    setSaving(true);
+    try { await onSubmit?.(draft); onClose?.(); }
+    catch { /* caller toasts; stay open */ }
+    finally { setSaving(false); }
+  };
+
+  const runTest = async () => {
+    if (!onTest) return;
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const r = await onTest(draft);
+      setTestResult(r);
+    } catch (e) {
+      setTestResult({ ok: false, spawnError: String(e?.message || e) });
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  const footer = html`
+    ${onTest ? html`
+      <button type="button" class="action small subtle entity-test-button"
+              disabled=${testing} onClick=${runTest}>
+        ${testing ? 'Testing…' : testLabel}
+      </button>` : null}
+    <button type="button" class="action small subtle" onClick=${onClose}>Cancel</button>
+    <button type="submit" form="entity-form-modal" class=${`action small ${danger ? 'danger' : 'primary'}`}
+            disabled=${saving}>
+      ${saving ? 'Saving…' : submitLabel}
+    </button>`;
+
+  return html`
+    <${Modal} title=${title} onClose=${onClose} width=${440} footer=${footer}>
+      <form id="entity-form-modal" class="entity-form" onSubmit=${submit}>
+        ${fields.map((f) => html`
+          <label class="entity-field" key=${f.key}>
+            <span class="entity-field-label">${f.label}</span>
+            ${f.type === 'select' ? html`
+              <select class="input" value=${draft[f.key] || ''}
+                      disabled=${isReadOnly(f)}
+                      onChange=${(e) => {
+                        const next = { ...draft, [f.key]: e.target.value };
+                        const sideEffects = f.onChange?.(e.target.value, next);
+                        setDraft(sideEffects ? { ...next, ...sideEffects } : next);
+                      }}>
+                ${(f.options || []).map((opt) => html`
+                  <option value=${opt.value}>${opt.label}</option>`)}
+              </select>
+            ` : f.type === 'iconRadio' ? html`
+              <div class=${`icon-radio${isReadOnly(f) ? ' is-disabled' : ''}`}>
+                ${(f.options || []).map((opt) => html`
+                  <button type="button" key=${opt.value}
+                          class=${`icon-radio-opt${draft[f.key] === opt.value ? ' is-active' : ''}`}
+                          disabled=${isReadOnly(f)}
+                          onClick=${() => {
+                            if (isReadOnly(f)) return;
+                            const next = { ...draft, [f.key]: opt.value };
+                            const sideEffects = f.onChange?.(opt.value, next);
+                            setDraft(sideEffects ? { ...next, ...sideEffects } : next);
+                          }}>
+                    ${opt.icon ? html`<span class="icon-radio-icon">${opt.icon}</span>` : null}
+                    <span>${opt.label}</span>
+                  </button>`)}
+              </div>
+            ` : f.type === 'checkbox' ? html`
+              <span class="entity-checkbox-row">
+                <input type="checkbox" checked=${!!draft[f.key]}
+                       disabled=${isReadOnly(f)}
+                       onChange=${(e) => setDraft({ ...draft, [f.key]: e.target.checked })} />
+                ${f.hint ? html`<span class="entity-field-hint">${typeof f.hint === 'function' ? f.hint(draft) : f.hint}</span>` : null}
+              </span>
+            ` : html`
+              <input type=${f.type || 'text'}
+                     class=${`input${f.mono ? ' mono' : ''}`}
+                     placeholder=${f.placeholder || ''}
+                     value=${draft[f.key] || ''}
+                     readonly=${isReadOnly(f)}
+                     onInput=${(e) => setDraft({ ...draft, [f.key]: e.target.value })}
+                     autoFocus=${f.autoFocus && !isReadOnly(f)} />`}
+            ${f.hint && f.type !== 'checkbox' ? html`
+              <span class="entity-field-hint">${typeof f.hint === 'function' ? f.hint(draft) : f.hint}</span>` : null}
+          </label>`)}
+        ${testResult ? html`
+          <div class=${`entity-test-result ${testResult.ok ? 'is-ok' : 'is-fail'}`}>
+            <div class="entity-test-summary">
+              ${testResult.ok ? '✓' : '✗'} ${testResult.ok ? 'works' : 'failed'}
+              ${typeof testResult.exitCode === 'number' ? html` · exit ${testResult.exitCode}` : null}
+              ${typeof testResult.durationMs === 'number' ? html` · ${testResult.durationMs}ms` : null}
+              ${testResult.timedOut ? html` · timed out` : null}
+              ${testResult.matchedType === true ? html` · type matches ${testResult.expectedType}` : null}
+              ${testResult.matchedType === false ? html` · type mismatch (expected ${testResult.expectedType})` : null}
+            </div>
+            ${testResult.spawnError ? html`<pre class="entity-test-out">${testResult.spawnError}</pre>` : null}
+            ${testResult.stdout ? html`<pre class="entity-test-out">${testResult.stdout}</pre>` : null}
+            ${testResult.stderr ? html`<pre class="entity-test-out is-stderr">${testResult.stderr}</pre>` : null}
+          </div>` : null}
+      </form>
+    </${Modal}>`;
+}
+
+function initialFrom(fields) {
+  const out = {};
+  for (const f of fields) out[f.key] = f.default ?? '';
+  return out;
+}

package/public/js/components/Modal.js

@@ -1,57 +1,57 @@
-// Centered modal dialog with backdrop. Closes via Esc, the corner X,
-// or a click on the backdrop.
-//
-//   <${Modal} onClose=${close} title="Choose CLI" width=${440}
-//             footer=${html`<button ...>Cancel</button> ...`}>
-//     ...body (scrolls)...
-//   </${Modal}>
-//
-// When `footer` is given it renders in a fixed .modal-foot below the
-// scrollable body — the body grows/scrolls between a pinned head and a
-// pinned footer (the .modal is a flex column capped at 90vh).
-
-import { html } from '../html.js';
-import { useEffect, useRef } from 'preact/hooks';
-import { createPortal } from 'preact/compat';
-
-export function Modal({ title, width = 440, onClose, children, footer }) {
-  const panelRef = useRef(null);
-
-  useEffect(() => {
-    const onKey = (ev) => { if (ev.key === 'Escape') onClose?.(); };
-    document.addEventListener('keydown', onKey, true);
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    return () => {
-      document.removeEventListener('keydown', onKey, true);
-      document.body.style.overflow = prev;
-    };
-  }, [onClose]);
-
-  const onBackdrop = (ev) => {
-    if (ev.target === ev.currentTarget) onClose?.();
-  };
-
-  return createPortal(
-    html`<div class="modal-backdrop" onMouseDown=${onBackdrop}>
-      <div ref=${panelRef} class="modal modal-picker"
-           style=${`width:${width}px;max-width:calc(100vw - 32px);`}
-           role="dialog" aria-modal="true">
-        ${title ? html`
-          <div class="modal-head">
-            <h2>${title}</h2>
-            <button class="modal-close" type="button"
-                    aria-label="Close" onClick=${onClose}>
-              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-                <line x1="3" y1="3" x2="13" y2="13"/>
-                <line x1="13" y1="3" x2="3" y2="13"/>
-              </svg>
-            </button>
-          </div>` : null}
-        <div class="modal-body">${children}</div>
-        ${footer ? html`<div class="modal-foot">${footer}</div>` : null}
-      </div>
-    </div>`,
-    document.body
-  );
-}
+// Centered modal dialog with backdrop. Closes via Esc, the corner X,
+// or a click on the backdrop.
+//
+//   <${Modal} onClose=${close} title="Choose CLI" width=${440}
+//             footer=${html`<button ...>Cancel</button> ...`}>
+//     ...body (scrolls)...
+//   </${Modal}>
+//
+// When `footer` is given it renders in a fixed .modal-foot below the
+// scrollable body — the body grows/scrolls between a pinned head and a
+// pinned footer (the .modal is a flex column capped at 90vh).
+
+import { html } from '../html.js';
+import { useEffect, useRef } from 'preact/hooks';
+import { createPortal } from 'preact/compat';
+
+export function Modal({ title, width = 440, onClose, children, footer }) {
+  const panelRef = useRef(null);
+
+  useEffect(() => {
+    const onKey = (ev) => { if (ev.key === 'Escape') onClose?.(); };
+    document.addEventListener('keydown', onKey, true);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.removeEventListener('keydown', onKey, true);
+      document.body.style.overflow = prev;
+    };
+  }, [onClose]);
+
+  const onBackdrop = (ev) => {
+    if (ev.target === ev.currentTarget) onClose?.();
+  };
+
+  return createPortal(
+    html`<div class="modal-backdrop" onMouseDown=${onBackdrop}>
+      <div ref=${panelRef} class="modal modal-picker"
+           style=${`width:${width}px;max-width:calc(100vw - 32px);`}
+           role="dialog" aria-modal="true">
+        ${title ? html`
+          <div class="modal-head">
+            <h2>${title}</h2>
+            <button class="modal-close" type="button"
+                    aria-label="Close" onClick=${onClose}>
+              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                <line x1="3" y1="3" x2="13" y2="13"/>
+                <line x1="13" y1="3" x2="3" y2="13"/>
+              </svg>
+            </button>
+          </div>` : null}
+        <div class="modal-body">${children}</div>
+        ${footer ? html`<div class="modal-foot">${footer}</div>` : null}
+      </div>
+    </div>`,
+    document.body
+  );
+}

package/public/js/components/OfflineBanner.js

@@ -1,67 +1,67 @@
-// Fullscreen overlay shown when the backend is offline. Blocks
-// interaction with the rest of the UI until backend comes back.
-//
-// The hosted frontend (https://bakapiano.github.io/ccsm/v1/) can't
-// spawn processes directly, so we surface a ccsm://start link instead.
-// Windows hands that off to the registered protocol handler
-// (ccsm.cmd), which spawns the backend silently. Our health probe
-// picks it up on the next tick and the overlay auto-hides.
-//
-// First click triggers a Windows confirmation dialog ("Open ccsm.cmd?").
-// User can check "Always allow" to suppress future prompts.
-
-import { html } from '../html.js';
-import { useEffect, useState } from 'preact/hooks';
-import { serverHealth } from '../state.js';
-import { refreshAll } from '../api.js';
-import { BrandMark } from '../icons.js';
-
-export function OfflineBanner() {
-  const h = serverHealth.value;
-  const offline = h.state === 'offline';
-  const [clicked, setClicked] = useState(false);
-
-  // We used to silently fire ccsm://start via a hidden iframe the
-  // moment the backend went offline. Even when the user had OK'd
-  // "Always allow" once, some browsers still flashed a momentary
-  // confirmation prompt — and first-time visitors got a "Open
-  // ccsm.cmd?" dialog with no apparent trigger, which is a bad UX.
-  // The Start button below is the only path that fires the protocol
-  // now; the health poll picks the backend up automatically once
-  // the user clicks it (or starts ccsm from a terminal / shortcut).
-
-  useEffect(() => {
-    if (h.state === 'online' && clicked) {
-      refreshAll().catch(() => {});
-      setClicked(false);
-    }
-  }, [h.state, clicked]);
-
-  if (!offline) return null;
-
-  return html`
-    <div class="offline-overlay" role="dialog" aria-modal="true" aria-labelledby="offline-title">
-      <div class="offline-card">
-        <div class="offline-brand"><${BrandMark} /></div>
-        <h1 id="offline-title" class="offline-title">Backend not running</h1>
-        <p class="offline-copy">
-          ccsm's local backend isn't reachable. Click Start to launch it —
-          Windows may ask for permission once. Tick <em>Always allow</em>
-          to silence future prompts.
-        </p>
-        <div class="offline-actions">
-          <a class="action primary big" href="ccsm://start"
-             onClick=${() => setClicked(true)}>Start ccsm</a>
-        </div>
-        <details class="offline-fallback">
-          <summary>Don't have ccsm installed?</summary>
-          <div class="offline-fallback-body">
-            <p>Install once via npm, then come back here:</p>
-            <pre><code>npm i -g @bakapiano/ccsm</code></pre>
-            <p>Or run a one-shot trial without installing:</p>
-            <pre><code>npx @bakapiano/ccsm</code></pre>
-          </div>
-        </details>
-      </div>
-    </div>`;
-}
+// Fullscreen overlay shown when the backend is offline. Blocks
+// interaction with the rest of the UI until backend comes back.
+//
+// The hosted frontend (https://bakapiano.github.io/ccsm/v1/) can't
+// spawn processes directly, so we surface a ccsm://start link instead.
+// Windows hands that off to the registered protocol handler
+// (ccsm.cmd), which spawns the backend silently. Our health probe
+// picks it up on the next tick and the overlay auto-hides.
+//
+// First click triggers a Windows confirmation dialog ("Open ccsm.cmd?").
+// User can check "Always allow" to suppress future prompts.
+
+import { html } from '../html.js';
+import { useEffect, useState } from 'preact/hooks';
+import { serverHealth } from '../state.js';
+import { refreshAll } from '../api.js';
+import { BrandMark } from '../icons.js';
+
+export function OfflineBanner() {
+  const h = serverHealth.value;
+  const offline = h.state === 'offline';
+  const [clicked, setClicked] = useState(false);
+
+  // We used to silently fire ccsm://start via a hidden iframe the
+  // moment the backend went offline. Even when the user had OK'd
+  // "Always allow" once, some browsers still flashed a momentary
+  // confirmation prompt — and first-time visitors got a "Open
+  // ccsm.cmd?" dialog with no apparent trigger, which is a bad UX.
+  // The Start button below is the only path that fires the protocol
+  // now; the health poll picks the backend up automatically once
+  // the user clicks it (or starts ccsm from a terminal / shortcut).
+
+  useEffect(() => {
+    if (h.state === 'online' && clicked) {
+      refreshAll().catch(() => {});
+      setClicked(false);
+    }
+  }, [h.state, clicked]);
+
+  if (!offline) return null;
+
+  return html`
+    <div class="offline-overlay" role="dialog" aria-modal="true" aria-labelledby="offline-title">
+      <div class="offline-card">
+        <div class="offline-brand"><${BrandMark} /></div>
+        <h1 id="offline-title" class="offline-title">Backend not running</h1>
+        <p class="offline-copy">
+          ccsm's local backend isn't reachable. Click Start to launch it —
+          Windows may ask for permission once. Tick <em>Always allow</em>
+          to silence future prompts.
+        </p>
+        <div class="offline-actions">
+          <a class="action primary big" href="ccsm://start"
+             onClick=${() => setClicked(true)}>Start ccsm</a>
+        </div>
+        <details class="offline-fallback">
+          <summary>Don't have ccsm installed?</summary>
+          <div class="offline-fallback-body">
+            <p>Install once via npm, then come back here:</p>
+            <pre><code>npm i -g @bakapiano/ccsm</code></pre>
+            <p>Or run a one-shot trial without installing:</p>
+            <pre><code>npx @bakapiano/ccsm</code></pre>
+          </div>
+        </details>
+      </div>
+    </div>`;
+}

package/public/js/components/PageTitleBar.js

@@ -1,13 +1,13 @@
-// Thin page-title strip rendered at the top of every page's main panel.
-// Matches the sidebar collapse-toggle height so the eye sees a single
-// 28px-tall row spanning the top of the whole window.
-
-import { html } from '../html.js';
-
-export function PageTitleBar({ title, children }) {
-  return html`
-    <header class="page-title-bar">
-      <div class="page-title-bar-title">${title}</div>
-      ${children ? html`<div class="page-title-bar-actions">${children}</div>` : null}
-    </header>`;
-}
+// Thin page-title strip rendered at the top of every page's main panel.
+// Matches the sidebar collapse-toggle height so the eye sees a single
+// 28px-tall row spanning the top of the whole window.
+
+import { html } from '../html.js';
+
+export function PageTitleBar({ title, children }) {
+  return html`
+    <header class="page-title-bar">
+      <div class="page-title-bar-title">${title}</div>
+      ${children ? html`<div class="page-title-bar-actions">${children}</div>` : null}
+    </header>`;
+}