2026-01-31 21:13:13 +09:00
|
|
|
@import "./chat.css";
|
2026-01-08 16:21:21 +05:30
|
|
|
|
feat(ui): add update warning banner to control dashboard
SecurityScorecard's STRIKE research recently identified over 40,000
exposed OpenClaw gateway instances, with 35.4% running known-vulnerable
versions. The gateway already performs an npm update check on startup
and compares against the registry every 24 hours — but the result is
only logged to the server console. The control UI has zero visibility
into whether the running version is outdated, which means operators
have no idea they're exposed unless they happen to read server logs.
OpenClaw's user base is broadening well beyond developers who live in
terminals. Self-hosters, small teams, and non-technical operators are
deploying gateways and relying on the control dashboard as their
primary management interface. For these users, security has to be
surfaced where they already are — not hidden behind CLI output they
will never see. Making version awareness frictionless and actionable
is a prerequisite for reducing that 35.4% number.
This PR adds a sticky red warning banner to the top of the control UI
content area whenever the gateway detects it is running behind the
latest published version. The banner includes an "Update now" button
wired to the existing update.run RPC (the same mechanism the config
page already uses), so operators can act immediately without switching
to a terminal.
Server side:
- Cache the update check result in a module-level variable with a
typed UpdateAvailable shape (currentVersion, latestVersion, channel)
- Export a getUpdateAvailable() getter for the rest of the process
- Add an optional updateAvailable field to SnapshotSchema (backward
compatible — old clients ignore it, old servers simply omit it)
- Include the cached update status in buildGatewaySnapshot() so it
is delivered to every UI client on connect and reconnect
UI side:
- Add updateAvailable to GatewayHost, AppViewState, and the app's
reactive state so it flows through the standard snapshot pipeline
- Extract updateAvailable from the hello snapshot in applySnapshot()
- Render a .update-banner.callout.danger element with role="alert"
as the first child of <main>, before the content header
- Wire the "Update now" button to runUpdate(state), the same
controller function used by the config tab
- Use position:sticky and negative margins to pin the banner
edge-to-edge at the top of the scrollable content area
2026-02-19 19:03:37 +11:00
|
|
|
/* ===========================================
|
|
|
|
|
Update Banner
|
|
|
|
|
=========================================== */
|
|
|
|
|
|
|
|
|
|
.update-banner {
|
|
|
|
|
position: sticky;
|
|
|
|
|
top: 0;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
margin: 0 calc(-1 * var(--shell-pad)) 0;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
border-left: none;
|
|
|
|
|
border-right: none;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
padding: 10px 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.update-banner__btn {
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
border-color: var(--danger);
|
|
|
|
|
color: var(--danger);
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
padding: 4px 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.update-banner__btn:hover:not(:disabled) {
|
|
|
|
|
background: rgba(239, 68, 68, 0.15);
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* ===========================================
|
2026-01-25 12:29:25 +00:00
|
|
|
Cards - Refined with depth
|
2026-01-25 11:04:50 +01:00
|
|
|
=========================================== */
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.card {
|
|
|
|
|
border: 1px solid var(--border);
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--card);
|
|
|
|
|
border-radius: var(--radius-lg);
|
2026-01-25 12:29:25 +00:00
|
|
|
padding: 20px;
|
|
|
|
|
animation: rise 0.35s var(--ease-out) backwards;
|
|
|
|
|
transition:
|
|
|
|
|
border-color var(--duration-normal) var(--ease-out),
|
|
|
|
|
box-shadow var(--duration-normal) var(--ease-out),
|
|
|
|
|
transform var(--duration-normal) var(--ease-out);
|
2026-01-31 21:13:13 +09:00
|
|
|
box-shadow:
|
|
|
|
|
var(--shadow-sm),
|
|
|
|
|
inset 0 1px 0 var(--card-highlight);
|
2026-01-25 11:04:50 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card:hover {
|
|
|
|
|
border-color: var(--border-strong);
|
2026-01-31 21:13:13 +09:00
|
|
|
box-shadow:
|
|
|
|
|
var(--shadow-md),
|
|
|
|
|
inset 0 1px 0 var(--card-highlight);
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-title {
|
2026-01-25 12:29:25 +00:00
|
|
|
font-size: 15px;
|
2026-01-25 11:04:50 +01:00
|
|
|
font-weight: 600;
|
2026-01-25 12:29:25 +00:00
|
|
|
letter-spacing: -0.02em;
|
2026-01-25 11:04:50 +01:00
|
|
|
color: var(--text-strong);
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-sub {
|
|
|
|
|
color: var(--muted);
|
2026-01-25 11:04:50 +01:00
|
|
|
font-size: 13px;
|
2026-01-25 12:29:25 +00:00
|
|
|
margin-top: 6px;
|
|
|
|
|
line-height: 1.5;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* ===========================================
|
2026-01-25 12:29:25 +00:00
|
|
|
Stats - Bold values, subtle labels
|
2026-01-25 11:04:50 +01:00
|
|
|
=========================================== */
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.stat {
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--card);
|
|
|
|
|
border-radius: var(--radius-md);
|
2026-01-25 12:29:25 +00:00
|
|
|
padding: 14px 16px;
|
2026-01-25 11:04:50 +01:00
|
|
|
border: 1px solid var(--border);
|
2026-01-25 12:29:25 +00:00
|
|
|
transition:
|
|
|
|
|
border-color var(--duration-normal) var(--ease-out),
|
|
|
|
|
box-shadow var(--duration-normal) var(--ease-out);
|
2026-01-25 11:04:50 +01:00
|
|
|
box-shadow: inset 0 1px 0 var(--card-highlight);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat:hover {
|
|
|
|
|
border-color: var(--border-strong);
|
2026-01-31 21:13:13 +09:00
|
|
|
box-shadow:
|
|
|
|
|
var(--shadow-sm),
|
|
|
|
|
inset 0 1px 0 var(--card-highlight);
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-label {
|
|
|
|
|
color: var(--muted);
|
2026-01-25 12:29:25 +00:00
|
|
|
font-size: 11px;
|
2026-01-25 11:04:50 +01:00
|
|
|
font-weight: 500;
|
2026-01-25 12:29:25 +00:00
|
|
|
text-transform: uppercase;
|
|
|
|
|
letter-spacing: 0.04em;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-value {
|
2026-01-25 12:29:25 +00:00
|
|
|
font-size: 24px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
margin-top: 6px;
|
|
|
|
|
letter-spacing: -0.03em;
|
|
|
|
|
line-height: 1.1;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-value.ok {
|
|
|
|
|
color: var(--ok);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-value.warn {
|
|
|
|
|
color: var(--warn);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-card {
|
|
|
|
|
display: grid;
|
2026-01-25 12:29:25 +00:00
|
|
|
gap: 6px;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.note-title {
|
|
|
|
|
font-weight: 600;
|
2026-01-25 12:29:25 +00:00
|
|
|
letter-spacing: -0.01em;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* ===========================================
|
|
|
|
|
Status List
|
|
|
|
|
=========================================== */
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.status-list {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-list div {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
gap: 12px;
|
2026-01-25 11:04:50 +01:00
|
|
|
padding: 8px 0;
|
|
|
|
|
border-bottom: 1px solid var(--border);
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-list div:last-child {
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-13 01:58:02 +00:00
|
|
|
.account-count {
|
2026-01-25 11:04:50 +01:00
|
|
|
margin-top: 10px;
|
2026-01-13 01:58:02 +00:00
|
|
|
font-size: 12px;
|
2026-01-25 11:04:50 +01:00
|
|
|
font-weight: 500;
|
2026-01-13 01:58:02 +00:00
|
|
|
color: var(--muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.account-card-list {
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
display: grid;
|
2026-01-25 11:04:50 +01:00
|
|
|
gap: 12px;
|
2026-01-13 01:58:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.account-card {
|
|
|
|
|
border: 1px solid var(--border);
|
2026-01-25 11:04:50 +01:00
|
|
|
border-radius: var(--radius-md);
|
2026-01-13 01:58:02 +00:00
|
|
|
padding: 12px;
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--bg-elevated);
|
|
|
|
|
transition: border-color var(--duration-fast) ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.account-card:hover {
|
|
|
|
|
border-color: var(--border-strong);
|
2026-01-13 01:58:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.account-card-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: baseline;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.account-card-title {
|
2026-01-25 11:04:50 +01:00
|
|
|
font-weight: 500;
|
2026-01-13 01:58:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.account-card-id {
|
|
|
|
|
font-family: var(--mono);
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.account-card-status {
|
2026-01-25 11:04:50 +01:00
|
|
|
margin-top: 10px;
|
2026-01-13 01:58:02 +00:00
|
|
|
font-size: 13px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.account-card-status div {
|
|
|
|
|
padding: 4px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.account-card-error {
|
2026-01-25 11:04:50 +01:00
|
|
|
margin-top: 8px;
|
2026-01-13 01:58:02 +00:00
|
|
|
color: var(--danger);
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* ===========================================
|
|
|
|
|
Labels & Pills
|
|
|
|
|
=========================================== */
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.label {
|
|
|
|
|
color: var(--muted);
|
2026-01-25 11:04:50 +01:00
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: 500;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pill {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
2026-01-25 11:04:50 +01:00
|
|
|
gap: 6px;
|
|
|
|
|
border: 1px solid var(--border);
|
2026-01-02 11:21:51 +00:00
|
|
|
padding: 6px 12px;
|
2026-01-25 11:04:50 +01:00
|
|
|
border-radius: var(--radius-full);
|
|
|
|
|
background: var(--secondary);
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
transition: border-color var(--duration-fast) ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pill:hover {
|
|
|
|
|
border-color: var(--border-strong);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pill.danger {
|
|
|
|
|
border-color: var(--danger-subtle);
|
|
|
|
|
background: var(--danger-subtle);
|
|
|
|
|
color: var(--danger);
|
2025-12-30 20:25:58 +01:00
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* ===========================================
|
|
|
|
|
Theme Toggle
|
|
|
|
|
=========================================== */
|
|
|
|
|
|
2025-12-30 20:25:58 +01:00
|
|
|
.theme-toggle {
|
|
|
|
|
--theme-item: 28px;
|
2026-01-25 11:04:50 +01:00
|
|
|
--theme-gap: 2px;
|
|
|
|
|
--theme-pad: 4px;
|
2025-12-30 20:25:58 +01:00
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.theme-toggle__track {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(3, var(--theme-item));
|
|
|
|
|
gap: var(--theme-gap);
|
|
|
|
|
padding: var(--theme-pad);
|
2026-01-25 11:04:50 +01:00
|
|
|
border-radius: var(--radius-full);
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
background: var(--secondary);
|
2025-12-30 20:25:58 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.theme-toggle__indicator {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: var(--theme-pad);
|
|
|
|
|
width: var(--theme-item);
|
|
|
|
|
height: var(--theme-item);
|
2026-01-25 11:04:50 +01:00
|
|
|
border-radius: var(--radius-full);
|
2025-12-30 20:25:58 +01:00
|
|
|
transform: translateY(-50%)
|
|
|
|
|
translateX(calc(var(--theme-index, 0) * (var(--theme-item) + var(--theme-gap))));
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--accent);
|
|
|
|
|
transition: transform var(--duration-normal) var(--ease-out);
|
2025-12-30 20:25:58 +01:00
|
|
|
z-index: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.theme-toggle__button {
|
|
|
|
|
height: var(--theme-item);
|
|
|
|
|
width: var(--theme-item);
|
|
|
|
|
display: grid;
|
|
|
|
|
place-items: center;
|
|
|
|
|
border: 0;
|
2026-01-25 11:04:50 +01:00
|
|
|
border-radius: var(--radius-full);
|
2025-12-30 20:25:58 +01:00
|
|
|
background: transparent;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 1;
|
2026-01-25 11:04:50 +01:00
|
|
|
transition: color var(--duration-fast) ease;
|
2025-12-30 20:25:58 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.theme-toggle__button:hover {
|
|
|
|
|
color: var(--text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.theme-toggle__button.active {
|
2026-01-25 11:04:50 +01:00
|
|
|
color: var(--accent-foreground);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.theme-toggle__button.active .theme-icon {
|
|
|
|
|
stroke: var(--accent-foreground);
|
2025-12-30 20:25:58 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.theme-icon {
|
2026-01-25 11:04:50 +01:00
|
|
|
width: 14px;
|
|
|
|
|
height: 14px;
|
2025-12-30 20:25:58 +01:00
|
|
|
stroke: currentColor;
|
|
|
|
|
fill: none;
|
2026-01-25 11:04:50 +01:00
|
|
|
stroke-width: 1.5px;
|
2025-12-30 20:25:58 +01:00
|
|
|
stroke-linecap: round;
|
|
|
|
|
stroke-linejoin: round;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* ===========================================
|
2026-01-25 12:29:25 +00:00
|
|
|
Status Dot - With glow for emphasis
|
2026-01-25 11:04:50 +01:00
|
|
|
=========================================== */
|
2025-12-21 00:34:39 +00:00
|
|
|
|
|
|
|
|
.statusDot {
|
|
|
|
|
width: 8px;
|
|
|
|
|
height: 8px;
|
2026-01-25 11:04:50 +01:00
|
|
|
border-radius: var(--radius-full);
|
2025-12-21 00:34:39 +00:00
|
|
|
background: var(--danger);
|
2026-01-25 12:29:25 +00:00
|
|
|
box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
|
|
|
|
|
animation: pulse-subtle 2s ease-in-out infinite;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.statusDot.ok {
|
|
|
|
|
background: var(--ok);
|
2026-01-25 12:29:25 +00:00
|
|
|
box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
|
|
|
|
|
animation: none;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* ===========================================
|
2026-01-25 12:29:25 +00:00
|
|
|
Buttons - Tactile with personality
|
2026-01-25 11:04:50 +01:00
|
|
|
=========================================== */
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.btn {
|
2026-01-25 11:04:50 +01:00
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
background: var(--bg-elevated);
|
2026-01-25 12:29:25 +00:00
|
|
|
padding: 9px 16px;
|
2026-01-25 11:04:50 +01:00
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
font-weight: 500;
|
2026-01-25 12:29:25 +00:00
|
|
|
letter-spacing: -0.01em;
|
2025-12-21 00:34:39 +00:00
|
|
|
cursor: pointer;
|
2026-01-25 11:04:50 +01:00
|
|
|
transition:
|
2026-01-25 12:29:25 +00:00
|
|
|
border-color var(--duration-fast) var(--ease-out),
|
|
|
|
|
background var(--duration-fast) var(--ease-out),
|
|
|
|
|
box-shadow var(--duration-fast) var(--ease-out),
|
|
|
|
|
transform var(--duration-fast) var(--ease-out);
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn:hover {
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--bg-hover);
|
|
|
|
|
border-color: var(--border-strong);
|
2026-01-25 12:29:25 +00:00
|
|
|
transform: translateY(-1px);
|
|
|
|
|
box-shadow: var(--shadow-sm);
|
2026-01-25 11:04:50 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn:active {
|
|
|
|
|
background: var(--secondary);
|
2026-01-25 12:29:25 +00:00
|
|
|
transform: translateY(0);
|
|
|
|
|
box-shadow: none;
|
2026-01-25 11:04:50 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn svg {
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
stroke: currentColor;
|
|
|
|
|
fill: none;
|
|
|
|
|
stroke-width: 1.5px;
|
|
|
|
|
stroke-linecap: round;
|
|
|
|
|
stroke-linejoin: round;
|
|
|
|
|
flex-shrink: 0;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn.primary {
|
2026-01-25 11:04:50 +01:00
|
|
|
border-color: var(--accent);
|
|
|
|
|
background: var(--accent);
|
|
|
|
|
color: var(--primary-foreground);
|
2026-01-25 12:29:25 +00:00
|
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
2026-01-25 11:04:50 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn.primary:hover {
|
|
|
|
|
background: var(--accent-hover);
|
|
|
|
|
border-color: var(--accent-hover);
|
2026-01-31 21:13:13 +09:00
|
|
|
box-shadow:
|
|
|
|
|
var(--shadow-md),
|
|
|
|
|
0 0 20px var(--accent-glow);
|
2026-01-25 11:04:50 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Keyboard shortcut badge (shadcn style) */
|
|
|
|
|
.btn-kbd {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
margin-left: 6px;
|
|
|
|
|
padding: 2px 5px;
|
|
|
|
|
font-family: var(--mono);
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: rgba(255, 255, 255, 0.15);
|
|
|
|
|
color: inherit;
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn.primary .btn-kbd {
|
|
|
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:root[data-theme="light"] .btn-kbd {
|
|
|
|
|
background: rgba(0, 0, 0, 0.08);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:root[data-theme="light"] .btn.primary .btn-kbd {
|
|
|
|
|
background: rgba(255, 255, 255, 0.25);
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-06 08:16:09 +01:00
|
|
|
.btn.active {
|
2026-01-25 11:04:50 +01:00
|
|
|
border-color: var(--accent);
|
|
|
|
|
background: var(--accent-subtle);
|
|
|
|
|
color: var(--accent);
|
2026-01-06 08:16:09 +01:00
|
|
|
}
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.btn.danger {
|
2026-01-25 11:04:50 +01:00
|
|
|
border-color: transparent;
|
|
|
|
|
background: var(--danger-subtle);
|
|
|
|
|
color: var(--danger);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn.danger:hover {
|
|
|
|
|
background: rgba(239, 68, 68, 0.15);
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-08 16:21:21 +05:30
|
|
|
.btn--sm {
|
2026-01-25 11:04:50 +01:00
|
|
|
padding: 6px 10px;
|
2026-01-08 16:21:21 +05:30
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn:disabled {
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* ===========================================
|
|
|
|
|
Form Fields
|
|
|
|
|
=========================================== */
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.field {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-03 01:02:18 -06:00
|
|
|
.field.full {
|
|
|
|
|
grid-column: 1 / -1;
|
|
|
|
|
}
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.field span {
|
|
|
|
|
color: var(--muted);
|
2026-01-25 11:04:50 +01:00
|
|
|
font-size: 13px;
|
|
|
|
|
font-weight: 500;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.field input,
|
|
|
|
|
.field textarea,
|
|
|
|
|
.field select {
|
2026-01-25 11:04:50 +01:00
|
|
|
border: 1px solid var(--input);
|
|
|
|
|
background: var(--card);
|
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
padding: 8px 12px;
|
2025-12-21 00:34:39 +00:00
|
|
|
outline: none;
|
2026-01-25 11:04:50 +01:00
|
|
|
box-shadow: inset 0 1px 0 var(--card-highlight);
|
|
|
|
|
transition:
|
|
|
|
|
border-color var(--duration-fast) ease,
|
|
|
|
|
box-shadow var(--duration-fast) ease;
|
2026-01-02 11:21:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.field input:focus,
|
|
|
|
|
.field textarea:focus,
|
|
|
|
|
.field select:focus {
|
2026-01-25 11:04:50 +01:00
|
|
|
border-color: var(--ring);
|
|
|
|
|
box-shadow: var(--focus-ring);
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-02 10:40:24 +01:00
|
|
|
.field select {
|
|
|
|
|
appearance: none;
|
2026-01-25 11:04:50 +01:00
|
|
|
padding-right: 36px;
|
|
|
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
2026-01-02 10:40:24 +01:00
|
|
|
background-repeat: no-repeat;
|
2026-01-25 11:04:50 +01:00
|
|
|
background-position: right 10px center;
|
|
|
|
|
cursor: pointer;
|
2026-01-02 10:40:24 +01:00
|
|
|
}
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.field textarea {
|
|
|
|
|
font-family: var(--mono);
|
2026-01-25 11:04:50 +01:00
|
|
|
min-height: 160px;
|
2025-12-21 00:34:39 +00:00
|
|
|
resize: vertical;
|
|
|
|
|
white-space: pre;
|
2026-01-25 11:04:50 +01:00
|
|
|
line-height: 1.5;
|
2026-01-02 11:21:51 +00:00
|
|
|
}
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.field.checkbox {
|
|
|
|
|
grid-template-columns: auto 1fr;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-19 23:40:22 -08:00
|
|
|
.config-form .field.checkbox {
|
|
|
|
|
grid-template-columns: 18px minmax(0, 1fr);
|
|
|
|
|
column-gap: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.config-form .field.checkbox input[type="checkbox"] {
|
|
|
|
|
margin: 0;
|
2026-01-25 11:04:50 +01:00
|
|
|
width: 16px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
accent-color: var(--accent);
|
2026-01-19 23:40:22 -08:00
|
|
|
}
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.form-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-02 11:21:51 +00:00
|
|
|
:root[data-theme="light"] .field input,
|
|
|
|
|
:root[data-theme="light"] .field textarea,
|
|
|
|
|
:root[data-theme="light"] .field select {
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--card);
|
|
|
|
|
border-color: var(--input);
|
2026-01-02 11:21:51 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-08 16:21:21 +05:30
|
|
|
:root[data-theme="light"] .btn {
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--bg);
|
|
|
|
|
border-color: var(--input);
|
2026-01-08 16:21:21 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:root[data-theme="light"] .btn:hover {
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--bg-hover);
|
2026-01-08 16:21:21 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:root[data-theme="light"] .btn.primary {
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--accent);
|
|
|
|
|
border-color: var(--accent);
|
2026-01-08 16:21:21 +05:30
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* ===========================================
|
|
|
|
|
Utilities
|
|
|
|
|
=========================================== */
|
2026-01-08 16:21:21 +05:30
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.muted {
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mono {
|
|
|
|
|
font-family: var(--mono);
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* ===========================================
|
2026-01-25 12:29:25 +00:00
|
|
|
Callouts - Informative with subtle depth
|
2026-01-25 11:04:50 +01:00
|
|
|
=========================================== */
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.callout {
|
2026-01-25 12:29:25 +00:00
|
|
|
padding: 14px 16px;
|
2026-01-25 11:04:50 +01:00
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
background: var(--secondary);
|
2026-01-02 11:21:51 +00:00
|
|
|
border: 1px solid var(--border);
|
2026-01-25 11:04:50 +01:00
|
|
|
font-size: 13px;
|
2026-01-25 12:29:25 +00:00
|
|
|
line-height: 1.5;
|
|
|
|
|
position: relative;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.callout.danger {
|
2026-01-25 12:29:25 +00:00
|
|
|
border-color: rgba(239, 68, 68, 0.25);
|
|
|
|
|
background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.04) 100%);
|
2025-12-21 00:34:39 +00:00
|
|
|
color: var(--danger);
|
|
|
|
|
}
|
|
|
|
|
|
feat(compaction): add adaptive chunk sizing, progressive fallback, and UI indicator (#1466)
* fix(ui): allow relative URLs in avatar validation
The isAvatarUrl check only accepted http://, https://, or data: URLs,
but the /avatar/{agentId} endpoint returns relative paths like /avatar/main.
This caused local file avatars to display as text instead of images.
Fixes avatar display for locally configured avatar files.
* fix(gateway): resolve local avatars to URL in HTML injection and RPC
The frontend fix alone wasn't enough because:
1. serveIndexHtml() was injecting the raw avatar filename into HTML
2. agent.identity.get RPC was returning raw filename, overwriting the
HTML-injected value
Now both paths resolve local file avatars (*.png, *.jpg, etc.) to the
/avatar/{agentId} endpoint URL.
* feat(compaction): add adaptive chunk sizing and progressive fallback
- Add computeAdaptiveChunkRatio() to reduce chunk size for large messages
- Add isOversizedForSummary() to detect messages too large to summarize
- Add summarizeWithFallback() with progressive fallback:
- Tries full summarization first
- Falls back to partial summarization excluding oversized messages
- Notes oversized messages in the summary output
- Add SAFETY_MARGIN (1.2x) buffer for token estimation inaccuracy
- Reduce MIN_CHUNK_RATIO to 0.15 for very large messages
This prevents compaction failures when conversations contain
unusually large tool outputs or responses that exceed the
summarization model's context window.
* feat(ui): add compaction indicator and improve event error handling
Compaction indicator:
- Add CompactionStatus type and handleCompactionEvent() in app-tool-stream.ts
- Show '🧹 Compacting context...' toast while active (with pulse animation)
- Show '🧹 Context compacted' briefly after completion
- Auto-clear toast after 5 seconds
- Add CSS styles for .callout.info, .callout.success, .compaction-indicator
Error handling improvements:
- Wrap onEvent callback in try/catch in gateway.ts to prevent errors
from breaking the WebSocket message handler
- Wrap handleGatewayEvent in try/catch with console.error logging
to isolate errors and make them visible in devtools
These changes address UI freezes during heavy agent activity by:
1. Showing users when compaction is happening
2. Preventing uncaught errors from silently breaking the event loop
* fix(control-ui): add agentId to DEFAULT_ASSISTANT_IDENTITY
TypeScript inferred the union type without agentId when falling back to
DEFAULT_ASSISTANT_IDENTITY, causing build errors at control-ui.ts:222-223.
2026-01-23 01:32:30 -05:00
|
|
|
.callout.info {
|
2026-01-25 12:29:25 +00:00
|
|
|
border-color: rgba(59, 130, 246, 0.25);
|
|
|
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%);
|
2026-01-25 11:04:50 +01:00
|
|
|
color: var(--info);
|
feat(compaction): add adaptive chunk sizing, progressive fallback, and UI indicator (#1466)
* fix(ui): allow relative URLs in avatar validation
The isAvatarUrl check only accepted http://, https://, or data: URLs,
but the /avatar/{agentId} endpoint returns relative paths like /avatar/main.
This caused local file avatars to display as text instead of images.
Fixes avatar display for locally configured avatar files.
* fix(gateway): resolve local avatars to URL in HTML injection and RPC
The frontend fix alone wasn't enough because:
1. serveIndexHtml() was injecting the raw avatar filename into HTML
2. agent.identity.get RPC was returning raw filename, overwriting the
HTML-injected value
Now both paths resolve local file avatars (*.png, *.jpg, etc.) to the
/avatar/{agentId} endpoint URL.
* feat(compaction): add adaptive chunk sizing and progressive fallback
- Add computeAdaptiveChunkRatio() to reduce chunk size for large messages
- Add isOversizedForSummary() to detect messages too large to summarize
- Add summarizeWithFallback() with progressive fallback:
- Tries full summarization first
- Falls back to partial summarization excluding oversized messages
- Notes oversized messages in the summary output
- Add SAFETY_MARGIN (1.2x) buffer for token estimation inaccuracy
- Reduce MIN_CHUNK_RATIO to 0.15 for very large messages
This prevents compaction failures when conversations contain
unusually large tool outputs or responses that exceed the
summarization model's context window.
* feat(ui): add compaction indicator and improve event error handling
Compaction indicator:
- Add CompactionStatus type and handleCompactionEvent() in app-tool-stream.ts
- Show '🧹 Compacting context...' toast while active (with pulse animation)
- Show '🧹 Context compacted' briefly after completion
- Auto-clear toast after 5 seconds
- Add CSS styles for .callout.info, .callout.success, .compaction-indicator
Error handling improvements:
- Wrap onEvent callback in try/catch in gateway.ts to prevent errors
from breaking the WebSocket message handler
- Wrap handleGatewayEvent in try/catch with console.error logging
to isolate errors and make them visible in devtools
These changes address UI freezes during heavy agent activity by:
1. Showing users when compaction is happening
2. Preventing uncaught errors from silently breaking the event loop
* fix(control-ui): add agentId to DEFAULT_ASSISTANT_IDENTITY
TypeScript inferred the union type without agentId when falling back to
DEFAULT_ASSISTANT_IDENTITY, causing build errors at control-ui.ts:222-223.
2026-01-23 01:32:30 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.callout.success {
|
2026-01-25 12:29:25 +00:00
|
|
|
border-color: rgba(34, 197, 94, 0.25);
|
|
|
|
|
background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.04) 100%);
|
2026-01-25 11:04:50 +01:00
|
|
|
color: var(--ok);
|
feat(compaction): add adaptive chunk sizing, progressive fallback, and UI indicator (#1466)
* fix(ui): allow relative URLs in avatar validation
The isAvatarUrl check only accepted http://, https://, or data: URLs,
but the /avatar/{agentId} endpoint returns relative paths like /avatar/main.
This caused local file avatars to display as text instead of images.
Fixes avatar display for locally configured avatar files.
* fix(gateway): resolve local avatars to URL in HTML injection and RPC
The frontend fix alone wasn't enough because:
1. serveIndexHtml() was injecting the raw avatar filename into HTML
2. agent.identity.get RPC was returning raw filename, overwriting the
HTML-injected value
Now both paths resolve local file avatars (*.png, *.jpg, etc.) to the
/avatar/{agentId} endpoint URL.
* feat(compaction): add adaptive chunk sizing and progressive fallback
- Add computeAdaptiveChunkRatio() to reduce chunk size for large messages
- Add isOversizedForSummary() to detect messages too large to summarize
- Add summarizeWithFallback() with progressive fallback:
- Tries full summarization first
- Falls back to partial summarization excluding oversized messages
- Notes oversized messages in the summary output
- Add SAFETY_MARGIN (1.2x) buffer for token estimation inaccuracy
- Reduce MIN_CHUNK_RATIO to 0.15 for very large messages
This prevents compaction failures when conversations contain
unusually large tool outputs or responses that exceed the
summarization model's context window.
* feat(ui): add compaction indicator and improve event error handling
Compaction indicator:
- Add CompactionStatus type and handleCompactionEvent() in app-tool-stream.ts
- Show '🧹 Compacting context...' toast while active (with pulse animation)
- Show '🧹 Context compacted' briefly after completion
- Auto-clear toast after 5 seconds
- Add CSS styles for .callout.info, .callout.success, .compaction-indicator
Error handling improvements:
- Wrap onEvent callback in try/catch in gateway.ts to prevent errors
from breaking the WebSocket message handler
- Wrap handleGatewayEvent in try/catch with console.error logging
to isolate errors and make them visible in devtools
These changes address UI freezes during heavy agent activity by:
1. Showing users when compaction is happening
2. Preventing uncaught errors from silently breaking the event loop
* fix(control-ui): add agentId to DEFAULT_ASSISTANT_IDENTITY
TypeScript inferred the union type without agentId when falling back to
DEFAULT_ASSISTANT_IDENTITY, causing build errors at control-ui.ts:222-223.
2026-01-23 01:32:30 -05:00
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* Compaction indicator */
|
feat(compaction): add adaptive chunk sizing, progressive fallback, and UI indicator (#1466)
* fix(ui): allow relative URLs in avatar validation
The isAvatarUrl check only accepted http://, https://, or data: URLs,
but the /avatar/{agentId} endpoint returns relative paths like /avatar/main.
This caused local file avatars to display as text instead of images.
Fixes avatar display for locally configured avatar files.
* fix(gateway): resolve local avatars to URL in HTML injection and RPC
The frontend fix alone wasn't enough because:
1. serveIndexHtml() was injecting the raw avatar filename into HTML
2. agent.identity.get RPC was returning raw filename, overwriting the
HTML-injected value
Now both paths resolve local file avatars (*.png, *.jpg, etc.) to the
/avatar/{agentId} endpoint URL.
* feat(compaction): add adaptive chunk sizing and progressive fallback
- Add computeAdaptiveChunkRatio() to reduce chunk size for large messages
- Add isOversizedForSummary() to detect messages too large to summarize
- Add summarizeWithFallback() with progressive fallback:
- Tries full summarization first
- Falls back to partial summarization excluding oversized messages
- Notes oversized messages in the summary output
- Add SAFETY_MARGIN (1.2x) buffer for token estimation inaccuracy
- Reduce MIN_CHUNK_RATIO to 0.15 for very large messages
This prevents compaction failures when conversations contain
unusually large tool outputs or responses that exceed the
summarization model's context window.
* feat(ui): add compaction indicator and improve event error handling
Compaction indicator:
- Add CompactionStatus type and handleCompactionEvent() in app-tool-stream.ts
- Show '🧹 Compacting context...' toast while active (with pulse animation)
- Show '🧹 Context compacted' briefly after completion
- Auto-clear toast after 5 seconds
- Add CSS styles for .callout.info, .callout.success, .compaction-indicator
Error handling improvements:
- Wrap onEvent callback in try/catch in gateway.ts to prevent errors
from breaking the WebSocket message handler
- Wrap handleGatewayEvent in try/catch with console.error logging
to isolate errors and make them visible in devtools
These changes address UI freezes during heavy agent activity by:
1. Showing users when compaction is happening
2. Preventing uncaught errors from silently breaking the event loop
* fix(control-ui): add agentId to DEFAULT_ASSISTANT_IDENTITY
TypeScript inferred the union type without agentId when falling back to
DEFAULT_ASSISTANT_IDENTITY, causing build errors at control-ui.ts:222-223.
2026-01-23 01:32:30 -05:00
|
|
|
.compaction-indicator {
|
2026-02-07 20:02:32 -08:00
|
|
|
align-self: center;
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 6px;
|
feat(compaction): add adaptive chunk sizing, progressive fallback, and UI indicator (#1466)
* fix(ui): allow relative URLs in avatar validation
The isAvatarUrl check only accepted http://, https://, or data: URLs,
but the /avatar/{agentId} endpoint returns relative paths like /avatar/main.
This caused local file avatars to display as text instead of images.
Fixes avatar display for locally configured avatar files.
* fix(gateway): resolve local avatars to URL in HTML injection and RPC
The frontend fix alone wasn't enough because:
1. serveIndexHtml() was injecting the raw avatar filename into HTML
2. agent.identity.get RPC was returning raw filename, overwriting the
HTML-injected value
Now both paths resolve local file avatars (*.png, *.jpg, etc.) to the
/avatar/{agentId} endpoint URL.
* feat(compaction): add adaptive chunk sizing and progressive fallback
- Add computeAdaptiveChunkRatio() to reduce chunk size for large messages
- Add isOversizedForSummary() to detect messages too large to summarize
- Add summarizeWithFallback() with progressive fallback:
- Tries full summarization first
- Falls back to partial summarization excluding oversized messages
- Notes oversized messages in the summary output
- Add SAFETY_MARGIN (1.2x) buffer for token estimation inaccuracy
- Reduce MIN_CHUNK_RATIO to 0.15 for very large messages
This prevents compaction failures when conversations contain
unusually large tool outputs or responses that exceed the
summarization model's context window.
* feat(ui): add compaction indicator and improve event error handling
Compaction indicator:
- Add CompactionStatus type and handleCompactionEvent() in app-tool-stream.ts
- Show '🧹 Compacting context...' toast while active (with pulse animation)
- Show '🧹 Context compacted' briefly after completion
- Auto-clear toast after 5 seconds
- Add CSS styles for .callout.info, .callout.success, .compaction-indicator
Error handling improvements:
- Wrap onEvent callback in try/catch in gateway.ts to prevent errors
from breaking the WebSocket message handler
- Wrap handleGatewayEvent in try/catch with console.error logging
to isolate errors and make them visible in devtools
These changes address UI freezes during heavy agent activity by:
1. Showing users when compaction is happening
2. Preventing uncaught errors from silently breaking the event loop
* fix(control-ui): add agentId to DEFAULT_ASSISTANT_IDENTITY
TypeScript inferred the union type without agentId when falling back to
DEFAULT_ASSISTANT_IDENTITY, causing build errors at control-ui.ts:222-223.
2026-01-23 01:32:30 -05:00
|
|
|
font-size: 13px;
|
2026-02-07 20:02:32 -08:00
|
|
|
line-height: 1.2;
|
|
|
|
|
padding: 6px 14px;
|
feat(compaction): add adaptive chunk sizing, progressive fallback, and UI indicator (#1466)
* fix(ui): allow relative URLs in avatar validation
The isAvatarUrl check only accepted http://, https://, or data: URLs,
but the /avatar/{agentId} endpoint returns relative paths like /avatar/main.
This caused local file avatars to display as text instead of images.
Fixes avatar display for locally configured avatar files.
* fix(gateway): resolve local avatars to URL in HTML injection and RPC
The frontend fix alone wasn't enough because:
1. serveIndexHtml() was injecting the raw avatar filename into HTML
2. agent.identity.get RPC was returning raw filename, overwriting the
HTML-injected value
Now both paths resolve local file avatars (*.png, *.jpg, etc.) to the
/avatar/{agentId} endpoint URL.
* feat(compaction): add adaptive chunk sizing and progressive fallback
- Add computeAdaptiveChunkRatio() to reduce chunk size for large messages
- Add isOversizedForSummary() to detect messages too large to summarize
- Add summarizeWithFallback() with progressive fallback:
- Tries full summarization first
- Falls back to partial summarization excluding oversized messages
- Notes oversized messages in the summary output
- Add SAFETY_MARGIN (1.2x) buffer for token estimation inaccuracy
- Reduce MIN_CHUNK_RATIO to 0.15 for very large messages
This prevents compaction failures when conversations contain
unusually large tool outputs or responses that exceed the
summarization model's context window.
* feat(ui): add compaction indicator and improve event error handling
Compaction indicator:
- Add CompactionStatus type and handleCompactionEvent() in app-tool-stream.ts
- Show '🧹 Compacting context...' toast while active (with pulse animation)
- Show '🧹 Context compacted' briefly after completion
- Auto-clear toast after 5 seconds
- Add CSS styles for .callout.info, .callout.success, .compaction-indicator
Error handling improvements:
- Wrap onEvent callback in try/catch in gateway.ts to prevent errors
from breaking the WebSocket message handler
- Wrap handleGatewayEvent in try/catch with console.error logging
to isolate errors and make them visible in devtools
These changes address UI freezes during heavy agent activity by:
1. Showing users when compaction is happening
2. Preventing uncaught errors from silently breaking the event loop
* fix(control-ui): add agentId to DEFAULT_ASSISTANT_IDENTITY
TypeScript inferred the union type without agentId when falling back to
DEFAULT_ASSISTANT_IDENTITY, causing build errors at control-ui.ts:222-223.
2026-01-23 01:32:30 -05:00
|
|
|
margin-bottom: 8px;
|
2026-02-07 20:02:32 -08:00
|
|
|
border-radius: 999px;
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
background: var(--panel-strong);
|
|
|
|
|
color: var(--text);
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
user-select: none;
|
2026-01-25 11:04:50 +01:00
|
|
|
animation: fade-in 0.2s var(--ease-out);
|
feat(compaction): add adaptive chunk sizing, progressive fallback, and UI indicator (#1466)
* fix(ui): allow relative URLs in avatar validation
The isAvatarUrl check only accepted http://, https://, or data: URLs,
but the /avatar/{agentId} endpoint returns relative paths like /avatar/main.
This caused local file avatars to display as text instead of images.
Fixes avatar display for locally configured avatar files.
* fix(gateway): resolve local avatars to URL in HTML injection and RPC
The frontend fix alone wasn't enough because:
1. serveIndexHtml() was injecting the raw avatar filename into HTML
2. agent.identity.get RPC was returning raw filename, overwriting the
HTML-injected value
Now both paths resolve local file avatars (*.png, *.jpg, etc.) to the
/avatar/{agentId} endpoint URL.
* feat(compaction): add adaptive chunk sizing and progressive fallback
- Add computeAdaptiveChunkRatio() to reduce chunk size for large messages
- Add isOversizedForSummary() to detect messages too large to summarize
- Add summarizeWithFallback() with progressive fallback:
- Tries full summarization first
- Falls back to partial summarization excluding oversized messages
- Notes oversized messages in the summary output
- Add SAFETY_MARGIN (1.2x) buffer for token estimation inaccuracy
- Reduce MIN_CHUNK_RATIO to 0.15 for very large messages
This prevents compaction failures when conversations contain
unusually large tool outputs or responses that exceed the
summarization model's context window.
* feat(ui): add compaction indicator and improve event error handling
Compaction indicator:
- Add CompactionStatus type and handleCompactionEvent() in app-tool-stream.ts
- Show '🧹 Compacting context...' toast while active (with pulse animation)
- Show '🧹 Context compacted' briefly after completion
- Auto-clear toast after 5 seconds
- Add CSS styles for .callout.info, .callout.success, .compaction-indicator
Error handling improvements:
- Wrap onEvent callback in try/catch in gateway.ts to prevent errors
from breaking the WebSocket message handler
- Wrap handleGatewayEvent in try/catch with console.error logging
to isolate errors and make them visible in devtools
These changes address UI freezes during heavy agent activity by:
1. Showing users when compaction is happening
2. Preventing uncaught errors from silently breaking the event loop
* fix(control-ui): add agentId to DEFAULT_ASSISTANT_IDENTITY
TypeScript inferred the union type without agentId when falling back to
DEFAULT_ASSISTANT_IDENTITY, causing build errors at control-ui.ts:222-223.
2026-01-23 01:32:30 -05:00
|
|
|
}
|
|
|
|
|
|
2026-02-07 20:02:32 -08:00
|
|
|
.compaction-indicator svg {
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
stroke: currentColor;
|
|
|
|
|
fill: none;
|
|
|
|
|
stroke-width: 1.5px;
|
|
|
|
|
stroke-linecap: round;
|
|
|
|
|
stroke-linejoin: round;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
|
feat(compaction): add adaptive chunk sizing, progressive fallback, and UI indicator (#1466)
* fix(ui): allow relative URLs in avatar validation
The isAvatarUrl check only accepted http://, https://, or data: URLs,
but the /avatar/{agentId} endpoint returns relative paths like /avatar/main.
This caused local file avatars to display as text instead of images.
Fixes avatar display for locally configured avatar files.
* fix(gateway): resolve local avatars to URL in HTML injection and RPC
The frontend fix alone wasn't enough because:
1. serveIndexHtml() was injecting the raw avatar filename into HTML
2. agent.identity.get RPC was returning raw filename, overwriting the
HTML-injected value
Now both paths resolve local file avatars (*.png, *.jpg, etc.) to the
/avatar/{agentId} endpoint URL.
* feat(compaction): add adaptive chunk sizing and progressive fallback
- Add computeAdaptiveChunkRatio() to reduce chunk size for large messages
- Add isOversizedForSummary() to detect messages too large to summarize
- Add summarizeWithFallback() with progressive fallback:
- Tries full summarization first
- Falls back to partial summarization excluding oversized messages
- Notes oversized messages in the summary output
- Add SAFETY_MARGIN (1.2x) buffer for token estimation inaccuracy
- Reduce MIN_CHUNK_RATIO to 0.15 for very large messages
This prevents compaction failures when conversations contain
unusually large tool outputs or responses that exceed the
summarization model's context window.
* feat(ui): add compaction indicator and improve event error handling
Compaction indicator:
- Add CompactionStatus type and handleCompactionEvent() in app-tool-stream.ts
- Show '🧹 Compacting context...' toast while active (with pulse animation)
- Show '🧹 Context compacted' briefly after completion
- Auto-clear toast after 5 seconds
- Add CSS styles for .callout.info, .callout.success, .compaction-indicator
Error handling improvements:
- Wrap onEvent callback in try/catch in gateway.ts to prevent errors
from breaking the WebSocket message handler
- Wrap handleGatewayEvent in try/catch with console.error logging
to isolate errors and make them visible in devtools
These changes address UI freezes during heavy agent activity by:
1. Showing users when compaction is happening
2. Preventing uncaught errors from silently breaking the event loop
* fix(control-ui): add agentId to DEFAULT_ASSISTANT_IDENTITY
TypeScript inferred the union type without agentId when falling back to
DEFAULT_ASSISTANT_IDENTITY, causing build errors at control-ui.ts:222-223.
2026-01-23 01:32:30 -05:00
|
|
|
.compaction-indicator--active {
|
2026-02-07 20:02:32 -08:00
|
|
|
color: var(--info);
|
|
|
|
|
border-color: rgba(59, 130, 246, 0.35);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compaction-indicator--active svg {
|
|
|
|
|
animation: compaction-spin 1s linear infinite;
|
feat(compaction): add adaptive chunk sizing, progressive fallback, and UI indicator (#1466)
* fix(ui): allow relative URLs in avatar validation
The isAvatarUrl check only accepted http://, https://, or data: URLs,
but the /avatar/{agentId} endpoint returns relative paths like /avatar/main.
This caused local file avatars to display as text instead of images.
Fixes avatar display for locally configured avatar files.
* fix(gateway): resolve local avatars to URL in HTML injection and RPC
The frontend fix alone wasn't enough because:
1. serveIndexHtml() was injecting the raw avatar filename into HTML
2. agent.identity.get RPC was returning raw filename, overwriting the
HTML-injected value
Now both paths resolve local file avatars (*.png, *.jpg, etc.) to the
/avatar/{agentId} endpoint URL.
* feat(compaction): add adaptive chunk sizing and progressive fallback
- Add computeAdaptiveChunkRatio() to reduce chunk size for large messages
- Add isOversizedForSummary() to detect messages too large to summarize
- Add summarizeWithFallback() with progressive fallback:
- Tries full summarization first
- Falls back to partial summarization excluding oversized messages
- Notes oversized messages in the summary output
- Add SAFETY_MARGIN (1.2x) buffer for token estimation inaccuracy
- Reduce MIN_CHUNK_RATIO to 0.15 for very large messages
This prevents compaction failures when conversations contain
unusually large tool outputs or responses that exceed the
summarization model's context window.
* feat(ui): add compaction indicator and improve event error handling
Compaction indicator:
- Add CompactionStatus type and handleCompactionEvent() in app-tool-stream.ts
- Show '🧹 Compacting context...' toast while active (with pulse animation)
- Show '🧹 Context compacted' briefly after completion
- Auto-clear toast after 5 seconds
- Add CSS styles for .callout.info, .callout.success, .compaction-indicator
Error handling improvements:
- Wrap onEvent callback in try/catch in gateway.ts to prevent errors
from breaking the WebSocket message handler
- Wrap handleGatewayEvent in try/catch with console.error logging
to isolate errors and make them visible in devtools
These changes address UI freezes during heavy agent activity by:
1. Showing users when compaction is happening
2. Preventing uncaught errors from silently breaking the event loop
* fix(control-ui): add agentId to DEFAULT_ASSISTANT_IDENTITY
TypeScript inferred the union type without agentId when falling back to
DEFAULT_ASSISTANT_IDENTITY, causing build errors at control-ui.ts:222-223.
2026-01-23 01:32:30 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compaction-indicator--complete {
|
2026-02-07 20:02:32 -08:00
|
|
|
color: var(--ok);
|
|
|
|
|
border-color: rgba(34, 197, 94, 0.35);
|
feat(compaction): add adaptive chunk sizing, progressive fallback, and UI indicator (#1466)
* fix(ui): allow relative URLs in avatar validation
The isAvatarUrl check only accepted http://, https://, or data: URLs,
but the /avatar/{agentId} endpoint returns relative paths like /avatar/main.
This caused local file avatars to display as text instead of images.
Fixes avatar display for locally configured avatar files.
* fix(gateway): resolve local avatars to URL in HTML injection and RPC
The frontend fix alone wasn't enough because:
1. serveIndexHtml() was injecting the raw avatar filename into HTML
2. agent.identity.get RPC was returning raw filename, overwriting the
HTML-injected value
Now both paths resolve local file avatars (*.png, *.jpg, etc.) to the
/avatar/{agentId} endpoint URL.
* feat(compaction): add adaptive chunk sizing and progressive fallback
- Add computeAdaptiveChunkRatio() to reduce chunk size for large messages
- Add isOversizedForSummary() to detect messages too large to summarize
- Add summarizeWithFallback() with progressive fallback:
- Tries full summarization first
- Falls back to partial summarization excluding oversized messages
- Notes oversized messages in the summary output
- Add SAFETY_MARGIN (1.2x) buffer for token estimation inaccuracy
- Reduce MIN_CHUNK_RATIO to 0.15 for very large messages
This prevents compaction failures when conversations contain
unusually large tool outputs or responses that exceed the
summarization model's context window.
* feat(ui): add compaction indicator and improve event error handling
Compaction indicator:
- Add CompactionStatus type and handleCompactionEvent() in app-tool-stream.ts
- Show '🧹 Compacting context...' toast while active (with pulse animation)
- Show '🧹 Context compacted' briefly after completion
- Auto-clear toast after 5 seconds
- Add CSS styles for .callout.info, .callout.success, .compaction-indicator
Error handling improvements:
- Wrap onEvent callback in try/catch in gateway.ts to prevent errors
from breaking the WebSocket message handler
- Wrap handleGatewayEvent in try/catch with console.error logging
to isolate errors and make them visible in devtools
These changes address UI freezes during heavy agent activity by:
1. Showing users when compaction is happening
2. Preventing uncaught errors from silently breaking the event loop
* fix(control-ui): add agentId to DEFAULT_ASSISTANT_IDENTITY
TypeScript inferred the union type without agentId when falling back to
DEFAULT_ASSISTANT_IDENTITY, causing build errors at control-ui.ts:222-223.
2026-01-23 01:32:30 -05:00
|
|
|
}
|
|
|
|
|
|
2026-02-19 14:33:02 -08:00
|
|
|
.compaction-indicator--fallback {
|
|
|
|
|
color: #d97706;
|
|
|
|
|
border-color: rgba(217, 119, 6, 0.35);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compaction-indicator--fallback-cleared {
|
|
|
|
|
color: var(--ok);
|
|
|
|
|
border-color: rgba(34, 197, 94, 0.35);
|
|
|
|
|
}
|
|
|
|
|
|
2026-02-07 20:02:32 -08:00
|
|
|
@keyframes compaction-spin {
|
|
|
|
|
to {
|
|
|
|
|
transform: rotate(360deg);
|
feat(compaction): add adaptive chunk sizing, progressive fallback, and UI indicator (#1466)
* fix(ui): allow relative URLs in avatar validation
The isAvatarUrl check only accepted http://, https://, or data: URLs,
but the /avatar/{agentId} endpoint returns relative paths like /avatar/main.
This caused local file avatars to display as text instead of images.
Fixes avatar display for locally configured avatar files.
* fix(gateway): resolve local avatars to URL in HTML injection and RPC
The frontend fix alone wasn't enough because:
1. serveIndexHtml() was injecting the raw avatar filename into HTML
2. agent.identity.get RPC was returning raw filename, overwriting the
HTML-injected value
Now both paths resolve local file avatars (*.png, *.jpg, etc.) to the
/avatar/{agentId} endpoint URL.
* feat(compaction): add adaptive chunk sizing and progressive fallback
- Add computeAdaptiveChunkRatio() to reduce chunk size for large messages
- Add isOversizedForSummary() to detect messages too large to summarize
- Add summarizeWithFallback() with progressive fallback:
- Tries full summarization first
- Falls back to partial summarization excluding oversized messages
- Notes oversized messages in the summary output
- Add SAFETY_MARGIN (1.2x) buffer for token estimation inaccuracy
- Reduce MIN_CHUNK_RATIO to 0.15 for very large messages
This prevents compaction failures when conversations contain
unusually large tool outputs or responses that exceed the
summarization model's context window.
* feat(ui): add compaction indicator and improve event error handling
Compaction indicator:
- Add CompactionStatus type and handleCompactionEvent() in app-tool-stream.ts
- Show '🧹 Compacting context...' toast while active (with pulse animation)
- Show '🧹 Context compacted' briefly after completion
- Auto-clear toast after 5 seconds
- Add CSS styles for .callout.info, .callout.success, .compaction-indicator
Error handling improvements:
- Wrap onEvent callback in try/catch in gateway.ts to prevent errors
from breaking the WebSocket message handler
- Wrap handleGatewayEvent in try/catch with console.error logging
to isolate errors and make them visible in devtools
These changes address UI freezes during heavy agent activity by:
1. Showing users when compaction is happening
2. Preventing uncaught errors from silently breaking the event loop
* fix(control-ui): add agentId to DEFAULT_ASSISTANT_IDENTITY
TypeScript inferred the union type without agentId when falling back to
DEFAULT_ASSISTANT_IDENTITY, causing build errors at control-ui.ts:222-223.
2026-01-23 01:32:30 -05:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* ===========================================
|
|
|
|
|
Code Blocks
|
|
|
|
|
=========================================== */
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.code-block {
|
|
|
|
|
font-family: var(--mono);
|
2026-01-25 11:04:50 +01:00
|
|
|
font-size: 13px;
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
background: var(--secondary);
|
|
|
|
|
padding: 12px;
|
|
|
|
|
border-radius: var(--radius-md);
|
2026-01-02 11:21:51 +00:00
|
|
|
border: 1px solid var(--border);
|
2025-12-21 00:34:39 +00:00
|
|
|
max-height: 360px;
|
|
|
|
|
overflow: auto;
|
2026-01-25 13:20:37 +00:00
|
|
|
max-width: 100%;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-02 11:21:51 +00:00
|
|
|
:root[data-theme="light"] .code-block,
|
|
|
|
|
:root[data-theme="light"] .list-item,
|
|
|
|
|
:root[data-theme="light"] .table-row,
|
|
|
|
|
:root[data-theme="light"] .chip {
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--bg);
|
2026-01-02 11:21:51 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* ===========================================
|
|
|
|
|
Lists
|
|
|
|
|
=========================================== */
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.list {
|
|
|
|
|
display: grid;
|
2026-01-25 11:04:50 +01:00
|
|
|
gap: 8px;
|
2026-01-05 01:21:33 +01:00
|
|
|
container-type: inline-size;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list-item {
|
|
|
|
|
display: grid;
|
2026-01-25 11:04:50 +01:00
|
|
|
grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
|
|
|
|
|
gap: 16px;
|
2025-12-21 00:37:29 +00:00
|
|
|
align-items: start;
|
2025-12-21 00:34:39 +00:00
|
|
|
border: 1px solid var(--border);
|
2026-01-25 11:04:50 +01:00
|
|
|
border-radius: var(--radius-md);
|
2025-12-21 00:34:39 +00:00
|
|
|
padding: 12px;
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--card);
|
|
|
|
|
transition: border-color var(--duration-fast) ease;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-15 08:38:12 +00:00
|
|
|
.list-item-clickable {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list-item-clickable:hover {
|
|
|
|
|
border-color: var(--border-strong);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list-item-selected {
|
|
|
|
|
border-color: var(--accent);
|
2026-01-25 11:04:50 +01:00
|
|
|
box-shadow: var(--focus-ring);
|
2026-01-15 08:38:12 +00:00
|
|
|
}
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.list-main {
|
|
|
|
|
display: grid;
|
2026-01-25 11:04:50 +01:00
|
|
|
gap: 4px;
|
2025-12-21 00:37:29 +00:00
|
|
|
min-width: 0;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list-title {
|
2026-01-25 11:04:50 +01:00
|
|
|
font-weight: 500;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list-sub {
|
|
|
|
|
color: var(--muted);
|
2026-01-02 11:21:51 +00:00
|
|
|
font-size: 12px;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list-meta {
|
|
|
|
|
text-align: right;
|
|
|
|
|
color: var(--muted);
|
2026-01-25 11:04:50 +01:00
|
|
|
font-size: 12px;
|
2025-12-21 00:34:39 +00:00
|
|
|
display: grid;
|
|
|
|
|
gap: 4px;
|
2026-01-25 11:04:50 +01:00
|
|
|
min-width: 200px;
|
2025-12-21 00:37:29 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-05 01:21:33 +01:00
|
|
|
.list-meta .btn {
|
|
|
|
|
padding: 6px 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2025-12-21 00:37:29 +00:00
|
|
|
.list-meta .field input,
|
|
|
|
|
.list-meta .field textarea,
|
|
|
|
|
.list-meta .field select {
|
|
|
|
|
width: 100%;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
fix: cron scheduler reliability, store hardening, and UX improvements (#10776)
* refactor: update cron job wake mode and run mode handling
- Changed default wake mode from 'next-heartbeat' to 'now' in CronJobEditor and related CLI commands.
- Updated cron-tool tests to reflect changes in run mode, introducing 'due' and 'force' options.
- Enhanced cron-tool logic to handle new run modes and ensure compatibility with existing job structures.
- Added new tests for delivery plan consistency and job execution behavior under various conditions.
- Improved normalization functions to handle wake mode and session target casing.
This refactor aims to streamline cron job configurations and enhance the overall user experience with clearer defaults and improved functionality.
* test: enhance cron job functionality and UI
- Added tests to ensure the isolated agent correctly announces the final payload text when delivering messages via Telegram.
- Implemented a new function to pick the last deliverable payload from a list of delivery payloads.
- Enhanced the cron service to maintain legacy "every" jobs while minute cron jobs recompute schedules.
- Updated the cron store migration tests to verify the addition of anchorMs to legacy every schedules.
- Improved the UI for displaying cron job details, including job state and delivery information, with new styles and layout adjustments.
These changes aim to improve the reliability and user experience of the cron job system.
* test: enhance sessions thinking level handling
- Added tests to verify that the correct thinking levels are applied during session spawning.
- Updated the sessions-spawn-tool to include a new parameter for overriding thinking levels.
- Enhanced the UI to support additional thinking levels, including "xhigh" and "full", and improved the handling of current options in dropdowns.
These changes aim to improve the flexibility and accuracy of thinking level configurations in session management.
* feat: enhance session management and cron job functionality
- Introduced passthrough arguments in the test-parallel script to allow for flexible command-line options.
- Updated session handling to hide cron run alias session keys from the sessions list, improving clarity.
- Enhanced the cron service to accurately record job start times and durations, ensuring better tracking of job execution.
- Added tests to verify the correct behavior of the cron service under various conditions, including zero-delay timers.
These changes aim to improve the usability and reliability of session and cron job management.
* feat: implement job running state checks in cron service
- Added functionality to prevent manual job runs if a job is already in progress, enhancing job management.
- Updated the `isJobDue` function to include checks for running jobs, ensuring accurate scheduling.
- Enhanced the `run` function to return a specific reason when a job is already running.
- Introduced a new test case to verify the behavior of forced manual runs during active job execution.
These changes aim to improve the reliability and clarity of cron job execution and management.
* feat: add session ID and key to CronRunLogEntry model
- Introduced `sessionid` and `sessionkey` properties to the `CronRunLogEntry` struct for enhanced tracking of session-related information.
- Updated the initializer and Codable conformance to accommodate the new properties, ensuring proper serialization and deserialization.
These changes aim to improve the granularity of logging and session management within the cron job system.
* fix: improve session display name resolution
- Updated the `resolveSessionDisplayName` function to ensure that both label and displayName are trimmed and default to an empty string if not present.
- Enhanced the logic to prevent returning the key if it matches the label or displayName, improving clarity in session naming.
These changes aim to enhance the accuracy and usability of session display names in the UI.
* perf: skip cron store persist when idle timer tick produces no changes
recomputeNextRuns now returns a boolean indicating whether any job
state was mutated. The idle path in onTimer only persists when the
return value is true, eliminating unnecessary file writes every 60s
for far-future or idle schedules.
* fix: prep for merge - explicit delivery mode migration, docs + changelog (#10776) (thanks @tyler6204)
2026-02-06 18:03:03 -08:00
|
|
|
/* Cron jobs: allow long payload/state text and keep action buttons inside the card. */
|
|
|
|
|
.cron-job-payload,
|
|
|
|
|
.cron-job-agent,
|
|
|
|
|
.cron-job-state {
|
|
|
|
|
overflow-wrap: anywhere;
|
|
|
|
|
word-break: break-word;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job .list-title {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
letter-spacing: -0.015em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job {
|
|
|
|
|
grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
|
|
|
|
|
grid-template-areas:
|
|
|
|
|
"main meta"
|
|
|
|
|
"footer footer";
|
|
|
|
|
row-gap: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job .list-main {
|
|
|
|
|
grid-area: main;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job .list-meta {
|
|
|
|
|
grid-area: meta;
|
|
|
|
|
min-width: 240px;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job-footer {
|
|
|
|
|
grid-area: footer;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
border-top: 1px solid var(--border);
|
|
|
|
|
padding-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job-chips {
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job-detail {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 3px;
|
|
|
|
|
margin-top: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job-detail-label {
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
letter-spacing: 0.03em;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job-detail-value {
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
line-height: 1.35;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job-state {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job-state-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: baseline;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job-state-key {
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
letter-spacing: 0.05em;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job-state-value {
|
|
|
|
|
color: var(--text);
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job-status-pill {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
border-radius: var(--radius-full);
|
|
|
|
|
padding: 2px 8px;
|
|
|
|
|
text-transform: lowercase;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job-status-ok {
|
|
|
|
|
color: var(--ok);
|
|
|
|
|
border-color: rgba(34, 197, 94, 0.35);
|
|
|
|
|
background: var(--ok-subtle);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job-status-error {
|
|
|
|
|
color: var(--danger);
|
|
|
|
|
border-color: rgba(239, 68, 68, 0.35);
|
|
|
|
|
background: var(--danger-subtle);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job-status-skipped {
|
|
|
|
|
color: var(--warn);
|
|
|
|
|
border-color: rgba(245, 158, 11, 0.35);
|
|
|
|
|
background: var(--warn-subtle);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job-status-na {
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job-actions {
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job-actions .btn {
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-05 01:21:33 +01:00
|
|
|
@container (max-width: 560px) {
|
|
|
|
|
.list-item {
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list-meta {
|
|
|
|
|
min-width: 0;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
fix: cron scheduler reliability, store hardening, and UX improvements (#10776)
* refactor: update cron job wake mode and run mode handling
- Changed default wake mode from 'next-heartbeat' to 'now' in CronJobEditor and related CLI commands.
- Updated cron-tool tests to reflect changes in run mode, introducing 'due' and 'force' options.
- Enhanced cron-tool logic to handle new run modes and ensure compatibility with existing job structures.
- Added new tests for delivery plan consistency and job execution behavior under various conditions.
- Improved normalization functions to handle wake mode and session target casing.
This refactor aims to streamline cron job configurations and enhance the overall user experience with clearer defaults and improved functionality.
* test: enhance cron job functionality and UI
- Added tests to ensure the isolated agent correctly announces the final payload text when delivering messages via Telegram.
- Implemented a new function to pick the last deliverable payload from a list of delivery payloads.
- Enhanced the cron service to maintain legacy "every" jobs while minute cron jobs recompute schedules.
- Updated the cron store migration tests to verify the addition of anchorMs to legacy every schedules.
- Improved the UI for displaying cron job details, including job state and delivery information, with new styles and layout adjustments.
These changes aim to improve the reliability and user experience of the cron job system.
* test: enhance sessions thinking level handling
- Added tests to verify that the correct thinking levels are applied during session spawning.
- Updated the sessions-spawn-tool to include a new parameter for overriding thinking levels.
- Enhanced the UI to support additional thinking levels, including "xhigh" and "full", and improved the handling of current options in dropdowns.
These changes aim to improve the flexibility and accuracy of thinking level configurations in session management.
* feat: enhance session management and cron job functionality
- Introduced passthrough arguments in the test-parallel script to allow for flexible command-line options.
- Updated session handling to hide cron run alias session keys from the sessions list, improving clarity.
- Enhanced the cron service to accurately record job start times and durations, ensuring better tracking of job execution.
- Added tests to verify the correct behavior of the cron service under various conditions, including zero-delay timers.
These changes aim to improve the usability and reliability of session and cron job management.
* feat: implement job running state checks in cron service
- Added functionality to prevent manual job runs if a job is already in progress, enhancing job management.
- Updated the `isJobDue` function to include checks for running jobs, ensuring accurate scheduling.
- Enhanced the `run` function to return a specific reason when a job is already running.
- Introduced a new test case to verify the behavior of forced manual runs during active job execution.
These changes aim to improve the reliability and clarity of cron job execution and management.
* feat: add session ID and key to CronRunLogEntry model
- Introduced `sessionid` and `sessionkey` properties to the `CronRunLogEntry` struct for enhanced tracking of session-related information.
- Updated the initializer and Codable conformance to accommodate the new properties, ensuring proper serialization and deserialization.
These changes aim to improve the granularity of logging and session management within the cron job system.
* fix: improve session display name resolution
- Updated the `resolveSessionDisplayName` function to ensure that both label and displayName are trimmed and default to an empty string if not present.
- Enhanced the logic to prevent returning the key if it matches the label or displayName, improving clarity in session naming.
These changes aim to enhance the accuracy and usability of session display names in the UI.
* perf: skip cron store persist when idle timer tick produces no changes
recomputeNextRuns now returns a boolean indicating whether any job
state was mutated. The idle path in onTimer only persists when the
return value is true, eliminating unnecessary file writes every 60s
for far-future or idle schedules.
* fix: prep for merge - explicit delivery mode migration, docs + changelog (#10776) (thanks @tyler6204)
2026-02-06 18:03:03 -08:00
|
|
|
|
|
|
|
|
.cron-job-actions {
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job {
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
grid-template-areas:
|
|
|
|
|
"main"
|
|
|
|
|
"meta"
|
|
|
|
|
"footer";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cron-job-footer {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: stretch;
|
|
|
|
|
}
|
2026-01-05 01:21:33 +01:00
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* ===========================================
|
2026-01-25 12:29:25 +00:00
|
|
|
Chips - Compact and punchy
|
2026-01-25 11:04:50 +01:00
|
|
|
=========================================== */
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.chip-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
2026-01-25 12:29:25 +00:00
|
|
|
gap: 8px;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chip {
|
2026-01-25 11:04:50 +01:00
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: 500;
|
2025-12-21 00:34:39 +00:00
|
|
|
border: 1px solid var(--border);
|
2026-01-25 11:04:50 +01:00
|
|
|
border-radius: var(--radius-full);
|
2026-01-25 12:29:25 +00:00
|
|
|
padding: 5px 12px;
|
2025-12-21 00:34:39 +00:00
|
|
|
color: var(--muted);
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--secondary);
|
2026-01-25 12:29:25 +00:00
|
|
|
transition:
|
|
|
|
|
border-color var(--duration-fast) var(--ease-out),
|
|
|
|
|
background var(--duration-fast) var(--ease-out),
|
|
|
|
|
transform var(--duration-fast) var(--ease-out);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chip:hover {
|
|
|
|
|
border-color: var(--border-strong);
|
|
|
|
|
transform: translateY(-1px);
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-08 03:43:46 +00:00
|
|
|
.chip input {
|
|
|
|
|
margin-right: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.chip-ok {
|
|
|
|
|
color: var(--ok);
|
2026-01-25 12:29:25 +00:00
|
|
|
border-color: rgba(34, 197, 94, 0.3);
|
|
|
|
|
background: var(--ok-subtle);
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chip-warn {
|
|
|
|
|
color: var(--warn);
|
2026-01-25 12:29:25 +00:00
|
|
|
border-color: rgba(245, 158, 11, 0.3);
|
|
|
|
|
background: var(--warn-subtle);
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
fix: cron scheduler reliability, store hardening, and UX improvements (#10776)
* refactor: update cron job wake mode and run mode handling
- Changed default wake mode from 'next-heartbeat' to 'now' in CronJobEditor and related CLI commands.
- Updated cron-tool tests to reflect changes in run mode, introducing 'due' and 'force' options.
- Enhanced cron-tool logic to handle new run modes and ensure compatibility with existing job structures.
- Added new tests for delivery plan consistency and job execution behavior under various conditions.
- Improved normalization functions to handle wake mode and session target casing.
This refactor aims to streamline cron job configurations and enhance the overall user experience with clearer defaults and improved functionality.
* test: enhance cron job functionality and UI
- Added tests to ensure the isolated agent correctly announces the final payload text when delivering messages via Telegram.
- Implemented a new function to pick the last deliverable payload from a list of delivery payloads.
- Enhanced the cron service to maintain legacy "every" jobs while minute cron jobs recompute schedules.
- Updated the cron store migration tests to verify the addition of anchorMs to legacy every schedules.
- Improved the UI for displaying cron job details, including job state and delivery information, with new styles and layout adjustments.
These changes aim to improve the reliability and user experience of the cron job system.
* test: enhance sessions thinking level handling
- Added tests to verify that the correct thinking levels are applied during session spawning.
- Updated the sessions-spawn-tool to include a new parameter for overriding thinking levels.
- Enhanced the UI to support additional thinking levels, including "xhigh" and "full", and improved the handling of current options in dropdowns.
These changes aim to improve the flexibility and accuracy of thinking level configurations in session management.
* feat: enhance session management and cron job functionality
- Introduced passthrough arguments in the test-parallel script to allow for flexible command-line options.
- Updated session handling to hide cron run alias session keys from the sessions list, improving clarity.
- Enhanced the cron service to accurately record job start times and durations, ensuring better tracking of job execution.
- Added tests to verify the correct behavior of the cron service under various conditions, including zero-delay timers.
These changes aim to improve the usability and reliability of session and cron job management.
* feat: implement job running state checks in cron service
- Added functionality to prevent manual job runs if a job is already in progress, enhancing job management.
- Updated the `isJobDue` function to include checks for running jobs, ensuring accurate scheduling.
- Enhanced the `run` function to return a specific reason when a job is already running.
- Introduced a new test case to verify the behavior of forced manual runs during active job execution.
These changes aim to improve the reliability and clarity of cron job execution and management.
* feat: add session ID and key to CronRunLogEntry model
- Introduced `sessionid` and `sessionkey` properties to the `CronRunLogEntry` struct for enhanced tracking of session-related information.
- Updated the initializer and Codable conformance to accommodate the new properties, ensuring proper serialization and deserialization.
These changes aim to improve the granularity of logging and session management within the cron job system.
* fix: improve session display name resolution
- Updated the `resolveSessionDisplayName` function to ensure that both label and displayName are trimmed and default to an empty string if not present.
- Enhanced the logic to prevent returning the key if it matches the label or displayName, improving clarity in session naming.
These changes aim to enhance the accuracy and usability of session display names in the UI.
* perf: skip cron store persist when idle timer tick produces no changes
recomputeNextRuns now returns a boolean indicating whether any job
state was mutated. The idle path in onTimer only persists when the
return value is true, eliminating unnecessary file writes every 60s
for far-future or idle schedules.
* fix: prep for merge - explicit delivery mode migration, docs + changelog (#10776) (thanks @tyler6204)
2026-02-06 18:03:03 -08:00
|
|
|
.chip-danger {
|
|
|
|
|
color: var(--danger);
|
|
|
|
|
border-color: rgba(239, 68, 68, 0.3);
|
|
|
|
|
background: var(--danger-subtle);
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* ===========================================
|
|
|
|
|
Tables
|
|
|
|
|
=========================================== */
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.table {
|
|
|
|
|
display: grid;
|
2026-01-25 11:04:50 +01:00
|
|
|
gap: 6px;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table-head,
|
|
|
|
|
.table-row {
|
|
|
|
|
display: grid;
|
2026-01-16 22:33:38 +00:00
|
|
|
grid-template-columns: 1.4fr 1fr 0.8fr 0.7fr 0.8fr 0.8fr 0.8fr 0.8fr 0.6fr;
|
2025-12-21 00:34:39 +00:00
|
|
|
gap: 12px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table-head {
|
2026-01-25 11:04:50 +01:00
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: 500;
|
2025-12-21 00:34:39 +00:00
|
|
|
color: var(--muted);
|
2026-01-25 11:04:50 +01:00
|
|
|
padding: 0 12px;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table-row {
|
|
|
|
|
border: 1px solid var(--border);
|
2026-01-25 11:04:50 +01:00
|
|
|
padding: 10px 12px;
|
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
background: var(--card);
|
|
|
|
|
transition: border-color var(--duration-fast) ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table-row:hover {
|
|
|
|
|
border-color: var(--border-strong);
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-08 11:05:40 +01:00
|
|
|
.session-link {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: var(--accent);
|
2026-01-25 11:04:50 +01:00
|
|
|
font-weight: 500;
|
2026-01-08 11:05:40 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.session-link:hover {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
|
fix: cron scheduler reliability, store hardening, and UX improvements (#10776)
* refactor: update cron job wake mode and run mode handling
- Changed default wake mode from 'next-heartbeat' to 'now' in CronJobEditor and related CLI commands.
- Updated cron-tool tests to reflect changes in run mode, introducing 'due' and 'force' options.
- Enhanced cron-tool logic to handle new run modes and ensure compatibility with existing job structures.
- Added new tests for delivery plan consistency and job execution behavior under various conditions.
- Improved normalization functions to handle wake mode and session target casing.
This refactor aims to streamline cron job configurations and enhance the overall user experience with clearer defaults and improved functionality.
* test: enhance cron job functionality and UI
- Added tests to ensure the isolated agent correctly announces the final payload text when delivering messages via Telegram.
- Implemented a new function to pick the last deliverable payload from a list of delivery payloads.
- Enhanced the cron service to maintain legacy "every" jobs while minute cron jobs recompute schedules.
- Updated the cron store migration tests to verify the addition of anchorMs to legacy every schedules.
- Improved the UI for displaying cron job details, including job state and delivery information, with new styles and layout adjustments.
These changes aim to improve the reliability and user experience of the cron job system.
* test: enhance sessions thinking level handling
- Added tests to verify that the correct thinking levels are applied during session spawning.
- Updated the sessions-spawn-tool to include a new parameter for overriding thinking levels.
- Enhanced the UI to support additional thinking levels, including "xhigh" and "full", and improved the handling of current options in dropdowns.
These changes aim to improve the flexibility and accuracy of thinking level configurations in session management.
* feat: enhance session management and cron job functionality
- Introduced passthrough arguments in the test-parallel script to allow for flexible command-line options.
- Updated session handling to hide cron run alias session keys from the sessions list, improving clarity.
- Enhanced the cron service to accurately record job start times and durations, ensuring better tracking of job execution.
- Added tests to verify the correct behavior of the cron service under various conditions, including zero-delay timers.
These changes aim to improve the usability and reliability of session and cron job management.
* feat: implement job running state checks in cron service
- Added functionality to prevent manual job runs if a job is already in progress, enhancing job management.
- Updated the `isJobDue` function to include checks for running jobs, ensuring accurate scheduling.
- Enhanced the `run` function to return a specific reason when a job is already running.
- Introduced a new test case to verify the behavior of forced manual runs during active job execution.
These changes aim to improve the reliability and clarity of cron job execution and management.
* feat: add session ID and key to CronRunLogEntry model
- Introduced `sessionid` and `sessionkey` properties to the `CronRunLogEntry` struct for enhanced tracking of session-related information.
- Updated the initializer and Codable conformance to accommodate the new properties, ensuring proper serialization and deserialization.
These changes aim to improve the granularity of logging and session management within the cron job system.
* fix: improve session display name resolution
- Updated the `resolveSessionDisplayName` function to ensure that both label and displayName are trimmed and default to an empty string if not present.
- Enhanced the logic to prevent returning the key if it matches the label or displayName, improving clarity in session naming.
These changes aim to enhance the accuracy and usability of session display names in the UI.
* perf: skip cron store persist when idle timer tick produces no changes
recomputeNextRuns now returns a boolean indicating whether any job
state was mutated. The idle path in onTimer only persists when the
return value is true, eliminating unnecessary file writes every 60s
for far-future or idle schedules.
* fix: prep for merge - explicit delivery mode migration, docs + changelog (#10776) (thanks @tyler6204)
2026-02-06 18:03:03 -08:00
|
|
|
.session-key-cell {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 4px;
|
|
|
|
|
min-width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.session-key-cell .session-link,
|
|
|
|
|
.session-key-display-name {
|
|
|
|
|
overflow-wrap: anywhere;
|
|
|
|
|
word-break: break-word;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.session-key-display-name {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* ===========================================
|
|
|
|
|
Log Stream
|
|
|
|
|
=========================================== */
|
|
|
|
|
|
2026-01-08 03:43:46 +00:00
|
|
|
.log-stream {
|
|
|
|
|
border: 1px solid var(--border);
|
2026-01-25 11:04:50 +01:00
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
background: var(--card);
|
|
|
|
|
max-height: 500px;
|
2026-01-08 03:43:46 +00:00
|
|
|
overflow: auto;
|
|
|
|
|
container-type: inline-size;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.log-row {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 90px 70px minmax(140px, 200px) minmax(0, 1fr);
|
|
|
|
|
gap: 12px;
|
|
|
|
|
align-items: start;
|
2026-01-25 11:04:50 +01:00
|
|
|
padding: 8px 12px;
|
2026-01-08 03:43:46 +00:00
|
|
|
border-bottom: 1px solid var(--border);
|
|
|
|
|
font-size: 12px;
|
2026-01-25 11:04:50 +01:00
|
|
|
transition: background var(--duration-fast) ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.log-row:hover {
|
|
|
|
|
background: var(--bg-hover);
|
2026-01-08 03:43:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.log-row:last-child {
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.log-time {
|
|
|
|
|
color: var(--muted);
|
2026-01-25 11:04:50 +01:00
|
|
|
font-family: var(--mono);
|
2026-01-08 03:43:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.log-level {
|
2026-01-25 11:04:50 +01:00
|
|
|
font-size: 11px;
|
|
|
|
|
font-weight: 500;
|
2026-01-08 03:43:46 +00:00
|
|
|
border: 1px solid var(--border);
|
2026-01-25 11:04:50 +01:00
|
|
|
border-radius: var(--radius-sm);
|
2026-01-08 03:43:46 +00:00
|
|
|
padding: 2px 6px;
|
|
|
|
|
width: fit-content;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.log-level.trace,
|
|
|
|
|
.log-level.debug {
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.log-level.info {
|
|
|
|
|
color: var(--info);
|
2026-01-25 11:04:50 +01:00
|
|
|
border-color: rgba(59, 130, 246, 0.3);
|
2026-01-08 03:43:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.log-level.warn {
|
|
|
|
|
color: var(--warn);
|
2026-01-25 11:04:50 +01:00
|
|
|
border-color: var(--warn-subtle);
|
2026-01-08 03:43:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.log-level.error,
|
|
|
|
|
.log-level.fatal {
|
|
|
|
|
color: var(--danger);
|
2026-01-25 11:04:50 +01:00
|
|
|
border-color: var(--danger-subtle);
|
2026-01-08 03:43:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.log-chip.trace,
|
|
|
|
|
.log-chip.debug {
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.log-chip.info {
|
|
|
|
|
color: var(--info);
|
2026-01-25 11:04:50 +01:00
|
|
|
border-color: rgba(59, 130, 246, 0.3);
|
2026-01-08 03:43:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.log-chip.warn {
|
|
|
|
|
color: var(--warn);
|
2026-01-25 11:04:50 +01:00
|
|
|
border-color: var(--warn-subtle);
|
2026-01-08 03:43:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.log-chip.error,
|
|
|
|
|
.log-chip.fatal {
|
|
|
|
|
color: var(--danger);
|
2026-01-25 11:04:50 +01:00
|
|
|
border-color: var(--danger-subtle);
|
2026-01-08 03:43:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.log-subsystem {
|
|
|
|
|
color: var(--muted);
|
2026-01-25 11:04:50 +01:00
|
|
|
font-family: var(--mono);
|
2026-01-08 03:43:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.log-message {
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
word-break: break-word;
|
2026-01-25 11:04:50 +01:00
|
|
|
font-family: var(--mono);
|
2026-01-08 03:43:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@container (max-width: 620px) {
|
|
|
|
|
.log-row {
|
|
|
|
|
grid-template-columns: 70px 60px minmax(0, 1fr);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.log-subsystem {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* ===========================================
|
|
|
|
|
Chat
|
|
|
|
|
=========================================== */
|
|
|
|
|
|
2026-01-05 00:15:13 +00:00
|
|
|
.chat {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
min-height: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.shell--chat .chat {
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
2025-12-30 22:05:17 +01:00
|
|
|
.chat-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: flex-end;
|
2026-01-25 11:04:50 +01:00
|
|
|
gap: 16px;
|
2025-12-30 22:05:17 +01:00
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-header__left {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
min-width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-header__right {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
2026-01-25 11:04:50 +01:00
|
|
|
gap: 8px;
|
2025-12-30 22:05:17 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-session {
|
|
|
|
|
min-width: 240px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-thread {
|
2026-01-25 11:04:50 +01:00
|
|
|
margin-top: 16px;
|
2025-12-30 22:05:17 +01:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 12px;
|
2026-01-05 00:15:13 +00:00
|
|
|
flex: 1;
|
2026-01-25 11:04:50 +01:00
|
|
|
min-height: 0;
|
|
|
|
|
overflow-y: auto;
|
2026-01-08 16:21:21 +05:30
|
|
|
overflow-x: hidden;
|
2026-01-25 11:04:50 +01:00
|
|
|
padding: 16px 12px;
|
2025-12-21 00:34:39 +00:00
|
|
|
min-width: 0;
|
2026-01-08 16:21:21 +05:30
|
|
|
border-radius: 0;
|
|
|
|
|
border: none;
|
|
|
|
|
background: transparent;
|
2025-12-30 22:05:17 +01:00
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* Chat queue */
|
2026-01-09 01:18:38 +01:00
|
|
|
.chat-queue {
|
|
|
|
|
margin-top: 12px;
|
2026-01-25 11:04:50 +01:00
|
|
|
padding: 12px;
|
|
|
|
|
border-radius: var(--radius-lg);
|
2026-01-09 01:18:38 +01:00
|
|
|
border: 1px solid var(--border);
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--card);
|
2026-01-09 01:18:38 +01:00
|
|
|
display: grid;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-queue__title {
|
2026-01-25 11:04:50 +01:00
|
|
|
font-family: var(--mono);
|
2026-01-09 01:18:38 +01:00
|
|
|
font-size: 12px;
|
2026-01-25 11:04:50 +01:00
|
|
|
font-weight: 500;
|
2026-01-09 01:18:38 +01:00
|
|
|
color: var(--muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-queue__list {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-queue__item {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
|
|
|
align-items: start;
|
2026-01-25 11:04:50 +01:00
|
|
|
gap: 12px;
|
|
|
|
|
padding: 10px 12px;
|
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
border: 1px dashed var(--border-strong);
|
|
|
|
|
background: var(--secondary);
|
2026-01-09 01:18:38 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-queue__text {
|
|
|
|
|
color: var(--chat-text);
|
|
|
|
|
font-size: 13px;
|
2026-01-25 11:04:50 +01:00
|
|
|
line-height: 1.45;
|
2026-01-09 01:18:38 +01:00
|
|
|
white-space: pre-wrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
display: -webkit-box;
|
2026-02-02 21:31:17 -05:00
|
|
|
line-clamp: 3;
|
2026-01-09 01:18:38 +01:00
|
|
|
-webkit-line-clamp: 3;
|
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-queue__remove {
|
|
|
|
|
align-self: start;
|
|
|
|
|
padding: 4px 10px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
}
|
|
|
|
|
|
2026-02-03 21:53:50 -08:00
|
|
|
/* New messages indicator */
|
|
|
|
|
.chat-new-messages {
|
|
|
|
|
align-self: center;
|
|
|
|
|
margin: 8px auto 0;
|
|
|
|
|
border-radius: 999px;
|
|
|
|
|
padding: 6px 12px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* Chat lines */
|
2025-12-30 22:05:17 +01:00
|
|
|
.chat-line {
|
|
|
|
|
display: flex;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
2025-12-30 22:05:17 +01:00
|
|
|
.chat-line.user {
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-line.assistant,
|
|
|
|
|
.chat-line.other {
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-msg {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 6px;
|
2026-01-25 11:04:50 +01:00
|
|
|
max-width: min(700px, 82%);
|
2025-12-22 19:01:58 +01:00
|
|
|
}
|
|
|
|
|
|
2025-12-30 22:05:17 +01:00
|
|
|
.chat-line.user .chat-msg {
|
|
|
|
|
justify-items: end;
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* Chat bubbles */
|
2025-12-30 22:05:17 +01:00
|
|
|
.chat-bubble {
|
2026-01-25 11:04:50 +01:00
|
|
|
border: 1px solid transparent;
|
|
|
|
|
background: var(--card);
|
|
|
|
|
border-radius: var(--radius-lg);
|
|
|
|
|
padding: 10px 14px;
|
2025-12-21 00:34:39 +00:00
|
|
|
min-width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2025-12-30 22:05:17 +01:00
|
|
|
:root[data-theme="light"] .chat-bubble {
|
2026-01-25 11:04:50 +01:00
|
|
|
border-color: var(--border);
|
|
|
|
|
background: var(--bg);
|
2025-12-30 22:05:17 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-line.user .chat-bubble {
|
2026-01-25 11:04:50 +01:00
|
|
|
border-color: transparent;
|
|
|
|
|
background: var(--accent-subtle);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:root[data-theme="light"] .chat-line.user .chat-bubble {
|
|
|
|
|
border-color: rgba(234, 88, 12, 0.2);
|
|
|
|
|
background: rgba(251, 146, 60, 0.12);
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
2025-12-30 22:05:17 +01:00
|
|
|
.chat-line.assistant .chat-bubble {
|
2026-01-25 11:04:50 +01:00
|
|
|
border-color: transparent;
|
|
|
|
|
background: var(--secondary);
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
2025-12-30 22:05:17 +01:00
|
|
|
:root[data-theme="light"] .chat-line.assistant .chat-bubble {
|
2026-01-25 11:04:50 +01:00
|
|
|
border-color: var(--border);
|
|
|
|
|
background: var(--bg-muted);
|
2025-12-30 22:05:17 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes chatStreamPulse {
|
2026-01-31 21:13:13 +09:00
|
|
|
0%,
|
|
|
|
|
100% {
|
2026-01-25 11:04:50 +01:00
|
|
|
border-color: var(--border);
|
2025-12-30 22:05:17 +01:00
|
|
|
}
|
2026-01-25 11:04:50 +01:00
|
|
|
50% {
|
|
|
|
|
border-color: var(--accent);
|
2025-12-30 22:05:17 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-bubble.streaming {
|
2026-01-25 11:04:50 +01:00
|
|
|
animation: chatStreamPulse 1.5s ease-in-out infinite;
|
2025-12-30 22:05:17 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
|
.chat-bubble.streaming {
|
|
|
|
|
animation: none;
|
2026-01-25 11:04:50 +01:00
|
|
|
border-color: var(--accent);
|
2025-12-30 22:05:17 +01:00
|
|
|
}
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* Reading indicator */
|
2026-01-05 16:16:27 +00:00
|
|
|
.chat-bubble.chat-reading-indicator {
|
|
|
|
|
width: fit-content;
|
2026-01-25 11:04:50 +01:00
|
|
|
padding: 10px 16px;
|
2026-01-05 16:16:27 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-reading-indicator__dots {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
2026-01-25 11:04:50 +01:00
|
|
|
gap: 4px;
|
|
|
|
|
height: 12px;
|
2026-01-05 16:16:27 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-reading-indicator__dots > span {
|
2026-01-05 17:40:10 +00:00
|
|
|
display: inline-block;
|
2026-01-05 16:16:27 +00:00
|
|
|
width: 6px;
|
|
|
|
|
height: 6px;
|
2026-01-25 11:04:50 +01:00
|
|
|
border-radius: var(--radius-full);
|
|
|
|
|
background: var(--muted);
|
|
|
|
|
opacity: 0.6;
|
2026-01-05 16:16:27 +00:00
|
|
|
transform: translateY(0);
|
2026-01-25 11:04:50 +01:00
|
|
|
animation: chatReadingDot 1.2s ease-in-out infinite;
|
2026-01-05 17:40:10 +00:00
|
|
|
will-change: transform, opacity;
|
2026-01-05 16:16:27 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-reading-indicator__dots > span:nth-child(2) {
|
2026-01-25 11:04:50 +01:00
|
|
|
animation-delay: 0.15s;
|
2026-01-05 16:16:27 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-reading-indicator__dots > span:nth-child(3) {
|
2026-01-25 11:04:50 +01:00
|
|
|
animation-delay: 0.3s;
|
2026-01-05 16:16:27 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes chatReadingDot {
|
2026-01-31 21:13:13 +09:00
|
|
|
0%,
|
|
|
|
|
80%,
|
|
|
|
|
100% {
|
2026-01-25 11:04:50 +01:00
|
|
|
opacity: 0.4;
|
|
|
|
|
transform: translateY(0);
|
2026-01-05 16:16:27 +00:00
|
|
|
}
|
|
|
|
|
40% {
|
2026-01-05 17:40:10 +00:00
|
|
|
opacity: 1;
|
2026-01-25 11:04:50 +01:00
|
|
|
transform: translateY(-3px);
|
2026-01-05 16:16:27 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
|
.chat-reading-indicator__dots > span {
|
|
|
|
|
animation: none;
|
2026-01-25 11:04:50 +01:00
|
|
|
opacity: 0.6;
|
2026-01-05 16:16:27 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* Chat text */
|
2025-12-30 22:05:17 +01:00
|
|
|
.chat-text {
|
2025-12-21 00:34:39 +00:00
|
|
|
overflow-wrap: anywhere;
|
|
|
|
|
word-break: break-word;
|
2026-01-01 21:09:28 +01:00
|
|
|
color: var(--chat-text);
|
2026-01-04 21:51:26 +01:00
|
|
|
line-height: 1.5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-text :where(p, ul, ol, pre, blockquote, table) {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-text :where(p + p, p + ul, p + ol, p + pre, p + blockquote, p + table) {
|
|
|
|
|
margin-top: 0.75em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-text :where(ul, ol) {
|
2026-01-25 11:04:50 +01:00
|
|
|
padding-left: 1.2em;
|
2026-01-04 21:51:26 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-text :where(li + li) {
|
|
|
|
|
margin-top: 0.25em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-text :where(a) {
|
|
|
|
|
color: var(--accent);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-text :where(a:hover) {
|
2026-01-25 11:04:50 +01:00
|
|
|
text-decoration: underline;
|
2026-01-04 21:51:26 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-text :where(blockquote) {
|
2026-01-25 11:04:50 +01:00
|
|
|
border-left: 2px solid var(--border-strong);
|
2026-01-04 21:51:26 +01:00
|
|
|
padding-left: 12px;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-text :where(hr) {
|
|
|
|
|
border: 0;
|
|
|
|
|
border-top: 1px solid var(--border);
|
2026-01-25 11:04:50 +01:00
|
|
|
margin: 1em 0;
|
2026-01-04 21:51:26 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-text :where(code) {
|
2026-01-25 11:04:50 +01:00
|
|
|
font-family: var(--mono);
|
|
|
|
|
font-size: 0.9em;
|
2026-01-04 21:51:26 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-text :where(:not(pre) > code) {
|
|
|
|
|
padding: 0.15em 0.35em;
|
2026-01-25 11:04:50 +01:00
|
|
|
border-radius: var(--radius-sm);
|
2026-01-04 21:51:26 +01:00
|
|
|
border: 1px solid var(--border);
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--secondary);
|
2026-01-04 21:51:26 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:root[data-theme="light"] .chat-text :where(:not(pre) > code) {
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--bg-muted);
|
2026-01-04 21:51:26 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-text :where(pre) {
|
|
|
|
|
margin-top: 0.75em;
|
|
|
|
|
padding: 10px 12px;
|
2026-01-25 11:04:50 +01:00
|
|
|
border-radius: var(--radius-md);
|
2026-01-04 21:51:26 +01:00
|
|
|
border: 1px solid var(--border);
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--secondary);
|
2026-01-04 21:51:26 +01:00
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:root[data-theme="light"] .chat-text :where(pre) {
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--bg-muted);
|
2026-01-04 21:51:26 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-text :where(pre code) {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
white-space: pre;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-text :where(table) {
|
|
|
|
|
margin-top: 0.75em;
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
width: 100%;
|
2026-01-25 11:04:50 +01:00
|
|
|
font-size: 13px;
|
2026-01-04 21:51:26 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-text :where(th, td) {
|
|
|
|
|
border: 1px solid var(--border);
|
2026-01-25 11:04:50 +01:00
|
|
|
padding: 6px 10px;
|
2026-01-04 21:51:26 +01:00
|
|
|
vertical-align: top;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-text :where(th) {
|
2026-01-25 11:04:50 +01:00
|
|
|
font-family: var(--mono);
|
|
|
|
|
font-weight: 500;
|
2026-01-04 21:51:26 +01:00
|
|
|
color: var(--muted);
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--secondary);
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* Tool cards */
|
2026-01-03 13:17:58 +01:00
|
|
|
.chat-tool-card {
|
|
|
|
|
margin-top: 8px;
|
2026-01-25 11:04:50 +01:00
|
|
|
padding: 10px 12px;
|
|
|
|
|
border-radius: var(--radius-md);
|
2026-01-03 13:17:58 +01:00
|
|
|
border: 1px solid var(--border);
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--secondary);
|
2026-01-03 13:17:58 +01:00
|
|
|
display: grid;
|
|
|
|
|
gap: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:root[data-theme="light"] .chat-tool-card {
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--bg-muted);
|
2026-01-03 13:17:58 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-tool-card__title {
|
2026-01-25 11:04:50 +01:00
|
|
|
font-family: var(--mono);
|
2026-01-03 13:17:58 +01:00
|
|
|
font-size: 12px;
|
2026-01-25 11:04:50 +01:00
|
|
|
font-weight: 500;
|
|
|
|
|
color: var(--text);
|
2026-01-03 13:17:58 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-tool-card__detail {
|
2026-01-25 11:04:50 +01:00
|
|
|
font-family: var(--mono);
|
2026-01-03 13:17:58 +01:00
|
|
|
font-size: 11px;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-08 04:32:48 +00:00
|
|
|
.chat-tool-card__details {
|
|
|
|
|
margin-top: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-tool-card__summary {
|
2026-01-25 11:04:50 +01:00
|
|
|
font-family: var(--mono);
|
2026-01-08 04:32:48 +00:00
|
|
|
font-size: 11px;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
list-style: none;
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-tool-card__summary::-webkit-details-marker {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-tool-card__summary-meta {
|
|
|
|
|
color: var(--muted);
|
2026-01-25 11:04:50 +01:00
|
|
|
opacity: 0.7;
|
2026-01-08 04:32:48 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-tool-card__details[open] .chat-tool-card__summary {
|
2026-01-25 11:04:50 +01:00
|
|
|
color: var(--text);
|
2026-01-08 04:32:48 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-03 13:17:58 +01:00
|
|
|
.chat-tool-card__output {
|
2026-01-25 11:04:50 +01:00
|
|
|
margin-top: 8px;
|
|
|
|
|
font-family: var(--mono);
|
2026-01-03 13:17:58 +01:00
|
|
|
font-size: 11px;
|
2026-01-25 11:04:50 +01:00
|
|
|
line-height: 1.5;
|
2026-01-03 13:17:58 +01:00
|
|
|
white-space: pre-wrap;
|
|
|
|
|
color: var(--chat-text);
|
2026-01-25 11:04:50 +01:00
|
|
|
padding: 8px 10px;
|
|
|
|
|
border-radius: var(--radius-md);
|
2026-01-03 13:17:58 +01:00
|
|
|
border: 1px solid var(--border);
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--card);
|
2026-01-03 13:17:58 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:root[data-theme="light"] .chat-tool-card__output {
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--bg);
|
2026-01-03 13:17:58 +01:00
|
|
|
}
|
|
|
|
|
|
2025-12-30 22:05:17 +01:00
|
|
|
.chat-stamp {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-line.user .chat-stamp {
|
|
|
|
|
text-align: right;
|
2025-12-21 00:34:39 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* Chat compose */
|
2025-12-22 19:01:58 +01:00
|
|
|
.chat-compose {
|
2025-12-30 22:05:17 +01:00
|
|
|
margin-top: 12px;
|
2026-01-25 22:46:09 +03:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
2025-12-30 22:05:17 +01:00
|
|
|
gap: 10px;
|
2025-12-22 19:01:58 +01:00
|
|
|
}
|
|
|
|
|
|
2026-01-05 00:15:13 +00:00
|
|
|
.shell--chat .chat-compose {
|
|
|
|
|
position: sticky;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
z-index: 5;
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
padding-top: 12px;
|
2026-01-25 11:04:50 +01:00
|
|
|
background: linear-gradient(180deg, transparent 0%, var(--bg) 40%);
|
2026-01-05 00:15:13 +00:00
|
|
|
}
|
|
|
|
|
|
2026-01-06 08:59:05 +01:00
|
|
|
.shell--chat-focus .chat-compose {
|
2026-01-06 19:10:06 +00:00
|
|
|
bottom: calc(var(--shell-pad) + 8px);
|
2026-01-25 11:04:50 +01:00
|
|
|
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
|
|
|
|
|
border-bottom-left-radius: var(--radius-lg);
|
|
|
|
|
border-bottom-right-radius: var(--radius-lg);
|
2026-01-06 08:59:05 +01:00
|
|
|
}
|
|
|
|
|
|
2025-12-22 19:01:58 +01:00
|
|
|
.chat-compose__field {
|
|
|
|
|
gap: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-compose__field textarea {
|
2025-12-30 22:05:17 +01:00
|
|
|
min-height: 72px;
|
2026-01-25 11:04:50 +01:00
|
|
|
padding: 10px 14px;
|
|
|
|
|
border-radius: var(--radius-lg);
|
2025-12-30 22:05:17 +01:00
|
|
|
resize: vertical;
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
font-family: var(--font-body);
|
2026-01-25 11:04:50 +01:00
|
|
|
line-height: 1.5;
|
|
|
|
|
border: 1px solid var(--input);
|
|
|
|
|
background: var(--card);
|
|
|
|
|
box-shadow: inset 0 1px 0 var(--card-highlight);
|
|
|
|
|
transition:
|
|
|
|
|
border-color var(--duration-fast) ease,
|
|
|
|
|
box-shadow var(--duration-fast) ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-compose__field textarea:focus {
|
|
|
|
|
border-color: var(--ring);
|
|
|
|
|
box-shadow: var(--focus-ring);
|
2025-12-30 22:05:17 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-compose__field textarea:disabled {
|
2026-01-25 11:04:50 +01:00
|
|
|
opacity: 0.5;
|
2025-12-30 22:05:17 +01:00
|
|
|
cursor: not-allowed;
|
2025-12-22 19:01:58 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-compose__actions {
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
align-self: end;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 900px) {
|
2025-12-30 22:05:17 +01:00
|
|
|
.chat-session {
|
2026-01-25 11:04:50 +01:00
|
|
|
min-width: 180px;
|
2025-12-30 22:05:17 +01:00
|
|
|
}
|
|
|
|
|
|
2025-12-22 19:01:58 +01:00
|
|
|
.chat-compose {
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* ===========================================
|
|
|
|
|
QR Code
|
|
|
|
|
=========================================== */
|
|
|
|
|
|
2025-12-21 00:34:39 +00:00
|
|
|
.qr-wrap {
|
2026-01-25 11:04:50 +01:00
|
|
|
margin-top: 16px;
|
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
background: var(--card);
|
|
|
|
|
border: 1px dashed var(--border-strong);
|
|
|
|
|
padding: 16px;
|
2025-12-21 00:34:39 +00:00
|
|
|
display: inline-flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.qr-wrap img {
|
2026-01-25 11:04:50 +01:00
|
|
|
width: 160px;
|
|
|
|
|
height: 160px;
|
|
|
|
|
border-radius: var(--radius-sm);
|
2025-12-21 00:34:39 +00:00
|
|
|
image-rendering: pixelated;
|
|
|
|
|
}
|
2026-01-20 12:03:18 +00:00
|
|
|
|
2026-01-25 11:04:50 +01:00
|
|
|
/* ===========================================
|
|
|
|
|
Exec Approval Modal
|
|
|
|
|
=========================================== */
|
|
|
|
|
|
2026-01-20 12:03:18 +00:00
|
|
|
.exec-approval-overlay {
|
|
|
|
|
position: fixed;
|
|
|
|
|
inset: 0;
|
2026-01-25 11:04:50 +01:00
|
|
|
background: rgba(0, 0, 0, 0.8);
|
|
|
|
|
backdrop-filter: blur(4px);
|
2026-01-20 12:03:18 +00:00
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
padding: 24px;
|
|
|
|
|
z-index: 200;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.exec-approval-card {
|
2026-01-25 11:04:50 +01:00
|
|
|
width: min(540px, 100%);
|
|
|
|
|
background: var(--card);
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
border-radius: var(--radius-lg);
|
2026-01-20 12:03:18 +00:00
|
|
|
padding: 20px;
|
2026-01-25 11:04:50 +01:00
|
|
|
animation: scale-in 0.2s var(--ease-out);
|
2026-01-20 12:03:18 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.exec-approval-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
2026-01-25 11:04:50 +01:00
|
|
|
gap: 16px;
|
2026-01-20 12:03:18 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.exec-approval-title {
|
|
|
|
|
font-size: 14px;
|
2026-01-25 11:04:50 +01:00
|
|
|
font-weight: 600;
|
2026-01-20 12:03:18 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.exec-approval-sub {
|
|
|
|
|
color: var(--muted);
|
2026-01-25 11:04:50 +01:00
|
|
|
font-size: 13px;
|
|
|
|
|
margin-top: 4px;
|
2026-01-20 12:03:18 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.exec-approval-queue {
|
|
|
|
|
font-size: 11px;
|
2026-01-25 11:04:50 +01:00
|
|
|
font-weight: 500;
|
2026-01-20 12:03:18 +00:00
|
|
|
color: var(--muted);
|
|
|
|
|
border: 1px solid var(--border);
|
2026-01-25 11:04:50 +01:00
|
|
|
border-radius: var(--radius-full);
|
2026-01-20 12:03:18 +00:00
|
|
|
padding: 4px 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.exec-approval-command {
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
padding: 10px 12px;
|
2026-01-25 11:04:50 +01:00
|
|
|
background: var(--secondary);
|
2026-01-20 12:03:18 +00:00
|
|
|
border: 1px solid var(--border);
|
2026-01-25 11:04:50 +01:00
|
|
|
border-radius: var(--radius-md);
|
2026-01-20 12:03:18 +00:00
|
|
|
word-break: break-word;
|
|
|
|
|
white-space: pre-wrap;
|
2026-01-25 11:04:50 +01:00
|
|
|
font-family: var(--mono);
|
|
|
|
|
font-size: 13px;
|
2026-01-20 12:03:18 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.exec-approval-meta {
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 6px;
|
2026-01-25 11:04:50 +01:00
|
|
|
font-size: 13px;
|
2026-01-20 12:03:18 +00:00
|
|
|
color: var(--muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.exec-approval-meta-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.exec-approval-meta-row span:last-child {
|
|
|
|
|
color: var(--text);
|
|
|
|
|
font-family: var(--mono);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.exec-approval-error {
|
|
|
|
|
margin-top: 10px;
|
2026-01-25 11:04:50 +01:00
|
|
|
font-size: 13px;
|
2026-01-20 12:03:18 +00:00
|
|
|
color: var(--danger);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.exec-approval-actions {
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
2026-01-25 11:04:50 +01:00
|
|
|
gap: 8px;
|
2026-01-20 12:03:18 +00:00
|
|
|
}
|
2026-02-02 21:31:17 -05:00
|
|
|
|
|
|
|
|
/* ===========================================
|
|
|
|
|
Agents
|
|
|
|
|
=========================================== */
|
|
|
|
|
|
|
|
|
|
.agents-layout {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
|
|
|
|
|
gap: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agents-sidebar {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
align-self: start;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agents-main {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-list {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-row {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: left;
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
background: var(--card);
|
|
|
|
|
padding: 10px 12px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: border-color var(--duration-fast) ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-row:hover {
|
|
|
|
|
border-color: var(--border-strong);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-row.active {
|
|
|
|
|
border-color: var(--accent);
|
|
|
|
|
box-shadow: var(--focus-ring);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-avatar {
|
|
|
|
|
width: 32px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background: var(--secondary);
|
|
|
|
|
display: grid;
|
|
|
|
|
place-items: center;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-avatar--lg {
|
|
|
|
|
width: 48px;
|
|
|
|
|
height: 48px;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-info {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 2px;
|
|
|
|
|
min-width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-title {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-sub {
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-pill {
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
border-radius: var(--radius-full);
|
|
|
|
|
padding: 4px 10px;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
background: var(--secondary);
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
letter-spacing: 0.04em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-pill.warn {
|
|
|
|
|
color: var(--warn);
|
|
|
|
|
border-color: var(--warn);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-header {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
|
|
|
gap: 16px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-header-main {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 16px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-header-meta {
|
|
|
|
|
display: grid;
|
|
|
|
|
justify-items: end;
|
|
|
|
|
gap: 6px;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-tabs {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-tab {
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
border-radius: var(--radius-full);
|
|
|
|
|
padding: 6px 14px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
background: var(--secondary);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition:
|
|
|
|
|
border-color var(--duration-fast) ease,
|
|
|
|
|
background var(--duration-fast) ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-tab.active {
|
|
|
|
|
background: var(--accent);
|
|
|
|
|
border-color: var(--accent);
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agents-overview-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 14px;
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-kv {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 6px;
|
2026-02-04 09:21:41 -06:00
|
|
|
min-width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-kv > div {
|
|
|
|
|
min-width: 0;
|
|
|
|
|
overflow-wrap: anywhere;
|
|
|
|
|
word-break: break-word;
|
2026-02-02 21:31:17 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-kv-sub {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-model-select {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-model-meta {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 6px;
|
|
|
|
|
min-width: 200px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-files-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
|
|
|
|
|
gap: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-files-list {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-file-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: left;
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
background: var(--card);
|
|
|
|
|
padding: 10px 12px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: border-color var(--duration-fast) ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-file-row:hover {
|
|
|
|
|
border-color: var(--border-strong);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-file-row.active {
|
|
|
|
|
border-color: var(--accent);
|
|
|
|
|
box-shadow: var(--focus-ring);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-file-name {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-file-meta {
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-files-editor {
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
border-radius: var(--radius-lg);
|
|
|
|
|
padding: 16px;
|
|
|
|
|
background: var(--card);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-file-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-file-title {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-file-sub {
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-file-actions {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-tools-meta {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-tools-buttons {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
margin-top: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-tools-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-tools-section {
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
padding: 10px;
|
|
|
|
|
background: var(--bg-elevated);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-tools-header {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-tools-list {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 8px 12px;
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-tool-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
padding: 6px 8px;
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
background: var(--card);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-tool-title {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-tool-sub {
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
margin-top: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-skills-groups {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-skills-group {
|
|
|
|
|
display: grid;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-skills-group summary {
|
|
|
|
|
list-style: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-skills-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
letter-spacing: 0.04em;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-skills-header > span:last-child {
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-skills-group summary::-webkit-details-marker {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-skills-group summary::marker {
|
|
|
|
|
content: "";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-skills-header::after {
|
|
|
|
|
content: "▸";
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
transition: transform var(--duration-fast) ease;
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-skills-group[open] .agent-skills-header::after {
|
|
|
|
|
transform: rotate(90deg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-skill-row {
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
gap: 18px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-skill-row .list-meta {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
min-width: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.skills-grid {
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@container (min-width: 900px) {
|
|
|
|
|
.skills-grid {
|
|
|
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 980px) {
|
|
|
|
|
.agents-layout {
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-header {
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-header-meta {
|
|
|
|
|
justify-items: start;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-files-grid {
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agent-tools-list {
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
}
|
|
|
|
|
}
|