dguiducci/Skald-Circle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

system agents: generalise the scheduler and add the two memory lints
Nightly Build / build (push) Successful in 7m14s
Details

Browse Source 
Memory is kept as a maintained wiki, and a wiki nobody prunes rots. This adds
the scheduled maintenance pass, and generalises the machinery TIC had grown so
that a background agent is a trait impl rather than a loop of its own.

Two lint agents, not one. The private pass runs per user over `user-memory/`
and reports to them; the shared pass runs once over `shared-memory/`, where the
interesting defect is different — a note failing the table rule, i.e. private
business written where every member can read it. It names the note and the
category without repeating the content, since restating it spreads the very
thing being flagged. Both share `agents/common/memory-lint.md`.

Both are read-only, and that is enforced twice: the prompt says report-never-
repair, and `shared-memory/*` writes are already `@fs_write require`, so an
agent that tried to fix something would raise an approval card from an
unattended pass, which is auto-denied. Read-only is the only design that works
here, not merely the safe one.

One scheduler for cadences three orders of magnitude apart. TIC runs every few
minutes, a lint weekly — the case that tempts a second loop. It stays one
because the wake-up decides nothing: `base_tick` picks only how often to look,
and whether an agent runs for a user is `is_due` against persisted state.

Due-ness moves out of the run log into a new owner table, `system_agent_state`.
The two answer different questions: the run log skips idle ticks so it stays a
history rather than a heartbeat, while scheduling needs every attempt. Reading
due-ness off the log would re-run an idle agent on every tick and never bring a
weekly one due once its last productive run aged out. Persisting it is also
what makes a long interval survive a restart — an in-memory deadline is fine at
TIC's scale, but a weekly agent on a box rebooted every few days would have it
re-armed before it ever fired.

The shared store belongs to nobody, so `AgentScope::Instance` runs that pass as
the first unlocked admin. An ownerless run would write its trace into system.db,
which the runs endpoint shows to nobody by design, and its notify() would have
no recipient; attributing it to a user keeps the whole per-user surface working
unchanged.

Settings move to where the run log is. `ConfigSet` gains `owner`, so placement
is data on the set rather than a page that knows set names; the System agents
page grows one tab per agent holding its description, its settings (admin only)
and its runs — "why did this do nothing last night?" is half a schedule
question and half a log question. The form is shared with the Config page, and
writes still go through PUT /api/config/{key}.

