@urateam/dashboard 0.1.4 → 0.1.6

package/dist/static/style.css

@@ -0,0 +1,648 @@
+/* Linear Agent Dashboard — Modern Refreshed CSS */
+
+/* ── Variables ────────────────────────────────────────────────── */
+:root {
+  /* Palette — light */
+  --color-bg:          #f8fafc;
+  --color-surface:     #ffffff;
+  --color-border:      #e2e8f0;
+  --color-text:        #0f172a;
+  --color-text-muted:  #64748b;
+  --color-green:       #22c55e;
+  --color-red:         #ef4444;
+  --color-yellow:      #eab308;
+  --color-gray:        #9ca3af;
+  --color-blue:        #3b82f6;
+  --color-orange:      #f97316;
+  --color-purple:      #8b5cf6;
+
+  /* Nav */
+  --color-nav-bg:      #0f172a;
+  --color-nav-text:    #f1f5f9;
+  --color-nav-accent:  #38bdf8;
+
+  /* Elevation */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow:    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+
+  /* Shape */
+  --radius:    8px;
+  --radius-sm: 4px;
+  --radius-xs: 2px;
+}
+
+/* ── Dark mode ────────────────────────────────────────────────── */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg:         #0f172a;
+    --color-surface:    #1e293b;
+    --color-border:     #334155;
+    --color-text:       #f1f5f9;
+    --color-text-muted: #94a3b8;
+    --color-nav-bg:     #020617;
+    --color-nav-text:   #f1f5f9;
+  }
+}
+
+/* ── Reset ────────────────────────────────────────────────────── */
+*, *::before, *::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* ── Base typography ──────────────────────────────────────────── */
+body {
+  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  background: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.6;
+  font-size: 0.9375rem;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── Sticky navigation ────────────────────────────────────────── */
+nav {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: var(--color-nav-bg);
+  color: var(--color-nav-text);
+  padding: 0 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  height: 3.5rem;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
+}
+
+nav .brand {
+  font-weight: 700;
+  font-size: 1rem;
+  letter-spacing: -0.01em;
+  margin-right: 1.5rem;
+  color: var(--color-nav-accent);
+  text-decoration: none;
+}
+
+nav a {
+  color: var(--color-nav-text);
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 0.375rem 0.75rem;
+  border-radius: var(--radius-sm);
+  opacity: 0.75;
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+
+nav a:hover {
+  opacity: 1;
+  background: rgb(255 255 255 / 0.1);
+  text-decoration: none;
+}
+
+nav a:focus-visible {
+  outline: 2px solid var(--color-nav-accent);
+  outline-offset: 2px;
+  opacity: 1;
+}
+
+/* ── Page layout ──────────────────────────────────────────────── */
+main {
+  max-width: 72rem;
+  margin: 2rem auto;
+  padding: 0 1.5rem;
+}
+
+h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin-bottom: 1.5rem;
+}
+
+h2 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  margin-bottom: 0.75rem;
+}
+
+h3 {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+/* ── Responsive table wrapper ─────────────────────────────────── */
+.table-wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  border-radius: var(--radius);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+}
+
+/* ── Tables ───────────────────────────────────────────────────── */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--color-surface);
+  font-size: 0.875rem;
+}
+
+th, td {
+  padding: 0.625rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid var(--color-border);
+}
+
+th {
+  background: var(--color-bg);
+  font-weight: 600;
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+
+tr:last-child td {
+  border-bottom: none;
+}
+
+tbody tr {
+  transition: background-color 0.1s ease;
+}
+
+tbody tr:hover td {
+  background: color-mix(in srgb, var(--color-blue) 5%, var(--color-surface));
+}
+
+/* ── Status badges ────────────────────────────────────────────── */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.2rem 0.625rem;
+  border-radius: 9999px;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+}
+
+/* Light-mode badge colors */
+.badge-completed  { background: #dcfce7; color: #166534; }
+.badge-failed     { background: #fee2e2; color: #991b1b; }
+.badge-running    { background: #fef9c3; color: #854d0e; }
+.badge-queued     { background: #dbeafe; color: #1e40af; }
+.badge-aborted    { background: #fce7f3; color: #9d174d; }
+.badge-paused     { background: #e0e7ff; color: #3730a3; }
+.badge-skipped    { background: #f3f4f6; color: #6b7280; }
+.badge-retriable  { background: #ffedd5; color: #9a3412; }
+.badge-draft      { background: #f3f4f6; color: #6b7280; }
+.badge-stage      { background: var(--color-border); color: var(--color-text-muted); }
+
+/* Dark-mode badge overrides */
+@media (prefers-color-scheme: dark) {
+  .badge-completed  { background: #14532d; color: #86efac; }
+  .badge-failed     { background: #7f1d1d; color: #fca5a5; }
+  .badge-running    { background: #713f12; color: #fde047; }
+  .badge-queued     { background: #1e3a5f; color: #93c5fd; }
+  .badge-aborted    { background: #500724; color: #f9a8d4; }
+  .badge-paused     { background: #1e1b4b; color: #a5b4fc; }
+  .badge-skipped    { background: #1f2937; color: #9ca3af; }
+  .badge-retriable  { background: #431407; color: #fdba74; }
+  .badge-draft      { background: #1f2937; color: #9ca3af; }
+  .badge-stage      { background: #334155;  color: #94a3b8; }
+}
+
+/* Animated dot for running / in-flight statuses */
+.badge-running::after {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: badge-pulse 1.5s ease-in-out infinite;
+  flex-shrink: 0;
+}
+
+@keyframes badge-pulse {
+  0%, 100% { opacity: 1;   transform: scale(1);    }
+  50%       { opacity: 0.3; transform: scale(0.75); }
+}
+
+/* ── Cards ────────────────────────────────────────────────────── */
+.card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: 1.25rem 1.5rem;
+  margin-bottom: 1rem;
+  box-shadow: var(--shadow-sm);
+}
+
+.card > h2 {
+  padding-bottom: 0.625rem;
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: 1rem;
+}
+
+/* ── Duration badge ───────────────────────────────────────────── */
+.duration-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.75rem;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+/* ── Meta / description list grid ────────────────────────────── */
+.meta {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+  gap: 0.875rem 1.25rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.meta dt {
+  color: var(--color-text-muted);
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  font-weight: 600;
+  margin-bottom: 0.1875rem;
+}
+
+.meta dd {
+  font-weight: 500;
+  word-break: break-word;
+}
+
+/* ── Bar charts (tokens) ──────────────────────────────────────── */
+.bar-chart {
+  margin-bottom: 0.5rem;
+}
+
+.bar-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.4375rem;
+  font-size: 0.8125rem;
+}
+
+.bar-label {
+  min-width: 9rem;
+  max-width: 9rem;
+  text-align: right;
+  color: var(--color-text-muted);
+  font-size: 0.75rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bar-track {
+  flex: 1;
+  background: var(--color-border);
+  border-radius: var(--radius-xs);
+  height: 1.125rem;
+  overflow: hidden;
+  min-width: 60px;
+}
+
+.bar-fill {
+  height: 100%;
+  border-radius: var(--radius-xs);
+  min-width: 1px;
+  transition: width 0.4s ease;
+}
+
+.bar-fill-input  { background: var(--color-blue);   }
+.bar-fill-output { background: var(--color-purple);  }
+
+.bar-value {
+  min-width: 6.5rem;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+
+/* ── Collapsible details ──────────────────────────────────────── */
+details {
+  margin-bottom: 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+details summary {
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.875rem;
+  padding: 0.625rem 0.875rem;
+  background: var(--color-bg);
+  user-select: none;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: background-color 0.12s ease;
+}
+
+details summary::-webkit-details-marker { display: none; }
+
+details summary::before {
+  content: '▶';
+  font-size: 0.5625rem;
+  opacity: 0.55;
+  transition: transform 0.15s ease;
+  flex-shrink: 0;
+}
+
+details[open] summary::before {
+  transform: rotate(90deg);
+}
+
+details summary:hover {
+  background: color-mix(in srgb, var(--color-blue) 6%, var(--color-bg));
+}
+
+details summary:focus-visible {
+  outline: 2px solid var(--color-blue);
+  outline-offset: -2px;
+}
+
+details > :not(summary) {
+  padding: 0.75rem 0.875rem;
+  border-top: 1px solid var(--color-border);
+}
+
+/* Log section (large collapsible) */
+.log-section {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.log-section > summary {
+  font-size: 0.9375rem;
+  padding: 0.75rem 1.25rem;
+  background: var(--color-bg);
+}
+
+.log-entries {
+  max-height: 32rem;
+  overflow-y: auto;
+  padding: 0.25rem 0;
+}
+
+/* ── Pre / Code ───────────────────────────────────────────────── */
+pre {
+  background: #f1f5f9;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: 0.875rem 1rem;
+  overflow-x: auto;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  max-height: 20rem;
+  overflow-y: auto;
+  margin: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  pre { background: #0f172a; }
+}
+
+code {
+  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas,
+    'Liberation Mono', monospace;
+  font-size: 0.8125rem;
+}
+
+/* ── Links ────────────────────────────────────────────────────── */
+a {
+  color: var(--color-blue);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a:focus-visible {
+  outline: 2px solid var(--color-blue);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* ── Pagination ───────────────────────────────────────────────── */
+.pagination {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin-top: 1rem;
+  font-size: 0.875rem;
+}
+
+.pagination a,
+.pagination span {
+  padding: 0.25rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  transition: background-color 0.1s ease;
+}
+
+.pagination a:hover {
+  background: var(--color-bg);
+  text-decoration: none;
+}
+
+.pagination span {
+  background: var(--color-blue);
+  color: #fff;
+  border-color: var(--color-blue);
+}
+
+/* ── Stage timeline ───────────────────────────────────────────── */
+.timeline {
+  position: relative;
+  padding-left: 2rem;
+}
+
+.timeline::before {
+  content: '';
+  position: absolute;
+  left: 0.6875rem;
+  top: 0.75rem;
+  bottom: 0.75rem;
+  width: 2px;
+  background: var(--color-border);
+}
+
+.timeline-item {
+  position: relative;
+  margin-bottom: 0.875rem;
+  padding: 0.75rem 1rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
+}
+
+.timeline-item::before {
+  content: '';
+  position: absolute;
+  left: -1.5rem;
+  top: 1rem;
+  width: 0.6875rem;
+  height: 0.6875rem;
+  border-radius: 50%;
+  background: var(--color-gray);
+  border: 2px solid var(--color-surface);
+  box-shadow: 0 0 0 2px var(--color-border);
+}
+
+.timeline-item.completed::before {
+  background: var(--color-green);
+  box-shadow: 0 0 0 2px #dcfce7;
+}
+.timeline-item.failed::before {
+  background: var(--color-red);
+  box-shadow: 0 0 0 2px #fee2e2;
+}
+.timeline-item.running::before {
+  background: var(--color-yellow);
+  box-shadow: 0 0 0 2px #fef9c3;
+  animation: pulse-dot 1.5s ease-in-out infinite;
+}
+.timeline-item.skipped::before {
+  background: var(--color-gray);
+}
+
+@keyframes pulse-dot {
+  0%, 100% { box-shadow: 0 0 0 2px #fef9c3; }
+  50%       { box-shadow: 0 0 0 4px #fef9c3; }
+}
+
+.timeline-meta {
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  margin-top: 0.375rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+/* ── Log entries ──────────────────────────────────────────────── */
+.log-entry {
+  padding: 0.3125rem 1rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
+  font-size: 0.8125rem;
+  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.log-entry:last-child {
+  border-bottom: none;
+}
+
+.log-entry .log-time {
+  color: var(--color-text-muted);
+  margin-right: 0.5rem;
+  font-size: 0.75rem;
+}
+
+.log-entry .log-type {
+  font-weight: 700;
+  margin-right: 0.5rem;
+}
+
+.log-type-error       { color: var(--color-red);  }
+.log-type-tool_call   { color: var(--color-blue);  }
+.log-type-tool_result { color: var(--color-green); }
+.log-type-message     { color: var(--color-text-muted); }
+
+/* ── Error groups ─────────────────────────────────────────────── */
+.error-group {
+  margin-bottom: 1.5rem;
+}
+
+/* ── Empty state ──────────────────────────────────────────────── */
+.empty {
+  padding: 3rem 1rem;
+  text-align: center;
+  color: var(--color-text-muted);
+  font-size: 0.9375rem;
+}
+
+/* ── Responsive — tablet / mobile ────────────────────────────── */
+@media (max-width: 768px) {
+  main {
+    padding: 0 1rem;
+    margin: 1rem auto;
+  }
+
+  nav {
+    padding: 0 1rem;
+    gap: 0;
+  }
+
+  nav .brand {
+    margin-right: 0.75rem;
+    font-size: 0.875rem;
+  }
+
+  nav a {
+    padding: 0.3125rem 0.5rem;
+    font-size: 0.8125rem;
+  }
+
+  h1 {
+    font-size: 1.25rem;
+    margin-bottom: 1rem;
+  }
+
+  .card {
+    padding: 1rem;
+  }
+
+  .meta {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .bar-label {
+    min-width: 5rem;
+    max-width: 5rem;
+  }
+
+  .bar-value {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .meta {
+    grid-template-columns: 1fr;
+  }
+
+  nav a span {
+    display: none;
+  }
+}

package/dist/views/audit.d.ts

@@ -0,0 +1,29 @@
+import type { AuditEvent } from "@urateam/core";
+export interface AuditFilters {
+    from?: string;
+    to?: string;
+    scope?: string;
+    eventType?: string;
+    actor?: string;
+    runId?: string;
+    issueId?: string;
+    q?: string;
+}
+export interface RenderAuditPageArgs {
+    events: AuditEvent[];
+    nextCursor: string | null;
+    filters: AuditFilters;
+    /** When true, render only the table + load-more marker (HTMX partial). */
+    partial?: boolean;
+}
+/**
+ * Render a detail row inserted via HTMX after a row. Shows the full formatted
+ * payload plus any fields truncated in the compact row (timestamp, tokens).
+ */
+export declare function renderEventDetailRow(e: AuditEvent): string;
+/**
+ * Render the audit log page. When `partial` is true, emits only the table
+ * body rows + load-more marker so HTMX can swap into the tbody.
+ */
+export declare function renderAuditPage(args: RenderAuditPageArgs): string;
+//# sourceMappingURL=audit.d.ts.map

package/dist/views/audit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"audit.d.ts","sourceRoot":"","sources":["../../src/views/audit.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,YAAY,CAAC;IACtB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAgDD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,UAAU,GAAG,MAAM,CAqB1D;AAWD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,mBAAmB,GAAG,MAAM,CA0DjE"}