mirror of
https://github.com/moltbot/moltbot.git
synced 2026-03-08 06:54:24 +00:00
d90cac990c
* 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)
2083 lines
37 KiB
CSS
2083 lines
37 KiB
CSS
@import "./chat.css";
|
|
|
|
/* ===========================================
|
|
Cards - Refined with depth
|
|
=========================================== */
|
|
|
|
.card {
|
|
border: 1px solid var(--border);
|
|
background: var(--card);
|
|
border-radius: var(--radius-lg);
|
|
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);
|
|
box-shadow:
|
|
var(--shadow-sm),
|
|
inset 0 1px 0 var(--card-highlight);
|
|
}
|
|
|
|
.card:hover {
|
|
border-color: var(--border-strong);
|
|
box-shadow:
|
|
var(--shadow-md),
|
|
inset 0 1px 0 var(--card-highlight);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.card-sub {
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
margin-top: 6px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ===========================================
|
|
Stats - Bold values, subtle labels
|
|
=========================================== */
|
|
|
|
.stat {
|
|
background: var(--card);
|
|
border-radius: var(--radius-md);
|
|
padding: 14px 16px;
|
|
border: 1px solid var(--border);
|
|
transition:
|
|
border-color var(--duration-normal) var(--ease-out),
|
|
box-shadow var(--duration-normal) var(--ease-out);
|
|
box-shadow: inset 0 1px 0 var(--card-highlight);
|
|
}
|
|
|
|
.stat:hover {
|
|
border-color: var(--border-strong);
|
|
box-shadow:
|
|
var(--shadow-sm),
|
|
inset 0 1px 0 var(--card-highlight);
|
|
}
|
|
|
|
.stat-label {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin-top: 6px;
|
|
letter-spacing: -0.03em;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.stat-value.ok {
|
|
color: var(--ok);
|
|
}
|
|
|
|
.stat-value.warn {
|
|
color: var(--warn);
|
|
}
|
|
|
|
.stat-card {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.note-title {
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* ===========================================
|
|
Status List
|
|
=========================================== */
|
|
|
|
.status-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.status-list div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.status-list div:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.account-count {
|
|
margin-top: 10px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.account-card-list {
|
|
margin-top: 16px;
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.account-card {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 12px;
|
|
background: var(--bg-elevated);
|
|
transition: border-color var(--duration-fast) ease;
|
|
}
|
|
|
|
.account-card:hover {
|
|
border-color: var(--border-strong);
|
|
}
|
|
|
|
.account-card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: 12px;
|
|
}
|
|
|
|
.account-card-title {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.account-card-id {
|
|
font-family: var(--mono);
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.account-card-status {
|
|
margin-top: 10px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.account-card-status div {
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.account-card-error {
|
|
margin-top: 8px;
|
|
color: var(--danger);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* ===========================================
|
|
Labels & Pills
|
|
=========================================== */
|
|
|
|
.label {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
border: 1px solid var(--border);
|
|
padding: 6px 12px;
|
|
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);
|
|
}
|
|
|
|
/* ===========================================
|
|
Theme Toggle
|
|
=========================================== */
|
|
|
|
.theme-toggle {
|
|
--theme-item: 28px;
|
|
--theme-gap: 2px;
|
|
--theme-pad: 4px;
|
|
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);
|
|
border-radius: var(--radius-full);
|
|
border: 1px solid var(--border);
|
|
background: var(--secondary);
|
|
}
|
|
|
|
.theme-toggle__indicator {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: var(--theme-pad);
|
|
width: var(--theme-item);
|
|
height: var(--theme-item);
|
|
border-radius: var(--radius-full);
|
|
transform: translateY(-50%)
|
|
translateX(calc(var(--theme-index, 0) * (var(--theme-item) + var(--theme-gap))));
|
|
background: var(--accent);
|
|
transition: transform var(--duration-normal) var(--ease-out);
|
|
z-index: 0;
|
|
}
|
|
|
|
.theme-toggle__button {
|
|
height: var(--theme-item);
|
|
width: var(--theme-item);
|
|
display: grid;
|
|
place-items: center;
|
|
border: 0;
|
|
border-radius: var(--radius-full);
|
|
background: transparent;
|
|
color: var(--muted);
|
|
cursor: pointer;
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: color var(--duration-fast) ease;
|
|
}
|
|
|
|
.theme-toggle__button:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.theme-toggle__button.active {
|
|
color: var(--accent-foreground);
|
|
}
|
|
|
|
.theme-toggle__button.active .theme-icon {
|
|
stroke: var(--accent-foreground);
|
|
}
|
|
|
|
.theme-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke: currentColor;
|
|
fill: none;
|
|
stroke-width: 1.5px;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* ===========================================
|
|
Status Dot - With glow for emphasis
|
|
=========================================== */
|
|
|
|
.statusDot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--danger);
|
|
box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
|
|
animation: pulse-subtle 2s ease-in-out infinite;
|
|
}
|
|
|
|
.statusDot.ok {
|
|
background: var(--ok);
|
|
box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
|
|
animation: none;
|
|
}
|
|
|
|
/* ===========================================
|
|
Buttons - Tactile with personality
|
|
=========================================== */
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-elevated);
|
|
padding: 9px 16px;
|
|
border-radius: var(--radius-md);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.01em;
|
|
cursor: pointer;
|
|
transition:
|
|
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);
|
|
}
|
|
|
|
.btn:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--border-strong);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.btn:active {
|
|
background: var(--secondary);
|
|
transform: translateY(0);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
stroke: currentColor;
|
|
fill: none;
|
|
stroke-width: 1.5px;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.btn.primary {
|
|
border-color: var(--accent);
|
|
background: var(--accent);
|
|
color: var(--primary-foreground);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.btn.primary:hover {
|
|
background: var(--accent-hover);
|
|
border-color: var(--accent-hover);
|
|
box-shadow:
|
|
var(--shadow-md),
|
|
0 0 20px var(--accent-glow);
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
.btn.active {
|
|
border-color: var(--accent);
|
|
background: var(--accent-subtle);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.btn.danger {
|
|
border-color: transparent;
|
|
background: var(--danger-subtle);
|
|
color: var(--danger);
|
|
}
|
|
|
|
.btn.danger:hover {
|
|
background: rgba(239, 68, 68, 0.15);
|
|
}
|
|
|
|
.btn--sm {
|
|
padding: 6px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ===========================================
|
|
Form Fields
|
|
=========================================== */
|
|
|
|
.field {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.field.full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.field span {
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.field input,
|
|
.field textarea,
|
|
.field select {
|
|
border: 1px solid var(--input);
|
|
background: var(--card);
|
|
border-radius: var(--radius-md);
|
|
padding: 8px 12px;
|
|
outline: none;
|
|
box-shadow: inset 0 1px 0 var(--card-highlight);
|
|
transition:
|
|
border-color var(--duration-fast) ease,
|
|
box-shadow var(--duration-fast) ease;
|
|
}
|
|
|
|
.field input:focus,
|
|
.field textarea:focus,
|
|
.field select:focus {
|
|
border-color: var(--ring);
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
.field select {
|
|
appearance: none;
|
|
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");
|
|
background-repeat: no-repeat;
|
|
background-position: right 10px center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.field textarea {
|
|
font-family: var(--mono);
|
|
min-height: 160px;
|
|
resize: vertical;
|
|
white-space: pre;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.field.checkbox {
|
|
grid-template-columns: auto 1fr;
|
|
align-items: center;
|
|
}
|
|
|
|
.config-form .field.checkbox {
|
|
grid-template-columns: 18px minmax(0, 1fr);
|
|
column-gap: 10px;
|
|
}
|
|
|
|
.config-form .field.checkbox input[type="checkbox"] {
|
|
margin: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
gap: 12px;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
}
|
|
|
|
:root[data-theme="light"] .field input,
|
|
:root[data-theme="light"] .field textarea,
|
|
:root[data-theme="light"] .field select {
|
|
background: var(--card);
|
|
border-color: var(--input);
|
|
}
|
|
|
|
:root[data-theme="light"] .btn {
|
|
background: var(--bg);
|
|
border-color: var(--input);
|
|
}
|
|
|
|
:root[data-theme="light"] .btn:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
:root[data-theme="light"] .btn.primary {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
/* ===========================================
|
|
Utilities
|
|
=========================================== */
|
|
|
|
.muted {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.mono {
|
|
font-family: var(--mono);
|
|
}
|
|
|
|
/* ===========================================
|
|
Callouts - Informative with subtle depth
|
|
=========================================== */
|
|
|
|
.callout {
|
|
padding: 14px 16px;
|
|
border-radius: var(--radius-md);
|
|
background: var(--secondary);
|
|
border: 1px solid var(--border);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
position: relative;
|
|
}
|
|
|
|
.callout.danger {
|
|
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%);
|
|
color: var(--danger);
|
|
}
|
|
|
|
.callout.info {
|
|
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%);
|
|
color: var(--info);
|
|
}
|
|
|
|
.callout.success {
|
|
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%);
|
|
color: var(--ok);
|
|
}
|
|
|
|
/* Compaction indicator */
|
|
.compaction-indicator {
|
|
font-size: 13px;
|
|
padding: 10px 12px;
|
|
margin-bottom: 8px;
|
|
animation: fade-in 0.2s var(--ease-out);
|
|
}
|
|
|
|
.compaction-indicator--active {
|
|
animation: compaction-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.compaction-indicator--complete {
|
|
animation: fade-in 0.2s var(--ease-out);
|
|
}
|
|
|
|
@keyframes compaction-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.7;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
Code Blocks
|
|
=========================================== */
|
|
|
|
.code-block {
|
|
font-family: var(--mono);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
background: var(--secondary);
|
|
padding: 12px;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--border);
|
|
max-height: 360px;
|
|
overflow: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
:root[data-theme="light"] .code-block,
|
|
:root[data-theme="light"] .list-item,
|
|
:root[data-theme="light"] .table-row,
|
|
:root[data-theme="light"] .chip {
|
|
background: var(--bg);
|
|
}
|
|
|
|
/* ===========================================
|
|
Lists
|
|
=========================================== */
|
|
|
|
.list {
|
|
display: grid;
|
|
gap: 8px;
|
|
container-type: inline-size;
|
|
}
|
|
|
|
.list-item {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
|
|
gap: 16px;
|
|
align-items: start;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 12px;
|
|
background: var(--card);
|
|
transition: border-color var(--duration-fast) ease;
|
|
}
|
|
|
|
.list-item-clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.list-item-clickable:hover {
|
|
border-color: var(--border-strong);
|
|
}
|
|
|
|
.list-item-selected {
|
|
border-color: var(--accent);
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
.list-main {
|
|
display: grid;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.list-title {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.list-sub {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.list-meta {
|
|
text-align: right;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
display: grid;
|
|
gap: 4px;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.list-meta .btn {
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.list-meta .field input,
|
|
.list-meta .field textarea,
|
|
.list-meta .field select {
|
|
width: 100%;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
@container (max-width: 560px) {
|
|
.list-item {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.list-meta {
|
|
min-width: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
Chips - Compact and punchy
|
|
=========================================== */
|
|
|
|
.chip-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.chip {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-full);
|
|
padding: 5px 12px;
|
|
color: var(--muted);
|
|
background: var(--secondary);
|
|
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);
|
|
}
|
|
|
|
.chip input {
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.chip-ok {
|
|
color: var(--ok);
|
|
border-color: rgba(34, 197, 94, 0.3);
|
|
background: var(--ok-subtle);
|
|
}
|
|
|
|
.chip-warn {
|
|
color: var(--warn);
|
|
border-color: rgba(245, 158, 11, 0.3);
|
|
background: var(--warn-subtle);
|
|
}
|
|
|
|
.chip-danger {
|
|
color: var(--danger);
|
|
border-color: rgba(239, 68, 68, 0.3);
|
|
background: var(--danger-subtle);
|
|
}
|
|
|
|
/* ===========================================
|
|
Tables
|
|
=========================================== */
|
|
|
|
.table {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.table-head,
|
|
.table-row {
|
|
display: grid;
|
|
grid-template-columns: 1.4fr 1fr 0.8fr 0.7fr 0.8fr 0.8fr 0.8fr 0.8fr 0.6fr;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.table-head {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--muted);
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.table-row {
|
|
border: 1px solid var(--border);
|
|
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);
|
|
}
|
|
|
|
.session-link {
|
|
text-decoration: none;
|
|
color: var(--accent);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.session-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* ===========================================
|
|
Log Stream
|
|
=========================================== */
|
|
|
|
.log-stream {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--card);
|
|
max-height: 500px;
|
|
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;
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 12px;
|
|
transition: background var(--duration-fast) ease;
|
|
}
|
|
|
|
.log-row:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.log-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.log-time {
|
|
color: var(--muted);
|
|
font-family: var(--mono);
|
|
}
|
|
|
|
.log-level {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 2px 6px;
|
|
width: fit-content;
|
|
}
|
|
|
|
.log-level.trace,
|
|
.log-level.debug {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.log-level.info {
|
|
color: var(--info);
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.log-level.warn {
|
|
color: var(--warn);
|
|
border-color: var(--warn-subtle);
|
|
}
|
|
|
|
.log-level.error,
|
|
.log-level.fatal {
|
|
color: var(--danger);
|
|
border-color: var(--danger-subtle);
|
|
}
|
|
|
|
.log-chip.trace,
|
|
.log-chip.debug {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.log-chip.info {
|
|
color: var(--info);
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.log-chip.warn {
|
|
color: var(--warn);
|
|
border-color: var(--warn-subtle);
|
|
}
|
|
|
|
.log-chip.error,
|
|
.log-chip.fatal {
|
|
color: var(--danger);
|
|
border-color: var(--danger-subtle);
|
|
}
|
|
|
|
.log-subsystem {
|
|
color: var(--muted);
|
|
font-family: var(--mono);
|
|
}
|
|
|
|
.log-message {
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
font-family: var(--mono);
|
|
}
|
|
|
|
@container (max-width: 620px) {
|
|
.log-row {
|
|
grid-template-columns: 70px 60px minmax(0, 1fr);
|
|
}
|
|
|
|
.log-subsystem {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
Chat
|
|
=========================================== */
|
|
|
|
.chat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.shell--chat .chat {
|
|
flex: 1;
|
|
}
|
|
|
|
.chat-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
gap: 16px;
|
|
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;
|
|
gap: 8px;
|
|
}
|
|
|
|
.chat-session {
|
|
min-width: 240px;
|
|
}
|
|
|
|
.chat-thread {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 16px 12px;
|
|
min-width: 0;
|
|
border-radius: 0;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Chat queue */
|
|
.chat-queue {
|
|
margin-top: 12px;
|
|
padding: 12px;
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid var(--border);
|
|
background: var(--card);
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.chat-queue__title {
|
|
font-family: var(--mono);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
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;
|
|
gap: 12px;
|
|
padding: 10px 12px;
|
|
border-radius: var(--radius-md);
|
|
border: 1px dashed var(--border-strong);
|
|
background: var(--secondary);
|
|
}
|
|
|
|
.chat-queue__text {
|
|
color: var(--chat-text);
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
white-space: pre-wrap;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
line-clamp: 3;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.chat-queue__remove {
|
|
align-self: start;
|
|
padding: 4px 10px;
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Chat lines */
|
|
.chat-line {
|
|
display: flex;
|
|
}
|
|
|
|
.chat-line.user {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.chat-line.assistant,
|
|
.chat-line.other {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.chat-msg {
|
|
display: grid;
|
|
gap: 6px;
|
|
max-width: min(700px, 82%);
|
|
}
|
|
|
|
.chat-line.user .chat-msg {
|
|
justify-items: end;
|
|
}
|
|
|
|
/* Chat bubbles */
|
|
.chat-bubble {
|
|
border: 1px solid transparent;
|
|
background: var(--card);
|
|
border-radius: var(--radius-lg);
|
|
padding: 10px 14px;
|
|
min-width: 0;
|
|
}
|
|
|
|
:root[data-theme="light"] .chat-bubble {
|
|
border-color: var(--border);
|
|
background: var(--bg);
|
|
}
|
|
|
|
.chat-line.user .chat-bubble {
|
|
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);
|
|
}
|
|
|
|
.chat-line.assistant .chat-bubble {
|
|
border-color: transparent;
|
|
background: var(--secondary);
|
|
}
|
|
|
|
:root[data-theme="light"] .chat-line.assistant .chat-bubble {
|
|
border-color: var(--border);
|
|
background: var(--bg-muted);
|
|
}
|
|
|
|
@keyframes chatStreamPulse {
|
|
0%,
|
|
100% {
|
|
border-color: var(--border);
|
|
}
|
|
50% {
|
|
border-color: var(--accent);
|
|
}
|
|
}
|
|
|
|
.chat-bubble.streaming {
|
|
animation: chatStreamPulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.chat-bubble.streaming {
|
|
animation: none;
|
|
border-color: var(--accent);
|
|
}
|
|
}
|
|
|
|
/* Reading indicator */
|
|
.chat-bubble.chat-reading-indicator {
|
|
width: fit-content;
|
|
padding: 10px 16px;
|
|
}
|
|
|
|
.chat-reading-indicator__dots {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
height: 12px;
|
|
}
|
|
|
|
.chat-reading-indicator__dots > span {
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--muted);
|
|
opacity: 0.6;
|
|
transform: translateY(0);
|
|
animation: chatReadingDot 1.2s ease-in-out infinite;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.chat-reading-indicator__dots > span:nth-child(2) {
|
|
animation-delay: 0.15s;
|
|
}
|
|
|
|
.chat-reading-indicator__dots > span:nth-child(3) {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
@keyframes chatReadingDot {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
opacity: 0.4;
|
|
transform: translateY(0);
|
|
}
|
|
40% {
|
|
opacity: 1;
|
|
transform: translateY(-3px);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.chat-reading-indicator__dots > span {
|
|
animation: none;
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
/* Chat text */
|
|
.chat-text {
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
color: var(--chat-text);
|
|
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) {
|
|
padding-left: 1.2em;
|
|
}
|
|
|
|
.chat-text :where(li + li) {
|
|
margin-top: 0.25em;
|
|
}
|
|
|
|
.chat-text :where(a) {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.chat-text :where(a:hover) {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.chat-text :where(blockquote) {
|
|
border-left: 2px solid var(--border-strong);
|
|
padding-left: 12px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.chat-text :where(hr) {
|
|
border: 0;
|
|
border-top: 1px solid var(--border);
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.chat-text :where(code) {
|
|
font-family: var(--mono);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.chat-text :where(:not(pre) > code) {
|
|
padding: 0.15em 0.35em;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--border);
|
|
background: var(--secondary);
|
|
}
|
|
|
|
:root[data-theme="light"] .chat-text :where(:not(pre) > code) {
|
|
background: var(--bg-muted);
|
|
}
|
|
|
|
.chat-text :where(pre) {
|
|
margin-top: 0.75em;
|
|
padding: 10px 12px;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--border);
|
|
background: var(--secondary);
|
|
overflow: auto;
|
|
}
|
|
|
|
:root[data-theme="light"] .chat-text :where(pre) {
|
|
background: var(--bg-muted);
|
|
}
|
|
|
|
.chat-text :where(pre code) {
|
|
font-size: 12px;
|
|
white-space: pre;
|
|
}
|
|
|
|
.chat-text :where(table) {
|
|
margin-top: 0.75em;
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.chat-text :where(th, td) {
|
|
border: 1px solid var(--border);
|
|
padding: 6px 10px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.chat-text :where(th) {
|
|
font-family: var(--mono);
|
|
font-weight: 500;
|
|
color: var(--muted);
|
|
background: var(--secondary);
|
|
}
|
|
|
|
/* Tool cards */
|
|
.chat-tool-card {
|
|
margin-top: 8px;
|
|
padding: 10px 12px;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--border);
|
|
background: var(--secondary);
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
:root[data-theme="light"] .chat-tool-card {
|
|
background: var(--bg-muted);
|
|
}
|
|
|
|
.chat-tool-card__title {
|
|
font-family: var(--mono);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
}
|
|
|
|
.chat-tool-card__detail {
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.chat-tool-card__details {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.chat-tool-card__summary {
|
|
font-family: var(--mono);
|
|
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);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.chat-tool-card__details[open] .chat-tool-card__summary {
|
|
color: var(--text);
|
|
}
|
|
|
|
.chat-tool-card__output {
|
|
margin-top: 8px;
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
color: var(--chat-text);
|
|
padding: 8px 10px;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--border);
|
|
background: var(--card);
|
|
}
|
|
|
|
:root[data-theme="light"] .chat-tool-card__output {
|
|
background: var(--bg);
|
|
}
|
|
|
|
.chat-stamp {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.chat-line.user .chat-stamp {
|
|
text-align: right;
|
|
}
|
|
|
|
/* Chat compose */
|
|
.chat-compose {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.shell--chat .chat-compose {
|
|
position: sticky;
|
|
bottom: 0;
|
|
z-index: 5;
|
|
margin-top: 0;
|
|
padding-top: 12px;
|
|
background: linear-gradient(180deg, transparent 0%, var(--bg) 40%);
|
|
}
|
|
|
|
.shell--chat-focus .chat-compose {
|
|
bottom: calc(var(--shell-pad) + 8px);
|
|
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
|
|
border-bottom-left-radius: var(--radius-lg);
|
|
border-bottom-right-radius: var(--radius-lg);
|
|
}
|
|
|
|
.chat-compose__field {
|
|
gap: 4px;
|
|
}
|
|
|
|
.chat-compose__field textarea {
|
|
min-height: 72px;
|
|
padding: 10px 14px;
|
|
border-radius: var(--radius-lg);
|
|
resize: vertical;
|
|
white-space: pre-wrap;
|
|
font-family: var(--font-body);
|
|
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);
|
|
}
|
|
|
|
.chat-compose__field textarea:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.chat-compose__actions {
|
|
justify-content: flex-end;
|
|
align-self: end;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.chat-session {
|
|
min-width: 180px;
|
|
}
|
|
|
|
.chat-compose {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
QR Code
|
|
=========================================== */
|
|
|
|
.qr-wrap {
|
|
margin-top: 16px;
|
|
border-radius: var(--radius-md);
|
|
background: var(--card);
|
|
border: 1px dashed var(--border-strong);
|
|
padding: 16px;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.qr-wrap img {
|
|
width: 160px;
|
|
height: 160px;
|
|
border-radius: var(--radius-sm);
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
/* ===========================================
|
|
Exec Approval Modal
|
|
=========================================== */
|
|
|
|
.exec-approval-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
backdrop-filter: blur(4px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
z-index: 200;
|
|
}
|
|
|
|
.exec-approval-card {
|
|
width: min(540px, 100%);
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 20px;
|
|
animation: scale-in 0.2s var(--ease-out);
|
|
}
|
|
|
|
.exec-approval-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.exec-approval-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.exec-approval-sub {
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.exec-approval-queue {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--muted);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-full);
|
|
padding: 4px 10px;
|
|
}
|
|
|
|
.exec-approval-command {
|
|
margin-top: 12px;
|
|
padding: 10px 12px;
|
|
background: var(--secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
word-break: break-word;
|
|
white-space: pre-wrap;
|
|
font-family: var(--mono);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.exec-approval-meta {
|
|
margin-top: 12px;
|
|
display: grid;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
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;
|
|
font-size: 13px;
|
|
color: var(--danger);
|
|
}
|
|
|
|
.exec-approval-actions {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* ===========================================
|
|
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;
|
|
min-width: 0;
|
|
}
|
|
|
|
.agent-kv > div {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|