openvisio-agent 0.20.0 → 0.22.0
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/CHANGELOG.md +797 -0
- package/README.md +8 -2
- package/USER_GUIDE.md +15 -6
- package/package.json +3 -2
- package/scenarios/runtime.scenarios.mjs +6 -11
- package/scenarios/workspace.scenarios.mjs +4 -3
- package/scripts/certify.mjs +13 -13
- package/src/codex-mcp-proxy.mjs +12 -1
- package/src/events.mjs +23 -3
- package/src/mastra-harness.mjs +51 -22
- package/src/memory.mjs +4 -3
- package/src/model-settings.mjs +57 -0
- package/src/opencode-config.mjs +13 -16
- package/src/runtime-control.mjs +50 -0
- package/src/studio-cli.mjs +11 -0
- package/src/studio-server.mjs +43 -7
- package/src/watch.mjs +239 -168
- package/studio/app.mjs +234 -47
- package/studio/guide.html +15 -3
- package/studio/index.html +45 -9
- package/studio/openvisio.svg +1 -0
- package/studio/satoshi-400.woff2 +0 -0
- package/studio/satoshi-500.woff2 +0 -0
- package/studio/style.css +240 -70
package/studio/index.html
CHANGED
|
@@ -6,11 +6,19 @@
|
|
|
6
6
|
<meta name="color-scheme" content="light">
|
|
7
7
|
<meta name="description" content="A local view of your BYO agents, their work, and recorded progress.">
|
|
8
8
|
<title>Agent studio · OpenVisio</title>
|
|
9
|
+
<link rel="icon" type="image/svg+xml" href="/openvisio.svg">
|
|
10
|
+
<link rel="preload" href="/satoshi-400.woff2" as="font" type="font/woff2" crossorigin>
|
|
9
11
|
<link rel="stylesheet" href="/style.css">
|
|
10
12
|
<script type="module" src="/app.mjs"></script>
|
|
11
13
|
</head>
|
|
12
14
|
<body>
|
|
13
15
|
<svg class="icon-definitions" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs>
|
|
16
|
+
<symbol id="i-agents" viewBox="0 0 24 24"><path d="M12 3v4m-7 5v-2h14v2"/><rect x="8" y="1" width="8" height="5" rx="2"/><rect x="1" y="13" width="8" height="8" rx="3"/><rect x="15" y="13" width="8" height="8" rx="3"/><path d="M4 17h2m12 0h2"/></symbol>
|
|
17
|
+
<symbol id="i-chevron" viewBox="0 0 24 24"><path d="m9 5 7 7-7 7"/></symbol>
|
|
18
|
+
<symbol id="i-book" viewBox="0 0 24 24"><path d="M12 5v16m0-16C9 3 5 3 2 4v15c4-1 7-1 10 2 3-3 6-3 10-2V4c-3-1-7-1-10 1Z"/></symbol>
|
|
19
|
+
<symbol id="i-command" viewBox="0 0 24 24"><path d="m5 7 5 5-5 5m9 0h6"/></symbol>
|
|
20
|
+
<symbol id="i-loader" viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 1-9 9"/></symbol>
|
|
21
|
+
|
|
14
22
|
<symbol id="i-grid" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="2"/><rect x="14" y="3" width="7" height="7" rx="2"/><rect x="3" y="14" width="7" height="7" rx="2"/><rect x="14" y="14" width="7" height="7" rx="2"/></symbol>
|
|
15
23
|
<symbol id="i-pulse" viewBox="0 0 24 24"><path d="M3 12h4l3-7 4 14 3-7h4"/></symbol>
|
|
16
24
|
<symbol id="i-stack" viewBox="0 0 24 24"><path d="m3 7 9-4 9 4-9 4-9-4Zm0 5 9 4 9-4M3 17l9 4 9-4"/></symbol>
|
|
@@ -30,28 +38,56 @@
|
|
|
30
38
|
<a class="skip-link" href="#workspace">Skip to activity</a>
|
|
31
39
|
<div class="app-shell">
|
|
32
40
|
<aside class="sidebar" aria-label="Agent navigation">
|
|
33
|
-
<a class="brand" href="/" aria-label="OpenVisio Agent studio"><span class="brand-mark"><svg
|
|
41
|
+
<a class="brand" href="/" aria-label="OpenVisio Agent studio"><span class="brand-mark"><img src="/openvisio.svg" alt="" width="68" height="68"></span><span>OpenVisio<span class="brand-caption">Local workspace</span></span></a>
|
|
34
42
|
<div class="sidebar-title"><span>Agents</span><span class="count" id="agent-count">0</span></div>
|
|
35
43
|
<label class="agent-search"><svg class="icon" aria-hidden="true"><use href="#i-search"/></svg><input id="agent-search" type="search" placeholder="Find an agent" aria-label="Filter agent list" autocomplete="off"></label>
|
|
36
|
-
<nav id="agent-list" class="agent-list" aria-label="Select an agent"><button class="agent-item is-selected" type="button" aria-pressed="true"><span class="agent-avatar"><svg class="icon" aria-hidden="true"><use href="#i-
|
|
37
|
-
<div class="sidebar-
|
|
44
|
+
<nav id="agent-list" class="agent-list" aria-label="Select an agent"><button class="agent-item is-selected" type="button" aria-pressed="true"><span class="agent-avatar"><svg class="icon" aria-hidden="true"><use href="#i-agents"/></svg></span><span class="agent-text"><span class="agent-name">All agents</span><span class="agent-caption">Waiting for data</span></span></button></nav>
|
|
45
|
+
<div class="sidebar-resources">
|
|
46
|
+
<section class="documentation-card oa-card" aria-labelledby="documentation-title">
|
|
47
|
+
<h2 id="documentation-title"><svg class="icon" aria-hidden="true"><use href="#i-book"/></svg>Documentation</h2>
|
|
48
|
+
<div class="documentation-inset oa-inset">
|
|
49
|
+
<p>Set up your agents and get to know Studio.</p>
|
|
50
|
+
<a class="button documentation-link" href="/guide">Read the guide<svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
|
|
51
|
+
</div>
|
|
52
|
+
</section>
|
|
53
|
+
<div class="sidebar-note"><span class="local-indicator"><span class="dot"></span>On this machine</span><p>Recorded actions from your running BYO agents.</p><span class="mono" id="server-address">localhost:4317</span></div>
|
|
54
|
+
</div>
|
|
38
55
|
</aside>
|
|
39
56
|
<main id="workspace" class="workspace" tabindex="-1">
|
|
40
57
|
<header class="page-header">
|
|
41
58
|
<div><div class="eyebrow">Runtime overview <span id="demo-badge" class="badge demo-badge" hidden>Demo data</span></div><h1>Agent studio</h1><p class="page-description">See what your agents are doing, as it happens.</p></div>
|
|
42
|
-
<div class="header-actions"><a class="button" href="/guide">
|
|
59
|
+
<div class="header-actions"><a class="button header-documentation" href="/guide"><svg class="icon" aria-hidden="true"><use href="#i-book"/></svg>Documentation</a><span id="connection-status" class="connection-status" role="status"><span class="dot"></span><span>Connecting</span></span><button id="pause-button" class="button" type="button" aria-pressed="false"><svg class="icon" aria-hidden="true"><use href="#i-pause"/></svg><span>Pause view</span></button></div>
|
|
43
60
|
</header>
|
|
44
61
|
<div id="notice" class="notice" role="status" hidden></div>
|
|
62
|
+
<section id="model-settings-summary" class="model-settings-summary" aria-label="Agent model settings" hidden>
|
|
63
|
+
<div><h2 id="model-settings-agent">Model settings</h2><p id="model-settings-state" role="status"></p></div>
|
|
64
|
+
<button id="open-model-settings" class="button" type="button">Model settings</button>
|
|
65
|
+
</section>
|
|
66
|
+
<dialog id="model-settings-dialog" aria-labelledby="model-settings-title">
|
|
67
|
+
<form id="model-settings-form" class="model-settings-form">
|
|
68
|
+
<div class="section-heading"><h2 id="model-settings-title">Model settings</h2><button id="close-model-settings" class="button" type="button" aria-label="Close model settings">Close</button></div>
|
|
69
|
+
<p id="model-settings-description">Choose the models this agent uses. Changes apply to its next request; work already running continues.</p>
|
|
70
|
+
<label for="reply-model">Reply model<span>For chat, triage, and coordination</span></label>
|
|
71
|
+
<input id="reply-model" list="runtime-models" placeholder="Choose or search models" required maxlength="200" autocomplete="off">
|
|
72
|
+
<label for="coding-model">Coding model<span>For assigned coding work</span></label>
|
|
73
|
+
<input id="coding-model" list="runtime-models" placeholder="Choose or search models" required maxlength="200" autocomplete="off">
|
|
74
|
+
<datalist id="runtime-models"></datalist>
|
|
75
|
+
<p id="model-catalog-status" role="status">Loading model choices…</p>
|
|
76
|
+
<p class="detail-note">Model access and usage limits depend on the provider connected on this computer.</p>
|
|
77
|
+
<p id="model-settings-error" role="alert" hidden></p>
|
|
78
|
+
<div class="model-settings-actions"><button id="reload-models" class="button" type="button">Reload models</button><button id="save-model-settings" class="button primary" type="submit">Save models</button></div>
|
|
79
|
+
</form>
|
|
80
|
+
</dialog>
|
|
45
81
|
<section class="metrics" aria-label="Workspace summary">
|
|
46
|
-
<article class="metric"><div class="metric-label">Active cycles<svg class="icon" aria-hidden="true"><use href="#i-pulse"/></svg></div><div class="metric-value" id="metric-active">—</div><div class="metric-caption" id="metric-active-caption">Waiting for activity</div></article>
|
|
47
|
-
<article class="metric"><div class="metric-label">In the queue<svg class="icon" aria-hidden="true"><use href="#i-stack"/></svg></div><div class="metric-value" id="metric-queued">—</div><div class="metric-caption" id="metric-queued-caption">Cycles waiting to start</div></article>
|
|
48
|
-
<article class="metric"><div class="metric-label">Processes<svg class="icon" aria-hidden="true"><use href="#i-terminal"/></svg></div><div class="metric-value" id="metric-processes">—</div><div class="metric-caption" id="metric-processes-caption">Watchers and coding runtimes</div></article>
|
|
49
|
-
<article class="metric"><div class="metric-label">Recorded events<svg class="icon" aria-hidden="true"><use href="#i-list"/></svg></div><div class="metric-value" id="metric-events">—</div><div class="metric-caption" id="metric-events-caption">Recent local history</div></article>
|
|
82
|
+
<article class="metric oa-card"><div class="metric-label">Active cycles<svg class="icon" aria-hidden="true"><use href="#i-pulse"/></svg></div><div class="metric-inset oa-inset"><div class="metric-value" id="metric-active">—</div><div class="metric-caption" id="metric-active-caption">Waiting for activity</div></div></article>
|
|
83
|
+
<article class="metric oa-card"><div class="metric-label">In the queue<svg class="icon" aria-hidden="true"><use href="#i-stack"/></svg></div><div class="metric-inset oa-inset"><div class="metric-value" id="metric-queued">—</div><div class="metric-caption" id="metric-queued-caption">Cycles waiting to start</div></div></article>
|
|
84
|
+
<article class="metric oa-card"><div class="metric-label">Processes<svg class="icon" aria-hidden="true"><use href="#i-terminal"/></svg></div><div class="metric-inset oa-inset"><div class="metric-value" id="metric-processes">—</div><div class="metric-caption" id="metric-processes-caption">Watchers and coding runtimes</div></div></article>
|
|
85
|
+
<article class="metric oa-card"><div class="metric-label">Recorded events<svg class="icon" aria-hidden="true"><use href="#i-list"/></svg></div><div class="metric-inset oa-inset"><div class="metric-value" id="metric-events">—</div><div class="metric-caption" id="metric-events-caption">Recent local history</div></div></article>
|
|
50
86
|
</section>
|
|
51
87
|
<section class="work-panel" aria-label="Agent activity">
|
|
52
88
|
<div class="panel-toolbar"><div class="view-tabs" role="group" aria-label="Choose a view"><button class="tab is-selected" type="button" data-view="activity" aria-pressed="true"><svg class="icon" aria-hidden="true"><use href="#i-pulse"/></svg>Activity</button><button class="tab" type="button" data-view="cycles" aria-pressed="false"><svg class="icon" aria-hidden="true"><use href="#i-stack"/></svg>Cycles</button><button class="tab" type="button" data-view="processes" aria-pressed="false"><svg class="icon" aria-hidden="true"><use href="#i-terminal"/></svg>Processes</button></div><label class="follow-control"><input type="checkbox" id="follow-latest" checked>Follow latest</label></div>
|
|
53
89
|
<div class="filters"><label class="search-field"><svg class="icon" aria-hidden="true"><use href="#i-search"/></svg><input id="event-search" type="search" placeholder="Search actions, tickets, files…" aria-label="Search recorded activity" autocomplete="off"></label><label class="select-field"><span class="sr-only">Event kind</span><select id="kind-filter"><option value="all">All kinds</option><option value="cycle">Cycles</option><option value="tool">Tools</option><option value="plan">Plans</option><option value="output">Output</option><option value="process">Processes</option><option value="runtime">Watchers</option></select></label><label class="select-field"><span class="sr-only">Status</span><select id="status-filter"><option value="all">All statuses</option><option value="active">Active</option><option value="queued">Queued</option><option value="completed">Completed</option><option value="failed">Failed</option><option value="cancelled">Cancelled</option><option value="blocked">Blocked</option><option value="skipped">Skipped</option><option value="recovering">Recovering</option><option value="idle">Idle</option><option value="connecting">Connecting</option><option value="timeout">Timed out</option><option value="offline">Offline</option></select></label></div>
|
|
54
|
-
<div class="content-grid"><div class="activity-panel"><div class="section-heading"><h2 id="activity-heading">Latest activity</h2><span class="muted" id="result-count">Connecting…</span></div><div id="activity-list" class="activity-list" aria-label="Recorded activity"><div class="loading-state" role="status"><span class="skeleton skeleton-wide"></span><span class="skeleton"></span><span class="skeleton skeleton-wide"></span><span>Connecting to your local agents…</span></div></div><button id="load-more" class="button load-more" type="button" hidden>Show earlier activity</button></div><aside id="inspector" class="inspector" tabindex="-1" aria-label="Selected activity details"><div class="inspector-empty"><span class="empty-icon"><svg class="icon" aria-hidden="true"><use href="#i-terminal"/></svg></span><h2>The work, in view</h2><p>Select a cycle to see its tools, explicit plan, and recorded output.</p></div></aside></div>
|
|
90
|
+
<div class="content-grid"><div class="activity-panel oa-card"><div class="section-heading"><h2 id="activity-heading">Latest activity</h2><span class="muted" id="result-count">Connecting…</span></div><div id="activity-list" class="activity-list oa-inset" aria-label="Recorded activity"><div class="loading-state" role="status"><span class="skeleton skeleton-wide"></span><span class="skeleton"></span><span class="skeleton skeleton-wide"></span><span>Connecting to your local agents…</span></div></div><button id="load-more" class="button load-more" type="button" hidden>Show earlier activity</button></div><aside id="inspector" class="inspector" tabindex="-1" aria-label="Selected activity details"><div class="inspector-empty"><span class="empty-icon"><svg class="icon" aria-hidden="true"><use href="#i-terminal"/></svg></span><h2>The work, in view</h2><p>Select a cycle to see its tools, explicit plan, and recorded output.</p></div></aside></div>
|
|
55
91
|
</section>
|
|
56
92
|
<footer class="page-footer"><span id="history-label">Local history · no events yet</span><span id="updated-at">Waiting for the first snapshot</span></footer>
|
|
57
93
|
</main>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="240" height="240"><polygon points="90.6,111.0 120.0,128.0 90.6,145.0 61.1,128.0" fill="#A5B4FC"/><polygon points="61.1,128.0 90.6,145.0 90.6,179.0 61.1,162.0" fill="#6366F1"/><polygon points="120.0,128.0 120.0,162.0 90.6,179.0 90.6,145.0" fill="#4338CA"/><polygon points="149.4,111.0 178.9,128.0 149.4,145.0 120.0,128.0" fill="#A5B4FC"/><polygon points="120.0,128.0 149.4,145.0 149.4,179.0 120.0,162.0" fill="#6366F1"/><polygon points="178.9,128.0 178.9,162.0 149.4,179.0 149.4,145.0" fill="#4338CA"/><polygon points="120,60 149.4,77.0 120,94 90.6,77.0" fill="#FCD34D"/><polygon points="90.6,77.0 120,94 120,128 90.6,111.0" fill="#F59E0B"/><polygon points="149.4,77.0 149.4,111.0 120,128 120,94" fill="#B45309"/></svg>
|
|
Binary file
|
|
Binary file
|
package/studio/style.css
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
@layer tokens, base, components, responsive;
|
|
2
2
|
|
|
3
|
+
@font-face { font-family: Satoshi; src: url('/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
|
|
4
|
+
@font-face { font-family: Satoshi; src: url('/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
|
|
5
|
+
|
|
3
6
|
@layer tokens {
|
|
4
7
|
:root {
|
|
5
8
|
--ink: #292929;
|
|
@@ -12,7 +15,12 @@
|
|
|
12
15
|
--border: color-mix(in oklab, var(--ink) 12%, transparent);
|
|
13
16
|
--hover: color-mix(in oklab, var(--ink) 5%, transparent);
|
|
14
17
|
--input: color-mix(in oklab, var(--ink) 14%, transparent);
|
|
15
|
-
--primary: #
|
|
18
|
+
--primary: #202124;
|
|
19
|
+
--focus: #305dde;
|
|
20
|
+
--blue: #2f7ef7;
|
|
21
|
+
--purple: #8b50ef;
|
|
22
|
+
--orange: #f47721;
|
|
23
|
+
--pink: #ef477c;
|
|
16
24
|
--success: #28764f;
|
|
17
25
|
--warning: #97691f;
|
|
18
26
|
--destructive: #b7423c;
|
|
@@ -21,22 +29,22 @@
|
|
|
21
29
|
--radius-md: calc(var(--radius) * 1.8);
|
|
22
30
|
--radius-lg: calc(var(--radius) * 2.2);
|
|
23
31
|
--radius-xl: calc(var(--radius) * 2.6);
|
|
24
|
-
--font-sans:
|
|
32
|
+
--font-sans: Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
25
33
|
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
26
34
|
}
|
|
27
35
|
}
|
|
28
36
|
|
|
29
37
|
@layer base {
|
|
30
38
|
* { box-sizing: border-box; }
|
|
31
|
-
html { min-width: 320px; background: var(--background); }
|
|
32
|
-
body { margin: 0; color: var(--foreground); font-family: var(--font-sans); font-size:
|
|
39
|
+
html { min-width: 320px; overflow-x: clip; background: var(--background); }
|
|
40
|
+
body { margin: 0; color: var(--foreground); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
|
|
33
41
|
button, input, select { font: inherit; color: inherit; }
|
|
34
42
|
button, select, input[type="checkbox"] { cursor: pointer; }
|
|
35
43
|
button { font-weight: 500; }
|
|
36
44
|
button, input, select { -webkit-tap-highlight-color: transparent; }
|
|
37
45
|
button:disabled { cursor: default; opacity: .6; }
|
|
38
46
|
button, a, input, select, summary { touch-action: manipulation; }
|
|
39
|
-
:focus-visible { outline: 2px solid var(--
|
|
47
|
+
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
|
|
40
48
|
button, select, a { transition: background-color .16s ease-out, color .16s ease-out, box-shadow .16s ease-out; }
|
|
41
49
|
h1, h2, h3, h4, p { margin: 0; }
|
|
42
50
|
h1, h2, h3, h4, strong { font-weight: 500; }
|
|
@@ -50,147 +58,269 @@
|
|
|
50
58
|
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
|
51
59
|
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
|
|
52
60
|
.icon { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
|
|
53
|
-
.mono { font-family: var(--font-mono); font-size:
|
|
54
|
-
.muted { color: var(--muted); font-size:
|
|
61
|
+
.mono { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
|
|
62
|
+
.muted { color: var(--muted); font-size: 12px; }
|
|
55
63
|
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
|
|
56
64
|
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 5; transform: translateY(-180%); padding: 10px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
|
|
57
65
|
.skip-link:focus { transform: translateY(0); }
|
|
58
66
|
}
|
|
59
67
|
|
|
60
68
|
@layer components {
|
|
61
|
-
.app-shell { display: grid; grid-template-columns:
|
|
62
|
-
.sidebar { display: flex; flex-direction: column; padding:
|
|
69
|
+
.app-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; gap: 24px; width: calc(100% - 48px); max-width: 1440px; margin: 32px auto; min-height: calc(100dvh - 64px); }
|
|
70
|
+
.sidebar { background: transparent; position: sticky; top: 32px; height: calc(100dvh - 64px); display: flex; flex-direction: column; padding: 24px 14px 20px; border: 0; border-right: 1px solid var(--border); border-radius: 0; min-width: 0; overflow-y: auto; scrollbar-width: thin; }
|
|
63
71
|
.brand { display: flex; align-items: center; gap: 10px; margin: 0 10px 42px; text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: -.25px; }
|
|
64
|
-
.brand-mark { display: grid; place-
|
|
65
|
-
.brand-mark
|
|
66
|
-
.brand-caption { display: block; color: var(--muted); font-weight: 400; font-size:
|
|
67
|
-
.sidebar-title { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; margin-bottom: 13px; font-size:
|
|
68
|
-
.count { font-size:
|
|
72
|
+
.brand-mark { display: grid; place-content: center; flex-shrink: 0; width: 36px; height: 36px; overflow: hidden; }
|
|
73
|
+
.brand-mark img { display: block; width: 68px; height: 68px; max-width: none; }
|
|
74
|
+
.brand-caption { display: block; color: var(--muted); font-weight: 400; font-size: 12px; letter-spacing: 0; margin-top: 1px; }
|
|
75
|
+
.sidebar-title { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; margin-bottom: 13px; font-size: 12px; font-weight: 500; color: var(--muted); }
|
|
76
|
+
.count { font-size: 12px; background: var(--stage); min-width: 22px; height: 19px; display: grid; place-items: center; border-radius: 999px; font-variant-numeric: tabular-nums; }
|
|
69
77
|
.agent-search { display: flex; align-items: center; gap: 7px; padding: 8px 10px; margin: 0 0 12px; color: var(--subtle); }
|
|
70
78
|
.agent-search .icon { width: 14px; height: 14px; }
|
|
71
|
-
.agent-search input { width: 100%; border: 0; outline-offset: 5px; background: transparent; font-size:
|
|
79
|
+
.agent-search input { width: 100%; border: 0; outline-offset: 5px; background: transparent; font-size: 12px; }
|
|
72
80
|
.agent-list { display: flex; flex-direction: column; gap: 5px; }
|
|
73
81
|
.agent-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px; border-radius: var(--radius-md); corner-shape: squircle; }
|
|
74
82
|
.agent-item:hover { background: var(--hover); }
|
|
75
83
|
.agent-item.is-selected { background: var(--stage); }
|
|
76
|
-
.agent-avatar { width: 31px; height: 31px; display: grid; place-items: center; position: relative; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; corner-shape: squircle; color: var(--muted); font-size:
|
|
84
|
+
.agent-avatar { width: 31px; height: 31px; display: grid; place-items: center; position: relative; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; corner-shape: squircle; color: var(--muted); font-size: 12px; font-weight: 500; }
|
|
77
85
|
.avatar-status { position: absolute; width: 7px; height: 7px; right: -1px; bottom: -1px; border-radius: 50%; border: 2px solid var(--background); box-sizing: content-box; background: var(--subtle); }
|
|
78
86
|
.avatar-status.online { background: var(--success); }
|
|
79
87
|
.agent-text { flex: 1; min-width: 0; }
|
|
80
88
|
.agent-name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 500; }
|
|
81
|
-
.agent-caption { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size:
|
|
82
|
-
.sidebar-note { margin:
|
|
89
|
+
.agent-caption { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 2px; }
|
|
90
|
+
.sidebar-note { margin: 20px 10px 0; padding-top: 0; font-size: 12px; color: var(--muted); }
|
|
83
91
|
.sidebar-note p { margin: 10px 0 8px; line-height: 1.7; }
|
|
84
|
-
.sidebar-note .mono { font-size:
|
|
92
|
+
.sidebar-note .mono { font-size: 12px; color: var(--subtle); }
|
|
85
93
|
.local-indicator { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); }
|
|
86
|
-
.workspace { padding:
|
|
94
|
+
.workspace { padding: 8px 0 28px; min-width: 0; width: 100%; }
|
|
87
95
|
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
|
|
88
|
-
.eyebrow { display: flex; align-items: center; gap: 8px; font-size:
|
|
96
|
+
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
|
|
89
97
|
.page-description { color: var(--muted); font-size: 12px; margin-top: 7px; }
|
|
90
98
|
.header-actions { display: flex; align-items: center; gap: 16px; }
|
|
91
|
-
.connection-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size:
|
|
99
|
+
.connection-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; color: var(--muted); }
|
|
92
100
|
.connection-status.connected { color: var(--success); }
|
|
93
101
|
.connection-status.disconnected { color: var(--warning); }
|
|
94
|
-
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height:
|
|
102
|
+
.button { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 7px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; font-size: 12px; box-shadow: 0 1px 1px color-mix(in oklab, var(--ink) 3%, transparent); }
|
|
95
103
|
.button:hover { background: var(--hover); }
|
|
96
104
|
.button .icon { width: 14px; height: 14px; }
|
|
97
105
|
.button.primary { color: white; background: var(--primary); border-color: transparent; }
|
|
98
106
|
.button.primary:hover { background: color-mix(in oklab, var(--primary) 90%, var(--ink)); }
|
|
99
|
-
.notice { padding: 11px 15px; background: var(--stage); border-radius: var(--radius-sm); font-size:
|
|
107
|
+
.notice { padding: 11px 15px; background: var(--stage); border-radius: var(--radius-sm); font-size: 12px; margin-bottom: 18px; color: var(--muted); overflow-wrap: anywhere; }
|
|
100
108
|
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
|
|
101
|
-
.metric {
|
|
102
|
-
.metric-label { display: flex; align-items: center; justify-content: space-between; font-size:
|
|
109
|
+
.metric { min-width: 0; }
|
|
110
|
+
.metric-label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }
|
|
103
111
|
.metric-label .icon { width: 15px; height: 15px; opacity: .7; }
|
|
104
|
-
.metric-value { font-size:
|
|
105
|
-
.metric-caption { font-size:
|
|
112
|
+
.metric-value { font-size: 34px; font-weight: 400; line-height: 1.4; margin: 9px 0 2px; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
|
|
113
|
+
.metric-caption { font-size: 12px; color: var(--muted); min-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
106
114
|
.work-panel { min-width: 0; }
|
|
107
115
|
.panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
|
|
108
116
|
.view-tabs { display: inline-flex; gap: 2px; padding: 4px; background: var(--stage); border-radius: 999px; }
|
|
109
|
-
.tab { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; padding: 8px 13px; color: var(--muted); background: transparent; font-size:
|
|
117
|
+
.tab { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; padding: 8px 13px; color: var(--muted); background: transparent; font-size: 12px; }
|
|
110
118
|
.tab .icon { width: 14px; height: 14px; }
|
|
111
119
|
.tab:hover { color: var(--ink); }
|
|
112
120
|
.tab.is-selected { color: var(--ink); background: var(--surface); box-shadow: 0 1px 4px color-mix(in oklab, var(--ink) 8%, transparent); }
|
|
113
|
-
.follow-control { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size:
|
|
121
|
+
.follow-control { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; cursor: pointer; }
|
|
114
122
|
.follow-control input { accent-color: var(--primary); width: 13px; height: 13px; margin: 0; }
|
|
115
123
|
.filters { display: flex; gap: 9px; margin-bottom: 19px; }
|
|
116
124
|
.search-field { flex: 1; min-width: 90px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; color: var(--subtle); }
|
|
117
125
|
.search-field .icon { width: 14px; height: 14px; }
|
|
118
|
-
.search-field input { width: 100%; background: transparent; border: 0; font-size:
|
|
126
|
+
.search-field input { width: 100%; background: transparent; border: 0; font-size: 12px; outline-offset: 4px; }
|
|
119
127
|
.select-field { display: inline-flex; align-items: center; min-width: 108px; }
|
|
120
|
-
.select-field select { width: 100%; min-height:
|
|
121
|
-
.content-grid { display: grid; grid-template-columns: minmax(
|
|
128
|
+
.select-field select { width: 100%; min-height: 40px; padding: 7px 26px 7px 12px; border: 1px solid var(--border); border-radius: 999px; background-color: var(--surface); font-size: 12px; }
|
|
129
|
+
.content-grid { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.15fr); gap: 14px; align-items: start; }
|
|
122
130
|
.activity-panel { min-width: 0; }
|
|
123
131
|
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 2px 15px; min-height: 37px; }
|
|
124
132
|
.section-heading h2 { font-size: 12px; }
|
|
125
|
-
.section-heading .muted { font-size:
|
|
126
|
-
.activity-list { display: flex; flex-direction: column; gap:
|
|
127
|
-
.activity-row { display: flex; align-items: flex-start; gap: 11px; text-align: left; width: 100%; padding:
|
|
133
|
+
.section-heading .muted { font-size: 12px; }
|
|
134
|
+
.activity-list { display: flex; flex-direction: column; gap: 8px; max-height: min(67vh, 810px); min-height: 380px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px; }
|
|
135
|
+
.activity-row { display: flex; align-items: flex-start; gap: 11px; text-align: left; width: 100%; padding: 16px 14px; border: 1px solid transparent; border-radius: var(--radius-md); corner-shape: squircle; background: transparent; }
|
|
128
136
|
.activity-row:hover { background: var(--hover); }
|
|
129
|
-
.activity-row.is-selected { background: var(--
|
|
130
|
-
.event-icon { width:
|
|
131
|
-
.event-icon .icon { width:
|
|
137
|
+
.activity-row.is-selected { background: var(--surface); border-color: transparent; box-shadow: 0 1px 2px #00000006; }
|
|
138
|
+
.event-icon { width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; corner-shape: squircle; margin-top: 1px; }
|
|
139
|
+
.event-icon .icon { width: 18px; height: 18px; }
|
|
132
140
|
.event-body { min-width: 0; flex: 1; }
|
|
133
|
-
.event-title { display: block; font-size:
|
|
134
|
-
.event-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size:
|
|
135
|
-
.event-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; font-size:
|
|
136
|
-
.event-meta .badge { font-size:
|
|
137
|
-
.event-time { font-size:
|
|
138
|
-
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--hover); color: var(--muted); font-size:
|
|
141
|
+
.event-title { display: block; font-size: 14px; font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; }
|
|
142
|
+
.event-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 4px; line-height: 1.7; overflow-wrap: anywhere; }
|
|
143
|
+
.event-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 7px; }
|
|
144
|
+
.event-meta .badge { font-size: 12px; padding: 1px 6px; }
|
|
145
|
+
.event-time { font-size: 12px; color: var(--subtle); white-space: nowrap; font-weight: 400; font-family: var(--font-mono); margin-top: 4px; }
|
|
146
|
+
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--hover); color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; }
|
|
139
147
|
.badge .dot { width: 4px; height: 4px; }
|
|
140
148
|
.badge.active, .badge.completed, .badge.online { color: var(--success); }
|
|
141
149
|
.badge.queued, .badge.demo, .badge.connecting, .badge.recovering, .demo-badge { color: var(--warning); }
|
|
142
150
|
.badge.failed, .badge.cancelled, .badge.blocked, .badge.timeout { color: var(--destructive); }
|
|
143
151
|
.load-more { display: flex; margin: 15px auto 0; }
|
|
144
|
-
.inspector { padding:
|
|
152
|
+
.inspector { padding: 2px; border: 0; background: transparent; min-width: 0; min-height: 418px; max-height: min(77vh, 930px); overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; }
|
|
145
153
|
.inspector-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 0 0 15px; }
|
|
146
|
-
.inspector-eyebrow { font-size:
|
|
154
|
+
.inspector-eyebrow { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
|
|
147
155
|
.inspector-title { font-size: 16px; line-height: 1.4; letter-spacing: -.4px; overflow-wrap: anywhere; }
|
|
148
|
-
.inspector-subtitle { font-size:
|
|
156
|
+
.inspector-subtitle { font-size: 12px; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
|
|
149
157
|
.inspector-empty, .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; padding: 40px 26px; min-height: 370px; }
|
|
150
158
|
.inspector-empty h2, .empty-state h2 { font-size: 14px; margin: 15px 0 8px; }
|
|
151
|
-
.inspector-empty p, .empty-state p { color: var(--muted); font-size:
|
|
159
|
+
.inspector-empty p, .empty-state p { color: var(--muted); font-size: 12px; max-width: 280px; line-height: 1.8; }
|
|
152
160
|
.empty-icon { display: grid; place-items: center; width: 42px; height: 42px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); corner-shape: squircle; color: var(--muted); }
|
|
153
161
|
.empty-icon .icon { width: 21px; height: 21px; }
|
|
154
162
|
.empty-state .command-copy { margin: 18px 0 11px; }
|
|
155
163
|
.command-copy { display: flex; width: 100%; max-width: 320px; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); corner-shape: squircle; text-align: left; }
|
|
156
|
-
.command-copy code { font-family: var(--font-mono); font-weight: 400; font-size:
|
|
164
|
+
.command-copy code { font-family: var(--font-mono); font-weight: 400; font-size: 12px; overflow-wrap: anywhere; }
|
|
157
165
|
.command-copy .icon { width: 14px; height: 14px; color: var(--muted); }
|
|
158
|
-
.detail-section { padding:
|
|
159
|
-
.detail-section h3 { display: flex; align-items: center; gap: 6px; margin-bottom:
|
|
166
|
+
.detail-section { padding: 18px; background: var(--surface); border-radius: var(--radius-md); corner-shape: squircle; margin-top: 10px; min-width: 0; }
|
|
167
|
+
.detail-section h3 { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 15px; }
|
|
160
168
|
.detail-section h3 .icon { width: 13px; height: 13px; color: var(--muted); }
|
|
161
169
|
.detail-section h3 .count { margin-left: auto; }
|
|
162
|
-
.detail-grid { display: grid; grid-template-columns: minmax(55px, auto) minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size:
|
|
170
|
+
.detail-grid { display: grid; grid-template-columns: minmax(55px, auto) minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 12px; }
|
|
163
171
|
.detail-grid dt { color: var(--muted); }
|
|
164
172
|
.detail-grid dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
|
|
165
|
-
.detail-grid dd.mono { font-size:
|
|
166
|
-
.detail-note { font-size:
|
|
173
|
+
.detail-grid dd.mono { font-size: 12px; }
|
|
174
|
+
.detail-note { font-size: 12px; line-height: 1.7; color: var(--muted); }
|
|
167
175
|
.plan-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
|
|
168
|
-
.plan-step { display: flex; gap: 9px; align-items: flex-start; font-size:
|
|
169
|
-
.plan-marker { display: grid; place-items: center; flex-shrink: 0; width: 16px; height: 16px; border: 1px solid var(--border); color: var(--muted); border-radius: 50%; font-size:
|
|
176
|
+
.plan-step { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; line-height: 1.7; }
|
|
177
|
+
.plan-marker { display: grid; place-items: center; flex-shrink: 0; width: 16px; height: 16px; border: 1px solid var(--border); color: var(--muted); border-radius: 50%; font-size: 12px; margin-top: 1px; }
|
|
170
178
|
.plan-marker .icon { width: 10px; height: 10px; }
|
|
171
179
|
.plan-step.completed { color: var(--muted); }
|
|
172
180
|
.plan-step.completed .plan-marker { color: var(--success); }
|
|
173
181
|
.plan-step.active .plan-marker { color: var(--primary); border-color: currentColor; }
|
|
174
182
|
.plan-content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
|
|
175
|
-
.plan-status { font-size:
|
|
183
|
+
.plan-status { font-size: 12px; color: var(--subtle); white-space: nowrap; }
|
|
176
184
|
.tools-list { display: flex; flex-direction: column; gap: 9px; }
|
|
177
185
|
.tool-item { min-width: 0; padding: 9px 10px; background: var(--stage); border-radius: var(--radius-sm); corner-shape: squircle; }
|
|
178
186
|
.tool-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
|
179
|
-
.tool-name { min-width: 0; overflow-wrap: anywhere; font-size:
|
|
180
|
-
.tool-title { margin-top: 7px; font-family: var(--font-mono); font-size:
|
|
181
|
-
.file-location { display: block; font-family: var(--font-mono); font-size:
|
|
182
|
-
.recorded-output { margin: 0; font-family: var(--font-mono); font-size:
|
|
187
|
+
.tool-name { min-width: 0; overflow-wrap: anywhere; font-size: 12px; font-weight: 500; }
|
|
188
|
+
.tool-title { margin-top: 7px; font-family: var(--font-mono); font-size: 12px; line-height: 1.75; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 140px; overflow: auto; }
|
|
189
|
+
.file-location { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 5px; overflow-wrap: anywhere; }
|
|
190
|
+
.recorded-output { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 310px; overflow: auto; scrollbar-width: thin; }
|
|
183
191
|
.output-entry + .output-entry { margin-top: 13px; }
|
|
184
|
-
.history-details summary { cursor: pointer; font-size:
|
|
192
|
+
.history-details summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 2px 0; }
|
|
185
193
|
.history-details[open] summary { margin-bottom: 12px; }
|
|
186
|
-
.mini-event { display: flex; gap: 11px; font-size:
|
|
194
|
+
.mini-event { display: flex; gap: 11px; font-size: 12px; line-height: 1.8; color: var(--muted); padding: 5px 0; }
|
|
187
195
|
.mini-event time { font-family: var(--font-mono); color: var(--subtle); white-space: nowrap; }
|
|
188
196
|
.mini-event span { overflow-wrap: anywhere; }
|
|
189
|
-
.page-footer { display: flex; justify-content: space-between; gap: 12px; color: var(--subtle); font-size:
|
|
190
|
-
.loading-state { display: flex; flex-direction: column; gap: 14px; padding: 21px 12px; font-size:
|
|
197
|
+
.page-footer { display: flex; justify-content: space-between; gap: 12px; color: var(--subtle); font-size: 12px; padding: 22px 2px 0; }
|
|
198
|
+
.loading-state { display: flex; flex-direction: column; gap: 14px; padding: 21px 12px; font-size: 12px; color: var(--muted); }
|
|
191
199
|
.skeleton { height: 14px; width: 55%; background: var(--stage); border-radius: 999px; }
|
|
192
200
|
.skeleton-wide { width: 85%; }
|
|
193
|
-
.toast { position: fixed; bottom: 23px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 11px 18px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: 0 8px 30px color-mix(in oklab, var(--ink) 12%, transparent); font-size:
|
|
201
|
+
.toast { position: fixed; bottom: 23px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 11px 18px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: 0 8px 30px color-mix(in oklab, var(--ink) 12%, transparent); font-size: 12px; z-index: 10; }
|
|
202
|
+
.task-activity-card { min-width: 0; }
|
|
203
|
+
.fanout-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 2px 4px 18px; }
|
|
204
|
+
.fanout-header h2 { font-size: 18px; letter-spacing: -.4px; }
|
|
205
|
+
.fanout-count { font-family: var(--font-mono); gap: 10px; padding: 5px 10px; }
|
|
206
|
+
.agent-dots { display: inline-flex; align-items: center; gap: 4px; }
|
|
207
|
+
.agent-dots .dot { width: 6px; height: 6px; background: var(--agent-color); }
|
|
208
|
+
.agent-color-0 { --agent-color: var(--blue); }
|
|
209
|
+
.agent-color-1 { --agent-color: var(--purple); }
|
|
210
|
+
.agent-color-2 { --agent-color: var(--orange); }
|
|
211
|
+
.agent-color-3 { --agent-color: var(--pink); }
|
|
212
|
+
.fanout-surface { background: var(--surface); border-radius: 22px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 4%, transparent); }
|
|
213
|
+
.fanout-task { display: flex; align-items: baseline; gap: 14px; padding: 17px 20px; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
|
|
214
|
+
.fanout-task .eyebrow { margin: 0; font-weight: 400; text-transform: uppercase; letter-spacing: 1.1px; }
|
|
215
|
+
.fanout-graph { padding: 20px 18px 14px; display: flex; flex-direction: column; align-items: center; }
|
|
216
|
+
.fanout-root { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: white; background: var(--ink); }
|
|
217
|
+
.fanout-root .icon { width: 20px; height: 20px; }
|
|
218
|
+
.fanout-lines { display: block; width: 100%; height: 65px; overflow: visible; }
|
|
219
|
+
.fanout-lines path { fill: none; stroke: var(--border); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
|
|
220
|
+
.fanout-branches { display: flex; width: 100%; }
|
|
221
|
+
.fanout-branch { display: flex; flex: 1; flex-direction: column; align-items: center; min-width: 0; gap: 8px; padding: 3px 3px 7px; background: transparent; border: 0; border-radius: 12px; color: var(--muted); font-size: 12px; font-weight: 400; }
|
|
222
|
+
.fanout-branch:hover { background: var(--hover); }
|
|
223
|
+
.fanout-marker { display: grid; place-items: center; width: 38px; height: 38px; color: white; background: var(--agent-color); border-radius: 50%; box-shadow: 0 0 0 4px var(--stage); }
|
|
224
|
+
.fanout-marker .icon { width: 19px; height: 19px; stroke-width: 2; }
|
|
225
|
+
.fanout-marker.active .icon, .fanout-marker.recovering .icon { animation: working 1.8s linear infinite; }
|
|
226
|
+
.fanout-marker.offline, .fanout-marker.observed { background: var(--muted); }
|
|
227
|
+
.fanout-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
228
|
+
.fanout-branch.is-selected .fanout-name { color: var(--ink); font-weight: 500; }
|
|
229
|
+
.fanout-result { display: grid; grid-template-columns: minmax(60px, .7fr) minmax(0, 1.7fr) auto; gap: 14px; align-items: center; padding: 15px 20px; font-size: 12px; }
|
|
230
|
+
.fanout-result-name { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
|
|
231
|
+
.fanout-result-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); overflow-wrap: anywhere; }
|
|
232
|
+
.fanout-duration { font-family: var(--font-mono); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
|
|
233
|
+
.fanout-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 4px 8px; color: var(--muted); font-size: 12px; }
|
|
234
|
+
.detail-variants { display: flex; flex-wrap: wrap; gap: 7px; padding: 18px 2px 2px; }
|
|
235
|
+
.variant { background: transparent; color: var(--muted); box-shadow: none; min-height: 38px; padding: 7px 13px; }
|
|
236
|
+
.variant.is-selected { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px #00000008; }
|
|
237
|
+
.cycle-detail-content > .detail-section { border: 1px solid var(--border); box-shadow: 0 1px 2px #00000004; }
|
|
238
|
+
.cycle-detail-content .detail-section h3 > .icon { width: 24px; height: 24px; padding: 4px; box-sizing: content-box; border-radius: 10px; color: var(--blue); background: color-mix(in srgb, var(--blue) 9%, white); margin-right: 4px; }
|
|
239
|
+
.cycle-detail-content .count { padding-inline: 8px; }
|
|
240
|
+
.plan-list { gap: 8px; }
|
|
241
|
+
.plan-step { gap: 12px; border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 12px; padding: 11px 12px; align-items: center; }
|
|
242
|
+
.plan-marker { width: 25px; height: 25px; border-radius: 7px; border: 0; background: var(--stage); font-size: 12px; }
|
|
243
|
+
.plan-marker .icon { width: 15px; height: 15px; }
|
|
244
|
+
.plan-step.completed .plan-marker { background: var(--ink); color: white; }
|
|
245
|
+
.plan-step.active { border-color: var(--border); box-shadow: 0 2px 3px #00000005; color: var(--ink); }
|
|
246
|
+
.plan-step.active .plan-marker { background: var(--ink); color: white; }
|
|
247
|
+
.plan-status { font-size: 11px; }
|
|
248
|
+
.tool-item { padding: 13px; }
|
|
249
|
+
.tool-heading { align-items: start; }
|
|
250
|
+
.tool-title { font-size: 12px; }
|
|
251
|
+
.recorded-output { font-family: var(--font-sans); font-size: 14px; line-height: 1.8; }
|
|
252
|
+
.runtime-details, .history-details { background: transparent; border: 1px solid var(--border); padding: 13px 16px; }
|
|
253
|
+
.runtime-details summary { font-size: 12px; color: var(--muted); cursor: pointer; }
|
|
254
|
+
.runtime-details[open] summary { margin-bottom: 16px; }
|
|
255
|
+
.section-heading h2 { font-size: 14px; }
|
|
256
|
+
.agent-item.is-selected { background: var(--surface); box-shadow: 0 1px 3px #00000006; }
|
|
257
|
+
.event-icon:has(use[href="#i-list"]) { color: var(--purple); }
|
|
258
|
+
.event-icon:has(use[href="#i-message"]) { color: var(--blue); }
|
|
259
|
+
.event-icon:has(use[href="#i-tool"]) { color: var(--orange); }
|
|
260
|
+
|
|
261
|
+
.oa-card, .oa-inset {
|
|
262
|
+
--card-clip-radius: 14px;
|
|
263
|
+
--card-clip-handle: 2.25px;
|
|
264
|
+
--card-clip-path: shape(from var(--card-clip-radius) 0px, line to calc(100% - var(--card-clip-radius)) 0px, curve to 100% var(--card-clip-radius) with calc(100% - var(--card-clip-handle)) 0px / 100% var(--card-clip-handle), line to 100% calc(100% - var(--card-clip-radius)), curve to calc(100% - var(--card-clip-radius)) 100% with 100% calc(100% - var(--card-clip-handle)) / calc(100% - var(--card-clip-handle)) 100%, line to var(--card-clip-radius) 100%, curve to 0px calc(100% - var(--card-clip-radius)) with var(--card-clip-handle) 100% / 0px calc(100% - var(--card-clip-handle)), line to 0px var(--card-clip-radius), curve to var(--card-clip-radius) 0px with 0px var(--card-clip-handle) / var(--card-clip-handle) 0px, close);
|
|
265
|
+
min-width: 0;
|
|
266
|
+
border: 1px solid var(--border);
|
|
267
|
+
border-radius: 26px;
|
|
268
|
+
corner-shape: squircle;
|
|
269
|
+
clip-path: var(--card-clip-path);
|
|
270
|
+
box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
|
|
271
|
+
}
|
|
272
|
+
.oa-card { padding: 4px; background: var(--surface); }
|
|
273
|
+
.oa-inset { --card-clip-radius: 12px; border-radius: 22px; background: var(--stage); }
|
|
274
|
+
.metric-label { padding: 10px 14px 12px; color: var(--ink); }
|
|
275
|
+
.metric-inset { height: 112px; padding: 12px 16px; }
|
|
276
|
+
.metric-value { margin: 0 0 5px; }
|
|
277
|
+
.metric-caption { white-space: normal; }
|
|
278
|
+
.activity-panel > .section-heading { padding: 12px 14px 14px; }
|
|
279
|
+
.activity-list.oa-inset { padding: 6px; gap: 4px; height: min(67vh, 810px); }
|
|
280
|
+
.activity-row:focus-visible { outline-offset: -3px; }
|
|
281
|
+
.task-activity-card > .fanout-header { padding: 10px 14px 14px; }
|
|
282
|
+
.fanout-header h2 { font-size: 15px; }
|
|
283
|
+
.fanout-surface.oa-inset { height: 416px; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
|
|
284
|
+
.fanout-surface.oa-inset .fanout-graph { padding-block: 14px 8px; }
|
|
285
|
+
.fanout-surface.oa-inset .fanout-lines { height: 50px; }
|
|
286
|
+
.fanout-surface.oa-inset .fanout-result { padding-block: 12px; }
|
|
287
|
+
.fanout-task { padding-bottom: 0; }
|
|
288
|
+
.fanout-result:hover { background: var(--hover); }
|
|
289
|
+
.fanout-footer { padding: 12px 14px 10px; }
|
|
290
|
+
.detail-section.oa-card { padding: 4px; }
|
|
291
|
+
.detail-section.oa-card > h3 { padding: 10px 14px 12px; margin: 0; font-size: 14px; }
|
|
292
|
+
.cycle-detail-content .detail-section h3 > .icon { width: 16px; height: 16px; padding: 0; background: transparent; color: var(--muted); border-radius: 0; }
|
|
293
|
+
.detail-section.oa-card > :is(.plan-list, .tools-list, .recorded-output, .detail-grid, .detail-note) {
|
|
294
|
+
padding: 14px;
|
|
295
|
+
margin: 0;
|
|
296
|
+
border: 1px solid var(--border);
|
|
297
|
+
background: var(--stage);
|
|
298
|
+
border-radius: 22px;
|
|
299
|
+
corner-shape: squircle;
|
|
300
|
+
}
|
|
301
|
+
.detail-section.oa-card > .plan-list { height: 176px; overflow-y: auto; gap: 2px; }
|
|
302
|
+
.plan-step { min-height: 36px; padding: 6px 4px; border: 0; border-radius: 8px; }
|
|
303
|
+
.plan-step.active { box-shadow: none; }
|
|
304
|
+
.plan-marker { width: 22px; height: 22px; background: var(--surface); }
|
|
305
|
+
.detail-section.oa-card > .tools-list { max-height: 320px; overflow-y: auto; }
|
|
306
|
+
.tools-list .tool-item { background: var(--surface); }
|
|
307
|
+
.detail-section.oa-card > .recorded-output + .recorded-output { margin-top: 4px; }
|
|
308
|
+
.sidebar-resources { margin-top: auto; padding-top: 32px; }
|
|
309
|
+
.documentation-card { flex-shrink: 0; }
|
|
310
|
+
.documentation-card h2 { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px; font-size: 13px; }
|
|
311
|
+
.documentation-card h2 .icon { width: 16px; height: 16px; color: var(--muted); }
|
|
312
|
+
.documentation-inset { padding: 14px 12px; }
|
|
313
|
+
.documentation-inset p { color: var(--muted); font-size: 12px; line-height: 1.7; margin-bottom: 14px; }
|
|
314
|
+
.documentation-link { width: 100%; justify-content: space-between; min-height: 44px; padding-inline: 12px; }
|
|
315
|
+
.documentation-link:hover { color: var(--ink); background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }
|
|
316
|
+
.header-documentation { display: none; }
|
|
317
|
+
@media (min-width: 641px) {
|
|
318
|
+
.oa-card, .oa-inset { --card-clip-radius: 20px; --card-clip-handle: 3px; border-radius: 50px; }
|
|
319
|
+
.oa-inset { --card-clip-radius: 17px; border-radius: 44px; }
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
@keyframes working { to { transform: rotate(360deg); } }
|
|
323
|
+
|
|
194
324
|
}
|
|
195
325
|
|
|
196
326
|
@layer responsive {
|
|
@@ -215,9 +345,49 @@
|
|
|
215
345
|
.guide-callout { padding: 18px; border-radius: var(--radius-md); background: var(--stage); }
|
|
216
346
|
@media print { .guide-nav, .guide-header .button, .skip-link { display: none; } .guide-layout { display: block; } .guide-shell { max-width: none; padding: 0; } .guide-content section { break-inside: avoid; } }
|
|
217
347
|
@media (max-width: 640px) { .guide-shell { padding: 24px 20px; } .guide-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } .guide-nav { position: static; } .panel-toolbar { flex-wrap: wrap; } }
|
|
218
|
-
@media (min-width: 1550px) { .workspace { padding:
|
|
219
|
-
@media (max-width: 1120px) { .app-shell { grid-template-columns: 185px minmax(0, 1fr); } .sidebar { padding-inline: 10px; } .workspace { padding:
|
|
348
|
+
@media (min-width: 1550px) { .workspace { padding-bottom: 28px; } .content-grid { grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.15fr); gap: 24px; } .activity-row { padding: 15px; } .inspector { padding: 2px; } }
|
|
349
|
+
@media (max-width: 1120px) { .app-shell { grid-template-columns: 185px minmax(0, 1fr); gap: 20px; width: calc(100% - 40px); } .sidebar { padding-inline: 10px; } .workspace { padding: 8px 0 18px; } .content-grid { grid-template-columns: minmax(250px, 1fr) minmax(270px, 1fr); } .metrics { gap: 8px; } .header-actions { gap: 10px; } .metric-caption { font-size: 12px; } }
|
|
220
350
|
@media (max-width: 940px) { .content-grid { grid-template-columns: minmax(0, 1fr); } .inspector { max-height: none; min-height: 220px; } .inspector-empty { min-height: 200px; } .activity-list { min-height: 250px; max-height: 440px; } .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-header { align-items: flex-start; } .header-actions { flex-direction: column; align-items: flex-end; padding-top: 7px; gap: 13px; } .page-description { max-width: 230px; } }
|
|
221
|
-
@media (max-width: 640px) { .app-shell { grid-template-columns: minmax(0, 1fr); } .sidebar { padding: 16px 18px 8px; border-
|
|
351
|
+
@media (max-width: 640px) { .app-shell { grid-template-columns: minmax(0, 1fr); width: 100%; margin: 0 auto; gap: 0; min-height: 100dvh; } .sidebar { position: static; height: auto; padding: 16px 18px 8px; border: 0; border-radius: 0; overflow-y: visible; } .brand { margin: 0 0 16px; font-size: 13px; } .brand-caption { display: none; } .brand-mark { width: 28px; height: 28px; } .brand-mark img { width: 56px; height: 56px; } .sidebar-title, .agent-search, .sidebar-note { display: none; } .agent-list { flex-direction: row; overflow-x: auto; padding: 2px 2px 7px; gap: 6px; } .agent-item { width: auto; min-width: 132px; max-width: 170px; padding: 8px; flex-shrink: 0; } .agent-avatar { width: 25px; height: 25px; font-size: 12px; } .agent-name { font-size: 12px; } .agent-caption { font-size: 12px; } .workspace { padding: 17px 18px 20px; } .page-header { margin-bottom: 22px; gap: 10px; } h1 { font-size: 27px; } .page-description { font-size: 12px; max-width: 210px; } .eyebrow { font-size: 12px; } .header-actions .button { min-height: 40px; font-size: 12px; padding: 6px 10px; } .connection-status { font-size: 12px; } .metrics { margin-bottom: 22px; } .metric-value { font-size: 27px; } .metric-label { font-size: 12px; } .panel-toolbar { gap: 8px; } .tab { padding: 7px 9px; font-size: 12px; gap: 5px; } .tab .icon { width: 12px; height: 12px; } .follow-control { font-size: 12px; gap: 4px; } .filters { flex-wrap: wrap; gap: 7px; } .search-field { flex-basis: 100%; } .select-field { flex: 1; } .select-field select { font-size: 12px; } .content-grid { gap: 20px; } .page-footer { flex-direction: column; gap: 4px; } .event-time { font-size: 12px; } .activity-row { gap: 8px; padding: 12px 8px; } .inspector { padding: 2px; } }
|
|
352
|
+
.model-settings-summary:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 18px; margin-bottom: 22px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface, white); }
|
|
353
|
+
.model-settings-summary h2 { margin: 0 0 6px; font-size: 13px; font-weight: 500; }
|
|
354
|
+
.model-settings-summary p { margin: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
|
|
355
|
+
#model-settings-dialog { width: min(500px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; overflow-y: auto; border: 1px solid var(--border); border-radius: 24px; color: var(--ink); background: var(--surface, white); box-shadow: 0 24px 80px #0002; }
|
|
356
|
+
#model-settings-dialog::backdrop { background: #0005; }
|
|
357
|
+
.model-settings-form { display: grid; gap: 12px; }
|
|
358
|
+
.model-settings-form h2 { font-size: 17px; font-weight: 500; }
|
|
359
|
+
.model-settings-form p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
|
|
360
|
+
.model-settings-form label { display: grid; gap: 4px; font-size: 13px; margin-top: 8px; }
|
|
361
|
+
.model-settings-form label span { font-size: 12px; color: var(--muted); }
|
|
362
|
+
.model-settings-form input { width: 100%; min-width: 0; padding: 11px 14px; border: 1px solid var(--border); border-radius: 18px; background: transparent; color: var(--ink); font-size: 13px; }
|
|
363
|
+
.model-settings-form input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
|
|
364
|
+
.model-settings-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 8px; }
|
|
365
|
+
#model-settings-error { color: #9f3030; }
|
|
366
|
+
@media (max-width: 640px) {
|
|
367
|
+
.page-header { flex-direction: column; }
|
|
368
|
+
.header-actions { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0; gap: 8px; }
|
|
369
|
+
.page-description { max-width: none; }
|
|
370
|
+
.sidebar { background: transparent; }
|
|
371
|
+
|
|
372
|
+
.metric-caption { white-space: normal; }
|
|
373
|
+
.fanout-header h2 { font-size: 16px; }
|
|
374
|
+
.fanout-result { padding: 12px; gap: 10px; grid-template-columns: minmax(50px, .7fr) minmax(0, 1.5fr) auto; }
|
|
375
|
+
.fanout-graph { padding-inline: 6px; }
|
|
376
|
+
.fanout-task { padding: 15px; }
|
|
377
|
+
.fanout-duration { font-size: 10px; }
|
|
378
|
+
.plan-status { display: none; }
|
|
379
|
+
.detail-section { padding: 14px; }
|
|
380
|
+
.variant { padding-inline: 10px; }
|
|
381
|
+
.event-time { font-size: 10px; }
|
|
382
|
+
.button, .tab, .variant, .select-field select { min-height: 44px; }
|
|
383
|
+
}
|
|
384
|
+
@media (max-width: 640px) {
|
|
385
|
+
.sidebar-resources { display: none; }
|
|
386
|
+
.header-documentation { display: inline-flex; }
|
|
387
|
+
.activity-list.oa-inset { height: 440px; min-height: 250px; }
|
|
388
|
+
.fanout-surface.oa-inset { height: 396px; }
|
|
389
|
+
.metric-inset { height: 118px; padding: 12px; }
|
|
390
|
+
.metric-label { padding-inline: 12px; }
|
|
391
|
+
}
|
|
222
392
|
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; } }
|
|
223
393
|
}
|