@rightkit/social-ui 0.0.0-stage → 0.1.0

package/dist/screens/TextGateScreen.js

@@ -0,0 +1,111 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Badge, Button, EmptyState, Field, Input, 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 { formatMilli, groupDigits, instantLabel, } from "../data/index.js";
+import { GATE_DISPOSITION_LABEL, GATE_VERDICT_LABEL } from "./labels.js";
+export function TextGateScreen({ 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: "Text gate", subtitle: "Read only. Checks a script against the channel's gate policy and shows each rule's verdict, then the stored verdict records of a subject. A check stores nothing. Nothing here changes the policy, records a check or approves anything.", 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: "The text gate is kept per channel once one is set up." }) })) : (_jsxs(_Fragment, { children: [_jsx(ScopeSelect, { scopes: scopeList, value: scopeId, onChange: (id) => setPicked(id) }), _jsx(GateView, { source: source, rev: rev, scopeId: scopeId }, scopeId)] }))] }));
+}
+function GateView({ source, rev, scopeId }) {
+    const policy = useAsync(() => source.gatePolicy(scopeId), [source, rev, scopeId]);
+    if (policy.state.status === "error") {
+        return _jsx(LoadError, { message: "Could not read the gate policy from the daemon.", onRetry: policy.reload });
+    }
+    if (policy.state.status === "loading")
+        return _jsx(SkeletonRows, { label: "Loading the gate policy", rows: 3 });
+    const current = policy.state.value;
+    return (_jsxs(_Fragment, { children: [_jsxs("section", { "aria-labelledby": "gate-policy-title", children: [_jsx("h2", { id: "gate-policy-title", className: "op-section-title", children: "Gate policy" }), current === null ? (_jsx("p", { className: "op-hint", children: "No policy is set for this channel, so nothing can pass." })) : (_jsx(PolicyView, { policy: current }))] }), _jsx(CheckSection, { source: source, scopeId: scopeId }), _jsx(RecordsSection, { source: source, rev: rev, scopeId: scopeId })] }));
+}
+/** The current policy revision. Thresholds are written as decimals; the engine holds them in thousandths. */
+function PolicyView({ policy }) {
+    return (_jsxs("dl", { className: "op-dl", children: [_jsx("dt", { children: "Revision" }), _jsx("dd", { children: groupDigits(String(policy.revision)) }), _jsx("dt", { children: "Created (UTC)" }), _jsx("dd", { children: instantLabel(policy.createdAtUtc, "UTC") }), _jsx("dt", { children: "Banned phrases" }), _jsx("dd", { children: listOrNone(policy.bannedPhrases) }), _jsx("dt", { children: "Stock openers" }), _jsx("dd", { children: listOrNone(policy.stockOpeners) }), _jsx("dt", { children: "Minimum words" }), _jsx("dd", { children: groupDigits(String(policy.minWords)) }), _jsx("dt", { children: "Dashes" }), _jsxs("dd", { children: ["At most ", formatMilli(policy.dashMaxPer100WordsMilli), " per 100 words"] }), _jsx("dt", { children: "Semicolons" }), _jsxs("dd", { children: ["At most ", formatMilli(policy.semicolonMaxPer100WordsMilli), " per 100 words"] }), _jsx("dt", { children: "Sentence length variance" }), _jsxs("dd", { children: ["At least ", formatMilli(policy.varianceMinMilli), ", inconclusive below", " ", groupDigits(String(policy.varianceMinSentences)), " sentences"] }), _jsx("dt", { children: "Tricolon sentences" }), _jsxs("dd", { children: ["At most ", formatMilli(policy.tricolonMaxPer100SentencesMilli), " per 100 sentences, inconclusive below", " ", groupDigits(String(policy.tricolonMinSentences)), " sentences"] }), _jsx("dt", { children: "Inconclusive or unverified blocks, for" }), _jsx("dd", { children: requiredRules(policy.required) })] }));
+}
+/** A dry-run check of one script. The subject id labels the check; the check stores nothing. */
+function CheckSection({ source, scopeId }) {
+    const [subjectId, setSubjectId] = useState("");
+    const [text, setText] = useState("");
+    const [busy, setBusy] = useState(false);
+    const [result, setResult] = useState(null);
+    const [problem, setProblem] = useState(null);
+    async function runCheck(event) {
+        event.preventDefault();
+        if (subjectId.trim() === "") {
+            setResult(null);
+            setProblem("Type a subject id first. Nothing was checked.");
+            return;
+        }
+        if (text.trim() === "") {
+            setResult(null);
+            setProblem("Paste a script to check. Nothing was checked.");
+            return;
+        }
+        setBusy(true);
+        setProblem(null);
+        const outcome = await source.checkText(scopeId, subjectId.trim(), text);
+        setBusy(false);
+        if (outcome.ok) {
+            setResult(outcome.value);
+        }
+        else {
+            setResult(null);
+            setProblem(`The check did not run. ${outcome.error.message} Nothing was stored.`);
+        }
+    }
+    return (_jsxs("section", { "aria-labelledby": "gate-check-title", children: [_jsx("h2", { id: "gate-check-title", className: "op-section-title", children: "Check a script" }), _jsx("p", { className: "op-hint", children: "A script that contains a number will be blocked here, because this screen sends no claim annotations. That is the gate working, not an error." }), _jsxs("form", { className: "op-form", onSubmit: runCheck, children: [_jsx(Field, { label: "Subject id", note: "The brief, hook or script this text belongs to. It labels the check and stores nothing.", children: ({ id, "aria-describedby": describedBy }) => (_jsx(Input, { id: id, "aria-describedby": describedBy, type: "text", value: subjectId, onChange: (e) => setSubjectId(e.target.value) })) }), _jsx(Field, { label: "Script", children: ({ id, "aria-describedby": describedBy }) => (_jsx("textarea", { id: id, "aria-describedby": describedBy, className: "op-textarea", rows: 8, value: text, onChange: (e) => setText(e.target.value) })) }), _jsx("div", { className: "op-decide__buttons", children: _jsx(Button, { type: "submit", variant: "primary", disabled: busy, children: "Check" }) })] }), busy ? _jsx("p", { role: "status", className: "op-hint", children: "Checking the script" }) : null, problem !== null ? (_jsx("p", { role: "alert", className: "op-error-inline", children: problem })) : null, _jsx("div", { "aria-live": "polite", children: result !== null ? _jsx(CheckResult, { check: result }) : null })] }));
+}
+/** The result of one check: the overall disposition in words, then one row per rule with the engine's reason. */
+function CheckResult({ check }) {
+    const disposition = GATE_DISPOSITION_LABEL[check.disposition];
+    return (_jsxs("article", { className: "op-detail", "aria-labelledby": "gate-result-title", children: [_jsxs("h3", { id: "gate-result-title", className: "op-detail__title", children: ["Result for ", check.subjectId] }), _jsx("div", { className: "op-badges", children: _jsx(Badge, { tone: disposition.tone, children: disposition.text }) }), _jsxs("dl", { className: "op-dl", children: [_jsx("dt", { children: "Policy revision" }), _jsx("dd", { children: groupDigits(String(check.policyRevision)) }), _jsx("dt", { children: "Blocking rules" }), _jsx("dd", { children: listOrNone(check.blockingRules) }), _jsx("dt", { children: "Text hash" }), _jsx("dd", { className: "op-mono", children: check.textHash }), _jsx("dt", { children: "Stored" }), _jsx("dd", { children: "Nothing. A check from this screen does not record." })] }), _jsx("div", { className: "op-table-scroll", children: _jsxs(Table, { children: [_jsx(TableCaption, { children: "Rules checked on this script" }), _jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: "Rule" }), _jsx(TableHeaderCell, { children: "Verdict" }), _jsx(TableHeaderCell, { children: "Blocks" }), _jsx(TableHeaderCell, { children: "Reason" })] }) }), _jsx(TableBody, { children: check.rules.map((rule) => (_jsxs(TableRow, { children: [_jsx(TableCell, { rowHeader: true, className: "op-mono", children: rule.ruleId }), _jsx(TableCell, { children: GATE_VERDICT_LABEL[rule.verdict] }), _jsx(TableCell, { children: rule.blocks ? "Yes" : "No" }), _jsx(TableCell, { children: rule.reason })] }, rule.ruleId))) })] }) })] }));
+}
+/** The stored verdict records of one subject. Only recorded checks are stored, so a check from this screen never appears. */
+function RecordsSection({ source, rev, scopeId }) {
+    const [draft, setDraft] = useState("");
+    const [subjectId, setSubjectId] = useState(null);
+    function showRecords(event) {
+        event.preventDefault();
+        const id = draft.trim();
+        if (id !== "")
+            setSubjectId(id);
+    }
+    return (_jsxs("section", { "aria-labelledby": "gate-records-title", children: [_jsx("h2", { id: "gate-records-title", className: "op-section-title", children: "Stored verdict records" }), _jsx("p", { className: "op-hint", children: "Only checks the daemon recorded are stored. A check from this screen is never stored, so it never appears here." }), _jsxs("form", { className: "op-form", onSubmit: showRecords, children: [_jsx(Field, { label: "Subject id to read", children: ({ id, "aria-describedby": describedBy }) => (_jsx(Input, { id: id, "aria-describedby": describedBy, type: "text", value: draft, onChange: (e) => setDraft(e.target.value) })) }), _jsx("div", { className: "op-decide__buttons", children: _jsx(Button, { type: "submit", variant: "secondary", disabled: draft.trim() === "", children: "Show records" }) })] }), subjectId === null ? null : (_jsx(GateRecordsTable, { source: source, rev: rev, scopeId: scopeId, subjectId: subjectId }, subjectId))] }));
+}
+function GateRecordsTable({ source, rev, scopeId, subjectId, }) {
+    const { state, reload, value } = useAsync(() => source.gateRecords(scopeId, subjectId), [source, rev, scopeId, subjectId]);
+    if (state.status === "error") {
+        return _jsx(LoadError, { message: "Could not read the stored records from the daemon.", onRetry: reload });
+    }
+    if (value === null)
+        return _jsx(SkeletonRows, { label: "Loading the stored records", rows: 2 });
+    if (value.length === 0) {
+        return (_jsx(EmptyState, { title: "No stored records for this subject", children: _jsxs("p", { children: ["Nothing has been recorded for ", subjectId, " in this channel. This is not an error."] }) }));
+    }
+    return (_jsx("div", { className: "op-table-scroll", children: _jsxs(Table, { children: [_jsxs(TableCaption, { children: ["Stored verdict records of ", subjectId, ", newest first"] }), _jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { align: "end", children: "Record" }), _jsx(TableHeaderCell, { children: "Disposition" }), _jsx(TableHeaderCell, { align: "end", children: "Policy revision" }), _jsx(TableHeaderCell, { children: "Checked (UTC)" }), _jsx(TableHeaderCell, { children: "Text hash" })] }) }), _jsx(TableBody, { children: value.map((record) => (_jsxs(TableRow, { children: [_jsx(TableCell, { rowHeader: true, numeric: true, children: groupDigits(String(record.recordSeq)) }), _jsx(TableCell, { children: GATE_DISPOSITION_LABEL[record.disposition].text }), _jsx(TableCell, { numeric: true, children: groupDigits(String(record.policyRevision)) }), _jsx(TableCell, { className: "op-mono", children: instantLabel(record.checkedAtUtc, "UTC") }), _jsx(TableCell, { className: "op-mono", children: record.textHash })] }, record.recordSeq))) })] }) }));
+}
+function listOrNone(items) {
+    return items.length === 0 ? "None" : items.join(", ");
+}
+/** The style rules whose inconclusive or unverified finding blocks. Named in words. */
+function requiredRules(required) {
+    const names = [];
+    if (required.bannedPhrase)
+        names.push("banned phrase");
+    if (required.dashDensity)
+        names.push("dash density");
+    if (required.semicolonDensity)
+        names.push("semicolon density");
+    if (required.sentenceLengthVariance)
+        names.push("sentence length variance");
+    if (required.tricolonFrequency)
+        names.push("tricolon frequency");
+    if (required.stockOpener)
+        names.push("stock opener");
+    return listOrNone(names);
+}

