archymedes-cli 2.0.0 → 2.2.0

package/dist/archymedes-sc3mwttb.mjs

@@ -0,0 +1,284 @@
+import {
+  CYAN,
+  DIM,
+  GREEN,
+  GUTTER,
+  MAGENTA,
+  RED,
+  clip,
+  paint
+} from "./archymedes-cdgejs3p.mjs";
+import {
+  UNICODE_GLYPHS
+} from "./archymedes-5zn4zp84.mjs";
+
+// packages/archymedes-cli/src/code-view.ts
+var MAX_DIFF_CELLS = 250000;
+function diffLines(before, after) {
+  const left = before === "" ? [] : before.split(`
+`);
+  const right = after === "" ? [] : after.split(`
+`);
+  if (left.length * right.length > MAX_DIFF_CELLS) {
+    return [
+      ...left.map((text) => ({ kind: "remove", text })),
+      ...right.map((text) => ({ kind: "add", text }))
+    ];
+  }
+  const lengths = Array.from({ length: left.length + 1 }, () => new Array(right.length + 1).fill(0));
+  for (let i2 = left.length - 1;i2 >= 0; i2 -= 1) {
+    for (let j2 = right.length - 1;j2 >= 0; j2 -= 1) {
+      lengths[i2][j2] = left[i2] === right[j2] ? lengths[i2 + 1][j2 + 1] + 1 : Math.max(lengths[i2 + 1][j2], lengths[i2][j2 + 1]);
+    }
+  }
+  const result = [];
+  let i = 0;
+  let j = 0;
+  while (i < left.length && j < right.length) {
+    if (left[i] === right[j]) {
+      result.push({ kind: "context", text: left[i] });
+      i += 1;
+      j += 1;
+    } else if (lengths[i + 1][j] >= lengths[i][j + 1]) {
+      result.push({ kind: "remove", text: left[i] });
+      i += 1;
+    } else {
+      result.push({ kind: "add", text: right[j] });
+      j += 1;
+    }
+  }
+  while (i < left.length) {
+    result.push({ kind: "remove", text: left[i] });
+    i += 1;
+  }
+  while (j < right.length) {
+    result.push({ kind: "add", text: right[j] });
+    j += 1;
+  }
+  return result;
+}
+function condenseDiff(diff, context = 2) {
+  const keep = new Array(diff.length).fill(false);
+  diff.forEach((line, index) => {
+    if (line.kind === "context")
+      return;
+    for (let offset = -context;offset <= context; offset += 1) {
+      const target = index + offset;
+      if (target >= 0 && target < diff.length)
+        keep[target] = true;
+    }
+  });
+  const result = [];
+  let skipped = 0;
+  diff.forEach((line, index) => {
+    if (keep[index]) {
+      if (skipped > 0) {
+        result.push({ kind: "gap", text: `${skipped} unchanged line${skipped === 1 ? "" : "s"}` });
+        skipped = 0;
+      }
+      result.push(line);
+      return;
+    }
+    skipped += 1;
+  });
+  if (skipped > 0)
+    result.push({ kind: "gap", text: `${skipped} unchanged line${skipped === 1 ? "" : "s"}` });
+  return result;
+}
+function languageOf(filePath) {
+  const name = filePath.split(/[\\/]/).pop() ?? "";
+  const extension = name.includes(".") ? name.split(".").pop().toLowerCase() : "";
+  const byExtension = {
+    ts: "typescript",
+    tsx: "tsx",
+    js: "javascript",
+    jsx: "jsx",
+    mjs: "javascript",
+    cjs: "javascript",
+    py: "python",
+    rb: "ruby",
+    go: "go",
+    rs: "rust",
+    java: "java",
+    kt: "kotlin",
+    swift: "swift",
+    c: "c",
+    h: "c",
+    cc: "cpp",
+    cpp: "cpp",
+    hpp: "cpp",
+    cs: "csharp",
+    php: "php",
+    sh: "shell",
+    bash: "shell",
+    zsh: "shell",
+    fish: "shell",
+    json: "json",
+    yml: "yaml",
+    yaml: "yaml",
+    toml: "toml",
+    ini: "ini",
+    xml: "xml",
+    html: "html",
+    css: "css",
+    scss: "scss",
+    sql: "sql",
+    md: "markdown",
+    mdx: "markdown",
+    txt: "text"
+  };
+  if (byExtension[extension])
+    return byExtension[extension];
+  if (/^(?:dockerfile|makefile|justfile)$/i.test(name))
+    return name.toLowerCase();
+  return extension || "text";
+}
+var KEYWORDS = new Set([
+  "async",
+  "await",
+  "break",
+  "case",
+  "catch",
+  "class",
+  "const",
+  "continue",
+  "def",
+  "default",
+  "elif",
+  "else",
+  "end",
+  "enum",
+  "export",
+  "extends",
+  "finally",
+  "fn",
+  "for",
+  "from",
+  "func",
+  "function",
+  "if",
+  "impl",
+  "import",
+  "in",
+  "interface",
+  "let",
+  "match",
+  "mod",
+  "new",
+  "package",
+  "private",
+  "public",
+  "pub",
+  "raise",
+  "return",
+  "static",
+  "struct",
+  "switch",
+  "throw",
+  "trait",
+  "try",
+  "type",
+  "use",
+  "var",
+  "void",
+  "while",
+  "with",
+  "yield"
+]);
+var LITERALS = new Set(["true", "false", "null", "nil", "None", "True", "False", "undefined", "self", "this"]);
+function highlightCode(line, depth) {
+  if (depth === "none")
+    return line;
+  const commentAt = findCommentStart(line);
+  const code = commentAt === -1 ? line : line.slice(0, commentAt);
+  const comment = commentAt === -1 ? "" : paint(line.slice(commentAt), DIM, depth);
+  const painted = code.replace(/("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)|\b(\d+(?:\.\d+)?)\b|\b([A-Za-z_$][\w$]*)\b/g, (whole, text, numeric, word) => {
+    if (text !== undefined)
+      return paint(text, GREEN, depth);
+    if (numeric !== undefined)
+      return paint(numeric, MAGENTA, depth);
+    if (word !== undefined && KEYWORDS.has(word))
+      return paint(word, CYAN, depth);
+    if (word !== undefined && LITERALS.has(word))
+      return paint(word, MAGENTA, depth);
+    return whole;
+  });
+  return `${painted}${comment}`;
+}
+function findCommentStart(line) {
+  let quote;
+  for (let index = 0;index < line.length; index += 1) {
+    const character = line[index];
+    if (quote) {
+      if (character === "\\") {
+        index += 1;
+        continue;
+      }
+      if (character === quote)
+        quote = undefined;
+      continue;
+    }
+    if (character === '"' || character === "'" || character === "`") {
+      quote = character;
+      continue;
+    }
+    if (character === "#")
+      return index;
+    if (character === "/" && line[index + 1] === "/")
+      return index;
+    if (character === "-" && line[index + 1] === "-")
+      return index;
+  }
+  return -1;
+}
+function renderCode(content, style, options = {}) {
+  const glyphs = style.glyphs ?? UNICODE_GLYPHS;
+  const lines = content.replace(/\n$/, "").split(`
+`);
+  const maxLines = options.maxLines ?? 16;
+  const start = options.startLine ?? 1;
+  const numberWidth = String(start + lines.length - 1).length;
+  const bodyWidth = Math.max(8, style.width - GUTTER.length - numberWidth - 4);
+  const render = (from, to) => lines.slice(from, to).map((line, index) => {
+    const number = paint(String(start + from + index).padStart(numberWidth), DIM, style.depth);
+    const painted = options.highlight === false ? line : highlightCode(line, style.depth);
+    return `${number} ${clip(painted, bodyWidth, glyphs)}`;
+  });
+  const hidden = Math.max(0, lines.length - maxLines);
+  const shown = render(0, hidden > 0 ? maxLines : lines.length);
+  return {
+    text: shown.join(`
+`),
+    hidden,
+    full: render(0, lines.length).join(`
+`)
+  };
+}
+function renderDiff(diff, style, options = {}) {
+  const glyphs = style.glyphs ?? UNICODE_GLYPHS;
+  const maxLines = options.maxLines ?? 16;
+  const condensed = condenseDiff(diff);
+  const bodyWidth = Math.max(8, style.width - GUTTER.length - 4);
+  const row = (line) => {
+    if (line.kind === "gap")
+      return paint(`${glyphs.middot.repeat(3)} ${line.text}`, DIM, style.depth);
+    const mark = line.kind === "add" ? glyphs.plus : line.kind === "remove" ? glyphs.minus : " ";
+    const code = line.kind === "add" ? GREEN : line.kind === "remove" ? RED : DIM;
+    const body = line.kind === "context" ? paint(line.text, DIM, style.depth) : highlightCode(line.text, style.depth);
+    return `${paint(mark, code, style.depth)} ${clip(body, bodyWidth, glyphs)}`;
+  };
+  const rows = condensed.map(row);
+  const hidden = Math.max(0, rows.length - maxLines);
+  return {
+    text: (hidden > 0 ? rows.slice(0, maxLines) : rows).join(`
+`),
+    hidden,
+    full: diff.map(row).join(`
+`)
+  };
+}
+function describeChange(stat, depth) {
+  return `${paint(`+${stat.added}`, GREEN, depth)} ${paint(`-${stat.removed}`, RED, depth)}`;
+}
+
+export { diffLines, languageOf, highlightCode, renderCode, renderDiff, describeChange };

