39b95c2ede
Pure `nix fmt` output from the commit before this one — no hand edits. 203 files: 52 md, 42 tsx, 32 js, 32 css, 21 ts, 13 html, 8 json, 3 mjs. Reproduce with `nix develop -c nix fmt` on the parent commit; the result should be byte-identical to this tree. None of the 13 `.prettierignore` entries appears here — verified by intersecting the changed-file list against the ignore file, with a control proving the intersection finds a match when one exists.
104 lines
3.2 KiB
TypeScript
104 lines
3.2 KiB
TypeScript
// <InboxPanel> — content rendered inside <SidePanel> for the inbox
|
|
// flyout. "mark all read" POSTs to the *dashboard's* origin (not this
|
|
// agent's own backend) via a plain `fetch()`, same as app.js's
|
|
// `buildInboxMarkAllRow` — unlike pause/resume this one's fine as a
|
|
// fetch even when the two are genuinely cross-origin, because
|
|
// `hive-c0re`'s `/api/agent/{name}/mark-all-read` route replies with
|
|
// JSON, not a redirect; in the common gateway-fronted deployment
|
|
// `dashboardBase` already resolves to `location.origin` anyway (see
|
|
// dashboardBase.ts), so it's same-origin in practice.
|
|
import { useState } from "preact/hooks";
|
|
import { useConfirmClick } from "../lib/useConfirmClick.js";
|
|
import type { InboxRow } from "../types.js";
|
|
|
|
export interface InboxPanelProps {
|
|
rows: InboxRow[];
|
|
label: string;
|
|
dashboardBase: string;
|
|
onCleared: () => void;
|
|
}
|
|
|
|
function fmtTs(unixSeconds: number): string {
|
|
return new Date(unixSeconds * 1000)
|
|
.toISOString()
|
|
.replace("T", " ")
|
|
.slice(5, 19);
|
|
}
|
|
|
|
export function InboxPanel({
|
|
rows,
|
|
label,
|
|
dashboardBase,
|
|
onCleared,
|
|
}: InboxPanelProps) {
|
|
const [status, setStatus] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
async function markAllRead() {
|
|
if (!dashboardBase || !label) {
|
|
setStatus("dashboard url / label unknown");
|
|
return;
|
|
}
|
|
setBusy(true);
|
|
setStatus("clearing…");
|
|
try {
|
|
const resp = await fetch(
|
|
`${dashboardBase}api/agent/${encodeURIComponent(label)}/mark-all-read`,
|
|
{
|
|
method: "POST",
|
|
},
|
|
);
|
|
if (resp.ok) {
|
|
const data = await resp.json().catch(() => ({}));
|
|
const n = Number((data as { marked?: number }).marked) || 0;
|
|
setStatus(`✓ marked ${n} as read`);
|
|
onCleared();
|
|
} else {
|
|
setStatus(`failed: http ${resp.status}`);
|
|
}
|
|
} catch (err) {
|
|
setStatus(`failed: ${err instanceof Error ? err.message : String(err)}`);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
const { armed, trigger } = useConfirmClick(markAllRead);
|
|
|
|
if (!rows.length) {
|
|
return <p class="side-panel-empty">inbox empty.</p>;
|
|
}
|
|
|
|
return (
|
|
<div class="agent-inbox">
|
|
<div class="inbox-mark-all-row">
|
|
<button
|
|
type="button"
|
|
class="inbox-mark-all-btn"
|
|
onClick={trigger}
|
|
disabled={busy}
|
|
title="mark every queued message for this agent as read — drains the host broker's pending + delivered-unacked rows. history shown here is the most-recent-N regardless of state, so the list itself stays visible."
|
|
>
|
|
{armed ? "sure? click again" : "✓ mark all read"}
|
|
</button>
|
|
<span class="inbox-mark-status">{status}</span>
|
|
</div>
|
|
<ul>
|
|
{rows.map((m) => (
|
|
<li
|
|
key={m.id}
|
|
class={m.in_reply_to != null ? "inbox-reply" : undefined}
|
|
>
|
|
{m.in_reply_to != null && (
|
|
<span class="inbox-reply-tag">↳ reply · </span>
|
|
)}
|
|
<span class="inbox-ts">{fmtTs(m.at)}</span>{" "}
|
|
<span class="inbox-from">{m.from}</span>{" "}
|
|
<span class="inbox-sep">→</span>{" "}
|
|
<span class="inbox-body">{m.body}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|