package/dist/screens/ThreadsScreen.d.ts

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

package/dist/screens/ThreadsScreen.js

@@ -0,0 +1,113 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Badge, Button, Notice, PageShell, SegmentedControl, SkeletonRows } from "@rightkit/react-shell/react";
+import { AccountChip, LoadError, MockBanner } from "../components/Shared.js";
+import { useAsync } from "../hooks/useAsync.js";
+import { accountOrdinals, instantLabel, } from "../data/index.js";
+import { PLATFORM_LABEL } from "./labels.js";
+const ACTION_LABEL = {
+    hide_comment: "Hide comment",
+    delete_comment: "Delete comment",
+    block_author: "Block author",
+};
+const SNOOZE_HOURS = 4;
+const SNOOZE_DAY_HOURS = 24;
+function threadStatusText(thread, tz) {
+    if (thread.status === "resolved")
+        return { text: "Resolved", tone: "ok" };
+    if (thread.status === "snoozed" && thread.snoozedUntilUtc) {
+        return { text: `Snoozed until ${instantLabel(thread.snoozedUntilUtc, tz)}`, tone: "warn" };
+    }
+    return { text: "Open", tone: "neutral" };
+}
+function autoReplyBadge(thread) {
+    if (!thread.autoReply)
+        return null;
+    return thread.autoReply.state === "matched_not_sent"
+        ? { text: "Would reply, not sent", tone: "accent" }
+        : { text: "Auto-reply unavailable", tone: "bad" };
+}
+export function ThreadsScreen({ source, rev, onChanged }) {
+    const { state, reload, value } = useAsync(async () => {
+        const [accounts, threads, capabilities] = await Promise.all([
+            source.listAccounts(),
+            source.listThreads(),
+            source.listModerationCapabilities(),
+        ]);
+        return { accounts, threads, capabilities };
+    }, [source, rev]);
+    const [filter, setFilter] = useState("open");
+    const [selectedId, setSelectedId] = useState(null);
+    const accounts = useMemo(() => value?.accounts ?? [], [value]);
+    const ordinals = useMemo(() => accountOrdinals(accounts), [accounts]);
+    const all = value?.threads ?? [];
+    const counts = {
+        open: all.filter((t) => t.status === "open").length,
+        snoozed: all.filter((t) => t.status === "snoozed").length,
+        resolved: all.filter((t) => t.status === "resolved").length,
+    };
+    const visible = all.filter((t) => t.status === filter);
+    const groups = accounts
+        .map((account) => {
+        const mine = visible.filter((t) => t.accountId === account.id);
+        const posts = new Map();
+        for (const t of mine) {
+            const key = `${t.postTitle}|${t.postPublishedUtc}`;
+            const post = posts.get(key) ?? { title: t.postTitle, publishedUtc: t.postPublishedUtc, threads: [] };
+            post.threads.push(t);
+            posts.set(key, post);
+        }
+        return { account, posts: [...posts.values()] };
+    })
+        .filter((g) => g.posts.length > 0);
+    const selected = selectedId ? all.find((t) => t.id === selectedId) ?? null : null;
+    const selectedAccount = selected ? accounts.find((a) => a.id === selected.accountId) ?? null : null;
+    return (_jsxs(PageShell, { title: "Threads", subtitle: "Comments and messages on published posts. Read, resolve and snooze here. Replies are not sent from this screen.", children: [source.kind === "mock" ? _jsx(MockBanner, {}) : null, _jsx("div", { className: "op-inbox__filters", children: _jsx(SegmentedControl, { label: "Show", value: filter, onChange: (f) => {
+                        setFilter(f);
+                        setSelectedId(null);
+                    }, options: [
+                        { value: "open", label: `Open (${counts.open})` },
+                        { value: "snoozed", label: `Snoozed (${counts.snoozed})` },
+                        { value: "resolved", label: `Resolved (${counts.resolved})` },
+                    ] }) }), state.status === "error" ? (_jsx(LoadError, { message: "Could not read threads from the daemon.", onRetry: reload })) : value === null ? (_jsx(SkeletonRows, { label: "Loading threads", rows: 4 })) : (_jsxs("div", { className: "op-inbox", children: [_jsxs("section", { className: "op-inbox__list", "aria-labelledby": "threads-list-title", children: [_jsx("h2", { id: "threads-list-title", className: "op-section-title", children: "Threads" }), groups.length === 0 ? _jsx("p", { className: "op-hint", children: "No threads in this view." }) : null, groups.map((group) => (_jsxs("section", { className: "op-inbox__group", "aria-label": group.account.handle, children: [_jsx("div", { className: "op-inbox__group-head", children: _jsx(AccountChip, { account: group.account, ordinal: ordinals.get(group.account.id) }) }), group.posts.map((post) => (_jsxs("div", { className: "op-thread-post", children: [_jsxs("h3", { className: "op-thread-post__title", children: [post.title, ", published ", instantLabel(post.publishedUtc, group.account.timeZone)] }), _jsx("ul", { children: post.threads.map((thread) => {
+                                                    const latest = thread.messages[thread.messages.length - 1];
+                                                    const badge = autoReplyBadge(thread);
+                                                    return (_jsx("li", { children: _jsxs(Button, { type: "button", variant: "secondary", className: "op-row", "aria-current": thread.id === selectedId ? "true" : undefined, onClick: () => setSelectedId(thread.id), children: [_jsxs("span", { className: "op-row__time", children: [thread.kind === "dm" ? "Direct message" : "Comment", " from ", latest?.author ?? "unknown"] }), _jsx("span", { className: "op-row__meta", children: latest?.text ?? "" }), badge ? _jsx(Badge, { tone: badge.tone, children: badge.text }) : null] }) }, thread.id));
+                                                }) })] }, `${post.title}|${post.publishedUtc}`)))] }, group.account.id)))] }), _jsx("section", { className: "op-inbox__preview", "aria-label": "Thread detail", children: selected && selectedAccount ? (_jsx(ThreadDetail, { thread: selected, account: selectedAccount, ordinal: ordinals.get(selectedAccount.id), capabilities: value.capabilities.filter((c) => c.platform === selectedAccount.platform), nowUtc: source.nowUtc(), source: source, onChanged: onChanged }, selected.id)) : (_jsx("p", { className: "op-hint", children: "Select a thread to read it and see what an automated reply would do." })) })] }))] }));
+}
+function ThreadDetail({ thread, account, ordinal, capabilities, nowUtc, source, onChanged, }) {
+    const [busy, setBusy] = useState(false);
+    const [notice, setNotice] = useState(null);
+    const tz = account.timeZone;
+    const status = threadStatusText(thread, tz);
+    const closesMs = thread.replyWindow ? Date.parse(thread.replyWindow.closesUtc) : null;
+    const windowOpen = closesMs !== null && closesMs > Date.parse(nowUtc);
+    const kindLabel = thread.kind === "dm" ? "Direct message" : "Comment";
+    const resolved = thread.status === "resolved";
+    async function resolveThread() {
+        setBusy(true);
+        const result = await source.resolveThread(thread.id);
+        setBusy(false);
+        if (result.ok) {
+            setNotice({ tone: "ok", text: "Thread resolved." });
+            onChanged();
+        }
+        else {
+            setNotice({ tone: "bad", text: result.error.message });
+        }
+    }
+    async function snooze(hours) {
+        setBusy(true);
+        const until = new Date(Date.parse(nowUtc) + hours * 3_600_000).toISOString();
+        const result = await source.snoozeThread(thread.id, until);
+        setBusy(false);
+        if (result.ok) {
+            setNotice({ tone: "ok", text: `Snoozed until ${instantLabel(until, tz)}.` });
+            onChanged();
+        }
+        else {
+            setNotice({ tone: "bad", text: result.error.message });
+        }
+    }
+    return (_jsxs("article", { className: `op-preview op-band-${account.band}`, "aria-labelledby": "thread-title", children: [_jsxs("header", { className: "op-preview__account", children: [_jsxs("p", { className: "op-kicker", children: [kindLabel, " on ", thread.postTitle] }), _jsxs("h2", { id: "thread-title", className: "op-preview__title", children: [PLATFORM_LABEL[account.platform], ": ", account.displayName, " ", account.handle] }), _jsx(AccountChip, { account: account, ordinal: ordinal, detail: true })] }), _jsxs("section", { "aria-labelledby": "th-status", children: [_jsx("h3", { id: "th-status", className: "op-section-title", children: "Status" }), _jsx("p", { children: status.text })] }), _jsxs("section", { "aria-labelledby": "th-window", children: [_jsx("h3", { id: "th-window", className: "op-section-title", children: "Reply window" }), closesMs === null ? (_jsx("p", { children: "No platform reply window applies to this kind of thread." })) : windowOpen ? (_jsxs("p", { children: ["Reply window closes ", instantLabel(thread.replyWindow.closesUtc, tz), "."] })) : (_jsxs("p", { children: ["Reply window closed on ", instantLabel(thread.replyWindow.closesUtc, tz), ". Replies are not possible now."] })), _jsx(Button, { variant: "secondary", size: "sm", disabled: true, children: "Reply" }), _jsx("p", { className: "op-hint", children: "Replying is not part of this screen yet. Replies are drafted on the desktop in a later step." })] }), _jsxs("section", { "aria-labelledby": "th-messages", children: [_jsx("h3", { id: "th-messages", className: "op-section-title", children: "Messages" }), _jsx("ol", { className: "op-messages", children: thread.messages.map((m) => (_jsxs("li", { children: [_jsx("strong", { children: m.fromOperator ? "You" : m.author }), " ", _jsx("time", { dateTime: m.sentAtUtc, children: instantLabel(m.sentAtUtc, tz) }), _jsx("p", { className: "op-caption", children: m.text })] }, m.id))) })] }), _jsxs("section", { "aria-labelledby": "th-auto", children: [_jsx("h3", { id: "th-auto", className: "op-section-title", children: "Automated reply" }), thread.autoReply === null ? (_jsx("p", { children: "No automated reply rule matches this thread." })) : thread.autoReply.state === "matched_not_sent" ? (_jsxs(_Fragment, { children: [_jsxs("p", { children: ["Rule ", _jsx("strong", { children: thread.autoReply.ruleName }), " matches the keyword", " ", _jsx("code", { children: thread.autoReply.matchedKeyword }), ". Not sent: this is a preview only."] }), _jsx("p", { className: "op-caption", children: thread.autoReply.draftReply })] })) : (_jsx(_Fragment, { children: _jsxs("p", { role: "status", className: "op-invalid", children: ["Automated reply unavailable for rule ", _jsx("strong", { children: thread.autoReply.ruleName }), ".", " ", thread.autoReply.unavailableReason] }) }))] }), _jsxs("section", { "aria-labelledby": "th-moderation", children: [_jsxs("h3", { id: "th-moderation", className: "op-section-title", children: ["Moderation on ", PLATFORM_LABEL[account.platform]] }), capabilities.length === 0 ? (_jsxs("p", { className: "op-hint", children: ["No moderation capability is listed for ", PLATFORM_LABEL[account.platform], " in this app."] })) : null, _jsx("ul", { className: "op-moderation", children: capabilities.map((c) => (_jsxs("li", { children: [_jsxs("strong", { children: [ACTION_LABEL[c.action], ":"] }), " ", c.supported ? "Supported." : "Unavailable.", " ", c.reason] }, c.action))) }), _jsx("p", { className: "op-hint", children: "Mock capability list. Each row is confirmed per platform before live use." })] }), _jsxs("section", { className: "op-decide", "aria-labelledby": "th-decide", children: [_jsx("h3", { id: "th-decide", className: "op-section-title", children: "Decision" }), _jsxs("div", { className: "op-decide__buttons", children: [_jsx(Button, { variant: "primary", disabled: busy || resolved, onClick: resolveThread, children: "Resolve thread" }), _jsxs(Button, { variant: "secondary", disabled: busy || resolved, onClick: () => snooze(SNOOZE_HOURS), children: ["Snooze ", SNOOZE_HOURS, " hours"] }), _jsx(Button, { variant: "secondary", disabled: busy || resolved, onClick: () => snooze(SNOOZE_DAY_HOURS), children: "Snooze 24 hours" })] }), _jsx("div", { "aria-live": "polite", children: notice ? (_jsx(Notice, { tone: notice.tone, className: "op-notice", children: notice.text })) : null })] })] }));
+}

