muonroi-cli 1.2.0

package/src/ui/plan.tsx

@@ -0,0 +1,346 @@
+import type { Plan, PlanQuestion } from "../types/index";
+import type { Theme } from "./theme";
+
+export type PlanAnswers = Record<string, string | string[]>;
+
+/* ── Plan Steps (inline in chat) ───────────────────────────── */
+
+interface PlanViewProps {
+  plan: Plan;
+  t: Theme;
+}
+
+export function PlanView({ plan, t }: PlanViewProps) {
+  return (
+    <box paddingLeft={3} marginTop={1} flexShrink={0} flexDirection="column">
+      <box marginBottom={1}>
+        <text>
+          <span style={{ fg: t.planTitle }}>
+            <b>
+              {"◆ "}
+              {plan.title}
+            </b>
+          </span>
+        </text>
+      </box>
+      <box paddingLeft={2} marginBottom={1}>
+        <text fg={t.textMuted}>{plan.summary}</text>
+      </box>
+      {plan.steps.map((step, i) => (
+        <box key={`step-${step.title}`} paddingLeft={2} marginBottom={0} flexDirection="column">
+          <text>
+            <span style={{ fg: t.planStepNum }}>{`${i + 1}. `}</span>
+            <span style={{ fg: t.planStepTitle }}>
+              <b>{step.title}</b>
+            </span>
+          </text>
+          <box paddingLeft={3}>
+            <text fg={t.planStepDesc}>{step.description}</text>
+          </box>
+          {step.filePaths && step.filePaths.length > 0 && (
+            <box paddingLeft={3}>
+              <text>
+                {step.filePaths.map((fp, j) => (
+                  <span key={fp} style={{ fg: t.planStepFile }}>
+                    {j > 0 ? ", " : ""}
+                    {fp}
+                  </span>
+                ))}
+              </text>
+            </box>
+          )}
+        </box>
+      ))}
+    </box>
+  );
+}
+
+/* ── Plan Questions Panel (OpenCode-style tabbed inline) ──── */
+
+const SPLIT = {
+  topLeft: "",
+  bottomLeft: "",
+  vertical: "┃",
+  topRight: "",
+  bottomRight: "",
+  horizontal: " ",
+  bottomT: "",
+  topT: "",
+  cross: "",
+  leftT: "",
+  rightT: "",
+};
+
+export interface PlanQuestionsState {
+  tab: number;
+  selected: number;
+  answers: PlanAnswers;
+  customInputs: Record<string, string>;
+  editing: boolean;
+}
+
+export function initialPlanQuestionsState(): PlanQuestionsState {
+  return {
+    tab: 0,
+    selected: 0,
+    answers: {},
+    customInputs: {},
+    editing: false,
+  };
+}
+
+interface PlanQuestionsPanelProps {
+  t: Theme;
+  questions: PlanQuestion[];
+  state: PlanQuestionsState;
+}
+
+export function PlanQuestionsPanel({ t, questions, state }: PlanQuestionsPanelProps) {
+  const isSingle = questions.length === 1 && questions[0]?.type !== "multiselect";
+  const isConfirmTab = !isSingle && state.tab === questions.length;
+  const q = questions[state.tab];
+
+  return (
+    <box
+      flexDirection="column"
+      border={["left"]}
+      customBorderChars={SPLIT}
+      borderColor={t.planBorder}
+      marginTop={1}
+      paddingLeft={2}
+      paddingRight={2}
+      paddingTop={1}
+      paddingBottom={1}
+      backgroundColor={t.backgroundPanel}
+    >
+      {/* Tabs */}
+      {!isSingle && (
+        <box flexDirection="row" gap={2} marginBottom={1} flexShrink={0}>
+          {questions.map((q, i) => {
+            const isActive = i === state.tab;
+            const isAnswered = hasAnswer(state.answers, q);
+            const label = tabLabel(q);
+            return (
+              <text key={q.id}>
+                <span
+                  style={{
+                    fg: isActive ? t.planTitle : isAnswered ? t.planOptionCheck : t.textMuted,
+                  }}
+                >
+                  {isActive ? <b>{label}</b> : label}
+                  {isAnswered && !isActive ? " ✓" : ""}
+                </span>
+              </text>
+            );
+          })}
+          <text>
+            <span
+              style={{
+                fg: isConfirmTab ? t.planTitle : t.textMuted,
+              }}
+            >
+              {isConfirmTab ? <b>{"Confirm"}</b> : "Confirm"}
+            </span>
+          </text>
+        </box>
+      )}
+
+      {/* Question body */}
+      {isConfirmTab ? (
+        <ConfirmView t={t} questions={questions} answers={state.answers} />
+      ) : q ? (
+        <QuestionBody t={t} question={q} state={state} />
+      ) : null}
+
+      {/* Footer hints */}
+      <box flexDirection="row" gap={3} marginTop={1} flexShrink={0}>
+        {!isSingle && (
+          <text>
+            <span style={{ fg: t.text }}>{"⇆"}</span>
+            <span style={{ fg: t.planHint }}>{" tab"}</span>
+          </text>
+        )}
+        <text>
+          <span style={{ fg: t.text }}>{"↑↓"}</span>
+          <span style={{ fg: t.planHint }}>{" select"}</span>
+        </text>
+        <text>
+          <span style={{ fg: t.text }}>{"enter"}</span>
+          <span style={{ fg: t.planHint }}>
+            {isConfirmTab ? " submit" : q?.type === "multiselect" ? " toggle" : isSingle ? " submit" : " confirm"}
+          </span>
+        </text>
+        <text>
+          <span style={{ fg: t.text }}>{"esc"}</span>
+          <span style={{ fg: t.planHint }}>{" dismiss"}</span>
+        </text>
+      </box>
+    </box>
+  );
+}
+
+/* ── Question Body ────────────────────────────────────────── */
+
+function QuestionBody({ t, question: q, state }: { t: Theme; question: PlanQuestion; state: PlanQuestionsState }) {
+  const isMulti = q.type === "multiselect";
+  const options = q.options ?? [];
+  const showCustom = q.type !== "text";
+  const totalItems = options.length + (showCustom ? 1 : 0);
+  const isOnCustom = showCustom && state.selected === options.length;
+  const customText = state.customInputs[q.id] ?? "";
+
+  return (
+    <box flexDirection="column">
+      {/* Question text */}
+      <box marginBottom={1}>
+        <text fg={t.planQuestionText}>
+          <b>{q.question}</b>
+          {isMulti ? <span style={{ fg: t.textMuted }}>{" (select all that apply)"}</span> : null}
+        </text>
+      </box>
+
+      {q.type === "text" ? (
+        /* Free-form text input */
+        <box backgroundColor={t.planInputBg} paddingLeft={1} paddingRight={1}>
+          <text fg={t.planInputText}>
+            {state.editing || customText ? (
+              customText + (state.editing ? "▌" : "")
+            ) : (
+              <span style={{ fg: t.textMuted }}>{"Type your answer..."}</span>
+            )}
+          </text>
+        </box>
+      ) : (
+        /* Options list */
+        <box flexDirection="column">
+          {options.map((opt, i) => {
+            const isFocused = i === state.selected;
+            const isPicked = isOptionPicked(state.answers, q, opt.id);
+            return (
+              <box
+                key={opt.id}
+                backgroundColor={isFocused ? t.selectedBg : undefined}
+                paddingLeft={1}
+                flexDirection="row"
+              >
+                <text>
+                  <span style={{ fg: t.textMuted }}>{`${i + 1}. `}</span>
+                  <span
+                    style={{
+                      fg: isFocused ? t.selected : isPicked ? t.planOptionCheck : t.text,
+                    }}
+                  >
+                    {isMulti ? `[${isPicked ? "✓" : " "}] ${opt.label}` : opt.label}
+                  </span>
+                  {isPicked && !isMulti ? <span style={{ fg: t.planOptionCheck }}>{" ✓"}</span> : null}
+                </text>
+              </box>
+            );
+          })}
+
+          {/* "Type your own answer" option */}
+          {showCustom && (
+            <box backgroundColor={isOnCustom ? t.selectedBg : undefined} paddingLeft={1}>
+              {state.editing && isOnCustom ? (
+                <box backgroundColor={t.planInputBg} paddingLeft={1} paddingRight={1} flexGrow={1}>
+                  <text fg={t.planInputText}>{`${customText}▌`}</text>
+                </box>
+              ) : (
+                <text>
+                  <span style={{ fg: t.textMuted }}>{`${totalItems}. `}</span>
+                  <span
+                    style={{
+                      fg: isOnCustom ? t.planOptionSelected : t.textMuted,
+                    }}
+                  >
+                    {isMulti
+                      ? `[${customText && isOptionPicked(state.answers, q, customText) ? "✓" : " "}] Type your own answer`
+                      : "Type your own answer"}
+                  </span>
+                  {customText ? <span style={{ fg: t.textDim }}>{` (${customText})`}</span> : null}
+                </text>
+              )}
+            </box>
+          )}
+        </box>
+      )}
+    </box>
+  );
+}
+
+/* ── Confirm/Review Tab ───────────────────────────────────── */
+
+function ConfirmView({ t, questions, answers }: { t: Theme; questions: PlanQuestion[]; answers: PlanAnswers }) {
+  return (
+    <box flexDirection="column">
+      <box marginBottom={1}>
+        <text fg={t.planQuestionText}>
+          <b>{"Review"}</b>
+        </text>
+      </box>
+      {questions.map((q) => {
+        const val = formatAnswer(q, answers);
+        const answered = val !== "(not answered)";
+        return (
+          <box key={q.id} paddingLeft={1}>
+            <text>
+              <span style={{ fg: t.text }}>
+                <b>{tabLabel(q)}:</b>
+              </span>
+              <span style={{ fg: answered ? t.planOptionCheck : t.textMuted }}> {val}</span>
+            </text>
+          </box>
+        );
+      })}
+    </box>
+  );
+}
+
+/* ── Helpers ───────────────────────────────────────────────── */
+
+function tabLabel(q: PlanQuestion): string {
+  if (q.header) return q.header;
+  const words = q.question.replace(/[?.,!:]+$/, "").split(/\s+/);
+  const key = words.find(
+    (w) => w.length > 2 && !/^(what|how|should|which|does|the|and|for|are|can|will|you|this|that|with|from)$/i.test(w),
+  );
+  return key ?? words[0] ?? "Question";
+}
+
+function hasAnswer(answers: PlanAnswers, q: PlanQuestion): boolean {
+  const a = answers[q.id];
+  if (!a) return false;
+  if (Array.isArray(a)) return a.length > 0;
+  return a.trim().length > 0;
+}
+
+function isOptionPicked(answers: PlanAnswers, q: PlanQuestion, optionId: string): boolean {
+  const a = answers[q.id];
+  if (!a) return false;
+  if (Array.isArray(a)) return a.includes(optionId);
+  return a === optionId;
+}
+
+function formatAnswer(q: PlanQuestion, answers: PlanAnswers): string {
+  const a = answers[q.id];
+  if (!a) return "(not answered)";
+  if (q.type === "text") return (a as string) || "(not answered)";
+  if (q.type === "select") {
+    const opt = q.options?.find((o) => o.id === a);
+    return (opt?.label ?? (a as string)) || "(not answered)";
+  }
+  const arr = a as string[];
+  if (arr.length === 0) return "(not answered)";
+  return arr.map((id) => q.options?.find((o) => o.id === id)?.label ?? id).join(", ");
+}
+
+export function formatPlanAnswers(questions: PlanQuestion[], answers: PlanAnswers): string {
+  const parts: string[] = ["Here are my answers to the plan questions:\n"];
+
+  for (const q of questions) {
+    const val = formatAnswer(q, answers);
+    parts.push(`- ${q.question}: ${val}`);
+  }
+
+  return parts.join("\n");
+}

