vibe-squire 1.0.0

package/dist/ui/public/operator.css

@@ -0,0 +1,706 @@
+:root {
+  --bg: #0f1210;
+  --surface: #171c19;
+  --surface2: #1e2521;
+  --border: #2a332e;
+  --text: #b8c4bc;
+  --text-muted: #8a9690;
+  --text-strong: #e8f0ea;
+  --accent: #3d9f7a;
+  --accent-dim: rgba(61, 159, 122, 0.18);
+  --danger: #c45c5c;
+  --warn: #c9a227;
+  --mono: 'IBM Plex Mono', ui-monospace, monospace;
+  --sans: 'Source Sans 3', system-ui, sans-serif;
+  font-family: var(--sans);
+  font-size: 16px;
+  line-height: 1.45;
+  color: var(--text);
+  background: var(--bg);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+code {
+  font-family: var(--mono);
+  font-size: 0.9em;
+}
+
+.shell {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  min-height: 100vh;
+}
+
+@media (max-width: 720px) {
+  .shell {
+    grid-template-columns: 1fr;
+  }
+  .nav-rail {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+.nav-rail {
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  padding: 1.25rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 700;
+  color: var(--text-strong);
+  letter-spacing: -0.02em;
+}
+
+.brand-mark {
+  color: var(--accent);
+  font-size: 1.25rem;
+}
+
+.brand-text {
+  font-size: 0.95rem;
+}
+
+.nav-live {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  font-size: 0.78rem;
+}
+
+.nav-live-label {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.nav-settings-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.nav-section-heading {
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--text);
+  opacity: 0.5;
+  margin: 0.5rem 0 0.15rem 0.65rem;
+}
+
+.nav-settings-group .nav-section-heading:first-child {
+  margin-top: 0;
+}
+
+.nav-link-nested {
+  padding-left: 1rem;
+  font-weight: 600;
+}
+
+.nav-link {
+  text-align: left;
+  padding: 0.5rem 0.65rem;
+  border-radius: 6px;
+  color: var(--text);
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.9rem;
+  transition: background 0.12s ease;
+}
+
+.nav-link:hover {
+  background: var(--surface2);
+  color: var(--text-strong);
+}
+
+.nav-link.active {
+  background: var(--accent-dim);
+  color: var(--accent);
+}
+
+.nav-foot {
+  margin-top: auto;
+  font-size: 0.72rem;
+  line-height: 1.35;
+}
+
+.main {
+  padding: 1.5rem 2rem 3rem;
+  max-width: 960px;
+}
+
+.page-head h1 {
+  margin: 0 0 0.35rem;
+  font-size: 1.65rem;
+  color: var(--text-strong);
+  font-weight: 700;
+}
+
+.muted {
+  color: var(--text);
+  opacity: 0.72;
+  font-size: 0.9rem;
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 1.1rem 1.25rem;
+}
+
+.card.compact {
+  padding: 0.85rem 1rem;
+}
+
+.card h2 {
+  margin: 0 0 0.75rem;
+  font-size: 1rem;
+  color: var(--text-strong);
+}
+
+.banner {
+  padding: 0.65rem 1rem;
+  border-radius: 8px;
+  font-size: 0.9rem;
+}
+
+.banner-error {
+  background: rgba(196, 92, 92, 0.12);
+  border: 1px solid rgba(196, 92, 92, 0.35);
+  color: #e8a8a8;
+}
+
+.banner-info {
+  background: rgba(201, 162, 39, 0.12);
+  border: 1px solid rgba(201, 162, 39, 0.35);
+  color: #e8d89a;
+}
+
+.banner-ok {
+  background: var(--accent-dim);
+  border: 1px solid rgba(61, 159, 122, 0.4);
+  color: #9fd4bc;
+}
+
+.actions-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.btn {
+  font-family: var(--sans);
+  font-weight: 600;
+  font-size: 0.875rem;
+  padding: 0.45rem 0.9rem;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--surface2);
+  color: var(--text-strong);
+  cursor: pointer;
+}
+
+.btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.btn.primary {
+  background: var(--accent);
+  border-color: transparent;
+  color: #0a120e;
+}
+
+.btn.ghost {
+  background: transparent;
+}
+
+.btn.danger {
+  border-color: rgba(196, 92, 92, 0.5);
+  color: #e8a8a8;
+}
+
+.btn-sm {
+  font-size: 0.78rem;
+  padding: 0.25rem 0.5rem;
+}
+
+.json-block {
+  margin: 0;
+  padding: 0.85rem;
+  background: #0a0d0b;
+  border-radius: 8px;
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  line-height: 1.4;
+  overflow: auto;
+  max-height: min(60vh, 520px);
+  color: #c5d4cc;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.kv {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.25rem 1rem;
+  margin: 0.5rem 0 0;
+  font-size: 0.85rem;
+}
+
+.kv dt {
+  margin: 0;
+  color: var(--text);
+  opacity: 0.7;
+}
+
+.kv dd {
+  margin: 0;
+  font-family: var(--mono);
+  color: var(--text-strong);
+}
+
+.sse {
+  font-family: var(--mono);
+  font-weight: 600;
+}
+
+.sse-connecting {
+  color: var(--warn);
+}
+
+.sse-open {
+  color: var(--accent);
+}
+
+.sse-closed {
+  color: var(--danger);
+}
+
+.form-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.form-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.fieldset-plain {
+  margin: 0;
+  padding: 0;
+  border: none;
+  min-inline-size: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.check-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-size: 0.95rem;
+}
+
+.check-row input {
+  margin-top: 0.2rem;
+}
+
+.setup-checklist {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.setup-checklist-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+}
+
+.setup-checklist-mark {
+  color: var(--text-muted);
+  font-weight: 600;
+  width: 1.25rem;
+  flex-shrink: 0;
+}
+
+.setup-checklist-text {
+  flex: 1;
+  min-width: 12rem;
+}
+
+.inline-form {
+  display: inline;
+  margin: 0;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.field.inline {
+  flex: 1;
+  min-width: 140px;
+}
+
+.field.inline.grow {
+  flex: 2;
+}
+
+.field-label {
+  font-weight: 600;
+  font-size: 0.82rem;
+  color: var(--text-strong);
+}
+
+.field-key {
+  font-family: var(--mono);
+  font-size: 0.72rem;
+}
+
+.input {
+  font-family: var(--sans);
+  font-size: 0.9rem;
+  padding: 0.45rem 0.6rem;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--text-strong);
+}
+
+.input.mono {
+  font-family: var(--mono);
+  font-size: 0.82rem;
+}
+
+.input-sm {
+  font-size: 0.8rem;
+  padding: 0.3rem 0.45rem;
+  width: 100%;
+}
+
+textarea.input {
+  resize: vertical;
+  min-height: 4rem;
+}
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+  align-items: flex-end;
+}
+
+.grow {
+  flex: 1;
+  min-width: 0;
+}
+
+.table-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.table-head h2 {
+  margin: 0;
+}
+
+.table-wrap {
+  overflow-x: auto;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+
+.data-table th,
+.data-table td {
+  text-align: left;
+  padding: 0.5rem 0.6rem;
+  border-bottom: 1px solid var(--border);
+  vertical-align: top;
+}
+
+.data-table th {
+  color: var(--text-strong);
+  font-weight: 600;
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  opacity: 0.85;
+}
+
+.data-table td.actions {
+  white-space: nowrap;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  align-items: center;
+}
+
+.wrap {
+  word-break: break-all;
+  max-width: 220px;
+}
+
+.pad {
+  padding: 0.5rem 0;
+}
+
+.id-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.id-list li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.45rem 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.id-list li:last-child {
+  border-bottom: none;
+}
+
+.js-mapping-row.is-editing .disp {
+  display: none;
+}
+
+.js-mapping-row.is-editing .edit {
+  display: block !important;
+}
+
+.js-mapping-row.is-editing .js-edit {
+  display: none;
+}
+
+.js-mapping-row.is-editing .js-save,
+.js-mapping-row.is-editing .js-cancel {
+  display: inline-block !important;
+}
+
+.js-mapping-row .js-save,
+.js-mapping-row .js-cancel {
+  display: none;
+}
+
+.status-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 0.85rem;
+}
+
+.status-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 0.9rem 1rem;
+}
+
+.status-card-head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.status-card-head h3 {
+  margin: 0;
+  font-size: 0.92rem;
+  font-weight: 700;
+  color: var(--text-strong);
+}
+
+.status-card-body {
+  font-size: 0.84rem;
+  line-height: 1.4;
+  color: var(--text);
+  opacity: 0.92;
+}
+
+.status-card-body p {
+  margin: 0 0 0.35rem;
+}
+
+.status-card-body p:last-child {
+  margin-bottom: 0;
+}
+
+.status-dot {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 50%;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
+}
+
+.status-dot.status-ok {
+  background: var(--accent);
+}
+
+.status-dot.status-warn {
+  background: var(--warn);
+}
+
+.status-dot.status-err {
+  background: var(--danger);
+}
+
+.status-dot.status-neutral {
+  background: #5a6b62;
+}
+
+.raw-details summary {
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--text-strong);
+  margin-bottom: 0.5rem;
+}
+
+.raw-details .json-block {
+  margin-top: 0.5rem;
+}
+
+/* —— Activity (sync run log) —— */
+.activity-run {
+  margin-bottom: 1rem;
+}
+
+.activity-run-summary {
+  margin-bottom: 0.35rem;
+}
+
+.activity-run-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.45rem 0.65rem;
+}
+
+.activity-run-time {
+  font-size: 0.82rem;
+  color: var(--text-strong);
+}
+
+.activity-pill {
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.2rem 0.45rem;
+  border-radius: 4px;
+  background: var(--surface2);
+  color: var(--text);
+}
+
+.activity-pill-phase-completed {
+  background: var(--accent-dim);
+  color: var(--accent);
+}
+
+.activity-pill-phase-aborted {
+  background: rgba(201, 162, 39, 0.15);
+  color: var(--warn);
+}
+
+.activity-pill-phase-failed {
+  background: rgba(196, 92, 92, 0.18);
+  color: var(--danger);
+}
+
+.activity-pill-phase-running {
+  background: rgba(120, 160, 200, 0.2);
+  color: var(--accent);
+}
+
+.activity-details {
+  margin-top: 0.75rem;
+  border-top: 1px solid var(--border);
+  padding-top: 0.65rem;
+}
+
+.activity-details-summary {
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.88rem;
+  color: var(--accent);
+  list-style: none;
+}
+
+.activity-details-summary::-webkit-details-marker {
+  display: none;
+}
+
+.activity-details[open] .activity-details-summary {
+  margin-bottom: 0.5rem;
+}
+
+.activity-items-wrap {
+  margin-top: 0.35rem;
+}
+
+.activity-pr-title {
+  font-size: 0.82rem;
+  margin-top: 0.2rem;
+  max-width: 28rem;
+}

package/dist/ui/views/activity.hbs

@@ -0,0 +1,14 @@
+{{#> layout title="Activity" active="activity" pageScript="operator-activity.js" navMinimal=navMinimal integrationNavEntries=integrationNavEntries}}
+  <div class="page">
+    <header class="page-head">
+      <h1>Activity</h1>
+      <p class="muted">Per-sync GitHub PR scout outcomes: created issues, skips, and bots filtered before sync. The list refreshes when the status stream updates; while a run is in progress it also polls briefly so rows update.</p>
+    </header>
+
+    <div id="activity-runs-root">
+      <div class="card activity-empty-card">
+        <p class="muted" style="margin:0">Loading activity&hellip;</p>
+      </div>
+    </div>
+  </div>
+{{/layout}}