okengine 0.2.6 → 0.3.2

package/src/console/ui/shell/panels/clock/ClockPanel.tsx

@@ -61,25 +61,14 @@ export function ClockPanel() {
   const data = listQuery.data;
   const now = data?.now ?? Date.now();
   const q = search.q ?? "";
-  const crons = useMemo(
-    () => filterCrons(data?.crons ?? [], q),
-    [data?.crons, q],
-  );
-  const waitingOn = useMemo(
-    () => filterWaitingOn(data?.waitingOn ?? [], q),
-    [data?.waitingOn, q],
-  );
-  const timeline = useMemo(
-    () => forwardTimeline(data?.timeline ?? [], now),
-    [data?.timeline, now],
-  );
+  const crons = useMemo(() => filterCrons(data?.crons ?? [], q), [data?.crons, q]);
+  const waitingOn = useMemo(() => filterWaitingOn(data?.waitingOn ?? [], q), [data?.waitingOn, q]);
+  const timeline = useMemo(() => forwardTimeline(data?.timeline ?? [], now), [data?.timeline, now]);
   const counts = data?.waitingOnCounts ?? [];
   const banner = waitingOnBanner(waitingOn.length, counts);
   const openCronRow = crons.find((c) => c.name === search.cron);
   const openWakeRow = waitingOn.find((w) => w.runId === search.wake);
-  const runConfirm = openCronRow
-    ? runNowConfirmation(openCronRow, { production: true })
-    : null;
+  const runConfirm = openCronRow ? runNowConfirmation(openCronRow, { production: true }) : null;
   const health = openCronRow ? formatHealth(openCronRow.health) : null;
 
   useEffect(() => {
@@ -92,8 +81,7 @@ export function ClockPanel() {
     }
   }, [openCronRow?.name, search.action, openWakeRow?.runId]);
 
-  const invalidate = () =>
-    qc.invalidateQueries({ queryKey: ["console.clock.list"] });
+  const invalidate = () => qc.invalidateQueries({ queryKey: ["console.clock.list"] });
 
   const runNowMut = useMutation({
     mutationFn: async () => {
@@ -179,18 +167,14 @@ export function ClockPanel() {
     <div className="flex h-full min-h-0 flex-col">
       <header className="shrink-0 border-b border-[var(--oke-line)] px-4 py-3">
         <h1 className="text-lg font-medium">Clock</h1>
-        <p className="text-sm text-[var(--oke-muted)]">
-          Forward timeline, waiting-on, cron health
-        </p>
+        <p className="text-sm text-[var(--oke-muted)]">Forward timeline, waiting-on, cron health</p>
         <label className="mt-2 block max-w-sm text-sm">
           <span className="sr-only">Filter clock</span>
           <Input
             aria-label="Filter clock"
             placeholder="Filter…"
             value={q}
-            onChange={(e) =>
-              setSearch({ ...search, q: e.currentTarget.value || undefined })
-            }
+            onChange={(e) => setSearch({ ...search, q: e.currentTarget.value || undefined })}
           />
         </label>
       </header>
@@ -234,9 +218,7 @@ export function ClockPanel() {
           </p>
           <ul className="space-y-1">
             {waitingOn.map((w) => {
-              const count =
-                counts.find((c) => c.label === (w.label || "(unlabelled)"))
-                  ?.count ?? 1;
+              const count = counts.find((c) => c.label === (w.label || "(unlabelled)"))?.count ?? 1;
               return (
                 <li key={w.runId}>
                   <button
@@ -263,10 +245,7 @@ export function ClockPanel() {
           </ul>
         </section>
 
-        <section
-          aria-label="Cron schedules"
-          className="min-h-0 overflow-y-auto p-4"
-        >
+        <section aria-label="Cron schedules" className="min-h-0 overflow-y-auto p-4">
           <h2 className="mb-2 text-sm font-medium">Schedules</h2>
           <ul className="mb-4 space-y-1">
             {crons.map((c) => {
@@ -286,17 +265,13 @@ export function ClockPanel() {
                   >
                     <span className="flex items-center gap-1">
                       {c.name}
-                      {c.external ? (
-                        <span aria-label="external effect">↗</span>
-                      ) : null}
+                      {c.external ? <span aria-label="external effect">↗</span> : null}
                       {c.health.overdue ? (
                         <span role="status" className="text-[var(--oke-danger)]">
                           overdue
                         </span>
                       ) : null}
-                      {c.dstAmbiguity ? (
-                        <span role="status">DST {c.dstAmbiguity.kind}</span>
-                      ) : null}
+                      {c.dstAmbiguity ? <span role="status">DST {c.dstAmbiguity.kind}</span> : null}
                     </span>
                     <span className="text-[var(--oke-muted)]">
                       {h.drift} · {h.missedWithPolicy} · {h.lease}
@@ -308,14 +283,15 @@ export function ClockPanel() {
           </ul>
 
           {openCronRow && health ? (
-            <section aria-label="Cron detail" aria-live="polite" className="space-y-3 border-t border-[var(--oke-line)] pt-3">
+            <section
+              aria-label="Cron detail"
+              aria-live="polite"
+              className="space-y-3 border-t border-[var(--oke-line)] pt-3"
+            >
               <h3 className="text-base font-medium">{openCronRow.name}</h3>
               <p className="text-sm text-[var(--oke-muted)]">
-                {openCronRow.effectiveCron ?? openCronRow.effectiveEvery} ·{" "}
-                {openCronRow.timezone}
-                {openCronRow.status !== "active"
-                  ? ` · ${openCronRow.status}`
-                  : ""}
+                {openCronRow.effectiveCron ?? openCronRow.effectiveEvery} · {openCronRow.timezone}
+                {openCronRow.status !== "active" ? ` · ${openCronRow.status}` : ""}
               </p>
               <dl className="grid grid-cols-2 gap-2 text-sm">
                 <div>
@@ -383,8 +359,7 @@ export function ClockPanel() {
               {search.action === "run" && runConfirm?.kind === "typed" ? (
                 <div className="space-y-2">
                   <p className="text-sm">
-                    This cron has an external effect. Type{" "}
-                    <strong>RUN</strong> and a reason.
+                    This cron has an external effect. Type <strong>RUN</strong> and a reason.
                   </p>
                   <label className="block text-sm">
                     Type RUN to confirm
@@ -449,19 +424,12 @@ export function ClockPanel() {
               aria-live="polite"
               className="mt-4 space-y-2 border-t border-[var(--oke-line)] pt-3"
             >
-              <h3 className="text-base font-medium">
-                {openWakeRow.label || openWakeRow.flow}
-              </h3>
+              <h3 className="text-base font-medium">{openWakeRow.label || openWakeRow.flow}</h3>
               <p className="text-sm text-[var(--oke-muted)]">
-                {openWakeRow.flow} · wake in{" "}
-                {formatWakeIn(openWakeRow.wakeInMs)}
+                {openWakeRow.flow} · wake in {formatWakeIn(openWakeRow.wakeInMs)}
                 {openWakeRow.step ? ` · step ${openWakeRow.step}` : ""}
               </p>
-              <Button
-                type="button"
-                disabled={wakeMut.isPending}
-                onClick={() => wakeMut.mutate()}
-              >
+              <Button type="button" disabled={wakeMut.isPending} onClick={() => wakeMut.mutate()}>
                 Wake early
               </Button>
             </section>

package/src/console/ui/shell/panels/diff/DiffPanel.tsx

@@ -30,10 +30,7 @@ import { consoleCalls } from "../../client.ts";
 export function DiffPanel() {
   const pathname = useRouterState({ select: (s) => s.location.pathname });
   const rawSearch = useRouterState({ select: (s) => s.location.search });
-  const search = useMemo(
-    () => parseDiffSearch(rawSearch as Record<string, unknown>),
-    [rawSearch],
-  );
+  const search = useMemo(() => parseDiffSearch(rawSearch as Record<string, unknown>), [rawSearch]);
   const navigate = useNavigate();
 
   const setSearch = (next: DiffSearch) => {
@@ -56,12 +53,7 @@ export function DiffPanel() {
 
   const data = listQuery.data;
   const filtered = useMemo(
-    () =>
-      filterChanges(
-        data?.changes ?? [],
-        search.q ?? "",
-        search.category,
-      ),
+    () => filterChanges(data?.changes ?? [], search.q ?? "", search.category),
     [data?.changes, search.q, search.category],
   );
   const groups = useMemo(() => groupByCategory(filtered), [filtered]);
@@ -70,12 +62,10 @@ export function DiffPanel() {
   return (
     <div className="flex h-full min-h-0 flex-col">
       <header className="shrink-0 border-b border-[var(--oke-line)] px-4 py-3">
-        <h1 className="text-base font-medium text-[var(--oke-fg)]">
-          Manifest Diff
-        </h1>
+        <h1 className="text-base font-medium text-[var(--oke-fg)]">Manifest Diff</h1>
         <p className="text-sm text-[var(--oke-muted)]">
-          Blast radius of a deploy — contract, permission, effect, and no-impact.
-          Read-only compare of current Manifest vs baseline.
+          Blast radius of a deploy — contract, permission, effect, and no-impact. Read-only compare
+          of current Manifest vs baseline.
         </p>
         <label className="mt-2 flex max-w-sm flex-col gap-1 text-sm">
           <span className="text-[var(--oke-muted)]">Filter</span>
@@ -83,16 +73,10 @@ export function DiffPanel() {
             aria-label="Filter changes"
             className="min-h-8 border border-[var(--oke-line)] bg-transparent px-2"
             value={search.q ?? ""}
-            onChange={(e) =>
-              setSearch({ ...search, q: e.target.value || undefined })
-            }
+            onChange={(e) => setSearch({ ...search, q: e.target.value || undefined })}
           />
         </label>
-        <div
-          role="group"
-          aria-label="Blast-radius category"
-          className="mt-2 flex flex-wrap gap-1"
-        >
+        <div role="group" aria-label="Blast-radius category" className="mt-2 flex flex-wrap gap-1">
           <CategoryChip
             label="All"
             pressed={search.category === undefined}
@@ -124,9 +108,7 @@ export function DiffPanel() {
           <p className="text-[var(--oke-fg)]">
             <span
               className={
-                (data.blockedCount ?? 0) > 0
-                  ? "text-[var(--oke-fg)]"
-                  : "text-[var(--oke-muted)]"
+                (data.blockedCount ?? 0) > 0 ? "text-[var(--oke-fg)]" : "text-[var(--oke-muted)]"
               }
             >
               {data.blockedCount} undeclared break
@@ -142,17 +124,13 @@ export function DiffPanel() {
       ) : null}
 
       <main id="diff-main" className="min-h-0 flex-1 overflow-y-auto p-4">
-        {listQuery.isLoading ? (
-          <p className="text-[var(--oke-muted)]">Loading…</p>
-        ) : null}
-        {listQuery.isError ? (
-          <p role="alert">Failed to load Manifest Diff</p>
-        ) : null}
+        {listQuery.isLoading ? <p className="text-[var(--oke-muted)]">Loading…</p> : null}
+        {listQuery.isError ? <p role="alert">Failed to load Manifest Diff</p> : null}
 
         {data && !data.hasBaseline ? (
           <p className="text-[var(--oke-muted)]" role="status">
-            No baseline Manifest to compare. Deploy once, or feed a previous
-            Manifest, to see blast radius.
+            No baseline Manifest to compare. Deploy once, or feed a previous Manifest, to see blast
+            radius.
           </p>
         ) : null}
 
@@ -163,16 +141,10 @@ export function DiffPanel() {
         ) : null}
 
         {groups.map((group) => (
-          <section
-            key={group.category}
-            aria-label={group.label}
-            className="mb-8"
-          >
+          <section key={group.category} aria-label={group.label} className="mb-8">
             <h2 className="mb-3 text-xs uppercase tracking-wide text-[var(--oke-muted)]">
               {group.label}
-              <span className="ml-2 font-mono normal-case">
-                ({group.items.length})
-              </span>
+              <span className="ml-2 font-mono normal-case">({group.items.length})</span>
             </h2>
             <ul className="space-y-3">
               {group.items.map((item) => {
@@ -194,31 +166,20 @@ export function DiffPanel() {
                         onClick={() =>
                           setSearch({
                             ...search,
-                            path:
-                              search.path === item.path
-                                ? undefined
-                                : item.path,
+                            path: search.path === item.path ? undefined : item.path,
                           })
                         }
                       >
-                        <h3 className="font-mono text-sm text-[var(--oke-fg)]">
-                          {item.path}
-                        </h3>
-                        <p className="mt-1 text-sm text-[var(--oke-muted)]">
-                          {item.summary}
-                        </p>
+                        <h3 className="font-mono text-sm text-[var(--oke-fg)]">{item.path}</h3>
+                        <p className="mt-1 text-sm text-[var(--oke-muted)]">{item.summary}</p>
                       </button>
                       {item.blastLine ? (
-                        <p
-                          role="status"
-                          className="mt-2 text-sm text-[var(--oke-fg)]"
-                        >
+                        <p role="status" className="mt-2 text-sm text-[var(--oke-fg)]">
                           {item.blastLine}
                         </p>
                       ) : item.runCountLastWeek > 0 && item.flowName ? (
                         <p className="mt-2 text-sm text-[var(--oke-muted)]">
-                          Ran {item.runCountLastWeek.toLocaleString("en-US")}{" "}
-                          times last week
+                          Ran {item.runCountLastWeek.toLocaleString("en-US")} times last week
                         </p>
                       ) : null}
                       {item.weeklyBillLine ? (
@@ -263,9 +224,7 @@ function CategoryChip(props: {
       aria-pressed={props.pressed}
       className={clsx(
         "min-h-8 px-2 text-xs",
-        props.pressed
-          ? "bg-[var(--oke-line)] text-[var(--oke-fg)]"
-          : "text-[var(--oke-muted)]",
+        props.pressed ? "bg-[var(--oke-line)] text-[var(--oke-fg)]" : "text-[var(--oke-muted)]",
       )}
       onClick={props.onClick}
     >

package/src/console/ui/shell/panels/flows/ContractEditor.tsx

@@ -78,11 +78,7 @@ export function ContractEditor(props: ContractEditorProps) {
           )}
         </div>
       ) : (
-        <JsonPane
-          value={props.value}
-          onChange={props.onChange}
-          schema={props.schema}
-        />
+        <JsonPane value={props.value} onChange={props.onChange} schema={props.schema} />
       )}
     </section>
   );
@@ -94,10 +90,7 @@ export function ContractEditor(props: ContractEditorProps) {
  * @param schema - Input schema
  * @param value - Request body
  */
-export function validateBeforeSend(
-  schema: Record<string, unknown> | null,
-  value: unknown,
-) {
+export function validateBeforeSend(schema: Record<string, unknown> | null, value: unknown) {
   return validateContract(schema, value);
 }
 
@@ -117,16 +110,9 @@ function FormFieldControl({
   if (field.type === "object" && field.children) {
     return (
       <fieldset className="flex flex-col gap-2 border border-[var(--oke-line)] p-3">
-        <legend className="px-1 text-xs text-[var(--oke-muted)]">
-          {field.name}
-        </legend>
+        <legend className="px-1 text-xs text-[var(--oke-muted)]">{field.name}</legend>
         {field.children.map((child) => (
-          <FormFieldControl
-            key={child.path}
-            field={child}
-            value={value}
-            onChange={onChange}
-          />
+          <FormFieldControl key={child.path} field={child} value={value} onChange={onChange} />
         ))}
       </fieldset>
     );
@@ -158,16 +144,13 @@ function FormFieldControl({
           type="checkbox"
           className="h-6 w-6"
           checked={Boolean(current)}
-          onChange={(e) =>
-            onChange(setAtPath(value, field.path, e.target.checked))
-          }
+          onChange={(e) => onChange(setAtPath(value, field.path, e.target.checked))}
         />
       </Field>
     );
   }
 
-  const inputType =
-    field.type === "integer" || field.type === "number" ? "number" : "text";
+  const inputType = field.type === "integer" || field.type === "number" ? "number" : "text";
 
   return (
     <Field label={field.name} error={error}>

package/src/console/ui/shell/panels/flows/FlowDrawer.tsx

@@ -4,20 +4,14 @@
 
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useEffect, useMemo, useState } from "react";
-import {
-  confirmationFor,
-  validateTypedConfirm,
-} from "../../../flows/confirmation.ts";
+import { confirmationFor, validateTypedConfirm } from "../../../flows/confirmation.ts";
 import { diffAgainstSchema, seedFromSchema } from "../../../flows/contract.ts";
 import type { FlowNode } from "../../../flows/graph.ts";
 import { emitSaveAsTest, saveAsTestPath } from "../../../flows/save-as-test.ts";
 import { TIER_LABEL } from "../../../flows/tiers.ts";
 import { consoleCalls } from "../../client.ts";
 import { Button, Field, Input } from "../../components/ui.tsx";
-import {
-  ContractEditor,
-  validateBeforeSend,
-} from "./ContractEditor.tsx";
+import { ContractEditor, validateBeforeSend } from "./ContractEditor.tsx";
 
 /** Props for {@link FlowDrawer}. */
 export interface FlowDrawerProps {
@@ -38,9 +32,9 @@ export interface FlowDrawerProps {
 export function FlowDrawer(props: FlowDrawerProps) {
   const { flow, mode } = props;
   const [body, setBody] = useState<unknown>(() => seedFromSchema(flow.inSchema));
-  const [fieldErrors, setFieldErrors] = useState<
-    ReturnType<typeof validateBeforeSend>["errors"]
-  >([]);
+  const [fieldErrors, setFieldErrors] = useState<ReturnType<typeof validateBeforeSend>["errors"]>(
+    [],
+  );
   const [asUserId, setAsUserId] = useState("");
   const [confirmTyped, setConfirmTyped] = useState("");
   const [reason, setReason] = useState("");
@@ -145,9 +139,7 @@ export function FlowDrawer(props: FlowDrawerProps) {
             {flow.action}
           </h2>
           <div className="flex flex-wrap items-center gap-2 text-xs">
-            <span className="border border-[var(--oke-line)] px-1.5 py-0.5">
-              {flow.plane}
-            </span>
+            <span className="border border-[var(--oke-line)] px-1.5 py-0.5">{flow.plane}</span>
             {flow.flags.durable ? <Flag>durable</Flag> : null}
             {flow.flags.live ? <Flag>live</Flag> : null}
             {flow.flags.external ? (
@@ -159,10 +151,7 @@ export function FlowDrawer(props: FlowDrawerProps) {
           </div>
           {mode === "workbench" ? (
             <p className="text-xs text-[var(--oke-muted)]">
-              Effects:{" "}
-              {flow.peakTier === "none"
-                ? "none"
-                : TIER_LABEL[flow.peakTier]}
+              Effects: {flow.peakTier === "none" ? "none" : TIER_LABEL[flow.peakTier]}
               {flow.external ? " · irreversible" : ""}
             </p>
           ) : null}
@@ -241,8 +230,8 @@ export function FlowDrawer(props: FlowDrawerProps) {
               className="flex flex-col gap-2 border border-[var(--oke-external)] p-3"
             >
               <p className="text-sm text-[var(--oke-external)]">
-                This flow has external effects in production. Type{" "}
-                <strong>{pattern.phrase}</strong> and record a reason.
+                This flow has external effects in production. Type <strong>{pattern.phrase}</strong>{" "}
+                and record a reason.
               </p>
               <Field label={`Type ${pattern.phrase}`}>
                 <Input
@@ -252,10 +241,7 @@ export function FlowDrawer(props: FlowDrawerProps) {
                 />
               </Field>
               <Field label="Reason">
-                <Input
-                  value={reason}
-                  onChange={(e) => setReason(e.currentTarget.value)}
-                />
+                <Input value={reason} onChange={(e) => setReason(e.currentTarget.value)} />
               </Field>
             </section>
           ) : null}
@@ -278,11 +264,10 @@ export function FlowDrawer(props: FlowDrawerProps) {
                 <pre className="overflow-auto border border-[var(--oke-line)] p-3 font-mono text-xs">
                   {JSON.stringify(response, null, 2)}
                 </pre>
-                {schemaDiff &&
-                (schemaDiff.missing.length > 0 || schemaDiff.extra.length > 0) ? (
+                {schemaDiff && (schemaDiff.missing.length > 0 || schemaDiff.extra.length > 0) ? (
                   <p role="status" className="text-xs text-[var(--oke-danger)]">
-                    Schema drift — missing: {schemaDiff.missing.join(", ") || "—"} ·
-                    extra: {schemaDiff.extra.join(", ") || "—"}
+                    Schema drift — missing: {schemaDiff.missing.join(", ") || "—"} · extra:{" "}
+                    {schemaDiff.extra.join(", ") || "—"}
                   </p>
                 ) : null}
                 <Button

package/src/console/ui/shell/panels/flows/FlowsPanel.tsx

@@ -24,11 +24,7 @@ import {
   serializeFlowsSearch,
   type FlowsSearch,
 } from "../../../flows/search.ts";
-import {
-  TIER_LABEL,
-  TIER_ORDER,
-  type UiEffectTier,
-} from "../../../flows/tiers.ts";
+import { TIER_LABEL, TIER_ORDER, type UiEffectTier } from "../../../flows/tiers.ts";
 import type { Manifest } from "../../../../../manifest/types.ts";
 import { consoleCalls } from "../../client.ts";
 import { Button, Input, NewRowsPill } from "../../components/ui.tsx";
@@ -58,10 +54,7 @@ export function FlowsPanel() {
     },
   });
 
-  const graph = useMemo(
-    () => buildCausalityGraph(manifestQuery.data),
-    [manifestQuery.data],
-  );
+  const graph = useMemo(() => buildCausalityGraph(manifestQuery.data), [manifestQuery.data]);
 
   const causes = useMemo(
     () =>
@@ -102,9 +95,7 @@ export function FlowsPanel() {
     [graph, search],
   );
 
-  const openFlow = search.open
-    ? graph.flowById.get(search.open)
-    : undefined;
+  const openFlow = search.open ? graph.flowById.get(search.open) : undefined;
 
   const path = parsePath(search.path);
   const [pendingNew] = useState(0);
@@ -140,18 +131,14 @@ export function FlowsPanel() {
     <div className="relative flex h-[calc(100vh-3rem)] flex-col">
       <header className="flex flex-wrap items-center gap-3 border-b border-[var(--oke-line)] px-4 py-2">
         <h1 className="text-sm font-semibold tracking-wide">Flows</h1>
-        <p className="text-xs text-[var(--oke-muted)]">
-          Causes ← Flows → Effects
-        </p>
+        <p className="text-xs text-[var(--oke-muted)]">Causes ← Flows → Effects</p>
         <label className="ml-auto flex min-w-[12rem] flex-1 items-center gap-2 text-xs text-[var(--oke-muted)] md:max-w-xs">
           <span className="sr-only">Filter</span>
           <Input
             type="search"
             placeholder="Filter (dims, never hides)"
             value={search.q ?? ""}
-            onChange={(e) =>
-              setSearch({ ...search, q: e.currentTarget.value || undefined })
-            }
+            onChange={(e) => setSearch({ ...search, q: e.currentTarget.value || undefined })}
           />
         </label>
         <Button
@@ -161,8 +148,7 @@ export function FlowsPanel() {
           onClick={() =>
             setSearch({
               ...search,
-              density:
-                search.density === "compact" ? "comfortable" : "compact",
+              density: search.density === "compact" ? "comfortable" : "compact",
             })
           }
         >
@@ -172,9 +158,7 @@ export function FlowsPanel() {
           type="button"
           variant="ghost"
           aria-pressed={search.transitive}
-          onClick={() =>
-            setSearch({ ...search, transitive: !search.transitive })
-          }
+          onClick={() => setSearch({ ...search, transitive: !search.transitive })}
         >
           {search.transitive ? "Transitive" : "Direct"}
         </Button>
@@ -469,14 +453,10 @@ function EffectRow({
           </span>
         ) : null}
         {effect.touchCount > 1 ? (
-          <span className="ml-auto text-[11px] text-[var(--oke-muted)]">
-            {effect.touchCount}
-          </span>
+          <span className="ml-auto text-[11px] text-[var(--oke-muted)]">{effect.touchCount}</span>
         ) : null}
         {effect.fanOut > 0 ? (
-          <span className="text-[11px] text-[var(--oke-muted)]">
-            ×{effect.fanOut}
-          </span>
+          <span className="text-[11px] text-[var(--oke-muted)]">×{effect.fanOut}</span>
         ) : null}
       </button>
     </Dim>