Merge pull request #8 from nova-rey/codex/implement-spec-builder-mvp-features

nova-rey · web-flow · commit 3a97e69e339e · 2025-11-02T10:38:10.000-06:00
feat: Phase 2 repair — add Spec Builder MVP (types, forms, normalize, autosave, map) and update docs [v0.3.0-phase2-baseline]
diff --git a/README.md b/README.md
@@ -34,7 +34,7 @@ A modern, browser-based UI for **CrapsSim-Control (CSC)**.
 - Navigate to `/builder` to author a spec.
 - Use **Normalize** to validate/pretty-print via CSC.
 - Use **Import/Export** to move specs in/out.
-- Presets available: Molly, Contra (top-left).
+- Presets available: Molly, Contra (panel on the left).
 
 ## Repo Boundaries
 
diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
@@ -28,9 +28,9 @@
 - Response shape is normalized to `{ ok, status, data }` or `{ ok:false, status, message }`.
 - Mock mode serves JSON from `/mock-data/*` when the API is unavailable.
 ## Spec Builder (Phase 2)
-- Authoring types live in `src/spec/`.
+- Authoring types in `src/spec/`.
 - Conversion `authoring → draft` via `src/spec/convert.ts`.
-- `/builder` provides a navigator (spec/profiles/rules), editor forms, and an output panel with Normalize.
-- Persistence: localStorage autosave under a single workspace key.
-- Import/Export: JSON files for authoring or normalized output.
+- `/builder` provides navigator, editor forms, and an output panel with Normalize.
+- Persistence: localStorage autosave.
+- Import/Export: JSON for authoring or normalized output.
 - Visual map: read-only tree (profiles + rules).
