@rightkit/social-ui 0.0.0-stage → 0.1.0

package/dist/screens/AnalyticsScreen.js

@@ -0,0 +1,64 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { EmptyState, Field, PageShell, SkeletonRows, Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow } from "@rightkit/react-shell/react";
+import { ScopeSelect } from "../components/ScopeSelect.js";
+import { LoadError, MockBanner } from "../components/Shared.js";
+import { useAsync } from "../hooks/useAsync.js";
+import { groupDigits, instantLabel, } from "../data/index.js";
+import { ANALYTICS_UNAVAILABLE, analyticsSourceText, platformName, postAgeText } from "./labels.js";
+export function AnalyticsScreen({ source, rev }) {
+    const scopes = useAsync(() => source.listScopes(), [source, rev]);
+    const [picked, setPicked] = useState(null);
+    const scopeList = scopes.value ?? [];
+    const scopeId = scopeList.find((s) => s.id === picked)?.id ?? scopeList[0]?.id ?? null;
+    return (_jsxs(PageShell, { title: "Analytics", subtitle: "Read only. The numbers stored for each published post of one channel: the latest value of each metric with its age and source, the observation history of one post, and the manual imports. Nothing here pulls, imports, ranks, averages or compares numbers.", children: [source.kind === "mock" ? _jsx(MockBanner, {}) : null, scopes.state.status === "error" ? (_jsx(LoadError, { message: "Could not read the channels from the daemon.", onRetry: scopes.reload })) : scopes.value === null ? (_jsx(SkeletonRows, { label: "Loading channels", rows: 2 })) : scopeList.length === 0 || scopeId === null ? (_jsx(EmptyState, { title: "No channels yet", children: _jsx("p", { children: "Analytics is kept per channel once one is set up." }) })) : (_jsxs(_Fragment, { children: [_jsx(ScopeSelect, { scopes: scopeList, value: scopeId, onChange: (id) => setPicked(id) }), _jsx(AnalyticsView, { source: source, rev: rev, scopeId: scopeId }, scopeId)] }))] }));
+}
+function AnalyticsView({ source, rev, scopeId }) {
+    const posts = useAsync(() => source.listAnalyticsPosts(scopeId), [source, rev, scopeId]);
+    const imports = useAsync(() => source.listMetricImports(scopeId), [source, rev, scopeId]);
+    const [picked, setPicked] = useState(null);
+    if (posts.state.status === "error") {
+        return _jsx(LoadError, { message: "Could not read the published posts from the daemon.", onRetry: posts.reload });
+    }
+    if (imports.state.status === "error") {
+        return _jsx(LoadError, { message: "Could not read the manual imports from the daemon.", onRetry: imports.reload });
+    }
+    if (posts.state.status === "loading" || imports.state.status === "loading") {
+        return _jsx(SkeletonRows, { label: "Loading analytics", rows: 3 });
+    }
+    const postList = posts.state.value;
+    const importList = imports.state.value;
+    if (postList.length === 0 && importList.length === 0) {
+        return (_jsx(EmptyState, { title: "No numbers yet", children: _jsx("p", { children: "No numbers have been pulled or imported for this channel yet. This is not an error." }) }));
+    }
+    const selected = postList.find((p) => p.jobId === picked) ?? postList[0];
+    return (_jsxs(_Fragment, { children: [_jsx("p", { className: "op-hint", children: "Numbers are pulled on the server (the daemon), not from this screen. This screen pulls nothing and imports nothing. Each value is shown exactly as stored. A metric the platform does not provide says so, and is never shown as zero." }), _jsxs("section", { "aria-labelledby": "analytics-latest-title", children: [_jsxs("h2", { id: "analytics-latest-title", className: "op-section-title", children: ["Published posts (", groupDigits(String(postList.length)), ")"] }), postList.length === 0 ? (_jsx("p", { className: "op-hint", children: "No published post has a number stored yet." })) : (_jsx(LatestTable, { posts: postList }))] }), postList.length === 0 ? null : (_jsxs("section", { "aria-labelledby": "analytics-history-title", children: [_jsx("h2", { id: "analytics-history-title", className: "op-section-title", children: "Observation history" }), _jsx("p", { className: "op-hint", children: "Every stored observation of the chosen post, oldest first. Each row names the pull or the import that stored it." }), _jsx(Field, { label: "Post", children: ({ id, "aria-describedby": describedBy }) => (_jsx("select", { id: id, "aria-describedby": describedBy, className: "op-select", value: selected.jobId, onChange: (e) => setPicked(e.target.value), children: postList.map((post) => (_jsxs("option", { value: post.jobId, children: [platformName(post.platform), " post ", post.remotePostId] }, post.jobId))) })) }), _jsx(PostHistory, { source: source, rev: rev, scopeId: scopeId, jobId: selected.jobId }, selected.jobId)] })), _jsx(ImportsSection, { imports: importList })] }));
+}
+/** The latest value of each metric of each post. A post with no metric says so in its own row. */
+function LatestTable({ posts }) {
+    return (_jsx("div", { className: "op-table-scroll", children: _jsxs(Table, { "aria-labelledby": "analytics-latest-title", children: [_jsx(TableCaption, { children: "Latest stored value of each metric, by published post" }), _jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: "Post" }), _jsx(TableHeaderCell, { children: "Metric" }), _jsx(TableHeaderCell, { children: "Window" }), _jsx(TableHeaderCell, { align: "end", children: "Latest value" }), _jsx(TableHeaderCell, { children: "Observed (UTC)" }), _jsx(TableHeaderCell, { children: "Age of the post at that observation" }), _jsx(TableHeaderCell, { children: "Source" })] }) }), _jsx(TableBody, { children: posts.map((post) => (_jsx(PostRows, { post: post }, `post:${post.jobId}`))) })] }) }));
+}
+function PostRows({ post }) {
+    const head = (_jsxs(TableCell, { rowHeader: true, rowSpan: Math.max(post.metrics.length, 1), children: [_jsxs("div", { children: [platformName(post.platform), ", post ", _jsx("span", { className: "op-mono", children: post.remotePostId })] }), _jsxs("div", { children: ["Published (UTC): ", instantLabel(post.publishedAtUtc, "UTC")] })] }));
+    if (post.metrics.length === 0) {
+        return (_jsxs(TableRow, { children: [head, _jsx(TableCell, { colSpan: 6, children: "No number is stored for this post yet." })] }));
+    }
+    return (_jsx(_Fragment, { children: post.metrics.map((metric, index) => (_jsxs(TableRow, { children: [index === 0 ? head : null, _jsx(TableCell, { className: "op-mono", children: metric.metric }), _jsx(TableCell, { children: metric.window ?? "No window" }), metric.state === "value" ? (_jsx(TableCell, { numeric: true, className: "op-mono", children: metric.value })) : (_jsx(TableCell, { children: ANALYTICS_UNAVAILABLE })), _jsx(TableCell, { className: "op-mono", children: instantLabel(metric.observedAtUtc, "UTC") }), _jsx(TableCell, { className: "op-mono", children: postAgeText(metric.postAgeSeconds) }), _jsx(TableCell, { children: analyticsSourceText(metric.source, metric.importId) })] }, `metric:${metric.metric}:${metric.window ?? "no window"}:${metric.source}`))) }));
+}
+/** Every stored observation of one post, oldest first, with the pull or import that stored it. */
+function PostHistory({ source, rev, scopeId, jobId, }) {
+    const history = useAsync(() => source.listAnalyticsObservations(scopeId, jobId), [source, rev, scopeId, jobId]);
+    if (history.state.status === "error") {
+        return _jsx(LoadError, { message: "Could not read the observation history from the daemon.", onRetry: history.reload });
+    }
+    if (history.state.status === "loading") {
+        return _jsx(SkeletonRows, { label: "Loading the observation history", rows: 3 });
+    }
+    const rows = history.state.value;
+    if (rows.length === 0)
+        return _jsx("p", { className: "op-hint", children: "No observation is stored for this post." });
+    return (_jsx("div", { className: "op-table-scroll", children: _jsxs(Table, { "aria-labelledby": "analytics-history-title", children: [_jsx(TableCaption, { children: "Every stored observation of this post, oldest first" }), _jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: "Observed (UTC)" }), _jsx(TableHeaderCell, { children: "Metric" }), _jsx(TableHeaderCell, { children: "Window" }), _jsx(TableHeaderCell, { align: "end", children: "Value" }), _jsx(TableHeaderCell, { children: "Source" }), _jsx(TableHeaderCell, { children: "Pull or import" })] }) }), _jsx(TableBody, { children: rows.map((row, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, { rowHeader: true, className: "op-mono", children: instantLabel(row.observedAtUtc, "UTC") }), _jsx(TableCell, { className: "op-mono", children: row.metric }), _jsx(TableCell, { children: row.window ?? "No window" }), row.state === "value" ? (_jsx(TableCell, { numeric: true, className: "op-mono", children: row.value })) : (_jsx(TableCell, { children: ANALYTICS_UNAVAILABLE })), _jsx(TableCell, { children: analyticsSourceText(row.source, row.importId) }), _jsx(TableCell, { className: "op-mono", children: row.importId !== null ? `Import ${row.importId}` : row.pullId !== null ? `Pull ${row.pullId}` : "Not stated" })] }, `observation:${index}`))) })] }) }));
+}
+function ImportsSection({ imports }) {
+    return (_jsxs("section", { "aria-labelledby": "analytics-imports-title", children: [_jsxs("h2", { id: "analytics-imports-title", className: "op-section-title", children: ["Manual imports (", groupDigits(String(imports.length)), ")"] }), _jsx("p", { className: "op-hint", children: "A manual import is a file the channel owner exported by hand and the daemon read. Its values appear in the tables above, with the import id. This screen imports nothing." }), imports.length === 0 ? (_jsx("p", { className: "op-hint", children: "No manual import is stored for this channel." })) : (_jsx("div", { className: "op-table-scroll", children: _jsxs(Table, { "aria-labelledby": "analytics-imports-title", children: [_jsx(TableCaption, { children: "Manual imports in this channel, by import id" }), _jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: "Import id" }), _jsx(TableHeaderCell, { children: "Platform" }), _jsx(TableHeaderCell, { align: "end", children: "Rows" }), _jsx(TableHeaderCell, { align: "end", children: "Values" }), _jsx(TableHeaderCell, { children: "Source note" }), _jsx(TableHeaderCell, { children: "Imported (UTC)" })] }) }), _jsx(TableBody, { children: imports.map((record) => (_jsxs(TableRow, { children: [_jsx(TableCell, { rowHeader: true, className: "op-mono", children: record.importId }), _jsx(TableCell, { children: platformName(record.platform) }), _jsx(TableCell, { numeric: true, children: groupDigits(String(record.rowsWritten)) }), _jsx(TableCell, { numeric: true, children: groupDigits(String(record.observationsWritten)) }), _jsx(TableCell, { children: record.sourceNote }), _jsx(TableCell, { className: "op-mono", children: instantLabel(record.createdAtUtc, "UTC") })] }, `import:${record.importId}`))) })] }) }))] }));
+}

