create-safest-tools 0.4.2 → 0.5.0

package/README.md

@@ -18,7 +18,7 @@ npx create-safest-tools safest-resolve \
   --email-from reports@example.com
 ```
 
-The `--email-from` address is used only for reporter receipts, follow-ups, and outcomes, and must belong to a domain onboarded under Cloudflare Email Service → Email Sending. Account verification, invitations, and password recovery use a distinct `accounts@` address on the same domain by default; pass `--auth-email-from` to choose another address.
+The `--email-from` address is a real, receivable mailbox used for reporter receipts, follow-ups, outcomes, and replies. Use a short base address such as `reports@example.com` on a domain onboarded under Cloudflare Email Service → Email Sending, then enable Email Routing for that domain. Setup creates an exact Worker route for this address, enables plus-addressing for signed case replies, and does not enable catch-all mail. Account verification, invitations, and password recovery use a distinct `accounts@` address on the same domain by default; pass `--auth-email-from` to choose another address.
 
 The command creates a local project and prints a read-only infrastructure plan. It does not change Cloudflare unless `--deploy` is supplied or the generated project’s `npm run setup` command is run and explicitly confirmed.
 
@@ -44,7 +44,7 @@ npm run setup:plan
 npm run setup
 ```
 
-`setup:plan` lists exact resource names and exits without modifying Cloudflare. `setup` opens Wrangler's Cloudflare login when needed, lets you choose the owning account, and verifies Workers Paid from the account's Workers usage model. Standard accounts need no separate billing token; only legacy or ambiguous account models use the temporary Billing Read fallback. It then guides Google, GitHub, and Cloudflare OAuth configuration with exact callback URLs and masked secret input. Nothing is provisioned until the exact `DEPLOY <installation-id>` confirmation.
+`setup:plan` lists exact resource names and the reporter email route, then exits without modifying Cloudflare. `setup` opens Wrangler's Cloudflare login when needed, lets you choose the owning account, and verifies Workers Paid from the account's Workers usage model. Standard accounts need no separate billing token; only legacy or ambiguous account models use the temporary Billing Read fallback. It then guides Google, GitHub, and Cloudflare OAuth configuration with exact callback URLs and masked secret input. Nothing is provisioned until the exact `DEPLOY <installation-id>` confirmation. After confirmation it verifies Email Routing, enables subaddressing, and deploys only the exact reporter-address route.
 
 A new installation applies one current D1 schema baseline. Later releases add only forward-compatible upgrade migrations.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-safest-tools",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Create customer-owned abuse-reporting infrastructure on Cloudflare",
   "type": "module",
   "license": "Apache-2.0",

package/src/cli.mjs

@@ -29,7 +29,7 @@ Options:
   --origin origin        Allowed embedding/application origin; repeat as needed
   --owner-email email    Initial infrastructure owner bound to one-time setup
   --admin-email email    Deprecated alias for --owner-email
-  --email-from address   Reporter-update sender on an onboarded Email Sending domain
+  --email-from address   Receivable reporter mailbox on the onboarded email domain
   --auth-email-from addr Account/invitation sender (default: accounts@same-domain)
   --yes                  Do not prompt for omitted optional values
   --skip-install         Create files without running npm install or setup:plan
@@ -111,7 +111,7 @@ async function completeInteractive(options, input) {
   options.publicBaseUrl ||= await ask(input, "Public reports origin", "https://reports.example.com");
   if (!options.allowedOrigins.length) options.allowedOrigins.push(await ask(input, "Application origin allowed to embed the report form", "https://app.example.com"));
   options.ownerEmail ||= await ask(input, "Infrastructure owner email");
-  options.emailFromAddress ||= await ask(input, "Reporter-update sender on a Cloudflare Email Sending domain");
+  options.emailFromAddress ||= await ask(input, "Receivable reporter mailbox (for example reports@example.com)");
   return options;
 }
 

package/src/config.mjs

@@ -30,10 +30,21 @@ function defaultAuthEmail(reporterEmail) {
   return `${reporterEmail.slice(0, at).toLowerCase() === "accounts" ? "auth" : "accounts"}@${domain}`;
 }
 