package/dist/{archymedes-brkqgrxv.mjs → archymedes-wjaqydyg.mjs}

@@ -1,9 +1,11 @@
 import {
   SpringAnimator,
+  paginator
+} from "./archymedes-r54qthg5.mjs";
+import {
   UNICODE_GLYPHS,
-  paginator,
   visibleWidth
-} from "./archymedes-dwvn4c51.mjs";
+} from "./archymedes-5zn4zp84.mjs";
 
 // packages/archymedes-cli/src/chooser.ts
 var ALL_CHROME = { title: true, status: true, pagination: true, help: true };
@@ -129,7 +131,11 @@ function renderChooser(state, items, options) {
     const shownLabel = clip(item.label, labelBudget);
     const padded = shownLabel + " ".repeat(Math.max(0, labelBudget - visibleWidth(shownLabel)));
     const marker = active ? paint.green(glyphs.prompt) : fadingOut ? paint.dim(glyphs.prompt) : " ";
-    const head = `${marker} ${paint.dim(number)} ${padded}  `;
+    const focus = Math.max(0, Math.min(1, options.focusProgress ?? 1));
+    const graphemes = [...new Intl.Segmenter(undefined, { granularity: "grapheme" }).segment(padded)].map((part) => part.segment);
+    const illuminated = Math.round(graphemes.length * focus);
+    const label = active ? paint.cyan(graphemes.slice(0, illuminated).join("")) + graphemes.slice(illuminated).join("") : padded;
+    const head = `${marker} ${paint.dim(number)} ${label}  `;
     const tail = `${item.hint ? ` ${item.hint}` : ""}${item.description ? `  ${item.description}` : ""}`;
     lines.push(`  ${head}${paint.dim(clip(tail, Math.max(0, room - visibleWidth(padded) - 2)))}`);
   }
