okengine 0.2.6 → 0.2.8

package/src/console/ui/shell/panels/ai/AiPanel.tsx

@@ -69,34 +69,23 @@ export function AiPanel() {
   );
   const promptName = search.prompt ?? prompts[0]?.name;
   const versions = useMemo(
-    () =>
-      promptName
-        ? versionsForPrompt(data?.versions ?? [], promptName)
-        : [],
+    () => (promptName ? versionsForPrompt(data?.versions ?? [], promptName) : []),
     [data?.versions, promptName],
   );
   const selectedVersion =
-    versions.find((v) => v.version === search.version) ??
-    versions[versions.length - 1];
-  const baseline =
-    versions.length >= 2
-      ? versions[versions.length - 2]
-      : versions[0];
+    versions.find((v) => v.version === search.version) ?? versions[versions.length - 1];
+  const baseline = versions.length >= 2 ? versions[versions.length - 2] : versions[0];
   const decision =
-    baseline &&
-    selectedVersion &&
-    baseline.version !== selectedVersion.version
+    baseline && selectedVersion && baseline.version !== selectedVersion.version
       ? promotionDecision(baseline, selectedVersion)
       : null;
 
   const agentName = search.agent ?? agents[0]?.name;
   const agentRuns = useMemo(
-    () =>
-      agentName ? runsForAgent(data?.agentRuns ?? [], agentName) : [],
+    () => (agentName ? runsForAgent(data?.agentRuns ?? [], agentName) : []),
     [data?.agentRuns, agentName],
   );
-  const openRun =
-    agentRuns.find((r) => r.id === search.run) ?? agentRuns[0];
+  const openRun = agentRuns.find((r) => r.id === search.run) ?? agentRuns[0];
   const pii = allowPiiStanding(data?.allowPii ?? []);
   const cataloguePrompt = prompts.find((p) => p.name === promptName);
 
@@ -105,8 +94,8 @@ export function AiPanel() {
       <header className="shrink-0 border-b border-[var(--oke-line)] px-4 py-3">
         <h1 className="text-base font-medium text-[var(--oke-fg)]">AI</h1>
         <p className="text-sm text-[var(--oke-muted)]">
-          Distributions per prompt version — cost, latency, eval score.
-          Schema-invalid is its own class.
+          Distributions per prompt version — cost, latency, eval score. Schema-invalid is its own
+          class.
         </p>
         <label className="mt-2 flex max-w-sm flex-col gap-1 text-sm">
           <span className="text-[var(--oke-muted)]">Filter</span>
@@ -140,21 +129,11 @@ export function AiPanel() {
                         ? "bg-[var(--oke-line)] text-[var(--oke-fg)]"
                         : "text-[var(--oke-muted)]",
                     )}
-                    onClick={() =>
-                      setSearch(
-                        openPromptVersion(
-                          search,
-                          p.name,
-                          p.version ?? 0,
-                        ),
-                      )
-                    }
+                    onClick={() => setSearch(openPromptVersion(search, p.name, p.version ?? 0))}
                   >
                     {p.name}
                     {p.version !== undefined ? (
-                      <span className="ml-1 font-mono text-xs">
-                        @{p.version}
-                      </span>
+                      <span className="ml-1 font-mono text-xs">@{p.version}</span>
                     ) : null}
                   </button>
                 </li>
