char-slop/berry

git clone https://git.t4t.associates/char-slop/berry

Charlotte SomConfigure code editing as naive, hashline, or both per conversation8744a752026-10-11

import { code, defineRenderers, type ToolCall, type ToolView } from "@berry/api/web.ts";
import * as j from "@char/justin";
import type { Event } from "./mod.ts";
import { bashRenderer, powershellRenderer } from "./bash-view.tsx";
import "./web.css";

const pathOf = j.validation.compile(j.obj({ path: j.string }));
const contentOf = j.validation.compile(j.obj({ content: j.string }));
const offsetOf = j.validation.compile(j.obj({ offset: j.number }));
const editsOf = j.validation.compile(j.obj({ edits: j.unknown }));
const modeOf = j.validation.compile(j.obj({ editMode: j.string }));

function diff(): ToolView {
  const element = <pre class="diff" />;
  let shown: Pick<ToolCall, "result" | "error" | "details"> | null = null;
  return {
    element,
    update({ result, error, details }) {
      if (shown?.result === result && shown.error === error && shown.details === details) return;
      shown = { result, error, details };
      if (error !== null) return element.replaceChildren(<span class="error">{error}</span>);
      const naive = modeOf(details).value?.editMode === "naive";
      // the first line repeats the card's header; hashes are for the model, and people read the change
      const lines = (typeof result === "string" ? result : "").split("\n").filter((line) =>
        !/^Applied \d+ edit/.test(line)
      );
      element.replaceChildren(
        ...lines.filter((line, i) => line !== "" || i > 0).map((line) => {
          if (line.startsWith("@@")) return <span class="hunk">{line}</span>;
          const marker = line[0] === "+" || line[0] === "-" ? line[0] : " ";
          const text = naive ? line.slice(1) : line.slice(1).replace(/^[A-Za-z]{4}│/, "");
          return (
            <span class={marker === "+" ? "add" : marker === "-" ? "del" : ""}>
              <i>{marker}</i>
              {text}
            </span>
          );
        }),
      );
    },
  };
}

/** A read as the model saw it: the file's lines highlighted, with their anchors as the gutter. */
function read(): ToolView {
  const element = <div class="tool-body" />;
  let shown: Pick<ToolCall, "args" | "result" | "error" | "images" | "details"> | null = null;
  return {
    element,
    update({ args, result, error, images, details }) {
      if (
        shown?.args === args && shown.result === result && shown.error === error &&
        shown.images === images && shown.details === details
      ) return;
      shown = { args, result, error, images, details };
      if (images?.length && error === null && (result === "" || typeof result !== "string")) {
        return element.replaceChildren();
      }
      if (error !== null || typeof result !== "string") {
        return element.replaceChildren(<pre class={error ? "error" : ""}>{error ?? ""}</pre>);
      }
      if (modeOf(details).value?.editMode === "naive") {
        return element.replaceChildren(<pre>{result}</pre>);
      }
      const [body, note] = result.split(/\n\n(?=\[Showing lines)/);
      const rows = body.split("\n").map((row) => row.match(/^([A-Za-z]{4})│(.*)$/));
      if (rows.some((row) => row === null)) return element.replaceChildren(<pre>{result}</pre>);
      const start = offsetOf(args).value?.offset;
      element.replaceChildren(
        code(rows.map((row) => row![2]).join("\n"), {
          path: pathOf(args).value?.path ?? "",
          gutter: (i) => `${start === undefined ? i + 1 : start + i} ${rows[i]![1]}`,
        }),
        ...(note ? [<p class="note">{note}</p>] : []),
      );
    },
  };
}

function written(): ToolView {
  const element = <div class="tool-body" />;
  let shown: { args: unknown; error: string | null; streaming: boolean } | null = null;
  return {
    element,
    update({ args, error, status }) {
      const streaming = status === "streaming";
      if (shown?.args === args && shown.error === error && shown.streaming === streaming) return;
      shown = { args, error, streaming };
      // highlighted once the model has written all of it
      const path = streaming ? {} : { path: pathOf(args).value?.path ?? "" };
      element.replaceChildren(
        error !== null
          ? <pre class="error">{error}</pre>
          : code(contentOf(args).value?.content ?? "", path),
      );
    },
  };
}

function listing(): ToolView {
  const text = <pre /> as HTMLPreElement;
  return {
    element: <div class="tool-body">{text}</div>,
    update({ result, error }) {
      text.className = error ? "error" : "";
      text.textContent = error ?? (typeof result === "string" ? result : "");
    },
  };
}

export default defineRenderers<Event>({
  tools: {
    read: {
      initial: "closed",
      summary: (args) => {
        const offset = offsetOf(args).value?.offset;
        return `${pathOf(args).value?.path ?? ""}${offset === undefined ? "" : `:${offset}`}`;
      },
      body: read,
    },
    edit: {
      initial: "open",
      summary: (args) => {
        const edits = editsOf(args).value?.edits;
        return `${pathOf(args).value?.path ?? ""}${
          Array.isArray(edits) ? ` · ${edits.length} edit(s)` : ""
        }`;
      },
      body: diff,
    },
    write: { summary: (args) => pathOf(args).value?.path ?? null, body: written },
    list: { summary: (args) => pathOf(args).value?.path ?? ".", body: listing },
    bash: bashRenderer,
    powershell: powershellRenderer,
  },
  event: (event) =>
    event.type === "cd"
      ? (
        <span>
          cd → <code>{event.cwd}</code>
        </span>
      )
      : (
        <span>
          editing mode → <code>{event.editMode}</code>
        </span>
      ),
});