Files
Skald-Circle/web/lib/inbox-mixin.js
T
dguiducci 01b8a187b5
Nightly Build / build (push) Successful in 7m42s
feat: let a background task ask the chat that started it, not just the Inbox
An async sub-agent runs in a session of its own, so the rich per-session events
that draw the inline approval card never reach the chat's socket — only the
id-only inbox lifecycle ones do. A task blocked on an approval was therefore
invisible in the conversation that started it, and the only way to unblock it
was to notice the sidebar badge and go to the Inbox.

The chat already shows what it handed off. This asks the same question of the
pending items: `GET /{source}/inbox` joins them against the sessions of this
conversation's running async jobs, so "whose is this" has one answer, in the
same place `/{source}/tasks` answers it for a task. The client is left with a
list to render, not a correlation to guess. The live path adds no event — the
existing `approval_requested` / `clarification_*` broadcasts already reach every
socket of the user, and re-reading the endpoint turns a nudge into something
renderable and survives a reload for free.

The card sits above the task strip rather than in the transcript: the task that
is asking may have been started twenty messages ago, and a card that scrolls
away is a card that gets missed. One at a time, with a count of what is behind
it — a blocked task stays blocked whether or not its card is on screen, so
stacking them would trade a readable chat for a queue nobody asked to see. And
it closes: the ✕ hides the card without resolving anything, leaving the item in
the Inbox, because a panel that cannot be moved takes the chat hostage.

`InboxCardsMixin` is the cards and their resolve calls, split out of
`InboxMixin` so the chat and the Inbox render the same approval rather than two
drifting copies of it; `_afterInboxResolve` is the only thing they disagree on.

Elicitations are left out: `PendingElicitationInfo` carries no `session_id`, so
there is nothing to attribute one to a task with.

Also: an async task's context label said "CronJob:", which sends whoever reads
the approval looking on the wrong page — and now says so next to the task's
real name.
2026-08-04 21:00:45 +01:00

101 lines
3.4 KiB
JavaScript

import { html, nothing } from 'lit';
import { InboxCardsMixin } from './inbox-cards.js';
import { t } from './i18n.js';
/**
* InboxMixin — the Inbox *page*: fetching every pending item of this user and
* laying them out in sections.
*
* The cards themselves, and the calls that resolve them, live in
* [`InboxCardsMixin`] — the chat renders the same ones for the pending items of
* the background tasks it started.
*
* Used by AgentInboxPage (full page) and DashboardPage (embedded section).
*/
export const InboxMixin = (Base) => class extends InboxCardsMixin(Base) {
static get properties() {
return {
...super.properties,
_inboxData: { state: true },
_inboxLoading: { state: true },
};
}
constructor() {
super();
this._inboxData = null;
this._inboxLoading = false;
}
// ── Data ──────────────────────────────────────────────────────────────────
async _loadInbox() {
try {
const res = await fetch('/api/inbox');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
this._inboxData = await res.json();
this._inboxError = null;
window.dispatchEvent(new CustomEvent('inbox-count', { detail: { count: this._inboxData.total } }));
} catch (e) {
this._inboxError = e.message;
}
}
/** Every resolved item changes this page's own list. */
async _afterInboxResolve() {
await this._loadInbox();
}
// ── Section renderer (used by both full page and home embed) ─────────────
_renderInboxSection() {
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`
${this._inboxError ? html`
<div class="alert alert-danger mx-3 mt-3">${this._inboxError}</div>
` : nothing}
${total === 0 ? html`
<div class="inbox-empty">
<i class="bi bi-inbox"></i>
<p>${t('inbox.empty')}</p>
</div>
` : html`
<div class="inbox-grid">
${approvals.length > 0 ? html`
<div class="inbox-section-header">
<h6>Approvals</h6>
<span class="badge bg-warning text-dark">${approvals.length}</span>
<span class="section-line"></span>
</div>
${approvals.map(item => this._renderApprovalCard(item))}
` : nothing}
${clarifications.length > 0 ? html`
<div class="inbox-section-header">
<h6>Questions</h6>
<span class="badge bg-info text-dark">${clarifications.length}</span>
<span class="section-line"></span>
</div>
${clarifications.map(item => this._renderClarificationCard(item))}
` : nothing}
${elicitations.length > 0 ? html`
<div class="inbox-section-header">
<h6>Secrets</h6>
<span class="badge bg-secondary">${elicitations.length}</span>
<span class="section-line"></span>
</div>
${elicitations.map(item => this._renderElicitationCard(item))}
` : nothing}
</div>
`}
`;
}
};