pi-studio 0.5.51 → 0.5.53

package/client/studio.css

@@ -227,13 +227,15 @@
 
     #scratchpadBtn.has-content,
     #reviewNotesBtn.has-content,
-    #reviewNotesBtn.is-active {
+    #reviewNotesBtn.is-active,
+    #outlineBtn.is-active {
       border-color: var(--accent);
       color: var(--accent);
       font-weight: 600;
     }
 
-    #reviewNotesBtn.is-active {
+    #reviewNotesBtn.is-active,
+    #outlineBtn.is-active {
       background: var(--accent-soft);
     }
 
@@ -336,7 +338,8 @@
       gap: 8px;
     }
 
-    .review-notes-dock-wrap {
+    .review-notes-dock-wrap,
+    .outline-dock-wrap {
       flex: 0 0 clamp(300px, 34%, 420px);
       min-width: 280px;
       min-height: 0;
@@ -348,11 +351,13 @@
       overflow: hidden;
     }
 
-    .review-notes-dock-wrap[hidden] {
+    .review-notes-dock-wrap[hidden],
+    .outline-dock-wrap[hidden] {
       display: none !important;
     }
 
-    .review-notes-dock {
+    .review-notes-dock,
+    .outline-dock {
       width: 100%;
       min-height: 0;
       display: flex;
@@ -1597,6 +1602,182 @@
       flex: 0 0 auto;
     }
 
+    .trace-panel {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .trace-toolbar {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 10px;
+    }
+
+    .trace-summary {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 8px;
+      min-width: 0;
+      padding-bottom: 2px;
+    }
+
+    .trace-controls {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 8px;
+    }
+
+    .trace-filter-group {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      flex-wrap: wrap;
+    }
+
+    .trace-filter-btn,
+    .trace-action-btn {
+      padding: 0.34rem 0.68rem;
+      font-size: 12px;
+      border-radius: 999px;
+    }
+
+    .trace-filter-btn.is-active {
+      border-color: var(--accent-soft-strong);
+      background: var(--accent-soft);
+      color: var(--accent);
+      font-weight: 600;
+    }
+
+    .trace-summary-badge,
+    .trace-summary-status,
+    .trace-entry-status,
+    .trace-kind-badge {
+      display: inline-flex;
+      align-items: center;
+      border-radius: 999px;
+      padding: 0.16rem 0.52rem;
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.01em;
+      border: 1px solid var(--border);
+      background: transparent;
+      color: var(--muted);
+    }
+
+    .trace-summary-badge {
+      color: var(--text);
+      background: var(--panel);
+    }
+
+    .trace-kind-badge {
+      color: var(--muted);
+      background: var(--panel);
+    }
+
+    .trace-summary-status.trace-status-running {
+      color: var(--muted);
+      border-color: var(--border);
+      background: var(--panel);
+    }
+
+    .trace-entry-status.trace-entry-status-streaming,
+    .trace-entry-status.trace-entry-status-pending {
+      color: var(--accent);
+      border-color: var(--accent-soft-strong);
+      background: var(--accent-soft);
+    }
+
+    .trace-summary-status.trace-status-complete,
+    .trace-entry-status.trace-entry-status-complete {
+      color: var(--ok);
+      border-color: var(--ok-border);
+      background: rgba(115, 209, 61, 0.08);
+    }
+
+    .trace-entry-status.trace-entry-status-error {
+      color: var(--error);
+      border-color: var(--error);
+      background: rgba(255, 107, 107, 0.08);
+    }
+
+    .trace-summary-meta,
+    .trace-card-meta {
+      color: var(--muted);
+      font-size: 12px;
+    }
+
+    .trace-list {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .trace-card {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 10px 12px;
+      border: 1px solid var(--border-muted);
+      border-radius: 10px;
+      background: var(--panel-2);
+      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
+    }
+
+    .trace-card-header {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 8px;
+      min-width: 0;
+    }
+
+    .trace-card-title {
+      min-width: 0;
+      font-weight: 600;
+      color: var(--text);
+      overflow-wrap: anywhere;
+    }
+
+    .trace-section {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .trace-section-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--muted);
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+
+    .trace-output {
+      padding: 10px 11px;
+      border-radius: 8px;
+      border: 1px solid var(--border-muted);
+      background: var(--panel);
+      overflow-x: auto;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+    }
+
+    .trace-empty,
+    .trace-empty-inline {
+      color: var(--muted);
+      font-style: italic;
+    }
+
+    .trace-empty {
+      padding: 14px 2px 2px;
+    }
+
     footer {
       border-top: 1px solid var(--border-muted);
       padding: 8px 12px;
@@ -1824,15 +2005,18 @@
       filter: brightness(0.95);
     }
 
-    .review-notes-dock .scratchpad-header {
+    .review-notes-dock .scratchpad-header,
+    .outline-dock .scratchpad-header {
       padding: 12px 14px 10px;
     }
 
-    .review-notes-dock .scratchpad-header h2 {
+    .review-notes-dock .scratchpad-header h2,
+    .outline-dock .scratchpad-header h2 {
       font-size: 15px;
     }
 
-    .review-notes-dock .scratchpad-description {
+    .review-notes-dock .scratchpad-description,
+    .outline-dock .scratchpad-description {
       font-size: 11px;
       line-height: 1.4;
       word-break: normal;
@@ -1895,6 +2079,60 @@
       justify-content: space-between;
     }
 
+    .outline-list {
+      display: flex;
+      flex: 1 1 auto;
+      min-height: 0;
+      flex-direction: column;
+      gap: 6px;
+      padding: 14px;
+      overflow: auto;
+      background: var(--panel);
+    }
+
+    .outline-entry {
+      width: 100%;
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      align-items: baseline;
+      gap: 8px;
+      text-align: left;
+      border-radius: 10px;
+      padding: 8px 10px;
+      background: var(--panel-2);
+      border: 1px solid var(--border-muted);
+    }
+
+    .outline-entry:hover,
+    .outline-entry:focus-visible {
+      border-color: var(--accent);
+      background: var(--accent-soft);
+    }
+
+    .outline-entry-kind {
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.03em;
+      text-transform: uppercase;
+      color: var(--accent);
+      white-space: nowrap;
+    }
+
+    .outline-entry-title {
+      min-width: 0;
+      font-size: 13px;
+      line-height: 1.35;
+      color: var(--text);
+      overflow-wrap: anywhere;
+    }
+
+    .outline-entry-meta {
+      font-size: 11px;
+      color: var(--muted);
+      white-space: nowrap;
+      font-variant-numeric: tabular-nums;
+    }
+
     .review-note-card {
       border: 1px solid var(--border-muted);
       border-radius: 12px;
@@ -2002,7 +2240,8 @@
         flex-direction: column;
       }
 
-      .review-notes-dock-wrap {
+      .review-notes-dock-wrap,
+      .outline-dock-wrap {
         flex: 0 0 auto;
         min-width: 0;
         max-height: min(42vh, 420px);