openvisio-agent 0.20.0 → 0.21.1
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 +786 -0
- package/README.md +3 -1
- package/USER_GUIDE.md +13 -4
- package/package.json +2 -1
- package/scenarios/workspace.scenarios.mjs +3 -3
- package/scripts/certify.mjs +2 -2
- package/src/events.mjs +16 -2
- package/src/mastra-harness.mjs +33 -6
- package/src/model-settings.mjs +57 -0
- package/src/studio-cli.mjs +11 -0
- package/src/studio-server.mjs +43 -7
- package/src/watch.mjs +90 -44
- package/studio/app.mjs +229 -43
- package/studio/guide.html +13 -2
- 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/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
|
}
|