The app's own interface: agent chats first, two explorers, a viewer

Plain HTML, CSS and ES modules in ui/, no build step. The sidebar opens on agent
chats (this computer first), with chats on the server as the second tab; the
transcript draws the /api/v2 steps, follows a reply as it is written, answers
cards, and starts agent chats in one of the agent's folders. Two explorers kept
apart (this computer's, the server's) and a viewer: Markdown drawn by a safe
renderer that never parses HTML, code in read-only CodeMirror with the server's
token colours, HTML in the sealed frame, show calls opened in it. Settings for
the sign-in, the agent and its folders, notifications and updates; no admin
pages. Layout on fixed and shared tracks; the sidebar is a drawer below 48rem,
the viewer goes over the chat below 64rem. All 124 sentences in the server's
nine languages.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

ui/js/list.js

@@ -0,0 +1,81 @@
+// The sidebar's chats: agent chats (the default -- the agent on this computer is what the app is
+// for) or chats on the server. Agent chats on this computer come first; those on another device
+// of the account follow under their own heading.
+
+import { $, h, clear, when, append } from "./dom.js"
+import { get, why } from "./bridge.js"
+
+let ctx = null // { kind(), thisDevices(), open(id), current() }
+let rows = []
+let more = false
+
+/** The list again, from the server. */
+export async function refreshList() {
+  const kind = ctx.kind()
+  try {
+    const r = await get(`/chats?kind=${kind}&limit=50`)
+    if (ctx.kind() !== kind) return
+    rows = r.chats || []
+    more = !!r.more
+    render()
+  } catch (err) {
+    clear($("chat-list")).append(h("li", { class: "list__note is-error", text: why(err) }))
+  }
+}
+
+async function loadMore() {
+  const last = rows[rows.length - 1]
+  if (!last) return
+  const kind = ctx.kind()
+  const r = await get(`/chats?kind=${kind}&limit=50&before=${encodeURIComponent(last.id)}`)
+  if (ctx.kind() !== kind) return
+  rows = rows.concat(r.chats || [])
+  more = !!r.more
+  render()
+}
+
+export function markCurrent() {
+  const id = ctx.current()
+  for (const b of $("chat-list").querySelectorAll(".chatrow")) b.setAttribute("aria-current", String(b.dataset.id === id))
+}
+
+function row(c) {
+  const b = h(
+    "button",
+    { type: "button", class: `chatrow${c.unread ? " is-unread" : ""}`, dataset: { id: c.id }, title: c.title || "" },
+    h("span", { class: `dot${c.running ? " is-busy" : c.unread ? " is-new" : ""}`, "aria-hidden": "true" }),
+    h("span", { class: "row__title", text: c.title || t("New chat") }),
+    h("span", { class: "row__when", text: when(c.updated_at) }),
+    c.device?.directory ? h("span", { class: "row__sub", title: c.device.directory }, h("bdi", { text: c.device.directory })) : null,
+  )
+  b.addEventListener("click", () => ctx.open(c.id))
+  return h("li", null, b)
+}
+
+function render() {
+  const list = clear($("chat-list"))
+  const kind = ctx.kind()
+  const visible = rows.filter((r) => !r.archived && !r.temporary)
+  if (!visible.length) {
+    list.append(
+      h("li", {
+        class: "list__note",
+        text: kind === "agent" ? t("No agent chat yet. Start one: it works in a folder on this computer.") : t("No chat yet."),
+      }),
+    )
+    return
+  }
+  if (kind === "agent") {
+    const mine = ctx.thisDevices()
+    const here = visible.filter((r) => r.device && mine.includes(r.device.token_id))
+    const there = visible.filter((r) => !(r.device && mine.includes(r.device.token_id)))
+    if (here.length) append(list, [h("li", { class: "list__head", text: t("This computer") }), here.map(row)])
+    if (there.length) append(list, [h("li", { class: "list__head", text: t("Other devices") }), there.map(row)])
+  } else append(list, visible.map(row))
+  if (more) list.append(h("li", null, h("button", { type: "button", class: "btn btn--sm list__more", text: t("More"), onclick: loadMore })))
+  markCurrent()
+}
+
+export function initList(context) {
+  ctx = context
+}