@matware/e2e-runner 1.3.1 → 1.5.0

package/templates/dashboard/styles/view-tools.css

@@ -0,0 +1,206 @@
+/* ═══════════════════════════════════════════════════════════════════
+   VIEW · TOOLS — Module analysis, capture, analyze, agent prompts
+   ═══════════════════════════════════════════════════════════════════ */
+
+.tool-card{
+  background:var(--surface);
+  border:1px solid var(--border);
+  border-radius:var(--r);
+  padding:18px 20px 16px;
+  margin-bottom:16px;
+  position:relative;
+}
+.tool-card::before{
+  content:'';position:absolute;top:0;left:18px;width:24px;height:1px;
+  background:var(--phosphor);opacity:.5;
+}
+.tool-card-head{
+  display:flex;align-items:center;justify-content:space-between;
+  gap:14px;margin-bottom:10px;
+}
+.tool-card-title{
+  font-family:var(--display);
+  font-size:18px;font-weight:400;letter-spacing:-.005em;
+  color:var(--text);
+  display:flex;align-items:center;gap:10px;
+}
+.tool-card-icon{
+  font-size:14px;opacity:.7;color:var(--phosphor);
+}
+.tool-card-actions{display:flex;gap:8px;align-items:center}
+.tool-card-desc{
+  font-family:var(--mono);font-size:11px;
+  color:var(--text2);
+  letter-spacing:.01em;line-height:1.55;
+  margin-bottom:14px;
+  padding-bottom:12px;
+  border-bottom:1px solid var(--border);
+}
+.tool-card-desc code{
+  font-family:var(--mono);font-size:10.5px;
+  background:var(--bg-2);
+  padding:1px 6px;border-radius:2px;
+  color:var(--phosphor);
+}
+.tool-card-body{padding-top:4px}
+
+.tool-empty{
+  font-family:var(--mono);font-size:11px;color:var(--text3);
+  padding:18px 6px;text-align:center;letter-spacing:.04em;
+}
+
+.tool-form-row{
+  display:flex;align-items:center;gap:10px;margin-bottom:10px;
+}
+.tool-form-row input[type="text"]{
+  flex:1;
+  padding:8px 12px;
+  background:var(--bg-2);border:1px solid var(--border);
+  border-radius:var(--r);
+  font-family:var(--mono);font-size:11px;
+  color:var(--text);outline:none;
+  transition:border-color .15s,background .15s;
+}
+.tool-form-row input[type="text"]:focus{
+  border-color:var(--phosphor);background:var(--surface);
+}
+.tool-form-row input[type="text"]::placeholder{color:var(--text3);font-style:italic}
+.tool-form-check{
+  display:inline-flex;align-items:center;gap:6px;
+  font-family:var(--mono);font-size:10px;
+  color:var(--text2);letter-spacing:.06em;
+  text-transform:uppercase;font-weight:600;
+  user-select:none;cursor:pointer;
+  padding:0 4px;
+}
+.tool-form-check input{margin:0;accent-color:var(--phosphor)}
+.tool-result{
+  margin-top:10px;
+  font-family:var(--mono);font-size:11px;
+  color:var(--text2);
+}
+.tool-result.is-error{color:var(--crimson)}
+.tool-result img{
+  max-width:100%;border:1px solid var(--border);border-radius:var(--r);
+  margin-top:8px;display:block;
+}
+.tool-result pre{
+  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r);
+  padding:10px 12px;font-family:var(--mono);font-size:10.5px;
+  color:var(--text);max-height:300px;overflow:auto;
+  white-space:pre-wrap;word-break:break-word;
+}
+
+/* ─── Module analysis layout ───────────────────────────────────── */
+.mod-summary{
+  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
+  margin-bottom:18px;
+}
+.mod-summary-cell{
+  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r);
+  padding:12px 14px;
+}
+.mod-summary-cell-lbl{
+  font-family:var(--mono);font-size:8px;font-weight:700;
+  color:var(--text3);letter-spacing:.24em;text-transform:uppercase;
+  margin-bottom:6px;
+}
+.mod-summary-cell-val{
+  font-family:var(--display);font-size:26px;font-weight:400;
+  color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
+}
+.mod-summary-cell.warn .mod-summary-cell-val{color:var(--amber)}
+.mod-summary-cell.signal .mod-summary-cell-val{color:var(--phosphor);text-shadow:0 0 12px var(--phosphor-glow)}
+
+.mod-section-title{
+  font-family:var(--mono);font-size:9px;font-weight:700;
+  color:var(--text3);letter-spacing:.24em;text-transform:uppercase;
+  margin:20px 0 10px;
+  padding-bottom:6px;border-bottom:1px solid var(--border);
+  display:flex;align-items:center;gap:10px;
+}
+.mod-section-title .count{
+  font-family:var(--mono);font-size:10px;font-weight:500;
+  color:var(--text);background:var(--bg-2);border:1px solid var(--border);
+  padding:1px 8px;border-radius:999px;letter-spacing:.04em;
+}
+
+.mod-row{
+  display:flex;align-items:flex-start;gap:14px;
+  padding:10px 12px;
+  border:1px solid var(--border);border-radius:var(--r);
+  background:var(--bg-2);
+  margin-bottom:8px;
+}
+.mod-row.unused{border-color:rgba(255,179,71,.3);background:var(--amber-dim)}
+.mod-row-main{flex:1;min-width:0}
+.mod-row-name{
+  font-family:var(--mono);font-size:12px;color:var(--text);
+  font-weight:600;margin-bottom:4px;
+}
+.mod-row-desc{
+  font-family:var(--mono);font-size:10px;color:var(--text2);
+  margin-bottom:4px;line-height:1.45;
+}
+.mod-row-meta{
+  font-family:var(--mono);font-size:9.5px;color:var(--text3);
+  letter-spacing:.04em;
+  display:flex;gap:14px;flex-wrap:wrap;
+}
+.mod-row-usage{
+  font-family:var(--mono);font-size:10px;color:var(--phosphor);
+  font-weight:600;font-variant-numeric:tabular-nums;
+  white-space:nowrap;align-self:center;
+}
+.mod-row.unused .mod-row-usage{color:var(--amber)}
+
+.cand-row{
+  border:1px solid var(--border);border-radius:var(--r);
+  background:var(--bg-2);
+  padding:12px 14px;margin-bottom:8px;
+}
+.cand-row-head{
+  display:flex;align-items:center;gap:14px;
+  margin-bottom:8px;
+}
+.cand-name{
+  font-family:var(--mono);font-size:12px;color:var(--text);font-weight:600;
+}
+.cand-stats{
+  margin-left:auto;
+  font-family:var(--mono);font-size:9.5px;
+  color:var(--text3);letter-spacing:.04em;
+  display:flex;gap:14px;
+}
+.cand-stats strong{color:var(--phosphor);font-variant-numeric:tabular-nums}
+.cand-actions-preview{
+  font-family:var(--mono);font-size:10px;
+  color:var(--text2);
+  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
+  padding:8px 10px;
+  white-space:pre-wrap;word-break:break-word;
+  margin-bottom:6px;line-height:1.55;
+}
+.cand-used-by{
+  font-family:var(--mono);font-size:9.5px;color:var(--text3);
+  letter-spacing:.02em;line-height:1.6;
+}
+.cand-used-by strong{color:var(--text2);font-weight:500}
+
+/* ─── Agent prompt rows ──────────────────────────────────────── */
+.agent-prompt-row{
+  display:flex;align-items:center;gap:14px;
+  padding:10px 12px;
+  border:1px solid var(--border);border-radius:var(--r);
+  background:var(--bg-2);
+  margin-bottom:8px;
+}
+.agent-prompt-info{flex:1;display:flex;flex-direction:column;gap:2px}
+.agent-prompt-info strong{
+  font-family:var(--mono);font-size:11px;color:var(--phosphor);
+  letter-spacing:.04em;text-transform:none;
+}
+.agent-prompt-info span{
+  font-family:var(--mono);font-size:10px;color:var(--text2);
+  line-height:1.45;
+}