@@ -173,39 +179,45 @@ async function runChooser(keys, items, paint, options) {
     glide?.stop();
     glide = undefined;
   };
-  for await (const input of keys) {
-    const current = liveOptions();
-    const previousSelected = state.selected;
-    const step = advanceChooser(state, items, input, {
-      filter: options.filter ?? false,
-      page: options.page ?? current.height ?? 8,
-      ...current.height === undefined ? {} : { height: current.height }
-    });
-    state = step.state;
-    if (step.done) {
+  try {
+    for await (const input of keys) {
+      const current = liveOptions();
+      const previousSelected = state.selected;
+      const step = advanceChooser(state, items, input, {
+        filter: options.filter ?? false,
+        page: options.page ?? current.height ?? 8,
+        ...current.height === undefined ? {} : { height: current.height }
+      });
+      state = step.state;
+      if (step.done) {
+        settleGlide();
+        if (step.done.index === undefined)
+          return;
+        return filterItems(items, state.query)[step.done.index]?.value;
+      }
       settleGlide();
-      if (step.done.index === undefined)
-        return;
-      return filterItems(items, state.query)[step.done.index]?.value;
+      const isSingleStep = (input.key.name === "up" || input.key.name === "down") && Math.abs(state.selected - previousSelected) === 1;
+      const motion = options.motion ?? (process.env.ARCHYMEDES_NO_MOTION !== "1" && process.env.NO_COLOR === undefined && process.env.TERM !== "dumb");
+      if (!motion || !isSingleStep || previousSelected === state.selected) {
+        paint(renderChooser(state, items, liveOptions()));
+        continue;
+      }
+      paint(renderChooser(state, items, { ...liveOptions(), transitionFrom: previousSelected, focusProgress: 0 }));
+      const animator = new SpringAnimator(0, (value) => {
+        if (value < 0.95) {
+          paint(renderChooser(state, items, { ...liveOptions(), transitionFrom: value < 0.5 ? previousSelected : undefined, focusProgress: value }));
+          return;
+        }
+        animator.stop();
+        glide = undefined;
+        paint(renderChooser(state, items, liveOptions()));
+      }, { intervalMs: 30 });
+      glide = animator;
+      animator.retarget(1);
     }
+  } finally {
     settleGlide();
-    const isSingleStep = (input.key.name === "up" || input.key.name === "down") && Math.abs(state.selected - previousSelected) === 1;
-    if (!isSingleStep || previousSelected === state.selected) {
-      paint(renderChooser(state, items, liveOptions()));
-      continue;
-    }
-    paint(renderChooser(state, items, { ...liveOptions(), transitionFrom: previousSelected }));
-    const animator = new SpringAnimator(0, (value) => {
-      if (value < 0.6)
-        return;
-      animator.stop();
-      glide = undefined;
-      paint(renderChooser(state, items, liveOptions()));
-    }, { intervalMs: 30 });
-    glide = animator;
-    animator.retarget(1);
   }
-  settleGlide();
   return;
 }
 

package/dist/{editor-screen-51z7z11j.mjs → editor-screen-1b3z96tn.mjs}

@@ -1,6 +1,11 @@
+import {
+  diffLines,
+  languageOf
+} from "./archymedes-sc3mwttb.mjs";
+import"./archymedes-cdgejs3p.mjs";
 import {
   NO_COLOR_PALETTE
-} from "./archymedes-jecyxv5c.mjs";
+} from "./archymedes-5zn4zp84.mjs";
 import {
   __require
 } from "./archymedes-x67v3n58.mjs";