package/dist/screens/TypedBriefsScreen.d.ts

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

package/dist/screens/TypedBriefsScreen.js

@@ -0,0 +1,75 @@
+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 { BRIEF_TYPE_LABEL, LINK_PLACEMENT_LABEL, platformName } from "./labels.js";
+/** The explainer's five beats in story order. Each key is the beat's own key on ExplainerBeats. */
+const EXPLAINER_BEATS = [
+    { key: "question", title: "Question" },
+    { key: "model", title: "Model" },
+    { key: "proof", title: "Proof" },
+    { key: "turn", title: "Turn" },
+    { key: "payoff", title: "Payoff" },
+];
+export function TypedBriefsScreen({ 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: "Typed briefs", subtitle: "Read only. The typed briefs of one channel, the platform variants made from each brief. Nothing here writes a brief or derives a variant.", 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: "Typed 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.listTypedBriefs(scopeId), [source, rev, scopeId]);
+    const [picked, setPicked] = useState(null);
+    if (state.status === "error") {
+        return _jsx(LoadError, { message: "Could not read the typed briefs from the daemon.", onRetry: reload });
+    }
+    if (value === null)
+        return _jsx(SkeletonRows, { label: "Loading typed briefs", rows: 3 });
+    if (value.length === 0) {
+        return (_jsx(EmptyState, { title: "No typed briefs yet", children: _jsx("p", { children: "This channel has no typed brief. A brief is written on the daemon host or with the CLI, not here. This is not an error." }) }));
+    }
+    const selected = value.find((b) => b.briefId === picked) ?? value[0];
+    return (_jsxs(_Fragment, { children: [_jsxs("section", { "aria-labelledby": "typed-list-title", children: [_jsxs("h2", { id: "typed-list-title", className: "op-section-title", children: ["Typed briefs (", groupDigits(String(value.length)), ")"] }), _jsx("div", { className: "op-table-scroll", children: _jsxs(Table, { "aria-labelledby": "typed-list-title", children: [_jsx(TableCaption, { children: "Typed briefs in this channel, by brief id" }), _jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: "Brief id" }), _jsx(TableHeaderCell, { children: "Type" }), _jsx(TableHeaderCell, { children: "Hook" }), _jsx(TableHeaderCell, { align: "end", children: "Revision" }), _jsx(TableHeaderCell, { children: "Last changed (UTC)" })] }) }), _jsx(TableBody, { children: value.map((brief) => (_jsxs(TableRow, { children: [_jsx(TableCell, { rowHeader: true, className: "op-mono", children: brief.briefId }), _jsx(TableCell, { children: BRIEF_TYPE_LABEL[brief.briefType] }), _jsx(TableCell, { children: brief.hook }), _jsx(TableCell, { numeric: true, children: groupDigits(String(brief.revision)) }), _jsx(TableCell, { className: "op-mono", children: instantLabel(brief.updatedAtUtc, "UTC") })] }, brief.briefId))) })] }) })] }), _jsxs("section", { "aria-labelledby": "typed-detail-heading", children: [_jsx("h2", { id: "typed-detail-heading", className: "op-section-title", children: "Selected typed brief" }), _jsx(Field, { label: "Typed brief", children: ({ id, "aria-describedby": describedBy }) => (_jsx("select", { id: id, "aria-describedby": describedBy, className: "op-select", value: selected.briefId, onChange: (e) => setPicked(e.target.value), children: value.map((brief) => (_jsxs("option", { value: brief.briefId, children: [brief.briefId, " (", BRIEF_TYPE_LABEL[brief.briefType], ")"] }, brief.briefId))) })) }), _jsx(TypedBriefDetail, { source: source, rev: rev, scopeId: scopeId, briefId: selected.briefId }, selected.briefId)] })] }));
+}
+function TypedBriefDetail({ source, rev, scopeId, briefId, }) {
+    const brief = useAsync(() => source.getTypedBrief(scopeId, briefId), [source, rev, scopeId, briefId]);
+    const variants = useAsync(() => source.listBriefVariants(scopeId, briefId), [source, rev, scopeId, briefId]);
+    if (brief.state.status === "error") {
+        return _jsx(LoadError, { message: "Could not read this typed brief from the daemon.", onRetry: brief.reload });
+    }
+    if (variants.state.status === "error") {
+        return _jsx(LoadError, { message: "Could not read the platform variants from the daemon.", onRetry: variants.reload });
+    }
+    if (brief.state.status === "loading" || variants.state.status === "loading") {
+        return _jsx(SkeletonRows, { label: "Loading the typed brief", rows: 3 });
+    }
+    const record = brief.state.value;
+    if (record === null)
+        return _jsx("p", { className: "op-hint", children: "This typed brief is no longer in this channel." });
+    const derived = variants.state.value;
+    return (_jsxs("article", { className: "op-detail", "aria-labelledby": "typed-detail-title", children: [_jsx("h3", { id: "typed-detail-title", className: "op-detail__title", children: record.briefId }), _jsxs("dl", { className: "op-dl", children: [_jsx("dt", { children: "Brief id" }), _jsx("dd", { className: "op-mono", children: record.briefId }), _jsx("dt", { children: "Type" }), _jsx("dd", { children: BRIEF_TYPE_LABEL[record.briefType] }), _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: "Hook" }), _jsx("div", { className: "op-caption", children: record.hook }), _jsx("h4", { className: "op-section-title", children: "Body" }), _jsx("div", { className: "op-caption", children: record.body }), record.briefType === "explainer" ? _jsx(ExplainerParts, { beats: record.explainer }) : null, record.briefType === "product_demo" ? _jsx(DemoSteps, { steps: record.demoSteps }) : null, _jsx(VariantSection, { variants: derived, currentRevision: record.revision })] }));
+}
+/** The explainer's five beats, each with its scene spec. A beat the engine lacks is never invented. */
+function ExplainerParts({ beats }) {
+    if (beats === null) {
+        return (_jsxs("section", { "aria-labelledby": "typed-beats-title", children: [_jsx("h4", { id: "typed-beats-title", className: "op-section-title", children: "Explainer beats" }), _jsx("p", { className: "op-hint", children: "The engine holds no beats for this explainer." })] }));
+    }
+    const scenes = beats;
+    return (_jsxs("section", { "aria-labelledby": "typed-beats-title", children: [_jsx("h4", { id: "typed-beats-title", className: "op-section-title", children: "Explainer beats" }), _jsx("ol", { className: "op-id-list", children: EXPLAINER_BEATS.map((beat, index) => (_jsxs("li", { children: [_jsx("p", { children: _jsxs("strong", { children: ["Beat ", groupDigits(String(index + 1)), ": ", beat.title] }) }), _jsx(SceneSpecView, { scene: scenes[beat.key] })] }, beat.key))) })] }));
+}
+function SceneSpecView({ scene }) {
+    return (_jsxs("dl", { className: "op-dl", children: [_jsx("dt", { children: "Teaches" }), _jsx("dd", { children: scene.teaches }), _jsx("dt", { children: "Frame" }), _jsx("dd", { children: scene.frame }), _jsx("dt", { children: "Motion" }), _jsx("dd", { children: scene.motion }), _jsx("dt", { children: "Words" }), _jsx("dd", { children: scene.words }), _jsx("dt", { children: "Sound" }), _jsx("dd", { children: scene.sound })] }));
+}
+/** The product demo's steps, in the order they are recorded. Each step is the text said during it. */
+function DemoSteps({ steps }) {
+    return (_jsxs("section", { "aria-labelledby": "typed-steps-title", children: [_jsx("h4", { id: "typed-steps-title", className: "op-section-title", children: "Demo steps" }), steps.length === 0 ? (_jsx("p", { className: "op-hint", children: "The engine holds no demo steps for this brief." })) : (_jsx("ol", { className: "op-id-list", children: steps.map((step, index) => (_jsx("li", { children: step.say }, `step-${index}`))) }))] }));
+}
+/** The platform variants of one brief, with the revision and rule revision each was made under. */
+function VariantSection({ variants, currentRevision }) {
+    const older = variants.filter((variant) => variant.briefRevision < currentRevision).length;
+    return (_jsxs("section", { "aria-labelledby": "typed-variants-title", children: [_jsx("h4", { id: "typed-variants-title", className: "op-section-title", children: "Platform variants" }), _jsx("p", { className: "op-hint", children: "A variant is one platform rendering of this brief, made under one platform rule revision. The engine keeps each variant as it was made: an edit to the brief or a new rule revision makes a new variant rather than changing this one." }), _jsx("p", { className: "op-hint", children: "The engine stores no separate hashtag list, and keeps no duration on a variant. Hashtags appear in the caption text as stored. The duration is checked against the rule when a variant is made, and is not shown here." }), older > 0 ? (_jsxs("p", { className: "op-hint", children: [groupDigits(String(older)), " ", older === 1 ? "variant was" : "variants were", " made from an older revision of this brief. The brief is now at revision ", groupDigits(String(currentRevision)), "."] })) : null, variants.length === 0 ? (_jsx("p", { className: "op-hint", children: "No platform variant is stored for this brief yet." })) : (_jsx("div", { className: "op-table-scroll", children: _jsxs(Table, { "aria-labelledby": "typed-variants-title", children: [_jsx(TableCaption, { children: "Platform variants of this brief, by platform" }), _jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: "Variant id" }), _jsx(TableHeaderCell, { children: "Platform" }), _jsx(TableHeaderCell, { children: "Caption, as stored" }), _jsx(TableHeaderCell, { children: "Link placement" }), _jsx(TableHeaderCell, { children: "Link" }), _jsx(TableHeaderCell, { align: "end", children: "Brief revision" }), _jsx(TableHeaderCell, { align: "end", children: "Rule revision" }), _jsx(TableHeaderCell, { children: "Created (UTC)" })] }) }), _jsx(TableBody, { children: variants.map((variant) => (_jsxs(TableRow, { children: [_jsx(TableCell, { rowHeader: true, className: "op-mono", children: variant.variantId }), _jsx(TableCell, { children: platformName(variant.platform) }), _jsx(TableCell, { children: _jsx("pre", { className: "op-pre", tabIndex: 0, "aria-label": `Caption of the ${platformName(variant.platform)} variant ${variant.variantId} as stored`, children: variant.caption }) }), _jsx(TableCell, { children: LINK_PLACEMENT_LABEL[variant.linkPlacement] }), _jsx(TableCell, { children: variant.link === null ? "No link given" : _jsx("span", { className: "op-mono", children: variant.link }) }), _jsx(TableCell, { numeric: true, children: groupDigits(String(variant.briefRevision)) }), _jsx(TableCell, { numeric: true, children: variant.ruleRevision }), _jsx(TableCell, { className: "op-mono", children: instantLabel(variant.createdAtUtc, "UTC") })] }, variant.variantId))) })] }) }))] }));
+}

