dguiducci
0ed94225b2
Nightly Build / build (push) Successful in 7m17s
Every full-page view now renders the same sticky top bar (back button, title, right-side actions) from the new web/css/page-header.css, replacing a dozen per-page duplicates (.page-panel-header, .project-page-header, .task-page-header, .llm-page-header, .um-header, .apr-header, .llmr-header, .pv-header, .sa-header, .config-page-header, .agents-page-header). Pages that padded the whole container (config, agents, system-agents, llm-requests, models-hub) move that padding into a body wrapper so the bar sits flush and stays pinned on scroll. Back buttons are standardized to the icon-only .page-header-back.
84 lines
2.5 KiB
JavaScript
84 lines
2.5 KiB
JavaScript
import { html, nothing } from 'lit';
|
|
import { LightElement } from '../lib/base.js';
|
|
import { InboxMixin } from '../lib/inbox-mixin.js';
|
|
import { t, I18nMixin } from '../lib/i18n.js';
|
|
|
|
export class AgentInboxPage extends I18nMixin(InboxMixin(LightElement)) {
|
|
|
|
static get properties() {
|
|
return {
|
|
...super.properties,
|
|
_open: { state: true },
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this._open = false;
|
|
this._pollTimer = null;
|
|
}
|
|
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
// Live refresh: the chat WS pushes `inbox-changed` when any of this user's
|
|
// sessions raises or settles a pending item — reload immediately if open.
|
|
this.__onInboxChanged = () => { if (this._open) this._loadInbox(); };
|
|
window.addEventListener('inbox-changed', this.__onInboxChanged);
|
|
window.addEventListener('llm-page-change', (e) => {
|
|
this._open = e.detail.page === 'inbox';
|
|
this.style.display = this._open ? 'flex' : 'none';
|
|
if (this._open) {
|
|
this._loadInbox();
|
|
this._startPolling();
|
|
} else {
|
|
this._stopPolling();
|
|
}
|
|
});
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
super.disconnectedCallback();
|
|
this._stopPolling();
|
|
window.removeEventListener('inbox-changed', this.__onInboxChanged);
|
|
}
|
|
|
|
_startPolling() {
|
|
this._stopPolling();
|
|
// Fallback only — pushes via `inbox-changed` keep the page fresh.
|
|
this._pollTimer = setInterval(() => this._loadInbox(), 60000);
|
|
}
|
|
|
|
_stopPolling() {
|
|
if (this._pollTimer) {
|
|
clearInterval(this._pollTimer);
|
|
this._pollTimer = null;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const approvals = this._inboxData?.approvals ?? [];
|
|
const clarifications = this._inboxData?.clarifications ?? [];
|
|
const elicitations = this._inboxData?.elicitations ?? [];
|
|
const total = approvals.length + clarifications.length + elicitations.length;
|
|
|
|
return html`
|
|
<div class="page-panel">
|
|
<div class="page-header">
|
|
<div class="page-header-left">
|
|
<h2 class="page-header-title">
|
|
${t('nav.inbox')}
|
|
${total > 0 ? html`<span class="badge bg-danger ms-2">${total}</span>` : nothing}
|
|
</h2>
|
|
</div>
|
|
<div class="page-header-actions">
|
|
<button class="inbox-refresh-btn" title="Refresh" @click=${() => this._loadInbox()}>
|
|
<i class="bi bi-arrow-clockwise"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
${this._renderInboxSection()}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|