package/dist/screens/ApprovalsScreen.d.ts

@@ -0,0 +1,10 @@
+import { type DataSource } from "../data/index.js";
+interface Props {
+    source: DataSource;
+    rev: number;
+    /** Called after any write so the app re-reads counts and every screen. */
+    onChanged: () => void;
+    initialJobId: string | null;
+}
+export declare function ApprovalsScreen({ source, rev, onChanged, initialJobId }: Props): import("react").JSX.Element;
+export {};

package/dist/screens/ApprovalsScreen.js

@@ -0,0 +1,144 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Badge, Button, ConfirmDialog, Field, ModalShell, Notice, PageShell, SegmentedControl, SkeletonRows } from "@rightkit/react-shell/react";
+import { AccountChip, LoadError, MockBanner, PublishProgressView } from "../components/Shared.js";
+import { useAsync } from "../hooks/useAsync.js";
+import { accountOrdinals, awaitingDecision, charCount, formatCount, instantLabel, isApproved, mediaReady, shortHash, } from "../data/index.js";
+import { FORMAT_LABEL, MEDIA_STATUS_LABEL, PLATFORM_LABEL, REJECT_LABEL, STATE_LABEL, approvalText } from "./labels.js";
+const WIDE_RANGE = { fromUtc: "2026-01-01T00:00:00Z", toUtc: "2027-01-01T00:00:00Z" };
+const REJECT_ORDER = ["wrong_content", "wrong_account", "timing", "media_issue", "other"];
+/** Formats whole milliseconds as m:ss. Fractional seconds are dropped, so 59999 ms reads 0:59. */
+function duration(ms) {
+    if (ms === null)
+        return "still image";
+    const total = Math.floor(ms / 1000);
+    const m = Math.floor(total / 60);
+    const s = String(total % 60).padStart(2, "0");
+    return `${m}:${s}`;
+}
+/** Why approve is unavailable, in words. Null when approve can be pressed. */
+function approveBlock(job) {
+    switch (job.approval.status) {
+        case "approved":
+            return `Already approved at revision ${job.approval.approvedRevision}. Any change to the caption, media or policy invalidates it.`;
+        case "rejected":
+            return "Rejected. Revise the brief to bring it back for approval.";
+        case "none":
+            return "No approval requested yet for this job.";
+        default:
+            break;
+    }
+    if (!mediaReady(job))
+        return "Media not ready on server, so approval is disabled until every item is ready.";
+    return null;
+}
+export function ApprovalsScreen({ source, rev, onChanged, initialJobId }) {
+    const [filter, setFilter] = useState("decision");
+    const [selectedId, setSelectedId] = useState(initialJobId);
+    const [confirmApprove, setConfirmApprove] = useState(false);
+    const [rejecting, setRejecting] = useState(false);
+    const [notice, setNotice] = useState(null);
+    const [busy, setBusy] = useState(false);
+    useEffect(() => {
+        setNotice(null);
+    }, [selectedId]);
+    const list = useAsync(async () => {
+        const [accounts, jobs] = await Promise.all([source.listAccounts(), source.listJobs(WIDE_RANGE)]);
+        return { accounts, jobs };
+    }, [source, rev]);
+    // The preview always reads the job fresh. Approve and reject use the revision on screen, so an
+    // approval never rests on a stale snapshot.
+    const preview = useAsync(() => (selectedId ? source.getJob(selectedId) : Promise.resolve(null)), [source, selectedId, rev]);
+    // list.value keeps the last good data during a reload, so the preview never blanks mid-approve.
+    const accounts = list.value?.accounts ?? [];
+    const allJobs = list.value?.jobs ?? [];
+    const ordinals = useMemo(() => accountOrdinals(accounts), [accounts]);
+    const accountById = useMemo(() => new Map(accounts.map((a) => [a.id, a])), [accounts]);
+    const decisionCount = allJobs.filter(awaitingDecision).length;
+    const filtered = allJobs.filter((job) => {
+        if (filter === "decision")
+            return awaitingDecision(job);
+        if (filter === "approved")
+            return isApproved(job);
+        return true;
+    });
+    // Jobs whose account is not in the accounts list. They are listed on their own, not dropped.
+    const orphans = filtered.filter((job) => !accountById.has(job.accountId));
+    const job = preview.state.status === "ready" ? preview.state.value : null;
+    const account = job ? accountById.get(job.accountId) ?? null : null;
+    const ordinal = account ? ordinals.get(account.id) : undefined;
+    const destination = account ? `${PLATFORM_LABEL[account.platform]} ${account.handle}` : "this account";
+    async function approve(current) {
+        setConfirmApprove(false);
+        setBusy(true);
+        const result = await source.approve(current.id, current.revision, current.accountId);
+        setBusy(false);
+        setNotice(result.ok
+            ? { tone: "ok", text: `Approved revision ${current.revision} for ${destination}. It is scheduled.` }
+            : { tone: "bad", text: result.error.message });
+        onChanged();
+    }
+    async function reject(current, code, note) {
+        setRejecting(false);
+        setBusy(true);
+        const result = await source.reject(current.id, {
+            revision: current.revision,
+            accountId: current.accountId,
+            code,
+            note,
+        });
+        setBusy(false);
+        setNotice(result.ok
+            ? { tone: "ok", text: `Rejected for ${destination}. Reason: ${REJECT_LABEL[code]}. Revision ${result.value.revision}.` }
+            : { tone: "bad", text: result.error.message });
+        onChanged();
+    }
+    async function simulateEdit(current) {
+        if (!source.mock)
+            return;
+        const edited = `${current.caption}\n\nEdited on another device: one more line for the community.`;
+        const result = await source.mock.simulateCaptionChange(current.id, edited);
+        setNotice(result.ok
+            ? { tone: "bad", text: "The caption changed on another device. Any approval for the old text is now invalid." }
+            : { tone: "bad", text: result.error.message });
+        onChanged();
+    }
+    /** One job's row in the inbox. A job whose account is not in the accounts list also shows its raw account id. */
+    function jobRow(row) {
+        const approval = approvalText(row.approval);
+        return (_jsx("li", { children: _jsxs(Button, { type: "button", variant: "secondary", className: "op-row", "aria-current": row.id === selectedId ? "true" : undefined, onClick: () => setSelectedId(row.id), children: [_jsx("span", { className: "op-row__time", children: instantLabel(row.scheduledAtUtc, row.timeZone) }), _jsxs("span", { className: "op-row__meta", children: [FORMAT_LABEL[row.format], " \u00B7 ", STATE_LABEL[row.state].text, accountById.has(row.accountId) ? null : (_jsxs(_Fragment, { children: [" ", "\u00B7 account id ", _jsx("span", { className: "op-mono", children: row.accountId })] }))] }), _jsx(Badge, { tone: approval.tone, children: approval.text })] }) }, row.id));
+    }
+    const canApprove = job !== null && awaitingDecision(job) && mediaReady(job);
+    const canReject = job !== null && (awaitingDecision(job) || isApproved(job));
+    return (_jsxs(PageShell, { title: "Approvals", subtitle: "The only place content becomes publishable. An approval binds one exact revision of one job.", children: [source.kind === "mock" ? _jsx(MockBanner, {}) : null, _jsx("div", { className: "op-inbox__filters", children: _jsx(SegmentedControl, { label: "Show", value: filter, onChange: setFilter, options: [
+                        { value: "decision", label: `Needs decision (${decisionCount})` },
+                        { value: "approved", label: "Approved" },
+                        { value: "all", label: "All" },
+                    ] }) }), _jsxs("div", { className: "op-inbox", children: [_jsxs("section", { className: "op-inbox__list", "aria-labelledby": "inbox-list-title", children: [_jsx("h2", { id: "inbox-list-title", className: "op-section-title", children: "Jobs" }), list.state.status === "error" ? (_jsx(LoadError, { message: "Could not read the approval inbox from the daemon.", onRetry: list.reload })) : list.state.status === "loading" && allJobs.length === 0 ? (_jsx(SkeletonRows, { label: "Loading jobs", rows: 4 })) : filtered.length === 0 ? (_jsx("p", { className: "op-hint", children: "Nothing in this view." })) : (_jsxs(_Fragment, { children: [accounts.map((a) => {
+                                        const rows = filtered.filter((j) => j.accountId === a.id);
+                                        if (rows.length === 0)
+                                            return null;
+                                        return (_jsxs("section", { className: "op-inbox__group", "aria-label": `${ordinals.get(a.id)?.label ?? "Account"}, ${a.handle}`, children: [_jsx("div", { className: "op-inbox__group-head", children: _jsx(AccountChip, { account: a, ordinal: ordinals.get(a.id) }) }), _jsx("ul", { children: rows.map((row) => jobRow(row)) })] }, a.id));
+                                    }), orphans.length > 0 ? (_jsxs("section", { className: "op-inbox__group", "aria-label": "Jobs whose account is not in the accounts list", children: [_jsx("div", { className: "op-inbox__group-head", children: _jsx("p", { className: "op-hint", children: "Account not found in the accounts list" }) }), _jsx("ul", { children: orphans.map((row) => jobRow(row)) })] })) : null] }))] }), _jsxs("section", { className: "op-inbox__preview", "aria-label": "Variant preview", children: [selectedId === null ? (_jsx("p", { className: "op-hint", children: "Select a job to see the exact variant that would publish." })) : preview.state.status === "error" ? (_jsx(LoadError, { message: "Could not load this job.", onRetry: preview.reload })) : preview.state.status === "loading" ? (_jsx(SkeletonRows, { label: "Fetching the job and its media by digest", rows: 5 })) : job !== null && account === null ? (_jsxs(Notice, { tone: "bad", children: ["Account not found in the accounts list (account id ", _jsx("span", { className: "op-mono", children: job.accountId }), "). Nothing was changed."] })) : job === null || account === null || ordinal === undefined ? (_jsx(Notice, { tone: "bad", children: "This job is no longer available. Nothing was changed." })) : (_jsxs("article", { className: "op-preview", "aria-labelledby": "preview-title", children: [_jsxs("header", { className: `op-preview__account op-band-${account.band}`, children: [_jsx("p", { className: "op-kicker", children: "Destination account" }), _jsxs("h2", { id: "preview-title", className: "op-preview__title", children: [PLATFORM_LABEL[account.platform], ": ", account.displayName, " ", account.handle] }), _jsxs("p", { children: [ordinal.label, " of ", ordinal.of, " on ", PLATFORM_LABEL[account.platform], " \u00B7 ", account.venture.name, " \u00B7 id ending", " ", account.idSuffix] })] }), _jsxs("section", { "aria-labelledby": "pv-when", children: [_jsx("h3", { id: "pv-when", className: "op-section-title", children: "When" }), _jsx("p", { children: instantLabel(job.scheduledAtUtc, job.timeZone) }), job.dst.kind !== "none" ? _jsx("p", { children: job.dst.note }) : null] }), job.publish ? (_jsxs("section", { "aria-labelledby": "pv-publish", children: [_jsx("h3", { id: "pv-publish", className: "op-section-title", children: "Daemon publish" }), _jsx(PublishProgressView, { progress: job.publish, timeZone: job.timeZone })] })) : null, _jsxs("section", { "aria-labelledby": "pv-caption", children: [_jsx("h3", { id: "pv-caption", className: "op-section-title", children: "Caption as it will be posted" }), _jsxs("p", { className: "op-count", children: [formatCount(charCount(job.caption)), " characters \u00B7 fingerprint", " ", _jsx("code", { children: job.captionDigest })] }), _jsx("div", { className: "op-caption", tabIndex: 0, role: "region", "aria-label": "Caption text", children: job.caption })] }), _jsxs("section", { "aria-labelledby": "pv-comment", children: [_jsx("h3", { id: "pv-comment", className: "op-section-title", children: "First comment or link" }), _jsx("p", { children: job.firstComment ?? "None" })] }), _jsxs("section", { "aria-labelledby": "pv-media", children: [_jsx("h3", { id: "pv-media", className: "op-section-title", children: "Media" }), _jsx("ul", { className: "op-media", children: job.mediaItems.map((m, index) => (_jsxs("li", { children: [_jsx("span", { className: "op-mono", children: shortHash(m.hash) }), " ", m.kind === "video" ? "Video" : "Image", " \u00B7", " ", duration(m.durationMs !== undefined ? m.durationMs : m.durationSeconds === null ? null : Math.round(m.durationSeconds * 1000)), m.dimensions ? ` · ${m.dimensions}` : "", " \u00B7 ", MEDIA_STATUS_LABEL[m.status], m.status === "uploading" && m.uploadPercent !== null ? ` ${m.uploadPercent}%` : "", _jsxs("details", { children: [_jsx("summary", { children: "Full digest" }), _jsx("code", { className: "op-digest", children: m.hash })] })] }, `${m.hash}#${index}`))) })] }), _jsxs("section", { "aria-labelledby": "pv-settings", children: [_jsx("h3", { id: "pv-settings", className: "op-section-title", children: "Settings" }), _jsx("ul", { children: job.settings.map((s, index) => (_jsx("li", { children: s }, `${s}#${index}`))) })] }), _jsxs("section", { "aria-labelledby": "pv-policy", children: [_jsx("h3", { id: "pv-policy", className: "op-section-title", children: "Policy and revision" }), _jsxs("p", { children: ["Policy ", job.policyRevision === null ? "revision not stated" : `r${job.policyRevision}`, ". Approving revision ", job.revision, ". Job state: ", STATE_LABEL[job.state].text, "."] }), _jsx("p", { children: _jsx(Badge, { tone: approvalText(job.approval).tone, children: approvalText(job.approval).text }) }), job.approval.status === "invalidated" ? (_jsxs("p", { role: "status", className: "op-invalid", children: ["The caption changed after revision ", job.approval.approvedRevision, " was approved. This job will not publish until revision ", job.revision, " is approved."] })) : null, job.approval.status === "rejected" && job.approval.note ? _jsxs("p", { children: ["Note: ", job.approval.note] }) : null, job.state === "outcome_unknown" ? (_jsx("p", { role: "alert", className: "op-invalid", children: "The platform may have accepted this post. No retry until reconciled." })) : null] }), _jsxs("section", { className: "op-decide", "aria-labelledby": "pv-decide", children: [_jsx("h3", { id: "pv-decide", className: "op-section-title", children: "Decision" }), approveBlock(job) ? _jsx("p", { className: "op-hint", children: approveBlock(job) }) : null, _jsxs("div", { className: "op-decide__buttons", children: [_jsx(Button, { variant: "primary", disabled: !canApprove || busy, onClick: () => setConfirmApprove(true), children: `Approve for ${account.handle} on ${PLATFORM_LABEL[account.platform]}` }), _jsx(Button, { variant: "danger", disabled: !canReject || busy, onClick: () => setRejecting(true), children: `Reject for ${account.handle} on ${PLATFORM_LABEL[account.platform]}` }), source.mock ? (_jsx(Button, { variant: "secondary", disabled: busy, onClick: () => simulateEdit(job), children: "Simulate an edit from another device" })) : null] })] })] })), _jsx("div", { "aria-live": "polite", children: notice ? (_jsx(Notice, { tone: notice.tone, className: "op-notice", children: notice.text })) : null })] })] }), confirmApprove && job && account && ordinal ? (_jsx(ConfirmDialog, { title: `Approve revision ${job.revision} for ${account.handle} on ${PLATFORM_LABEL[account.platform]}?`, description: _jsxs(_Fragment, { children: [_jsxs("span", { className: "op-dialog-line", children: ["Account: ", account.displayName, " (", account.handle, "), ", ordinal.label.toLowerCase(), " of ", ordinal.of, " on", " ", PLATFORM_LABEL[account.platform], "."] }), _jsxs("span", { className: "op-dialog-line", children: ["It publishes ", instantLabel(job.scheduledAtUtc, job.timeZone), ".", " ", job.policyRevision === null ? "Policy revision not stated." : `Policy r${job.policyRevision}.`] }), _jsx("span", { className: "op-dialog-line", children: "Any later change to the caption, media or policy invalidates this approval." })] }), confirmLabel: `Approve for ${account.handle} on ${PLATFORM_LABEL[account.platform]}`, cancelLabel: "Cancel", onConfirm: () => approve(job), onCancel: () => setConfirmApprove(false) })) : null, rejecting && job && account ? (_jsx(RejectDialog, { handle: account.handle, platform: PLATFORM_LABEL[account.platform], onCancel: () => setRejecting(false), onSubmit: (code, note) => reject(job, code, note) })) : null] }));
+}
+function RejectDialog({ handle, platform, onSubmit, onCancel, }) {
+    const [code, setCode] = useState(null);
+    const [note, setNote] = useState("");
+    const [error, setError] = useState(null);
+    function submit(event) {
+        event.preventDefault();
+        if (code === null) {
+            setError("Choose a reason before rejecting.");
+            return;
+        }
+        if (code === "other" && note.trim() === "") {
+            setError("Add a note when the reason is Other.");
+            return;
+        }
+        onSubmit(code, note.trim());
+    }
+    return (_jsx(ModalShell, { label: `Reject for ${handle} on ${platform}`, onClose: onCancel, width: 480, role: "alertdialog", children: _jsxs("form", { className: "op-form", onSubmit: submit, noValidate: true, children: [_jsx("h2", { className: "op-section-title", children: `Reject for ${handle} on ${platform}` }), _jsxs("fieldset", { className: "op-fieldset", "aria-describedby": error ? "reject-error" : undefined, children: [_jsx("legend", { children: "Reason" }), REJECT_ORDER.map((r) => (_jsxs("label", { className: "op-radio", children: [_jsx("input", { type: "radio", name: "reject-reason", value: r, checked: code === r, onChange: () => {
+                                        setCode(r);
+                                        setError(null);
+                                    } }), REJECT_LABEL[r]] }, r)))] }), _jsx(Field, { label: "Note (optional, required for Other)", children: ({ id }) => (_jsx("textarea", { id: id, className: "op-textarea", rows: 3, value: note, onChange: (e) => setNote(e.target.value) })) }), error ? (_jsx("p", { id: "reject-error", role: "alert", className: "op-error-inline", children: error })) : null, _jsxs("div", { className: "op-dialog__actions", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onCancel, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "danger", children: `Reject for ${handle} on ${platform}` })] })] }) }));
+}

