@wyattjoh/demur 0.5.0 → 0.7.0

package/src/training-review-tui.tsx

@@ -12,15 +12,22 @@ import {
   estimateInputCostUsd,
   formatUsd,
 } from "../extensions/demur/cost-tracker.ts";
+import type { DemurSettings } from "../extensions/demur/settings.ts";
 import type {
+  TrainingCorrectionReason,
   TrainingReview,
   TrainingReviewInput,
 } from "../extensions/demur/training-store.ts";
+import {
+  changeDemurSetting,
+  type DemurSettingKey,
+} from "./settings-model.ts";
 import {
   buildTrainingReviewEntries,
   createTrainingReviewInput,
   filterTrainingReviewEntries,
   getLatestTrainingReview,
+  getTrainingCorrectionReason,
   getTrainingReviewFilter,
   type TrainingReviewEntry,
   type TrainingReviewFilter,
@@ -38,8 +45,11 @@ const COLORS = {
   text: "#eceff4",
   muted: "#8f98a8",
   allow: "#a3be8c",
+  allowMuted: "#78906a",
   ask: "#ebcb8b",
+  askMuted: "#a28f68",
   deny: "#bf616a",
+  denyMuted: "#87515a",
   selection: "#2e3440",
   error: "#ff6b7a",
 } as const;
@@ -55,6 +65,48 @@ const FILTERS: ReadonlyArray<{
   { value: "deny", label: "deny" },
 ];
 
+const CORRECTION_REASONS: ReadonlyArray<{
+  value: TrainingCorrectionReason;
+  label: string;
+}> = [
+  { value: "inert-or-read-only", label: "Command is inert or read-only" },
+  { value: "sensitive-data", label: "Sensitive-data judgment" },
+  { value: "security-boundary", label: "Security-boundary judgment" },
+  { value: "recoverability", label: "Recoverability judgment" },
+  { value: "shared-infrastructure", label: "Local versus shared target" },
+  { value: "blast-radius", label: "Blast-radius judgment" },
+  { value: "static-uncertainty", label: "Static uncertainty gate" },
+  { value: "missing-context", label: "Model was missing objective context" },
+  { value: "service-failure", label: "TypeSafe or guard service failure" },
+];
+
+const SECTIONS: ReadonlyArray<{ value: AppSection; label: string }> = [
+  { value: "reviews", label: "Reviews" },
+  { value: "settings", label: "Settings" },
+];
+
+const SETTING_ROWS: ReadonlyArray<{
+  key: DemurSettingKey;
+  label: string;
+  description: string;
+}> = [
+  {
+    key: "mode",
+    label: "Operating mode",
+    description: "Enforce decisions, observe passively, or bypass the guard.",
+  },
+  {
+    key: "training",
+    label: "Training capture",
+    description: "Append full evaluations for later human review.",
+  },
+  {
+    key: "failurePolicy",
+    label: "Failure policy",
+    description: "Action when no trustworthy judgment is available.",
+  },
+];
+
 /**
  * Summary returned after an interactive training-review session.
  */
@@ -66,8 +118,10 @@ export type TrainingReviewTuiResult = {
 
 type TrainingReviewAppProps = {
   snapshot: TrainingReviewSnapshot;
+  settings: DemurSettings;
   reloadSnapshot(): Promise<TrainingReviewSnapshot>;
   recordReview(input: TrainingReviewInput): Promise<TrainingReview>;
+  saveSettings(settings: DemurSettings): Promise<void>;
   pollIntervalMs: number | undefined;
   onExit(result: TrainingReviewTuiResult): void;
 };
@@ -75,9 +129,18 @@ type TrainingReviewAppProps = {
 type NoteEditorState = {
   recordId: string;
   expectedDecision: Decision;
+  correctionReason: TrainingCorrectionReason | undefined;
 };
 
-type FocusTarget = "tabs" | "filter" | "queue" | "detail";
+type AppSection = "reviews" | "settings";
+
+type FocusTarget =
+  | "sections"
+  | "tabs"
+  | "filter"
+  | "queue"
+  | "detail"
+  | "settings";
 
 /**
  * Render the interactive historical training-review queue.
@@ -93,6 +156,11 @@ export function TrainingReviewApp(
   const [snapshot, setSnapshot] = useState<TrainingReviewSnapshot>(
     props.snapshot,
   );
+  const [section, setSection] = useState<AppSection>("reviews");
+  const [settings, setSettings] = useState<DemurSettings>(props.settings);
+  const [selectedSettingIndex, setSelectedSettingIndex] = useState(0);
+  const [savingSettings, setSavingSettings] = useState(false);
+  const [settingsError, setSettingsError] = useState<string | undefined>();
   const [activeFilter, setActiveFilter] = useState<TrainingReviewFilter>(
     "all",
   );
@@ -147,7 +215,7 @@ export function TrainingReviewApp(
     : Math.max(7, Math.min(11, Math.floor(height * 0.32)));
   const queuePageSize = Math.max(
     1,
-    Math.floor((horizontal ? height - 13 : queueSize - 2) / 2),
+    Math.floor((horizontal ? height - 16 : queueSize - 2) / 2),
   );
   useEffect(() => {
     const timer = setTimeout(() => setReady(true), 250);
@@ -204,14 +272,39 @@ export function TrainingReviewApp(
     props.onExit(nextResult);
   };
 
+  const persistSetting = async (
+    key: DemurSettingKey,
+    direction: number,
+  ) => {
+    if (savingSettings) return;
+    const nextSettings = changeDemurSetting(settings, key, direction);
+    if (nextSettings === settings) return;
+
+    setSavingSettings(true);
+    setSettingsError(undefined);
+    try {
+      await props.saveSettings(nextSettings);
+      setSettings(nextSettings);
+    } catch (cause: unknown) {
+      setSettingsError(errorDetail(cause));
+    } finally {
+      setSavingSettings(false);
+    }
+  };
+
   const persistDecision = async (
     entry: TrainingReviewEntry,
     expectedDecision: Decision,
+    correctionReason: TrainingCorrectionReason | undefined,
     note: string | undefined,
   ) => {
     if (saving) return;
     const previous = getLatestTrainingReview(entry);
-    if (previous?.expectedDecision === expectedDecision) {
+    if (
+      previous?.expectedDecision === expectedDecision &&
+      correctionReason === undefined &&
+      note === undefined
+    ) {
       setNoteEditor(undefined);
       return;
     }
@@ -221,7 +314,12 @@ export function TrainingReviewApp(
     const corrected = expectedDecision !== entry.record.verdict.decision;
     try {
       const review = await props.recordReview(
-        createTrainingReviewInput(entry.record, expectedDecision, note),
+        createTrainingReviewInput(
+          entry.record,
+          expectedDecision,
+          correctionReason,
+          note,
+        ),
       );
       setSnapshot((current) =>
         current.reviews.some((existing) =>
@@ -252,13 +350,14 @@ export function TrainingReviewApp(
   const chooseDecision = (decision: Decision) => {
     if (selected === undefined || saving) return;
     if (decision === selected.record.verdict.decision) {
-      void persistDecision(selected, decision, undefined);
+      void persistDecision(selected, decision, undefined, undefined);
       return;
     }
     setError(undefined);
     setNoteEditor({
       recordId: selected.record.id,
       expectedDecision: decision,
+      correctionReason: undefined,
     });
   };
 
@@ -317,8 +416,85 @@ export function TrainingReviewApp(
         key.preventDefault();
         setNoteEditor(undefined);
         setError(undefined);
-      } else if (key.name === "tab") {
+        return;
+      }
+
+      if (noteEditor.correctionReason === undefined) {
+        const reason = correctionReasonForKey(key.name, key.sequence);
+        if (reason !== undefined) {
+          key.preventDefault();
+          setNoteEditor({ ...noteEditor, correctionReason: reason });
+        }
+        return;
+      }
+
+      if (key.name === "tab") key.preventDefault();
+      return;
+    }
+
+    const sectionKey = key.sequence || key.name;
+    if (focus !== "filter" && (sectionKey === "[" || sectionKey === "]")) {
+      key.preventDefault();
+      const nextSection = sectionKey === "[" ? "reviews" : "settings";
+      setSection(nextSection);
+      setFocus(nextSection === "reviews" ? "tabs" : "settings");
+      return;
+    }
+
+    if (focus === "sections") {
+      if (key.name === "left" || key.name === "right") {
+        key.preventDefault();
+        setSection((current) =>
+          current === "reviews" ? "settings" : "reviews"
+        );
+        return;
+      }
+      if (key.name === "down" || key.name === "return") {
+        key.preventDefault();
+        setFocus(section === "reviews" ? "tabs" : "settings");
+        return;
+      }
+      if (key.name === "q" || key.name === "escape") {
+        key.preventDefault();
+        finish(result);
+      }
+      return;
+    }
+
+    if (section === "settings") {
+      if (key.name === "q" || key.name === "escape") {
+        key.preventDefault();
+        finish(result);
+        return;
+      }
+      if (key.name === "up") {
+        key.preventDefault();
+        if (selectedSettingIndex === 0) {
+          setFocus("sections");
+        } else {
+          setSelectedSettingIndex((current) => current - 1);
+        }
+        return;
+      }
+      if (key.name === "down") {
+        key.preventDefault();
+        setSelectedSettingIndex((current) =>
+          Math.min(current + 1, SETTING_ROWS.length - 1)
+        );
+        return;
+      }
+      if (
+        key.name === "left" ||
+        key.name === "right" ||
+        key.name === "return" ||
+        key.name === "space" ||
+        key.sequence === " "
+      ) {
         key.preventDefault();
+        const row = SETTING_ROWS[selectedSettingIndex];
+        if (row !== undefined) {
+          void persistSetting(row.key, key.name === "left" ? -1 : 1);
+        }
       }
       return;
     }
@@ -330,6 +506,11 @@ export function TrainingReviewApp(
     }
 
     if (focus === "tabs") {
+      if (key.name === "up") {
+        key.preventDefault();
+        setFocus("sections");
+        return;
+      }
       if (key.name === "left" || key.name === "right") {
         key.preventDefault();
         moveFilterSelection(key.name === "left" ? -1 : 1);
@@ -461,6 +642,42 @@ export function TrainingReviewApp(
       </box>
 
       <box
+        title=" View "
+        titleColor={focus === "sections" ? COLORS.accent : COLORS.muted}
+        flexDirection="row"
+        gap={1}
+        border
+        borderColor={focus === "sections" ? COLORS.accent : COLORS.border}
+        backgroundColor={COLORS.panel}
+        height={3}
+        paddingLeft={1}
+        paddingRight={1}
+      >
+        {SECTIONS.map((candidate) => {
+          const active = candidate.value === section;
+          return (
+            <text
+              key={candidate.value}
+              fg={active ? COLORS.accent : COLORS.muted}
+              bg={active ? COLORS.selection : COLORS.background}
+              onMouseDown={() => {
+                setSection(candidate.value);
+                setFocus("sections");
+              }}
+            >
+              {` ${candidate.label} `}
+            </text>
+          );
+        })}
+        <text fg={COLORS.muted}>[ / ] switch · Up to focus · ←/→ switch</text>
+      </box>
+
+      {section === "reviews"
+        ? (
+          <>
+      <box
+        title=" Review status "
+        titleColor={focus === "tabs" ? COLORS.accent : COLORS.muted}
         flexDirection="row"
         gap={1}
         border
@@ -568,13 +785,28 @@ export function TrainingReviewApp(
                         setFocus("queue");
                       }}
                     >
-                      <text fg={entrySelected
-                        ? statusColor(getTrainingReviewFilter(entry))
-                        : COLORS.text}>
+                      <text
+                        fg={entrySelected
+                          ? statusColor(getTrainingReviewFilter(entry))
+                          : COLORS.text}
+                        wrapMode="none"
+                        truncate
+                      >
                         {`${entrySelected ? "▶" : " "} ${summarizeCommand(entry.record.command, horizontal ? queueSize - 6 : width - 8)}`}
                       </text>
-                      <text fg={entrySelected ? COLORS.accent : COLORS.muted}>
-                        {`  ${statusLabel(getTrainingReviewFilter(entry))} · ${formatEvaluationCost(entry)} · ${entry.reviews.length}r`}
+                      <text
+                        fg={entrySelected ? COLORS.accent : COLORS.muted}
+                        wrapMode="none"
+                        truncate
+                      >
+                        {`  ${statusLabel(getTrainingReviewFilter(entry))} · `}
+                        <span
+                          fg={mutedDecisionColor(
+                            entry.record.verdict.decision,
+                          )}
+                        >
+                          {entry.record.verdict.decision.toUpperCase()}
+                        </span>
                       </text>
                     </box>
                   );
@@ -654,6 +886,13 @@ export function TrainingReviewApp(
                           <text fg={decisionColor(review.expectedDecision)}>
                             {`${index + 1}. ${review.expectedDecision.toUpperCase()} · ${review.reviewedAt}`}
                           </text>
+                          {getTrainingCorrectionReason(review) === undefined
+                            ? null
+                            : (
+                              <text fg={COLORS.muted} wrapMode="word">
+                                {`Reason: ${correctionReasonLabel(getTrainingCorrectionReason(review)!)}`}
+                              </text>
+                            )}
                           {review.note === undefined
                             ? null
                             : <text fg={COLORS.text} wrapMode="word">{review.note}</text>}
@@ -667,31 +906,52 @@ export function TrainingReviewApp(
       </box>
 
       {noteEditor !== undefined && editingEntry !== undefined
-        ? (
-          <box
-            title={` Review revision: ${statusLabel(getTrainingReviewFilter(editingEntry))} → ${noteEditor.expectedDecision} `}
-            titleColor={decisionColor(noteEditor.expectedDecision)}
-            border
-            borderColor={decisionColor(noteEditor.expectedDecision)}
-            height={5}
-            paddingLeft={1}
-            paddingRight={1}
-            flexDirection="column"
-          >
-            <input
-              placeholder="Optional correction note — Enter saves, Esc cancels"
-              focused
-              onSubmit={(note) => {
-                void persistDecision(
-                  editingEntry,
-                  noteEditor.expectedDecision,
-                  typeof note === "string" ? note : undefined,
-                );
-              }}
-            />
-            <text fg={COLORS.muted}>Enter save revision · Esc cancel</text>
-          </box>
-        )
+        ? noteEditor.correctionReason === undefined
+          ? (
+            <box
+              title={` Why ${statusLabel(getTrainingReviewFilter(editingEntry))} → ${noteEditor.expectedDecision}? `}
+              titleColor={decisionColor(noteEditor.expectedDecision)}
+              border
+              borderColor={decisionColor(noteEditor.expectedDecision)}
+              height={CORRECTION_REASONS.length + 3}
+              paddingLeft={1}
+              paddingRight={1}
+              flexDirection="column"
+            >
+              {CORRECTION_REASONS.map((reason, index) => (
+                <text key={reason.value} fg={COLORS.text}>
+                  {`${index + 1}. ${reason.label}`}
+                </text>
+              ))}
+              <text fg={COLORS.muted}>1–9 select reason · Esc cancel</text>
+            </box>
+          )
+          : (
+            <box
+              title={` ${correctionReasonLabel(noteEditor.correctionReason)} `}
+              titleColor={decisionColor(noteEditor.expectedDecision)}
+              border
+              borderColor={decisionColor(noteEditor.expectedDecision)}
+              height={5}
+              paddingLeft={1}
+              paddingRight={1}
+              flexDirection="column"
+            >
+              <input
+                placeholder="Optional correction note — Enter saves, Esc cancels"
+                focused
+                onSubmit={(note) => {
+                  void persistDecision(
+                    editingEntry,
+                    noteEditor.expectedDecision,
+                    noteEditor.correctionReason,
+                    typeof note === "string" ? note : undefined,
+                  );
+                }}
+              />
+              <text fg={COLORS.muted}>Enter save revision · Esc cancel</text>
+            </box>
+          )
         : null}
 
       {error === undefined
@@ -704,7 +964,7 @@ export function TrainingReviewApp(
       <box flexDirection="row" justifyContent="space-between">
         <text fg={COLORS.muted}>
           {focus === "tabs"
-            ? "←/→ select status · Down/Enter filter · Tab rotates"
+            ? "←/→ select status · Up sections · Down/Enter filter · Tab rotates"
             : focus === "filter"
             ? "Type to fuzzy-search cwd · Up tabs · Down/Enter queue · Tab rotates"
             : focus === "detail"
@@ -715,6 +975,81 @@ export function TrainingReviewApp(
           {saving ? "Saving…" : "q/Esc quit"}
         </text>
       </box>
+          </>
+        )
+        : (
+          <>
+            <box
+              title=" Pi extension settings "
+              titleColor={COLORS.accent}
+              border
+              borderColor={COLORS.accent}
+              backgroundColor={COLORS.panel}
+              flexGrow={1}
+              flexDirection="column"
+              padding={1}
+              gap={1}
+            >
+              <text fg={COLORS.muted} wrapMode="word">
+                Changes are saved globally and picked up by Pi before its next Bash call.
+              </text>
+              {SETTING_ROWS.map((row, index) => {
+                const selectedRow = index === selectedSettingIndex;
+                const unavailable = row.key === "training" &&
+                  settings.mode === "disabled";
+                return (
+                  <box
+                    key={row.key}
+                    flexDirection="column"
+                    backgroundColor={selectedRow
+                      ? COLORS.selection
+                      : COLORS.panel}
+                    paddingLeft={1}
+                    paddingRight={1}
+                    onMouseDown={() => {
+                      setSelectedSettingIndex(index);
+                      setFocus("settings");
+                    }}
+                  >
+                    <box flexDirection="row">
+                      <text
+                        width={24}
+                        fg={selectedRow ? COLORS.accent : COLORS.text}
+                      >
+                        {`${selectedRow ? "▶" : " "} ${row.label}`}
+                      </text>
+                      <text fg={unavailable ? COLORS.muted : COLORS.allow}>
+                        {settingDisplayValue(settings, row.key)}
+                      </text>
+                    </box>
+                    <text fg={COLORS.muted} wrapMode="word">
+                      {unavailable
+                        ? "Unavailable while the operating mode is disabled."
+                        : row.description}
+                    </text>
+                  </box>
+                );
+              })}
+            </box>
+
+            {settingsError === undefined
+              ? null
+              : (
+                <text fg={COLORS.error}>
+                  Could not save settings: {settingsError}
+                </text>
+              )}
+
+            <box flexDirection="row" justifyContent="space-between">
+              <text fg={COLORS.muted}>
+                ↑/↓ select · ←/→ change · Enter/Space next · [ reviews
+              </text>
+              <text fg={savingSettings ? COLORS.ask : COLORS.muted}>
+                {savingSettings ? "Saving…" : "q/Esc quit"}
+              </text>
+            </box>
+          </>
+        )}
     </box>
   );
 }
@@ -766,14 +1101,18 @@ function JudgmentsTable(props: { entry: TrainingReviewEntry }): React.ReactNode
  * Launch OpenTUI for complete training history and restore the terminal on exit.
  *
  * @param snapshot - Complete training state to present initially
+ * @param settings - Current globally persisted Pi extension settings
  * @param reloadSnapshot - Polling callback that returns current training state
  * @param recordReview - Persistence callback for review revisions
+ * @param saveSettings - Atomic persistence callback for Pi extension settings
  * @returns Counts for the completed interactive session
  */
 export async function runTrainingReviewTui(
   snapshot: TrainingReviewSnapshot,
+  settings: DemurSettings,
   reloadSnapshot: () => Promise<TrainingReviewSnapshot>,
   recordReview: (input: TrainingReviewInput) => Promise<TrainingReview>,
+  saveSettings: (settings: DemurSettings) => Promise<void>,
 ): Promise<TrainingReviewTuiResult> {
   const renderer = await createCliRenderer({
     exitOnCtrlC: false,
@@ -796,8 +1135,10 @@ export async function runTrainingReviewTui(
     root.render(
       <TrainingReviewApp
         snapshot={snapshot}
+        settings={settings}
         reloadSnapshot={reloadSnapshot}
         recordReview={recordReview}
+        saveSettings={saveSettings}
         pollIntervalMs={undefined}
         onExit={finish}
       />,
@@ -805,6 +1146,15 @@ export async function runTrainingReviewTui(
   });
 }
 
+function settingDisplayValue(
+  settings: DemurSettings,
+  key: DemurSettingKey,
+): string {
+  if (key === "mode") return settings.mode;
+  if (key === "training") return settings.training ? "on" : "off";
+  return settings.failurePolicy;
+}
+
 function countByFilter(
   entries: ReadonlyArray<TrainingReviewEntry>,
 ): Record<TrainingReviewFilter, number> {
@@ -847,6 +1197,19 @@ function decisionForKey(
   return undefined;
 }
 
+function correctionReasonForKey(
+  name: string,
+  sequence: string,
+): TrainingCorrectionReason | undefined {
+  const index = Number(sequence || name) - 1;
+  return Number.isInteger(index) ? CORRECTION_REASONS[index]?.value : undefined;
+}
+
+function correctionReasonLabel(reason: TrainingCorrectionReason): string {
+  return CORRECTION_REASONS.find((candidate) => candidate.value === reason)
+    ?.label ?? reason;
+}
+
 function statusLabel(filter: TrainingReviewFilter): string {
   return {
     all: "ALL",
@@ -871,6 +1234,14 @@ function decisionColor(decision: Decision): string {
   }[decision];
 }
 
+function mutedDecisionColor(decision: Decision): string {
+  return {
+    allow: COLORS.allowMuted,
+    ask: COLORS.askMuted,
+    deny: COLORS.denyMuted,
+  }[decision];
+}
+
 function emptyTitle(
   entries: ReadonlyArray<TrainingReviewEntry>,
   cwdQuery: string,
@@ -928,13 +1299,6 @@ function judgmentRows(
   ];
 }
 
-function formatEvaluationCost(entry: TrainingReviewEntry): string {
-  const inputTokens = entry.record.verdict.usage?.inputTokens;
-  return inputTokens === undefined
-    ? "cost n/a"
-    : formatUsd(estimateInputCostUsd(inputTokens));
-}
-
 function formatUsage(entry: TrainingReviewEntry): string {
   const usage = entry.record.verdict.usage;
   return usage === undefined