okengine 0.1.4

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

@@ -0,0 +1,275 @@
+/**
+ * Manifest Diff panel — blast radius of a deploy (console §9.12).
+ *
+ * Pure read/compare view. Classification is from `diffManifest` via the
+ * server projection — this UI only renders. No confirm dialogs, no preview.
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
+import { clsx } from "clsx";
+import { useMemo } from "react";
+import {
+  DIFF_CATEGORY_LABELS,
+  DIFF_CATEGORY_ORDER,
+  filterChanges,
+  formatCiGate,
+  groupByCategory,
+  parseDiffSearch,
+  serializeDiffSearch,
+  type DiffListResponse,
+  type DiffSearch,
+} from "../../../diff/index.ts";
+import { consoleCalls } from "../../client.ts";
+
+/**
+ * Manifest Diff panel.
+ *
+ * Works on `/manifest-diff` and the `/diff` alias (AI deep-links).
+ */
+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 navigate = useNavigate();
+
+  const setSearch = (next: DiffSearch) => {
+    void navigate({
+      to: pathname === "/diff" ? "/diff" : "/manifest-diff",
+      search: serializeDiffSearch(next) as never,
+      replace: true,
+    });
+  };
+
+  const listQuery = useQuery({
+    queryKey: ["console.diff.list"],
+    queryFn: async () => {
+      const res = await consoleCalls.diffList();
+      if (res.error) throw new Error(res.error.code);
+      return res.data as DiffListResponse;
+    },
+    refetchInterval: 10_000,
+  });
+
+  const data = listQuery.data;
+  const filtered = useMemo(
+    () =>
+      filterChanges(
+        data?.changes ?? [],
+        search.q ?? "",
+        search.category,
+      ),
+    [data?.changes, search.q, search.category],
+  );
+  const groups = useMemo(() => groupByCategory(filtered), [filtered]);
+  const focusPath = search.path;
+
+  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>
+        <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.
+        </p>
+        <label className="mt-2 flex max-w-sm flex-col gap-1 text-sm">
+          <span className="text-[var(--oke-muted)]">Filter</span>
+          <input
+            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 })
+            }
+          />
+        </label>
+        <div
+          role="group"
+          aria-label="Blast-radius category"
+          className="mt-2 flex flex-wrap gap-1"
+        >
+          <CategoryChip
+            label="All"
+            pressed={search.category === undefined}
+            onClick={() => setSearch({ ...search, category: undefined })}
+          />
+          {DIFF_CATEGORY_ORDER.map((cat) => (
+            <CategoryChip
+              key={cat}
+              label={DIFF_CATEGORY_LABELS[cat]}
+              pressed={search.category === cat}
+              onClick={() =>
+                setSearch({
+                  ...search,
+                  category: search.category === cat ? undefined : cat,
+                })
+              }
+            />
+          ))}
+        </div>
+      </header>
+
+      {data?.hasBaseline ? (
+        <section
+          aria-label="CI gate summary"
+          role="status"
+          className="shrink-0 border-b border-[var(--oke-line)] px-4 py-2 text-sm"
+        >
+          <h2 className="sr-only">CI gate</h2>
+          <p className="text-[var(--oke-fg)]">
+            <span
+              className={
+                (data.blockedCount ?? 0) > 0
+                  ? "text-[var(--oke-fg)]"
+                  : "text-[var(--oke-muted)]"
+              }
+            >
+              {data.blockedCount} undeclared break
+              {data.blockedCount === 1 ? "" : "s"} blocked
+            </span>
+            <span className="text-[var(--oke-muted)]"> · </span>
+            <span className="text-[var(--oke-muted)]">
+              {data.acknowledgedCount} acknowledged with{" "}
+              <code className="font-mono text-xs">breaking: true</code>
+            </span>
+          </p>
+        </section>
+      ) : 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}
+
+        {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.
+          </p>
+        ) : null}
+
+        {data?.hasBaseline && groups.length === 0 ? (
+          <p className="text-[var(--oke-muted)]" role="status">
+            No behavioural changes between baseline and current Manifest.
+          </p>
+        ) : null}
+
+        {groups.map((group) => (
+          <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>
+            </h2>
+            <ul className="space-y-3">
+              {group.items.map((item) => {
+                const gate = formatCiGate(item.ciGate);
+                const selected = item.path === focusPath;
+                return (
+                  <li key={item.path}>
+                    <article
+                      aria-current={selected ? "true" : undefined}
+                      className={clsx(
+                        "border border-[var(--oke-line)] px-3 py-3",
+                        selected && "bg-[var(--oke-line)]",
+                      )}
+                    >
+                      <button
+                        type="button"
+                        className="min-h-8 w-full text-left"
+                        aria-pressed={selected}
+                        onClick={() =>
+                          setSearch({
+                            ...search,
+                            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>
+                      </button>
+                      {item.blastLine ? (
+                        <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
+                        </p>
+                      ) : null}
+                      {item.weeklyBillLine ? (
+                        <p className="mt-1 text-sm font-medium text-[var(--oke-fg)]">
+                          Weekly bill: {item.weeklyBillLine}
+                        </p>
+                      ) : null}
+                      {gate ? (
+                        <p
+                          role="status"
+                          data-ci-gate={item.ciGate ?? undefined}
+                          className={clsx(
+                            "mt-2 text-sm",
+                            item.ciGate === "blocked"
+                              ? "text-[var(--oke-fg)]"
+                              : "text-[var(--oke-muted)]",
+                          )}
+                        >
+                          {gate}
+                        </p>
+                      ) : null}
+                    </article>
+                  </li>
+                );
+              })}
+            </ul>
+          </section>
+        ))}
+      </main>
+    </div>
+  );
+}
+
+function CategoryChip(props: {
+  readonly label: string;
+  readonly pressed: boolean;
+  readonly onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      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)]",
+      )}
+      onClick={props.onClick}
+    >
+      {props.label}
+    </button>
+  );
+}

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