package/dist/screens/BriefsScreen.d.ts

@@ -0,0 +1,7 @@
+import { type DataSource } from "../data/index.js";
+interface Props {
+    source: DataSource;
+    rev: number;
+}
+export declare function BriefsScreen({ source, rev }: Props): import("react").JSX.Element;
+export {};

package/dist/screens/BriefsScreen.js

@@ -0,0 +1,83 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Badge, EmptyState, Field, PageShell, SkeletonRows, Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow } from "@rightkit/react-shell/react";
+import { ScopeSelect } from "../components/ScopeSelect.js";
+import { LoadError, MockBanner } from "../components/Shared.js";
+import { useAsync } from "../hooks/useAsync.js";
+import { groupDigits, instantLabel, } from "../data/index.js";
+import { BRIEF_STATE_LABEL, DISPATCH_OUTCOME_LABEL } from "./labels.js";
+export function BriefsScreen({ source, rev }) {
+    const scopes = useAsync(() => source.listScopes(), [source, rev]);
+    const [picked, setPicked] = useState(null);
+    const scopeList = scopes.value ?? [];
+    const scopeId = scopeList.find((s) => s.id === picked)?.id ?? scopeList[0]?.id ?? null;
+    return (_jsxs(PageShell, { title: "Briefs and deliveries", subtitle: "Read only. The outgoing content briefs of one channel, the delivery envelope each engine returned, and every dispatch attempt. Nothing here issues a brief, accepts a delivery or runs an engine.", children: [source.kind === "mock" ? _jsx(MockBanner, {}) : null, scopes.state.status === "error" ? (_jsx(LoadError, { message: "Could not read the channels from the daemon.", onRetry: scopes.reload })) : scopes.value === null ? (_jsx(SkeletonRows, { label: "Loading channels", rows: 2 })) : scopeList.length === 0 || scopeId === null ? (_jsx(EmptyState, { title: "No channels yet", children: _jsx("p", { children: "Outgoing briefs are kept per channel once one is set up." }) })) : (_jsxs(_Fragment, { children: [_jsx(ScopeSelect, { scopes: scopeList, value: scopeId, onChange: (id) => setPicked(id) }), _jsx(BriefsView, { source: source, rev: rev, scopeId: scopeId }, scopeId)] }))] }));
+}
+function BriefsView({ source, rev, scopeId }) {
+    const { state, reload, value } = useAsync(() => source.listBriefs(scopeId), [source, rev, scopeId]);
+    const [picked, setPicked] = useState(null);
+    if (state.status === "error") {
+        return _jsx(LoadError, { message: "Could not read the outgoing briefs from the daemon.", onRetry: reload });
+    }
+    if (value === null)
+        return _jsx(SkeletonRows, { label: "Loading outgoing briefs", rows: 3 });
+    if (value.length === 0) {
+        return (_jsx(EmptyState, { title: "No outgoing briefs yet", children: _jsx("p", { children: "This channel has no outgoing brief. A brief is issued on the daemon host or with the CLI, not here. This is not an error." }) }));
+    }
+    const selected = value.find((b) => b.requestId === picked) ?? value[0];
+    return (_jsxs(_Fragment, { children: [_jsxs("section", { "aria-labelledby": "briefs-list-title", children: [_jsxs("h2", { id: "briefs-list-title", className: "op-section-title", children: ["Outgoing briefs (", value.length, ")"] }), _jsx("div", { className: "op-table-scroll", children: _jsxs(Table, { "aria-labelledby": "briefs-list-title", children: [_jsx(TableCaption, { children: "Outgoing briefs in this channel" }), _jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: "Request id" }), _jsx(TableHeaderCell, { children: "Brief id" }), _jsx(TableHeaderCell, { align: "end", children: "Revision" }), _jsx(TableHeaderCell, { children: "State" }), _jsx(TableHeaderCell, { children: "Created (UTC)" })] }) }), _jsx(TableBody, { children: value.map((brief) => {
+                                        const label = BRIEF_STATE_LABEL[brief.state];
+                                        return (_jsxs(TableRow, { children: [_jsx(TableCell, { rowHeader: true, className: "op-mono", children: brief.requestId }), _jsx(TableCell, { className: "op-mono", children: brief.briefId }), _jsx(TableCell, { numeric: true, children: groupDigits(String(brief.revision)) }), _jsx(TableCell, { children: _jsx(Badge, { tone: label.tone, children: label.text }) }), _jsx(TableCell, { className: "op-mono", children: instantLabel(brief.createdAtUtc, "UTC") })] }, brief.requestId));
+                                    }) })] }) })] }), _jsxs("section", { "aria-labelledby": "brief-detail-heading", children: [_jsx("h2", { id: "brief-detail-heading", className: "op-section-title", children: "Selected brief" }), _jsx(Field, { label: "Brief", children: ({ id, "aria-describedby": describedBy }) => (_jsx("select", { id: id, "aria-describedby": describedBy, className: "op-select", value: selected.requestId, onChange: (e) => setPicked(e.target.value), children: value.map((brief) => (_jsxs("option", { value: brief.requestId, children: [brief.requestId, " (", brief.briefId, ")"] }, brief.requestId))) })) }), _jsx(BriefDetail, { source: source, rev: rev, scopeId: scopeId, requestId: selected.requestId }, selected.requestId)] })] }));
+}
+function BriefDetail({ source, rev, scopeId, requestId, }) {
+    const brief = useAsync(() => source.getBrief(scopeId, requestId), [source, rev, scopeId, requestId]);
+    const runs = useAsync(() => source.listDispatchAttempts(scopeId, requestId), [source, rev, scopeId, requestId]);
+    const envelopes = useAsync(() => source.listDeliveries(scopeId), [source, rev, scopeId]);
+    if (brief.state.status === "error") {
+        return _jsx(LoadError, { message: "Could not read this brief from the daemon.", onRetry: brief.reload });
+    }
+    if (runs.state.status === "error") {
+        return _jsx(LoadError, { message: "Could not read the dispatch attempts from the daemon.", onRetry: runs.reload });
+    }
+    if (envelopes.state.status === "error") {
+        return _jsx(LoadError, { message: "Could not read the deliveries from the daemon.", onRetry: envelopes.reload });
+    }
+    if (brief.state.status === "loading" || runs.state.status === "loading" || envelopes.state.status === "loading") {
+        return _jsx(SkeletonRows, { label: "Loading the brief", rows: 3 });
+    }
+    const record = brief.state.value;
+    if (record === null)
+        return _jsx("p", { className: "op-hint", children: "This brief is no longer in this channel." });
+    const attempts = runs.state.value;
+    const requestEnvelopes = envelopes.state.value.filter((d) => d.requestId === requestId);
+    const state = BRIEF_STATE_LABEL[record.state];
+    const summary = record.summary;
+    return (_jsxs("article", { className: "op-detail", "aria-labelledby": "brief-detail-title", children: [_jsx("h3", { id: "brief-detail-title", className: "op-detail__title", children: record.requestId }), _jsx("div", { className: "op-badges", children: _jsx(Badge, { tone: state.tone, children: state.text }) }), _jsxs("dl", { className: "op-dl", children: [_jsx("dt", { children: "Brief id" }), _jsx("dd", { className: "op-mono", children: record.briefId }), _jsx("dt", { children: "Revision" }), _jsx("dd", { children: groupDigits(String(record.revision)) }), _jsx("dt", { children: "Created (UTC)" }), _jsx("dd", { children: instantLabel(record.createdAtUtc, "UTC") }), _jsx("dt", { children: "Last changed (UTC)" }), _jsx("dd", { children: instantLabel(record.updatedAtUtc, "UTC") })] }), _jsx("h4", { className: "op-section-title", children: "Document summary" }), _jsxs("dl", { className: "op-dl", children: [_jsx("dt", { children: "Brief type" }), _jsx("dd", { children: orNotStated(summary.briefType) }), _jsx("dt", { children: "Platforms" }), _jsx("dd", { children: listOrNone(summary.platforms) }), _jsx("dt", { children: "Deliverables" }), _jsx("dd", { children: listOrNone(summary.deliverables) }), _jsx("dt", { children: "Hook" }), _jsx("dd", { children: orNotStated(summary.hook) }), _jsx("dt", { children: "Review mode" }), _jsx("dd", { children: orNotStated(summary.reviewMode) }), _jsx("dt", { children: "Review policy revision" }), _jsx("dd", { children: summary.policyRevision === null ? "Not stated" : groupDigits(String(summary.policyRevision)) }), _jsx("dt", { children: "Stages" }), _jsx("dd", { children: groupDigits(String(summary.stageCount)) })] }), _jsx("h4", { className: "op-section-title", children: "Full document" }), _jsx("pre", { className: "op-pre", tabIndex: 0, "aria-label": "Full brief document as stored", children: JSON.stringify(record.document, null, 2) }), _jsx("h4", { className: "op-section-title", children: "Delivery" }), requestEnvelopes.length > 0 ? (_jsxs(_Fragment, { children: [record.state === "partial" ? (_jsx("p", { className: "op-hint", children: "Partial: the editor engine produced only some of what was requested. The envelopes below are the ones it delivered; what it skipped or refused is listed under the dispatch attempts." })) : null, requestEnvelopes.map((envelope) => (_jsx(EnvelopeDetail, { source: source, rev: rev, scopeId: scopeId, envelopeId: envelope.envelopeId }, envelope.envelopeId)))] })) : record.state === "delivered" ? (_jsx("p", { className: "op-hint", children: "This brief is marked delivered, but no envelope for it is stored in this channel." })) : (_jsx("p", { className: "op-hint", children: "No delivery has been accepted for this brief yet." })), _jsx("h4", { className: "op-section-title", children: "Dispatch attempts" }), attempts.length === 0 ? (_jsx("p", { className: "op-hint", children: "No dispatch attempt has been made for this brief." })) : (_jsx(AttemptsTable, { attempts: attempts }))] }));
+}
+/** The delivery envelope the engine accepted for a brief, read with delivery.get. */
+function EnvelopeDetail({ source, rev, scopeId, envelopeId, }) {
+    const { state, reload } = useAsync(() => source.getDelivery(scopeId, envelopeId), [source, rev, scopeId, envelopeId]);
+    if (state.status === "error") {
+        return _jsx(LoadError, { message: "Could not read this delivery from the daemon.", onRetry: reload });
+    }
+    if (state.status === "loading")
+        return _jsx(SkeletonRows, { label: "Loading the delivery", rows: 2 });
+    const delivery = state.value;
+    if (delivery === null)
+        return _jsx("p", { className: "op-hint", children: "This delivery is no longer in this channel." });
+    return (_jsxs(_Fragment, { children: [_jsxs("dl", { className: "op-dl", children: [_jsx("dt", { children: "Deliverable" }), _jsx("dd", { className: "op-mono", children: delivery.deliverable === "" ? "Not named" : delivery.deliverable }), _jsx("dt", { children: "Envelope id" }), _jsx("dd", { className: "op-mono", children: delivery.envelopeId }), _jsx("dt", { children: "Brief id" }), _jsx("dd", { className: "op-mono", children: delivery.briefId }), _jsx("dt", { children: "Brief revision" }), _jsx("dd", { children: groupDigits(String(delivery.briefRevision)) }), _jsx("dt", { children: "Accepted (UTC)" }), _jsx("dd", { children: instantLabel(delivery.acceptedAtUtc, "UTC") })] }), _jsx("p", { className: "op-hint", children: "The envelope as the engine stored it:" }), _jsx("pre", { className: "op-pre", tabIndex: 0, "aria-label": `Delivery envelope for ${delivery.deliverable === "" ? "an unnamed deliverable" : delivery.deliverable} as stored`, children: JSON.stringify(delivery.document, null, 2) })] }));
+}
+/** Every dispatch attempt of one brief. Stderr is shown in a block of its own, so it is never read as prose. */
+function AttemptsTable({ attempts }) {
+    return (_jsx("div", { className: "op-table-scroll", children: _jsxs(Table, { children: [_jsx(TableCaption, { children: "Dispatch attempts of this brief, oldest first" }), _jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { align: "end", children: "Attempt" }), _jsx(TableHeaderCell, { children: "Engine" }), _jsx(TableHeaderCell, { children: "Outcome" }), _jsx(TableHeaderCell, { children: "Started (UTC)" }), _jsx(TableHeaderCell, { children: "Finished (UTC)" }), _jsx(TableHeaderCell, { align: "end", children: "Exit code" }), _jsx(TableHeaderCell, { children: "Message" }), _jsx(TableHeaderCell, { children: "Stderr tail" })] }) }), _jsx(TableBody, { children: attempts.map((run) => {
+                        const label = DISPATCH_OUTCOME_LABEL[run.outcome];
+                        return (_jsxs(TableRow, { children: [_jsx(TableCell, { rowHeader: true, numeric: true, children: groupDigits(String(run.attemptId)) }), _jsx(TableCell, { children: run.engine }), _jsx(TableCell, { children: _jsx(Badge, { tone: label.tone, children: label.text }) }), _jsx(TableCell, { className: "op-mono", children: instantLabel(run.startedAtUtc, "UTC") }), _jsx(TableCell, { className: "op-mono", children: run.finishedAtUtc === null ? "Not finished" : instantLabel(run.finishedAtUtc, "UTC") }), _jsx(TableCell, { numeric: true, children: run.exitCode === null ? "None" : String(run.exitCode) }), _jsxs(TableCell, { children: [run.message ?? "None", run.producedDeliverables.length > 0 ? (_jsxs("p", { className: "op-hint", children: ["Envelopes for: ", run.producedDeliverables.join(", ")] })) : null, run.skipped.length > 0 ? (_jsx("ul", { "aria-label": `Skipped by attempt ${run.attemptId}`, children: run.skipped.map((entry, index) => (_jsxs("li", { children: ["Skipped ", entry.deliverable ?? "a deliverable", ": ", entry.code ?? "no code", entry.message === null ? "" : ` (${entry.message})`] }, `${entry.deliverable ?? "unnamed"}-${index}`))) })) : null] }), _jsx(TableCell, { children: run.stderrTail === null || run.stderrTail === "" ? ("None kept") : (_jsx("pre", { className: "op-pre", tabIndex: 0, "aria-label": `Stderr tail of attempt ${run.attemptId}`, children: run.stderrTail })) })] }, run.attemptId));
+                    }) })] }) }));
+}
+function listOrNone(items) {
+    return items.length === 0 ? "None" : items.join(", ");
+}
+function orNotStated(text) {
+    return text === null || text === "" ? "Not stated" : text;
+}