package/templates/dashboard/styles/view-watch.css

@@ -1,53 +1,210 @@
-/* ── Watch View: Project Cards ── */
-.watch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:24px}
-.watch-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;transition:border-color .2s,box-shadow .2s}
-.watch-card:hover{border-color:var(--border-hi);box-shadow:0 2px 12px rgba(0,0,0,.25)}
-.watch-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
-.watch-card-name{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
-.watch-card-icons{display:flex;gap:6px;flex-shrink:0;margin-left:8px}
-.watch-card-icons .btn{padding:3px 8px;font-size:10px}
-
-/* ── Sparkline ── */
-.watch-sparkline{height:40px;margin-bottom:10px}
+/* ═══════════════════════════════════════════════════════════════════
+   VIEW · WATCH — Project Telemetry Cards + Event Log
+   ═══════════════════════════════════════════════════════════════════ */
+
+.watch-grid{
+  display:grid;
+  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
+  gap:14px;margin-bottom:28px;
+}
+
+.watch-card{
+  background:var(--surface);
+  border:1px solid var(--border);
+  border-radius:var(--r);
+  padding:18px 18px 16px;
+  transition:border-color .25s,box-shadow .25s,transform .25s;
+  position:relative;overflow:hidden;
+}
+/* phosphor corner tick */
+.watch-card::before{
+  content:'';position:absolute;top:0;left:0;
+  width:18px;height:1px;background:var(--phosphor);opacity:.55;
+}
+.watch-card::after{
+  content:'';position:absolute;top:0;left:0;
+  width:1px;height:18px;background:var(--phosphor);opacity:.55;
+}
+.watch-card:hover{
+  border-color:var(--border-hi);
+  transform:translateY(-1px);
+  box-shadow:0 0 0 1px var(--border-hi),0 10px 30px rgba(0,0,0,.35);
+}
+
+.watch-card-header{
+  display:flex;align-items:center;justify-content:space-between;
+  margin-bottom:14px;
+}
+.watch-card-name{
+  font-family:var(--display);
+  font-size:18px;font-weight:400;
+  letter-spacing:-.01em;
+  color:var(--text);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+  flex:1;min-width:0;line-height:1.1;
+}
+.watch-card-icons{display:flex;gap:6px;flex-shrink:0;margin-left:10px}
+.watch-card-icons .btn{padding:3px 8px;font-size:9px;letter-spacing:.1em}
+
+/* Sparkline */
+.watch-sparkline{
+  height:44px;margin-bottom:12px;
+  padding:4px 0;
+  border-top:1px dashed var(--border);
+  border-bottom:1px dashed var(--border);
+  background:
+    repeating-linear-gradient(90deg,transparent 0 24px,rgba(158,242,106,.04) 24px 25px);
+}
 .watch-sparkline svg{width:100%;height:100%;display:block}
 
-/* ── Card Footer ── */
-.watch-card-footer{display:flex;align-items:center;justify-content:space-between;font-size:11px}
-.watch-card-status{display:flex;align-items:center;gap:6px}
-.watch-card-status .status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
-.watch-card-status .status-dot.green{background:var(--green);box-shadow:0 0 6px var(--green)}
-.watch-card-status .status-dot.red{background:var(--red);box-shadow:0 0 6px var(--red)}
-.watch-card-status .status-dot.amber{background:var(--amber);box-shadow:0 0 6px var(--amber)}
+/* Footer */
+.watch-card-footer{
+  display:flex;align-items:center;justify-content:space-between;
+  font-size:10px;
+  text-transform:uppercase;letter-spacing:.14em;
+  font-weight:600;
+}
+.watch-card-status{display:flex;align-items:center;gap:8px}
+.watch-card-status .status-dot{
+  width:8px;height:8px;border-radius:50%;flex-shrink:0;
+  position:relative;
+}
+.watch-card-status .status-dot.green{
+  background:var(--phosphor);
+  box-shadow:0 0 8px var(--phosphor-glow),0 0 2px var(--phosphor);
+}
+.watch-card-status .status-dot.red{
+  background:var(--crimson);
+  box-shadow:0 0 8px rgba(255,77,77,.5),0 0 2px var(--crimson);
+}
+.watch-card-status .status-dot.amber{
+  background:var(--amber);
+  box-shadow:0 0 8px rgba(255,179,71,.5);
+}
 .watch-card-status .status-dot.dim{background:var(--text3)}
-.watch-card-rate{font-weight:600}
-.watch-card-rate.green{color:var(--green)}
+
+.watch-card-rate{
+  font-family:var(--display);
+  font-weight:400;font-size:20px;letter-spacing:-.02em;
+  text-transform:none;
+  font-variant-numeric:tabular-nums;
+}
+.watch-card-rate.green{color:var(--phosphor);text-shadow:0 0 12px var(--phosphor-glow)}
 .watch-card-rate.amber{color:var(--amber)}
-.watch-card-rate.red{color:var(--red)}
+.watch-card-rate.red{color:var(--crimson)}
 
-.watch-card-meta{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-size:10px;color:var(--text3)}
+.watch-card-meta{
+  display:flex;flex-direction:column;gap:5px;
+  margin-top:14px;padding-top:12px;
+  border-top:1px solid var(--border);
+  font-size:10px;color:var(--text3);
+  letter-spacing:.04em;
+}
 .watch-card-meta span{display:flex;align-items:center;gap:6px}
-.watch-card-countdown{color:var(--accent);font-weight:500;font-variant-numeric:tabular-nums}
+.watch-card-countdown{
+  color:var(--beacon);font-weight:600;
+  font-variant-numeric:tabular-nums;
+  letter-spacing:.06em;
+}
 .watch-card-commit{font-family:var(--mono);color:var(--text3)}
 
-/* ── Event Log ── */
-.watch-event-log{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
-.watch-event-log-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface2)}
-.watch-event-log-header .title{font-family:var(--sans);font-size:13px;font-weight:600}
-.watch-event-log-body{max-height:400px;overflow-y:auto}
-.watch-event-row{display:grid;grid-template-columns:120px 130px minmax(80px,1fr) 46px 74px 40px 52px 60px;align-items:center;gap:0;padding:7px 16px;border-bottom:1px solid var(--border);font-size:11px;transition:background .1s}
+/* ═══════════════════ Event Log ═══════════════════ */
+
+.watch-event-log{
+  background:var(--surface);
+  border:1px solid var(--border);
+  border-radius:var(--r);
+  overflow:hidden;
+  position:relative;
+  margin-top:12px;
+}
+.watch-event-log-header{
+  display:flex;align-items:center;justify-content:space-between;
+  padding:14px 18px 12px;
+  border-bottom:1px solid var(--border);
+  background:
+    repeating-linear-gradient(180deg,transparent 0 3px,rgba(158,242,106,.015) 3px 4px),
+    var(--bg-2);
+  position:relative;
+}
+.watch-event-log-header::before{
+  content:'LOG·STREAM';
+  font-family:var(--mono);font-size:8px;font-weight:700;
+  letter-spacing:.3em;color:var(--phosphor);
+  text-shadow:0 0 10px var(--phosphor-glow);
+  position:absolute;top:6px;right:20px;
+}
+.watch-event-log-header .title{
+  font-family:var(--display);
+  font-size:20px;font-weight:400;letter-spacing:-.01em;
+  margin-top:4px;
+}
+.watch-event-log-body{max-height:420px;overflow-y:auto}
+
+.watch-event-row{
+  display:grid;
+  grid-template-columns:120px 130px minmax(80px,1fr) 46px 74px 40px 52px 60px;
+  align-items:center;gap:0;
+  padding:8px 18px;
+  border-bottom:1px solid var(--border);
+  font-size:10px;transition:background .12s;
+}
 .watch-event-row:last-child{border-bottom:none}