package/src/ui/schedule-modal.tsx

@@ -0,0 +1,126 @@
+import type { ScrollBoxRenderable } from "@opentui/core";
+import { useEffect, useRef } from "react";
+import type { StoredSchedule } from "../tools/schedule";
+import type { Theme } from "./theme";
+
+export type ScheduleBrowseRow = { kind: "schedule"; schedule: StoredSchedule };
+
+export function buildScheduleBrowseRows(schedules: StoredSchedule[], query: string): ScheduleBrowseRow[] {
+  const q = query.trim().toLowerCase();
+  const filtered = q
+    ? schedules.filter(
+        (schedule) =>
+          schedule.name.toLowerCase().includes(q) ||
+          schedule.id.toLowerCase().includes(q) ||
+          schedule.instruction.toLowerCase().includes(q) ||
+          (schedule.cron ?? "").toLowerCase().includes(q),
+      )
+    : schedules;
+
+  return filtered.map((schedule) => ({ kind: "schedule" as const, schedule }));
+}
+
+function bottomAlignedModalTop(height: number, panelHeight: number): number {
+  return Math.max(2, Math.floor((height - panelHeight) / 2));
+}
+
+export function ScheduleBrowserModal({
+  t,
+  width,
+  height,
+  selectedIndex,
+  searchQuery,
+  rows,
+}: {
+  t: Theme;
+  width: number;
+  height: number;
+  selectedIndex: number;
+  searchQuery: string;
+  rows: ScheduleBrowseRow[];
+}) {
+  const listRef = useRef<ScrollBoxRenderable>(null);
+
+  useEffect(() => {
+    const selected = rows[selectedIndex];
+    if (!selected) return;
+    listRef.current?.scrollChildIntoView(`schedule-${selected.schedule.id}`);
+  }, [rows, selectedIndex]);
+
+  const itemCount = Math.max(rows.length, 1);
+  const contentHeight = itemCount + 10;
+  const panelHeight = Math.min(contentHeight, Math.floor(height * 0.6));
+  const panelWidth = Math.min(60, width - 6);
+  const overlayBg = "#000000cc" as string;
+
+  return (
+    <box
+      position="absolute"
+      left={0}
+      top={0}
+      width={width}
+      height={height}
+      alignItems="center"
+      paddingTop={bottomAlignedModalTop(height, panelHeight)}
+      backgroundColor={overlayBg}
+    >
+      <box
+        width={panelWidth}
+        height={panelHeight}
+        backgroundColor={t.backgroundPanel}
+        paddingTop={1}
+        paddingBottom={1}
+        flexDirection="column"
+      >
+        <box flexShrink={0} flexDirection="row" justifyContent="space-between" paddingLeft={2} paddingRight={2}>
+          <text fg={t.primary}>
+            <b>{"Schedules"}</b>
+          </text>
+          <text fg={t.textMuted}>{"esc"}</text>
+        </box>
+        <box flexShrink={0} paddingLeft={2} paddingRight={2} paddingTop={1} paddingBottom={1}>
+          <text fg={t.text}>
+            {searchQuery || <span style={{ fg: t.textMuted }}>{"Search by name, cron, instruction..."}</span>}
+          </text>
+        </box>
+        <scrollbox ref={listRef} flexGrow={1} minHeight={0}>
+          {rows.map((row, idx) => {
+            const selected = idx === selectedIndex;
+            const schedule = row.schedule;
+            const scheduleText = schedule.cron ?? "runs once immediately";
+            return (
+              <box
+                key={`schedule-${schedule.id}`}
+                id={`schedule-${schedule.id}`}
+                width="100%"
+                backgroundColor={selected ? t.selectedBg : undefined}
+                paddingLeft={2}
+                paddingRight={2}
+              >
+                <box width="100%" flexDirection="row">
+                  <text fg={selected ? t.primary : t.text}>
+                    <b>{schedule.name}</b>
+                  </text>
+                  <text fg={t.textMuted}>{` - ${scheduleText}`}</text>
+                </box>
+              </box>
+            );
+          })}
+          {rows.length === 0 ? (
+            <box paddingLeft={2} paddingRight={2}>
+              <text fg={t.textMuted}>{"No schedules yet"}</text>
+            </box>
+          ) : null}
+        </scrollbox>
+        <box flexShrink={0} paddingLeft={2} paddingRight={2} paddingTop={2} paddingBottom={1}>
+          <text>
+            <span style={{ fg: t.primary }}>{"enter "}</span>
+            <span style={{ fg: t.textMuted }}>{"details · "}</span>
+            <span style={{ fg: t.primary }}>{"ctrl+x "}</span>
+            <span style={{ fg: t.textMuted }}>{"remove"}</span>
+          </text>
+        </box>
+      </box>
+    </box>
+  );
+}