package/dist/screens/CalendarScreen.d.ts

@@ -0,0 +1,10 @@
+import { type DataSource } from "../data/index.js";
+interface Props {
+    source: DataSource;
+    /** Bumped by the app after any write, so the calendar re-reads. */
+    rev: number;
+    onOpenJob: (jobId: string) => void;
+    onOpenApprovals: () => void;
+}
+export declare function CalendarScreen({ source, rev, onOpenJob, onOpenApprovals }: Props): import("react").JSX.Element;
+export {};

package/dist/screens/CalendarScreen.js

@@ -0,0 +1,143 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { moveIndex } from "@rightkit/platform-ui/headless";
+import { Button, Card, EmptyState, PageShell, SegmentedControl, SkeletonRows } from "@rightkit/react-shell/react";
+import { AccountChip, JobBadges, LoadError, MockBanner, PublishProgressView } from "../components/Shared.js";
+import { useAsync } from "../hooks/useAsync.js";
+import { accountOrdinals, dateKeyAdd, dateKeyInZone, dayLabel, instantLabel, mediaReady, mondayOf, startOfDateUtc, timeInZone, weekDays, zoneAbbr, } from "../data/index.js";
+import { FORMAT_LABEL, MEDIA_STATUS_LABEL } from "./labels.js";
+const operatorZone = (() => {
+    try {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+    }
+    catch {
+        return "UTC";
+    }
+})();
+function mediaSummary(job) {
+    if (mediaReady(job)) {
+        const n = job.mediaItems.length;
+        return `Media ready${n > 1 ? ` (${n} items)` : ""}`;
+    }
+    const uploading = job.mediaItems.find((m) => m.status === "uploading");
+    if (uploading)
+        return `Media uploading ${uploading.uploadPercent ?? 0}%`;
+    if (job.mediaItems.some((m) => m.status === "missing"))
+        return `Media ${MEDIA_STATUS_LABEL.missing.toLowerCase()}`;
+    return "Media not ready";
+}
+export function CalendarScreen({ source, rev, onOpenJob, onOpenApprovals }) {
+    const today = dateKeyInZone(source.nowUtc(), operatorZone);
+    const [anchor, setAnchor] = useState(today);
+    const [view, setView] = useState("week");
+    const [selectedId, setSelectedId] = useState(null);
+    const days = useMemo(() => (view === "week" ? weekDays(mondayOf(anchor)) : [anchor]), [anchor, view]);
+    const first = days[0];
+    const last = days[days.length - 1];
+    // One day of slack each side, because a job is bucketed by its account's local date.
+    const fromUtc = startOfDateUtc(dateKeyAdd(first, -1));
+    const toUtc = startOfDateUtc(dateKeyAdd(last, 2));
+    const { state, reload } = useAsync(async () => {
+        const [accounts, jobs] = await Promise.all([
+            source.listAccounts(),
+            source.listJobs({ fromUtc, toUtc }),
+        ]);
+        return { accounts, jobs };
+    }, [source, fromUtc, toUtc, rev]);
+    // Keep the last good data on screen while a new range loads, so arrow-key moves do not flash.
+    const lastGood = useRef(null);
+    useEffect(() => {
+        if (state.status === "ready")
+            lastGood.current = state.value;
+    }, [state]);
+    const data = state.status === "ready" ? state.value : lastGood.current;
+    const containerRef = useRef(null);
+    const pendingFocus = useRef(false);
+    useEffect(() => {
+        if (!pendingFocus.current || !containerRef.current)
+            return;
+        const firstEntry = containerRef.current.querySelector("[data-entry]");
+        const target = firstEntry ?? containerRef.current.querySelector("[data-day-heading]");
+        if (target) {
+            target.focus();
+            pendingFocus.current = false;
+        }
+    });
+    const ordinals = useMemo(() => accountOrdinals(data?.accounts ?? []), [data]);
+    const accountById = useMemo(() => new Map((data?.accounts ?? []).map((a) => [a.id, a])), [data]);
+    const jobsByDay = useMemo(() => {
+        const map = new Map();
+        for (const day of days)
+            map.set(day, []);
+        for (const job of data?.jobs ?? []) {
+            const key = dateKeyInZone(job.scheduledAtUtc, job.timeZone);
+            const list = map.get(key);
+            if (list)
+                list.push(job);
+        }
+        for (const list of map.values())
+            list.sort((a, b) => a.scheduledAtUtc.localeCompare(b.scheduledAtUtc));
+        return map;
+    }, [data, days]);
+    const visibleCount = [...jobsByDay.values()].reduce((n, list) => n + list.length, 0);
+    const selected = selectedId ? data?.jobs.find((j) => j.id === selectedId) ?? null : null;
+    function onKeyDown(event) {
+        const target = event.target;
+        if (!target.matches("[data-entry]") || !containerRef.current)
+            return;
+        const entries = Array.from(containerRef.current.querySelectorAll("[data-entry]"));
+        const day = target.dataset.day ?? "";
+        switch (event.key) {
+            case "ArrowDown":
+            case "ArrowUp": {
+                event.preventDefault();
+                const sameDay = entries.filter((el) => el.dataset.day === day);
+                sameDay[moveIndex(sameDay.indexOf(target), sameDay.length, event.key === "ArrowDown" ? "next" : "prev", false)]?.focus();
+                return;
+            }
+            case "ArrowLeft":
+            case "ArrowRight": {
+                event.preventDefault();
+                const dir = event.key === "ArrowRight" ? 1 : -1;
+                if (view === "day") {
+                    pendingFocus.current = true;
+                    setAnchor((a) => dateKeyAdd(a, dir));
+                    setSelectedId(null);
+                    return;
+                }
+                // The next day that has an entry, in the arrow's direction: owner moveIndex skips the empty days.
+                const index = days.indexOf(day);
+                const hasEntry = (i) => entries.some((el) => el.dataset.day === days[i]);
+                const k = moveIndex(index, days.length, dir > 0 ? "next" : "prev", false, (i) => !hasEntry(i));
+                if (k !== index)
+                    entries.find((el) => el.dataset.day === days[k])?.focus();
+                return;
+            }
+            case "Home":
+            case "End": {
+                event.preventDefault();
+                const sameDay = entries.filter((el) => el.dataset.day === day);
+                sameDay[moveIndex(0, sameDay.length, event.key === "Home" ? "first" : "last", false)]?.focus();
+                return;
+            }
+            default:
+                return;
+        }
+    }
+    const rangeLabel = view === "week" ? `Week of ${dayLabel(first)} to ${dayLabel(last)}` : dayLabel(anchor);
+    // A plain render function, not a nested component: a nested component would remount on every
+    // render and drop keyboard focus.
+    function renderEntry(job, day) {
+        const account = accountById.get(job.accountId);
+        return (_jsxs(Button, { type: "button", "data-entry": true, "data-day": day, variant: "secondary", className: "op-entry", "aria-current": job.id === selectedId ? "true" : undefined, onClick: () => setSelectedId(job.id), children: [account ? (_jsx(AccountChip, { account: account, ordinal: ordinals.get(account.id) })) : (_jsxs("span", { children: ["Account not found in the accounts list: ", _jsx("span", { className: "op-mono", children: job.accountId })] })), _jsxs("span", { className: "op-entry__line", children: [_jsx("time", { dateTime: job.scheduledAtUtc, children: timeInZone(job.scheduledAtUtc, job.timeZone) }), " ", zoneAbbr(job.scheduledAtUtc, job.timeZone), " \u00B7 ", FORMAT_LABEL[job.format]] }), _jsx(JobBadges, { job: job, compact: true }), _jsx("span", { className: "op-entry__media", children: mediaSummary(job) })] }));
+    }
+    return (_jsxs(PageShell, { title: "Calendar", subtitle: "Scheduled and media-ready posts for every account. Times are each account's local time.", actions: _jsxs("div", { className: "op-toolbar", children: [_jsx(Button, { size: "sm", variant: "secondary", onClick: () => setAnchor((a) => dateKeyAdd(a, view === "week" ? -7 : -1)), children: view === "week" ? "Previous week" : "Previous day" }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setAnchor(today), children: "Today" }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setAnchor((a) => dateKeyAdd(a, view === "week" ? 7 : 1)), children: view === "week" ? "Next week" : "Next day" }), _jsx(SegmentedControl, { label: "View", value: view, onChange: (v) => setView(v), options: [
+                        { value: "day", label: "Day" },
+                        { value: "week", label: "Week" },
+                    ] })] }), children: [source.kind === "mock" ? _jsx(MockBanner, {}) : null, _jsx("p", { className: "op-range", "aria-live": "polite", children: rangeLabel }), _jsx("p", { className: "op-hint", children: "Arrow keys move between entries. Up and Down stay inside one day; Left and Right move between days." }), state.status === "error" ? (_jsx(LoadError, { message: "Could not read the calendar from the daemon.", onRetry: reload })) : data === null ? (_jsx(SkeletonRows, { label: "Loading the calendar", rows: 4 })) : (_jsxs(_Fragment, { children: [state.status === "loading" ? _jsx("p", { role: "status", className: "op-hint", children: "Updating" }) : null, visibleCount === 0 ? (_jsxs(EmptyState, { title: "Nothing scheduled for these days", children: [_jsx("p", { children: "Accounts publish only approved, scheduled posts. Drafts waiting for a decision are in Approvals." }), _jsx(Button, { variant: "secondary", onClick: onOpenApprovals, children: "Open approvals" })] })) : null, _jsx("div", { className: "op-week-scroll", ref: containerRef, onKeyDown: onKeyDown, children: _jsx("div", { className: view === "week" ? "op-week" : "op-day-list", children: days.map((day) => {
+                                const entries = jobsByDay.get(day) ?? [];
+                                const isToday = day === today;
+                                return (_jsxs("section", { className: "op-day", "aria-labelledby": `day-${day}`, children: [_jsxs("h3", { id: `day-${day}`, "data-day-heading": true, tabIndex: -1, className: "op-day__heading", children: [dayLabel(day), isToday ? _jsx("span", { className: "op-today", children: " (today)" }) : null] }), entries.length === 0 ? (_jsx("p", { className: "op-day__empty", children: "Nothing scheduled" })) : (_jsx("ul", { className: "op-day__list", children: entries.map((job) => (_jsx("li", { children: renderEntry(job, day) }, job.id))) }))] }, day));
+                            }) }) }), selected ? (_jsxs(Card, { as: "section", className: "op-detail", children: [_jsxs("h2", { className: "op-detail__title", children: [accountById.get(selected.accountId)?.displayName ??
+                                        `Account not found in the accounts list (${selected.accountId})`, ": ", instantLabel(selected.scheduledAtUtc, selected.timeZone)] }), _jsx(JobBadges, { job: selected }), selected.publish ? _jsx(PublishProgressView, { progress: selected.publish, timeZone: selected.timeZone }) : null, selected.dst.kind !== "none" ? _jsx("p", { children: selected.dst.note }) : null, selected.state === "outcome_unknown" ? (_jsx("p", { role: "alert", children: "The platform may have accepted this post. No retry until reconciled." })) : null, selected.lateness ? (_jsxs("p", { children: ["Late: media was not ready by ", instantLabel(selected.lateness.mediaNotReadyBy, selected.timeZone), ". Daemon policy:", " ", selected.lateness.policy === "publish_next_slot" ? "publish at the next slot" : "held for review", "."] })) : null, selected.conflict ? (_jsxs("p", { children: ["This account has another job within ", selected.conflict.minimumSpacingMinutes, " minutes. Review both before approving."] })) : null, _jsx("div", { children: _jsx(Button, { variant: "primary", onClick: () => onOpenJob(selected.id), children: "Open in approvals" }) })] })) : (_jsx("p", { className: "op-hint", children: "Select an entry to see its details." }))] }))] }));
+}