@@ -162,9 +141,7 @@ export function AiPanel() {
             </ul>
           </section>
           <section aria-label="Agents" className="p-3">
-            <h2 className="mb-2 text-xs uppercase tracking-wide text-[var(--oke-muted)]">
-              Agents
-            </h2>
+            <h2 className="mb-2 text-xs uppercase tracking-wide text-[var(--oke-muted)]">Agents</h2>
             <ul className="space-y-1">
               {agents.map((a) => (
                 <li key={a.name}>
@@ -194,12 +171,8 @@ export function AiPanel() {
         </aside>
 
         <main id="ai-main" className="min-h-0 overflow-y-auto p-4">
-          {listQuery.isLoading ? (
-            <p className="text-[var(--oke-muted)]">Loading…</p>
-          ) : null}
-          {listQuery.isError ? (
-            <p role="alert">Failed to load AI projection</p>
-          ) : null}
+          {listQuery.isLoading ? <p className="text-[var(--oke-muted)]">Loading…</p> : null}
+          {listQuery.isError ? <p role="alert">Failed to load AI projection</p> : null}
 
           {selectedVersion ? (
             <VersionDistributions
@@ -209,23 +182,17 @@ export function AiPanel() {
                 setSearch(openPromptVersion(search, selectedVersion.prompt, v))
               }
               catalogueHref={
-                cataloguePrompt
-                  ? manifestDiffHref(cataloguePrompt.manifestDiffPath)
-                  : null
+                cataloguePrompt ? manifestDiffHref(cataloguePrompt.manifestDiffPath) : null
               }
               decision={decision}
             />
           ) : (
-            <p className="text-[var(--oke-muted)]">
-              No prompt versions with samples yet.
-            </p>
+            <p className="text-[var(--oke-muted)]">No prompt versions with samples yet.</p>
           )}
 
           {openRun ? (
             <section aria-label="Agent run trail" className="mt-8">
-              <h2 className="mb-2 text-sm font-medium">
-                Agent run · {openRun.agent}
-              </h2>
+              <h2 className="mb-2 text-sm font-medium">Agent run · {openRun.agent}</h2>
               <div className="mb-2 flex flex-wrap gap-2">
                 {agentRuns.map((r) => (
                   <button
@@ -234,13 +201,9 @@ export function AiPanel() {
                     aria-pressed={r.id === openRun.id}
                     className={clsx(
                       "min-h-8 px-2 text-xs font-mono",
-                      r.id === openRun.id
-                        ? "bg-[var(--oke-line)]"
-                        : "text-[var(--oke-muted)]",
+                      r.id === openRun.id ? "bg-[var(--oke-line)]" : "text-[var(--oke-muted)]",
                     )}
-                    onClick={() =>
-                      setSearch(openAgentRun(search, r.agent, r.id))
-                    }
+                    onClick={() => setSearch(openAgentRun(search, r.agent, r.id))}
                   >
                     {r.id}
                   </button>
@@ -265,22 +228,17 @@ export function AiPanel() {
                     {step.status === "denied" && step.denial ? (
                       <p role="status" className="mt-1 text-[var(--oke-muted)]">
                         DENIED by gate{" "}
-                        <span className="font-mono text-[var(--oke-fg)]">
-                          {step.denial.gate}
-                        </span>
-                        : {step.denial.reason}
+                        <span className="font-mono text-[var(--oke-fg)]">{step.denial.gate}</span>:{" "}
+                        {step.denial.reason}
                       </p>
                     ) : null}
                     <ul className="mt-1 space-y-0.5 text-xs text-[var(--oke-muted)]">
                       {step.effects.map((e) => (
                         <li key={`${e.kind}:${e.resource}`}>
-                          <span className="font-mono">{e.kind}</span>{" "}
-                          {e.resource}
+                          <span className="font-mono">{e.kind}</span> {e.resource}
                         </li>
                       ))}
-                      {step.effects.length === 0 ? (
-                        <li>no declared effects</li>
-                      ) : null}
+                      {step.effects.length === 0 ? <li>no declared effects</li> : null}
                     </ul>
                   </li>
                 ))}
@@ -291,9 +249,7 @@ export function AiPanel() {
           <section aria-label="Fallback chains" className="mt-8">
             <h2 className="mb-2 text-sm font-medium">Fallback chains</h2>
             {(data?.fallbackChains.length ?? 0) === 0 ? (
-              <p className="text-sm text-[var(--oke-muted)]">
-                No multi-model chains recorded.
-              </p>
+              <p className="text-sm text-[var(--oke-muted)]">No multi-model chains recorded.</p>
             ) : (
               <ul className="space-y-2 text-sm">
                 {(data?.fallbackChains ?? []).map((chain, i) => (
@@ -311,16 +267,12 @@ export function AiPanel() {
                           {j > 0 ? " → " : ""}
                           <span
                             className={
-                              a.ok
-                                ? "text-[var(--oke-fg)]"
-                                : "text-[var(--oke-muted)] line-through"
+                              a.ok ? "text-[var(--oke-fg)]" : "text-[var(--oke-muted)] line-through"
                             }
                           >
                             {a.model}
                           </span>
-                          {a.cost !== undefined
-                            ? ` (${formatCost(a.cost)})`
-                            : ""}
+                          {a.cost !== undefined ? ` (${formatCost(a.cost)})` : ""}
                         </span>
                       ))}
                     </div>
@@ -341,12 +293,9 @@ export function AiPanel() {
           aria-label="allowPii security review"
           className="min-h-0 overflow-y-auto border-t border-[var(--oke-line)] p-4 lg:border-l lg:border-t-0"
         >
-          <h2 className="mb-2 text-xs uppercase tracking-wide text-[var(--oke-muted)]">
-            allowPii
-          </h2>
+          <h2 className="mb-2 text-xs uppercase tracking-wide text-[var(--oke-muted)]">allowPii</h2>
           <p className="mb-3 text-xs text-[var(--oke-muted)]">
-            Standing security review — flows that acknowledge PII egress to a
-            model.
+            Standing security review — flows that acknowledge PII egress to a model.
           </p>
           {pii.length === 0 ? (
             <p className="text-sm text-[var(--oke-muted)]">None declared.</p>
@@ -368,9 +317,7 @@ export function AiPanel() {
               <tbody>
                 {pii.map((row) => (
                   <tr key={row.flowId} className="align-top">
-                    <td className="py-1 pr-2 font-mono text-[var(--oke-fg)]">
-                      {row.flowId}
-                    </td>
+                    <td className="py-1 pr-2 font-mono text-[var(--oke-fg)]">{row.flowId}</td>
                     <td className="py-1 font-mono text-[var(--oke-muted)]">
                       {row.asks.join(", ") || "—"}
                     </td>
@@ -397,14 +344,10 @@ function VersionDistributions(props: {
     <section aria-label="Version distributions" aria-live="polite">
       <div className="mb-3 flex flex-wrap items-baseline gap-3">
         <h2 className="text-sm font-medium">
-          {m.prompt}{" "}
-          <span className="font-mono text-[var(--oke-muted)]">@{m.version}</span>
+          {m.prompt} <span className="font-mono text-[var(--oke-muted)]">@{m.version}</span>
         </h2>
         {props.catalogueHref ? (
-          <a
-            href={props.catalogueHref}
-            className="text-xs text-[var(--oke-muted)] underline"
-          >
+          <a href={props.catalogueHref} className="text-xs text-[var(--oke-muted)] underline">
             Manifest Diff — version bump is a deploy
           </a>
         ) : null}
@@ -418,9 +361,7 @@ function VersionDistributions(props: {
             aria-pressed={v.version === m.version}
             className={clsx(
               "min-h-8 px-2 font-mono text-xs",
-              v.version === m.version
-                ? "bg-[var(--oke-line)]"
-                : "text-[var(--oke-muted)]",
+              v.version === m.version ? "bg-[var(--oke-line)]" : "text-[var(--oke-muted)]",
             )}
             onClick={() => props.onSelectVersion(v.version)}
           >
@@ -431,13 +372,7 @@ function VersionDistributions(props: {
 
       <DistributionBlock
         label="Cost"
-        summary={distributionSummary(
-          "Cost",
-          m.cost.mean,
-          m.cost.p50,
-          m.cost.p95,
-          formatCost,
-        )}
+        summary={distributionSummary("Cost", m.cost.mean, m.cost.p50, m.cost.p95, formatCost)}
         buckets={m.cost.buckets}
         formatTick={formatCost}
       />
@@ -509,8 +444,7 @@ function VersionDistributions(props: {
           aria-label="Promotion gate"
         >
           <p className="text-sm font-medium">
-            Promotion v{props.decision.from.version} → v
-            {props.decision.to.version} blocked
+            Promotion v{props.decision.from.version} → v{props.decision.to.version} blocked
           </p>
           <ul className="mt-1 list-disc pl-5 text-sm text-[var(--oke-muted)]">
             {formatPromotionBlockers(props.decision).map((line) => (
@@ -520,8 +454,7 @@ function VersionDistributions(props: {
         </div>
       ) : props.decision?.allowed ? (
         <p className="mt-4 text-sm text-[var(--oke-muted)]" role="status">
-          Promotion v{props.decision.from.version} → v
-          {props.decision.to.version} allowed
+          Promotion v{props.decision.from.version} → v{props.decision.to.version} allowed
           {props.decision.evalImproved ? " (eval improved)" : ""}.
         </p>
       ) : null}
@@ -542,11 +475,7 @@ function DistributionBlock(props: {
         {props.label} distribution
       </h3>
       <p className="mb-2 text-sm">{props.summary}</p>
-      <div
-        role="img"
-        aria-label={props.summary}
-        className="flex h-16 items-end gap-px"
-      >
+      <div role="img" aria-label={props.summary} className="flex h-16 items-end gap-px">
         {props.buckets.map((b, i) => (
           <div
             key={i}

package/src/console/ui/shell/panels/architecture/ArchitecturePanel.tsx

@@ -61,10 +61,7 @@ export function ArchitecturePanel() {
     refetchInterval: 10_000,
   });
 
-  const graph = useMemo(
-    () => buildCausalityGraph(manifestQuery.data),
-    [manifestQuery.data],
-  );
+  const graph = useMemo(() => buildCausalityGraph(manifestQuery.data), [manifestQuery.data]);
 
   const layerFlags = layersOf(search);
   const view = useMemo(
@@ -93,23 +90,15 @@ export function ArchitecturePanel() {
     <div className="flex h-full min-h-0 flex-col">
       <header className="flex shrink-0 flex-wrap items-end gap-4 border-b border-[var(--oke-line)] px-6 py-4">
         <div className="flex flex-col gap-1">
-          <p className="text-xs uppercase tracking-[0.2em] text-[var(--oke-muted)]">
-            Architecture
-          </p>
+          <p className="text-xs uppercase tracking-[0.2em] text-[var(--oke-muted)]">Architecture</p>
           <h1 className="text-xl font-semibold tracking-tight">System shape</h1>
           <p className="text-sm text-[var(--oke-muted)]">
             Clustered by unit · typed layers · traffic from Runs
           </p>
         </div>
-        <p
-          className="ml-auto font-mono text-sm"
-          role="status"
-          aria-live="polite"
-        >
+        <p className="ml-auto font-mono text-sm" role="status" aria-live="polite">
           <span className="text-[var(--oke-muted)]">Boundary crossings</span>{" "}
-          <span className="text-lg font-semibold tabular-nums">
-            {view.boundaryCrossingCount}
-          </span>
+          <span className="text-lg font-semibold tabular-nums">{view.boundaryCrossingCount}</span>
         </p>
       </header>
 
@@ -129,11 +118,7 @@ export function ArchitecturePanel() {
                   <input
                     type="checkbox"
                     checked={layerFlags[layer]}
-                    onChange={(e) =>
-                      setSearch(
-                        setLayerSearch(search, layer, e.target.checked),
-                      )
-                    }
+                    onChange={(e) => setSearch(setLayerSearch(search, layer, e.target.checked))}
                     aria-label={`${LAYER_LABEL[layer]} layer`}
                   />
                   {LAYER_LABEL[layer]}
@@ -161,33 +146,18 @@ export function ArchitecturePanel() {
                     </label>
                   ))}
                 </fieldset>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  onClick={() => setSearch(clearFocus(search))}
-                >
+                <Button type="button" variant="ghost" onClick={() => setSearch(clearFocus(search))}>
                   Clear focus
                 </Button>
               </div>
             ) : (
-              <p className="text-sm text-[var(--oke-muted)]">
-                Select a unit to focus at depth 1–2
-              </p>
+              <p className="text-sm text-[var(--oke-muted)]">Select a unit to focus at depth 1–2</p>
             )}
           </div>
 
-          <section
-            aria-label="System diagram"
-            className="min-h-0 flex-1 overflow-auto px-4 py-4"
-          >
-            <div
-              aria-hidden="true"
-              className="mb-4 overflow-x-auto"
-            >
-              <svg
-                className="h-auto w-full max-w-5xl text-[var(--oke-fg)]"
-                viewBox="0 0 640 380"
-              >
+          <section aria-label="System diagram" className="min-h-0 flex-1 overflow-auto px-4 py-4">
+            <div aria-hidden="true" className="mb-4 overflow-x-auto">
+              <svg className="h-auto w-full max-w-5xl text-[var(--oke-fg)]" viewBox="0 0 640 380">
                 <rect
                   x={SYSTEM_BOUNDARY.x}
                   y={SYSTEM_BOUNDARY.y}
@@ -221,9 +191,7 @@ export function ArchitecturePanel() {
                       x2={to.x}
                       y2={to.y}
                       stroke={
-                        edge.layer === "external"
-                          ? "var(--oke-external)"
-                          : "var(--oke-muted)"
+                        edge.layer === "external" ? "var(--oke-external)" : "var(--oke-muted)"
                       }
                       strokeWidth={edge.thickness}
                       strokeDasharray={edge.dashed ? "6 4" : undefined}
@@ -249,11 +217,7 @@ export function ArchitecturePanel() {
                               ? "var(--oke-bg)"
                               : "color-mix(in oklab, var(--oke-external) 25%, var(--oke-bg))"
                         }
-                        stroke={
-                          node.insideBoundary
-                            ? "var(--oke-fg)"
-                            : "var(--oke-external)"
-                        }
+                        stroke={node.insideBoundary ? "var(--oke-fg)" : "var(--oke-external)"}
                         strokeWidth={node.focused ? 2.5 : 1.25}
                       />
                       <text
@@ -291,14 +255,10 @@ export function ArchitecturePanel() {
                   >
                     <span>{n.label}</span>
                     {n.kind === "unit" && n.flowCount !== undefined ? (
-                      <span className="font-mono text-xs">
-                        {n.flowCount}
-                      </span>
+                      <span className="font-mono text-xs">{n.flowCount}</span>
                     ) : null}
                     {!n.insideBoundary ? (
-                      <span className="text-xs text-[var(--oke-external)]">
-                        external
-                      </span>
+                      <span className="text-xs text-[var(--oke-external)]">external</span>
                     ) : null}
                   </button>
                 </li>
@@ -308,9 +268,7 @@ export function ArchitecturePanel() {
               {view.edges.map((e) => (
                 <li key={e.id}>
                   {e.from} → {e.to}
-                  {e.dashed
-                    ? " (declared, never traversed)"
-                    : ` · ${e.traversals} traversals`}
+                  {e.dashed ? " (declared, never traversed)" : ` · ${e.traversals} traversals`}
                   {` · ${e.layer}`}
                 </li>
               ))}
@@ -329,9 +287,7 @@ export function ArchitecturePanel() {
             </p>
           </div>
           {view.findings.length === 0 ? (
-            <p className="px-5 pb-4 text-sm text-[var(--oke-muted)]">
-              No pathologies detected.
-            </p>
+            <p className="px-5 pb-4 text-sm text-[var(--oke-muted)]">No pathologies detected.</p>
           ) : (
             <ul className="divide-y divide-[var(--oke-line)] border-t border-[var(--oke-line)]">
               {view.findings.map((f, i) => (
@@ -348,16 +304,12 @@ export function ArchitecturePanel() {
                     />
                     {f.title}
                   </p>
-                  <p className="mt-1 text-sm text-[var(--oke-muted)]">
-                    {f.detail}
-                  </p>
+                  <p className="mt-1 text-sm text-[var(--oke-muted)]">{f.detail}</p>
                   {f.nodeIds[0] ? (
                     <button
                       type="button"
                       className="mt-2 min-h-8 text-sm text-[var(--oke-accent)] underline-offset-2 hover:underline"
-                      onClick={() =>
-                        setSearch(focusNode(search, f.nodeIds[0]!))
-                      }
+                      onClick={() => setSearch(focusNode(search, f.nodeIds[0]!))}
                     >
                       Focus
                     </button>

package/src/console/ui/shell/panels/channels/ChannelsPanel.tsx

@@ -61,18 +61,15 @@ export function ChannelsPanel() {
     () => filterTemplates(list?.templates ?? [], search.q ?? ""),
     [list?.templates, search.q],
   );
-  const open = templates.find((t) => t.name === search.template) ??
+  const open =
+    templates.find((t) => t.name === search.template) ??
     list?.templates.find((t) => t.name === search.template);
   const outcomes = sortByConsequence(list?.outcomes ?? []);
   const production = list?.production ?? true;
   const sendConfirm = sendTestConfirmation({ production });
 
   const previewQuery = useQuery({
-    queryKey: [
-      "console.channel.preview",
-      open?.name,
-      previewLocale || search.locale,
-    ],
+    queryKey: ["console.channel.preview", open?.name, previewLocale || search.locale],
     enabled: !!open,
     queryFn: async () => {
       if (!open) return null;
@@ -122,8 +119,7 @@ export function ChannelsPanel() {
         template: open.name,
         to: testTo,
         locale: previewLocale || open.locales[0],
-        confirmation:
-          sendConfirm.kind === "typed" ? sendConfirm.phrase : undefined,
+        confirmation: sendConfirm.kind === "typed" ? sendConfirm.phrase : undefined,
         reason: sendConfirm.kind === "typed" ? reason : undefined,
       });
       if (res.error) throw new Error(res.error.code);
@@ -169,9 +165,7 @@ export function ChannelsPanel() {
           aria-label="Templates"
           className="w-64 shrink-0 overflow-y-auto border-r border-[var(--oke-line)] p-3"
         >
-          <h2 className="mb-2 text-xs tracking-wide text-[var(--oke-muted)]">
-            Templates
-          </h2>
+          <h2 className="mb-2 text-xs tracking-wide text-[var(--oke-muted)]">Templates</h2>
           {listQuery.isLoading ? (
             <p className="text-sm text-[var(--oke-muted)]">Loading…</p>
           ) : (
@@ -187,9 +181,7 @@ export function ChannelsPanel() {
                         ? "bg-[var(--oke-line)] text-[var(--oke-fg)]"
                         : "text-[var(--oke-muted)]",
                     )}
-                    onClick={() =>
-                      setSearch(openTemplate(search, t.name))
-                    }
+                    onClick={() => setSearch(openTemplate(search, t.name))}
                   >
                     <span>{t.name}</span>
                     <span className="font-mono text-xs">{t.medium}</span>
@@ -200,33 +192,23 @@ export function ChannelsPanel() {
           )}
         </section>
 
-        <main
-          id="channels-main"
-          className="min-w-0 flex-1 overflow-y-auto p-4"
-        >
+        <main id="channels-main" className="min-w-0 flex-1 overflow-y-auto p-4">
           {list?.face === "inbox" ? (
             <section aria-label="Inbox" className="mb-8">
               <h2 className="text-base text-[var(--oke-fg)]">Inbox</h2>
               <ul className="mt-3 space-y-2">
                 {(list.inbox ?? []).map((e) => (
-                  <li
-                    key={e.id}
-                    className="border-b border-[var(--oke-line)] pb-2 text-sm"
-                  >
+                  <li key={e.id} className="border-b border-[var(--oke-line)] pb-2 text-sm">
                     <div className="flex gap-2 text-[var(--oke-muted)]">
                       <span>{e.medium}</span>
                       <span>{e.toMasked}</span>
                       {e.template ? <span>{e.template}</span> : null}
                     </div>
-                    <p className="mt-1 text-[var(--oke-fg)]">
-                      {e.subject ?? e.text ?? "(empty)"}
-                    </p>
+                    <p className="mt-1 text-[var(--oke-fg)]">{e.subject ?? e.text ?? "(empty)"}</p>
                   </li>
                 ))}
                 {(list.inbox ?? []).length === 0 ? (
-                  <li className="text-sm text-[var(--oke-muted)]">
-                    No messages yet
-                  </li>
+                  <li className="text-sm text-[var(--oke-muted)]">No messages yet</li>
                 ) : null}
               </ul>
             </section>
@@ -235,9 +217,7 @@ export function ChannelsPanel() {
           <section aria-label="Did not arrive" className="mb-8">
             <h2 className="text-base text-[var(--oke-fg)]">Did not arrive</h2>
             <table className="mt-3 w-full text-left text-sm">
-              <caption className="sr-only">
-                Seven-state taxonomy with verdicts
-              </caption>
+              <caption className="sr-only">Seven-state taxonomy with verdicts</caption>
               <thead>
                 <tr className="text-[var(--oke-muted)]">
                   <th scope="col" className="py-1 font-normal">
@@ -282,28 +262,21 @@ export function ChannelsPanel() {
             <section aria-label="Template detail" className="mb-8">
               <h2 className="text-base text-[var(--oke-fg)]">{open.name}</h2>
               <p className="mt-1 text-sm text-[var(--oke-muted)]">
-                From {open.from ?? "unset"} · Locales{" "}
-                {open.locales.join(", ") || "none"}
+                From {open.from ?? "unset"} · Locales {open.locales.join(", ") || "none"}
               </p>
 
               {open.from ? (
                 <section aria-label="Email authentication" className="mt-4">
-                  <h3 className="text-sm text-[var(--oke-fg)]">
-                    SPF / DKIM / DMARC
-                  </h3>
+                  <h3 className="text-sm text-[var(--oke-fg)]">SPF / DKIM / DMARC</h3>
                   {authQuery.data ? (
                     <ul className="mt-2 space-y-1 text-sm text-[var(--oke-muted)]">
                       <li>SPF: {authQuery.data.spf}</li>
                       <li>DKIM: {authQuery.data.dkim}</li>
                       <li>DMARC: {authQuery.data.dmarc}</li>
-                      <li className="font-mono text-xs">
-                        {authQuery.data.domain}
-                      </li>
+                      <li className="font-mono text-xs">{authQuery.data.domain}</li>
                     </ul>
                   ) : (
-                    <p className="mt-2 text-sm text-[var(--oke-muted)]">
-                      Checking…
-                    </p>
+                    <p className="mt-2 text-sm text-[var(--oke-muted)]">Checking…</p>
                   )}
                 </section>
               ) : null}
@@ -318,10 +291,7 @@ export function ChannelsPanel() {
                     value={previewLocale || open.locales[0] || "en"}
                     onChange={(e) => setPreviewLocale(e.target.value)}
                   >
-                    {(open.locales.length > 0
-                      ? open.locales
-                      : ["en"]
-                    ).map((l) => (
+                    {(open.locales.length > 0 ? open.locales : ["en"]).map((l) => (
                       <option key={l} value={l}>
                         {l}
                       </option>
@@ -331,8 +301,7 @@ export function ChannelsPanel() {
                 {previewQuery.data ? (
                   <>
                     <p className="mt-2 text-xs text-[var(--oke-muted)]">
-                      Locale chain:{" "}
-                      {formatLocaleChainDisplay(previewQuery.data.localeChain)}
+                      Locale chain: {formatLocaleChainDisplay(previewQuery.data.localeChain)}
                     </p>
                     <div
                       className="mt-2 max-w-prose border border-[var(--oke-line)] p-3 text-sm text-[var(--oke-fg)]"
@@ -340,9 +309,7 @@ export function ChannelsPanel() {
                       lang={previewQuery.data.locale}
                     >
                       {previewQuery.data.subject ? (
-                        <p className="mb-2 font-medium">
-                          {previewQuery.data.subject}
-                        </p>
+                        <p className="mb-2 font-medium">{previewQuery.data.subject}</p>
                       ) : null}
                       <p>{previewQuery.data.text ?? previewQuery.data.html}</p>
                     </div>
@@ -417,9 +384,7 @@ export function ChannelsPanel() {
                   {s.subjectMasked} · {s.reason} · {s.medium}
                 </li>
               ))}
-              {(list?.suppression ?? []).length === 0 ? (
-                <li>Empty</li>
-              ) : null}
+              {(list?.suppression ?? []).length === 0 ? <li>Empty</li> : null}
             </ul>
           </section>
 
@@ -442,9 +407,7 @@ export function ChannelsPanel() {
                   ) : null}
                 </li>
               ))}
-              {(list?.receipts ?? []).length === 0 ? (
-                <li>No receipts yet</li>
-              ) : null}
+              {(list?.receipts ?? []).length === 0 ? <li>No receipts yet</li> : null}
             </ul>
           </section>
         </main>