@@ -342,14 +347,233 @@ function caretInto(text, cursorCol) {
   return `${padded.slice(0, cursorCol)}█${padded.slice(cursorCol + 1)}`;
 }
 
+// packages/archymedes-cli/src/explain-view.ts
+var PATTERNS = {
+  typescript: {
+    imports: /^\s*import\b.*from\s+["'](.+)["']/,
+    exports: /^\s*export\s+(?:default\s+)?(?:const|function|class|interface|type|enum)\s+([\w$]+)/,
+    functions: /^\s*(?:export\s+)?(?:default\s+)?(?:async\s+)?function\s*\*?\s*([\w$]+)/,
+    classes: /^\s*(?:export\s+)?(?:default\s+)?(?:abstract\s+)?class\s+([\w$]+)/
+  },
+  javascript: {},
+  jsx: {},
+  tsx: {},
+  python: {
+    imports: /^\s*(?:import\s+([\w.]+)|from\s+([\w.]+)\s+import\b)/,
+    functions: /^\s*(?:async\s+)?def\s+([\w]+)/,
+    classes: /^\s*class\s+([\w]+)/
+  },
+  go: {
+    imports: /^\s*import\s+["'](.+)["']/,
+    functions: /^\s*func\s+(?:\([^)]*\)\s*)?([\w]+)/
+  },
+  rust: {
+    imports: /^\s*use\s+([\w:]+)/,
+    functions: /^\s*(?:pub\s+)?(?:async\s+)?fn\s+([\w]+)/,
+    classes: /^\s*(?:pub\s+)?struct\s+([\w]+)/
+  },
+  ruby: {
+    imports: /^\s*require\s+["'](.+)["']/,
+    functions: /^\s*def\s+([\w?!]+)/,
+    classes: /^\s*class\s+([\w:]+)/
+  }
+};
+PATTERNS.javascript = PATTERNS.typescript;
+PATTERNS.jsx = PATTERNS.typescript;
+PATTERNS.tsx = PATTERNS.typescript;
+function structuralFacts(content, path) {
+  const language = languageOf(path);
+  const rules = PATTERNS[language] ?? {};
+  const facts = { imports: [], exports: [], functions: [], classes: [] };
+  const lines = content.split(`
+`);
+  lines.forEach((raw, index) => {
+    for (const key of Object.keys(rules)) {
+      const pattern = rules[key];
+      if (!pattern)
+        continue;
+      const match = pattern.exec(raw);
+      if (!match)
+        continue;
+      const name = match.slice(1).find((group) => group !== undefined);
+      facts[key].push({ line: index + 1, text: name ?? raw.trim() });
+    }
+  });
+  return facts;
+}
+var MAX_LINE_LENGTH = 120;
+var MAGIC_NUMBER = /(?<![\w.])(?!0\b|1\b)\d{2,}(?![\w.])/;
+function annotateLines(content) {
+  const lines = content.split(`
+`);
+  const notes = [];
+  lines.forEach((raw, index) => {
+    const line = index + 1;
+    if (/\b(TODO|FIXME|HACK|XXX)\b/.test(raw)) {
+      notes.push({ line, note: "unfinished work flagged here", severity: "warn" });
+    }
+    if (raw.length > MAX_LINE_LENGTH) {
+      notes.push({ line, note: `long line (${raw.length} chars)`, severity: "info" });
+    }
+    if (MAGIC_NUMBER.test(raw) && !/^\s*(?:\/\/|#|\*)/.test(raw)) {
+      notes.push({ line, note: "unexplained numeric literal", severity: "info" });
+    }
+  });
+  return notes;
+}
+var EXPLAIN_TABS = ["facts", "notes", "diff", "ai"];
+function initialExplainPanelState() {
+  return { open: false, tab: "facts", ai: { status: "idle" } };
+}
+function toggleExplainPanel(state) {
+  return { ...state, open: !state.open };
+}
+function cycleExplainTab(state, step = 1) {
+  const index = EXPLAIN_TABS.indexOf(state.tab);
+  const next = ((index + step) % EXPLAIN_TABS.length + EXPLAIN_TABS.length) % EXPLAIN_TABS.length;
+  return { ...state, tab: EXPLAIN_TABS[next] };
+}
+function withAiExplanation(state, ai) {
+  return { ...state, ai };
+}
+var TAB_LABELS = { facts: "Structure", notes: "Notes", diff: "Diff", ai: "AI" };
+function tabStrip(active) {
+  const text = EXPLAIN_TABS.map((tab) => tab === active ? `[${TAB_LABELS[tab]}]` : ` ${TAB_LABELS[tab]} `).join(" ");
+  return { text, bold: true };
+}
+function hintRow(active) {
+  const ask = active === "ai" ? "   ? ask" : "";
+  return { text: `[ ] tabs   ^E close${ask}`, dim: true };
+}
+function wrap(text, width) {
+  const words = text.split(/\s+/).filter(Boolean);
+  const rows = [];
+  let line = "";
+  for (const word of words) {
+    const candidate = line ? `${line} ${word}` : word;
+    if (candidate.length > width && line) {
+      rows.push(line);
+      line = word;
+    } else {
+      line = candidate;
+    }
+  }
+  if (line)
+    rows.push(line);
+  return rows.length > 0 ? rows : [""];
+}
+function factsRows(facts, width) {
+  const section = (title, entries) => {
+    if (entries.length === 0)
+      return [];
+    return [
+      { text: title, bold: true },
+      ...entries.slice(0, 40).map((entry) => ({ text: `  ${String(entry.line).padStart(4)}  ${entry.text}`.slice(0, width) })),
+      { text: "" }
+    ];
+  };
+  const rows = [
+    ...section("Imports", facts.imports),
+    ...section("Exports", facts.exports),
+    ...section("Classes", facts.classes),
+    ...section("Functions", facts.functions)
+  ];
+  if (rows.length === 0)
+    return [{ text: "No imports, exports, functions or classes recognised.", dim: true }];
+  return rows.slice(0, -1);
+}
+function notesRows(notes, width) {
+  if (notes.length === 0)
+    return [{ text: "Nothing flagged.", dim: true }];
+  return notes.slice(0, 60).map((entry) => ({
+    text: `${String(entry.line).padStart(4)}  ${entry.note}`.slice(0, width),
+    color: entry.severity === "warn" ? "yellow" : undefined
+  }));
+}
+function diffRows(diff, width) {
+  if (diff.length === 0 || diff.every((line) => line.kind === "context")) {
+    return [{ text: "No changes yet.", dim: true }];
+  }
+  return diff.filter((line) => line.kind !== "context").slice(0, 200).map((line) => ({
+    text: `${line.kind === "add" ? "+" : "-"} ${line.text}`.slice(0, width),
+    color: line.kind === "add" ? "green" : "red"
+  }));
+}
+function aiRows(ai, width) {
+  switch (ai.status) {
+    case "idle":
+      return [{ text: "Press ? to ask the model to explain this file.", dim: true }];
+    case "loading":
+      return [{ text: "Thinking…", dim: true }];
+    case "error":
+      return [{ text: `Could not get an explanation: ${ai.message}`, color: "red" }];
+    case "ready":
+      return ai.text.split(`
+`).flatMap((line) => wrap(line, width)).map((text) => ({ text }));
+  }
+}
+function composeExplainPanel(input, width, height) {
+  const body = (() => {
+    switch (input.panel.tab) {
+      case "facts":
+        return factsRows(structuralFacts(input.after, input.path), width);
+      case "notes":
+        return notesRows(annotateLines(input.after), width);
+      case "diff":
+        return diffRows(diffLines(input.before, input.after), width);
+      case "ai":
+        return aiRows(input.panel.ai, width);
+    }
+  })();
+  const rows = [tabStrip(input.panel.tab), hintRow(input.panel.tab), { text: "" }, ...body];
+  const padded = rows.length >= height ? rows.slice(0, height) : [...rows, ...Array.from({ length: height - rows.length }, () => ({ text: "" }))];
+  return padded;
+}
+
 // packages/archymedes-cli/src/editor-screen.tsx
 import { jsxDEV } from "@termuijs/jsx/jsx-dev-runtime";
 var Panel = Box;
 var Line = Text;
 var CHROME_ROWS = 2;
-function EditorScreen({ columns, rows, path, content, onExit, palette = NO_COLOR_PALETTE }) {
+var MIN_CODE_COLUMNS = 30;
+var MAX_PANEL_COLUMNS = 52;
+function panelWidthFor(columns) {
+  if (columns - MIN_CODE_COLUMNS < 20)
+    return 0;
+  return Math.min(MAX_PANEL_COLUMNS, Math.floor(columns * 0.38), columns - MIN_CODE_COLUMNS);
+}
+function EditorScreen({ columns, rows, path, content, onExit, palette = NO_COLOR_PALETTE, explain }) {
   const [state, setState] = useState(() => initialEditorState(path, content, Math.max(1, rows - CHROME_ROWS)));
+  const [panel, setPanel] = useState(() => initialExplainPanelState());
+  const panelWidth = panel.open ? panelWidthFor(columns) : 0;
+  const codeWidth = panelWidth > 0 ? columns - panelWidth - 1 : columns;
+  const askAi = (currentContent) => {
+    if (!explain) {
+      setPanel((current) => withAiExplanation(current, { status: "error", message: "no model available in this session" }));
+      return;
+    }
+    setPanel((current) => withAiExplanation(current, { status: "loading" }));
+    explain(currentContent, path).then((text) => setPanel((current) => withAiExplanation(current, { status: "ready", text })), (error) => setPanel((current) => withAiExplanation(current, { status: "error", message: error instanceof Error ? error.message : String(error) })));
+  };
   useInput((input, key) => {
+    if (key?.ctrl && key?.key === "e") {
+      setPanel((current) => toggleExplainPanel(current));
+      return;
+    }
+    if (panel.open && state.mode === "normal" && !state.search.typing) {
+      if (input === "]") {
+        setPanel((current) => cycleExplainTab(current, 1));
+        return;
+      }
+      if (input === "[") {
+        setPanel((current) => cycleExplainTab(current, -1));
+        return;
+      }
+      if (input === "?" && panel.tab === "ai" && panel.ai.status !== "loading") {
+        askAi(editorContent(state));
+        return;
+      }
+    }
     setState((current) => {
       const action = keyToEditorAction({ name: key?.key, ctrl: key?.ctrl, shift: key?.shift }, input, current);
       const { state: next, effect } = applyEditorAction(current, action);
@@ -360,18 +584,41 @@ function EditorScreen({ columns, rows, path, content, onExit, palette = NO_COLOR
       return next;
     });
   });
-  const frame = composeEditorFrame(state, columns, palette.accent);
+  const frame = composeEditorFrame(state, codeWidth, palette.accent);
+  const lastRow = frame.length - 1;
+  if (!panel.open && lastRow >= 0 && frame[lastRow].text.length + "   ^E explain".length <= codeWidth) {
+    frame[lastRow] = { ...frame[lastRow], text: `${frame[lastRow].text}   ^E explain` };
+  }
+  const panelRows = panelWidth > 0 ? composeExplainPanel({ path, before: content, after: editorContent(state), panel }, panelWidth - 2, rows) : [];
   return /* @__PURE__ */ jsxDEV(Panel, {
-    flexDirection: "column",
+    flexDirection: "row",
     width: columns,
     height: rows,
-    children: frame.map((line, index) => /* @__PURE__ */ jsxDEV(Line, {
-      bold: line.bold,
-      dimColor: line.dim,
-      color: line.color,
-      children: line.text
-    }, `row-${index}`, false, undefined, this))
-  }, undefined, false, undefined, this);
+    children: [
+      /* @__PURE__ */ jsxDEV(Panel, {
+        flexDirection: "column",
+        width: codeWidth,
+        height: rows,
+        children: frame.map((line, index) => /* @__PURE__ */ jsxDEV(Line, {
+          bold: line.bold,
+          dimColor: line.dim,
+          color: line.color,
+          children: line.text
+        }, `row-${index}`, false, undefined, this))
+      }, undefined, false, undefined, this),
+      panelWidth > 0 && /* @__PURE__ */ jsxDEV(Panel, {
+        flexDirection: "column",
+        width: panelWidth,
+        height: rows,
+        children: panelRows.map((line, index) => /* @__PURE__ */ jsxDEV(Line, {
+          bold: line.bold,
+          dimColor: line.dim,
+          color: line.color,
+          children: line.text
+        }, `explain-${index}`, false, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
 async function runEditorScreen(options) {
   const { renderApp } = await import("@termuijs/jsx");
@@ -389,6 +636,7 @@ async function runEditorScreen(options) {
       path: options.path,
       content: options.content,
       palette: options.palette,
+      explain: options.explain,
       onExit: finish,
       fullscreen: true
     }).catch(() => finish(undefined));