package/dist/screens/CampaignsScreen.d.ts

@@ -0,0 +1,7 @@
+import { type DataSource } from "../data/index.js";
+interface Props {
+    source: DataSource;
+    rev: number;
+}
+export declare function CampaignsScreen({ source, rev }: Props): import("react").JSX.Element;
+export {};

package/dist/screens/CampaignsScreen.js

@@ -0,0 +1,52 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { EmptyState, Field, PageShell, SkeletonRows, Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow } from "@rightkit/react-shell/react";
+import { ScopeSelect } from "../components/ScopeSelect.js";
+import { LoadError, MockBanner } from "../components/Shared.js";
+import { useAsync } from "../hooks/useAsync.js";
+import { groupDigits, instantLabel, } from "../data/index.js";
+import { platformName } from "./labels.js";
+/** A visit count as exact digits, grouped for reading. A missing count reads as not reported. */
+function visitText(count) {
+    return count === undefined ? "Not reported" : groupDigits(String(count));
+}
+export function CampaignsScreen({ source, rev }) {
+    const scopes = useAsync(() => source.listScopes(), [source, rev]);
+    const [picked, setPicked] = useState(null);
+    const scopeList = scopes.value ?? [];
+    const scopeId = scopeList.find((s) => s.id === picked)?.id ?? scopeList[0]?.id ?? null;
+    return (_jsxs(PageShell, { title: "Campaigns", subtitle: "Read only. The campaigns of one channel, their tracked links and the visits recorded against those links. Nothing here creates a link, records a visit or redirects a visitor.", children: [source.kind === "mock" ? _jsx(MockBanner, {}) : null, scopes.state.status === "error" ? (_jsx(LoadError, { message: "Could not read the channels from the daemon.", onRetry: scopes.reload })) : scopes.value === null ? (_jsx(SkeletonRows, { label: "Loading channels", rows: 2 })) : scopeList.length === 0 || scopeId === null ? (_jsx(EmptyState, { title: "No channels yet", children: _jsx("p", { children: "Campaigns are kept per channel once one is set up." }) })) : (_jsxs(_Fragment, { children: [_jsx(ScopeSelect, { scopes: scopeList, value: scopeId, onChange: (id) => setPicked(id) }), _jsx(CampaignView, { source: source, rev: rev, scopeId: scopeId }, scopeId)] }))] }));
+}
+function CampaignView({ source, rev, scopeId }) {
+    const { state, reload, value } = useAsync(() => source.listCampaigns(scopeId), [source, rev, scopeId]);
+    const [picked, setPicked] = useState(null);
+    if (state.status === "error") {
+        return _jsx(LoadError, { message: "Could not read the campaigns from the daemon.", onRetry: reload });
+    }
+    if (value === null)
+        return _jsx(SkeletonRows, { label: "Loading campaigns", rows: 3 });
+    if (value.length === 0) {
+        return (_jsx(EmptyState, { title: "No campaigns yet", children: _jsx("p", { children: "This channel has no campaign. A campaign is made on the daemon host, not here. This is not an error." }) }));
+    }
+    const selected = value.find((c) => c.id === picked) ?? value[0];
+    return (_jsxs(_Fragment, { children: [_jsxs("section", { "aria-labelledby": "campaigns-list-title", children: [_jsxs("h2", { id: "campaigns-list-title", className: "op-section-title", children: ["Campaigns (", value.length, ")"] }), _jsx("div", { className: "op-table-scroll", children: _jsxs(Table, { "aria-labelledby": "campaigns-list-title", children: [_jsx(TableCaption, { children: "Campaigns in this channel" }), _jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: "Campaign" }), _jsx(TableHeaderCell, { children: "Campaign id" }), _jsx(TableHeaderCell, { children: "utm_campaign" }), _jsx(TableHeaderCell, { align: "end", children: "Revision" }), _jsx(TableHeaderCell, { children: "Last changed (UTC)" })] }) }), _jsx(TableBody, { children: value.map((campaign) => (_jsxs(TableRow, { children: [_jsx(TableCell, { rowHeader: true, children: campaign.name }), _jsx(TableCell, { className: "op-mono", children: campaign.id }), _jsx(TableCell, { className: "op-mono", children: campaign.utmCampaign }), _jsx(TableCell, { numeric: true, children: campaign.revision }), _jsx(TableCell, { className: "op-mono", children: instantLabel(campaign.updatedAtUtc, "UTC") })] }, campaign.id))) })] }) })] }), _jsxs("section", { "aria-labelledby": "campaign-links-title", children: [_jsx("h2", { id: "campaign-links-title", className: "op-section-title", children: "Tracked links and visits" }), _jsx(Field, { label: "Campaign", children: ({ id, "aria-describedby": describedBy }) => (_jsx("select", { id: id, "aria-describedby": describedBy, className: "op-select", value: selected.id, onChange: (e) => setPicked(e.target.value), children: value.map((campaign) => (_jsx("option", { value: campaign.id, children: campaign.name }, campaign.id))) })) }), _jsx(CampaignLinks, { source: source, rev: rev, scopeId: scopeId, campaign: selected }, selected.id)] })] }));
+}
+function CampaignLinks({ source, rev, scopeId, campaign, }) {
+    const links = useAsync(() => source.listCampaignLinks(scopeId, campaign.id), [source, rev, scopeId, campaign.id]);
+    const attribution = useAsync(() => source.campaignAttribution(scopeId, campaign.id), [source, rev, scopeId, campaign.id]);
+    const linkState = links.state;
+    const countState = attribution.state;
+    if (linkState.status === "error") {
+        return _jsx(LoadError, { message: "Could not read the tracked links from the daemon.", onRetry: links.reload });
+    }
+    if (countState.status === "error") {
+        return _jsx(LoadError, { message: "Could not read the visit counts from the daemon.", onRetry: attribution.reload });
+    }
+    if (linkState.status === "loading" || countState.status === "loading") {
+        return _jsx(SkeletonRows, { label: "Loading the links and the visit counts", rows: 3 });
+    }
+    const linkList = linkState.value;
+    const counts = countState.value;
+    const visitsByLink = new Map((counts?.links ?? []).map((row) => [row.linkId, row.visits]));
+    return (_jsxs(_Fragment, { children: [counts === null ? (_jsx("p", { className: "op-hint", children: "The engine holds no visit counts for this campaign in this channel." })) : (_jsxs("p", { className: "op-hint", children: ["Total visits across this campaign's links: ", groupDigits(String(counts.totalVisits)), ". These are the counts the daemon holds. A link with zero visits is a normal state: no visit has been recorded for it yet. The desktop records no visits."] })), linkList.length === 0 ? (_jsx("p", { className: "op-hint", children: "This campaign has no tracked links yet. Links are cut on the daemon host, not here. This is not an error." })) : (_jsx("div", { className: "op-table-scroll", children: _jsxs(Table, { "aria-labelledby": "campaign-links-title", children: [_jsxs(TableCaption, { children: ["Tracked links of ", campaign.name] }), _jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: "Link" }), _jsx(TableHeaderCell, { children: "Variant" }), _jsx(TableHeaderCell, { children: "Platform" }), _jsx(TableHeaderCell, { children: "Final URL" }), _jsx(TableHeaderCell, { children: "utm_source" }), _jsx(TableHeaderCell, { children: "utm_medium" }), _jsx(TableHeaderCell, { children: "utm_campaign" }), _jsx(TableHeaderCell, { children: "utm_content" }), _jsx(TableHeaderCell, { children: "Calendar entry" }), _jsx(TableHeaderCell, { align: "end", children: "Visits" })] }) }), _jsx(TableBody, { children: linkList.map((link) => (_jsxs(TableRow, { children: [_jsx(TableCell, { rowHeader: true, className: "op-mono", children: link.id }), _jsx(TableCell, { children: link.variantId }), _jsx(TableCell, { children: platformName(link.platform) }), _jsx(TableCell, { className: "op-mono", children: link.finalUrl }), _jsx(TableCell, { className: "op-mono", children: link.utmSource }), _jsx(TableCell, { className: "op-mono", children: link.utmMedium }), _jsx(TableCell, { className: "op-mono", children: link.utmCampaign }), _jsx(TableCell, { className: "op-mono", children: link.utmContent }), _jsx(TableCell, { className: "op-mono", children: link.calendarEntryId ?? "None" }), _jsx(TableCell, { numeric: true, children: visitText(visitsByLink.get(link.id)) })] }, link.id))) })] }) }))] }));
+}

package/dist/screens/ChannelMemoryScreen.d.ts

@@ -0,0 +1,7 @@
+import { type DataSource } from "../data/index.js";
+interface Props {
+    source: DataSource;
+    rev: number;
+}
+export declare function ChannelMemoryScreen({ source, rev }: Props): import("react").JSX.Element;
+export {};