package/dist/screens/labels.d.ts

@@ -0,0 +1,121 @@
+import type { AnalyticsSource, Approval, BriefState, BriefType, DispatchOutcome, GateDisposition, GateVerdict, ContentMediaKind, ContentState, ContentVariantKind, ContentVerdict, Entitlement, HeartbeatState, InboxKind, InboxState, PacingReason, HookTestRole, HookTestState, JobFormat, JobState, LinkPlacement, OptimiseState, ProofStatus, PublishProgressState, PublishResolutionDecision, RejectReason, SocialPlatform, TokenHealth } from "../data/index.js";
+/** The ordinary name of each account platform. Exhaustive over SocialPlatform: a new id fails to compile until it is named. */
+export declare const PLATFORM_LABEL: Record<SocialPlatform, string>;
+/**
+ * The display name for any platform id a stored row carries. A known id gets its name. An id the desktop does
+ * not know (a newer engine) is shown with its raw id and the words "unknown platform", never dropped.
+ */
+export declare function platformName(platform: string): string;
+export declare const FORMAT_LABEL: Record<JobFormat, string>;
+/** Suggestion states. Text carries the meaning; the tone is a secondary cue. */
+export declare const OPTIMISE_STATE_LABEL: Record<OptimiseState, {
+    text: string;
+    tone: Tone;
+}>;
+export type Tone = "neutral" | "accent" | "ok" | "warn" | "bad";
+/** Hook test states. An open set is read on the daemon host, so the label says so. */
+export declare const HOOK_STATE_LABEL: Record<HookTestState, {
+    text: string;
+    tone: Tone;
+}>;
+/** Opening roles in a decided hook test. Null (not decided) is written by the screen. */
+export declare const HOOK_ROLE_LABEL: Record<HookTestRole, string>;
+export declare const STATE_LABEL: Record<JobState, {
+    text: string;
+    tone: Tone;
+}>;
+/** The daemon's publish job state, shown beside the calendar state. Text carries the meaning. */
+export declare const PUBLISH_STATE_LABEL: Record<PublishProgressState, {
+    text: string;
+    tone: Tone;
+}>;
+/** A person's recorded decision on an outcome_unknown job, in words. */
+export declare const PUBLISH_RESOLUTION_LABEL: Record<PublishResolutionDecision, string>;
+/** The plain explanation shown on every outcome_unknown failure. The wording is fixed. */
+export declare const OUTCOME_UNKNOWN_EXPLANATION: string;
+export declare const REJECT_LABEL: Record<RejectReason, string>;
+export declare const MEDIA_STATUS_LABEL: {
+    readonly ready: "Ready";
+    readonly uploading: "Uploading";
+    readonly missing: "Missing";
+};
+export declare function approvalText(approval: Approval): {
+    text: string;
+    tone: Tone;
+};
+export declare function tokenText(token: TokenHealth, nowUtc: string): {
+    text: string;
+    tone: Tone;
+    mark: string;
+};
+export declare const ENTITLEMENT_LABEL: Record<Entitlement, {
+    text: string;
+    hint: string;
+}>;
+export declare function cooldownText(until: string | null, nowUtc: string): string;
+export declare function countText(n: number): string;
+/** Content record states. Withdrawn is final; expired is derived from the clock and never stored. */
+export declare const CONTENT_STATE_LABEL: Record<ContentState, {
+    text: string;
+    tone: Tone;
+}>;
+export declare const CONTENT_MEDIA_KIND_LABEL: Record<ContentMediaKind, string>;
+export declare const CONTENT_VARIANT_KIND_LABEL: Record<ContentVariantKind, string>;
+/** The engine's experiment verdict in words. Neither verdict names a winner. */
+export declare const CONTENT_VERDICT_LABEL: Record<ContentVerdict, {
+    text: string;
+    tone: Tone;
+}>;
+/** The text gate's overall result. The words say what happens next; the tone is a secondary cue only. */
+export declare const GATE_DISPOSITION_LABEL: Record<GateDisposition, {
+    text: string;
+    tone: Tone;
+}>;
+/** One rule's verdict in words. */
+export declare const GATE_VERDICT_LABEL: Record<GateVerdict, string>;
+/** Outgoing brief states. An issued brief has no delivery yet; a partial one has only some of what was requested. */
+export declare const BRIEF_STATE_LABEL: Record<BriefState, {
+    text: string;
+    tone: Tone;
+}>;
+/** Dispatch attempt outcomes. Each names what happened to the run, in words. */
+export declare const DISPATCH_OUTCOME_LABEL: Record<DispatchOutcome, {
+    text: string;
+    tone: Tone;
+}>;
+/** Heartbeat states in words. "Stale" and "unreadable" are never shown as alive. */
+export declare const HEARTBEAT_STATE_LABEL: Record<HeartbeatState, {
+    text: string;
+    tone: Tone;
+}>;
+/** Proof statuses in words. Only an approved proof can be cited by a script; the tone is a secondary cue only. */
+export declare const PROOF_STATUS_LABEL: Record<ProofStatus, {
+    text: string;
+    tone: Tone;
+}>;
+/** Typed brief types in words. The type is text; no colour is used. */
+export declare const BRIEF_TYPE_LABEL: Record<BriefType, string>;
+/** Where a platform places a link, in words. "none" means the platform carries no link. */
+export declare const LINK_PLACEMENT_LABEL: Record<LinkPlacement, string>;
+/** A stored metric the platform does not provide. It is never shown as zero. */
+export declare const ANALYTICS_UNAVAILABLE = "Not available from this platform";
+/** Where a stored number came from, in words. An API row names its pull elsewhere; a manual row names its import. */
+export declare function analyticsSourceText(source: AnalyticsSource, importId: string | null): string;
+/** A post's age at an observation: the exact seconds, then the same span in days, hours and minutes. */
+export declare function postAgeText(seconds: number): string;
+/** Inbox event kinds in words. The kind is text; no colour is used. */
+export declare const INBOX_KIND_LABEL: Record<InboxKind, string>;
+/** Inbox event states in words. The state is set by a person on the server; this screen only shows it. */
+export declare const INBOX_STATE_LABEL: Record<InboxState, {
+    text: string;
+    tone: Tone;
+}>;
+/** Why a publish job may not run now, in words. Every reason the daemon can give has a line here. */
+export declare const PACING_REASON_LABEL: Record<PacingReason, string>;
+/** An inbox kind as stored. A kind the desktop does not show is named as such, never dropped. */
+export declare function inboxKindText(kind: string): string;
+/** An inbox state as stored. A state the desktop does not show is named as such. */
+export declare function inboxStateText(state: string): {
+    text: string;
+    tone: Tone;
+};