okengine 0.2.5 → 0.2.8

package/src/console/ui/shell/panels/gates/GatesPanel.tsx

@@ -76,10 +76,7 @@ export function GatesPanel() {
 
   const selectedPrincipal = decodePrincipal(search.principal);
   const openPrincipalRow = selectedPrincipal
-    ? principals.find(
-        (p) =>
-          p.kind === selectedPrincipal.kind && p.id === selectedPrincipal.id,
-      )
+    ? principals.find((p) => p.kind === selectedPrincipal.kind && p.id === selectedPrincipal.id)
     : undefined;
   const openFlowRow = flows.find((f) => f.flowId === search.flow);
 
@@ -132,11 +129,7 @@ export function GatesPanel() {
             What can this principal do · what guards this flow
           </p>
         </div>
-        <div
-          role="group"
-          aria-label="Inquiry direction"
-          className="flex gap-1"
-        >
+        <div role="group" aria-label="Inquiry direction" className="flex gap-1">
           <Button
             type="button"
             variant={from === "principal" ? "primary" : "ghost"}
@@ -171,9 +164,7 @@ export function GatesPanel() {
           <Input
             aria-label="Filter gates"
             value={search.q ?? ""}
-            onChange={(e) =>
-              setSearch({ ...search, q: e.currentTarget.value || undefined })
-            }
+            onChange={(e) => setSearch({ ...search, q: e.currentTarget.value || undefined })}
           />
         </label>
       </header>
@@ -199,9 +190,7 @@ export function GatesPanel() {
           className="border-b border-[var(--oke-line)] bg-[var(--oke-danger)]/10 px-4 py-2"
           role="alert"
         >
-          <h2 className="text-sm font-medium text-[var(--oke-danger)]">
-            Two-plane violations
-          </h2>
+          <h2 className="text-sm font-medium text-[var(--oke-danger)]">Two-plane violations</h2>
           <ul className="mt-1 text-sm text-[var(--oke-fg)]">
             {violations.map((v) => (
               <li key={v.operatorId}>{formatViolation(v)}</li>
@@ -215,9 +204,7 @@ export function GatesPanel() {
           aria-label={from === "principal" ? "Principal list" : "Flow list"}
           className="w-80 shrink-0 overflow-y-auto border-r border-[var(--oke-line)]"
         >
-          <h2 className="sr-only">
-            {from === "principal" ? "Principals" : "Flows"}
-          </h2>
+          <h2 className="sr-only">{from === "principal" ? "Principals" : "Flows"}</h2>
           {listQuery.isLoading ? (
             <p className="p-4 text-sm text-[var(--oke-muted)]">Loading…</p>
           ) : null}
@@ -229,9 +216,7 @@ export function GatesPanel() {
               <ul>
                 {group.items.map((item) => {
                   const pressed =
-                    from === "flow"
-                      ? item.id === search.flow
-                      : item.id === search.principal;
+                    from === "flow" ? item.id === search.flow : item.id === search.principal;
                   return (
                     <li key={item.id}>
                       <button
@@ -251,25 +236,14 @@ export function GatesPanel() {
                           } else {
                             const decoded = decodePrincipal(item.id);
                             if (!decoded) return;
-                            setSearch(
-                              openPrincipal(
-                                search,
-                                decoded.kind,
-                                decoded.id,
-                              ),
-                            );
+                            setSearch(openPrincipal(search, decoded.kind, decoded.id));
                           }
                         }}
                       >
                         <span className="font-mono">{item.label}</span>
-                        {item.meta ? (
-                          <span className="truncate text-xs">{item.meta}</span>
-                        ) : null}
+                        {item.meta ? <span className="truncate text-xs">{item.meta}</span> : null}
                         {item.flag ? (
-                          <span
-                            role="status"
-                            className="text-xs text-[var(--oke-danger)]"
-                          >
+                          <span role="status" className="text-xs text-[var(--oke-danger)]">
                             {item.flag}
                           </span>
                         ) : null}
@@ -295,17 +269,13 @@ export function GatesPanel() {
             <div className="flex max-w-2xl flex-col gap-6">
               {from === "flow" && openFlowRow ? (
                 <div>
-                  <h2 className="font-mono text-lg text-[var(--oke-fg)]">
-                    {openFlowRow.flowId}
-                  </h2>
+                  <h2 className="font-mono text-lg text-[var(--oke-fg)]">{openFlowRow.flowId}</h2>
                   <p className="text-sm text-[var(--oke-muted)]">
                     What guards this — registration order
                   </p>
                   {openFlowRow.gates.length === 0 ? (
                     <p className="mt-2 text-sm" role="status">
-                      {openFlowRow.unguarded
-                        ? "Unguarded — public on the user plane"
-                        : "No gates"}
+                      {openFlowRow.unguarded ? "Unguarded — public on the user plane" : "No gates"}
                     </p>
                   ) : (
                     <ol
@@ -329,15 +299,10 @@ export function GatesPanel() {
                   </h2>
                   <p className="text-sm text-[var(--oke-muted)]">
                     {openPrincipalRow.kind} · {openPrincipalRow.plane} plane
-                    {openPrincipalRow.email
-                      ? ` · ${openPrincipalRow.email}`
-                      : ""}
+                    {openPrincipalRow.email ? ` · ${openPrincipalRow.email}` : ""}
                   </p>
                   <h3 className="mt-4 text-sm font-medium">Scopes</h3>
-                  <ul
-                    aria-label="Scopes"
-                    className="mt-1 flex flex-wrap gap-2 text-sm"
-                  >
+                  <ul aria-label="Scopes" className="mt-1 flex flex-wrap gap-2 text-sm">
                     {openPrincipalRow.scopes.map((s) => (
                       <li key={s}>
                         <code className="font-mono">{s}</code>
@@ -355,13 +320,10 @@ export function GatesPanel() {
                   {powers ? (
                     <div className="mt-3 text-sm">
                       <p role="status">
-                        {powers.allowedFlowIds.length} flows allowed ·{" "}
-                        {powers.deniedFlowIds.length} denied
+                        {powers.allowedFlowIds.length} flows allowed · {powers.deniedFlowIds.length}{" "}
+                        denied
                       </p>
-                      <ul
-                        aria-label="Allowed flows"
-                        className="mt-2 list-disc pl-5"
-                      >
+                      <ul aria-label="Allowed flows" className="mt-2 list-disc pl-5">
                         {powers.allowedFlowIds.map((id) => (
                           <li key={id}>
                             <code className="font-mono">{id}</code>
@@ -373,21 +335,14 @@ export function GatesPanel() {
                 </div>
               ) : null}
 
-              <section
-                aria-label="Simulator"
-                className="border-t border-[var(--oke-line)] pt-4"
-              >
-                <h3 className="text-sm font-medium text-[var(--oke-fg)]">
-                  Simulator
-                </h3>
+              <section aria-label="Simulator" className="border-t border-[var(--oke-line)] pt-4">
+                <h3 className="text-sm font-medium text-[var(--oke-fg)]">Simulator</h3>
                 <p className="text-sm text-[var(--oke-muted)]">
                   Evaluates the real gate chain only — never runs the handler
                 </p>
                 <label className="mt-3 flex max-w-md flex-col gap-1 text-sm">
                   <span className="text-[var(--oke-muted)]">
-                    {from === "flow"
-                      ? "Simulate as principal"
-                      : "Simulate against flow"}
+                    {from === "flow" ? "Simulate as principal" : "Simulate against flow"}
                   </span>
                   <select
                     aria-label="Companion selection"
@@ -405,10 +360,7 @@ export function GatesPanel() {
                     <option value="">Select…</option>
                     {from === "flow"
                       ? principals.map((p) => (
-                          <option
-                            key={`${p.kind}:${p.id}`}
-                            value={`${p.kind}:${p.id}`}
-                          >
+                          <option key={`${p.kind}:${p.id}`} value={`${p.kind}:${p.id}`}>
                             {p.kind}: {p.name}
                           </option>
                         ))
@@ -431,9 +383,7 @@ export function GatesPanel() {
                 </Button>
                 {simulate.isError ? (
                   <p role="alert" className="mt-2 text-sm text-[var(--oke-danger)]">
-                    {simulate.error instanceof Error
-                      ? simulate.error.message
-                      : "Simulate failed"}
+                    {simulate.error instanceof Error ? simulate.error.message : "Simulate failed"}
                   </p>
                 ) : null}
                 {simResult ? (
@@ -443,9 +393,7 @@ export function GatesPanel() {
                       className="list-decimal space-y-1 pl-5 text-sm"
                     >
                       {simResult.evaluations.map((e, i) => (
-                        <li key={`${e.name}-${i}`}>
-                          {formatEvaluationStep(e, i)}
-                        </li>
+                        <li key={`${e.name}-${i}`}>{formatEvaluationStep(e, i)}</li>
                       ))}
                     </ol>
                     <p
@@ -453,9 +401,7 @@ export function GatesPanel() {
                       className="mt-3 text-sm"
                       data-denial={simResult.denial?.code ?? "allowed"}
                     >
-                      {simResult.denial
-                        ? formatDenial(simResult.denial)
-                        : "Allowed — chain passed"}
+                      {simResult.denial ? formatDenial(simResult.denial) : "Allowed — chain passed"}
                     </p>
                   </div>
                 ) : null}
@@ -463,9 +409,7 @@ export function GatesPanel() {
 
               {widenings.length > 0 ? (
                 <section aria-label="Permission widenings">
-                  <h3 className="text-sm font-medium text-[var(--oke-danger)]">
-                    Deploy widenings
-                  </h3>
+                  <h3 className="text-sm font-medium text-[var(--oke-danger)]">Deploy widenings</h3>
                   <ul className="mt-2 list-disc pl-5 text-sm">
                     {widenings.map((w) => (
                       <li key={`${w.path}:${w.summary}`}>{w.summary}</li>

package/src/console/ui/shell/panels/overview/OverviewPanel.tsx

@@ -158,17 +158,12 @@ export function OverviewPanel() {
     accessQuery.data,
   ]);
 
-  const loading =
-    manifestQuery.isLoading ||
-    runsQuery.isLoading ||
-    gatesQuery.isLoading;
+  const loading = manifestQuery.isLoading || runsQuery.isLoading || gatesQuery.isLoading;
 
   return (
     <div className="flex h-full min-h-0 flex-col overflow-y-auto">
       <header className="shrink-0 border-b border-[var(--oke-line)] px-6 py-5">
-        <p className="text-xs uppercase tracking-[0.2em] text-[var(--oke-muted)]">
-          Overview
-        </p>
+        <p className="text-xs uppercase tracking-[0.2em] text-[var(--oke-muted)]">Overview</p>
         <h1 className="mt-1 text-xl font-semibold tracking-tight text-[var(--oke-fg)]">
           Is the system healthy right now?
         </h1>
@@ -191,8 +186,8 @@ export function OverviewPanel() {
         {!loading && !manifestQuery.data ? (
           <p className="text-sm text-[var(--oke-muted)]">
             No Manifest yet — save a Flow under{" "}
-            <code className="font-mono text-[var(--oke-fg)]">src/</code> and
-            the Console will refresh.
+            <code className="font-mono text-[var(--oke-fg)]">src/</code> and the Console will
+            refresh.
           </p>
         ) : null}
 
@@ -228,9 +223,7 @@ export function OverviewPanel() {
         />
 
         <section aria-label="What changed" className="flex flex-col gap-2">
-          <h2 className="text-sm font-medium text-[var(--oke-fg)]">
-            What changed
-          </h2>
+          <h2 className="text-sm font-medium text-[var(--oke-fg)]">What changed</h2>
           <p className="text-sm text-[var(--oke-muted)]">
             <a
               href={view.whatChanged.href}
@@ -250,9 +243,7 @@ export function OverviewPanel() {
             aria-label="Declare first SLO"
             className="flex flex-col gap-2 border border-[var(--oke-line)] px-4 py-3"
           >
-            <h2 className="text-sm font-medium text-[var(--oke-fg)]">
-              Declare a first objective
-            </h2>
+            <h2 className="text-sm font-medium text-[var(--oke-fg)]">Declare a first objective</h2>
             <p className="text-sm text-[var(--oke-muted)]">
               Your busiest flow is{" "}
               <a
@@ -261,8 +252,7 @@ export function OverviewPanel() {
               >
                 {view.firstSloInvite.busiestFlow}
               </a>{" "}
-              ({view.firstSloInvite.runCount.toLocaleString("en-US")} runs).
-              Add{" "}
+              ({view.firstSloInvite.runCount.toLocaleString("en-US")} runs). Add{" "}
               <code className="font-mono text-[13px] text-[var(--oke-fg)]">
                 {'slo: { availability: "99.9%" }'}
               </code>{" "}
@@ -291,13 +281,9 @@ function BudgetStrip(props: {
 }) {
   return (
     <section aria-label={props.ariaLabel} className="flex flex-col gap-3">
-      <h2 className="text-sm font-medium text-[var(--oke-fg)]">
-        {props.label}
-      </h2>
+      <h2 className="text-sm font-medium text-[var(--oke-fg)]">{props.label}</h2>
       {props.items.length === 0 ? (
-        <p className="text-sm text-[var(--oke-muted)]">
-          {props.empty ?? "None."}
-        </p>
+        <p className="text-sm text-[var(--oke-muted)]">{props.empty ?? "None."}</p>
       ) : (
         <ul className="divide-y divide-[var(--oke-line)] border-y border-[var(--oke-line)]">
           {props.items.map((item) => (
@@ -306,23 +292,16 @@ function BudgetStrip(props: {
               className="flex min-h-10 flex-wrap items-center justify-between gap-3 py-2 text-sm"
             >
               <div className="flex min-w-0 flex-col gap-0.5">
-                <span className="font-mono text-[13px] text-[var(--oke-fg)]">
-                  {item.title}
-                </span>
+                <span className="font-mono text-[13px] text-[var(--oke-fg)]">{item.title}</span>
                 <span className="text-[var(--oke-muted)]">{item.meta}</span>
               </div>
               <div className="flex flex-wrap items-center gap-3 text-[var(--oke-muted)]">
                 <span>
-                  burn{" "}
-                  <span className="text-[var(--oke-fg)]">
-                    {formatBurnRate(item.burn)}
-                  </span>
+                  burn <span className="text-[var(--oke-fg)]">{formatBurnRate(item.burn)}</span>
                 </span>
                 <span>
                   exhausts{" "}
-                  <span className="text-[var(--oke-fg)]">
-                    {formatBudgetDuration(item.exhaust)}
-                  </span>
+                  <span className="text-[var(--oke-fg)]">{formatBudgetDuration(item.exhaust)}</span>
                 </span>
                 <span
                   aria-hidden
@@ -358,9 +337,7 @@ function FindingsList({ view }: { readonly view: OverviewView }) {
     <section aria-label="Findings" aria-live="polite" className="flex flex-col gap-3">
       <h2 className="text-sm font-medium text-[var(--oke-fg)]">Findings</h2>
       {view.findings.length === 0 ? (
-        <p className="text-sm text-[var(--oke-muted)]">
-          No findings from other panels.
-        </p>
+        <p className="text-sm text-[var(--oke-muted)]">No findings from other panels.</p>
       ) : (
         <ol className="divide-y divide-[var(--oke-line)] border-y border-[var(--oke-line)]">
           {view.findings.map((f, i) => (
@@ -369,15 +346,10 @@ function FindingsList({ view }: { readonly view: OverviewView }) {
                 href={f.href}
                 className="flex min-h-8 items-start gap-3 hover:text-[var(--oke-fg)]"
               >
-                <span className="w-5 shrink-0 text-[var(--oke-muted)]">
-                  {i + 1}.
-                </span>
+                <span className="w-5 shrink-0 text-[var(--oke-muted)]">{i + 1}.</span>
                 <span>
                   <span className="text-[var(--oke-fg)]">{f.title}</span>
-                  <span className="text-[var(--oke-muted)]">
-                    {" "}
-                    · {f.detail}
-                  </span>
+                  <span className="text-[var(--oke-muted)]"> · {f.detail}</span>
                   <span className="ml-2 text-xs uppercase tracking-wider text-[var(--oke-muted)]">
                     {f.source}
                   </span>
@@ -394,38 +366,28 @@ function FindingsList({ view }: { readonly view: OverviewView }) {
 function GoldenStrip({ view }: { readonly view: OverviewView }) {
   return (
     <section aria-label="Golden signals" className="flex flex-col gap-3">
-      <h2 className="text-sm font-medium text-[var(--oke-fg)]">
-        Golden signals
-      </h2>
+      <h2 className="text-sm font-medium text-[var(--oke-fg)]">Golden signals</h2>
       <dl className="grid grid-cols-2 gap-4 sm:grid-cols-4">
         <div>
-          <dt className="text-xs uppercase tracking-wider text-[var(--oke-muted)]">
-            Latency p99
-          </dt>
+          <dt className="text-xs uppercase tracking-wider text-[var(--oke-muted)]">Latency p99</dt>
           <dd className="mt-1 text-sm text-[var(--oke-fg)]">
             {Math.round(view.golden.latencyP99Ms)} ms
           </dd>
         </div>
         <div>
-          <dt className="text-xs uppercase tracking-wider text-[var(--oke-muted)]">
-            Traffic
-          </dt>
+          <dt className="text-xs uppercase tracking-wider text-[var(--oke-muted)]">Traffic</dt>
           <dd className="mt-1 text-sm text-[var(--oke-fg)]">
             {view.golden.trafficPerMin.toFixed(1)} / min
           </dd>
         </div>
         <div>
-          <dt className="text-xs uppercase tracking-wider text-[var(--oke-muted)]">
-            Errors
-          </dt>
+          <dt className="text-xs uppercase tracking-wider text-[var(--oke-muted)]">Errors</dt>
           <dd className="mt-1 text-sm text-[var(--oke-fg)]">
             {(view.golden.errorRate * 100).toFixed(2)}%
           </dd>
         </div>
         <div>
-          <dt className="text-xs uppercase tracking-wider text-[var(--oke-muted)]">
-            Saturation
-          </dt>
+          <dt className="text-xs uppercase tracking-wider text-[var(--oke-muted)]">Saturation</dt>
           <dd className="mt-1 text-sm text-[var(--oke-fg)]">
             {(view.golden.saturation * 100).toFixed(1)}%
           </dd>

package/src/console/ui/shell/panels/plugins/PluginsPanel.tsx

@@ -48,14 +48,8 @@ export function PluginsPanel() {
   });
 
   const list = listQuery.data;
-  const groups = useMemo(
-    () => groupPlugins(list?.plugins ?? [], search),
-    [list?.plugins, search],
-  );
-  const open =
-    list?.plugins.find((p) => p.id === search.plugin) ??
-    list?.plugins[0] ??
-    null;
+  const groups = useMemo(() => groupPlugins(list?.plugins ?? [], search), [list?.plugins, search]);
+  const open = list?.plugins.find((p) => p.id === search.plugin) ?? list?.plugins[0] ?? null;
   const command = open ? copyableCommand(open) : null;
 
   const copy = async () => {
@@ -70,8 +64,8 @@ export function PluginsPanel() {
       <header className="shrink-0 border-b border-[var(--oke-line)] px-4 py-3">
         <h1 className="text-lg text-[var(--oke-fg)]">Plugins</h1>
         <p className="mt-1 text-sm text-[var(--oke-muted)]">
-          Origin × state — CORE stays listed when off; local/community only when
-          plugged. Read-only; git review is the approval.
+          Origin × state — CORE stays listed when off; local/community only when plugged. Read-only;
+          git review is the approval.
         </p>
         <div className="mt-3 flex flex-wrap items-end gap-3">
           <label className="flex flex-col gap-1 text-xs text-[var(--oke-muted)]">
@@ -79,9 +73,7 @@ export function PluginsPanel() {
             <Input
               aria-label="Filter plugins"
               value={search.q ?? ""}
-              onChange={(e) =>
-                setSearch({ ...search, q: e.target.value || undefined })
-              }
+              onChange={(e) => setSearch({ ...search, q: e.target.value || undefined })}
               className="min-h-8 w-56"
             />
           </label>
@@ -89,10 +81,7 @@ export function PluginsPanel() {
             value={search.origin}
             onChange={(origin) => setSearch({ ...search, origin })}
           />
-          <StateFilter
-            value={search.state}
-            onChange={(state) => setSearch({ ...search, state })}
-          />
+          <StateFilter value={search.state} onChange={(state) => setSearch({ ...search, state })} />
         </div>
       </header>
 
@@ -142,9 +131,7 @@ export function PluginsPanel() {
           className="min-h-0 flex-1 overflow-y-auto px-4 py-3"
         >
           {!open ? (
-            <p className="text-sm text-[var(--oke-muted)]">
-              Select a plugin
-            </p>
+            <p className="text-sm text-[var(--oke-muted)]">Select a plugin</p>
           ) : (
             <PluginDetail
               plugin={open}
@@ -175,13 +162,9 @@ function PluginDetail(props: {
             ({p.origin} · {p.state})
           </span>
         </h2>
-        {p.summary ? (
-          <p className="mt-1 text-sm text-[var(--oke-muted)]">{p.summary}</p>
-        ) : null}
+        {p.summary ? <p className="mt-1 text-sm text-[var(--oke-muted)]">{p.summary}</p> : null}
         {p.version ? (
-          <p className="mt-1 text-xs text-[var(--oke-muted)]">
-            Version {p.version}
-          </p>
+          <p className="mt-1 text-xs text-[var(--oke-muted)]">Version {p.version}</p>
         ) : null}
       </div>
 
@@ -210,9 +193,7 @@ function PluginDetail(props: {
           <p className="mt-2 text-sm text-[var(--oke-muted)]">None</p>
         ) : (
           <table className="mt-2 w-full text-left text-sm">
-            <caption className="sr-only">
-              Hook stages and measured mean cost
-            </caption>
+            <caption className="sr-only">Hook stages and measured mean cost</caption>
             <thead>
               <tr className="text-xs text-[var(--oke-muted)]">
                 <th scope="col" className="py-1 pr-3 font-normal">
@@ -232,9 +213,7 @@ function PluginDetail(props: {
                   <th scope="row" className="py-1 pr-3 font-mono font-normal">
                     {i.stage}
                   </th>
-                  <td className="py-1 pr-3">
-                    {i.meanMs === null ? "—" : i.meanMs.toFixed(2)}
-                  </td>
+                  <td className="py-1 pr-3">{i.meanMs === null ? "—" : i.meanMs.toFixed(2)}</td>
                   <td className="py-1">{i.count}</td>
                 </tr>
               ))}
@@ -243,8 +222,8 @@ function PluginDetail(props: {
         )}
         {p.hookCost ? (
           <p className="mt-2 text-xs text-[var(--oke-muted)]" role="status">
-            p50 {p.hookCost.p50Ms.toFixed(2)} ms · p95{" "}
-            {p.hookCost.p95Ms.toFixed(2)} ms · n={p.hookCost.count}
+            p50 {p.hookCost.p50Ms.toFixed(2)} ms · p95 {p.hookCost.p95Ms.toFixed(2)} ms · n=
+            {p.hookCost.count}
           </p>
         ) : null}
       </section>
@@ -299,9 +278,7 @@ function PluginDetail(props: {
                 >
                   {c.summary}
                 </a>
-                <span className="ml-2 text-xs text-[var(--oke-muted)]">
-                  {c.category}
-                </span>
+                <span className="ml-2 text-xs text-[var(--oke-muted)]">{c.category}</span>
               </li>
             ))}
           </ul>
@@ -326,14 +303,12 @@ function PluginDetail(props: {
               ) : null}
             </div>
             <p className="text-xs text-[var(--oke-muted)]">
-              The Console never installs. Git review is the approval — run this
-              yourself.
+              The Console never installs. Git review is the approval — run this yourself.
             </p>
           </div>
         ) : (
           <p className="mt-2 text-sm text-[var(--oke-muted)]">
-            No install command — turn off by removing the code line, not from
-            this UI.
+            No install command — turn off by removing the code line, not from this UI.
           </p>
         )}
       </section>