@anthusai/papyrus 5.42.1 → 5.43.0-next.10

package/components/papyrus-console-shell.tsx

@@ -6,6 +6,7 @@ import dynamic from "next/dynamic";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { CheckIcon, UserIcon } from "lucide-react";
 import { Md5 } from "@smithy/md5-js";
+import { hasEditorRights } from "../lib/staff-groups";
 import {
   createConsoleMessage,
   createConsoleThread,
@@ -35,6 +36,8 @@ import {
   type ReaderMotionSetting,
 } from "./reader-settings";
 import { PapyrusConsoleConversation, type ConsoleConversationMessage } from "./papyrus-console-conversation";
+import { PapyrusConsoleFrame } from "./papyrus-console-frame";
+import { useConsoleVisibility } from "./use-console-visibility";
 import { PapyrusPrivateChatPanel } from "./papyrus-private-chat-panel";
 import { ModelSelector } from "./ai-elements/model-selector";
 import { Suggestion, Suggestions } from "./ai-elements/suggestion";
@@ -149,12 +152,12 @@ const PapyrusConsoleContext = createContext<PapyrusConsoleContextValue | null>(n
 export function PapyrusConsoleShell({ children, privateChatEnabled = false }: PapyrusConsoleShellProps) {
   const pathname = usePathname();
   const [session, setSession] = useState<ReaderSessionSnapshot | null>(null);
-  const [open, setOpen] = useState(false);
   const [openingReferenceChat, setOpeningReferenceChat] = useState(false);
   const internalPathname = browserPathToInternalNewsroomPath(pathname);
   const isNewsroomPath = internalPathname === "/newsroom" || internalPathname.startsWith("/newsroom/");
-  const canUseConsole = Boolean(session?.hasSession && session.groups.some((group) => group === "editor" || group === "admin"));
+  const canUseConsole = Boolean(session?.hasSession && hasEditorRights(session.groups));
   const shouldOfferConsole = isNewsroomPath && canUseConsole;
+  const { open, openConsole, closeConsole, toggleOpen } = useConsoleVisibility({ available: shouldOfferConsole });
 
   useEffect(() => {
     let active = true;
@@ -165,37 +168,11 @@ export function PapyrusConsoleShell({ children, privateChatEnabled = false }: Pa
       .catch(() => {
         if (active) setSession({ auth: { status: "signedOut", label: "Signed out" }, groups: [], hasSession: false });
       });
-    try {
-      setOpen(window.localStorage.getItem("papyrus:console-open") === "true");
-    } catch {
-      setOpen(false);
-    }
     return () => {
       active = false;
     };
   }, []);
 
-  const toggleOpen = useCallback(() => {
-    setOpen((current) => {
-      const next = !current;
-      try {
-        window.localStorage.setItem("papyrus:console-open", String(next));
-      } catch {
-        // Ignore storage failures.
-      }
-      return next;
-    });
-  }, []);
-
-  const openConsole = useCallback(() => {
-    setOpen(true);
-    try {
-      window.localStorage.setItem("papyrus:console-open", "true");
-    } catch {
-      // Ignore storage failures.
-    }
-  }, []);
-
   const startReferenceChat = useCallback(async (target: NewsroomKnowledgeQueryTarget) => {
     if (!canUseConsole) {
       throw new Error("Chat is only available to editor/admin sessions.");
@@ -358,20 +335,15 @@ export function PapyrusConsoleShell({ children, privateChatEnabled = false }: Pa
 
   return (
     <PapyrusConsoleContext.Provider value={consoleContext}>
-      <div className={canUseConsole && open ? "papyrus-console-page papyrus-console-page--open" : "papyrus-console-page"}>
-        {children}
-      </div>
-      {shouldOfferConsole ? (
-        <aside className={open ? "papyrus-console papyrus-console--open" : "papyrus-console"} aria-label="Papyrus console">
-          {open ? (
-            canUseConsole
-              ? privateChatEnabled
-                ? <PapyrusPrivateChatPanel onClose={toggleOpen} />
-                : <ConsolePanel actorEmail={session?.auth.status === "signedIn" ? (session.auth.email ?? null) : null} actorLabel={session?.auth.label ?? "Papyrus editor"} onClose={toggleOpen} />
-              : <ConsoleAccessPanel onClose={toggleOpen} session={session} />
-          ) : null}
-        </aside>
-      ) : null}
+      <PapyrusConsoleFrame available={shouldOfferConsole} open={open} reserveSpace={canUseConsole && open} onClose={closeConsole} page={children}>
+        {open ? (
+          canUseConsole
+            ? privateChatEnabled
+                ? <PapyrusPrivateChatPanel onClose={closeConsole} />
+                : <ConsolePanel actorEmail={session?.auth.status === "signedIn" ? (session.auth.email ?? null) : null} actorLabel={session?.auth.label ?? "Papyrus editor"} onClose={closeConsole} />
+            : <ConsoleAccessPanel onClose={closeConsole} session={session} />
+        ) : null}
+      </PapyrusConsoleFrame>
     </PapyrusConsoleContext.Provider>
   );
 }

package/components/papyrus-private-chat-panel.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Hub } from "aws-amplify/utils";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { PapyrusConsoleConversation, type ConsoleConversationMessage } from "./papyrus-console-conversation";
 import {
@@ -31,6 +32,7 @@ export function PapyrusPrivateChatPanel({ onClose }: { onClose: () => void }) {
   const [loading, setLoading] = useState(true);
   const [sending, setSending] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const identityGeneration = useRef(0);
   const retryAttempt = useRef<{ text: string; key: string } | null>(null);
   const isWaitingForReply = messages.length > 0 && messages[messages.length - 1].author_kind === "human" &&
     messages[messages.length - 1].addressed_to_bot_id !== null;
@@ -46,38 +48,67 @@ export function PapyrusPrivateChatPanel({ onClose }: { onClose: () => void }) {
     }];
   }, [isWaitingForReply, messages]);
 
-  const refreshMessages = useCallback(async (channelId: string) => {
+  const handleFailure = useCallback(async (nextError: unknown) => {
+    const failure = failureMessage(nextError);
+    setError(failure);
+    if (["sign_in_required", "chat_account_access_denied"].includes(failure)) {
+      ++identityGeneration.current;
+      setChannel(null);
+      setMessages([]);
+      retryAttempt.current = null;
+      setSending(false);
+      setLoading(false);
+    }
+  }, []);
+
+  const refreshMessages = useCallback(async (channelId: string, generation: number) => {
     const next = await listPapyrusPrivateChatMessages(channelId);
-    setMessages(next);
+    if (generation === identityGeneration.current) setMessages(next);
   }, []);
 
   const openConversation = useCallback(async () => {
+    const generation = ++identityGeneration.current;
     setLoading(true);
     setError(null);
+    setChannel(null);
+    setMessages([]);
+    retryAttempt.current = null;
+    setSending(false);
     try {
       const nextChannel = await openPapyrusPrivateChat();
+      if (generation !== identityGeneration.current) return;
       setChannel(nextChannel);
-      await refreshMessages(nextChannel.channel_id);
+      await refreshMessages(nextChannel.channel_id, generation);
     } catch (nextError) {
-      setError(failureMessage(nextError));
+      if (generation === identityGeneration.current) await handleFailure(nextError);
     } finally {
-      setLoading(false);
+      if (generation === identityGeneration.current) setLoading(false);
     }
-  }, [refreshMessages]);
+  }, [handleFailure, refreshMessages]);
 
   useEffect(() => {
     void openConversation();
+    return () => { identityGeneration.current += 1; };
   }, [openConversation]);
 
+  useEffect(() => Hub.listen("auth", ({ payload }) => {
+    if (payload.event === "tokenRefresh") {
+      void openConversation();
+    } else if (["signedOut", "signedIn", "tokenRefresh_failure"].includes(payload.event)) {
+      void handleFailure(new Error("sign_in_required"));
+    }
+  }), [handleFailure, openConversation]);
+
   useEffect(() => {
     if (!channel || !isWaitingForReply) return;
     let active = true;
+    const generation = identityGeneration.current;
     let timer: ReturnType<typeof setTimeout> | null = null;
     const poll = async () => {
       try {
-        await refreshMessages(channel.channel_id);
+        await refreshMessages(channel.channel_id, generation);
       } catch (nextError) {
-        if (active) setError(failureMessage(nextError));
+        if (active && generation === identityGeneration.current) await handleFailure(nextError);
         return;
       }
       if (active) timer = setTimeout(poll, REFRESH_MS);
@@ -87,10 +118,11 @@ export function PapyrusPrivateChatPanel({ onClose }: { onClose: () => void }) {
       active = false;
       if (timer) clearTimeout(timer);
     };
-  }, [channel, isWaitingForReply, refreshMessages]);
+  }, [channel, handleFailure, isWaitingForReply, refreshMessages]);
 
   const sendMessage = useCallback(async (text: string) => {
     if (!channel || !text.trim() || sending) return;
+    const generation = identityGeneration.current;
     const attempt = retryAttempt.current?.text === text
       ? retryAttempt.current
       : { text, key: globalThis.crypto.randomUUID() };
@@ -99,27 +131,29 @@ export function PapyrusPrivateChatPanel({ onClose }: { onClose: () => void }) {
     setError(null);
     try {
       const result = await sendPapyrusPrivateChatMessage(channel.channel_id, text, attempt.key);
+      if (generation !== identityGeneration.current) return;
       setMessages((current) => current.some((message) => message.message_id === result.message.message_id)
         ? current
         : [...current, result.message]);
       retryAttempt.current = null;
     } catch (nextError) {
-      setError(failureMessage(nextError));
+      if (generation === identityGeneration.current) await handleFailure(nextError);
     } finally {
-      setSending(false);
+      if (generation === identityGeneration.current) setSending(false);
     }
-  }, [channel, sending]);
+  }, [channel, handleFailure, sending]);
 
   return <div className="papyrus-console__panel">
     <header className="papyrus-console__header">
       <p className="papyrus-console__header-label">Private chat</p>
       <button className="papyrus-console__close" onClick={onClose} type="button" aria-label="Close console">×</button>
     </header>
-    {channel ? <p className="papyrus-console__empty" role="status">Private conversation for your selected Account.</p> : null}
-    {!channel && !loading ? <div className="papyrus-console__empty" role="alert">
+    {channel ? <p className="papyrus-console__empty" role="status">Private conversation for this newsroom.</p> : null}
+    {!channel && !loading ? <div className="papyrus-console__access" role="alert">
       <strong>Private chat could not be opened.</strong>
-      <span>{error}</span>
+      <span>{error === "sign_in_required" ? "Your newsroom session has expired. Return to the newsroom and sign in from the account menu, then retry." : error === "chat_account_access_denied" ? "Your access to this conversation has changed. Retry to check your current access." : error}</span>
       <button className="papyrus-console__new-session" onClick={() => void openConversation()} type="button">Retry</button>
+      <button className="papyrus-console__new-session" onClick={onClose} type="button">Back to newsroom</button>
     </div> : <PapyrusConsoleConversation
       messages={conversationMessages}
       isSending={sending || loading || !channel}
@@ -127,7 +161,7 @@ export function PapyrusPrivateChatPanel({ onClose }: { onClose: () => void }) {
       onSendMessage={sendMessage}
       error={error}
       emptyState={loading ? <p className="papyrus-console__empty">Opening private conversation…</p> : (
-        <p className="papyrus-console__empty">This conversation is private to your selected Account and editor session.</p>
+        <p className="papyrus-console__empty">This conversation is private to you in this newsroom.</p>
       )}
     />}
   </div>;

package/components/proposals-panel.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { generateClient } from "aws-amplify/data";
+import amplifyOutputs from "papyrus-amplify-outputs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ProposalsView } from "./proposals-view";
+import { pluginSettings, type PluginOutputs } from "../lib/plugin-settings";
+import {
+  LIST_PROPOSALS,
+  filterProposals,
+  proposalReceiptMessage,
+  type ProposalFilter,
+  type ProposalMove,
+  type ProposalRow,
+} from "../lib/proposals-admin";
+import { performProposalMove } from "../lib/proposals-client";
+
+type GraphResult = { data?: Record<string, { items?: ProposalRow[]; nextToken?: string | null } | null>; errors?: { message?: string }[] };
+const MAXIMUM_PAGES = 20;
+
+async function loadProposals(): Promise<ProposalRow[]> {
+  const client = generateClient({ authMode: "userPool" });
+  const rows: ProposalRow[] = [];
+  let nextToken: string | null | undefined;
+  for (let page = 0; page < MAXIMUM_PAGES; page += 1) {
+    const result = (await client.graphql({ query: LIST_PROPOSALS, variables: { nextToken } })) as GraphResult;
+    if (result.errors?.length) throw new Error(result.errors[0]?.message ?? "Could not load proposals.");
+    const connection = result.data?.listProposals as { items?: ProposalRow[]; nextToken?: string | null } | undefined;
+    rows.push(...(connection?.items ?? []).filter(Boolean));
+    nextToken = connection?.nextToken;
+    if (!nextToken) break;
+  }
+  return rows;
+}
+
+/** Core to every site: it does not depend on the reader-steering plugin. */
+export function ProposalsPanel() {
+  const [rows, setRows] = useState<ProposalRow[]>([]);
+  const [filter, setFilter] = useState<ProposalFilter>("open");
+  const [status, setStatus] = useState("Loading...");
+  const [busy, setBusy] = useState(false);
+  const [reason, setReason] = useState("");
+  const [focusId, setFocusId] = useState<string | null>(null);
+  const focused = useRef(false);
+  const readers = useMemo(() => pluginSettings(amplifyOutputs as PluginOutputs, "reader-steering") !== null, []);
+
+  const refresh = useCallback(async (quiet = false) => {
+    setBusy(true);
+    try {
+      setRows(await loadProposals());
+      if (!quiet) setStatus("");
+    } catch (error) {
+      setStatus(`Error: ${error instanceof Error ? error.message : "Could not load proposals."}`);
+    } finally {
+      setBusy(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  // Sent here by a link such as `?proposal=<id>`: show the view that holds it and scroll to it.
+  useEffect(() => {
+    setFocusId(new URLSearchParams(window.location.search).get("proposal"));
+  }, []);
+  useEffect(() => {
+    if (!focusId || focused.current) return;
+    const row = rows.find((candidate) => candidate.id === focusId);
+    if (!row) return;
+    focused.current = true;
+    setFilter(filterProposals([row], "open").length ? "open" : "decided");
+    window.requestAnimationFrame(() => document.getElementById(`proposal-${focusId}`)?.scrollIntoView({ block: "start" }));
+  }, [focusId, rows]);
+
+  const onMove = useCallback(
+    async (proposalId: string, move: ProposalMove) => {
+      setBusy(true);
+      setStatus("Working...");
+      try {
+        const receipt = await performProposalMove(proposalId, move, reason.trim());
+        setStatus(proposalReceiptMessage(receipt));
+        if (receipt.status === "ok") setReason("");
+      } catch (error) {
+        setStatus(`Error: ${error instanceof Error ? error.message : "The action failed."}`);
+      }
+      await refresh(true);
+    },
+    [reason, refresh],
+  );
+
+  return (
+    <ProposalsView
+      rows={rows}
+      readers={readers}
+      filter={filter}
+      busy={busy}
+      status={status}
+      reason={reason}
+      onFilter={setFilter}
+      onReason={setReason}
+      onMove={(proposalId, move) => void onMove(proposalId, move)}
+      onRefresh={() => void refresh()}
+      focusId={focusId}
+    />
+  );
+}

package/components/proposals-view.tsx

@@ -0,0 +1,95 @@
+import { useMemo } from "react";
+import {
+  countProposals,
+  filterProposals,
+  kindLabel,
+  proposalMoves,
+  proposerLabel,
+  sortProposals,
+  stateLabel,
+  type ProposalFilter,
+  type ProposalMove,
+  type ProposalRow,
+} from "../lib/proposals-admin";
+
+const FILTERS: Array<{ key: ProposalFilter; label: string }> = [
+  { key: "open", label: "Open" },
+  { key: "draft", label: "Drafts" },
+  { key: "in_steering", label: "In steering" },
+  { key: "editor_review", label: "Editor review" },
+  { key: "decided", label: "Decided" },
+];
+
+export type ProposalsViewProps = {
+  rows: ProposalRow[];
+  /** True when the site has the reader-steering plugin; without it nothing reader-facing is shown. */
+  readers: boolean;
+  filter: ProposalFilter;
+  busy: boolean;
+  status: string;
+  reason: string;
+  onFilter: (filter: ProposalFilter) => void;
+  onReason: (reason: string) => void;
+  onMove: (proposalId: string, move: ProposalMove) => void;
+  onRefresh: () => void;
+  /** A proposal the editor was sent to (from the Notification Center): its draft opens and it is marked. */
+  focusId?: string | null;
+};
+
+export function ProposalsView(props: ProposalsViewProps) {
+  const sorted = useMemo(() => sortProposals(props.rows), [props.rows]);
+  const counts = useMemo(() => countProposals(sorted), [sorted]);
+  const shown = filterProposals(sorted, props.filter);
+  return (
+    <section aria-labelledby="newsroom-proposals-title" data-news-desk-admin-panel="proposals">
+      <h3 id="newsroom-proposals-title">Proposals</h3>
+      <p>Story drafts and other changes that AI proposes. Editors pin, hold and decide them. Only editors and admins can see this.</p>
+      <p role="tablist" aria-label="Proposal views">
+        {FILTERS.filter((entry) => props.readers || entry.key !== "in_steering").map((entry) => (
+          <span key={entry.key}>
+            <button type="button" role="tab" aria-selected={props.filter === entry.key} onClick={() => props.onFilter(entry.key)}>
+              {entry.label} ({counts[entry.key]})
+            </button>{" "}
+          </span>
+        ))}
+        <button type="button" onClick={props.onRefresh} disabled={props.busy}>Refresh</button>
+      </p>
+      <label>
+        Reason for the next move (optional){" "}
+        <input type="text" value={props.reason} maxLength={500} onChange={(event) => props.onReason(event.target.value)} />
+      </label>
+      <p role="status" aria-live="polite">{props.status}</p>
+      {shown.length === 0 ? (
+        <p>Nothing here.</p>
+      ) : (
+        <ul>
+          {shown.map((row) => (
+            <li key={row.id} id={`proposal-${row.id}`} data-proposal-row={row.id} data-proposal-focused={props.focusId === row.id || undefined}>
+              <article aria-label={row.title}>
+                <p>
+                  <strong>{kindLabel(row.kind)}</strong>: {row.title} ({stateLabel(row.state, props.readers)}
+                  {row.held ? ", on hold" : ""}) from {proposerLabel(row.proposer)} <time dateTime={row.createdAt}>{row.createdAt}</time>
+                </p>
+                {row.summary ? <p>{row.summary}</p> : null}
+                {row.body ? (
+                  <details open={props.focusId === row.id || undefined}>
+                    <summary>Read the draft</summary>
+                    <pre style={{ whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}>{row.body}</pre>
+                  </details>
+                ) : null}
+                <p>
+                  {proposalMoves(row, props.readers).map((move) => (
+                    <span key={move.label}>
+                      <button type="button" disabled={props.busy} onClick={() => props.onMove(row.id, move)}>{move.label}</button>{" "}
+                    </span>
+                  ))}
+                </p>
+              </article>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}
+