Add sync coverage button, preflight-disable buttons, fix output wrapping (I2, I3, I6)

- I2: .wd-row now wraps and .wd-output takes the full row width, so streamed
  output no longer gets crushed beside the button on the filename's line.
- I3: split .webinar-dash into token scope + a new .wd-bar toolbar above a
  .wd-grid two-pane layout. Extracted renderAll (called from onload) which
  renders a global "Sync coverage" button, generalised runIngest's subprocess
  handling into a shared runClaude keyed by run id, and added spawnGate to
  preflight-disable both the sync and per-file ingest buttons when claude
  can't be spawned (no desktop Obsidian / no child_process). A successful
  ingest or sync now re-renders the dashboard instead of requiring reopen.
- I6: the right pane now shows the tracked script path and last-synced date
  from the coverage file's metadata, and flags when cfg.script disagrees
  with it.
- Minors: documented the unescaped-pipe split regex, added role="img" to the
  coverage meter alongside its aria-label.
This commit is contained in:
meels
2026-07-28 14:57:11 +02:00
parent 3bc1afa9f1
commit 9eb29bb41e
2 changed files with 167 additions and 76 deletions

View File

@@ -25,9 +25,9 @@
font-family: var(--wd-sans);
color: var(--wd-fg);
display: grid;
grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
gap: 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.theme-dark .webinar-dash {
@@ -55,11 +55,37 @@
--wd-danger: #ff5c50;
}
@media (max-width: 820px) {
.webinar-dash { grid-template-columns: minmax(0, 1fr); }
.wd-grid {
display: grid;
grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
gap: 24px;
}
.wd-grid > * { min-width: 0; }
.wd-bar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
border: 1px solid var(--wd-border);
border-radius: 4px;
padding: 8px 12px;
background: var(--wd-bg-subtle);
}
.webinar-dash > * { min-width: 0; }
.wd-btn-ghost {
background: transparent;
color: var(--wd-fg);
border-color: var(--wd-border-strong);
}
.wd-btn-ghost:hover {
background: var(--wd-bg-muted, var(--wd-bg-subtle));
border-color: var(--wd-border-strong);
}
@media (max-width: 820px) {
.wd-grid { grid-template-columns: minmax(0, 1fr); }
}
.wd-pane { display: flex; flex-direction: column; gap: 20px; }
@@ -76,7 +102,7 @@
.wd-block { display: flex; flex-direction: column; gap: 12px; }
.wd-row {
display: flex; align-items: center; gap: 12px;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
border: 1px solid var(--wd-border); border-radius: 4px;
padding: 12px 12px 12px 16px; background: var(--wd-bg);
}
@@ -166,6 +192,8 @@
.wd-status-done { color: var(--wd-ok); }
.wd-status-failed { color: var(--wd-danger); }
.wd-output {
flex-basis: 100%;
width: 100%;
font-family: var(--wd-mono); font-size: 11px; white-space: pre-wrap;
max-height: 220px; overflow: auto; margin-top: 8px;
border: 1px solid var(--wd-border); border-radius: 4px; padding: 8px;