char-slop/berry

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

Charlotte Somallow project reorderingb4fc6cf2026-10-29

import { Signal } from "@char/aftercare";
import { projectFor, type ProjectIndex } from "@berry/api/projects.ts";
import { moveGroup, projectEditor, sidebarOrder } from "./projects.tsx";
import { api, connected, watch } from "./client.ts";
import { conversationName } from "./conversation-name.ts";
import { conversation, draft, type ExtensionInfo, type Shared } from "./conversation.tsx";
import { newConversation } from "./new-conversation.tsx";
import { type ModelInfo, type ModelRef, settings } from "./settings.tsx";
import { syncRenderers } from "./renderers.ts";
import { computed, type Handle, keyed, relativeTime, Scope, swap, tidDate } from "./ui.ts";
import { announcements } from "./notifications.ts";
import { beforeNavigate } from "./navigation.ts";

type ConversationInfo = {
  id: number;
  created: number;
  title?: string;
  parent?: { tid: string; at: number };
  owner?: string;
  branches?: { id: number; at: number; created: number }[];
  head?: number;
  archived?: number;
};
type Item = {
  tid: string;
  title?: string;
  depth: number;
  forks: number;
  agents: number;
  /** Whether this row is a background subagent, which reads as delegated rather than forked. */
  subagent: boolean;
  open: boolean;
  archived: boolean;
  parentLink?: string;
};
type Summary = {
  busy: boolean;
  preview: string;
  reply?: string;
  unread: boolean;
  updated: number;
  environment?: string;
  cwd?: string;
};

const EMPTY: readonly never[] = [];
/** A row of the sidebar: a conversation, where it sits in the list, and how it is doing. */
type Row = Item & { summary: Summary | null; active: boolean };

function row(first: Row, toggle: (tid: string) => void): Handle<Row> {
  const { tid } = first;
  let shown: Row | null = null;
  const chevron = (
    <button
      type="button"
      class="chevron"
      _onclick={() => toggle(tid)}
    />
  ) as HTMLButtonElement;
  const preview = <span title="Double-click to rename" /> as HTMLElement;
  const forks = <span class="forks" /> as HTMLElement;
  const busy = <span /> as HTMLElement;
  const time = <time /> as HTMLTimeElement;
  const parentLink = (
    <a class="parent-link" aria-label="Parent conversation" title="parent conversation" hidden>↖</a>
  ) as HTMLAnchorElement;
  const link = (
    <a href={`#/${tid}`} title={tid}>
      {first.subagent
        ? <span class="delegated" role="img" aria-label="subagent" title="subagent">↳</span>
        : undefined}
      {preview}
      {forks}
      {busy}
      {time}
    </a>
  ) as HTMLAnchorElement;
  const name = conversationName(
    link,
    preview,
    (title) => api("PATCH", `/api/conversations/${tid}`, { title }),
  );
  const changeArchived = () => {
    actions.open = false;
    void api("PATCH", `/api/conversations/${tid}`, { archived: !shown!.archived }).catch(
      console.error,
    );
  };
  const archive = (
    <button
      type="button"
      class="archive"
      _onclick={changeArchived}
    />
  ) as HTMLButtonElement;
  const mobileArchive = (
    <button
      type="button"
      class="link"
      _onclick={changeArchived}
    />
  ) as HTMLButtonElement;
  const actions = (
    <details
      class="conversation-actions"
      _onkeydown={(event) => {
        if (event.key === "Escape") {
          actions.open = false;
          actions.querySelector("summary")!.focus();
        }
      }}
    >
      <summary aria-label="Conversation actions" title="Conversation actions">⋯</summary>
      <div class="conversation-menu">
        <button
          type="button"
          class="link"
          _onclick={() => {
            actions.open = false;
            name.start();
          }}
        >
          rename
        </button>
        {mobileArchive}
      </div>
    </details>
  ) as HTMLDetailsElement;
  const element = (
    <div>
      {chevron}
      {name.editor}
      {link}
      {parentLink}
      {archive}
      {actions}
    </div>
  ) as HTMLElement;
  const update = (next: Row) => {
    const previous = shown;
    shown = next;
    parentLink.hidden = !next.parentLink;
    if (next.parentLink) parentLink.href = `#/${next.parentLink}`;
    else parentLink.removeAttribute("href");
    element.className = `item${next.active ? " active" : ""}${
      next.summary?.unread ? " unread" : ""
    }`;
    if (next.depth !== previous?.depth) element.style.setProperty("--depth", String(next.depth));
    if (
      next.forks !== previous?.forks || next.open !== previous.open ||
      next.agents !== previous?.agents
    ) {
      chevron.disabled = next.forks === 0;
      chevron.setAttribute("aria-expanded", String(next.open));
      chevron.title = `${next.forks} ${next.forks === 1 ? "fork" : "forks"}` +
        (next.agents > 0
          ? `, ${next.agents} live ${next.agents === 1 ? "subagent" : "subagents"}`
          : "");
      forks.textContent = next.open || next.forks === 0 ? "" : `+${next.forks}`;
    }
    if (next.summary !== previous?.summary || next.title !== previous?.title || previous === null) {
      preview.className = next.title || next.summary?.preview ? "preview" : "preview tid";
      name.update(next.title, next.summary?.preview || tid);
    }
    const date = new Date(next.summary?.updated ?? tidDate(tid).getTime());
    time.textContent = relativeTime(date);
    time.title = date.toLocaleString();
    time.dateTime = date.toISOString();
    if (next.summary !== previous?.summary) {
      busy.className = next.summary?.busy
        ? "busy on"
        : next.summary?.unread
        ? "busy unread"
        : "busy";
      busy.title = next.summary?.busy ? "answering" : next.summary?.unread ? "unread" : "";
    }
    if (next.archived !== previous?.archived) {
      archive.textContent = mobileArchive.textContent = next.archived ? "restore" : "archive";
    }
  };
  update(first);
  return { node: element, update, dispose: name.dispose };
}

