create-safest-tools 0.6.0 → 0.7.0

package/template/console/reports/types.ts

@@ -1,6 +1,6 @@
 import type { AnalystIdentityData } from "../components/AnalystIdentity";
 
-export type ReportPriorityFilter = "" | "high" | "medium" | "low";
+export type ReportPriorityFilter = "" | "urgent" | "high" | "medium" | "low";
 export type ReportAgeFilter = "" | "hour" | "day" | "older";
 export type ReportSort = "oldest" | "newest" | "priority";
 
@@ -11,6 +11,7 @@ export interface ReportFilters {
   age: ReportAgeFilter;
   state: string;
   sort: ReportSort;
+  ownership?: "" | "unassigned" | "mine";
 }
 
 export interface ReportQueueOption {
@@ -51,6 +52,7 @@ export interface EvidenceReference {
 }
 
 export interface CaseMessage {
+  audience?: "reporter" | "affected_user" | "internal";
   id?: string;
   direction: string;
   body: string;
@@ -68,6 +70,7 @@ export interface WorkflowRunRecord {
   runKind?: string;
   authorityMode?: string;
   state: string;
+  stepCount?: number;
 }
 
 export interface TimelineEvent {
@@ -80,14 +83,22 @@ export interface TimelineEvent {
 }
 
 export interface FindingRecord {
+  runId?: string | null;
   id?: string;
   findingType: string;
   summary: string;
+  componentKey?: string;
   componentVersionId?: string;
+  componentVersion?: string | number;
+  subjectType?: string;
+  subjectReference?: string;
   expiresAt?: string;
+  createdAt?: string;
   freshness?: string;
   status?: string;
   data?: unknown;
+  provenance?: unknown;
+  uncertainty?: unknown;
 }
 
 export interface DecisionRecord {
@@ -109,13 +120,29 @@ export interface DeliveryAction {
 }
 
 export interface DeliveryNotice {
+  purpose?: "appeal" | "case";
   id?: string;
+  messageId?: string;
+  decisionId?: string | null;
+  channel?: string | null;
+  attemptCount?: number;
+  errorCode?: string | null;
   audience: string;
   deliveryState: string;
   updatedAt: string;
 }
 
 export interface WorkflowActionRecord {
+  runId?: string;
+  payloadDigest?: string;
+  terminal?: boolean;
+  retryable?: boolean;
+  acceptedAt?: string | null;
+  confirmedAt?: string | null;
+  confirmationDeadlineAt?: string | null;
+  deliveryCycle?: number;
+  confirmationState?: string;
+  capabilityName?: string;
   id?: string;
   recordKind: string;
   actionCode: string;
@@ -146,6 +173,7 @@ export interface PolicyRule {
 }
 
 export interface ReportClaim {
+  version: number;
   reviewerId: string;
   expiresAt: string;
   analyst?: AnalystIdentityData;
@@ -167,6 +195,11 @@ export interface ReportAnswer {
 }
 
 export interface ReportDetailRecord {
+  relatedReports?: Array<{id:string;reference:string;state:string;reasonCode:string;submittedAt:string;queueName:string|null}>;
+  appeals?: Array<{id:string;audience:string;state:string;submittedAt:string;completionState:string|null;correctionRequired:number;correctionConfirmedAt:string|null;noticeState:string|null}>;
+  partialLoadErrors?: string[];
+  customerFacts?: Record<string, unknown>;
+  playbookManaged?: boolean;
   id: string;
   reference: string;
   state: string;
@@ -204,11 +237,23 @@ export interface ReportDetailRecord {
   workflowActions?: WorkflowActionRecord[];
   aiRuns?: AiRunRecord[];
   claim?: ReportClaim | null;
+  assignment?: ReportClaim | null;
+  handoffs?: Array<{ id: string; fromReviewerId: string; toReviewerId: string | null; note: string; authorName: string; createdAt: string }>;
 }
 
-export type ReportPendingAction = "claim" | "release" | "message" | "decision" | null;
+export type ReportPendingAction = "claim" | "release" | "transfer" | "message" | "decision" | null;
+
+export type ReportSection = "overview" | "evidence" | "review" | "messages" | "outcome" | "activity";
+
+export interface ReportDestination {
+  section: ReportSection;
+  taskId?: string;
+  request: number;
+}
 
 export interface ReportDetailSnapshot {
+  reviewRequest?: number;
+  destination?: ReportDestination;
   reportId: string | null;
   loading: boolean;
   error: string;
@@ -219,10 +264,13 @@ export interface ReportDetailSnapshot {
 }
 
 export interface ReportPermissions {
+  reassignReports: boolean;
+  manageConfiguration: boolean;
   claimReports: boolean;
   messageReporters: boolean;
   decideReports: boolean;
   readRuns: boolean;
+  readEvidence: boolean;
 }
 
 export interface ReportWorkspaceSnapshot {

package/template/console/reports/use-editing-access.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+
+// Expiry must disable inputs even when offline and no presence update arrives.
+export function useEditingAccess(expiresAt?: string | null): boolean {
+  const [, tick] = useState(0);
+  const expiry = Date.parse(expiresAt || "");
+  useEffect(() => {
+    if (!Number.isFinite(expiry) || expiry <= Date.now()) return;
+    const timer = setTimeout(() => tick(value => value + 1), Math.min(2_147_483_647,expiry - Date.now() + 10));
+    return () => clearTimeout(timer);
+  }, [expiry]);
+  return Number.isFinite(expiry) && expiry > Date.now();
+}

package/template/console/settings/SettingsWorkspace.tsx

@@ -144,7 +144,7 @@ export function SettingsWorkspace() {
             const isOptional = optional.has(feature.featureKey);
             return <article className="setup-row" key={feature.featureKey}><span className={`setup-state${ready ? "" : " warning"}`}>{ready ? "✓" : "!"}</span><div><strong>{featureName(feature.featureKey)}</strong><small>{feature.message || feature.detail || (ready ? "Verified in this deployment" : isOptional ? "Optional setup" : "Verification required")}</small></div>{ready ? <span className="badge">Ready</span> : <button className="secondary compact-button" type="button" disabled={Boolean(verifying)} onClick={() => void verify(feature.featureKey)}>{verifying === feature.featureKey ? "Checking…" : isOptional ? "Check optional" : "Verify"}</button>}</article>;
           }) : <div className="settings-empty-row"><strong>No setup items</strong><small>There is nothing to verify for this deployment.</small></div>}</div>}</section>
-          <section className="surface settings-card" aria-labelledby="workspace-details-title"><div className="surface-head"><h2 id="workspace-details-title">Workspace details</h2></div>{loading && !installation ? <SettingsLoading /> : installation ? <dl className="settings-facts">{installationFacts(installation).map(([label, value]) => <span className="settings-fact" key={label}><dt>{label}</dt><dd>{value}</dd></span>)}</dl> : <div className="settings-empty-row">Workspace details are unavailable.</div>}</section>
+          <section className="surface settings-card" aria-labelledby="workspace-details-title"><div className="surface-head"><h2 id="workspace-details-title">Workspace details</h2></div>{loading && !installation ? <SettingsLoading /> : installation ? <dl className="settings-facts">{installationFacts(installation).map(([label, value]) => <div className="settings-fact" key={label}><dt>{label}</dt><dd>{value}</dd></div>)}</dl> : <div className="settings-empty-row">Workspace details are unavailable.</div>}</section>
         </> : null}
         {canManageConfiguration ? <BrandEditor brand={brand} displayName={installation?.displayName ?? "Safest Resolve"} loading={loading && !brand} onSaved={setBrand} /> : null}
         {canManageIntegrations ? <section className="surface settings-card settings-wide" aria-labelledby="reporting-channels-title"><div className="surface-head"><div><h2 id="reporting-channels-title">Reporting channels</h2><p>Choose where people open the form and what context can be trusted.</p></div><button className="primary" type="button" onClick={openChannelDialog}>Add channel</button></div>{loading && !channels.length && !integrations.length ? <SettingsLoading /> : <div className="integration-list">{channels.map((channel) => <ChannelRow channel={channel} key={channel.id} />)}{integrations.map((integration) => <IntegrationRow integration={integration} key={integration.id} />)}{!channels.length && !integrations.length ? <div className="settings-empty-row"><strong>No reporting channels yet</strong><small>Add a hosted form or connect the widget to your application.</small></div> : null}</div>}</section> : null}

package/template/console/shell/WorkspaceShell.tsx

@@ -1,8 +1,9 @@
-import { Fragment, useEffect, useMemo, useState, useSyncExternalStore, type MouseEvent } from "react";
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore, type MouseEvent } from "react";
 import { createPortal } from "react-dom";
 import { AnalystIdentity } from "../components/AnalystIdentity";
 import { dispatchNavigation, dispatchSignOut } from "./events";
 import { visibleNavigationGroups } from "./navigation";
+import { WorkspaceUpdateNotice } from "./WorkspaceUpdateNotice";
 import { getShellSnapshot, subscribeToShell } from "./store";
 import type { ConsoleAnalystProfile, ConsoleSession, CustomerBrand, WorkspaceView } from "./types";
 
@@ -40,11 +41,12 @@ function useCustomerBrand(): CustomerBrand {
 }
 
 function BrandLogo({ brand, size }: { brand: CustomerBrand; size: "brand" | "workspace" }) {
+  const [failedUrl, setFailedUrl] = useState("");
   const isDefaultBrand = brand.organization_name.trim().toLowerCase() === "safest resolve";
   const logoUrl = brand.logo_url || (isDefaultBrand ? "/brand-icon.svg" : "");
   const alt = brand.logo_alt || (isDefaultBrand ? "Safest Resolve logo" : `${brand.organization_name} logo`);
-  if (logoUrl) {
-    return <img className={size === "workspace" ? "workspace-logo" : undefined} src={logoUrl} alt={alt} width={size === "workspace" ? 30 : 34} height={size === "workspace" ? 30 : 34} />;
+  if (logoUrl && logoUrl !== failedUrl) {
+    return <img className={size === "workspace" ? "workspace-logo" : undefined} src={logoUrl} alt={alt} onError={() => setFailedUrl(logoUrl)} width={size === "workspace" ? 30 : 34} height={size === "workspace" ? 30 : 34} />;
   }
   return <span className={size === "workspace" ? "workspace-mark" : "customer-brand-fallback"} aria-hidden="true">{initials(brand.organization_name)}</span>;
 }
@@ -64,40 +66,63 @@ function accessLabel(session: ConsoleSession): string {
   return session.roles.map((role) => roleLabels[role] ?? role.replaceAll("_", " ")).join(", ") || "Team member";
 }
 
-function Navigation({ session, currentView, reportCount, open, onClose }: {
+function Navigation({ session, currentView, open, onClose }: {
   session: ConsoleSession;
   currentView: WorkspaceView;
-  reportCount: number;
   open: boolean;
   onClose: () => void;
 }) {
   const groups = useMemo(() => visibleNavigationGroups(session), [session]);
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+  const navRef = useRef<HTMLElement>(null);
+  useEffect(() => {
+    if (!open) return;
+    // Safari does not focus buttons on pointer clicks. Restore to the actual
+    // navigation trigger instead of relying on the previously focused element.
+    const previous = document.querySelector<HTMLButtonElement>(".nav-toggle") ?? document.activeElement;
+    navRef.current?.querySelector<HTMLElement>('a[aria-current="page"], a, button')?.focus();
+    return () => { if (previous instanceof HTMLElement && previous.isConnected) previous.focus({ preventScroll: true }); };
+  }, [open]);
+  useEffect(() => {
+    // Opening a primary area must not move the next target under the pointer.
+    // Reveal a group only when navigating directly to one of its nested tools.
+    const active = groups.find(group => (group.administration ? group.items : group.items.slice(1)).some(item => item.view === currentView));
+    if (active) setExpanded(current => current[active.label] ? current : ({ ...current, [active.label]: true }));
+  }, [currentView, groups]);
   const navigate = (event: MouseEvent<HTMLAnchorElement>, view: WorkspaceView): void => {
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
     event.preventDefault();
     dispatchNavigation(view);
     onClose();
   };
-  return (
-    <>
-      <aside id="workspace-navigation" className={`sidebar${open ? " open" : ""}`} aria-label="Workspace navigation">
-        <nav>
-          {groups.map((group) => (
-            <Fragment key={group.label}>
-              <small>{group.label}</small>
-              {group.items.map((item) => (
-                <a className={item.view === currentView ? "active" : undefined} data-nav={item.view} href={`#${item.view}`} key={item.view} aria-current={item.view === currentView ? "page" : undefined} onClick={(event) => navigate(event, item.view)}>
-                  <svg aria-hidden="true"><use href={`#${item.icon}`} /></svg>
-                  <span>{item.label}</span>
-                  {item.count === "reports" ? <b id="nav-report-count" className="nav-count">{reportCount}</b> : null}
-                </a>
-              ))}
-            </Fragment>
-          ))}
-        </nav>
-      </aside>
-      <button className="nav-scrim" type="button" aria-label="Close navigation" hidden={!open} onClick={onClose} />
-    </>
+  const link = (item: (typeof groups)[number]["items"][number], primary = false) => (
+    <a className={item.view === currentView ? "active" : undefined} data-nav={item.view} data-primary-nav={primary || undefined} href={`#${item.view}`} key={item.view} aria-current={item.view === currentView ? "page" : undefined} onClick={(event) => navigate(event, item.view)}>
+      <svg aria-hidden="true"><use href={`#${item.icon}`} /></svg><span>{item.label}</span>
+    </a>
   );
+  return <>
+    <aside ref={navRef} id="workspace-navigation" className={`sidebar${open ? " open" : ""}`} role={open ? "dialog" : undefined} aria-modal={open ? true : undefined} aria-label="Workspace navigation" onKeyDown={event => {
+      if (!open || event.key !== "Tab") return;
+      const controls = [...(navRef.current?.querySelectorAll<HTMLElement>('a, button') || [])].filter(item => item.getClientRects().length > 0);
+      const first = controls[0], last = controls.at(-1);
+      if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last?.focus(); }
+      else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first?.focus(); }
+    }}>
+      <div className="navigation-mobile-head"><strong>Workspace</strong><button type="button" className="icon-button" aria-label="Close workspace navigation" onClick={onClose}>×</button></div>
+      <nav aria-label="Product areas">
+        {groups.map(group => {
+          const [primary, ...secondary] = group.items;
+          const isExpanded = expanded[group.label] === true;
+          const panelId = `nav-area-${primary!.view}`;
+          return <div className={`navigation-area${group.administration ? " navigation-admin" : ""}`} key={group.label}>
+            {group.administration ? <button className="navigation-admin-toggle" type="button" aria-expanded={isExpanded} aria-controls={panelId} onClick={() => setExpanded(current => ({ ...current, [group.label]: !isExpanded }))}><svg aria-hidden="true"><use href="#i-settings" /></svg><span>Workspace settings</span><span aria-hidden="true">{isExpanded ? "−" : "+"}</span></button> : <div className="navigation-primary">{link(primary!, true)}{secondary.length ? <button className="navigation-expand" type="button" aria-label={`${isExpanded ? "Hide" : "Show"} ${group.label} tools`} aria-expanded={isExpanded} aria-controls={panelId} onClick={() => setExpanded(current => ({ ...current, [group.label]: !isExpanded }))}><span aria-hidden="true">{isExpanded ? "−" : "+"}</span></button> : null}</div>}
+            <div className="navigation-secondary" id={panelId} hidden={!isExpanded}>{(group.administration ? group.items : secondary).map(item => link(item))}</div>
+          </div>;
+        })}
+      </nav>
+    </aside>
+    <button className="nav-scrim" type="button" aria-label="Close navigation" tabIndex={-1} hidden={!open} onClick={onClose} />
+  </>;
 }
 
 export function WorkspaceShell({ navigationTarget }: { navigationTarget: HTMLElement }) {
@@ -135,14 +160,14 @@ export function WorkspaceShell({ navigationTarget }: { navigationTarget: HTMLEle
         </button>
         <a className="brand" href="/" aria-label="Workspace home">
           <BrandLogo brand={brand} size="brand" />
-          <span><strong>{brand.organization_name}</strong><small>Reports and workflows</small></span>
+          <span><strong>{brand.organization_name}</strong><small>Case resolution</small></span>
         </a>
         <div className="top-workspace" aria-label="Current workspace" hidden={!session}>
           <BrandLogo brand={brand} size="workspace" />
-          <span><strong>{brand.organization_name}</strong><small>Reports and workflows</small></span>
+          <span><strong>{brand.organization_name}</strong><small>Case resolution</small></span>
         </div>
         <button className="global-command" type="button" hidden={!session || !canUseAssistant} onClick={() => dispatchNavigation("assistant")}>
-          <svg aria-hidden="true"><use href="#i-search" /></svg><span>Search or ask Safest</span><kbd>⌘ K</kbd>
+          <svg aria-hidden="true"><use href="#i-search" /></svg><span>Ask Safest</span><kbd>⌘ K</kbd>
         </button>
         <div className="top-actions">
           <span className={`health ${snapshot.health.status === "checking" ? "" : snapshot.health.status}`.trim()}><i aria-hidden="true" /><span>{snapshot.health.label}</span></span>
@@ -150,7 +175,8 @@ export function WorkspaceShell({ navigationTarget }: { navigationTarget: HTMLEle
           {session ? <button className="sign-out-button" type="button" onClick={dispatchSignOut}>Sign out</button> : null}
         </div>
       </header>
-      {session ? createPortal(<Navigation session={session} currentView={snapshot.currentView} reportCount={snapshot.reportCount} open={navigationOpen} onClose={() => setNavigationOpen(false)} />, navigationTarget) : null}
+      <WorkspaceUpdateNotice />
+      {session ? createPortal(<Navigation session={session} currentView={snapshot.currentView} open={navigationOpen} onClose={() => setNavigationOpen(false)} />, navigationTarget) : null}
     </>
   );
 }

package/template/console/shell/WorkspaceUpdateNotice.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+
+export function WorkspaceUpdateNotice() {
+  const [available, setAvailable] = useState(false);
+  useEffect(() => {
+    const current = document.querySelector<HTMLMetaElement>('meta[name="safest-release"]')?.content;
+    if (!current) return;
+    let stopped = false;
+    let pending = false;
+    let lastCheck = 0;
+    const controller = new AbortController();
+    const check = async () => {
+      if (stopped || pending || document.visibilityState === "hidden" || Date.now() - lastCheck < 30_000) return;
+      pending = true;
+      lastCheck = Date.now();
+      try {
+        const response = await fetch("/console/release.json", { cache: "no-store", signal: controller.signal });
+        if (!response.ok) return;
+        const value: unknown = await response.json();
+        if (!stopped && value && typeof value === "object" && "release" in value && typeof value.release === "string" && /^[a-f0-9]{20}$/.test(value.release)) {
+          setAvailable(value.release !== current);
+        }
+      } catch { /* Offline work must remain usable; retry on the next check. */ }
+      finally { pending = false; }
+    };
+    void check();
+    const timer = window.setInterval(() => { void check(); }, 60_000);
+    const resume = () => { void check(); };
+    window.addEventListener("pageshow", resume);
+    window.addEventListener("focus", resume);
+    window.addEventListener("online", resume);
+    document.addEventListener("visibilitychange", resume);
+    return () => {
+      stopped = true;
+      controller.abort();
+      window.clearInterval(timer);
+      window.removeEventListener("pageshow", resume);
+      window.removeEventListener("focus", resume);
+      window.removeEventListener("online", resume);
+      document.removeEventListener("visibilitychange", resume);
+    };
+  }, []);
+  if (!available) return null;
+  return <aside className="workspace-update" aria-label="Workspace update">
+    <p role="status"><strong>An update is ready.</strong> Save your work, then refresh to get the latest improvements.</p>
+    <button className="secondary" type="button" onClick={() => window.location.reload()}>Refresh workspace</button>
+  </aside>;
+}

package/template/console/shell/controller.ts

@@ -1,5 +1,6 @@
 import { authEvents } from "../auth/events";
 import { accountRouteFromHash } from "../auth/account-route";
+import { readable } from "../lib/format";
 import { errorMessage, hasSessionCredentials, requestJson } from "../lib/http";
 import { shellEvents } from "./events";
 import { visibleNavigationGroups } from "./navigation";
@@ -15,11 +16,14 @@ interface SessionResponse {
 }
 
 const viewTitles: Partial<Record<WorkspaceView, string>> = {
-  command: "Command centre",
+  command: "Today",
+  reports: "Cases",
+  workflows: "Playbooks",
+  components: "Connections",
   queues: "Queues and policies",
   assistant: "Ask Safest",
   "ai-quality": "AI quality",
-  analytics: "Reports and outcomes",
+  analytics: "Insights",
   settings: "Settings",
 };
 
@@ -31,14 +35,6 @@ function element(id: "login" | "workspace" | "session-loading"): HTMLElement | n
   return document.querySelector<HTMLElement>(`#${id}`);
 }
 
-function readable(value: string): string {
-  const copy = value.replaceAll("_", " ");
-  if (!copy) return "";
-  const sentence = `${copy.charAt(0).toUpperCase()}${copy.slice(1)}`;
-  const acronyms: Record<string, string> = { ai: "AI", api: "API", csv: "CSV", d1: "D1", http: "HTTP", https: "HTTPS", id: "ID", json: "JSON", r2: "R2", sla: "SLA", url: "URL" };
-  return sentence.replace(/\b(ai|api|csv|d1|http|https|id|json|r2|sla|url)\b/giu, (match) => acronyms[match.toLowerCase()] ?? match);
-}
-
 function setWorkspaceMode(authenticated: boolean): void {
   document.body.classList.remove("auth-resolving");
   document.body.classList.toggle("workspace-mode", authenticated);
@@ -63,11 +59,11 @@ function allowedViews(session: ConsoleSession): Set<WorkspaceView> {
 }
 
 function setDocumentTitle(view: WorkspaceView): void {
-  const suffix = getShellSnapshot().session ? viewTitles[view] || readable(view) : "Reports and workflows";
+  const suffix = getShellSnapshot().session ? viewTitles[view] || readable(view) : "Case resolution";
   document.title = `${brand.organization_name || "Safest Resolve"} — ${suffix}`;
 }
 
-function setView(requested: string): void {
+function setView(requested: string, addHistory = false): void {
   const snapshot = getShellSnapshot();
   const session = snapshot.session;
   if (!session) return;
@@ -78,9 +74,13 @@ function setView(requested: string): void {
     ? requestedView
     : "command";
   for (const section of available) section.hidden = section.dataset.view !== selected;
-  if (window.location.hash !== `#${selected}`) history.replaceState(null, "", `#${selected}`);
+  if (window.location.hash !== `#${selected}`) {
+    if (addHistory) history.pushState(null, "", `#${selected}`);
+    else history.replaceState(null, "", `#${selected}`);
+  }
   setShellSnapshot((current) => ({ ...current, currentView: selected }));
   setDocumentTitle(selected);
+  if (addHistory) window.scrollTo({ top: 0, left: 0, behavior: "instant" });
 }
 
 function expireWorkspaceSession(message = ""): void {
@@ -135,7 +135,7 @@ 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;
+    brand = await window.SafestBrand?.loadBrand("/v1/brand", { title: "Case resolution" }) || brand;
   } catch {
     brand = window.SafestBrand?.defaults || brand;
   }
@@ -170,17 +170,24 @@ export function startShellController(): void {
   window.addEventListener(shellEvents.signOut, () => { void signOut(); });
   window.addEventListener(shellEvents.navigate, (event) => {
     const view = event instanceof CustomEvent && typeof event.detail?.view === "string" ? event.detail.view : "command";
-    setView(view);
+    setView(view, true);
     if (view === "assistant") window.dispatchEvent(new Event("safest:assistant:focus"));
   });
   window.addEventListener("keydown", (event) => {
     if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k" && getShellSnapshot().session?.permissions.useAssistant) {
       event.preventDefault();
-      setView("assistant");
+      setView("assistant", true);
       window.dispatchEvent(new Event("safest:assistant:focus"));
     }
   });
   window.addEventListener("hashchange", () => {
+    if (window.location.hash === "#main") {
+      const view = getShellSnapshot().currentView;
+      const section = document.querySelector<HTMLElement>(`[data-view="${view}"]`);
+      if (section) { section.tabIndex = -1; section.focus(); }
+      history.replaceState(null, "", `#${view}`);
+      return;
+    }
     if (getShellSnapshot().session && !window.location.hash.startsWith("#invite=")) setView(window.location.hash.slice(1) || "reports");
   });
   void initialize();

package/template/console/shell/navigation.ts

@@ -5,57 +5,48 @@ export interface NavigationItem {
   label: string;
   icon: string;
   visible: (session: ConsoleSession) => boolean;
-  count?: "reports";
 }
-
 export interface NavigationGroup {
   label: string;
   items: NavigationItem[];
+  administration?: boolean;
 }
-
 const always = (): boolean => true;
 const permission = (name: string) => (session: ConsoleSession): boolean => session.permissions[name] === true;
 const anyPermission = (...names: string[]) => (session: ConsoleSession): boolean => names.some((name) => session.permissions[name] === true);
 
+// Stable route names preserve existing bookmarks. The first item is the area;
+// the other items are specialist tools belonging to that area.
 export const navigationGroups: NavigationGroup[] = [
-  {
-    label: "Work",
-    items: [
-      { view: "command", label: "Command centre", icon: "i-home", visible: always },
-      { view: "reports", label: "Reports", icon: "i-inbox", visible: always, count: "reports" },
-      { view: "queues", label: "Queues and policies", icon: "i-queue", visible: permission("readReports") },
-      { view: "appeals", label: "Appeals", icon: "i-appeal", visible: permission("reviewAppeals") },
-    ],
-  },
-  {
-    label: "Build",
-    items: [
-      { view: "workflows", label: "Workflows", icon: "i-workflow", visible: permission("manageWorkflows") },
-      { view: "components", label: "Tools & connections", icon: "i-component", visible: permission("manageComponents") },
-      { view: "configuration", label: "Configuration", icon: "i-settings", visible: permission("manageConfiguration") },
-    ],
-  },
-  {
-    label: "Observe",
-    items: [
-      { view: "assistant", label: "Ask Safest", icon: "i-spark", visible: permission("useAssistant") },
-      { view: "ai-quality", label: "AI quality", icon: "i-quality", visible: permission("decideReports") },
-      { view: "operations", label: "Operations", icon: "i-activity", visible: permission("readOperations") },
-      { view: "analytics", label: "Reports and outcomes", icon: "i-chart", visible: permission("readAnalytics") },
-    ],
-  },
-  {
-    label: "Admin",
-    items: [
-      { view: "settings", label: "Settings", icon: "i-settings", visible: anyPermission("manageInstallation", "manageConfiguration", "manageIntegrations") },
-      { view: "people", label: "People and roles", icon: "i-people", visible: permission("managePeople") },
-      { view: "profile", label: "My profile", icon: "i-user", visible: (session) => session.actor.type === "operator_user" },
-    ],
-  },
+  { label: "Today", items: [
+    { view: "command", label: "Today", icon: "i-home", visible: always },
+    { view: "assistant", label: "Ask Safest", icon: "i-spark", visible: permission("useAssistant") },
+  ] },
+  { label: "Cases", items: [
+    { view: "reports", label: "Cases", icon: "i-inbox", visible: permission("readReports") },
+    { view: "appeals", label: "Appeals", icon: "i-appeal", visible: permission("reviewAppeals") },
+    { view: "queues", label: "Queues and policies", icon: "i-queue", visible: permission("readReports") },
+  ] },
+  { label: "Playbooks", items: [
+    { view: "workflows", label: "Playbooks", icon: "i-workflow", visible: permission("manageWorkflows") },
+    { view: "configuration", label: "Configuration", icon: "i-settings", visible: permission("manageConfiguration") },
+  ] },
+  { label: "Connections", items: [
+    { view: "components", label: "Connections", icon: "i-component", visible: permission("manageComponents") },
+  ] },
+  { label: "Insights", items: [
+    { view: "analytics", label: "Insights", icon: "i-chart", visible: permission("readAnalytics") },
+    { view: "ai-quality", label: "AI quality", icon: "i-quality", visible: permission("reviewQuality") },
+    { view: "operations", label: "Operations", icon: "i-activity", visible: permission("readOperations") },
+  ] },
+  { label: "Workspace settings", administration: true, items: [
+    { view: "settings", label: "Settings", icon: "i-settings", visible: anyPermission("manageInstallation", "manageConfiguration", "manageIntegrations") },
+    { view: "people", label: "People and roles", icon: "i-people", visible: permission("managePeople") },
+    { view: "profile", label: "My profile", icon: "i-user", visible: (session) => session.actor.type === "operator_user" },
+  ] },
 ];
 
 export function visibleNavigationGroups(session: ConsoleSession): NavigationGroup[] {
-  return navigationGroups
-    .map((group) => ({ ...group, items: group.items.filter((item) => item.visible(session)) }))
+  return navigationGroups.map((group) => ({ ...group, items: group.items.filter((item) => item.visible(session)) }))
     .filter((group) => group.items.length > 0);
 }

package/template/console/workflows/CreatePlaybookDialog.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState, type FormEvent } from "react";
+import { compilePlaybook, playbookStarterFixtures, starterPlaybook } from "../../shared/playbooks";
+import { errorMessage, mutationHeaders, requestJson } from "../lib/http";
+import { announceWorkflowChanged, openWorkflowStudio } from "./events";
+import { guideSteps, PlaybookGuideEditor, usePlaybookResources } from "./PlaybookGuideEditor";
+import type { WorkflowCreateResponse } from "./types";
+import { validateGuideInputs } from "./PlaybookFields";
+
+export const openPlaybookCreate = () => window.dispatchEvent(new CustomEvent("safest:playbook:create"));
+
+export function CreatePlaybookDialog() {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const nameRef = useRef<HTMLInputElement>(null);
+  const pendingRef = useRef(false);
+  const requestKey = useRef(crypto.randomUUID());
+  const createdRef = useRef<WorkflowCreateResponse | null>(null);
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [startingPoint, setStartingPoint] = useState<"unwanted-contact" | "description" | "policy">("unwanted-contact");
+  const [guide, setGuide] = useState(() => starterPlaybook("unwanted-contact"));
+  const [step, setStep] = useState(-1);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState("");
+  const { resources, error: resourceError, reload } = usePlaybookResources(open);
+  useEffect(() => {
+    const show = () => { setOpen(true); setStep(-1); setName(""); setStartingPoint("unwanted-contact"); setGuide(starterPlaybook("unwanted-contact")); setError(""); requestKey.current = crypto.randomUUID(); createdRef.current = null; };
+    window.addEventListener("safest:playbook:create", show);
+    return () => window.removeEventListener("safest:playbook:create", show);
+  }, []);
+  useEffect(() => {
+    if (open && !dialogRef.current?.open) { dialogRef.current?.showModal(); requestAnimationFrame(() => nameRef.current?.focus()); }
+    if (!open && dialogRef.current?.open) dialogRef.current.close();
+  }, [open]);
+  const dirty = Boolean(name || startingPoint !== "unwanted-contact" || JSON.stringify(guide) !== JSON.stringify(starterPlaybook("unwanted-contact")));
+  const close = () => { if (!pendingRef.current && (!dirty || window.confirm("Discard this unsaved playbook draft?"))) setOpen(false); };
+  useEffect(() => {
+    const unload = (event: BeforeUnloadEvent) => { if (open && (dirty || pendingRef.current)) event.preventDefault(); };
+    window.addEventListener("beforeunload", unload);
+    return () => window.removeEventListener("beforeunload", unload);
+  }, [open, dirty]);
+  const submit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (pendingRef.current) return;
+    if (step < guideSteps.length - 1) { setStep(current => current + 1); return; }
+    pendingRef.current = true; setPending(true); setError("");
+    try {
+      validateGuideInputs(guide, resources);
+      const graph = compilePlaybook(guide);
+      const key = `${name.toLowerCase().replace(/[^a-z0-9]+/gu, "-").replace(/^-|-$/gu, "").slice(0, 70) || "playbook"}-${requestKey.current.slice(0, 8)}`;
+      const result = createdRef.current ?? await requestJson<WorkflowCreateResponse>("/v1/admin/workflows", { method: "POST", headers: { ...mutationHeaders(), "idempotency-key": requestKey.current }, body: JSON.stringify({ key, name, description: guide.summary, purpose: "report", graph }) });
+      createdRef.current = result;
+      for (const [index, fixture] of playbookStarterFixtures(guide).entries()) await requestJson(`/v1/admin/workflows/${encodeURIComponent(result.workflowId)}/fixtures`, { method: "POST", headers: { ...mutationHeaders(), "idempotency-key": `${requestKey.current}:example:${index}` }, body: JSON.stringify(fixture) });
+      setOpen(false); announceWorkflowChanged(); openWorkflowStudio(result.workflowId);
+    } catch (cause) { setError(errorMessage(cause, createdRef.current ? "The draft was saved, but its examples could not be added. Retry to finish without creating another draft." : "The playbook could not be created. Your changes are still here.")); }
+    finally { pendingRef.current = false; setPending(false); }
+  };
+  return <dialog ref={dialogRef} className="editor-dialog playbook-create-dialog" aria-labelledby="playbook-create-title" onCancel={event => { event.preventDefault(); close(); }}>
+    <div className="detail-head"><div><h2 id="playbook-create-title">Create a playbook</h2><p>Teach Safest how your team handles a situation.</p></div><button className="icon-button" type="button" aria-label="Close playbook creation" disabled={pending} onClick={close}>×</button></div>
+    <form className="editor-form" onSubmit={event => void submit(event)}>
+      {step < 0 ? <>
+        <label>Playbook name<input ref={nameRef} required maxLength={160} value={name} disabled={pending} onChange={event => setName(event.currentTarget.value)} placeholder="For example, unwanted contact" /></label>
+        <fieldset><legend>Choose a starting point</legend>{([{ id: "unwanted-contact", name: "Unwanted contact", detail: "Reports of repeated contact, reviewed with context and a clear human decision." }, { id: "description", name: "Describe your own situation", detail: "Describe what your team needs to resolve, then choose evidence and outcomes." }, { id: "policy", name: "Start from your policy", detail: "Paste the relevant policy, including exceptions, then connect it to a published rule." }] as const).map(starter => <label className="template-choice" key={starter.id}><input type="radio" name="playbook-starter" checked={startingPoint === starter.id} onChange={() => { if (startingPoint !== starter.id && (guide.summary !== starterPlaybook(startingPoint === "unwanted-contact" ? "unwanted-contact" : "general-review").summary || guide.policy_text !== starterPlaybook("general-review").policy_text) && !window.confirm("Replace the entered description and policy with this starting point?")) return; setStartingPoint(starter.id); setGuide(starterPlaybook(starter.id === "unwanted-contact" ? "unwanted-contact" : "general-review")); }} /><span><strong>{starter.name}</strong><small>{starter.detail}</small></span></label>)}</fieldset>
+        {startingPoint === "description" ? <label>Describe the situation<textarea required rows={5} maxLength={2000} value={guide.summary} onChange={event => setGuide({ ...guide, summary: event.currentTarget.value })} /><small>Explain the concern, what evidence matters and when someone should review it. The next steps turn your description into explicit choices.</small></label> : startingPoint === "policy" ? <label>Paste your policy<textarea required rows={7} maxLength={20000} value={guide.policy_text} onChange={event => setGuide({ ...guide, policy_text: event.currentTarget.value })} /><small>The full text stays in the draft. You will choose its scope, published rule and permitted outcomes before testing.</small></label> : null}
+        <div className="playbook-callout"><strong>A draft first, then examples and publication.</strong><p>Nothing starts handling cases until a published version is activated.</p></div>
+      </> : <>
+        <ol className="playbook-progress" aria-label="Playbook creation steps">{guideSteps.map((label, index) => <li key={label} aria-current={index === step ? "step" : undefined}><span>{index + 1}</span>{label}</li>)}</ol>
+        <PlaybookGuideEditor value={guide} onChange={setGuide} step={step} resources={resources} disabled={pending || Boolean(createdRef.current)} />
+      </>}
+      {resourceError ? <div role="alert" className="playbook-callout">{resourceError} <button className="text-button" type="button" onClick={reload}>Retry loading connections</button></div> : null}
+      <div className="editor-footer"><p className="error" role="alert">{error}</p><div><button className="secondary" type="button" disabled={pending || Boolean(createdRef.current)} onClick={() => step < 0 ? close() : setStep(current => current - 1)}>{step < 0 ? "Cancel" : "Back"}</button><button className="primary" type="submit" disabled={pending}>{pending ? "Creating…" : step === guideSteps.length - 1 ? "Create draft and examples" : "Continue"}</button></div></div>
+    </form>
+  </dialog>;
+}