@tangle-network/sandbox-ui 1.1.3 → 1.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{AgentGraph-CWW3Zx1N.js → AgentGraph-DJEQrKTs.js} +2 -2
- package/dist/{AgentGraphCanvas-D7jjAE6i.js → AgentGraphCanvas-CMdOlSlh.js} +19 -12
- package/dist/{WorkflowGraph-DYsP_Kcg.js → WorkflowGraph-DZ3xejKE.js} +1 -1
- package/dist/globals.css +257 -5
- package/dist/index.js +1 -1
- package/dist/{run-C91XKDrv.js → run-2128n_Cm.js} +1 -1
- package/dist/run.js +1 -1
- package/dist/styles.css +257 -5
- package/dist/tailwind.css +44 -0
- package/dist/workflows.js +1 -1
- package/package.json +4 -4
|
@@ -2618,7 +2618,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
|
|
|
2618
2618
|
});
|
|
2619
2619
|
}
|
|
2620
2620
|
function lazyWorkflowGraph() {
|
|
2621
|
-
return lazy(() => retryImport(() => import("./WorkflowGraph-
|
|
2621
|
+
return lazy(() => retryImport(() => import("./WorkflowGraph-DZ3xejKE.js").then((m) => ({ default: m.WorkflowGraph }))));
|
|
2622
2622
|
}
|
|
2623
2623
|
var GraphErrorBoundary = class extends Component {
|
|
2624
2624
|
state = { hasError: false };
|
|
@@ -2678,7 +2678,7 @@ function WorkflowGraph(props) {
|
|
|
2678
2678
|
* taking the pane down.
|
|
2679
2679
|
*/
|
|
2680
2680
|
function lazyCanvas() {
|
|
2681
|
-
return lazy(() => retryImport(() => import("./AgentGraphCanvas-
|
|
2681
|
+
return lazy(() => retryImport(() => import("./AgentGraphCanvas-CMdOlSlh.js").then((m) => ({ default: m.AgentGraphCanvas }))));
|
|
2682
2682
|
}
|
|
2683
2683
|
/** The agents as a list, for when the canvas cannot load. */
|
|
2684
2684
|
function AgentListFallback({ nodes, selectedId, onSelect, className, onRetry }) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as MOTION_CONTROL } from "./motion-Bn7ESHrj.js";
|
|
2
|
-
import { T as statusBorder, U as fmtTokenTotal, V as fmtCost, a as useColorMode, c as NodeMark, d as RESTING_BORDER, f as RESTING_SHADOW, i as motionAllowed, o as KIND_ACCENT, p as STATUS_COLOR, r as SELECTION_OUTLINE, y as edgeColor } from "./AgentGraph-
|
|
2
|
+
import { T as statusBorder, U as fmtTokenTotal, V as fmtCost, a as useColorMode, c as NodeMark, d as RESTING_BORDER, f as RESTING_SHADOW, i as motionAllowed, o as KIND_ACCENT, p as STATUS_COLOR, r as SELECTION_OUTLINE, y as edgeColor } from "./AgentGraph-DJEQrKTs.js";
|
|
3
3
|
import { t as loadElk } from "./elk-loader-Dl9S7jQk.js";
|
|
4
4
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
@@ -596,11 +596,7 @@ function AgentMessageEdgeView({ id, source, target, data, markerEnd }) {
|
|
|
596
596
|
}) })] });
|
|
597
597
|
}
|
|
598
598
|
// src/workflows/agent-live-card.tsx
|
|
599
|
-
const SETTLED = /* @__PURE__ */ new Set([
|
|
600
|
-
"succeeded",
|
|
601
|
-
"failed",
|
|
602
|
-
"stopped"
|
|
603
|
-
]);
|
|
599
|
+
const SETTLED = /* @__PURE__ */ new Set(["succeeded", "stopped"]);
|
|
604
600
|
const EVENT_GLYPHS = [
|
|
605
601
|
[/^(bash|sh|run|exec|cargo|npm|pnpm|make)\b/, Terminal],
|
|
606
602
|
[/^(edit|write|patch|apply)\b/, Pencil],
|
|
@@ -611,6 +607,13 @@ const EVENT_GLYPHS = [
|
|
|
611
607
|
[/^(wait|sleep|queue)\b/, Hourglass]
|
|
612
608
|
];
|
|
613
609
|
const eventGlyph = (label) => EVENT_GLYPHS.find(([match]) => match.test(label.toLowerCase()))?.[1] ?? Sparkles;
|
|
610
|
+
function clockTime(at) {
|
|
611
|
+
return at == null || !Number.isFinite(at) ? void 0 : new Date(at).toLocaleTimeString([], {
|
|
612
|
+
hour: "2-digit",
|
|
613
|
+
minute: "2-digit",
|
|
614
|
+
hourCycle: "h23"
|
|
615
|
+
});
|
|
616
|
+
}
|
|
614
617
|
function ago(at, now) {
|
|
615
618
|
if (at == null || !Number.isFinite(at)) return void 0;
|
|
616
619
|
const s = Math.max(0, Math.round((now - at) / 1e3));
|
|
@@ -640,7 +643,8 @@ function useNow(fixed, live) {
|
|
|
640
643
|
function LiveAgentCard({ data }) {
|
|
641
644
|
const { agent, selected, direction } = data;
|
|
642
645
|
const settled = SETTLED.has(agent.status);
|
|
643
|
-
const
|
|
646
|
+
const failed = agent.status === "failed";
|
|
647
|
+
const now = useNow(data.now, !settled && !failed);
|
|
644
648
|
const s = agentStatus(agent.status);
|
|
645
649
|
const alive = aliveFor(agent.startedAt, now);
|
|
646
650
|
if (settled) return /* @__PURE__ */ jsxs("div", {
|
|
@@ -725,7 +729,10 @@ function LiveAgentCard({ data }) {
|
|
|
725
729
|
})
|
|
726
730
|
]
|
|
727
731
|
}),
|
|
728
|
-
/* @__PURE__ */ jsx("p", {
|
|
732
|
+
failed ? /* @__PURE__ */ jsx("p", {
|
|
733
|
+
className: "ag-live-thinking ag-live-failure",
|
|
734
|
+
children: agent.result ?? events.at(-1)?.label ?? s.label
|
|
735
|
+
}) : /* @__PURE__ */ jsx("p", {
|
|
729
736
|
className: "ag-live-thinking",
|
|
730
737
|
children: agent.turn || /* @__PURE__ */ jsx("span", {
|
|
731
738
|
className: "ag-live-quiet",
|
|
@@ -737,7 +744,7 @@ function LiveAgentCard({ data }) {
|
|
|
737
744
|
"aria-label": "Latest events",
|
|
738
745
|
children: events.map((event) => {
|
|
739
746
|
const Glyph = eventGlyph(event.label);
|
|
740
|
-
const when = ago(event.at, now);
|
|
747
|
+
const when = failed ? clockTime(event.at) : ago(event.at, now);
|
|
741
748
|
return /* @__PURE__ */ jsxs("li", { children: [
|
|
742
749
|
/* @__PURE__ */ jsx(Glyph, {
|
|
743
750
|
"aria-hidden": true,
|
|
@@ -1002,7 +1009,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
|
|
|
1002
1009
|
className: `flex items-center justify-center rounded-lg border border-border border-dashed p-4 text-center text-muted-foreground text-xs ${className ?? ""}`,
|
|
1003
1010
|
children: emptyState ?? "No agents yet"
|
|
1004
1011
|
});
|
|
1005
|
-
return /* @__PURE__ */
|
|
1012
|
+
return /* @__PURE__ */ jsx("div", {
|
|
1006
1013
|
ref: (el) => {
|
|
1007
1014
|
wrapperRef.current = el;
|
|
1008
1015
|
measureCanvas(el);
|
|
@@ -1010,7 +1017,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
|
|
|
1010
1017
|
className: `agent-graph${live ? " ag-live" : ""} relative transition-opacity duration-150 ease-out motion-reduce:transition-none ${layout && shown ? "opacity-100" : "opacity-0"} ${className ?? ""}`,
|
|
1011
1018
|
"data-layout": layout && shown ? "ready" : "pending",
|
|
1012
1019
|
"data-columns": layout?.columns,
|
|
1013
|
-
children:
|
|
1020
|
+
children: /* @__PURE__ */ jsxs(ReactFlow, {
|
|
1014
1021
|
nodes: flowNodes,
|
|
1015
1022
|
edges: flowEdges,
|
|
1016
1023
|
nodeTypes: NODE_TYPES,
|
|
@@ -1066,7 +1073,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
|
|
|
1066
1073
|
}
|
|
1067
1074
|
})
|
|
1068
1075
|
]
|
|
1069
|
-
})
|
|
1076
|
+
})
|
|
1070
1077
|
});
|
|
1071
1078
|
}
|
|
1072
1079
|
export { AgentGraphCanvas };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { A as buildWorkflowGraph, B as clampPreview, C as problemSurface, E as COMPACT_NODE_SIZE, F as worstSeverity, H as fmtDuration, N as triggerNodeIndex, P as wfEdgeId, S as problemBorder, T as statusBorder, V as fmtCost, W as fmtTokens, _ as StatusFooter, a as useColorMode, b as emptySlotLabel, c as NodeMark, d as RESTING_BORDER, f as RESTING_SHADOW, i as motionAllowed, j as isStructuralKind, l as ProblemMarker, m as STATUS_LABEL, p as STATUS_COLOR, r as SELECTION_OUTLINE, u as ProblemMessages, v as StatusPill, w as problemTitle, x as kindAccent, y as edgeColor, z as shortModel } from "./AgentGraph-
|
|
1
|
+
import { A as buildWorkflowGraph, B as clampPreview, C as problemSurface, E as COMPACT_NODE_SIZE, F as worstSeverity, H as fmtDuration, N as triggerNodeIndex, P as wfEdgeId, S as problemBorder, T as statusBorder, V as fmtCost, W as fmtTokens, _ as StatusFooter, a as useColorMode, b as emptySlotLabel, c as NodeMark, d as RESTING_BORDER, f as RESTING_SHADOW, i as motionAllowed, j as isStructuralKind, l as ProblemMarker, m as STATUS_LABEL, p as STATUS_COLOR, r as SELECTION_OUTLINE, u as ProblemMessages, v as StatusPill, w as problemTitle, x as kindAccent, y as edgeColor, z as shortModel } from "./AgentGraph-DJEQrKTs.js";
|
|
2
2
|
import { n as classifyOutput, t as NodeOutputBody } from "./node-output-DlySTwxr.js";
|
|
3
3
|
import { t as loadElk } from "./elk-loader-Dl9S7jQk.js";
|
|
4
4
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
package/dist/globals.css
CHANGED
|
@@ -78,7 +78,6 @@
|
|
|
78
78
|
--radius-xl: 12px;
|
|
79
79
|
--radius-2xl: 1rem;
|
|
80
80
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
81
|
-
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
82
81
|
--animate-spin: spin 1s linear infinite;
|
|
83
82
|
--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
84
83
|
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
@@ -4490,10 +4489,6 @@
|
|
|
4490
4489
|
--tw-duration: var(--transition-fast);
|
|
4491
4490
|
transition-duration: var(--transition-fast);
|
|
4492
4491
|
}
|
|
4493
|
-
.ease-in-out {
|
|
4494
|
-
--tw-ease: var(--ease-in-out);
|
|
4495
|
-
transition-timing-function: var(--ease-in-out);
|
|
4496
|
-
}
|
|
4497
4492
|
.ease-out {
|
|
4498
4493
|
--tw-ease: var(--ease-out);
|
|
4499
4494
|
transition-timing-function: var(--ease-out);
|
|
@@ -5398,15 +5393,25 @@
|
|
|
5398
5393
|
.has-\[\:is\(textarea\,select\,\[contenteditable\]\:not\(\[contenteditable\=false\]\)\,input\:not\(\[type\=button\]\,\[type\=submit\]\,\[type\=reset\]\,\[type\=image\]\,\[type\=checkbox\]\,\[type\=radio\]\,\[type\=range\]\,\[type\=color\]\,\[type\=file\]\)\)\:focus\]\:ring-\[var\(--focus-halo\)\]:has(:is(:is(textarea, select, [contenteditable]:not([contenteditable=false]), input:not([type=button], [type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range], [type=color], [type=file])):focus)) {
|
|
5399
5394
|
--tw-ring-color: var(--focus-halo);
|
|
5400
5395
|
}
|
|
5396
|
+
.aria-checked\:border-border[aria-checked="true"] {
|
|
5397
|
+
border-color: hsl(var(--border));
|
|
5398
|
+
}
|
|
5401
5399
|
.aria-checked\:bg-\[hsl\(var\(--hsl-ring\)\/0\.07\)\][aria-checked="true"] {
|
|
5402
5400
|
background-color: hsl(var(--hsl-ring)/0.07);
|
|
5403
5401
|
}
|
|
5404
5402
|
.aria-checked\:bg-\[var\(--ix-sel-bg\)\][aria-checked="true"] {
|
|
5405
5403
|
background-color: var(--ix-sel-bg);
|
|
5406
5404
|
}
|
|
5405
|
+
.aria-checked\:bg-card[aria-checked="true"] {
|
|
5406
|
+
background-color: hsl(var(--card));
|
|
5407
|
+
}
|
|
5407
5408
|
.aria-checked\:text-\[var\(--accent-text\)\][aria-checked="true"] {
|
|
5408
5409
|
color: var(--accent-text);
|
|
5409
5410
|
}
|
|
5411
|
+
.aria-checked\:shadow-\[0_1px_2px_rgb\(0_0_0\/0\.08\)\][aria-checked="true"] {
|
|
5412
|
+
--tw-shadow: 0 1px 2px var(--tw-shadow-color, rgb(0 0 0/0.08));
|
|
5413
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
5414
|
+
}
|
|
5410
5415
|
.aria-checked\:shadow-\[inset_0_-2px_0_var\(--ix-sel-ring\)\][aria-checked="true"] {
|
|
5411
5416
|
--tw-shadow: inset 0 -2px 0 var(--tw-shadow-color, var(--ix-sel-ring));
|
|
5412
5417
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
@@ -5415,6 +5420,11 @@
|
|
|
5415
5420
|
--tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--ix-sel-ring));
|
|
5416
5421
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
5417
5422
|
}
|
|
5423
|
+
@media (hover: hover) {
|
|
5424
|
+
.hover\:aria-checked\:bg-card:hover[aria-checked="true"] {
|
|
5425
|
+
background-color: hsl(var(--card));
|
|
5426
|
+
}
|
|
5427
|
+
}
|
|
5418
5428
|
.aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
|
|
5419
5429
|
cursor: not-allowed;
|
|
5420
5430
|
}
|
|
@@ -8701,6 +8711,248 @@
|
|
|
8701
8711
|
.tangle-prose th:not(:first-child), .tangle-prose td:not(:first-child) {
|
|
8702
8712
|
border-left: 1px solid var(--border-subtle);
|
|
8703
8713
|
}
|
|
8714
|
+
.ag-live {
|
|
8715
|
+
--ag-fg: hsl(var(--foreground));
|
|
8716
|
+
--ag-muted: hsl(var(--muted-foreground));
|
|
8717
|
+
--ag-surface: hsl(var(--card));
|
|
8718
|
+
--ag-border: hsl(var(--border));
|
|
8719
|
+
}
|
|
8720
|
+
.ag-live .ag-live-card {
|
|
8721
|
+
position: relative;
|
|
8722
|
+
display: flex;
|
|
8723
|
+
flex-direction: column;
|
|
8724
|
+
gap: 8px;
|
|
8725
|
+
width: 100%;
|
|
8726
|
+
height: 100%;
|
|
8727
|
+
padding: 12px;
|
|
8728
|
+
border: 1px solid var(--ag-border);
|
|
8729
|
+
border-radius: 14px;
|
|
8730
|
+
background: var(--ag-surface);
|
|
8731
|
+
color: var(--ag-fg);
|
|
8732
|
+
cursor: pointer;
|
|
8733
|
+
overflow: hidden;
|
|
8734
|
+
animation: ag-live-grow 420ms cubic-bezier(.2,.8,.2,1) both;
|
|
8735
|
+
transform-origin: 50% 0;
|
|
8736
|
+
transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(.2,.8,.2,1);
|
|
8737
|
+
}
|
|
8738
|
+
.ag-live .ag-live-card:hover {
|
|
8739
|
+
transform: translateY(-1px);
|
|
8740
|
+
}
|
|
8741
|
+
.ag-live .ag-live-card[data-status="running"]::before {
|
|
8742
|
+
content: "";
|
|
8743
|
+
position: absolute;
|
|
8744
|
+
inset: 0 0 auto;
|
|
8745
|
+
height: 2px;
|
|
8746
|
+
background: linear-gradient(90deg, transparent, var(--ag-status), transparent);
|
|
8747
|
+
background-size: 40% 100%;
|
|
8748
|
+
background-repeat: no-repeat;
|
|
8749
|
+
animation: ag-live-sheen 2.4s ease-in-out infinite;
|
|
8750
|
+
}
|
|
8751
|
+
.ag-live .ag-live-head {
|
|
8752
|
+
display: flex;
|
|
8753
|
+
align-items: center;
|
|
8754
|
+
gap: 8px;
|
|
8755
|
+
min-width: 0;
|
|
8756
|
+
}
|
|
8757
|
+
.ag-live .ag-live-names {
|
|
8758
|
+
display: flex;
|
|
8759
|
+
flex-direction: column;
|
|
8760
|
+
min-width: 0;
|
|
8761
|
+
flex: 1;
|
|
8762
|
+
}
|
|
8763
|
+
.ag-live .ag-live-name {
|
|
8764
|
+
font-size: 14px;
|
|
8765
|
+
line-height: 18px;
|
|
8766
|
+
font-weight: 600;
|
|
8767
|
+
letter-spacing: -.01em;
|
|
8768
|
+
white-space: nowrap;
|
|
8769
|
+
overflow: hidden;
|
|
8770
|
+
text-overflow: ellipsis;
|
|
8771
|
+
}
|
|
8772
|
+
.ag-live .ag-live-meta, .ag-live .ag-live-stats {
|
|
8773
|
+
font-size: 11px;
|
|
8774
|
+
line-height: 14px;
|
|
8775
|
+
color: var(--ag-muted);
|
|
8776
|
+
white-space: nowrap;
|
|
8777
|
+
overflow: hidden;
|
|
8778
|
+
text-overflow: ellipsis;
|
|
8779
|
+
}
|
|
8780
|
+
.ag-live .ag-live-stats {
|
|
8781
|
+
display: flex;
|
|
8782
|
+
flex-direction: column;
|
|
8783
|
+
align-items: flex-end;
|
|
8784
|
+
gap: 2px;
|
|
8785
|
+
font-variant-numeric: tabular-nums;
|
|
8786
|
+
flex: none;
|
|
8787
|
+
}
|
|
8788
|
+
.ag-live .ag-live-pill {
|
|
8789
|
+
display: inline-flex;
|
|
8790
|
+
align-items: center;
|
|
8791
|
+
gap: 4px;
|
|
8792
|
+
height: 16px;
|
|
8793
|
+
padding: 0 6px;
|
|
8794
|
+
border-radius: 8px;
|
|
8795
|
+
font-weight: 600;
|
|
8796
|
+
color: var(--ag-status);
|
|
8797
|
+
background: var(--ag-status);
|
|
8798
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
8799
|
+
background: color-mix(in oklab, var(--ag-status) 14%, transparent);
|
|
8800
|
+
}
|
|
8801
|
+
}
|
|
8802
|
+
.ag-live .ag-live-dot {
|
|
8803
|
+
width: 6px;
|
|
8804
|
+
height: 6px;
|
|
8805
|
+
border-radius: 50%;
|
|
8806
|
+
background: var(--ag-status);
|
|
8807
|
+
}
|
|
8808
|
+
.ag-live [data-status="running"] .ag-live-dot {
|
|
8809
|
+
animation: ag-live-breathe 1.6s ease-in-out infinite;
|
|
8810
|
+
}
|
|
8811
|
+
.ag-live .ag-live-thinking {
|
|
8812
|
+
flex: none;
|
|
8813
|
+
margin: 0;
|
|
8814
|
+
font-size: 13px;
|
|
8815
|
+
line-height: 17px;
|
|
8816
|
+
display: -webkit-box;
|
|
8817
|
+
-webkit-line-clamp: 2;
|
|
8818
|
+
-webkit-box-orient: vertical;
|
|
8819
|
+
overflow: hidden;
|
|
8820
|
+
animation: ag-live-in 260ms ease-out both;
|
|
8821
|
+
}
|
|
8822
|
+
.ag-live .ag-live-quiet {
|
|
8823
|
+
color: var(--ag-muted);
|
|
8824
|
+
}
|
|
8825
|
+
.ag-live .ag-live-failure {
|
|
8826
|
+
color: var(--ag-status);
|
|
8827
|
+
}
|
|
8828
|
+
.ag-live .ag-live-events {
|
|
8829
|
+
margin: auto 0 0;
|
|
8830
|
+
padding: 0;
|
|
8831
|
+
list-style: none;
|
|
8832
|
+
display: flex;
|
|
8833
|
+
flex-direction: column;
|
|
8834
|
+
}
|
|
8835
|
+
.ag-live .ag-live-events li {
|
|
8836
|
+
display: flex;
|
|
8837
|
+
align-items: center;
|
|
8838
|
+
gap: 6px;
|
|
8839
|
+
height: 16px;
|
|
8840
|
+
font: 11px/16px var(--font-mono, ui-monospace, monospace);
|
|
8841
|
+
color: var(--ag-muted);
|
|
8842
|
+
animation: ag-live-in 260ms cubic-bezier(.2,.8,.2,1) both;
|
|
8843
|
+
}
|
|
8844
|
+
.ag-live .ag-live-events li svg {
|
|
8845
|
+
flex: none;
|
|
8846
|
+
opacity: .8;
|
|
8847
|
+
}
|
|
8848
|
+
.ag-live .ag-live-events li:nth-last-child(3) {
|
|
8849
|
+
opacity: .55;
|
|
8850
|
+
}
|
|
8851
|
+
.ag-live .ag-live-events li:nth-last-child(2) {
|
|
8852
|
+
opacity: .8;
|
|
8853
|
+
}
|
|
8854
|
+
.ag-live .ag-live-events li:last-child {
|
|
8855
|
+
color: var(--ag-fg);
|
|
8856
|
+
animation: ag-live-in 260ms cubic-bezier(.2,.8,.2,1) both, ag-live-flash 1.2s ease-out both;
|
|
8857
|
+
}
|
|
8858
|
+
.ag-live .ag-live-event-label {
|
|
8859
|
+
flex: 1;
|
|
8860
|
+
min-width: 0;
|
|
8861
|
+
white-space: nowrap;
|
|
8862
|
+
overflow: hidden;
|
|
8863
|
+
text-overflow: ellipsis;
|
|
8864
|
+
}
|
|
8865
|
+
.ag-live .ag-live-event-at {
|
|
8866
|
+
flex: none;
|
|
8867
|
+
font-family: inherit;
|
|
8868
|
+
color: var(--ag-muted);
|
|
8869
|
+
font-variant-numeric: tabular-nums;
|
|
8870
|
+
}
|
|
8871
|
+
.ag-live .ag-live-slot {
|
|
8872
|
+
display: flex;
|
|
8873
|
+
align-items: center;
|
|
8874
|
+
justify-content: center;
|
|
8875
|
+
width: 100%;
|
|
8876
|
+
height: 100%;
|
|
8877
|
+
}
|
|
8878
|
+
.ag-live .ag-live-chip {
|
|
8879
|
+
display: inline-flex;
|
|
8880
|
+
align-items: center;
|
|
8881
|
+
gap: 8px;
|
|
8882
|
+
max-width: 100%;
|
|
8883
|
+
height: 32px;
|
|
8884
|
+
padding: 0 12px;
|
|
8885
|
+
border: 1px solid var(--ag-border);
|
|
8886
|
+
border-radius: 16px;
|
|
8887
|
+
background: var(--ag-surface);
|
|
8888
|
+
color: var(--ag-muted);
|
|
8889
|
+
font-size: 12px;
|
|
8890
|
+
cursor: pointer;
|
|
8891
|
+
animation: ag-live-settle 320ms cubic-bezier(.2,.8,.2,1) both;
|
|
8892
|
+
}
|
|
8893
|
+
.ag-live .ag-live-chip-name {
|
|
8894
|
+
color: var(--ag-fg);
|
|
8895
|
+
font-weight: 600;
|
|
8896
|
+
white-space: nowrap;
|
|
8897
|
+
overflow: hidden;
|
|
8898
|
+
text-overflow: ellipsis;
|
|
8899
|
+
}
|
|
8900
|
+
.ag-live .ag-live-chip-result {
|
|
8901
|
+
color: var(--ag-fg);
|
|
8902
|
+
font-weight: 500;
|
|
8903
|
+
line-height: 16px;
|
|
8904
|
+
white-space: nowrap;
|
|
8905
|
+
overflow: hidden;
|
|
8906
|
+
text-overflow: ellipsis;
|
|
8907
|
+
}
|
|
8908
|
+
@keyframes ag-live-sheen {
|
|
8909
|
+
from {
|
|
8910
|
+
background-position: -40% 0;
|
|
8911
|
+
}
|
|
8912
|
+
to {
|
|
8913
|
+
background-position: 140% 0;
|
|
8914
|
+
}
|
|
8915
|
+
}
|
|
8916
|
+
@keyframes ag-live-breathe {
|
|
8917
|
+
50% {
|
|
8918
|
+
opacity: .35;
|
|
8919
|
+
transform: scale(.8);
|
|
8920
|
+
}
|
|
8921
|
+
}
|
|
8922
|
+
@keyframes ag-live-flash {
|
|
8923
|
+
from {
|
|
8924
|
+
background: color-mix(in oklab, var(--ag-status) 16%, transparent);
|
|
8925
|
+
}
|
|
8926
|
+
to {
|
|
8927
|
+
background: transparent;
|
|
8928
|
+
}
|
|
8929
|
+
}
|
|
8930
|
+
@keyframes ag-live-grow {
|
|
8931
|
+
from {
|
|
8932
|
+
opacity: 0;
|
|
8933
|
+
transform: scale(.92) translateY(-8px);
|
|
8934
|
+
}
|
|
8935
|
+
}
|
|
8936
|
+
@keyframes ag-live-in {
|
|
8937
|
+
from {
|
|
8938
|
+
opacity: 0;
|
|
8939
|
+
transform: translateY(6px);
|
|
8940
|
+
}
|
|
8941
|
+
}
|
|
8942
|
+
@keyframes ag-live-settle {
|
|
8943
|
+
from {
|
|
8944
|
+
opacity: 1;
|
|
8945
|
+
transform: scale(1.08);
|
|
8946
|
+
}
|
|
8947
|
+
}
|
|
8948
|
+
@media (prefers-reduced-motion: reduce) {
|
|
8949
|
+
.ag-live *, .ag-live *::before {
|
|
8950
|
+
animation: none !important;
|
|
8951
|
+
}
|
|
8952
|
+
.ag-live .ag-live-card:hover {
|
|
8953
|
+
transform: none;
|
|
8954
|
+
}
|
|
8955
|
+
}
|
|
8704
8956
|
@property --tw-translate-x {
|
|
8705
8957
|
syntax: "*";
|
|
8706
8958
|
inherits: false;
|
package/dist/index.js
CHANGED
|
@@ -13,7 +13,7 @@ import { a as CodeSurface, i as CODE_THEME, n as buildUnifiedPatch, r as compute
|
|
|
13
13
|
import { n as PreviewView, t as EmbeddedAppView } from "./embedded-app-view-DXsoPale.js";
|
|
14
14
|
import { OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, findUnsupportedOpenUINode, validateOpenUIJsonArtifact, validateOpenUIJsonNode } from "./openui.js";
|
|
15
15
|
import { a as MessageList, c as UserMessage, d as modelProvider, f as snapHarnessToModel, g as ReasoningLevelPicker, h as HARNESS_REASONING_OPTIONS, i as MessageAuthor, l as isViewerMessage, m as DEFAULT_REASONING_LEVEL_OPTIONS, n as ChatContainer, o as TRANSCRIPT_TEXT, p as AgentProfilePicker, r as ChatMessage, s as ThinkingIndicator, t as AgentTimeline, u as ArtifactAgentDock } from "./chat-4OZD23RA.js";
|
|
16
|
-
import { _ as TraceWorkspace, a as InlineToolItem, b as TraceWaterfall, c as RunPhaseList, d as TaskList, f as ToolCallFeed, g as taskStatus, h as taskProgress, i as InlineThinkingItem, l as RunRowShell, m as showsTaskPriority, n as ApprovalDiffSummary, o as LiveDuration, p as parseToolEvent, r as ExpandedToolDetail, s as RunGroup, t as ApprovalCard, u as RunRowStatusDot, v as foldAgentRows, x as traceSpanMark, y as useAgentStream } from "./run-
|
|
16
|
+
import { _ as TraceWorkspace, a as InlineToolItem, b as TraceWaterfall, c as RunPhaseList, d as TaskList, f as ToolCallFeed, g as taskStatus, h as taskProgress, i as InlineThinkingItem, l as RunRowShell, m as showsTaskPriority, n as ApprovalDiffSummary, o as LiveDuration, p as parseToolEvent, r as ExpandedToolDetail, s as RunGroup, t as ApprovalCard, u as RunRowStatusDot, v as foldAgentRows, x as traceSpanMark, y as useAgentStream } from "./run-2128n_Cm.js";
|
|
17
17
|
import "./vault-tree.js";
|
|
18
18
|
import { a as TangleLoginButton, i as UserMenu, n as GitHubLoginButton, r as LoginLayout, t as AuthHeader } from "./auth-BDpoZ_2f.js";
|
|
19
19
|
import { t as AgentMessagingConnection } from "./connections-DymjzHe_.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { t as cn } from "./utils-BER_bdgE.js";
|
|
2
2
|
import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
|
|
3
3
|
import { t as ProviderIcon } from "./provider-logo-CPKRPHcS.js";
|
|
4
|
-
import { t as AgentGraph } from "./AgentGraph-
|
|
4
|
+
import { t as AgentGraph } from "./AgentGraph-DJEQrKTs.js";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
|
|
7
7
|
import { X } from "lucide-react";
|
package/dist/run.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { t as ApprovalCard, n as ApprovalDiffSummary, r as ExpandedToolDetail, i as InlineThinkingItem, a as InlineToolItem, o as LiveDuration, s as RunGroup, c as RunPhaseList, l as RunRowShell, u as RunRowStatusDot, d as TaskList, f as ToolCallFeed, b as TraceWaterfall, _ as TraceWorkspace, v as foldAgentRows, p as parseToolEvent, m as showsTaskPriority, h as taskProgress, g as taskStatus, x as traceSpanMark, y as useAgentStream } from "./run-
|
|
1
|
+
export { t as ApprovalCard, n as ApprovalDiffSummary, r as ExpandedToolDetail, i as InlineThinkingItem, a as InlineToolItem, o as LiveDuration, s as RunGroup, c as RunPhaseList, l as RunRowShell, u as RunRowStatusDot, d as TaskList, f as ToolCallFeed, b as TraceWaterfall, _ as TraceWorkspace, v as foldAgentRows, p as parseToolEvent, m as showsTaskPriority, h as taskProgress, g as taskStatus, x as traceSpanMark, y as useAgentStream } from "./run-2128n_Cm.js";
|
package/dist/styles.css
CHANGED
|
@@ -78,7 +78,6 @@
|
|
|
78
78
|
--radius-xl: 12px;
|
|
79
79
|
--radius-2xl: 1rem;
|
|
80
80
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
81
|
-
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
82
81
|
--animate-spin: spin 1s linear infinite;
|
|
83
82
|
--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
84
83
|
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
@@ -4490,10 +4489,6 @@
|
|
|
4490
4489
|
--tw-duration: var(--transition-fast);
|
|
4491
4490
|
transition-duration: var(--transition-fast);
|
|
4492
4491
|
}
|
|
4493
|
-
.ease-in-out {
|
|
4494
|
-
--tw-ease: var(--ease-in-out);
|
|
4495
|
-
transition-timing-function: var(--ease-in-out);
|
|
4496
|
-
}
|
|
4497
4492
|
.ease-out {
|
|
4498
4493
|
--tw-ease: var(--ease-out);
|
|
4499
4494
|
transition-timing-function: var(--ease-out);
|
|
@@ -5398,15 +5393,25 @@
|
|
|
5398
5393
|
.has-\[\:is\(textarea\,select\,\[contenteditable\]\:not\(\[contenteditable\=false\]\)\,input\:not\(\[type\=button\]\,\[type\=submit\]\,\[type\=reset\]\,\[type\=image\]\,\[type\=checkbox\]\,\[type\=radio\]\,\[type\=range\]\,\[type\=color\]\,\[type\=file\]\)\)\:focus\]\:ring-\[var\(--focus-halo\)\]:has(:is(:is(textarea, select, [contenteditable]:not([contenteditable=false]), input:not([type=button], [type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range], [type=color], [type=file])):focus)) {
|
|
5399
5394
|
--tw-ring-color: var(--focus-halo);
|
|
5400
5395
|
}
|
|
5396
|
+
.aria-checked\:border-border[aria-checked="true"] {
|
|
5397
|
+
border-color: hsl(var(--border));
|
|
5398
|
+
}
|
|
5401
5399
|
.aria-checked\:bg-\[hsl\(var\(--hsl-ring\)\/0\.07\)\][aria-checked="true"] {
|
|
5402
5400
|
background-color: hsl(var(--hsl-ring)/0.07);
|
|
5403
5401
|
}
|
|
5404
5402
|
.aria-checked\:bg-\[var\(--ix-sel-bg\)\][aria-checked="true"] {
|
|
5405
5403
|
background-color: var(--ix-sel-bg);
|
|
5406
5404
|
}
|
|
5405
|
+
.aria-checked\:bg-card[aria-checked="true"] {
|
|
5406
|
+
background-color: hsl(var(--card));
|
|
5407
|
+
}
|
|
5407
5408
|
.aria-checked\:text-\[var\(--accent-text\)\][aria-checked="true"] {
|
|
5408
5409
|
color: var(--accent-text);
|
|
5409
5410
|
}
|
|
5411
|
+
.aria-checked\:shadow-\[0_1px_2px_rgb\(0_0_0\/0\.08\)\][aria-checked="true"] {
|
|
5412
|
+
--tw-shadow: 0 1px 2px var(--tw-shadow-color, rgb(0 0 0/0.08));
|
|
5413
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
5414
|
+
}
|
|
5410
5415
|
.aria-checked\:shadow-\[inset_0_-2px_0_var\(--ix-sel-ring\)\][aria-checked="true"] {
|
|
5411
5416
|
--tw-shadow: inset 0 -2px 0 var(--tw-shadow-color, var(--ix-sel-ring));
|
|
5412
5417
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
@@ -5415,6 +5420,11 @@
|
|
|
5415
5420
|
--tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--ix-sel-ring));
|
|
5416
5421
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
5417
5422
|
}
|
|
5423
|
+
@media (hover: hover) {
|
|
5424
|
+
.hover\:aria-checked\:bg-card:hover[aria-checked="true"] {
|
|
5425
|
+
background-color: hsl(var(--card));
|
|
5426
|
+
}
|
|
5427
|
+
}
|
|
5418
5428
|
.aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
|
|
5419
5429
|
cursor: not-allowed;
|
|
5420
5430
|
}
|
|
@@ -8701,6 +8711,248 @@
|
|
|
8701
8711
|
.tangle-prose th:not(:first-child), .tangle-prose td:not(:first-child) {
|
|
8702
8712
|
border-left: 1px solid var(--border-subtle);
|
|
8703
8713
|
}
|
|
8714
|
+
.ag-live {
|
|
8715
|
+
--ag-fg: hsl(var(--foreground));
|
|
8716
|
+
--ag-muted: hsl(var(--muted-foreground));
|
|
8717
|
+
--ag-surface: hsl(var(--card));
|
|
8718
|
+
--ag-border: hsl(var(--border));
|
|
8719
|
+
}
|
|
8720
|
+
.ag-live .ag-live-card {
|
|
8721
|
+
position: relative;
|
|
8722
|
+
display: flex;
|
|
8723
|
+
flex-direction: column;
|
|
8724
|
+
gap: 8px;
|
|
8725
|
+
width: 100%;
|
|
8726
|
+
height: 100%;
|
|
8727
|
+
padding: 12px;
|
|
8728
|
+
border: 1px solid var(--ag-border);
|
|
8729
|
+
border-radius: 14px;
|
|
8730
|
+
background: var(--ag-surface);
|
|
8731
|
+
color: var(--ag-fg);
|
|
8732
|
+
cursor: pointer;
|
|
8733
|
+
overflow: hidden;
|
|
8734
|
+
animation: ag-live-grow 420ms cubic-bezier(.2,.8,.2,1) both;
|
|
8735
|
+
transform-origin: 50% 0;
|
|
8736
|
+
transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(.2,.8,.2,1);
|
|
8737
|
+
}
|
|
8738
|
+
.ag-live .ag-live-card:hover {
|
|
8739
|
+
transform: translateY(-1px);
|
|
8740
|
+
}
|
|
8741
|
+
.ag-live .ag-live-card[data-status="running"]::before {
|
|
8742
|
+
content: "";
|
|
8743
|
+
position: absolute;
|
|
8744
|
+
inset: 0 0 auto;
|
|
8745
|
+
height: 2px;
|
|
8746
|
+
background: linear-gradient(90deg, transparent, var(--ag-status), transparent);
|
|
8747
|
+
background-size: 40% 100%;
|
|
8748
|
+
background-repeat: no-repeat;
|
|
8749
|
+
animation: ag-live-sheen 2.4s ease-in-out infinite;
|
|
8750
|
+
}
|
|
8751
|
+
.ag-live .ag-live-head {
|
|
8752
|
+
display: flex;
|
|
8753
|
+
align-items: center;
|
|
8754
|
+
gap: 8px;
|
|
8755
|
+
min-width: 0;
|
|
8756
|
+
}
|
|
8757
|
+
.ag-live .ag-live-names {
|
|
8758
|
+
display: flex;
|
|
8759
|
+
flex-direction: column;
|
|
8760
|
+
min-width: 0;
|
|
8761
|
+
flex: 1;
|
|
8762
|
+
}
|
|
8763
|
+
.ag-live .ag-live-name {
|
|
8764
|
+
font-size: 14px;
|
|
8765
|
+
line-height: 18px;
|
|
8766
|
+
font-weight: 600;
|
|
8767
|
+
letter-spacing: -.01em;
|
|
8768
|
+
white-space: nowrap;
|
|
8769
|
+
overflow: hidden;
|
|
8770
|
+
text-overflow: ellipsis;
|
|
8771
|
+
}
|
|
8772
|
+
.ag-live .ag-live-meta, .ag-live .ag-live-stats {
|
|
8773
|
+
font-size: 11px;
|
|
8774
|
+
line-height: 14px;
|
|
8775
|
+
color: var(--ag-muted);
|
|
8776
|
+
white-space: nowrap;
|
|
8777
|
+
overflow: hidden;
|
|
8778
|
+
text-overflow: ellipsis;
|
|
8779
|
+
}
|
|
8780
|
+
.ag-live .ag-live-stats {
|
|
8781
|
+
display: flex;
|
|
8782
|
+
flex-direction: column;
|
|
8783
|
+
align-items: flex-end;
|
|
8784
|
+
gap: 2px;
|
|
8785
|
+
font-variant-numeric: tabular-nums;
|
|
8786
|
+
flex: none;
|
|
8787
|
+
}
|
|
8788
|
+
.ag-live .ag-live-pill {
|
|
8789
|
+
display: inline-flex;
|
|
8790
|
+
align-items: center;
|
|
8791
|
+
gap: 4px;
|
|
8792
|
+
height: 16px;
|
|
8793
|
+
padding: 0 6px;
|
|
8794
|
+
border-radius: 8px;
|
|
8795
|
+
font-weight: 600;
|
|
8796
|
+
color: var(--ag-status);
|
|
8797
|
+
background: var(--ag-status);
|
|
8798
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
8799
|
+
background: color-mix(in oklab, var(--ag-status) 14%, transparent);
|
|
8800
|
+
}
|
|
8801
|
+
}
|
|
8802
|
+
.ag-live .ag-live-dot {
|
|
8803
|
+
width: 6px;
|
|
8804
|
+
height: 6px;
|
|
8805
|
+
border-radius: 50%;
|
|
8806
|
+
background: var(--ag-status);
|
|
8807
|
+
}
|
|
8808
|
+
.ag-live [data-status="running"] .ag-live-dot {
|
|
8809
|
+
animation: ag-live-breathe 1.6s ease-in-out infinite;
|
|
8810
|
+
}
|
|
8811
|
+
.ag-live .ag-live-thinking {
|
|
8812
|
+
flex: none;
|
|
8813
|
+
margin: 0;
|
|
8814
|
+
font-size: 13px;
|
|
8815
|
+
line-height: 17px;
|
|
8816
|
+
display: -webkit-box;
|
|
8817
|
+
-webkit-line-clamp: 2;
|
|
8818
|
+
-webkit-box-orient: vertical;
|
|
8819
|
+
overflow: hidden;
|
|
8820
|
+
animation: ag-live-in 260ms ease-out both;
|
|
8821
|
+
}
|
|
8822
|
+
.ag-live .ag-live-quiet {
|
|
8823
|
+
color: var(--ag-muted);
|
|
8824
|
+
}
|
|
8825
|
+
.ag-live .ag-live-failure {
|
|
8826
|
+
color: var(--ag-status);
|
|
8827
|
+
}
|
|
8828
|
+
.ag-live .ag-live-events {
|
|
8829
|
+
margin: auto 0 0;
|
|
8830
|
+
padding: 0;
|
|
8831
|
+
list-style: none;
|
|
8832
|
+
display: flex;
|
|
8833
|
+
flex-direction: column;
|
|
8834
|
+
}
|
|
8835
|
+
.ag-live .ag-live-events li {
|
|
8836
|
+
display: flex;
|
|
8837
|
+
align-items: center;
|
|
8838
|
+
gap: 6px;
|
|
8839
|
+
height: 16px;
|
|
8840
|
+
font: 11px/16px var(--font-mono, ui-monospace, monospace);
|
|
8841
|
+
color: var(--ag-muted);
|
|
8842
|
+
animation: ag-live-in 260ms cubic-bezier(.2,.8,.2,1) both;
|
|
8843
|
+
}
|
|
8844
|
+
.ag-live .ag-live-events li svg {
|
|
8845
|
+
flex: none;
|
|
8846
|
+
opacity: .8;
|
|
8847
|
+
}
|
|
8848
|
+
.ag-live .ag-live-events li:nth-last-child(3) {
|
|
8849
|
+
opacity: .55;
|
|
8850
|
+
}
|
|
8851
|
+
.ag-live .ag-live-events li:nth-last-child(2) {
|
|
8852
|
+
opacity: .8;
|
|
8853
|
+
}
|
|
8854
|
+
.ag-live .ag-live-events li:last-child {
|
|
8855
|
+
color: var(--ag-fg);
|
|
8856
|
+
animation: ag-live-in 260ms cubic-bezier(.2,.8,.2,1) both, ag-live-flash 1.2s ease-out both;
|
|
8857
|
+
}
|
|
8858
|
+
.ag-live .ag-live-event-label {
|
|
8859
|
+
flex: 1;
|
|
8860
|
+
min-width: 0;
|
|
8861
|
+
white-space: nowrap;
|
|
8862
|
+
overflow: hidden;
|
|
8863
|
+
text-overflow: ellipsis;
|
|
8864
|
+
}
|
|
8865
|
+
.ag-live .ag-live-event-at {
|
|
8866
|
+
flex: none;
|
|
8867
|
+
font-family: inherit;
|
|
8868
|
+
color: var(--ag-muted);
|
|
8869
|
+
font-variant-numeric: tabular-nums;
|
|
8870
|
+
}
|
|
8871
|
+
.ag-live .ag-live-slot {
|
|
8872
|
+
display: flex;
|
|
8873
|
+
align-items: center;
|
|
8874
|
+
justify-content: center;
|
|
8875
|
+
width: 100%;
|
|
8876
|
+
height: 100%;
|
|
8877
|
+
}
|
|
8878
|
+
.ag-live .ag-live-chip {
|
|
8879
|
+
display: inline-flex;
|
|
8880
|
+
align-items: center;
|
|
8881
|
+
gap: 8px;
|
|
8882
|
+
max-width: 100%;
|
|
8883
|
+
height: 32px;
|
|
8884
|
+
padding: 0 12px;
|
|
8885
|
+
border: 1px solid var(--ag-border);
|
|
8886
|
+
border-radius: 16px;
|
|
8887
|
+
background: var(--ag-surface);
|
|
8888
|
+
color: var(--ag-muted);
|
|
8889
|
+
font-size: 12px;
|
|
8890
|
+
cursor: pointer;
|
|
8891
|
+
animation: ag-live-settle 320ms cubic-bezier(.2,.8,.2,1) both;
|
|
8892
|
+
}
|
|
8893
|
+
.ag-live .ag-live-chip-name {
|
|
8894
|
+
color: var(--ag-fg);
|
|
8895
|
+
font-weight: 600;
|
|
8896
|
+
white-space: nowrap;
|
|
8897
|
+
overflow: hidden;
|
|
8898
|
+
text-overflow: ellipsis;
|
|
8899
|
+
}
|
|
8900
|
+
.ag-live .ag-live-chip-result {
|
|
8901
|
+
color: var(--ag-fg);
|
|
8902
|
+
font-weight: 500;
|
|
8903
|
+
line-height: 16px;
|
|
8904
|
+
white-space: nowrap;
|
|
8905
|
+
overflow: hidden;
|
|
8906
|
+
text-overflow: ellipsis;
|
|
8907
|
+
}
|
|
8908
|
+
@keyframes ag-live-sheen {
|
|
8909
|
+
from {
|
|
8910
|
+
background-position: -40% 0;
|
|
8911
|
+
}
|
|
8912
|
+
to {
|
|
8913
|
+
background-position: 140% 0;
|
|
8914
|
+
}
|
|
8915
|
+
}
|
|
8916
|
+
@keyframes ag-live-breathe {
|
|
8917
|
+
50% {
|
|
8918
|
+
opacity: .35;
|
|
8919
|
+
transform: scale(.8);
|
|
8920
|
+
}
|
|
8921
|
+
}
|
|
8922
|
+
@keyframes ag-live-flash {
|
|
8923
|
+
from {
|
|
8924
|
+
background: color-mix(in oklab, var(--ag-status) 16%, transparent);
|
|
8925
|
+
}
|
|
8926
|
+
to {
|
|
8927
|
+
background: transparent;
|
|
8928
|
+
}
|
|
8929
|
+
}
|
|
8930
|
+
@keyframes ag-live-grow {
|
|
8931
|
+
from {
|
|
8932
|
+
opacity: 0;
|
|
8933
|
+
transform: scale(.92) translateY(-8px);
|
|
8934
|
+
}
|
|
8935
|
+
}
|
|
8936
|
+
@keyframes ag-live-in {
|
|
8937
|
+
from {
|
|
8938
|
+
opacity: 0;
|
|
8939
|
+
transform: translateY(6px);
|
|
8940
|
+
}
|
|
8941
|
+
}
|
|
8942
|
+
@keyframes ag-live-settle {
|
|
8943
|
+
from {
|
|
8944
|
+
opacity: 1;
|
|
8945
|
+
transform: scale(1.08);
|
|
8946
|
+
}
|
|
8947
|
+
}
|
|
8948
|
+
@media (prefers-reduced-motion: reduce) {
|
|
8949
|
+
.ag-live *, .ag-live *::before {
|
|
8950
|
+
animation: none !important;
|
|
8951
|
+
}
|
|
8952
|
+
.ag-live .ag-live-card:hover {
|
|
8953
|
+
transform: none;
|
|
8954
|
+
}
|
|
8955
|
+
}
|
|
8704
8956
|
@property --tw-translate-x {
|
|
8705
8957
|
syntax: "*";
|
|
8706
8958
|
inherits: false;
|
package/dist/tailwind.css
CHANGED
|
@@ -893,6 +893,50 @@
|
|
|
893
893
|
border-left: 1px solid var(--border-subtle);
|
|
894
894
|
}
|
|
895
895
|
|
|
896
|
+
/* AgentGraph live cards, scoped under `.ag-live` on the package theme tokens. Type 11/12/13/14 px, 4 px grid. */
|
|
897
|
+
.ag-live { --ag-fg: hsl(var(--foreground)); --ag-muted: hsl(var(--muted-foreground)); --ag-surface: hsl(var(--card)); --ag-border: hsl(var(--border)); }
|
|
898
|
+
.ag-live .ag-live-card { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; padding: 12px; border: 1px solid var(--ag-border);
|
|
899
|
+
border-radius: 14px; background: var(--ag-surface); color: var(--ag-fg); cursor: pointer; overflow: hidden; animation: ag-live-grow 420ms cubic-bezier(.2,.8,.2,1) both; transform-origin: 50% 0;
|
|
900
|
+
transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(.2,.8,.2,1); }
|
|
901
|
+
.ag-live .ag-live-card:hover { transform: translateY(-1px); }
|
|
902
|
+
/* A running agent's card carries a thin travelling sheen along its top edge: work in progress without a glowing border. */
|
|
903
|
+
.ag-live .ag-live-card[data-status="running"]::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px;
|
|
904
|
+
background: linear-gradient(90deg, transparent, var(--ag-status), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: ag-live-sheen 2.4s ease-in-out infinite; }
|
|
905
|
+
.ag-live .ag-live-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
906
|
+
.ag-live .ag-live-names { display: flex; flex-direction: column; min-width: 0; flex: 1; }
|
|
907
|
+
.ag-live .ag-live-name { font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
908
|
+
.ag-live .ag-live-meta, .ag-live .ag-live-stats { font-size: 11px; line-height: 14px; color: var(--ag-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
909
|
+
.ag-live .ag-live-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; flex: none; }
|
|
910
|
+
.ag-live .ag-live-pill { display: inline-flex; align-items: center; gap: 4px; height: 16px; padding: 0 6px; border-radius: 8px; font-weight: 600; color: var(--ag-status);
|
|
911
|
+
background: color-mix(in oklab, var(--ag-status) 14%, transparent); }
|
|
912
|
+
.ag-live .ag-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ag-status); }
|
|
913
|
+
.ag-live [data-status="running"] .ag-live-dot { animation: ag-live-breathe 1.6s ease-in-out infinite; }
|
|
914
|
+
.ag-live .ag-live-thinking { flex: none; margin: 0; font-size: 13px; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; animation: ag-live-in 260ms ease-out both; }
|
|
915
|
+
.ag-live .ag-live-quiet { color: var(--ag-muted); }
|
|
916
|
+
.ag-live .ag-live-failure { color: var(--ag-status); }
|
|
917
|
+
.ag-live .ag-live-events { margin: auto 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
|
|
918
|
+
.ag-live .ag-live-events li { display: flex; align-items: center; gap: 6px; height: 16px; font: 11px/16px var(--font-mono, ui-monospace, monospace); color: var(--ag-muted);
|
|
919
|
+
animation: ag-live-in 260ms cubic-bezier(.2,.8,.2,1) both; }
|
|
920
|
+
.ag-live .ag-live-events li svg { flex: none; opacity: .8; }
|
|
921
|
+
/* Older lines fade back so the newest reads first, as a log tail does. */
|
|
922
|
+
.ag-live .ag-live-events li:nth-last-child(3) { opacity: .55; }
|
|
923
|
+
.ag-live .ag-live-events li:nth-last-child(2) { opacity: .8; }
|
|
924
|
+
.ag-live .ag-live-events li:last-child { color: var(--ag-fg); animation: ag-live-in 260ms cubic-bezier(.2,.8,.2,1) both, ag-live-flash 1.2s ease-out both; }
|
|
925
|
+
.ag-live .ag-live-event-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
926
|
+
.ag-live .ag-live-event-at { flex: none; font-family: inherit; color: var(--ag-muted); font-variant-numeric: tabular-nums; }
|
|
927
|
+
.ag-live .ag-live-slot { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
|
|
928
|
+
.ag-live .ag-live-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 32px; padding: 0 12px; border: 1px solid var(--ag-border); border-radius: 16px;
|
|
929
|
+
background: var(--ag-surface); color: var(--ag-muted); font-size: 12px; cursor: pointer; animation: ag-live-settle 320ms cubic-bezier(.2,.8,.2,1) both; }
|
|
930
|
+
.ag-live .ag-live-chip-name { color: var(--ag-fg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
931
|
+
.ag-live .ag-live-chip-result { color: var(--ag-fg); font-weight: 500; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
932
|
+
@keyframes ag-live-sheen { from { background-position: -40% 0; } to { background-position: 140% 0; } }
|
|
933
|
+
@keyframes ag-live-breathe { 50% { opacity: .35; transform: scale(.8); } }
|
|
934
|
+
@keyframes ag-live-flash { from { background: color-mix(in oklab, var(--ag-status) 16%, transparent); } to { background: transparent; } }
|
|
935
|
+
@keyframes ag-live-grow { from { opacity: 0; transform: scale(.92) translateY(-8px); } }
|
|
936
|
+
@keyframes ag-live-in { from { opacity: 0; transform: translateY(6px); } }
|
|
937
|
+
@keyframes ag-live-settle { from { opacity: 1; transform: scale(1.08); } }
|
|
938
|
+
@media (prefers-reduced-motion: reduce) { .ag-live *, .ag-live *::before { animation: none !important; } .ag-live .ag-live-card:hover { transform: none; } }
|
|
939
|
+
|
|
896
940
|
/* Published sources: this package's dist and its @tangle-network/ui peer. */
|
|
897
941
|
@source "./**/*.js";
|
|
898
942
|
@source "../../ui/dist/**/*.js";
|
package/dist/workflows.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
|
|
2
|
-
import { A as buildWorkflowGraph, D as TRIGGER_NODE_ID, I as actionPathLabel, L as humanizeIdentifier, M as triggerNodeId, N as triggerNodeIndex, O as actionNodeId, R as parseActionPath, c as NodeMark, g as STATUS_TONE, h as STATUS_PILL, k as branchNodeId, m as STATUS_LABEL, n as WorkflowGraph, p as STATUS_COLOR, s as KIND_ICON, t as AgentGraph, v as StatusPill, z as shortModel } from "./AgentGraph-
|
|
2
|
+
import { A as buildWorkflowGraph, D as TRIGGER_NODE_ID, I as actionPathLabel, L as humanizeIdentifier, M as triggerNodeId, N as triggerNodeIndex, O as actionNodeId, R as parseActionPath, c as NodeMark, g as STATUS_TONE, h as STATUS_PILL, k as branchNodeId, m as STATUS_LABEL, n as WorkflowGraph, p as STATUS_COLOR, s as KIND_ICON, t as AgentGraph, v as StatusPill, z as shortModel } from "./AgentGraph-DJEQrKTs.js";
|
|
3
3
|
import { n as classifyOutput, r as condenseText, t as NodeOutputBody } from "./node-output-DlySTwxr.js";
|
|
4
4
|
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tangle-network/sandbox-ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
|
|
6
6
|
"repository": {
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
"@tangle-network/agent-interface": "^1.0.0 || ^2.0.0 || ^3.0.0 || ^5.2.0",
|
|
140
140
|
"@tangle-network/brand": "^1.29.0",
|
|
141
141
|
"@tangle-network/charts": "^0.21.20",
|
|
142
|
-
"@tangle-network/ui": "^11.
|
|
142
|
+
"@tangle-network/ui": "^11.46.0",
|
|
143
143
|
"@tanstack/react-query": "^5.0.0",
|
|
144
144
|
"@tiptap/core": ">=3.20.4 <4.0.0",
|
|
145
145
|
"@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
|
|
@@ -216,7 +216,7 @@
|
|
|
216
216
|
"@radix-ui/react-dialog": "^1.3.1",
|
|
217
217
|
"@radix-ui/react-dropdown-menu": "^2.2.1",
|
|
218
218
|
"@radix-ui/react-select": "^2.4.1",
|
|
219
|
-
"@tangle-network/ui": "^11.
|
|
219
|
+
"@tangle-network/ui": "^11.46.0",
|
|
220
220
|
"diff": "^9.0.0",
|
|
221
221
|
"eventsource-parser": "4.1.2",
|
|
222
222
|
"lucide-react": "^1.61.0",
|
|
@@ -235,7 +235,7 @@
|
|
|
235
235
|
"@storybook/react": "^10.6.3",
|
|
236
236
|
"@storybook/react-vite": "^10.6.3",
|
|
237
237
|
"@tailwindcss/postcss": "^4.3.3",
|
|
238
|
-
"@tangle-network/agent-interface": "5.
|
|
238
|
+
"@tangle-network/agent-interface": "5.10.2",
|
|
239
239
|
"@tangle-network/brand": "1.29.0",
|
|
240
240
|
"@tangle-network/charts": "^0.21.20",
|
|
241
241
|
"@tanstack/react-query": "^5.104.5",
|