Fixes an authorization gap found on the way: neither /api/config handler took
the caller into account, so any authenticated session could read and write
instance-wide config. The sidebar hiding the page is presentation, not access
control. Both are now admin-gated.
This commit is contained in:
dguiducci
2026-07-28 21:24:16 +01:00
parent 4b1affa600
commit 434e27d7c2
34 changed files with 2194 additions and 612 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/components/config-page.js
+19 -165
View File
@@ -1,32 +1,23 @@
import { html, nothing } from 'lit';
import { LightElement } from '../lib/base.js';
import { t } from '../lib/i18n.js';
import { ConfigFormController, maybeT, propKeyId } from './shared/config-form.js';
function _maybeT(key, fallback) {
const v = t(key);
return v !== key ? v : fallback;
}
// Sets whose labels this page ships translations for. A set with no slug falls
// back to the backend's own English text, which is also what happens to a newly
// added one until it is translated.
function _configSetSlug(name) {
const slugs = {
'Interface': 'interface',
'TIC Agent': 'tic_agent',
'Interface': 'interface',
'Compaction': 'compaction',
};
return slugs[name] ?? null;
}
function _propKeyId(propKey) {
return propKey.replace(/\./g, '__');
}
export class ConfigPage extends LightElement {
static properties = {
_open: { state: true },
_properties: { state: true },
_values: { state: true }, // { [key]: string }
_saving: { state: true }, // Set<key>
_saved: { state: true }, // Set<key> (brief flash)
_error: { state: true },
_debugMode: { state: true },
_debugLoading: { state: true },
@@ -36,12 +27,12 @@ export class ConfigPage extends LightElement {
super();
this._open = false;
this._properties = [];
this._values = {};
this._saving = new Set();
this._saved = new Set();
this._error = null;
this._debugMode = false;
this._debugLoading = true;
// Values, in-flight saves and the saved-flash live in the shared controller,
// which also owns the write path (see `shared/config-form.js`).
this._form = new ConfigFormController(() => this.requestUpdate());
}
connectedCallback() {
@@ -96,166 +87,29 @@ export class ConfigPage extends LightElement {
if (!res.ok) throw new Error(await res.text());
const data = await res.json();
this._properties = data.sets ?? [];
const vals = {};
for (const s of this._properties)
for (const p of s.properties) vals[p.key] = p.value ?? '';
this._values = vals;
this._form.seedFromSets(this._properties);
} catch (e) {
this._error = e.message;
}
}
_setValue(key, val) {
this._values = { ...this._values, [key]: val };
}
async _save(prop) {
const key = prop.key;
const value = this._values[key] ?? '';
this._saving = new Set([...this._saving, key]);
this.requestUpdate();
try {
const res = await fetch(`/api/config/${encodeURIComponent(key)}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ value }),
});
if (!res.ok) throw new Error(await res.text());
this._saved = new Set([...this._saved, key]);
setTimeout(() => {
this._saved = new Set([...this._saved].filter(k => k !== key));
}, 1500);
} catch (e) {
alert(t('config.error_save', { name: prop.name, msg: e.message }));
} finally {
this._saving = new Set([...this._saving].filter(k => k !== key));
}
}
_renderInput(prop) {
const val = this._values[prop.key] ?? '';
if (prop.property_type === 'bool') {
const effective = val !== '' ? val : (prop.default_value ?? 'true');
const checked = effective !== 'false';
return html`
<div class="form-check form-switch config-bool-switch">
<input class="form-check-input" type="checkbox" role="switch"
id="cfg-${prop.key}"
.checked=${checked}
@change=${e => { this._setValue(prop.key, e.target.checked ? 'true' : 'false'); this._save(prop); }} />
<label class="form-check-label" for="cfg-${prop.key}">
${checked ? t('config.enabled') : t('config.disabled')}
</label>
</div>`;
}
if (prop.property_type === 'int') {
return html`
<input type="number" step="1" min="1"
class="form-control form-control-sm config-input"
.value=${val}
placeholder=${prop.default_value ?? ''}
@input=${e => this._setValue(prop.key, e.target.value)} />`;
}
// Dropdown-style property types. The backend ships the allowed values in
// `prop.options` (a list of {id, name}); we only decide how to frame them.
// Adding a new custom type from a config section? Give it a `property_type`
// on the backend, attach its `options`, and add a branch like these — a
// free-text box becomes a proper picker for the price of a few lines.
if (prop.property_type === 'security_group') {
// Nullable: the empty choice means "fall back to the instance default".
const groups = prop.options ?? [];
return html`
<select class="form-select form-select-sm config-input"
.value=${val}
@change=${e => this._setValue(prop.key, e.target.value)}>
<option value="">— default —</option>
${groups.map(g => html`
<option value=${g.id} ?selected=${val === g.id}>${g.name}</option>`)}
</select>`;
}
if (prop.property_type === 'locale') {
// Interface languages the instance supports; labels are native endonyms.
// Always a concrete pick (no empty option) — falls back to default_value.
const locales = prop.options ?? [];
const current = val || prop.default_value || 'en';
return html`
<select class="form-select form-select-sm config-input"
.value=${current}
@change=${e => { this._setValue(prop.key, e.target.value); this._save(prop); }}>
${locales.map(l => html`
<option value=${l.id} ?selected=${current === l.id}>${l.name}</option>`)}
</select>`;
}
if (prop.property_type === 'llm_model') {
// Configured LLM models, by name. Nullable: the empty choice means
// "auto-select" (the backend's own resolution order applies).
const models = prop.options ?? [];
return html`
<select class="form-select form-select-sm config-input"
.value=${val}
@change=${e => this._setValue(prop.key, e.target.value)}>
<option value="">— ${t('config.llm_model.auto')} —</option>
${models.map(m => html`
<option value=${m.id} ?selected=${val === m.id}>${m.name}</option>`)}
</select>`;
}
return html`
<input type="text"
class="form-control form-control-sm config-input"
.value=${val}
placeholder=${prop.default_value ?? ''}
@input=${e => this._setValue(prop.key, e.target.value)} />`;
}
_renderSet(set) {
const slug = _configSetSlug(set.name);
const sName = slug ? _maybeT(`config.set.${slug}.name`, set.name) : set.name;
const sDesc = slug ? _maybeT(`config.set.${slug}.desc`, set.description) : set.description;
const slug = _configSetSlug(set.name);
const sName = slug ? maybeT(`config.set.${slug}.name`, set.name) : set.name;
const sDesc = slug ? maybeT(`config.set.${slug}.desc`, set.description) : set.description;
return html`
<div class="config-set">
<div class="config-set-header">
<div class="config-set-name">${sName}</div>
<div class="config-set-desc">${sDesc}</div>
</div>
<div class="config-rows">
${set.properties.map(p => this._renderRow(p))}
</div>
</div>`;
}
_renderRow(prop) {
const saving = this._saving.has(prop.key);
const saved = this._saved.has(prop.key);
const pk = _propKeyId(prop.key);
const pName = _maybeT(`config.prop.${pk}.name`, prop.name);
const pDesc = _maybeT(`config.prop.${pk}.desc`, prop.description);
return html`
<div class="config-row">
<div class="config-row-meta">
<div class="config-row-name">${pName}</div>
<div class="config-row-desc">${pDesc}</div>
</div>
<div class="config-row-control">
${this._renderInput(prop)}
${!['bool', 'locale'].includes(prop.property_type) ? html`
<button class="btn btn-sm ${saved ? 'btn-success' : 'btn-primary'} config-save-btn"
?disabled=${saving}
@click=${() => this._save(prop)}>
${saving
? html`<span class="spinner-border spinner-border-sm"></span>`
: saved ? t('common.saved') : t('common.save')}
</button>` : nothing}
</div>
${this._form.renderRows(set.properties, p => {
const pk = propKeyId(p.key);
return {
name: maybeT(`config.prop.${pk}.name`, p.name),
description: maybeT(`config.prop.${pk}.desc`, p.description),
};
})}
</div>`;
}
web/components/shared/config-form.js
+194
View File
@@ -0,0 +1,194 @@
import { html, nothing } from 'lit';
import { t } from '../../lib/i18n.js';
/**
* The schema-driven settings form, shared by the Config page and the System
* agents page.
*
* A config property renders the same way wherever it is edited — the backend
* ships its type, its current value and, for the dropdown types, the choices it
* owns (`PropertyType` in `core-api`), and this decides how to frame them. Both
* pages write through the same `PUT /api/config/{key}`, so "where is this
* setting shown" stays a pure placement question with no second form to keep in
* step.
*
* Adding a property type is still the three-step recipe in `config_property.rs`:
* variant, backend mapping + options, and a branch in `_renderInput` here.
*/
export class ConfigFormController {
/** @param requestUpdate host callback, invoked whenever state changes. */
constructor(requestUpdate) {
this._requestUpdate = requestUpdate;
this._values = {};
this._saving = new Set();
this._saved = new Set();
}
/** Seed the editable values from freshly fetched sets. */
seedFromSets(sets) {
const vals = {};
for (const s of sets ?? [])
for (const p of s?.properties ?? []) vals[p.key] = p.value ?? '';
this._values = vals;
this._requestUpdate();
}
_setValue(key, val) {
this._values = { ...this._values, [key]: val };
this._requestUpdate();
}
async _save(prop) {
const key = prop.key;
const value = this._values[key] ?? '';
this._saving = new Set([...this._saving, key]);
this._requestUpdate();
try {
const res = await fetch(`/api/config/${encodeURIComponent(key)}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ value }),
});
if (!res.ok) throw new Error(await res.text());
this._saved = new Set([...this._saved, key]);
this._requestUpdate();
setTimeout(() => {
this._saved = new Set([...this._saved].filter(k => k !== key));
this._requestUpdate();
}, 1500);
} catch (e) {
alert(t('config.error_save', { name: prop.name, msg: e.message }));
} finally {
this._saving = new Set([...this._saving].filter(k => k !== key));
this._requestUpdate();
}
}
_renderInput(prop) {
const val = this._values[prop.key] ?? '';
if (prop.property_type === 'bool') {
const effective = val !== '' ? val : (prop.default_value ?? 'true');
const checked = effective !== 'false';
return html`
<div class="form-check form-switch config-bool-switch">
<input class="form-check-input" type="checkbox" role="switch"
id="cfg-${prop.key}"
.checked=${checked}
@change=${e => { this._setValue(prop.key, e.target.checked ? 'true' : 'false'); this._save(prop); }} />
<label class="form-check-label" for="cfg-${prop.key}">
${checked ? t('config.enabled') : t('config.disabled')}
</label>
</div>`;
}
if (prop.property_type === 'int') {
return html`
<input type="number" step="1" min="1"
class="form-control form-control-sm config-input"
.value=${val}
placeholder=${prop.default_value ?? ''}
@input=${e => this._setValue(prop.key, e.target.value)} />`;
}
// Dropdown-style property types. The backend ships the allowed values in
// `prop.options` (a list of {id, name}); we only decide how to frame them.
if (prop.property_type === 'security_group') {
// Nullable: the empty choice means "fall back to the role default".
const groups = prop.options ?? [];
return html`
<select class="form-select form-select-sm config-input"
.value=${val}
@change=${e => this._setValue(prop.key, e.target.value)}>
<option value="">— default —</option>
${groups.map(g => html`
<option value=${g.id} ?selected=${val === g.id}>${g.name}</option>`)}
</select>`;
}
if (prop.property_type === 'locale') {
// Interface languages the instance supports; labels are native endonyms.
// Always a concrete pick (no empty option) — falls back to default_value.
const locales = prop.options ?? [];
const current = val || prop.default_value || 'en';
return html`
<select class="form-select form-select-sm config-input"
.value=${current}
@change=${e => { this._setValue(prop.key, e.target.value); this._save(prop); }}>
${locales.map(l => html`
<option value=${l.id} ?selected=${current === l.id}>${l.name}</option>`)}
</select>`;
}
if (prop.property_type === 'llm_model') {
// Configured LLM models, by name. Nullable: the empty choice means
// "auto-select" (the backend's own resolution order applies).
const models = prop.options ?? [];
return html`
<select class="form-select form-select-sm config-input"
.value=${val}
@change=${e => this._setValue(prop.key, e.target.value)}>
<option value="">— ${t('config.llm_model.auto')} —</option>
${models.map(m => html`
<option value=${m.id} ?selected=${val === m.id}>${m.name}</option>`)}
</select>`;
}
return html`
<input type="text"
class="form-control form-control-sm config-input"
.value=${val}
placeholder=${prop.default_value ?? ''}
@input=${e => this._setValue(prop.key, e.target.value)} />`;
}
/**
* One row per property. `labelFor(prop)` lets the host supply translated
* name/description; it returns `{ name, description }`.
*/
renderRows(properties, labelFor = p => p) {
return html`
<div class="config-rows">
${(properties ?? []).map(prop => {
const saving = this._saving.has(prop.key);
const saved = this._saved.has(prop.key);
const label = labelFor(prop);
// A switch and a language picker save on change; everything else needs
// an explicit commit, or every keystroke would be a write.
const needsButton = !['bool', 'locale'].includes(prop.property_type);
return html`
<div class="config-row">
<div class="config-row-meta">
<div class="config-row-name">${label.name}</div>
<div class="config-row-desc">${label.description}</div>
</div>
<div class="config-row-control">
${this._renderInput(prop)}
${needsButton ? html`
<button class="btn btn-sm ${saved ? 'btn-success' : 'btn-primary'} config-save-btn"
?disabled=${saving}
@click=${() => this._save(prop)}>
${saving
? html`<span class="spinner-border spinner-border-sm"></span>`
: saved ? t('common.saved') : t('common.save')}
</button>` : nothing}
</div>
</div>`;
})}
</div>`;
}
}
/** `t(key)` when a translation exists, otherwise the server-supplied text. */
export function maybeT(key, fallback) {
const v = t(key);
return v !== key ? v : fallback;
}
/** Config keys are dotted; i18n keys are not. */
export function propKeyId(propKey) {
return propKey.replace(/\./g, '__');
}
web/components/system-agents.js
+120 -114
View File
@@ -1,10 +1,14 @@
import { html, nothing } from 'lit';
import { LightElement } from '../lib/base.js';
import { t } from '../lib/i18n.js';
import { ConfigFormController, maybeT, propKeyId } from './shared/config-form.js';
const PAGE_ID = 'system-agents';
const PER_PAGE = 20;
/** The overview tab: every agent's runs, interleaved. */
const ALL_TAB = '__all__';
function formatDate(iso) {
if (!iso) return '—';
return new Date(iso).toLocaleString(undefined, {
@@ -29,9 +33,27 @@ const STATUS_ICON = {
cancelled: 'bi-slash-circle',
};
/**
* The background agents the instance runs, one tab per agent.
*
* **The tab is the agent, not the kind of information.** A tab holds an agent's
* settings *and* its run history, because the question people actually arrive
* with — "why did this do nothing last night?" — is answered half by the
* schedule and half by the log. Splitting them into a "runs" tab and a
* "settings" tab would put the two halves of every answer on opposite sides of
* the page.
*
* **Two audiences on one page.** The run history is the caller's own and is
* shown to everyone; the settings are instance-wide and shown only to an admin
* (`can_configure`). Hiding the form is presentation only — the backend gates
* both the listing and `PUT /api/config/{key}`.
*/
export class SystemAgentsPage extends LightElement {
static properties = {
_open: { state: true },
_agents: { state: true },
_canCfg: { state: true },
_tab: { state: true },
_items: { state: true },
_total: { state: true },
_page: { state: true },
@@ -42,11 +64,15 @@ export class SystemAgentsPage extends LightElement {
constructor() {
super();
this._open = false;
this._agents = [];
this._canCfg = false;
this._tab = ALL_TAB;
this._items = [];
this._total = 0;
this._page = 1;
this._loading = false;
this._error = null;
this._form = new ConfigFormController(() => this.requestUpdate());
}
connectedCallback() {
@@ -56,7 +82,7 @@ export class SystemAgentsPage extends LightElement {
window.addEventListener('llm-page-change', (e) => {
this._open = e.detail.page === PAGE_ID;
this.style.display = this._open ? 'flex' : 'none';
if (this._open) this._fetch(this._page);
if (this._open) this._loadAll();
});
}
@@ -65,12 +91,35 @@ export class SystemAgentsPage extends LightElement {
super.disconnectedCallback();
}
async _loadAll() {
await this._fetchAgents();
await this._fetch(this._page);
}
async _fetchAgents() {
try {
const res = await fetch('/api/system-agents');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
this._agents = data.items ?? [];
this._canCfg = !!data.can_configure;
// A member gets no `config` at all, so there is nothing to seed.
this._form.seedFromSets(this._agents.map(a => a.config).filter(Boolean));
} catch (e) {
// Non-fatal: without the agent list the page still shows the run log,
// which is the half everyone can see.
this._agents = [];
this._canCfg = false;
}
}
async _fetch(page) {
this._loading = true;
this._error = null;
try {
const params = new URLSearchParams({ page, per_page: PER_PAGE });
const res = await fetch(`/api/system-agents/runs?${params}`);
if (this._tab !== ALL_TAB) params.set('agent_id', this._tab);
const res = await fetch(`/api/system-agents/runs?${params}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
this._items = data.items;
@@ -83,14 +132,33 @@ export class SystemAgentsPage extends LightElement {
}
}
_selectTab(id) {
if (this._tab === id) return;
this._tab = id;
this._page = 1;
this._fetch(1);
}
_openSession(id) {
if (id != null) window.location.hash = `session/${id}`;
}
get _totalPages() { return Math.max(1, Math.ceil(this._total / PER_PAGE)); }
/// The agent's own counters. Rendered generically so a second system agent
/// needs no change here: unknown keys fall back to the raw key name.
get _currentAgent() {
return this._agents.find(a => a.id === this._tab) ?? null;
}
/** Server-supplied English unless the instance ships a translation. */
_agentLabel(agent) {
return {
name: maybeT(`system_agents.agent.${agent.id}.name`, agent.name),
description: maybeT(`system_agents.agent.${agent.id}.desc`, agent.description),
};
}
/// The agent's own counters. Rendered generically so a new system agent needs
/// no change here: unknown keys fall back to the raw key name.
_renderStats(stats) {
if (!stats || typeof stats !== 'object') return '—';
const parts = Object.entries(stats)
@@ -102,6 +170,46 @@ export class SystemAgentsPage extends LightElement {
return parts.length ? parts.join(' · ') : '—';
}
_renderTabs() {
if (this._agents.length === 0) return nothing;
const tab = (id, label, icon) => html`
<button class="sa-tab ${this._tab === id ? 'sa-tab--active' : ''}"
@click=${() => this._selectTab(id)}>
${icon ? html`<i class="bi ${icon}"></i>` : nothing}${label}
</button>`;
return html`
<div class="sa-tab-bar">
${tab(ALL_TAB, t('system_agents.tab.all'), 'bi-collection')}
${this._agents.map(a => tab(a.id, this._agentLabel(a).name, null))}
</div>`;
}
/** The selected agent's description, plus its settings when the caller is an admin. */
_renderAgentPanel() {
const agent = this._currentAgent;
if (!agent) return nothing;
const label = this._agentLabel(agent);
return html`
<div class="sa-agent-panel">
<p class="sa-agent-desc">${label.description}</p>
${this._canCfg && agent.config ? html`
<div class="config-set sa-agent-config">
<div class="config-set-header">
<div class="config-set-name">${t('system_agents.settings')}</div>
</div>
${this._form.renderRows(agent.config.properties, p => {
const pk = propKeyId(p.key);
return {
name: maybeT(`config.prop.${pk}.name`, p.name),
description: maybeT(`config.prop.${pk}.desc`, p.description),
};
})}
</div>` : nothing}
</div>`;
}
_renderTable() {
if (this._loading) return html`
<div class="sa-state">
@@ -123,12 +231,15 @@ export class SystemAgentsPage extends LightElement {
</div>
`;
// The agent column is redundant once a single agent's tab is selected.
const showAgent = this._tab === ALL_TAB;
return html`
<div class="sa-table-wrap">
<table class="table table-sm sa-table">
<thead>
<tr>
<th>${t('system_agents.table.agent')}</th>
${showAgent ? html`<th>${t('system_agents.table.agent')}</th>` : nothing}
<th>${t('system_agents.table.started')}</th>
<th>${t('system_agents.table.status')}</th>
<th class="text-end">${t('system_agents.table.duration')}</th>
@@ -139,7 +250,7 @@ export class SystemAgentsPage extends LightElement {
${this._items.map(r => html`
<tr class=${r.session_id != null ? 'sa-row--clickable' : ''}
@click=${() => this._openSession(r.session_id)}>
<td><span class="sa-agent">${r.agent_id}</span></td>
${showAgent ? html`<td><span class="sa-agent">${r.agent_id}</span></td>` : nothing}
<td class="sa-date">${formatDate(r.started_at)}</td>
<td>
<span class="sa-status sa-status--${r.status}">
@@ -182,124 +293,19 @@ export class SystemAgentsPage extends LightElement {
render() {
return html`
<style>
.sa-page {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
width: 100%;
padding: 1.5rem;
overflow-y: auto;
}
.sa-header {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 0.35rem;
}
.sa-title {
font-size: 1.2rem;
font-weight: 600;
margin: 0;
}
.sa-total-badge {
font-size: 0.75rem;
color: var(--bs-secondary-color);
background: var(--bs-tertiary-bg);
border: 1px solid var(--bs-border-color);
border-radius: 1rem;
padding: 0.1rem 0.6rem;
}
.sa-refresh-btn { margin-left: auto; }
.sa-subtitle {
font-size: 0.85rem;
color: var(--bs-secondary-color);
margin-bottom: 1.25rem;
max-width: 65ch;
}
.sa-table-wrap {
border: 1px solid var(--bs-border-color);
border-radius: 0.5rem;
overflow-x: auto;
}
.sa-table { margin-bottom: 0; }
.sa-row--clickable { cursor: pointer; }
.sa-row--clickable:hover td { background: var(--bs-tertiary-bg); }
.sa-agent {
font-family: monospace;
font-size: 0.82rem;
}
.sa-date {
font-size: 0.82rem;
color: var(--bs-secondary-color);
white-space: nowrap;
}
.sa-num {
font-variant-numeric: tabular-nums;
font-size: 0.85rem;
white-space: nowrap;
}
.sa-status {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.8rem;
white-space: nowrap;
}
.sa-status--completed { color: var(--bs-success); }
.sa-status--failed { color: var(--bs-danger); }
.sa-status--running { color: var(--bs-secondary-color); }
.sa-status--cancelled { color: var(--bs-secondary-color); }
.sa-result {
font-size: 0.82rem;
color: var(--bs-secondary-color);
}
.sa-error {
color: var(--bs-danger);
display: inline-block;
max-width: 40ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
.sa-state {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: 3rem;
justify-content: center;
color: var(--bs-secondary-color);
font-size: 0.9rem;
}
.sa-state--empty i { font-size: 1.6rem; opacity: 0.6; }
.sa-state--error { color: var(--bs-danger); flex-direction: row; }
.sa-pagination {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1rem;
justify-content: center;
}
.sa-page-info {
font-size: 0.82rem;
color: var(--bs-secondary-color);
}
</style>
<div class="sa-page">
<div class="sa-header">
<h2 class="sa-title"><i class="bi bi-robot"></i> ${t('system_agents.title')}</h2>
<span class="sa-total-badge">${t('system_agents.total', { n: this._total })}</span>
<button class="btn btn-sm btn-outline-secondary sa-refresh-btn"
?disabled=${this._loading}
@click=${() => this._fetch(this._page)}>
@click=${() => this._loadAll()}>
<i class="bi bi-arrow-clockwise"></i> ${t('system_agents.refresh')}
</button>
</div>
<p class="sa-subtitle">${t('system_agents.subtitle')}</p>
${this._renderTabs()}
${this._renderAgentPanel()}
${this._renderTable()}
${this._renderPagination()}
</div>