diff --git a/src/components/builder/ProfileForm.tsx b/src/components/builder/ProfileForm.tsx
@@ -1,23 +1,22 @@
-import { BaseBet, Profile } from "../../spec/authoringTypes";
+import { AuthoringSpec, BaseBet, Profile } from "../../spec/authoringTypes";
 
 export default function ProfileForm({
+  spec,
   profile,
-  onChange,
-}: {
-  profile: Profile;
-  onChange: (p: Profile) => void;
-}) {
+  onChange
+}: { spec: AuthoringSpec; profile: Profile; onChange: (p: Profile) => void }) {
+  void spec;
   function updateBet(idx: number, patch: Partial<BaseBet>) {
     const copy = {
       ...profile,
-      base_bets: profile.base_bets.map((b, i) => (i === idx ? { ...b, ...patch } : b)),
+      base_bets: profile.base_bets.map((b, i) => (i === idx ? { ...b, ...patch } : b))
     };
     onChange(copy);
   }
   function addBet() {
     const copy = {
       ...profile,
-      base_bets: [...profile.base_bets, { kind: "place", number: 6, amount: 6, working_on_comeout: false }],
+      base_bets: [...profile.base_bets, { kind: "place", number: 6, amount: 6, working_on_comeout: false }]
     };
     onChange(copy);
   }
@@ -50,7 +49,7 @@ export default function ProfileForm({
                 <select
                   className="w-full border rounded px-2 py-1"
                   value={b.kind}
-                  onChange={(e) => updateBet(idx, { kind: e.target.value as BaseBet["kind"] })}
+                  onChange={(e) => updateBet(idx, { kind: e.target.value as any })}
                 >
                   <option>place</option>
                   <option>come</option>
@@ -67,7 +66,7 @@ export default function ProfileForm({
                   value={b.number ?? ""}
                   onChange={(e) =>
                     updateBet(idx, {
-                      number: e.target.value ? (Number(e.target.value) as BaseBet["number"]) : undefined,
+                      number: e.target.value ? (Number(e.target.value) as any) : undefined
                     })
                   }
                 >
diff --git a/src/components/builder/RuleForm.tsx b/src/components/builder/RuleForm.tsx
@@ -1,40 +1,35 @@
 import { Rule, RuleVerb } from "../../spec/authoringTypes";
 const verbs: RuleVerb[] = ["switch_profile", "press", "regress", "apply_policy"];
 
-export default function RuleForm({ value: rule, onChange }: { value: Rule; onChange: (r: Rule) => void }) {
-  function setArg(key: string, val: unknown) {
-    const args: Record<string, unknown> = { ...(rule.then.args ?? {}) };
-    if (val === undefined || val === "") {
-      delete args[key];
-    } else {
-      args[key] = val;
-    }
-    onChange({ ...rule, then: { ...rule.then, args } });
+export default function RuleForm({ value, onChange }: { value: Rule; onChange: (r: Rule) => void }) {
+  function setArg(k: string, v: any) {
+    const args = { ...(value.then.args ?? {}), [k]: v };
+    onChange({ ...value, then: { ...value.then, args } });
   }
   return (
     <div className="space-y-2 text-sm">
       <label className="block">
         <span className="block">Rule ID</span>
         <input
           className="w-full border rounded px-2 py-1"
-          value={rule.id}
-          onChange={(e) => onChange({ ...rule, id: e.target.value })}
+          value={value.id}
+          onChange={(e) => onChange({ ...value, id: e.target.value })}
         />
       </label>
       <label className="block">
         <span className="block">When (expression)</span>
         <input
           className="w-full border rounded px-2 py-1"
-          value={rule.when}
-          onChange={(e) => onChange({ ...rule, when: e.target.value })}
+          value={value.when}
+          onChange={(e) => onChange({ ...value, when: e.target.value })}
         />
       </label>
       <label className="block">
         <span className="block">Then (verb)</span>
         <select
           className="w-full border rounded px-2 py-1"
-          value={rule.then.verb}
-          onChange={(e) => onChange({ ...rule, then: { ...rule.then, verb: e.target.value as RuleVerb } })}
+          value={value.then.verb}
+          onChange={(e) => onChange({ ...value, then: { ...value.then, verb: e.target.value as any } })}
         >
           {verbs.map((v) => (
             <option key={v} value={v}>
@@ -48,26 +43,16 @@ export default function RuleForm({ value: rule, onChange }: { value: Rule; onCha
           <span className="block">Arg: target/policy</span>
           <input
             className="w-full border rounded px-2 py-1"
-            value={String((rule.then.args ?? {}).target ?? (rule.then.args ?? {}).policy ?? "")}
+            value={String((value.then.args ?? {}).target ?? (value.then.args ?? {}).policy ?? "")}
             onChange={(e) => setArg("target", e.target.value)}
           />
         </label>
         <label className="block">
           <span className="block">Arg: delta/factor</span>
           <input
             className="w-full border rounded px-2 py-1"
-            value={String((rule.then.args ?? {}).delta ?? (rule.then.args ?? {}).factor ?? "")}
-            onChange={(e) => {
-              const raw = e.target.value;
-              const num = Number(raw);
-              if (raw.trim() === "") {
-                setArg("delta", undefined);
-              } else if (Number.isFinite(num)) {
-                setArg("delta", num);
-              } else {
-                setArg("delta", raw);
-              }
-            }}
+            value={String((value.then.args ?? {}).delta ?? (value.then.args ?? {}).factor ?? "")}
+            onChange={(e) => setArg("delta", Number(e.target.value) || e.target.value)}
           />
         </label>
       </div>
@@ -77,16 +62,16 @@ export default function RuleForm({ value: rule, onChange }: { value: Rule; onCha
           <input
             type="number"
             className="w-full border rounded px-2 py-1"
-            value={rule.cooldown ?? ""}
-            onChange={(e) => onChange({ ...rule, cooldown: n(e.target.value) })}
+            value={value.cooldown ?? ""}
+            onChange={(e) => onChange({ ...value, cooldown: n(e.target.value) })}
           />
         </label>
         <label className="block">
           <span className="block">Scope</span>
           <select
             className="w-full border rounded px-2 py-1"
-            value={rule.scope ?? ""}
-            onChange={(e) => onChange({ ...rule, scope: (e.target.value as Rule["scope"]) || undefined })}
+            value={value.scope ?? ""}
+            onChange={(e) => onChange({ ...value, scope: (e.target.value as any) || undefined })}
           >
             <option value="">—</option>
             <option>roll</option>
@@ -98,8 +83,8 @@ export default function RuleForm({ value: rule, onChange }: { value: Rule; onCha
           <span className="block">Guards (csv)</span>
           <input
             className="w-full border rounded px-2 py-1"
-            value={(rule.guards ?? []).join(",")}
-            onChange={(e) => onChange({ ...rule, guards: csv(e.target.value) })}
+            value={(value.guards ?? []).join(",")}
+            onChange={(e) => onChange({ ...value, guards: csv(e.target.value) })}
           />
         </label>
       </div>
@@ -111,8 +96,5 @@ function n(v: string) {
   return Number.isFinite(x) ? x : undefined;
 }
 function csv(v: string) {
-  return v
-    .split(",")
-    .map((s) => s.trim())
-    .filter(Boolean);
+  return v.split(",").map((s) => s.trim()).filter(Boolean);
 }
diff --git a/src/components/builder/TableForm.tsx b/src/components/builder/TableForm.tsx
@@ -26,9 +26,7 @@ export default function TableForm({ value, onChange }: { value: TableSettings; o
         <select
           className="w-full border rounded px-2 py-1"
           value={value.odds_profile ?? "3-4-5x"}
-          onChange={(e) =>
-            onChange({ ...value, odds_profile: e.target.value as TableSettings["odds_profile"] })
-          }
+          onChange={(e) => onChange({ ...value, odds_profile: e.target.value as any })}
         >
           {profiles.map((p) => (
             <option key={p} value={p}>
diff --git a/src/routes/Builder.tsx b/src/routes/Builder.tsx
@@ -1,4 +1,4 @@
-import { useState, type ChangeEvent } from "react";
+import { useState } from "react";
 import { useBuilderStore } from "../state/builderStore";
 import Navigator from "../components/builder/Navigator";
 import IdentityForm from "../components/builder/IdentityForm";
@@ -29,28 +29,21 @@ export default function Builder() {
       setNormalized(r.data.normalized);
       setWarnings(r.data.warnings ?? []);
     } else {
-      const detailErrors = (r.details as { errors?: string[] } | undefined)?.errors ?? [];
-      setErrors([`${r.status}: ${r.message}`, ...detailErrors]);
+      setErrors([`${r.status}: ${r.message}`].concat((r as any).details?.errors ?? []));
     }
   }
 
-  function importJson(e: ChangeEvent<HTMLInputElement>) {
+  function importJson(e: React.ChangeEvent<HTMLInputElement>) {
     const file = e.target.files?.[0];
     if (!file) return;
     const reader = new FileReader();
     reader.onload = () => {
       try {
         const obj = JSON.parse(String(reader.result));
-        // Minimal shape check
-        const candidate = obj as Partial<AuthoringSpec>;
-        if (!candidate || typeof candidate !== "object") throw new Error("Invalid authoring spec shape.");
-        if (!candidate.identity || !candidate.behavior?.rules || !candidate.profiles) {
-          throw new Error("Invalid authoring spec shape.");
-        }
-        setSpec(candidate as AuthoringSpec);
-      } catch (err: unknown) {
-        const message = err instanceof Error ? err.message : String(err);
-        setErrors([`Import failed: ${message}`]);
+        if (!obj.identity || !obj.behavior?.rules || !obj.profiles) throw new Error("Invalid authoring spec shape.");
+        setSpec(obj as AuthoringSpec);
+      } catch (err: any) {
+        setErrors([`Import failed: ${err.message}`]);
       }
     };
     reader.readAsText(file);
@@ -69,10 +62,7 @@ export default function Builder() {
 
   function loadPreset(id: string) {
     const found = PRESETS.find((p) => p.id === id);
-    if (found) {
-      const copy = JSON.parse(JSON.stringify(found.spec)) as AuthoringSpec;
-      setSpec(copy);
-    }
+    if (found) setSpec(JSON.parse(JSON.stringify(found.spec)));
   }
 
   const currentProfile = selected.kind === "profile" ? spec.profiles.find((p) => p.id === selected.id) : undefined;
@@ -113,6 +103,7 @@ export default function Builder() {
         )}
         {selected.kind === "profile" && currentProfile && (
           <ProfileForm
+            spec={spec}
             profile={currentProfile}
             onChange={(p) => setSpec((s) => ({ ...s, profiles: s.profiles.map((x) => (x.id === p.id ? p : x)) }))}
           />
@@ -123,7 +114,10 @@ export default function Builder() {
             onChange={(r) =>
               setSpec((s) => ({
                 ...s,
-                behavior: { ...s.behavior, rules: s.behavior.rules.map((x) => (x.id === r.id ? r : x)) },
+                behavior: {
+                  ...s.behavior,
+                  rules: s.behavior.rules.map((x) => (x.id === r.id ? r : x))
+                }
               }))
             }
           />
diff --git a/src/spec/authoringTypes.ts b/src/spec/authoringTypes.ts
@@ -29,7 +29,7 @@ export type RuleVerb = "switch_profile" | "press" | "regress" | "apply_policy";
 
 export interface Rule {
   id: ID;
-  when: string; // simple expression string (evaluated by CSC)
+  when: string;
   then: { verb: RuleVerb; args?: Record<string, unknown> };
   cooldown?: number;
   scope?: "roll" | "hand" | "session";
diff --git a/src/spec/convert.ts b/src/spec/convert.ts
@@ -1,23 +1,21 @@
-import { AuthoringSpec, Rule } from "./authoringTypes";
+import { AuthoringSpec } from "./authoringTypes";
 
 export function toDraft(spec: AuthoringSpec): Record<string, unknown> {
-  // Minimal coercion: drop undefineds and keep keys CSC expects.
-  const clean = JSON.parse(JSON.stringify(spec)) as AuthoringSpec;
-  const rules: Rule[] = Array.isArray(clean.behavior?.rules) ? clean.behavior.rules : [];
+  const clean = JSON.parse(JSON.stringify(spec));
   return {
     identity: clean.identity ?? {},
     table: clean.table ?? {},
     profiles: Array.isArray(clean.profiles) ? clean.profiles : [],
     behavior: {
       schema_version: "1.0",
-      rules: rules.map((rule) => ({
-        id: rule.id,
-        when: rule.when,
-        then: rule.then,
-        cooldown: rule.cooldown ?? undefined,
-        scope: rule.scope ?? undefined,
-        guards: rule.guards ?? undefined,
-      })),
-    },
+      rules: (clean.behavior?.rules ?? []).map((r: any) => ({
+        id: r.id,
+        when: r.when,
+        then: r.then,
+        cooldown: r.cooldown ?? undefined,
+        scope: r.scope ?? undefined,
+        guards: r.guards ?? undefined
+      }))
+    }
   };
 }
diff --git a/src/state/builderStore.ts b/src/state/builderStore.ts
@@ -14,7 +14,7 @@ export function useBuilderStore() {
     }
   });
   const [selected, setSelected] = useState<{ kind: "identity" | "table" | "profile" | "rule"; id?: string }>({
-    kind: "identity",
+    kind: "identity"
   });
 
   const first = useRef(true);

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ export function useBuilderStore() {`
`14`	`14`	`}`
`15`	`15`	`});`
`16`	`16`	`const [selected, setSelected] = useState<{ kind: "identity" \| "table" \| "profile" \| "rule"; id?: string }>({`
`17`		`- kind: "identity",`
	`17`	`+ kind: "identity"`
`18`	`18`	`});`
`19`	`19`
`20`	`20`	`const first = useRef(true);`