package/src/ui/slash/__tests__/clear.test.ts

@@ -0,0 +1,86 @@
+import { promises as fs } from "node:fs";
+import * as os from "node:os";
+import * as path from "node:path";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import type { SlashContext } from "../registry.js";
+
+// Import to trigger self-registration
+import "../clear.js";
+
+import { dispatchSlash } from "../registry.js";
+
+let tmpDir: string;
+
+const makeCtx = (cwd: string): SlashContext => ({
+  cwd,
+  tenantId: "local",
+  defaultProvider: "anthropic",
+  defaultModel: "claude-3-5-sonnet-latest",
+});
+
+describe("handleClearSlash", () => {
+  beforeEach(async () => {
+    tmpDir = await fs.mkdtemp(path.join(os.tmpdir(), "clear-test-"));
+  });
+
+  afterEach(async () => {
+    await fs.rm(tmpDir, { recursive: true, force: true });
+  });
+
+  it("returns helpful message with no active run", async () => {
+    const result = await dispatchSlash("clear", [], makeCtx(tmpDir));
+    expect(result).toBeTypeOf("string");
+    expect(result!.toLowerCase()).toMatch(/no active run/i);
+  });
+
+  it("returns __CLEAR__ signal with relock summary when run exists", async () => {
+    const flowDir = path.join(tmpDir, ".muonroi-flow");
+    const runId = "test-run-01";
+    const runDir = path.join(flowDir, "runs", runId);
+    await fs.mkdir(runDir, { recursive: true });
+
+    // Set up state.md with active run
+    await fs.writeFile(path.join(flowDir, "state.md"), "## Active Run\n\ntest-run-01\n", "utf8");
+
+    // Set up run state.md with some content
+    await fs.writeFile(
+      path.join(runDir, "state.md"),
+      "## Resume Digest\n\nWorking on feature X\n\n## Experience Snapshot\n\nSome warnings\n",
+      "utf8",
+    );
+
+    // Set up decisions.md with some entries
+    await fs.writeFile(
+      path.join(flowDir, "decisions.md"),
+      "## Decisions\n\n- Use JWT\n- Use PostgreSQL\n\n## Facts\n\n- API limit 100/min\n",
+      "utf8",
+    );
+
+    // Set up gray-areas.md
+    await fs.writeFile(
+      path.join(runDir, "gray-areas.md"),
+      "## Open\n\nG1: Should we use X?\n\n## Resolved\n\nG2: Used Y\n",
+      "utf8",
+    );
+
+    const result = await dispatchSlash("clear", [], makeCtx(tmpDir));
+    expect(result).toBeTypeOf("string");
+    expect(result).toContain("__CLEAR__");
+    expect(result).toContain("Relocked from");
+    expect(result).toContain("test-run-01");
+  });
+
+  it("includes decisions count in summary", async () => {
+    const flowDir = path.join(tmpDir, ".muonroi-flow");
+    const runId = "run-02";
+    const runDir = path.join(flowDir, "runs", runId);
+    await fs.mkdir(runDir, { recursive: true });
+
+    await fs.writeFile(path.join(flowDir, "state.md"), "## Active Run\n\nrun-02\n", "utf8");
+    await fs.writeFile(path.join(runDir, "state.md"), "## Resume Digest\n\nSome state\n", "utf8");
+    await fs.writeFile(path.join(flowDir, "decisions.md"), "## Decisions\n\n- D1\n- D2\n- D3\n", "utf8");
+
+    const result = await dispatchSlash("clear", [], makeCtx(tmpDir));
+    expect(result).toContain("Decisions:");
+  });
+});