-.watch-event-row:hover{background:var(--surface2)}
-.watch-event-row.we-header{font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;padding:6px 16px;background:var(--surface2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1}
-.watch-event-row.we-header:hover{background:var(--surface2)}
-.watch-event-time{color:var(--text3);font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.watch-event-project{color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px}
-.watch-event-suite{color:var(--accent);font-family:var(--mono);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px}
+.watch-event-row:hover{background:rgba(158,242,106,.025)}
+.watch-event-row.we-header{
+  font-size:8px;font-weight:700;
+  color:var(--text3);text-transform:uppercase;letter-spacing:.1em;
+  padding:10px 18px;
+  background:var(--bg-2);
+  border-bottom:1px solid var(--border);
+  position:sticky;top:0;z-index:1;
+}
+.watch-event-row.we-header > *{
+  padding-right:6px;
+}
+.watch-event-row.we-header:hover{background:var(--bg-2)}
+
+.watch-event-time{
+  color:var(--text3);
+  font-variant-numeric:tabular-nums;
+  font-family:var(--mono);font-size:10px;
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+  letter-spacing:.02em;
+}
+.watch-event-project{
+  color:var(--text);font-weight:500;
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+  padding-right:8px;
+}
+.watch-event-suite{
+  color:var(--beacon);
+  font-family:var(--mono);font-size:10px;
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+  padding-right:8px;
+}
 .watch-event-result{justify-self:center}
-.watch-event-counts{font-family:var(--mono);font-size:10px;color:var(--text2);white-space:nowrap;text-align:center}
-.watch-event-counts .we-counts-ok{color:var(--green)}
-.watch-event-rate{font-weight:600;color:var(--text2);font-variant-numeric:tabular-nums;text-align:right}
-.watch-event-duration{color:var(--text3);font-family:var(--mono);font-size:10px;text-align:right}
-.we-trigger{color:var(--text3);font-size:9px;padding:1px 6px;border-radius:8px;background:var(--surface3);white-space:nowrap;text-align:center;justify-self:end}
+.watch-event-counts{
+  font-family:var(--mono);font-size:10px;color:var(--text2);
+  white-space:nowrap;text-align:center;font-variant-numeric:tabular-nums;
+}
+.watch-event-counts .we-counts-ok{color:var(--phosphor)}
+.watch-event-rate{
+  font-weight:700;color:var(--text2);
+  font-variant-numeric:tabular-nums;text-align:right;
+  font-family:var(--mono);
+}
+.watch-event-duration{
+  color:var(--text3);font-family:var(--mono);
+  font-size:10px;text-align:right;
+  font-variant-numeric:tabular-nums;
+}
+.we-trigger{
+  color:var(--text3);font-size:8px;font-weight:700;
+  padding:2px 7px;border-radius:999px;
+  background:transparent;border:1px solid var(--border);
+  letter-spacing:.12em;text-transform:uppercase;
+  white-space:nowrap;text-align:center;justify-self:end;
+}
 
-/* ── Watch Table (legacy) ── */
+/* legacy watch table */
 .watch-jobs-table{width:100%;border-collapse:collapse;font-size:11px}