export function app(scope: Scope): Element {
  const shared: Shared = {
    extensions: new Signal<readonly ExtensionInfo[]>(EMPTY),
    models: new Signal<readonly ModelInfo[]>(EMPTY),
    enabled: new Signal<readonly ModelRef[]>(EMPTY),
    machines: new Signal<readonly string[]>(["local"]),
    projects: new Signal<ProjectIndex>({}),
    refreshModels: () => {
      api<ModelInfo[]>("GET", "/api/models").then((list) => shared.models.set(list)).catch(
        console.error,
      );
    },
  };
  scope.add(
    watch<{ models: ModelRef[]; environments?: Record<string, unknown> }>("settings", (value) => {
      shared.enabled.set(value.models);
      shared.machines.set(["local", ...Object.keys(value.environments ?? {})]);
    }),
  );
  // views wait for the extensions' frontends, and draw again when one changes: a card keeps the renderer it was
  // drawn with
  const frontends = new Signal<{ version: number } | null>(null);
  let syncing = Promise.resolve();
  scope.add(watch<ExtensionInfo[]>("extensions", (list) => {
    syncing = syncing.then(async () => {
      const changed = await syncRenderers(list);
      shared.extensions.set(list);
      if (changed || frontends.get() === null) {
        frontends.set({ version: (frontends.get()?.version ?? 0) + 1 });
      }
    });
  }));
  shared.refreshModels();

  // a conversation, or one of its extensions' views (`<tid>/<extension>`, then the view's own route); a draft
  // continuing it from one of its entries (`<tid>@<entry>`), or starting a new one from it (`<tid>/fork@<entry>`);
  // a new conversation (`new`, or `new/<project>` in a project, `new/` in none); or settings
  const route = () =>
    location.hash.match(
      /^#\/([a-z2-7]{13}(?:(?:\/fork)?@\d+|\/[^/@]+(?:\/.*)?)?|new(?:\/[^/]*)?|settings)$/,
    )?.[1] ?? "";
  const VIEW = /^([a-z2-7]{13})\/([^/@]+(?:\/.*)?)$/;
  const selected = new Signal(route());
  // the conversation stays put as its views open, close and move; it reads `viewing` once it is built, so first
  const viewing = computed(scope, [selected], () => selected.get().match(VIEW)?.[2] ?? "");
  const page = computed(scope, [selected], () => selected.get().replace(VIEW, "$1"));
  let navigation = 0;
  const onHash = () => {
    const next = route();
    const current = ++navigation;
    const apply = (allowed: boolean) => {
      if (current !== navigation) return;
      if (allowed) selected.set(next);
      else document.defaultView!.history.replaceState(null, "", `#/${selected.get()}`);
    };
    const allowed = beforeNavigate(next);
    if (typeof allowed === "boolean") apply(allowed);
    else void allowed.then(apply, () => apply(false));
  };
  addEventListener("hashchange", onHash);
  scope.add(() => {
    navigation++;
    removeEventListener("hashchange", onHash);
  });
  const selectedTid = () => selected.get().split(/[@/]/)[0];

  /** The conversations the sidebar lists: every conversation, owned or not. */
  let listed: Record<string, ConversationInfo> = {};
  let summaries: Record<string, Summary> = {};
  const projectOrder = new Signal<readonly string[]>([]);
  const editor = projectEditor(scope, shared.machines, shared.projects, projectOrder);
  // each list remembers its own folds, and the archive's projects start folded
  const folds = (key: string, folded: boolean) => {
    let flipped: Set<string>;
    try {
      flipped = new Set(JSON.parse(localStorage.getItem(key) ?? "[]"));
    } catch {
      flipped = new Set();
    }
    return {
      open: (id: string) => flipped.has(id) === folded,
      reveal: (id: string) => folded ? flipped.add(id) : flipped.delete(id),
      toggle: (id: string) => {
        if (!flipped.delete(id)) flipped.add(id);
        localStorage.setItem(key, JSON.stringify([...flipped]));
      },
    };
  };
  const listFolds = folds("berry.collapsed-projects", false);
  const archiveFolds = folds("berry.expanded-archived-projects", true);
  const groupFor = (tid: string) => {
    const summary = summaries[tid];
    return projectFor(
      shared.projects.get(),
      summary?.environment && summary.cwd
        ? { environment: summary.environment, cwd: summary.cwd }
        : undefined,
    ) ?? "";
  };
  // a background subagent sits under the conversation that owns it, as a fork under its parent
  const above = (tid: string) => listed[tid]?.parent?.tid ?? listed[tid]?.owner;
  const archived = (tid: string) => listed[tid].archived !== undefined;
  // in the archive, an archived conversation is a root unless one it was forked from is archived too
  const archivedAbove = (tid: string) => {
    for (
      let up = listed[tid].parent?.tid;
      up && listed[up] && groupFor(up) === groupFor(tid);
      up = listed[up].parent?.tid
    ) {
      if (archived(up)) return true;
    }
    return false;
  };
  let revealed = "";
  // the list holds the conversations in use, or the archive: archiving one puts it away with the forks under it
  let archive = false;
  // forks nest under their parents, newest first; the way to the selected conversation opens itself
  const opened = new Set<string>();
  const reveal = () => {
    const group = groupFor(selectedTid());
    if (listed[selectedTid()]) {
      const inArchive = archived(selectedTid()) || archivedAbove(selectedTid());
      (inArchive ? archiveFolds : listFolds).reveal(group);
    }
    for (let tid = above(selectedTid()); tid && groupFor(tid) === group; tid = above(tid)) {
      opened.add(tid);
    }
    revealed = `${selectedTid()}:${group}`;
  };

  const list = <div class="conversations" />;
  // the group whose heading is being dragged to a new place in the order
  let dragging: string | undefined;
  // a row's menu closes once the reader is elsewhere, another row's menu included
  const leaveMenus = (event: Event) => {
    for (const menu of list.querySelectorAll<HTMLDetailsElement>(".conversation-actions[open]")) {
      if (!menu.contains(event.target as Node)) menu.open = false;
    }
  };
  for (const type of ["pointerdown", "focusin"]) document.addEventListener(type, leaveMenus);
  scope.add(() => {
    for (const type of ["pointerdown", "focusin"]) document.removeEventListener(type, leaveMenus);
  });
  // where a narrow screen, which shows the list or a view but not both, goes back to the list
  const back = <a href="#/" class="back" title="conversations" aria-label="conversations" />;
  type Group = {
    kind: "group";
    id: string;
    name: string;
    open: boolean;
    count: number;
    unread: boolean;
    busy: boolean;
  };
  type SidebarItem = Group | (Row & { kind: "conversation" });
  const rows = keyed<SidebarItem, string>(
    list,
    (item) => item.kind === "group" ? `group:${item.id}` : item.tid,
    (item) => {
      if (item.kind === "conversation") {
        const handle = row(item, toggle);
        return {
          node: handle.node,
          dispose: handle.dispose,
          update(value: SidebarItem) {
            if (value.kind === "conversation") handle.update?.(value);
          },
        };
      }
      const name = <span class="project-name" /> as HTMLElement;
      const count = <span class="project-count" /> as HTMLElement;
      const activity = <span /> as HTMLElement;
      const toggleGroup = (
        <button
          type="button"
          class="project-toggle"
          _onclick={() => {
            (archive ? archiveFolds : listFolds).toggle(item.id);
            draw();
          }}
        >
          {name}
          {count}
          {activity}
        </button>
      ) as HTMLButtonElement;
      toggleGroup.draggable = true;
      const add = (
        <button
          type="button"
          class="link project-action"
          title="new conversation"
          _onclick={() => location.hash = `#/new/${item.id}`}
        >
          +
        </button>
      ) as HTMLButtonElement;
      const edit = (
        <button
          type="button"
          class="link project-action"
          title="edit project"
          _onclick={() => editor.open(item.id)}
        >
          ⋯
        </button>
      ) as HTMLButtonElement;
      const node = (
        <div class="project-group" data-project={item.id}>
          {toggleGroup}
          {add}
          {edit}
        </div>
      ) as HTMLElement;
      node.ondragstart = (event) => {
        dragging = item.id;
        event.dataTransfer?.setData("text/plain", name.textContent!);
      };
      node.ondragend = () => dragging = undefined;
      node.ondragover = (event) => {
        if (dragging === undefined || dragging === item.id) return;
        event.preventDefault();
        // the dragged group takes this one's place, so lands after it when moving down
        const ids = sidebarOrder(shared.projects.get(), projectOrder.get());
        node.dataset.drop = ids.indexOf(dragging) < ids.indexOf(item.id) ? "after" : "before";
      };
      node.ondragleave = () => delete node.dataset.drop;
      node.ondrop = (event) => {
        event.preventDefault();
        delete node.dataset.drop;
        const projects = shared.projects.get();
        const at = sidebarOrder(projects, projectOrder.get()).indexOf(item.id);
        moveGroup(projects, projectOrder, dragging!, at).catch((error) => alert(error.message));
      };
      const update = (value: SidebarItem) => {
        if (value.kind !== "group") return;
        name.textContent = value.name;
        count.textContent = value.count ? String(value.count) : "";
        toggleGroup.setAttribute("aria-expanded", String(value.open));
        // the rows say how each is doing while they show
        activity.className = value.open
          ? "busy"
          : value.busy
          ? "busy on"
          : value.unread
          ? "busy unread"
          : "busy";
        activity.title = value.open ? "" : value.busy ? "answering" : value.unread ? "unread" : "";
        add.setAttribute("aria-label", `New conversation in ${value.name}`);
        edit.setAttribute("aria-label", `Edit ${value.name}`);
      };
      update(item);
      return { node, update };
    },
  );
  const archiveToggle = (
    <button
      type="button"
      class="link archive-toggle"
      _onclick={() => {
        archive = !archive;
        draw();
      }}
    />
  ) as HTMLButtonElement;
  function draw() {
    if (revealed !== `${selectedTid()}:${groupFor(selectedTid())}`) reveal();
    const owned = (tid: string) => listed[tid].owner !== undefined;
    // a subagent shows only while it works, and never in the archive or a group's count
    const ordered = Object.keys(listed)
      .filter((tid) => !owned(tid) || (!archive && summaries[tid]?.busy && !archived(tid)))
      .sort((a, b) =>
        (summaries[b]?.updated ?? listed[b].created) -
          (summaries[a]?.updated ?? listed[a].created) || b.localeCompare(a)
      );
    const children = Map.groupBy(ordered, (tid) => {
      const up = above(tid);
      return up && listed[up] && groupFor(up) === groupFor(tid) ? up : null;
    });
    const active = selectedTid();
    const items: SidebarItem[] = [];
    const visit = (tid: string, depth: number) => {
      const below = children.get(tid) ?? [];
      const forks = below.filter((fork) => !owned(fork) && (archive || !archived(fork)));
      const agents = below.filter(owned);
      const open = opened.has(tid);
      const up = above(tid);
      items.push({
        kind: "conversation",
        tid,
        parentLink: up && listed[up] && groupFor(up) !== groupFor(tid) ? up : undefined,
        title: listed[tid].title,
        depth,
        forks: forks.length,
        agents: agents.length,
        subagent: owned(tid),
        open,
        archived: archived(tid),
        summary: summaries[tid] ?? null,
        active: tid === active,
      });
      if (open) { for (const fork of forks) visit(fork, depth + 1); }
      // a subagent shows whether or not the forks beside it are open
      for (const agent of agents) visit(agent, depth + 1);
    };
    const roots = archive
      ? ordered.filter((tid) => archived(tid) && !archivedAbove(tid))
      : (children.get(null) ?? []).filter((tid) => !archived(tid));
    const projects = shared.projects.get();
    // without projects, the list is as it always was: no headings, nothing to fold
    const headed = Object.keys(projects).length > 0;
    for (const id of sidebarOrder(projects, projectOrder.get())) {
      const group = { id, name: id === "" ? "no project" : projects[id].name };
      const members = ordered.filter((tid) =>
        !owned(tid) && groupFor(tid) === group.id &&
        (archive === (archived(tid) || archivedAbove(tid)))
      );
      // an empty project stays, to be started in; the archive shows only what it holds
      if (members.length === 0 && (archive || group.id === "")) continue;
      const open = !headed || (archive ? archiveFolds : listFolds).open(group.id);
      if (headed) {
        items.push({
          kind: "group",
          ...group,
          open,
          count: members.length,
          busy: members.some((tid) => summaries[tid]?.busy),
          unread: members.some((tid) => summaries[tid]?.unread),
        });
      }
      if (open) {
        for (const tid of roots.filter((tid) => groupFor(tid) === group.id)) visit(tid, 0);
      }
    }
    rows.sync(items);
    list.toggleAttribute("data-archive", archive);
    back.classList.toggle(
      "unread",
      Object.keys(listed).some((tid) => tid !== active && summaries[tid]?.unread),
    );

    const archivedCount =
      Object.entries(listed).filter(([tid, info]) => info.archived !== undefined && !owned(tid))
        .length;
    archiveToggle.hidden = !archive && archivedCount === 0;
    archiveToggle.textContent = archive ? "back to conversations" : `archived (${archivedCount})`;
  }
  function toggle(tid: string) {
    if (!opened.delete(tid)) opened.add(tid);
    draw();
  }
  scope.add(watch<Record<string, ConversationInfo>>("conversations", (index) => {
    listed = { ...index };
    reveal();
    draw();
  }));
  const announcing = announcements({
    active: selectedTid,
    name: (tid) => listed[tid]?.title ?? summaries[tid]?.preview ?? "",
  });
  scope.add(watch<Record<string, Summary>>("summaries", (value) => {
    summaries = value;
    announcing(value);
    draw();
  }));
  scope.add(
    selected.subscribe(() => {
      reveal();
      draw();
    }).unsubscribe,
  );
  scope.add(rows.dispose);
  scope.add(watch<ProjectIndex>("projects", (value) => shared.projects.set(value)));
  scope.add(shared.projects.subscribe(draw).unsubscribe);
  scope.add(watch<{ ids: string[] }>("project-order", (value) => projectOrder.set(value.ids)));
  scope.add(projectOrder.subscribe(draw).unsubscribe);
  const clock = setInterval(draw, 60_000);
  scope.add(() => clearInterval(clock));
  draw();

  const main = <div class="view" />;
  // each view brings its bar and its pane, which take their own cells of the app's grid
  swap(
    scope,
    main,
    computed(
      scope,
      [page, frontends],
      () => (frontends.get() ? { route: page.get() } : null),
    ),
    (view, viewScope) =>
      view === null ? [<header class="bar" />, <div class="pane empty" />] : view.route === ""
        ? [
          <header class="bar" />,
          <div class="pane empty">
            <p>
              <a href="#/new">start a conversation</a>, or pick one
            </p>
          </div>,
        ]
        : view.route === "settings"
        ? settings(viewScope, shared)
        : view.route === "new" || view.route.startsWith("new/")
        ? newConversation(viewScope, shared, view.route === "new" ? null : view.route.slice(4))
        : view.route.includes("@")
        ? draft(
          viewScope,
          view.route.split(/[@/]/)[0],
          Number(view.route.split("@")[1]),
          view.route.includes("/fork"),
        )
        : conversation(viewScope, view.route, shared, viewing),
  );

  const dot = <span class="dot" title="connection" /> as HTMLElement;
  scope.add(
    connected.subscribeImmediate((up) => (dot.className = up ? "dot up" : "dot")).unsubscribe,
  );

  return (
    <div
      class={selected.derive((route) =>
        route === "" ? "app listing" : VIEW.test(route) ? "app viewing" : "app"
      )}
    >
      <header class="brand-bar">
        {dot}
        <span class="brand">berry</span>
        <a
          href="#/settings"
          class={selected.derive((current) => (current === "settings" ? "active" : ""))}
        >
          settings
        </a>
        <button
          type="button"
          class="link"
          title="restart berry, interrupting then auto-restarting conversation turns"
          _onclick={async function () {
            this.disabled = true;
            try {
              await api("POST", "/api/restart");
            } catch (error) {
              alert(error instanceof Error ? error.message : String(error));
            } finally {
              this.disabled = false;
            }
          }}
        >
          restart
        </button>
      </header>
      <nav class="sidebar">
        <a
          href="#/new"
          class={selected.derive((current) =>
            current === "new" || current.startsWith("new/") ? "new active" : "new"
          )}
        >
          new conversation
        </a>
        {list}
        <footer class="sidebar-footer">
          <button type="button" class="link" _onclick={() => editor.open()}>
            new project
          </button>
          {archiveToggle}
        </footer>
      </nav>
      {back}
      {main}
      {editor.element}
    </div>
  );
}