@tangle-network/sandbox-ui 2.0.3 → 2.0.5

package/dist/styles.css

@@ -383,6 +383,9 @@
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
+  .right-3 {
+    right: calc(var(--spacing) * 3);
+  }
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
@@ -1520,6 +1523,9 @@
   .max-w-40 {
     max-width: calc(var(--spacing) * 40);
   }
+  .max-w-64 {
+    max-width: calc(var(--spacing) * 64);
+  }
   .max-w-72 {
     max-width: calc(var(--spacing) * 72);
   }
@@ -1844,6 +1850,9 @@
   .scale-\[1\.02\] {
     scale: 1.02;
   }
+  .-rotate-90 {
+    rotate: calc(90deg * -1);
+  }
   .rotate-90 {
     rotate: 90deg;
   }
@@ -2122,6 +2131,9 @@
   .gap-x-4 {
     column-gap: calc(var(--spacing) * 4);
   }
+  .gap-x-5 {
+    column-gap: calc(var(--spacing) * 5);
+  }
   .gap-x-6 {
     column-gap: calc(var(--spacing) * 6);
   }
@@ -2136,6 +2148,9 @@
   .gap-y-1 {
     row-gap: var(--spacing);
   }
+  .gap-y-1\.5 {
+    row-gap: calc(var(--spacing) * 1.5);
+  }
   .gap-y-2 {
     row-gap: calc(var(--spacing) * 2);
   }
@@ -5310,6 +5325,10 @@
   .focus-visible\:ring-ring:focus-visible {
     --tw-ring-color: hsl(var(--ring));
   }
+  .focus-visible\:outline:focus-visible {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .focus-visible\:outline-1:focus-visible {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -9127,7 +9146,7 @@
 }
 .ag-live-slot {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   width: 100%;
   height: 100%;
 }
@@ -9139,7 +9158,7 @@
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding: 10px;
+  padding: 8px;
   border: 1px solid var(--ag-border);
   border-radius: var(--radius-card);
   animation: agent-arrive var(--motion-arrive) both;
@@ -9165,7 +9184,7 @@
 .ag-live-name {
   grid-column: 2;
   grid-row: 1;
-  font-size: 14px;
+  font-size: var(--font-size-sm);
   line-height: 18px;
   font-weight: 600;
   overflow: hidden;
@@ -9173,7 +9192,7 @@
   white-space: nowrap;
 }
 .ag-live-meta, .ag-live-stats {
-  font-size: 12px;
+  font-size: var(--font-size-xs);
   line-height: 16px;
   color: var(--ag-muted);
 }
@@ -9187,7 +9206,12 @@
 .ag-live-accounting {
   grid-column: 2 / -1;
   grid-row: 3;
+  font-size: var(--font-size-xs);
   font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
 }
 .ag-live-pill {
   grid-column: 3;
@@ -9220,19 +9244,16 @@
   flex: 1;
   min-width: 0;
   margin: 0;
-  font-size: 13px;
-  line-height: 17px;
+  font-size: var(--font-size-sm);
+  line-height: 20px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-.ag-live-failure {
-  color: var(--surface-danger-text);
-}
 .ag-live-quiet {
   color: var(--surface-warning-text);
-  font-size: 12px;
+  font-size: var(--font-size-xs);
   line-height: 16px;
 }
 .ag-live-inspect {
@@ -9246,8 +9267,8 @@
   text-decoration: underline;
 }
 .ag-live-respond {
-  height: 28px;
-  min-height: 28px;
+  height: var(--control-height-sm);
+  min-height: var(--control-height-sm);
   flex: none;
   border: 1px solid currentColor;
   border-radius: var(--radius-control);
@@ -9266,18 +9287,13 @@
   margin: 0;
   padding: 0;
   list-style: none;
-  min-height: 64px;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  transform: translateY(-16px);
 }
 .ag-live-events li {
   display: flex;
   align-items: center;
   gap: 6px;
   min-height: 16px;
-  font: 11px/16px var(--font-mono, monospace);
+  font: var(--font-size-xs)/16px var(--font-mono, monospace);
   color: var(--ag-muted);
   transition: color var(--motion-stream);
 }
@@ -9303,34 +9319,33 @@
   font-variant-numeric: tabular-nums;
 }
 .ag-live-chip {
-  height: 40px;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  border-radius: var(--radius-pill);
-  opacity: 1;
+  height: 80px;
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr) auto auto;
+  grid-template-rows: 18px minmax(0, 1fr);
+  gap: 4px 8px;
 }
 .ag-live-chip .ag-live-head {
-  display: flex;
-  flex: none;
-  max-width: 45%;
+  display: contents;
 }
 .ag-live-chip .ag-live-names {
-  display: flex;
-  min-width: 0;
+  display: contents;
+}
+.ag-live-chip .ag-live-name {
+  grid-column: 2;
+  grid-row: 1;
 }
 .ag-live-chip .ag-live-stats, .ag-live-chip .ag-live-head > :first-child {
   display: none;
 }
 .ag-live-chip-result {
-  flex: 1;
+  grid-column: 1 / -1;
+  grid-row: 2;
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 500;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  font-size: var(--font-size-sm);
+  line-height: 18px;
 }
 .ag-phone-list {
   display: flex;
@@ -9400,55 +9415,54 @@
     flex: 0 0 auto;
   }
   .ag-live-card.ag-live-chip {
-    min-height: 40px;
-    height: 40px;
+    min-height: 80px;
+    height: 80px;
   }
 }