package/src/ui/slash/__tests__/compact.test.ts

@@ -0,0 +1,56 @@
+import { promises as fs } from "node:fs";
+import * as os from "node:os";
+import * as path from "node:path";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import type { SlashContext } from "../registry.js";
+
+// Import to trigger self-registration
+import "../compact.js";
+
+import { dispatchSlash } from "../registry.js";
+
+let tmpDir: string;
+
+const makeCtx = (cwd: string): SlashContext => ({
+  cwd,
+  tenantId: "local",
+  defaultProvider: "anthropic",
+  defaultModel: "claude-3-5-sonnet-latest",
+});
+
+describe("handleCompactSlash", () => {
+  beforeEach(async () => {
+    tmpDir = await fs.mkdtemp(path.join(os.tmpdir(), "compact-test-"));
+  });
+
+  afterEach(async () => {
+    await fs.rm(tmpDir, { recursive: true, force: true });
+  });
+
+  it("returns helpful message with no active run", async () => {
+    // No .muonroi-flow/ directory at all
+    const result = await dispatchSlash("compact", [], makeCtx(tmpDir));
+    expect(result).toBeTypeOf("string");
+    expect(result!.toLowerCase()).toMatch(/no active run|nothing to compact/i);
+  });
+
+  it("returns signal string __COMPACT__ when preconditions met", async () => {
+    // Set up flow dir with active run
+    const flowDir = path.join(tmpDir, ".muonroi-flow");
+    await fs.mkdir(path.join(flowDir, "runs", "test-run-01"), {
+      recursive: true,
+    });
+    await fs.mkdir(path.join(flowDir, "history"), { recursive: true });
+    await fs.writeFile(path.join(flowDir, "state.md"), "## Active Run\n\ntest-run-01\n", "utf8");
+    // Create run state.md
+    await fs.writeFile(
+      path.join(flowDir, "runs", "test-run-01", "state.md"),
+      "## Resume Digest\n\nActive run state\n",
+      "utf8",
+    );
+
+    const result = await dispatchSlash("compact", [], makeCtx(tmpDir));
+    expect(result).toBeTypeOf("string");
+    expect(result).toContain("__COMPACT__");
+  });
+});

