HomerandClaude Opus 5.5
4b4e63f622
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>
82 lines
3.0 KiB
JavaScript
82 lines
3.0 KiB
JavaScript
// 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
|
|
}
|