-.ag-live-accounting {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-}
 .ag-live-chip-status {
-  flex: none;
-  font-size: 12px;
+  grid-column: 3;
+  grid-row: 1;
+  font-size: var(--font-size-xs);
   color: var(--ag-status);
 }
 .ag-live-chip-cost {
-  flex: none;
-  font-size: 12px;
+  grid-column: 4;
+  grid-row: 1;
+  font-size: var(--font-size-xs);
   color: var(--ag-muted);
   font-variant-numeric: tabular-nums;
 }
 .ag-parent-label {
   color: var(--ag-muted);
-  font-size: 12px;
+  font-size: var(--font-size-xs);
   font-weight: 400;
 }
 .ag-agent-card[data-status="needs-you"] p {
   -webkit-line-clamp: 1;
 }
 .ag-latest {
+  container-type: inline-size;
   flex: none;
   min-width: 0;
   border-bottom: 1px solid hsl(var(--border));
-  padding: 8px 12px;
+  padding: 4px 12px;
   color: hsl(var(--foreground));
-  font-size: 12px;
+  font-size: var(--font-size-xs);
   line-height: 16px;
 }
 .ag-latest header {
+  float: left;
+  width: 128px;
+  height: 64px;
   display: flex;
-  align-items: center;
-  min-height: 24px;
-  gap: 8px;
+  flex-direction: column;
+  align-items: start;
+  justify-content: center;
 }
 .ag-latest header > span {
   color: hsl(var(--muted-foreground));
 }
 .ag-latest header > button {
-  margin-left: auto;
   padding: 0;
   border: 0;
   background: transparent;
@@ -9458,20 +9472,26 @@
   cursor: pointer;
 }
 .ag-latest ol {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+  gap: 0 12px;
   list-style: none;
-  margin: 0;
+  margin: 0 0 0 140px;
   padding: 0;
   overflow: auto;
+  height: 64px;
 }
 .ag-latest li {
-  height: 28px;
+  min-height: 64px;
 }
 .ag-latest li > button {
-  display: flex;
-  align-items: center;
-  gap: 6px;
+  display: grid;
+  grid-template-columns: 8px minmax(0, 1fr) auto;
+  gap: 0 6px;
+  align-content: start;
+  align-items: start;
   width: 100%;
-  height: 28px;
+  min-height: 64px;
   padding: 0;
   border: 0;
   background: transparent;
@@ -9487,8 +9507,8 @@
   font-weight: 600;
 }
 .ag-latest li strong {
-  flex: none;
-  max-width: 22%;
+  grid-column: 2;
+  grid-row: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -9497,34 +9517,91 @@
   box-sizing: border-box;
   width: 8px;
   height: 8px;
-  flex: none;
   border-radius: var(--radius-pill);
 }
 .ag-latest-state {
+  grid-column: 3;
+  grid-row: 1;
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  flex: none;
 }
 .ag-latest-label {
-  flex: 1;
+  grid-column: 2 / -1;
+  grid-row: 2;
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font: 11px/16px var(--font-mono, monospace);
+  overflow-wrap: anywhere;
+  font: var(--font-size-xs)/16px var(--font-mono, monospace);
 }
 .ag-latest time {
-  flex: none;
+  grid-column: 2 / -1;
+  grid-row: 3;
   color: hsl(var(--muted-foreground));
-  font: 11px/16px var(--font-mono, monospace);
+  font: var(--font-size-xs)/16px var(--font-mono, monospace);
   font-variant-numeric: tabular-nums;
 }
 .ag-latest-empty {
+  grid-column: 1 / -1;
   display: flex;
   align-items: center;
   color: hsl(var(--muted-foreground));
 }