@@ -0,0 +1,301 @@
+/**
+ * Dual form ⇄ JSON contract editor (console §9.2).
+ */
+
+import { json } from "@codemirror/lang-json";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { EditorState } from "@codemirror/state";
+import { EditorView, keymap, lineNumbers } from "@codemirror/view";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { clsx } from "clsx";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import {
+  fieldsFromSchema,
+  getAtPath,
+  parseJsonEditor,
+  setAtPath,
+  validateContract,
+  valueToJsonText,
+  type FieldError,
+  type FormField,
+} from "../../../flows/contract.ts";
+import { Button, Field, Input } from "../../components/ui.tsx";
+
+/** Props for {@link ContractEditor}. */
+export interface ContractEditorProps {
+  readonly schema: Record<string, unknown> | null;
+  readonly value: unknown;
+  readonly mode: "form" | "json";
+  readonly onModeChange: (mode: "form" | "json") => void;
+  readonly onChange: (value: unknown) => void;
+  readonly errors: readonly FieldError[];
+}
+
+/**
+ * Dual form ⇄ JSON editor synced both ways; validates locally.
+ *
+ * @param props - Schema, value, mode
+ */
+export function ContractEditor(props: ContractEditorProps) {
+  const fields = fieldsFromSchema(props.schema);
+  const errorByPath = new Map(props.errors.map((e) => [e.path, e.message]));
+
+  return (
+    <section className="flex flex-col gap-3" aria-label="Contract editor">
+      <div className="flex items-center gap-2">
+        <Button
+          type="button"
+          variant={props.mode === "form" ? "primary" : "ghost"}
+          aria-pressed={props.mode === "form"}
+          onClick={() => props.onModeChange("form")}
+        >
+          Form
+        </Button>
+        <Button
+          type="button"
+          variant={props.mode === "json" ? "primary" : "ghost"}
+          aria-pressed={props.mode === "json"}
+          onClick={() => props.onModeChange("json")}
+        >
+          JSON
+        </Button>
+      </div>
+
+      {props.mode === "form" ? (
+        <div className="flex flex-col gap-3">
+          {fields.length === 0 ? (
+            <p className="text-sm text-[var(--oke-muted)]">No input schema.</p>
+          ) : (
+            fields.map((field) => (
+              <FormFieldControl
+                key={field.path}
+                field={field}
+                value={props.value}
+                error={errorByPath.get(field.path)}
+                onChange={props.onChange}
+              />
+            ))
+          )}
+        </div>
+      ) : (
+        <JsonPane
+          value={props.value}
+          onChange={props.onChange}
+          schema={props.schema}
+        />
+      )}
+    </section>
+  );
+}
+
+/**
+ * Validate before invoke — returns errors under fields.
+ *
+ * @param schema - Input schema
+ * @param value - Request body
+ */
+export function validateBeforeSend(
+  schema: Record<string, unknown> | null,
+  value: unknown,
+) {
+  return validateContract(schema, value);
+}
+
+function FormFieldControl({
+  field,
+  value,
+  error,
+  onChange,
+}: {
+  readonly field: FormField;
+  readonly value: unknown;
+  readonly error?: string;
+  readonly onChange: (value: unknown) => void;
+}) {
+  const current = getAtPath(value, field.path);
+
+  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>
+        {field.children.map((child) => (
+          <FormFieldControl
+            key={child.path}
+            field={child}
+            value={value}
+            onChange={onChange}
+          />
+        ))}
+      </fieldset>
+    );
+  }
+
+  if (field.type === "enum" && field.enumValues) {
+    return (
+      <Field label={field.name} error={error}>
+        <select
+          className="min-h-8 w-full border border-[var(--oke-line)] bg-transparent px-3 text-sm"
+          value={String(current ?? "")}
+          onChange={(e) => onChange(setAtPath(value, field.path, e.target.value))}
+        >
+          <option value="">Select…</option>
+          {field.enumValues.map((v) => (
+            <option key={v} value={v}>
+              {v}
+            </option>
+          ))}
+        </select>
+      </Field>
+    );
+  }
+
+  if (field.type === "boolean") {
+    return (
+      <Field label={field.name} error={error}>
+        <input
+          type="checkbox"
+          className="h-6 w-6"
+          checked={Boolean(current)}
+          onChange={(e) =>
+            onChange(setAtPath(value, field.path, e.target.checked))
+          }
+        />
+      </Field>
+    );
+  }
+
+  const inputType =
+    field.type === "integer" || field.type === "number" ? "number" : "text";
+
+  return (
+    <Field label={field.name} error={error}>
+      <Input
+        type={inputType}
+        min={field.minimum}
+        max={field.maximum}
+        value={current === undefined || current === null ? "" : String(current)}
+        onChange={(e) => {
+          const raw = e.currentTarget.value;
+          const next =
+            field.type === "integer"
+              ? raw === ""
+                ? undefined
+                : Number.parseInt(raw, 10)
+              : field.type === "number"
+                ? raw === ""
+                  ? undefined
+                  : Number(raw)
+                : raw;
+          onChange(setAtPath(value, field.path, next));
+        }}
+      />
+    </Field>
+  );
+}
+
+function JsonPane({
+  value,
+  onChange,
+  schema,
+}: {
+  readonly value: unknown;
+  readonly onChange: (value: unknown) => void;
+  readonly schema: Record<string, unknown> | null;
+}) {
+  const host = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const [parseError, setParseError] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (!host.current) return;
+    const start = valueToJsonText(value);
+    const state = EditorState.create({
+      doc: start,
+      extensions: [
+        lineNumbers(),
+        history(),
+        json(),
+        oneDark,
+        keymap.of([...defaultKeymap, ...historyKeymap]),
+        EditorView.updateListener.of((update) => {
+          if (!update.docChanged) return;
+          const text = update.state.doc.toString();
+          const parsed = parseJsonEditor(text);
+          if (!parsed.ok) {
+            setParseError(parsed.error);
+            return;
+          }
+          setParseError(undefined);
+          onChange(parsed.value);
+        }),
+        EditorView.theme({
+          "&": { fontSize: "13px", minHeight: "160px" },
+          ".cm-scroller": { fontFamily: "var(--oke-mono)" },
+        }),
+      ],
+    });
+    const view = new EditorView({ state, parent: host.current });
+    viewRef.current = view;
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+    // Mount once — external value sync is intentional one-way into the editor.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const local = schema ? validateContract(schema, value) : { ok: true, errors: [] };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div
+        ref={host}
+        role="textbox"
+        aria-label="Request JSON"
+        aria-multiline="true"
+        className="overflow-hidden border border-[var(--oke-line)]"
+      />
+      {parseError ? (
+        <p role="alert" className="text-xs text-[var(--oke-danger)]">
+          {parseError}
+        </p>
+      ) : null}
+      {!local.ok ? (
+        <ul className="text-xs text-[var(--oke-danger)]" aria-live="polite">
+          {local.errors.map((e) => (
+            <li key={`${e.path}:${e.message}`}>
+              {e.path}: {e.message}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * Dim helper for non-matching rows.
+ *
+ * @param props - match flag + children
+ */
+export function Dim({
+  match,
+  children,
+  className,
+}: {
+  readonly match: boolean;
+  readonly children: ReactNode;
+  readonly className?: string;
+}) {
+  return (
+    <div
+      className={clsx(className)}
+      style={match ? undefined : { opacity: "var(--oke-dim)" }}
+      data-dimmed={match ? undefined : "true"}
+    >
+      {children}
+    </div>
+  );
+}