package/src/ui/slash/__tests__/cost.test.ts

@@ -0,0 +1,62 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { __resetStatusBarStoreForTests, statusBarStore } from "../../status-bar/store.js";
+import type { SlashContext } from "../registry.js";
+
+// Import to trigger self-registration
+import "../cost.js";
+
+import { dispatchSlash } from "../registry.js";
+
+const makeCtx = (): SlashContext => ({
+  cwd: "/tmp",
+  tenantId: "local",
+  defaultProvider: "anthropic",
+  defaultModel: "claude-sonnet-4-20250514",
+});
+
+describe("handleCostSlash", () => {
+  beforeEach(() => {
+    __resetStatusBarStoreForTests();
+  });
+
+  it("returns formatted output with default (zeroed) store state", async () => {
+    const result = await dispatchSlash("cost", [], makeCtx());
+    expect(result).toBeTypeOf("string");
+    expect(result).toContain("Provider: (none)");
+    expect(result).toContain("Model:    (none)");
+    expect(result).toContain("Tier:     hot");
+    expect(result).toContain("0 in / 0 out");
+    expect(result).toContain("$0.0000");
+    expect(result).toContain("$0.00");
+    expect(result).toContain("0.0%");
+  });
+
+  it("returns formatted output with populated store state", async () => {
+    statusBarStore.setState({
+      provider: "anthropic",
+      model: "claude-sonnet-4-20250514",
+      tier: "hot",
+      in_tokens: 5000,
+      out_tokens: 1200,
+      session_usd: 0.034,
+      month_usd: 2.5,
+      cap_usd: 15,
+      current_pct: 16.7,
+    });
+
+    const result = await dispatchSlash("cost", [], makeCtx());
+    expect(result).toBeTypeOf("string");
+    expect(result).toContain("Provider: anthropic");
+    expect(result).toContain("Model:    claude-sonnet-4-20250514");
+    expect(result).toContain("Tier:     hot");
+    expect(result).toContain("5000 in / 1200 out");
+    expect(result).toContain("Session:  $0.0340");
+    expect(result).toContain("Month:    $2.5000 / $15.00 (16.7%)");
+  });
+
+  it("handleCostSlash returns a string (may be async for EE stats)", async () => {
+    const { handleCostSlash } = await import("../cost.js");
+    const result = await handleCostSlash([], makeCtx());
+    expect(typeof result).toBe("string");
+  });
+});