+.ag-frame-owner .ag-live-card {
+  height: 100%;
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) auto;
+  grid-template-rows: 18px minmax(0, 1fr);
+  gap: 4px 8px;
+}
+.ag-frame-owner .ag-live-chip-result {
+  white-space: nowrap;
+}
+.ag-frame-owner .ag-live-head {
+  display: contents;
+}
+.ag-frame-owner .ag-live-meta, .ag-frame-owner .ag-live-events-clip {
+  display: none;
+}
+.ag-frame-owner .ag-live-thinking-row {
+  grid-column: 2 / -1;
+  grid-row: 2;
+}
+.ag-frame-owner .ag-live-thinking {
+  -webkit-line-clamp: 1;
+}
+.ag-frame-owner .ag-live-accounting {
+  display: none;
+}
+.ag-frame-owner .ag-agent-card {
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+}
+@container (width < 600px) {
+  .ag-latest header {
+    float: none;
+    width: auto;
+    height: 24px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: start;
+    gap: 8px;
+  }
+  .ag-latest header > button {
+    margin-left: auto;
+  }
+  .ag-latest ol {
+    grid-template-columns: 1fr;
+    margin-left: 0;
+    height: calc(var(--ag-latest-rows) * 64px);
+  }
+}
+@media (pointer: coarse) {
+  .ag-live-respond {
+    min-height: 44px;
+    min-width: 44px;
+  }
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

package/dist/tailwind.css

@@ -883,39 +883,39 @@
 
 .agent-graph { container-type: inline-size; }
 .ag-live { --ag-fg: hsl(var(--foreground)); --ag-muted: hsl(var(--muted-foreground)); --ag-surface: hsl(var(--card)); --ag-border: hsl(var(--border)); }
-.ag-live-slot { display: flex; align-items: center; width: 100%; height: 100%; }
-.ag-live-card { position: relative; display: flex; flex-direction: column; gap: 4px; box-sizing: border-box; width: 100%; height: 100%; padding: 10px; border: 1px solid var(--ag-border);
+.ag-live-slot { display: flex; align-items: flex-start; width: 100%; height: 100%; }
+.ag-live-card { position: relative; display: flex; flex-direction: column; gap: 4px; box-sizing: border-box; width: 100%; height: 100%; padding: 8px; border: 1px solid var(--ag-border);
   border-radius: var(--radius-card); animation: agent-arrive var(--motion-arrive) both; background: var(--ag-surface); color: var(--ag-fg); overflow: hidden;
   transition: height var(--motion-surface), border-radius var(--motion-surface), border-color var(--motion-control), box-shadow var(--motion-control); }
 .ag-live-head { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; min-width: 0; }
 .ag-live-head > :first-child { grid-column: 1; grid-row: 1 / 3; }
 .ag-live-names, .ag-live-stats { display: contents; }
-.ag-live-name { grid-column: 2; grid-row: 1; font-size: 14px; line-height: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ag-live-meta, .ag-live-stats { font-size: 12px; line-height: 16px; color: var(--ag-muted); }
+.ag-live-name { grid-column: 2; grid-row: 1; font-size: var(--font-size-sm); line-height: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ag-live-meta, .ag-live-stats { font-size: var(--font-size-xs); line-height: 16px; color: var(--ag-muted); }
 .ag-live-meta { grid-column: 2 / -1; grid-row: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ag-live-accounting { grid-column: 2 / -1; grid-row: 3; font-variant-numeric: tabular-nums; }
+.ag-live-accounting { grid-column: 2 / -1; grid-row: 3; font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
 .ag-live-pill { grid-column: 3; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 4px; color: var(--ag-status); }
 .ag-running-dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--surface-info-text); }
 [data-activity="quiet"] .ag-running-dot { background: var(--surface-warning-text); animation: none !important; }
 .ag-live-thinking-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
-.ag-live-thinking { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
-.ag-live-failure { color: var(--surface-danger-text); }
-.ag-live-quiet { color: var(--surface-warning-text); font-size: 12px; line-height: 16px; }
+.ag-live-thinking { flex: 1; min-width: 0; margin: 0; font-size: var(--font-size-sm); line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.ag-live-quiet { color: var(--surface-warning-text); font-size: var(--font-size-xs); line-height: 16px; }
 .ag-live-inspect { border: 0; padding: 0; background: transparent; font: inherit; cursor: pointer; }
 .ag-live-inspect > span:last-child { text-decoration: underline; }
-.ag-live-respond { height: 28px; min-height: 28px; flex: none; border: 1px solid currentColor; border-radius: var(--radius-control); padding: 0 8px; color: var(--surface-warning-text); background: transparent; cursor: pointer; }
+.ag-live-respond { height: var(--control-height-sm); min-height: var(--control-height-sm); flex: none; border: 1px solid currentColor; border-radius: var(--radius-control); padding: 0 8px; color: var(--surface-warning-text); background: transparent; cursor: pointer; }
 .ag-live-events-clip { margin-top: auto; height: 48px; min-height: 48px; overflow: hidden; }
-.ag-live-events { margin: 0; padding: 0; list-style: none; min-height: 64px; display: flex; flex-direction: column; justify-content: flex-end; transform: translateY(-16px); }
-.ag-live-events li { display: flex; align-items: center; gap: 6px; min-height: 16px; font: 11px/16px var(--font-mono, monospace); color: var(--ag-muted); transition: color var(--motion-stream); }
+.ag-live-events { margin: 0; padding: 0; list-style: none; }
+.ag-live-events li { display: flex; align-items: center; gap: 6px; min-height: 16px; font: var(--font-size-xs)/16px var(--font-mono, monospace); color: var(--ag-muted); transition: color var(--motion-stream); }
 .ag-live-events li svg { flex: none; width: 12px; height: 12px; }
 .ag-live-events li:last-child { color: var(--ag-fg); }
 .ag-live-event-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ag-live-event-at { flex: none; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
-.ag-live-chip { height: 40px; flex-direction: row; align-items: center; gap: 8px; border-radius: var(--radius-pill); opacity: 1; }
-.ag-live-chip .ag-live-head { display: flex; flex: none; max-width: 45%; }
-.ag-live-chip .ag-live-names { display: flex; min-width: 0; }
+.ag-live-chip { height: 80px; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; grid-template-rows: 18px minmax(0, 1fr); gap: 4px 8px; }
+.ag-live-chip .ag-live-head { display: contents; }
+.ag-live-chip .ag-live-names { display: contents; }
+.ag-live-chip .ag-live-name { grid-column: 2; grid-row: 1; }
 .ag-live-chip .ag-live-stats, .ag-live-chip .ag-live-head > :first-child { display: none; }
-.ag-live-chip-result { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; font-weight: 500; }
+.ag-live-chip-result { grid-column: 1 / -1; grid-row: 2; min-width: 0; overflow: auto; overflow-wrap: anywhere; font-size: var(--font-size-sm); line-height: 18px; }
 .ag-phone-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 8px; list-style: none; }
 .ag-phone-list > li { min-width: 0; padding-left: min(calc(var(--depth) * 16px), 32px); border-left: 1px solid var(--ag-border); }
 .ag-phone-select { width: 100%; height: 100%; text-align: left; background: transparent; padding: 0; border: 0; color: inherit; cursor: pointer; }
@@ -929,28 +929,40 @@
   .ag-phone-select .ag-agent-card { height: auto; min-height: 88px; }
   .ag-caption-target { display: none; }
   .ag-status-button { flex: 0 0 auto; }
-  .ag-live-card.ag-live-chip { min-height: 40px; height: 40px; }
+  .ag-live-card.ag-live-chip { min-height: 80px; height: 80px; }
 }
-.ag-live-accounting { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
-.ag-live-chip-status { flex: none; font-size: 12px; color: var(--ag-status); }
-.ag-live-chip-cost { flex: none; font-size: 12px; color: var(--ag-muted); font-variant-numeric: tabular-nums; }
-.ag-parent-label { color: var(--ag-muted); font-size: 12px; font-weight: 400; }
+.ag-live-chip-status { grid-column: 3; grid-row: 1; font-size: var(--font-size-xs); color: var(--ag-status); }
+.ag-live-chip-cost { grid-column: 4; grid-row: 1; font-size: var(--font-size-xs); color: var(--ag-muted); font-variant-numeric: tabular-nums; }
+.ag-parent-label { color: var(--ag-muted); font-size: var(--font-size-xs); font-weight: 400; }
 .ag-agent-card[data-status="needs-you"] p { -webkit-line-clamp: 1; }
-.ag-latest { flex: none; min-width: 0; border-bottom: 1px solid hsl(var(--border)); padding: 8px 12px; color: hsl(var(--foreground)); font-size: 12px; line-height: 16px; }
-.ag-latest header { display: flex; align-items: center; min-height: 24px; gap: 8px; }
+.ag-latest { container-type: inline-size; flex: none; min-width: 0; border-bottom: 1px solid hsl(var(--border)); padding: 4px 12px; color: hsl(var(--foreground)); font-size: var(--font-size-xs); line-height: 16px; }
+.ag-latest header { float: left; width: 128px; height: 64px; display: flex; flex-direction: column; align-items: start; justify-content: center; }
 .ag-latest header > span { color: hsl(var(--muted-foreground)); }
-.ag-latest header > button { margin-left: auto; padding: 0; border: 0; background: transparent; text-decoration: underline; font: inherit; color: inherit; cursor: pointer; }
-.ag-latest ol { list-style: none; margin: 0; padding: 0; overflow: auto; }
-.ag-latest li { height: 28px; }
-.ag-latest li > button { display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.ag-latest header > button { padding: 0; border: 0; background: transparent; text-decoration: underline; font: inherit; color: inherit; cursor: pointer; }
+.ag-latest ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0 12px; list-style: none; margin: 0 0 0 140px; padding: 0; overflow: auto; height: 64px; }
+.ag-latest li { min-height: 64px; }
+.ag-latest li > button { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 0 6px; align-content: start; align-items: start; width: 100%; min-height: 64px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
 .ag-latest li > button:disabled { cursor: default; }
 .ag-latest strong { font-weight: 600; }
-.ag-latest li strong { flex: none; max-width: 22%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ag-latest-dot { box-sizing: border-box; width: 8px; height: 8px; flex: none; border-radius: var(--radius-pill); }
-.ag-latest-state { display: inline-flex; align-items: center; gap: 4px; flex: none; }
-.ag-latest-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px/16px var(--font-mono, monospace); }
-.ag-latest time { flex: none; color: hsl(var(--muted-foreground)); font: 11px/16px var(--font-mono, monospace); font-variant-numeric: tabular-nums; }
-.ag-latest-empty { display: flex; align-items: center; color: hsl(var(--muted-foreground)); }
+.ag-latest li strong { grid-column: 2; grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ag-latest-dot { box-sizing: border-box; width: 8px; height: 8px; border-radius: var(--radius-pill); }
+.ag-latest-state { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; gap: 4px; }
+.ag-latest-label { grid-column: 2 / -1; grid-row: 2; min-width: 0; overflow-wrap: anywhere; font: var(--font-size-xs)/16px var(--font-mono, monospace); }
+.ag-latest time { grid-column: 2 / -1; grid-row: 3; color: hsl(var(--muted-foreground)); font: var(--font-size-xs)/16px var(--font-mono, monospace); font-variant-numeric: tabular-nums; }
+.ag-latest-empty { grid-column: 1 / -1; display: flex; align-items: center; color: hsl(var(--muted-foreground)); }
+.ag-frame-owner .ag-live-card { height: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-rows: 18px minmax(0, 1fr); gap: 4px 8px; }
+.ag-frame-owner .ag-live-chip-result { white-space: nowrap; }
+.ag-frame-owner .ag-live-head { display: contents; }
+.ag-frame-owner .ag-live-meta, .ag-frame-owner .ag-live-events-clip { display: none; }
+.ag-frame-owner .ag-live-thinking-row { grid-column: 2 / -1; grid-row: 2; }
+.ag-frame-owner .ag-live-thinking { -webkit-line-clamp: 1; }
+.ag-frame-owner .ag-live-accounting { display: none; }
+.ag-frame-owner .ag-agent-card { flex-direction: row; align-items: center; gap: 16px; }
+@container (width < 600px) {
+  .ag-latest header { float: none; width: auto; height: 24px; flex-direction: row; align-items: center; justify-content: start; gap: 8px; } .ag-latest header > button { margin-left: auto; }
+  .ag-latest ol { grid-template-columns: 1fr; margin-left: 0; height: calc(var(--ag-latest-rows) * 64px); }
+}
+@media (pointer: coarse) { .ag-live-respond { min-height: 44px; min-width: 44px; } }
 
 /* Published sources: this package's dist and its @tangle-network/ui peer. */
 @source "./**/*.js";

package/dist/workflows.d.ts

@@ -1,5 +1,5 @@
 import { n as ModelBrandStack, o as modelBrandFor, t as ModelBrandIdentity } from "./model-brand-ZwVS49Fq.js";
-import { a as AgentGraphTool, c as AgentGraphEdge, d as AgentGraphNode, f as AgentGraphStatus, i as AgentGraphCallKind, l as AgentGraphEdgeKind, n as AgentGraphProps, o as AgentGraphActivity, r as AgentGraphCall, s as AgentGraphDirection, t as AgentGraph, u as AgentGraphEvent } from "./AgentGraph-BqLPrigw.js";
+import { a as AgentGraphTool, c as AgentGraphEdge, d as AgentGraphNode, f as AgentGraphStatus, i as AgentGraphCallKind, l as AgentGraphEdgeKind, n as AgentGraphProps, o as AgentGraphActivity, r as AgentGraphCall, s as AgentGraphDirection, t as AgentGraph, u as AgentGraphEvent } from "./AgentGraph-DzdpPFEI.js";
 import { StatusTone } from "@tangle-network/ui/primitives";
 import { Component, ReactElement, ReactNode } from "react";
 import { LucideIcon } from "lucide-react";

package/dist/workflows.js

@@ -1,5 +1,5 @@
 import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
-import { n as WorkflowGraph, t as AgentGraph } from "./AgentGraph-Dd1EBlhu.js";
-import { C as actionNodeId, D as triggerNodeId, M as humanizeIdentifier, N as parseActionPath, O as triggerNodeIndex, P as shortModel, S as TRIGGER_NODE_ID, T as buildWorkflowGraph, c as STATUS_COLOR, d as STATUS_TONE, j as actionPathLabel, l as STATUS_LABEL, n as KIND_ICON, p as StatusPill, r as NodeMark, u as STATUS_PILL, w as branchNodeId } from "./node-ui-DWv_oLvy.js";
+import { n as WorkflowGraph, t as AgentGraph } from "./AgentGraph-YuBa5O8m.js";
+import { C as actionNodeId, D as triggerNodeId, M as humanizeIdentifier, N as parseActionPath, O as triggerNodeIndex, P as shortModel, S as TRIGGER_NODE_ID, T as buildWorkflowGraph, c as STATUS_COLOR, d as STATUS_TONE, j as actionPathLabel, l as STATUS_LABEL, n as KIND_ICON, p as StatusPill, r as NodeMark, u as STATUS_PILL, w as branchNodeId } from "./node-ui-Dst2R2M5.js";
 import { n as classifyOutput, r as condenseText, t as NodeOutputBody } from "./node-output-DlySTwxr.js";
 export { AgentGraph, KIND_ICON, ModelBrandStack, NodeMark, NodeOutputBody, StatusPill as NodeStatusPill, STATUS_COLOR, STATUS_LABEL, STATUS_PILL, STATUS_TONE, TRIGGER_NODE_ID, WorkflowGraph as WorkflowGraphLazy, actionNodeId, actionPathLabel, branchNodeId, buildWorkflowGraph, classifyOutput, condenseText, humanizeIdentifier, modelBrandFor, parseActionPath, shortModel, triggerNodeId, triggerNodeIndex };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "license": "MIT",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
@@ -138,7 +138,7 @@
     "@nanostores/react": ">=0.8.4 <2.0.0",
     "@tangle-network/agent-interface": "^1.0.0 || ^2.0.0 || ^3.0.0 || ^5.2.0",
     "@tangle-network/brand": "^1.31.1",
-    "@tangle-network/charts": "^2.0.4",
+    "@tangle-network/charts": "^2.0.5",
     "@tangle-network/ui": "^11.51.1",
     "@tanstack/react-query": "^5.0.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
@@ -237,7 +237,7 @@
     "@tailwindcss/postcss": "^4.3.3",
     "@tangle-network/agent-interface": "5.10.2",
     "@tangle-network/brand": "^1.31.1",
-    "@tangle-network/charts": "^2.0.4",
+    "@tangle-network/charts": "^2.0.5",
     "@tanstack/react-query": "^5.104.5",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",