+function validateReporterMailbox(address, field) {
+  const local = address.slice(0, address.lastIndexOf("@"));
+  if (/^no-?reply$/u.test(local)) {
+    throw new Error(`${field} must be a receivable mailbox, not a no-reply address`);
+  }
+  if (local.includes("+") || local.length > 10) {
+    throw new Error(`${field} must use a base mailbox of 10 characters or fewer without plus-addressing so secure case reply addresses fit`);
+  }
+}
+
 function emailAddresses(config) {
   const reporter = optionalEmail(config.email?.fromAddress, "email.fromAddress");
   const auth = optionalEmail(config.email?.authFromAddress, "email.authFromAddress") || defaultAuthEmail(reporter);
   if (reporter && auth === reporter) throw new Error("authentication and reporter email senders must be different addresses");
+  validateReporterMailbox(reporter, "email.fromAddress");
   return { reporter, auth };
 }
 
@@ -51,6 +62,7 @@ export function buildConfiguration(options) {
   if (!ownerEmail) throw new Error("--owner-email is required");
   const emailFromAddress = optionalEmail(options.emailFromAddress, "email sender");
   if (!emailFromAddress) throw new Error("--email-from is required and its domain must be onboarded to Cloudflare Email Sending");
+  validateReporterMailbox(emailFromAddress, "--email-from");
   const authEmailFromAddress = optionalEmail(options.authEmailFromAddress, "authentication email sender")
     || defaultAuthEmail(emailFromAddress);
   if (authEmailFromAddress === emailFromAddress) throw new Error("--auth-email-from must differ from --email-from");
@@ -153,6 +165,7 @@ export function buildWranglerConfiguration(config) {
   if (!usesWorkersDev) {
     wrangler.routes = [{ pattern: publicHostname, custom_domain: true }];
   }
+  wrangler.addresses = [email.reporter];
   wrangler.send_email = [
     { name: "AUTH_EMAIL", allowed_sender_addresses: [email.auth] },
     { name: "REPORTER_EMAIL", allowed_sender_addresses: [email.reporter] },

package/template/README.md

@@ -9,7 +9,7 @@ This project deploys one Worker, one D1 database, four private R2 buckets, a Dyn
 Before deployment:
 
 1. Review `reports.config.json` and `npm run setup:plan`.
-2. Under Cloudflare Email Service → Email Sending, onboard the configured sender domain. Reporter updates and account mail use separate sender addresses and sender-restricted bindings.
+2. Under Cloudflare Email Service → Email Sending, onboard the configured sender domain. Enable Email Routing for that domain and use a real reporter mailbox such as `reports@example.com`; setup creates only that exact Worker route, enables plus-addressing for signed case replies, and never enables catch-all routing. Reporter updates and account mail use separate sender addresses and sender-restricted bindings.
 3. Run `npm run setup`. The guided setup signs in through Wrangler and verifies Workers Paid from the account's Workers usage model before provisioning. Standard accounts need no separate billing token; only legacy or ambiguous models use the temporary Billing Read fallback. Setup then creates owner-only local secrets and walks through optional Google, GitHub, and Cloudflare OAuth credentials with exact callback URLs.
 4. Type the exact installation confirmation when setup requests it. After deployment, setup prints a 256-bit, single-use owner link that expires after 15 minutes and is never written to disk.
 5. Open the owner link, create the Safest owner account, then invite administrators and analysts from People. Nobody needs a Cloudflare account to sign in. Names and workspace roles are always displayed separately.
@@ -20,7 +20,7 @@ If the setup link expires, run `npm run owner:setup`. If the owner loses access
 
 Administrators build and preview questions in **Configuration → Intake forms**, set the logo, colours, fonts, and shape in **Settings → Branding**, then choose a private hosted page, signed-in product widget, or anonymous product widget in **Settings → Reporting channels**. Hosted pages and anonymous widgets need no API key. Signed-in widgets use one small customer-backend endpoint; verified reporter, target, and registered trusted facts stay server-side while the browser receives only a short-lived opaque token. Every public submission is verified with Turnstile inside a Resolve-owned isolated frame.
 
-Cloudflare Email Service and an `--email-from reports@example.com` address on an onboarded Email Sending domain are required for reporter receipts, follow-ups, and outcomes. Invitations, email verification, and password recovery use a separate `accounts@` sender by default; `--auth-email-from` overrides it. A configured signed customer notification webhook remains the fallback for reference-only participants.
+Cloudflare Email Service and a receivable `--email-from reports@example.com` address on an onboarded Email Sending domain are required for reporter receipts, follow-ups, outcomes, and replies. Reply addresses contain a signed, expiring case token; the Worker also verifies the original reporter address before storing a message. Invitations, email verification, and password recovery use a separate `accounts@` sender by default; `--auth-email-from` overrides it. A configured signed customer notification webhook remains the fallback for reference-only participants.
 
 ```bash
 npm run backup:plan

package/template/console/reports/ReportDrawer.tsx

@@ -64,13 +64,37 @@ function deliveryExplanation(state: string): string {
 function timelineDetail(event: TimelineEvent): string {
   const details = event.details ?? {};
   const value = (key: string): string => typeof details[key] === "string" || typeof details[key] === "number" ? String(details[key]) : "";
-  if (event.eventType === "state_transition") return `${readable(value("from_state") || "received")} → ${readable(value("to_state") || event.code)}`;
+  if (event.eventType === "state_transition") {
+    const from = value("from_state");
+    const to = value("to_state") || event.code;
+    if (!from && to === "received") return "The report was safely recorded and queued for routing.";
+    return `${readable(from)} → ${readable(to)}`;
+  }
   if (event.eventType === "finding") return value("summary") || readable(event.code);
   if (event.eventType === "action") return `${readable(value("action_code") || "action")} · ${readable(event.code)}`;
   if (event.eventType === "message") return `${readable(value("audience") || "reporter")} · ${readable(value("delivery_state") || event.code)}`;
   return `${readable(event.code)}${value("error_code") ? ` · ${readable(value("error_code"))}` : ""}`;
 }
 
+function timelineTitle(event: TimelineEvent): string {
+  const details = event.details ?? {};
+  const value = (key: string): string => typeof details[key] === "string" ? String(details[key]) : "";
+  if (event.eventType === "state_transition") {
+    const from = value("from_state");
+    const to = value("to_state") || event.code;
+    if (!from && to === "received") return "Report received";
+    if (to === "human_review") return event.code === "reporter_reply_received" ? "Reporter reply needs review" : "Routed for human review";
+    if (to === "awaiting_reporter") return "Waiting for the reporter";
+    if (to.startsWith("resolved")) return "Report resolved";
+    return readable(event.code || "Case status changed");
+  }
+  if (event.eventType === "message") return event.code === "inbound" ? "Reporter replied" : "Update sent to reporter";
+  if (event.eventType === "decision") return "Decision recorded";
+  if (event.eventType === "finding") return "Evidence finding recorded";
+  if (event.eventType === "action") return "Application action updated";
+  return readable(event.eventType || "Case activity");
+}
+
 function timelineMarker(eventType: string): string {
   if (eventType === "finding") return "⬡";
   if (eventType === "workflow_run") return "⌘";
@@ -80,6 +104,14 @@ function timelineMarker(eventType: string): string {
   return "•";
 }
 
+const decisionOptions = [
+  { value: "violation_confirmed", label: "Violation confirmed" },
+  { value: "no_violation_found", label: "No violation found" },
+  { value: "insufficient_information", label: "Insufficient information" },
+  { value: "out_of_scope", label: "Out of scope" },
+  { value: "duplicate", label: "Duplicate report" },
+] as const;
+
 function DetailContent({ report, actorId, generatedAt, actionCodes, claimReports, messageReporters, decideReports, pendingAction, messageMutationVersion, statusMessage, error }: {
   report: ReportDetailRecord;
   actorId: string;
@@ -98,6 +130,14 @@ function DetailContent({ report, actorId, generatedAt, actionCodes, claimReports
   const messages = report.messages ?? [];
   const workflowRuns = report.workflowRuns ?? [];
   const timeline = report.timeline ?? [];
+  const caseTimeline = timeline.filter((item) => {
+    if (["workflow_run", "component_run"].includes(item.eventType)) return false;
+    if (item.eventType !== "state_transition") return true;
+    const from = item.details?.from_state;
+    const to = item.details?.to_state;
+    return !from || from !== to;
+  });
+  const technicalTimeline = timeline.filter((item) => ["workflow_run", "component_run"].includes(item.eventType));
   const findings = report.findings ?? [];
   const decisions = report.decisions ?? [];
   const aiRuns = report.aiRuns ?? [];
@@ -176,7 +216,7 @@ function DetailContent({ report, actorId, generatedAt, actionCodes, claimReports
         </div></section>
       </div>
 
-      {workflowRuns.length || timeline.length ? <section><h3>Workflow &amp; case timeline</h3><div className="report-run-list">{workflowRuns.map((run) => <article className="report-run-record" key={run.id}><div><strong>{run.workflowName || run.workflowKey || `Workflow ${String(run.workflowVersionId || run.id).slice(0, 12)}`}</strong><small>{readable(run.runKind || "primary")} · {readable(run.authorityMode || "assist")} · immutable version {run.workflowVersion || String(run.workflowVersionId || "").slice(0, 12)}</small></div><span className={`badge${["failed", "repair_required"].includes(run.state) ? " urgent" : ""}`}>{readable(run.state)}</span></article>)}</div><div className="report-timeline">{timeline.map((item, index) => <article className="timeline-event" key={item.id ?? `${item.eventType}-${item.createdAt}-${index}`}><span className={`timeline-marker ${item.eventType || "event"}`}>{timelineMarker(item.eventType)}</span><div><strong>{readable(item.eventType || "activity")}</strong><span>{timelineDetail(item)}</span><small>{relativeTime(item.createdAt)} · {readable(item.actorType || "system")}</small></div></article>)}</div></section> : null}
+      {workflowRuns.length || timeline.length ? <section className="case-activity-section"><div className="case-activity-heading"><div><h3>Case activity</h3><p>A clear record of reporter communication, review, and decisions.</p></div><span>{caseTimeline.length} event{caseTimeline.length === 1 ? "" : "s"}</span></div><div className="report-timeline">{caseTimeline.map((item, index) => <article className="timeline-event" key={item.id ?? `${item.eventType}-${item.createdAt}-${index}`}><span className={`timeline-marker ${item.eventType || "event"}`}>{timelineMarker(item.eventType)}</span><div><strong>{timelineTitle(item)}</strong><span>{timelineDetail(item)}</span><small>{dateTime(item.createdAt)} · {relativeTime(item.createdAt)} · {readable(item.actorType || "system")}</small></div></article>)}</div>{workflowRuns.length || technicalTimeline.length ? <details className="workflow-technical"><summary>Technical workflow details <span>{workflowRuns.length} workflow run{workflowRuns.length === 1 ? "" : "s"}</span></summary><div className="report-run-list">{workflowRuns.map((run) => <article className="report-run-record" key={run.id}><div><strong>{run.workflowName || run.workflowKey || `Workflow ${String(run.workflowVersionId || run.id).slice(0, 12)}`}</strong><small>{readable(run.runKind || "primary")} · {readable(run.authorityMode || "assist")} · immutable version {run.workflowVersion || String(run.workflowVersionId || "").slice(0, 12)}</small></div><span className={`badge${["failed", "repair_required"].includes(run.state) ? " urgent" : ""}`}>{readable(run.state)}</span></article>)}</div>{technicalTimeline.length ? <p className="technical-event-count">{technicalTimeline.length} low-level execution event{technicalTimeline.length === 1 ? "" : "s"} recorded in the audit trail.</p> : null}</details> : null}</section> : null}
 
       <section><h3>Case messages</h3><div className="message-list">{messages.length ? messages.map((item, index) => <article className={`case-message ${item.direction}`} key={item.id ?? `${item.createdAt}-${index}`}><div>{item.body}</div><small>{readable(item.senderType)} · {dateTime(item.createdAt)} · {deliveryLabel(item.deliveryState)}{deliveryExplanation(item.deliveryState) ? ` — ${deliveryExplanation(item.deliveryState)}` : ""}</small></article>) : <EmptyLine>No case messages yet.</EmptyLine>}</div></section>
 
@@ -192,7 +232,7 @@ function DetailContent({ report, actorId, generatedAt, actionCodes, claimReports
 
       <div className="detail-actions">
         <form onSubmit={sendMessage}><h3>Ask the reporter</h3><p className="form-help">The update is emailed when the reporter supplied an address. Otherwise, Resolve uses the configured signed customer notification channel.</p><label>Message<textarea maxLength={4000} required value={message} onChange={(event) => setMessage(event.currentTarget.value)} disabled={!canMessage || pendingAction === "message"} /></label><label className="checkbox"><input type="checkbox" checked={awaitReporter} onChange={(event) => setAwaitReporter(event.currentTarget.checked)} disabled={!canMessage || pendingAction === "message"} />Move to awaiting reporter</label><button className="secondary" type="submit" disabled={!canMessage || pendingAction === "message"}>{pendingAction === "message" ? "Queueing…" : "Send participant update"}</button></form>
-        <form onSubmit={recordDecision}><h3>Record a human decision</h3><label>Decision code<input value={decisionCode} onChange={(event) => setDecisionCode(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} required /></label><label>Policy code<select value={policyCode} onChange={(event) => setPolicyCode(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} required>{rules.map((rule) => <option value={rule.code} key={rule.code}>{rule.title ? `${rule.code} · ${rule.title}` : rule.code}</option>)}</select></label><label>Internal rationale<textarea maxLength={8000} value={rationale} onChange={(event) => setRationale(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} required /></label><label>Reporter outcome<textarea maxLength={4000} value={reporterNotice} onChange={(event) => setReporterNotice(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} required /></label><label>Affected-user notice <small>Optional; sent through a separate audience channel.</small><textarea maxLength={4000} value={affectedNotice} onChange={(event) => setAffectedNotice(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} /></label>{actionCodes.length ? <label>Application action <small>Optional. Only deployment-allowlisted actions are shown.</small><select value={actionCode} onChange={(event) => setActionCode(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"}><option value="">No application action</option>{actionCodes.map((code) => <option value={code} key={code}>{readable(code)}</option>)}</select></label> : null}<button className="primary" type="submit" disabled={!canDecide || pendingAction === "decision"}>{pendingAction === "decision" ? "Recording…" : "Complete human review"}</button></form>
+        <form onSubmit={recordDecision}><h3>Record a human decision</h3><label>Decision outcome<select value={decisionCode} onChange={(event) => setDecisionCode(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} required>{decisionOptions.map((option) => <option value={option.value} key={option.value}>{option.label}</option>)}</select></label><label>Policy code<select value={policyCode} onChange={(event) => setPolicyCode(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} required>{rules.map((rule) => <option value={rule.code} key={rule.code}>{rule.title ? `${rule.code} · ${rule.title}` : rule.code}</option>)}</select></label><label>Internal rationale<textarea maxLength={8000} value={rationale} onChange={(event) => setRationale(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} required /></label><label>Reporter outcome<textarea maxLength={4000} value={reporterNotice} onChange={(event) => setReporterNotice(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} required /></label><label>Affected-user notice <small>Optional; sent through a separate audience channel.</small><textarea maxLength={4000} value={affectedNotice} onChange={(event) => setAffectedNotice(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} /></label>{actionCodes.length ? <label>Application action <small>Optional. Only deployment-allowlisted actions are shown.</small><select value={actionCode} onChange={(event) => setActionCode(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"}><option value="">No application action</option>{actionCodes.map((code) => <option value={code} key={code}>{readable(code)}</option>)}</select></label> : null}<button className="primary" type="submit" disabled={!canDecide || pendingAction === "decision"}>{pendingAction === "decision" ? "Recording…" : "Complete human review"}</button></form>
       </div>
       <p className="mutation-status" role="status">{statusMessage}</p>
       <p className="error" role="alert">{error}</p>

package/template/console/reports/controller.ts

@@ -73,6 +73,9 @@ let presenceSessionId = crypto.randomUUID();
 let presenceSocket: WebSocket | null = null;
 let presenceReconnectTimer: ReturnType<typeof setTimeout> | null = null;
 let presenceHeartbeatTimer: ReturnType<typeof setInterval> | null = null;
+let reconciliationTimer: ReturnType<typeof setInterval> | null = null;
+let realtimeRefreshTimer: ReturnType<typeof setTimeout> | null = null;
+let presenceReconnectAttempts = 0;
 let presenceRunning = false;
 let started = false;
 
@@ -379,6 +382,19 @@ async function heartbeatPresence(): Promise<void> {
   }
 }
 
+function scheduleRealtimeRefresh(reportId?: string | null, immediate = false): void {
+  if (!getShellSnapshot().session || document.visibilityState === "hidden") return;
+  if (realtimeRefreshTimer) clearTimeout(realtimeRefreshTimer);
+  realtimeRefreshTimer = setTimeout(() => {
+    realtimeRefreshTimer = null;
+    const open = getReportWorkspaceSnapshot().detail.report;
+    void Promise.all([
+      loadReports(),
+      open && (!reportId || open.id === reportId) ? openReport(open.id) : Promise.resolve(),
+    ]);
+  }, immediate ? 0 : 250);
+}
+
 function sendPresenceActivity(): void {
   if (!getShellSnapshot().session) return;
   const current = currentPresenceActivity();
@@ -399,7 +415,11 @@ function openPresenceSocket(): void {
   url.searchParams.set("session_id", presenceSessionId);
   const socket = new WebSocket(url);
   presenceSocket = socket;
-  socket.addEventListener("open", sendPresenceActivity);
+  socket.addEventListener("open", () => {
+    presenceReconnectAttempts = 0;
+    sendPresenceActivity();
+    scheduleRealtimeRefresh(null, true);
+  });
   socket.addEventListener("message", (event) => {
     try {
       const message = JSON.parse(String(event.data)) as { type?: string; analysts?: RawPresenceAnalyst[]; report_id?: string };
@@ -408,9 +428,7 @@ function openPresenceSocket(): void {
         publish();
       }
       if (message.type === "claim_changed" || message.type === "reports_changed") {
-        void loadReports();
-        const report = getReportWorkspaceSnapshot().detail.report;
-        if (report && (!message.report_id || report.id === message.report_id)) void openReport(report.id);
+        scheduleRealtimeRefresh(message.report_id);
       }
     } catch {
       // Ignore messages outside the bounded presence protocol.
@@ -421,7 +439,10 @@ function openPresenceSocket(): void {
     if (presenceRunning && getShellSnapshot().session) {
       void heartbeatPresence();
       if (presenceReconnectTimer) clearTimeout(presenceReconnectTimer);
-      presenceReconnectTimer = setTimeout(openPresenceSocket, 3_000);
+      presenceReconnectAttempts += 1;
+      const baseDelay = Math.min(30_000, 1_000 * (2 ** Math.min(presenceReconnectAttempts, 5)));
+      const jitteredDelay = Math.round(baseDelay * (.8 + Math.random() * .4));
+      presenceReconnectTimer = setTimeout(openPresenceSocket, jitteredDelay);
     }
   });
   socket.addEventListener("error", () => socket.close());
@@ -430,9 +451,14 @@ function openPresenceSocket(): void {
 function stopPresence(): void {
   presenceRunning = false;
   if (presenceHeartbeatTimer) clearInterval(presenceHeartbeatTimer);
+  if (reconciliationTimer) clearInterval(reconciliationTimer);
+  if (realtimeRefreshTimer) clearTimeout(realtimeRefreshTimer);
   if (presenceReconnectTimer) clearTimeout(presenceReconnectTimer);
   presenceHeartbeatTimer = null;
+  reconciliationTimer = null;
+  realtimeRefreshTimer = null;
   presenceReconnectTimer = null;
+  presenceReconnectAttempts = 0;
   const socket = presenceSocket;
   presenceSocket = null;
   if (socket && socket.readyState < WebSocket.CLOSING) socket.close(1000, "workspace closed");
@@ -458,6 +484,7 @@ async function startPresence(): Promise<void> {
       void heartbeatPresence();
     }
   }, 15_000);
+  reconciliationTimer = setInterval(() => scheduleRealtimeRefresh(), 30_000);
   openPresenceSocket();
 }
 
@@ -520,4 +547,8 @@ export function startReportController(): void {
   window.addEventListener("keydown", (event) => {
     if (event.key === "Escape" && getReportWorkspaceSnapshot().detail.reportId) closeReport();
   });
+  window.addEventListener("focus", () => scheduleRealtimeRefresh(null, true));
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "visible") scheduleRealtimeRefresh(null, true);
+  });
 }

package/template/console/shell/controller.ts

@@ -1,4 +1,5 @@
 import { authEvents } from "../auth/events";
+import { accountRouteFromHash } from "../auth/account-route";
 import { errorMessage, hasSessionCredentials, requestJson } from "../lib/http";
 import { shellEvents } from "./events";
 import { visibleNavigationGroups } from "./navigation";
@@ -26,7 +27,7 @@ let brand: CustomerBrand = { organization_name: "Safest Resolve", logo_url: "",
 let expired = false;
 let started = false;
 
-function element(id: "login" | "workspace"): HTMLElement | null {
+function element(id: "login" | "workspace" | "session-loading"): HTMLElement | null {
   return document.querySelector<HTMLElement>(`#${id}`);
 }
 
@@ -39,6 +40,7 @@ function readable(value: string): string {
 }
 
 function setWorkspaceMode(authenticated: boolean): void {
+  document.body.classList.remove("auth-resolving");
   document.body.classList.toggle("workspace-mode", authenticated);
   document.body.classList.toggle("login-mode", !authenticated);
   document.body.classList.remove("mobile-navigation-open", "report-open");
@@ -48,8 +50,10 @@ function setWorkspaceMode(authenticated: boolean): void {
 function showWorkspace(authenticated: boolean): void {
   const login = element("login");
   const workspace = element("workspace");
+  const loading = element("session-loading");
   if (login) login.hidden = authenticated;
   if (workspace) workspace.hidden = !authenticated;
+  if (loading) loading.hidden = true;
   setWorkspaceMode(authenticated);
   if (!authenticated) setDocumentTitle("command");
 }
@@ -128,14 +132,15 @@ async function signOut(): Promise<void> {
 }
 
 async function initialize(): Promise<void> {
+  const accountRoute = accountRouteFromHash(window.location.hash);
+  if (accountRoute.view !== "login") showWorkspace(false);
   try {
     brand = await window.SafestBrand?.loadBrand("/v1/brand", { title: "Reports and workflows" }) || brand;
   } catch {
     brand = window.SafestBrand?.defaults || brand;
   }
   await checkHealth();
-  const parameters = new URLSearchParams(window.location.hash.slice(1));
-  if (parameters.has("invite") || parameters.has("reset")) return;
+  if (accountRoute.view !== "login") return;
   if (sessionStorage.getItem("safest-reports-force-login") !== "true") {
     await openWorkspace(undefined, !hasSessionCredentials());
   } else {

package/template/package.json

@@ -1,7 +1,7 @@
 {
   "name": "safest-resolve-installation",
-  "version": "0.4.2",
-  "safestToolsVersion": "0.4.2-resolve",
+  "version": "0.5.0",
+  "safestToolsVersion": "0.5.0-resolve",
   "private": true,
   "license": "Apache-2.0",
   "type": "module",
@@ -31,6 +31,7 @@
     "@clack/prompts": "^1.7.0",
     "@cloudflare/dynamic-workflows": "^0.1.1",
     "better-auth": "^1.7.2",
+    "postal-mime": "^3.0.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8"
   },